Sunday, January 9, 2011
Tuesday, December 14, 2010
Notes
Call to action: Shop
Social networks
Levi's - facebook
Gap - facebook
Microsites - run, then thow away
Social networks
Levi's - facebook
Gap - facebook
Microsites - run, then thow away
Information Anxiety
Information Anxiety
Editorial Reviews
Amazon.com Review
Information might want to be free; but, why should we free it? We've got enough trouble keeping track of all the petabits that already run around untethered, and risk a computer counterrevolution if we let the situation get much crazier. Information architect Richard Saul Wurman swept the field clear in 1989 with his groundbreaking book that foresaw the problems of data clutter and proposed a radical new means of organizing and presenting knowledge humanistically; for the new century, he has revised it substantially as Information Anxiety 2. This book is sparklingly clear and readable--it'd better be, after all--and offers insight not only to designers, educators, and content developers, but also to anyone who needs to communicate effectively through dense clouds of facts. If Wurman occasionally indulges in New Age-y pop psychology, his analysis is never muddy, and the more hardheaded reader will forgive him soon enough. The discussion alternates between describing the deeply stressful task of absorbing poorly organized data and exploring solutions that require a bit of rethinking, but that reward such an investment with improved understanding and, maybe, a state change from information to wisdom. We could do worse--if we don't pay attention to Wurman and his colleagues, we almost certainly will. --Rob Lightner --This text refers to an out of print or unavailable edition of this title.
From Publishers Weekly
Wurman identifies a special ailment of this age of communicationsso-called "information anxiety," caused, in his view, by an overwhelming flood of data, much of it from computers and much of it unintelligible. The author, a graphic artist and architect, argues that "learning is remembering what you are interested in," and proposes to help the anxious individual to select personally relevant information from the body of raw data or "non-information." He also demonstrates how to "access" resources and take advantage of experiences, suggesting specific information-processing skills and media habits. His breezy, colloquial style using short, headlined paragraphs is sprinkled with graphics and notes, imaginative quotes and anecdotes. This stimulating book is worth reading in or out of sequence if only for Wurman's views on education and the need to "transform information into structured knowledge." Author tour.
Copyright 1988 Reed Business Information, Inc.
- - -
Most Helpful Customer Reviews
75 of 80 people found the following review helpful:
3.0 out of 5 stars Information Architecture in a confident voice, January 28, 2001
By Andrew Otwell "heyotwell" (Seattle, WA) - See all my reviewsThis review is from: Information Anxiety 2 (Hayden/Que) (Paperback)
Well, sure, it's good. Wurman did come up with the term Information Architecture (as he reminds us), and has some good insightful stuff to say about it. Too bad that much of this book is pretty much the same kinds of information that you find on the web about IA: Mark Hurst and Nathan Shedroff have pieces nearly identical to stuff on their sites, and there are copious quotations from familiar online voices and sources. A chapter about online commerce as "conversation" is derived pretty much wholesale from the Cluetrain Manifesto. In the end, it all pretty much boils down to listen to your customers, take some risks, ask the right questions.
Some of Wurman's opinions sound a little disingenuous in light of his own online work: a chapter which contains the standard complaints about high-bandwidth sites that don't offer useful information (useless plug-ins, over-reliance on graphics instead of text, etc) also points us to Wurman's Understanding USA web site, which starts with a Flash intro animation, is built almost solely from graphics, and even uses a Java applet in its Site Map.
It's too bad, but this really comes across as an entry-level text about presenting information in multiple contexts, including online. There's more about management style than I'd care for, and less about what kinds of visual presentations support what kinds of information. It's admirably up-to-date: it's impressive that he managed to include the Florida ballot in a book printed in November 2000, for example.
Finally, I could have done without the frequent and lengthy references to TED, Wurman's own annual conference of designers, businesspeople, and entertainers. The thing sounds like fun, but in the context of the book, the relevance is rarely clear.
- - -
74 of 79 people found the following review helpful:
1.0 out of 5 stars A Quick-and-Dirty Mishmash of Platitudes, January 11, 2002
By Robert T. Myers (Los Angeles, CA United States) - See all my reviews
(REAL NAME) This review is from: Information Anxiety 2 (Hayden/Que) (Paperback)
I am taking the unusual step of rating this book "1 star" to express my extremely high level of dissatisfaction at its quality and usefullness. There is no question that Richard Saul Wurman is a highly gifted individual, and his ACCESS books are fabulous. But this poorly-edited, disorganized book fails to capture or convey any of the insights that went into that or other successful Wurman projects.
My guess is that this project was conceived as a quickie update to the original Information Anxiety to take advantage of Internet mania, and as such much of the work was delegated to others, but without sufficient review and editing. (There are too many editing mistakes to list here, but suffice it to say that probably few books have a misspelling in the Table Of Contents as this one does -- "Informatgion" instead of "Information".)
RSW tells us that it's important to always start off with what the question is. Problem is, he doesn't follow his own advice in that book. He careens uncontrollably from gushy predictions about the future, to cataclysmic warnings of information deluge, to superficial suggestions on software and web design, to facile pop management advice, The only thread connecting all these disjointed pieces is that he strictly limits himself to talking about how important something or other is, without ever giving specific advice about how to approach it.
I am personally interested in the field of localization and globalization. So naturally I was curious as to what insight RSW brought to this area. What I found was a single, lonely page on the topic, with a few lines of simplistic patter, and a strange, unexplained diagram of various fountain pens with country names associated with each.
I am also interested in the combination of text and graphics to present information and in fact bought this book thinking it might have some insights in that regards. So I was quite happy to see in the Table of Contents a section Design in the Digital Age, summarized as "In this Digital Age we need to focus on the connections among all design elements: medium, words, pictures, and sound." Alas, true to form, all the section in question does is repeat that we need to focus on this, with no clue as how we might actually do that, nor a single example in sight. To get an idea of the poor editing quality of this book, consider the following paragraph from this section:
"Where words meet pictures meet sound creates understanding. Are you a value-based organization? A service-based organization? A quality-based organization? Are you all three? We test communication by conveying a message and having the recipient understand it, be interested in it, and remember it. Any other measure is unimportant and invalid." Does anyone else wonder how the stuff about organizations fits in here? It's just random cut-and-paste content that accidentally found its way here, never to receive the benefit of the editor's pen. Signs of rampant cut-and-pasting abound throughout the book.
Although not really the fault of the author(s), the book is also seriously dated, having come out while there was still some degree of dot-com mania going on (although the peak was passed). So you can read this book on sort of an archaeological level, to recall all the bizarre things people were saying back in those heady days. Internet refrigerators, anyone?
I probably don't need to summarize; let me simply say you are best off spending your time and money on virtually any book on this topic besides this one.
Help other customers find the most helpful reviews
Was this review helpful to you? Yes No Report abuse
Permalink
Comment Comment
18 of 21 people found the following review helpful:
5.0 out of 5 stars The real problem is a malinformation explosion, March 8, 2001
By Charles Ashbacher "(cashbacher@yahoo.com)" (Marion, Iowa United States(cashbacher@yahoo.com)) - See all my reviews
(TOP 50 REVIEWER) (VINE VOICE) This review is from: Information Anxiety 2 (Hayden/Que) (Paperback)
The basic theme of this book reinforces my long-held belief that the next killer app in computing will be some new way to visually display relationships between information. A new discipline is also going to spring up and those good at it will be in great demand. That new area of study will be a knowledge distiller, someone expert in taking the enormous amount of information about a topic and reducing it down to a base form. We see the initial steps in this trend with the extraordinary success of the ". . For Dummies" series of books. Their appeal is based on the basic formula of making things as simple as possible but no simpler.
As Wurman points out, while there is an information explosion, the real problem is a malinformation (my term) explosion. In other words, information that does not inform. This is not just a reference to that which is inaccurate, but information that is correct but so malformed or obscure to be misleading. He also argues that a critical rethinking needs to be done concerning how we learn. The premise is that the rewards for asking the right questions need to be improved rather than the continued emphasis on answering questions. We also need to rediscover much of our inner child.
At some point in our lives, we "mature" to the state where we will do almost anything to avoid embarrassment. This trait leads us to ignore inconsistencies and sit in silence when we don't understand. The childlike innocence that causes us to ask "obvious" questions goes away, replaced by fear of failure, which leads to an aversion to risk. Without the willingness to take a chance, many new things are not attempted, which limits the options for us all.
This is a book that you must think deeply about. The world is changing rapidly, and the most successful people will be those who know how to cull knowledge down to the true essentials. There are an enormous number of ideas in the book that can be used to assist this process. If you value the future and want to have a significant part in creating it, then you should read this book. Proper implementation of some of the ideas presented here will change the way we do things in the future. Help other customers find the most helpful reviews
Was this review helpful to you? Yes No Report abuse
Permalink
Comment Comment
Editorial Reviews
Amazon.com Review
Information might want to be free; but, why should we free it? We've got enough trouble keeping track of all the petabits that already run around untethered, and risk a computer counterrevolution if we let the situation get much crazier. Information architect Richard Saul Wurman swept the field clear in 1989 with his groundbreaking book that foresaw the problems of data clutter and proposed a radical new means of organizing and presenting knowledge humanistically; for the new century, he has revised it substantially as Information Anxiety 2. This book is sparklingly clear and readable--it'd better be, after all--and offers insight not only to designers, educators, and content developers, but also to anyone who needs to communicate effectively through dense clouds of facts. If Wurman occasionally indulges in New Age-y pop psychology, his analysis is never muddy, and the more hardheaded reader will forgive him soon enough. The discussion alternates between describing the deeply stressful task of absorbing poorly organized data and exploring solutions that require a bit of rethinking, but that reward such an investment with improved understanding and, maybe, a state change from information to wisdom. We could do worse--if we don't pay attention to Wurman and his colleagues, we almost certainly will. --Rob Lightner --This text refers to an out of print or unavailable edition of this title.
From Publishers Weekly
Wurman identifies a special ailment of this age of communicationsso-called "information anxiety," caused, in his view, by an overwhelming flood of data, much of it from computers and much of it unintelligible. The author, a graphic artist and architect, argues that "learning is remembering what you are interested in," and proposes to help the anxious individual to select personally relevant information from the body of raw data or "non-information." He also demonstrates how to "access" resources and take advantage of experiences, suggesting specific information-processing skills and media habits. His breezy, colloquial style using short, headlined paragraphs is sprinkled with graphics and notes, imaginative quotes and anecdotes. This stimulating book is worth reading in or out of sequence if only for Wurman's views on education and the need to "transform information into structured knowledge." Author tour.
Copyright 1988 Reed Business Information, Inc.
- - -
Most Helpful Customer Reviews
75 of 80 people found the following review helpful:
3.0 out of 5 stars Information Architecture in a confident voice, January 28, 2001
By Andrew Otwell "heyotwell" (Seattle, WA) - See all my reviewsThis review is from: Information Anxiety 2 (Hayden/Que) (Paperback)
Well, sure, it's good. Wurman did come up with the term Information Architecture (as he reminds us), and has some good insightful stuff to say about it. Too bad that much of this book is pretty much the same kinds of information that you find on the web about IA: Mark Hurst and Nathan Shedroff have pieces nearly identical to stuff on their sites, and there are copious quotations from familiar online voices and sources. A chapter about online commerce as "conversation" is derived pretty much wholesale from the Cluetrain Manifesto. In the end, it all pretty much boils down to listen to your customers, take some risks, ask the right questions.
Some of Wurman's opinions sound a little disingenuous in light of his own online work: a chapter which contains the standard complaints about high-bandwidth sites that don't offer useful information (useless plug-ins, over-reliance on graphics instead of text, etc) also points us to Wurman's Understanding USA web site, which starts with a Flash intro animation, is built almost solely from graphics, and even uses a Java applet in its Site Map.
It's too bad, but this really comes across as an entry-level text about presenting information in multiple contexts, including online. There's more about management style than I'd care for, and less about what kinds of visual presentations support what kinds of information. It's admirably up-to-date: it's impressive that he managed to include the Florida ballot in a book printed in November 2000, for example.
Finally, I could have done without the frequent and lengthy references to TED, Wurman's own annual conference of designers, businesspeople, and entertainers. The thing sounds like fun, but in the context of the book, the relevance is rarely clear.
- - -
74 of 79 people found the following review helpful:
1.0 out of 5 stars A Quick-and-Dirty Mishmash of Platitudes, January 11, 2002
By Robert T. Myers (Los Angeles, CA United States) - See all my reviews
(REAL NAME) This review is from: Information Anxiety 2 (Hayden/Que) (Paperback)
I am taking the unusual step of rating this book "1 star" to express my extremely high level of dissatisfaction at its quality and usefullness. There is no question that Richard Saul Wurman is a highly gifted individual, and his ACCESS books are fabulous. But this poorly-edited, disorganized book fails to capture or convey any of the insights that went into that or other successful Wurman projects.
My guess is that this project was conceived as a quickie update to the original Information Anxiety to take advantage of Internet mania, and as such much of the work was delegated to others, but without sufficient review and editing. (There are too many editing mistakes to list here, but suffice it to say that probably few books have a misspelling in the Table Of Contents as this one does -- "Informatgion" instead of "Information".)
RSW tells us that it's important to always start off with what the question is. Problem is, he doesn't follow his own advice in that book. He careens uncontrollably from gushy predictions about the future, to cataclysmic warnings of information deluge, to superficial suggestions on software and web design, to facile pop management advice, The only thread connecting all these disjointed pieces is that he strictly limits himself to talking about how important something or other is, without ever giving specific advice about how to approach it.
I am personally interested in the field of localization and globalization. So naturally I was curious as to what insight RSW brought to this area. What I found was a single, lonely page on the topic, with a few lines of simplistic patter, and a strange, unexplained diagram of various fountain pens with country names associated with each.
I am also interested in the combination of text and graphics to present information and in fact bought this book thinking it might have some insights in that regards. So I was quite happy to see in the Table of Contents a section Design in the Digital Age, summarized as "In this Digital Age we need to focus on the connections among all design elements: medium, words, pictures, and sound." Alas, true to form, all the section in question does is repeat that we need to focus on this, with no clue as how we might actually do that, nor a single example in sight. To get an idea of the poor editing quality of this book, consider the following paragraph from this section:
"Where words meet pictures meet sound creates understanding. Are you a value-based organization? A service-based organization? A quality-based organization? Are you all three? We test communication by conveying a message and having the recipient understand it, be interested in it, and remember it. Any other measure is unimportant and invalid." Does anyone else wonder how the stuff about organizations fits in here? It's just random cut-and-paste content that accidentally found its way here, never to receive the benefit of the editor's pen. Signs of rampant cut-and-pasting abound throughout the book.
Although not really the fault of the author(s), the book is also seriously dated, having come out while there was still some degree of dot-com mania going on (although the peak was passed). So you can read this book on sort of an archaeological level, to recall all the bizarre things people were saying back in those heady days. Internet refrigerators, anyone?
I probably don't need to summarize; let me simply say you are best off spending your time and money on virtually any book on this topic besides this one.
Help other customers find the most helpful reviews
Was this review helpful to you? Yes No Report abuse
Permalink
Comment Comment
18 of 21 people found the following review helpful:
5.0 out of 5 stars The real problem is a malinformation explosion, March 8, 2001
By Charles Ashbacher "(cashbacher@yahoo.com)" (Marion, Iowa United States(cashbacher@yahoo.com)) - See all my reviews
(TOP 50 REVIEWER) (VINE VOICE) This review is from: Information Anxiety 2 (Hayden/Que) (Paperback)
The basic theme of this book reinforces my long-held belief that the next killer app in computing will be some new way to visually display relationships between information. A new discipline is also going to spring up and those good at it will be in great demand. That new area of study will be a knowledge distiller, someone expert in taking the enormous amount of information about a topic and reducing it down to a base form. We see the initial steps in this trend with the extraordinary success of the ". . For Dummies" series of books. Their appeal is based on the basic formula of making things as simple as possible but no simpler.
As Wurman points out, while there is an information explosion, the real problem is a malinformation (my term) explosion. In other words, information that does not inform. This is not just a reference to that which is inaccurate, but information that is correct but so malformed or obscure to be misleading. He also argues that a critical rethinking needs to be done concerning how we learn. The premise is that the rewards for asking the right questions need to be improved rather than the continued emphasis on answering questions. We also need to rediscover much of our inner child.
At some point in our lives, we "mature" to the state where we will do almost anything to avoid embarrassment. This trait leads us to ignore inconsistencies and sit in silence when we don't understand. The childlike innocence that causes us to ask "obvious" questions goes away, replaced by fear of failure, which leads to an aversion to risk. Without the willingness to take a chance, many new things are not attempted, which limits the options for us all.
This is a book that you must think deeply about. The world is changing rapidly, and the most successful people will be those who know how to cull knowledge down to the true essentials. There are an enormous number of ideas in the book that can be used to assist this process. If you value the future and want to have a significant part in creating it, then you should read this book. Proper implementation of some of the ideas presented here will change the way we do things in the future. Help other customers find the most helpful reviews
Was this review helpful to you? Yes No Report abuse
Permalink
Comment Comment
5 ways to classify all information
5 Hat Racks
5 ways to classify all information
location
Alpha
category
time
commitment
- - -
Five Hat Racks
From InfoVis:Wiki
[edit] Definitions
The concept of the „Five Hat Racks” was originally developed by Richard Saul Wurman in his book Information Anxiety [Wurman, 1989]. In the words of Truong the concept sounds as follows:
There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse).
[Truong, 2004]
Wurman is chairman and creative director of the TED Conferences who focus on technology, entertainment, and design. In 1976 Wurman defines the term "information architect". In his book, Information Architects [Wurman, 1996] he presents the creations of 20 colleagues who've mastered the skill of presenting clear information. In this book he redefined his “Five Hat Racks” Concept slightly to form the LATCH Principle:
Information may be infinite, however...The organization of information is finite as it can only be organized by LATCH: Location, Alphabet, Time, Category, or Hierarchy.
[Wurman, 1996]
I've tried a thousand times to find other ways to organize, but I always end up using one of these five.
[Wurman, 1996]
5 ways to classify all information
location
Alpha
category
time
commitment
- - -
Five Hat Racks
From InfoVis:Wiki
[edit] Definitions
The concept of the „Five Hat Racks” was originally developed by Richard Saul Wurman in his book Information Anxiety [Wurman, 1989]. In the words of Truong the concept sounds as follows:
There are five ways to organize information: category (similarity relatedness), time (chronological sequence), location (geographical or spatial references), alphabet (alphabetical sequence), and continuum (magnitude; highest to lowest, best to worse).
[Truong, 2004]
Wurman is chairman and creative director of the TED Conferences who focus on technology, entertainment, and design. In 1976 Wurman defines the term "information architect". In his book, Information Architects [Wurman, 1996] he presents the creations of 20 colleagues who've mastered the skill of presenting clear information. In this book he redefined his “Five Hat Racks” Concept slightly to form the LATCH Principle:
Information may be infinite, however...The organization of information is finite as it can only be organized by LATCH: Location, Alphabet, Time, Category, or Hierarchy.
[Wurman, 1996]
I've tried a thousand times to find other ways to organize, but I always end up using one of these five.
[Wurman, 1996]
Monday, December 6, 2010
Screen size
useit.com Alertbox July 2006 Screen resolution
Jakob Nielsen's Alertbox, July 31, 2006:
Screen Resolution and Page Layout
Summary:
Optimize Web pages for 1024×768, but use a liquid layout that stretches well for any resolution, from 800×600 to 1280×1024.
One of the most frequently asked questions in my Web usability course is "What screen resolution should we design for?" The full answer is a bit tricky, but the basic advice is clear:
•Optimize for 1024×768, which is currently the most widely used screen size. Of course, the general guideline is to optimize for your target audience's most common resolution, so the size will change in the future. It might even be a different size now, if, say, you're designing an intranet for a company that gives all employees big monitors.
•Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don't always maximize their browsers (especially if they have large screens).
•Use a liquid layout that stretches to the current user's window size (that is, avoid frozen layouts that are always the same size).
Currently, about 60% of all monitors are set at 1024×768 pixels. (The detailed statistics and trends are on page 226 of my new book.) In comparison, only about 17% use 800×600 so it's obviously less important to aim at perfection for these small-display users. What's equally obvious, however, is that you can't simply ignore 17% of your customer segment by providing a frozen layout that requires more screen space than they have available.
Optimizing for 1024×768
When I say "optimize" I mean that your page should look and work the best at the most common size. It should still look good and work well at other sizes, which is why I recommend a liquid layout. But it should be its best at 1024×768.
The three main criteria in optimizing a page layout for a certain screen size are:
•Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
•Readability: How easy is it to read the text in various columns, given their allocated width?
•Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly — that is, are captions immediately next to the photos, etc.?
You should also consider all three criteria at the full range of sizes, continuously resizing the browser window from 800×600 to 1280×1024. Your page should score high on all criteria throughout the entire resolution range.
Your page should also work at even smaller and bigger sizes, though such extremes are less important. Fewer than half a percent of users still have 640×480. Although such users should certainly be able to access your site, giving them a less-than-great design is an acceptable compromise.
As the first criterion implies, scrolling is always a key consideration. Users generally don't like to scroll (see newer data on the distribution of users' attention above vs. below the fold). So, when you design, you should consider how much users can see if they scroll only a screenfull or two.
Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimize for 1024×768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800×600).
So, what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don't assume that this is how you should deliver your company's mobile user experience. Mobile environments are special; to optimize for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.
Big Screens
Many users have large displays. Currently, about 18% of users have at least 1280×1024. The percentage of users with big screens is growing, though not as fast as I would like.
Big monitors are the easiest way to increase white-collar productivity, and anyone who makes at least $50,000 per year ought to have at least 1600×1200 screen resolution. A flat-panel display with this resolution currently costs less than $500. So, as long as the bigger display increases productivity by at least 0.5%, you'll recover the investment in less than a year. (The typical corporate overhead doubles the company's per-employee cost; always remember to use loaded cost, not take-home salary, in any productivity calculation.)
Apple and Microsoft have both published reports that attempt to quantify the productivity gains from bigger monitors. Sadly, the studies don't provide credible numbers because of various methodological weaknesses. My experience shows estimated productivity gains of 5–10% when users do knowledge work on a big monitor. This translates into about an 0.5–1% increase in overall productivity for a person who does screen-focused knowledge work 10% of the day. There's no doubt that big screens are worth the money.
I personally use a 2048×1536 display, and I wouldn't even call that a really big screen. Within the next 10 years, I expect monitors of, say, 5000×3000 to be in fairly common use, at least among high-end business professionals.
Starting at 1600×1200, users rarely stretch their browser windows to the full screen because few websites work well on such a wide canvas. Big windows are magic for working on spreadsheets, graphic design, and many other tasks, but not for the current paradigm of Web pages. Today, big-screen Web users typically utilize their extra space for multiple windows and parallel browsing.
To serve Web users with truly big screens in the future, we'll probably need a different paradigm than individual pages. Perhaps a more newspaper-like metaphor or a different information dashboard will prove superior down the road.
In any case, the need for a new paradigm in the future doesn't change current recommendations: optimize for 1024×768, but don't design solely for this size. Your pages should work at any resolution, from 800×600 to 1280×1024 and beyond.
Learn More
Detailed coverage of topics like scrolling and structuring page information in my full-day tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference.
--------------------------------------------------------------------------------
> Other Alertbox columns (complete list)
> Sign up for newsletter that will notify you of new Alertboxes
--------------------------------------------------------------------------------
Copyright © 2006 by Jakob Nielsen. ISSN 1548-5552
Jakob Nielsen's Alertbox, July 31, 2006:
Screen Resolution and Page Layout
Summary:
Optimize Web pages for 1024×768, but use a liquid layout that stretches well for any resolution, from 800×600 to 1280×1024.
One of the most frequently asked questions in my Web usability course is "What screen resolution should we design for?" The full answer is a bit tricky, but the basic advice is clear:
•Optimize for 1024×768, which is currently the most widely used screen size. Of course, the general guideline is to optimize for your target audience's most common resolution, so the size will change in the future. It might even be a different size now, if, say, you're designing an intranet for a company that gives all employees big monitors.
•Do not design solely for a specific monitor size because screen sizes vary among users. Window size variability is even greater, since users don't always maximize their browsers (especially if they have large screens).
•Use a liquid layout that stretches to the current user's window size (that is, avoid frozen layouts that are always the same size).
Currently, about 60% of all monitors are set at 1024×768 pixels. (The detailed statistics and trends are on page 226 of my new book.) In comparison, only about 17% use 800×600 so it's obviously less important to aim at perfection for these small-display users. What's equally obvious, however, is that you can't simply ignore 17% of your customer segment by providing a frozen layout that requires more screen space than they have available.
Optimizing for 1024×768
When I say "optimize" I mean that your page should look and work the best at the most common size. It should still look good and work well at other sizes, which is why I recommend a liquid layout. But it should be its best at 1024×768.
The three main criteria in optimizing a page layout for a certain screen size are:
•Initial visibility: Is all key information visible above the fold so users can see it without scrolling? This is a tradeoff between how many items are shown vs. how much detail is displayed for each item.
•Readability: How easy is it to read the text in various columns, given their allocated width?
•Aesthetics: How good does your page look when the elements are at the proper size and location for this screen size? Do all the elements line up correctly — that is, are captions immediately next to the photos, etc.?
You should also consider all three criteria at the full range of sizes, continuously resizing the browser window from 800×600 to 1280×1024. Your page should score high on all criteria throughout the entire resolution range.
Your page should also work at even smaller and bigger sizes, though such extremes are less important. Fewer than half a percent of users still have 640×480. Although such users should certainly be able to access your site, giving them a less-than-great design is an acceptable compromise.
As the first criterion implies, scrolling is always a key consideration. Users generally don't like to scroll (see newer data on the distribution of users' attention above vs. below the fold). So, when you design, you should consider how much users can see if they scroll only a screenfull or two.
Both scrolling and initial visibility obviously depend on screen size: Bigger screens show more content above the fold and require less scrolling. This is where you have to optimize for 1024×768: present your most compelling material above the fold at this resolution (while ensuring that the absolutely critical information remains visible at 800×600).
So, what about tiny screens, such as those found on mobile devices? A liquid design should scale all the way down to a phone, but don't assume that this is how you should deliver your company's mobile user experience. Mobile environments are special; to optimize for them, you must design a separate service that provides fewer features, is written even more concisely, and is more context aware.
Big Screens
Many users have large displays. Currently, about 18% of users have at least 1280×1024. The percentage of users with big screens is growing, though not as fast as I would like.
Big monitors are the easiest way to increase white-collar productivity, and anyone who makes at least $50,000 per year ought to have at least 1600×1200 screen resolution. A flat-panel display with this resolution currently costs less than $500. So, as long as the bigger display increases productivity by at least 0.5%, you'll recover the investment in less than a year. (The typical corporate overhead doubles the company's per-employee cost; always remember to use loaded cost, not take-home salary, in any productivity calculation.)
Apple and Microsoft have both published reports that attempt to quantify the productivity gains from bigger monitors. Sadly, the studies don't provide credible numbers because of various methodological weaknesses. My experience shows estimated productivity gains of 5–10% when users do knowledge work on a big monitor. This translates into about an 0.5–1% increase in overall productivity for a person who does screen-focused knowledge work 10% of the day. There's no doubt that big screens are worth the money.
I personally use a 2048×1536 display, and I wouldn't even call that a really big screen. Within the next 10 years, I expect monitors of, say, 5000×3000 to be in fairly common use, at least among high-end business professionals.
Starting at 1600×1200, users rarely stretch their browser windows to the full screen because few websites work well on such a wide canvas. Big windows are magic for working on spreadsheets, graphic design, and many other tasks, but not for the current paradigm of Web pages. Today, big-screen Web users typically utilize their extra space for multiple windows and parallel browsing.
To serve Web users with truly big screens in the future, we'll probably need a different paradigm than individual pages. Perhaps a more newspaper-like metaphor or a different information dashboard will prove superior down the road.
In any case, the need for a new paradigm in the future doesn't change current recommendations: optimize for 1024×768, but don't design solely for this size. Your pages should work at any resolution, from 800×600 to 1280×1024 and beyond.
Learn More
Detailed coverage of topics like scrolling and structuring page information in my full-day tutorial on Fundamental Guidelines for Web Usability at the annual Usability Week conference.
--------------------------------------------------------------------------------
> Other Alertbox columns (complete list)
> Sign up for newsletter that will notify you of new Alertboxes
--------------------------------------------------------------------------------
Copyright © 2006 by Jakob Nielsen. ISSN 1548-5552
Week 2: Schematics / Wireframes IV - One last assignment
Week 2: Schematics / Wireframes IV
Topics:
•Interaction Design (IxD)
•Storyboarding I
•Animatics
Readings:
Ten Principles for Designing Rich Internet Applications (Wiki)
Rich Internet Application Screen Design (HTML)
Exercises:
Using animatics and storyboards to illustrate the changing states of a dynamic page or application for online banking. Annotating animatics and storyboards to describe and define the dynamic behaviors. Review the interactions found on the following sites and discuss how they could be represented in wireframes and storyboards:
The Gap
NikeID
MarketWatch
Yahoo!
Ace Hardware
DIY Network
Oli LookBook
Use animatics and/or storyboards to illustrate complex interface behaviors and transitions that could be utilized on a banking web site. Create sketches that illustrate a BillPay web application (e.g., select Payee, a Payee, select Pay by date, specify payment amount, mark eBill as paid, perform transfer of funds to debit account, etc.) and include information and indicators for how the different components might behave.
Interaction Annotations (PDF)
Assignment:
Create animatics to illustrate the transitions and behaviors of the main page components of the project site. Include the transitions and behaviors of conditional page components (e.g., elements that only appear under certain conditions, such as calendars for date selection.)
Topics:
•Interaction Design (IxD)
•Storyboarding I
•Animatics
Readings:
Ten Principles for Designing Rich Internet Applications (Wiki)
Rich Internet Application Screen Design (HTML)
Exercises:
Using animatics and storyboards to illustrate the changing states of a dynamic page or application for online banking. Annotating animatics and storyboards to describe and define the dynamic behaviors. Review the interactions found on the following sites and discuss how they could be represented in wireframes and storyboards:
The Gap
NikeID
MarketWatch
Yahoo!
Ace Hardware
DIY Network
Oli LookBook
Use animatics and/or storyboards to illustrate complex interface behaviors and transitions that could be utilized on a banking web site. Create sketches that illustrate a BillPay web application (e.g., select Payee, a Payee, select Pay by date, specify payment amount, mark eBill as paid, perform transfer of funds to debit account, etc.) and include information and indicators for how the different components might behave.
Interaction Annotations (PDF)
Assignment:
Create animatics to illustrate the transitions and behaviors of the main page components of the project site. Include the transitions and behaviors of conditional page components (e.g., elements that only appear under certain conditions, such as calendars for date selection.)
Thursday, December 2, 2010
Wireframe Walkthrough
website wireframes
are black-and-white schematic diagrams that illustrate blocks of content, navigation and functionality of a website design. They are used in the process of designing the content layout for pages of a website.
This tutorial will walk you through creating a Website Wireframe document using Adobe Illustrator (CS3):
Step One: Creating the Document
I usually make my new document to allow for the height and width of a real web page. I also create guides to help me out with my “live area” of my web page and to help me out with my “column grid.”
NOTE: When creating a Wireframe document, we need to keep in mind that this document can be used to flush out our visual design when we get to it.
In this case I will start out by creating a document that is 1280px X 1500px:
NOTE: You should choose “Web” for your new document profile. But, when you change to a custom size it will change to “Custom.”
By creating a web document with the 1280px X 1500px settings, we have a point to work from that will allow us to design what will happen in the “dead area” of the web page.
You will notice that when you create a web document with the 1280px X 1500px settings you will see a green box with crop marks on the outside:
NOTE: This green box with crop-marks will be important down the road when we use this document to start our visual design.
When we export this document as another working file, only the art inside the green box with crop-marks will get exported:
Step Two: Creating the “Live Area” Guide
Now that we have our document set up, we need to create guides to work from for our “live area” of our web page.
As of late I have been designing web pages with a “live area” of about 900px wide. But, let’s not forget that we will have a “live area” that goes beneath “the fold” of our browser screen. Therefore, I will be creating a “live area” of 900px X 1400px. This will allow for me to have enough vertical room to design content that is below “the fold.”
I will start out by making a box that is 900px X 1400px. To do so, I will need to click on the rectangle tool and then click down inside the artboard of my Illustrator document.
Once I do this, I will get a dialogue box that I can insert my dimensions:
To get the box in the center of our art board, we will need to use the align palette. If your align palette is not open, go to Window > Align.
Now that you have your align palette open, make sure your box is still selected and click the “Align to Artboard” box:
Step Three: Creating the “Column Grid” Guides
Now that we have created our guide for our live area, we are going to use some of the same steps as above to create our column grid.
http://www.sccc.premiumdw.com/
I am going to start out by making another box that is 860px X 1360px so I will have a margin around my columns of 20px. I am also going to center that box inside my art board using the align palette again.
The result is that I now have another box in the center of my art board that I will make my “column grid” from:
are black-and-white schematic diagrams that illustrate blocks of content, navigation and functionality of a website design. They are used in the process of designing the content layout for pages of a website.
This tutorial will walk you through creating a Website Wireframe document using Adobe Illustrator (CS3):
Step One: Creating the Document
I usually make my new document to allow for the height and width of a real web page. I also create guides to help me out with my “live area” of my web page and to help me out with my “column grid.”
NOTE: When creating a Wireframe document, we need to keep in mind that this document can be used to flush out our visual design when we get to it.
In this case I will start out by creating a document that is 1280px X 1500px:
NOTE: You should choose “Web” for your new document profile. But, when you change to a custom size it will change to “Custom.”
By creating a web document with the 1280px X 1500px settings, we have a point to work from that will allow us to design what will happen in the “dead area” of the web page.
You will notice that when you create a web document with the 1280px X 1500px settings you will see a green box with crop marks on the outside:
NOTE: This green box with crop-marks will be important down the road when we use this document to start our visual design.
When we export this document as another working file, only the art inside the green box with crop-marks will get exported:
Step Two: Creating the “Live Area” Guide
Now that we have our document set up, we need to create guides to work from for our “live area” of our web page.
As of late I have been designing web pages with a “live area” of about 900px wide. But, let’s not forget that we will have a “live area” that goes beneath “the fold” of our browser screen. Therefore, I will be creating a “live area” of 900px X 1400px. This will allow for me to have enough vertical room to design content that is below “the fold.”
I will start out by making a box that is 900px X 1400px. To do so, I will need to click on the rectangle tool and then click down inside the artboard of my Illustrator document.
Once I do this, I will get a dialogue box that I can insert my dimensions:
To get the box in the center of our art board, we will need to use the align palette. If your align palette is not open, go to Window > Align.
Now that you have your align palette open, make sure your box is still selected and click the “Align to Artboard” box:
Step Three: Creating the “Column Grid” Guides
Now that we have created our guide for our live area, we are going to use some of the same steps as above to create our column grid.
http://www.sccc.premiumdw.com/
I am going to start out by making another box that is 860px X 1360px so I will have a margin around my columns of 20px. I am also going to center that box inside my art board using the align palette again.
The result is that I now have another box in the center of my art board that I will make my “column grid” from:
Subscribe to:
Posts (Atom)