When a builder puts together a staircase, uniformity is about making sure each step is the same height and depth so that people don't trip all over themselves while heading up or down. (Can you imagine a staircase where one step is 4" high and 6" deep, the next 12" high and 3" deep, and so on? You'd have to examine every step to decide how to proceed.)
When designing interfaces, things are not all that different. Elements such as visual hierarchy, proportion, alignment, and typography play major parts in the uniformity of a design, and each must be designed so that users can quickly extract meaning from each screen and form a mental model with which to work. Visual hierarchyWhen markup code is written properly, titles are titles and paragraphs are paragraphs. Semantic code is written so that content is organized like a term paper, with headings, subheadings, body text, and so on. When this is done, pages are more organized by default, because HTML renders headings larger than other elements, each heading type defaults to gradually descending font sizes, and body text is shown smallest so it's clearly separated from the headings. All this adds up to a page that can be analyzed at a glance, because the user can immediately see what's most important on a page and what on the page lends support to the first element. This allows him to make a snap judgment about whether to stay because the page contains useful information, or to leave because it does not. It also allows him to quickly find a link that might lead him to other useful information. HTML organizes content into a visual hierarchy on its own. No wheel-reinventing needed.
When creating the user interface for a Web application with semantic code, these elements can be created easily and maintained across multiple screens to provide a sort of built-in meaning for users. Users can quickly recognize the relationships between headings and content because each has its own default display settings that make the organization clear. Sticking to the basics and letting HTML do what it does bestdefine structure for written contentis a clean and simple way to ensure visual hierarchy. Yes, page elements should be styled to create the look and feel you want for your application, but the CSS used to style the elements should support what HTML is designed to do on its own. Headings should be big and obvious and body text should be small while remaining clearly legible. Supporting the natural tendencies of HTML keeps things clear. ProportionProportion is defined by the size or quantity of certain elements as compared to others. Sadly, content often takes a back seat to navigation and other design elements. The average Web page (and the homepage in particular) uses only about 2030 percent of its available space for actual content. The rest is made up of header graphics, navigational elements, footer content, ad banners, white space, and images that don't directly support the content. In Web applications, this figure may vary wildly depending on the design, but most of what appears on a given application screen is there to orient users to the site itself, not the content. Designers tend to focus their page designs around making sure the user knows where he is on the site, what site he is using, how he can get to other sections, and so on. (Of course, they do this because countless usability studies have told us it's a good idea, so they're right to do so.) And graphical elements meant to give an application its look and feel (referred to by many designers as the "chrome") often take up as much as 1/3 of the visible space on a screen. Add a little white space and advertising to that, along with even the simplest of navigational elements, and it's a wonder we have any room left at all. This proportion of pixels to data means Web applications often suffer from long, scrolling pages and a lack of findability (the ability to find a particular element easily). However, the content is the most important part of the application. Minimizing chrome to leave plenty of room for the interaction elements is crucial to helping users be productive. Just as much as error and confirmation messages get in a user's way, excess chrome can be a big annoyance when trying to move around within an application. Having a large proportion of non-essential elements is a sure way to detract from those things that are most important in a screen. Ahhh . . . room to breathe. DropSend is a nice example of how to minimize chrome and leave plenty of breathing room for data display. The principal purpose of this application is to manage files, and chrome would just get in the way. So Carson Systems decided to focus the interface on the content instead of the tool. The graphical elements that make up the interface have been minimized to allow a wide-open view of the files a user has uploaded. Even within this layout, there is room to minimize chrome further by tightening up the space used for the header. The logo could be a bit smaller and the main divider bar could be shifted up the page a bit further. But this interface, when compared to Box.net, is nice and open. Content in Box.net, again, gets less room than the rest of the interface. Box wastes a lot of space by packing the entire interface into a small area in the center of the page. Moving the sidebar to the left edge of the page and making the rest of the interface stretch to the right edge would really open up the area used to display the list of uploaded files. The proportion of the page taken up by graphical elements (or not used at all) is pretty big, and as a result, Box limits its display of actual data to roughly 1/3 of the page (depending on screen resolution and size of the browser window). DropSend, on the other hand, leaves a good chunk of the available screen real estate open for content. The design allows users to get a better at-a-glance view of the files they are managing, and gets the interface out of the way. Every screen in DropSend is designed this way. It enables users to work with any new screen as easily as the last, and the simple layout helps users form a simple picture of the purpose of the application and an effective initial mental model. (The only thing I don't like about the DropSend interface, in fact, is the tree view control, which could easily be revised to simplify the navigation of directory levels, as shown in Chapter 4.) AlignmentMany of us played the classic "one of these things is not like the other" games when we were children, designed to further enhance our innate ability to discern one thing from another. We'd stare at pictures containing three rubber ducks and a fire hydrant and scream with delight, "That one is not the same!" We prided ourselves on our ability to pick out the thing that didn't match. As we age, these lessons stay with us (in addition to our intrinsic, human ability to notice difference). When we see something that doesn't match up, we wonder why, even if only subconsciously. When fields in a registration form all line up to the left edge except for one field that's 12 pixels to the right, we think about it. Does it mean something? Why is this one out of place? We're hard-wired to see the differences. Alignment is about avoiding difference. Newspapers, books, Word documents, floor plans, and millions of other things are designed so that various elements are aligned to each other: Groups of elements are aligned to one side, others to another side, everything is aligned to a common top edge, and so on. Without uniform alignment, books and sites are much more difficult to read because we have to constantly evaluate whether the positioning is meaningful. There isn't necessarily anything wrong with a non-aligned design. Sometimes it's used intentionally. But the goal of a Web application is usually to enable a user to get something specific done in an efficient manner, and messiness detracts from this goal. Uniform alignment is key to streamlining the process because it ensures that nothing distracts the user while she is trying to complete the task at hand. Form elements in Web pages, for example, should be aligned to each other. If the widest text area on the page is 250 pixels wide, then all other elements should line up to the right edge of that text area. They should all be justified to each other's left edge, span the same width, be distributed evenly and consistently from each other (for example, if two fields are 10 pixels apart vertically, all others should be as well), and generally form a large rectangle when the page is looked at in terms of geometrical shapes so that no individual element stands out and makes users think it means something more than the others. Meebo's registration form is designed uniformly the fields form a straight line on both the left and right edges. With everything flowing in a straight line down the page, the page is easy to read at a glance and minimizes the effort required to understand what the page is about and how to deal with it. TypographyMuch like misaligned objects on a screen, users notice differences in fonts, font sizes, colors, and so on, and attribute meaning to them. Consistent typography, like uniform alignment, enables users to stay focused on the task instead of wondering what to infer about each difference in font. Fortunately, there are a few hard and fast rules that have become standard on the Web when it comes to typography. First, never use different fonts from screen to screen. Make a decision and stick with it. This is the simplest way to ensure consistency from page to page within an application. Second, choose one typeface for the big, pop-off-the-page elements like headings, and choose a second typeface for the rest of the content. These two typefaces should differ enough from each other that the difference appears intentional. If the typefaces are too similar, headings and such can blend too easily into the rest of the page, and the meaning otherwise implied by clearly distinct typefaces can be lost. Third, never use more than two or three different fonts. In fact, three is often too many. Multiple typefaces on a single screen can be disorienting, making it harder for the user to easily find what she is looking for. Finally, limit the colors and sizes used for fonts. Of course, headings should be larger than body text, and body text should be larger than footer content, but avoid using different font sizes within body text. Also, use as few colors as possible. Choose colors for headings, body text, footers, links, visited links, active links, and so on, and use those choices for every page. When it comes to typography on the Web, the less you do, the better. Spatial memorySpatial memory is the ability to recall where physical objects are in relation to other objects. It's what allows us to move around in a dark, but familiar, room. As we step into the room and fumble for the light switch, we can find it because we remember where it is located on the wall. If we continue into the room without turning on the light, perhaps to grab something off a desk, we can usually safely move around without bumping into objects and potentially injuring ourselves. Our brains can recall the locations of the desk, the chair, the item on the desk, and other furniture using spatial memory.
Our users navigate pages using spatial memory. After a user has interacted with a page a few times, he forms a subconscious knowledge of the relative locations of elements on the page. He moves his mouse pointer without looking and without thinking. When every page contains the same navigational elements, in the same location as all the others, this is easy to do. Users can reliably jump to the point on the page where they know a button is located and click without having to really think about it. Spatial memory is made up of three parts. First, a user must know what items are present on a page. Second, he must know where the items are located in relation to other items on the page. Finally, he must know where his mouse pointer currently rests in relation to each item. This is how the user forms a mental map of the page so he can move around without much effort. It takes very little time for users to form these mental maps. The first couple of times a person uses a site, he learns where the persistent navigation is located and what links are contained within the element. From then on, he can move around the space more easily because spatial memory goes to work and he no longer has to evaluate the page in its entirety every single time to figure it out. Consistent layout supports this behavior. So does proper alignment, because it's much simpler to move to something that appears in a straight line with everything else than it is to move the mouse to somewhat arbitrary spot in the middle of a bunch of content. |