The topic today is all about information architecture, universal design, and usability. Good design is about aesthetics and shiny, pretty things for sure, but if the underlying structure crumbles all the attractive features in the world can't save a non-functioning website. Great design, therefore, is a sophisticated marriage of aesthetics, innovation, and functionality.
The Web Style Guide, 3rd edition website offers a full-text version of the printed book. It is essentially what APA and Chicago are to printed style — a set of guidelines meant to enhance readability and communication. The information presented focuses on user needs and expectations, which really are the guiding force in web design. They cover elements such as organization of contents into logical categories, and perhaps most importantly, consistency in naming. They go as far as to suggest the use of controlled vocabularies, and for a large and complex website this makes perfect sense. Nothing is more confusing than seeing headings and terms used interchangeably. The website also focuses on one of the most important, but easily overlooked, issues in design which is universal usability. They point out that things like alt text tags on images are essential because they offer flexibility and information for users that can't or don't want to view the graphics on a page. Overall, the chapters cover all the basics of logical, organized structure on the web.
Nearly everything about the The Web Style Guide website fulfills their principle #3: simple and intuitive design. The slate and muted burgundy colors form a pleasant border around the white background with black text; overall, this provides a harmonious color scheme while ensuring the text is easy to read. This underscores the idea that contents should be accessible and that the design should support (and never obscure) communication. However, this might be nit-picky, but it is sort of counter-intuitive at this point for the large header text at the top of the page (essentially a logo), not to be a home button. Even though a labeled home button is placed below, the unlinked logo text seems like poor design. This would seem to me to be an illustration of how to buck user expectations, but hey, everyone is allowed one slip-up...
Check it out here:
http://webstyleguide.com/index.html
Universal Usability is another full-text book available online that deals with designing with users and function in mind. That is not to say that author Sarah Horton doesn't appreciate aesthetic design, she simply makes the point that overly flashy graphics get in the way of effective communication and ultimately users get tired and and annoyed. As an example, Universal Usability has a layout that incorporates a boxed section called "In a nutshell" that summarizes the key points of the longer text on each page and offers further reading suggestions. This area is eye-catching because it is emphasized simply by having a background that is a shade darker than the main page color. It pulls your eye to the area because there are not many competing elements (a hallmark of simplicity) and communicates valuable information. The overall design of the page echoes this simplicity with a flattering yellow and light purple complementary color scheme and black text. This website definitely exhibits everything it preaches — very clean, organized, useful pages.
One point where I have to part company with the otherwise sensible and very democratic advice of Horton is with her proclamation that graphic text should be avoided. I understand the limitations in terms of enlarging graphics for easier viewing, in which graphical text becomes pixelated and hard to read. I also understand that from a usability standpoint this might be limiting access to information. I feel, however, that used judiciously this is still an acceptable practice. Graphic text frees design from the severe limitations of current universal fonts and as long as it is used sparingly, such as for headings, I disagree that it severely limits access. For a heading, the alt text can display the heading text, making it readable or audio-accessible for users while the effective design that comes with using fancy fonts is preserved. Usability is essential, but there is a point when it is taken too far and it simply dictates boring design. Like anything else, universal usability requires balance.
Check out the Universal Usability website here:
http://universalusability.com/index.html
Jesse James Garret defines information architecture (IA) as the "structural design of the information space to facilitate intuitive access to content," and that is a good overall description that relates to the concepts we have been looking at so far. Information is no good if users have a hard time reaching and comprehending it; if the information space is disorganized users will give up looking. Garret's website gives a simple overview of the concepts of IA and interaction design. IA involves planning the organization of the content, while interaction design involves describing how users will "flow through defined tasks." Why worry about such things (especially at the level of diagrams)? Because without careful planning a website can easily become disorganized and confusing. The bottom line is that information contained in websites depends on contextual information all around it, so disorganization creates a chaotic mess that makes little sense and ultimately obscures the contents of the website.
To learn more about IA visit Jesse James Garret's website here:
http://www.jjg.net/ia/
— Smashing Magazine's 50 More Excellent Blog Designs, to be precise. The cool thing about the Smashing Magazine website is that it is designed to look pleasant but not compete with the graphics it features. The white background and minimal use of color helps here because all the screen captures of websites and blogs stand out on the page and look good, no matter how diverse their color schemes. The point of this feature article is to showcase some truly innovative blogs that really showcase the personality of the blogger. This is a difficult task, conveying a personality through a few well-placed graphics, but some of the blogs featured here are very successful. In fact, a few of the ones that caught my eye were actually quite heavy with little details, like paint tubes and brushes along the edges or photos and rulers and drawings to indicate an artistic background. These were nice touches that transcend the boxy elements on most templates. I am pretty inspired right now, and hope I have a chance to work with my blog layout a little sometime in the near future.
Check out Smashing Magazine's blog feature here:
http://www.smashingmagazine.com/2008/05/08/now-more-than-ever-50-more-excellent-blog-designs/
So, to sum up, universal access guidelines, organization, and user-friendliness are all essential aspects of great design. Functionality is key because most people won't stick around long enough to learn how to navigate a content rich but confusing site. That said, design should still be beautiful, so a good balance between innovation and style and universal accessibility is essential. Great design is neither boring nor needlessly complex. Or as John Maeda sees it, "The simplest way to achieve simplicity is through thoughtful reduction. When in doubt, just remove. But be careful of what you remove." Thoughtful reduction. Elements are beautiful, purposeful, and carefully placed; nothing essential is striped away just for the sake of simplifying. That is the essence of good design.
No comments:
Post a Comment