Over the last 36 months I have been growing my skills as a web designer and HTML and CSS coder. I’ve been reading all that I could get my hands on, but over the last few months in particular I began to see a deficiency in a part of my work. The deficiency became clearer as I learned more about “interaction design patterns”:http://en.wikipedia.org/wiki/Interaction_design_pattern and their use in interface design.
It was time to do the necessary reading to find out more about these patterns and how the best User Interface (hereafter referred to as UI) designers implemented them for the success of their application or website. It was with this felt need that I picked up “Designing Interfaces: Patterns for Effective Interaction Design”:http://designinginterfaces.com, written by “Jenifer Tidwell”:http://jtidwell.net/, and published in 2006 by O’Reilly
The Contents by chapter are as follows:
- What Users Do
- Organizing the Content
- Getting Around
- Organizing the Page
- Commands and Actions
- Showing Complex Data
- Getting Input From Users
- Builders and Editors
- Making It Look Good
I’d exhaust you if I reviewed each chapter, and though each deserves coverage, I will highlight two consecutive chapters that for me, really made this book one of the most valuable reads I have yet to get under my belt as a burgeoning freelancer. Lets start with Chapter 3.
Getting Around
As you might imagine, Tidwell covers the grounds of navigation here in Chapter 3, not only for websites, but for desktop and online based applications as well. I found this particularly helpful to bridge disciplines. It helped me think about the patterns available to those who build and design tools for productivity that I might not have thought to use in web design. A current example is the use of the modal panel, which is currently being popularized as a revitalized pattern for the web, but traditionally used more often in desktop applications. Using lightweight JavaScript libraries a tool like “Lightbox”:http://www.huddletogether.com/projects/lightbox/ is making the modal panel a much more attractive form of delivery for pertinent information, imagery, or even “forms”:http://particletree.com/features/lightbox-gone-wild/. Where before I thought this was just plain cool, “Designing Interfaces”:http://desiginginterfaces.com helped me to understand the reasons to use a pattern like the modal panel, and the reasons not to use it.
Each pattern in every chapter is layed out, as you’d expect, in a way that I found incredibly straight forward and accessible to someone who is getting into the field of design, while at the same time, the material is intelligent and challenging and well suited for the more seasoned practitioner. Chapter 4 is no exception:
Organizing the Page
Tidwell takes the reader from the presentation of a block of unstyled plain text for an invitation, adding styling for a title, paragraphs, lists, and footers and addressing visual flow and hierarchy, grouping, and alignment along the way. As in the last chapter, the examples are straightforward, but with the research data and experience to add real weight to her arguments.
The patterns in this chapter range from the use of a focal column at “Center Stage”, through to the more dynamic functions of directing users through forms with “Responsive Disclosure” (options hidden until they are needed) or “Responsive Enabling” (options “greyed” until they are needed). Full Color illustrations and screenshots accompany her descriptions and helped me to digest the different implementations of these patterns in multiple settings and platforms.
Tidwell’s writing is succinct and poignant. The book is worth its purchase (which I can’t say for all the books I’ve read this year). Add it to your library of books to read and reread as together we may learn enough to appease the great User God!
Product Details
Paperback: 331 pages
Publisher: O’Reilly Media (November 21, 2005)
Language: English
ISBN: 0596008031
Links
- “Full Table of Contents”:http://www.oreilly.com/catalog/designinterfaces/toc.pdf (pdf)
- “Sample Chapter”:http://www.oreilly.com/catalog/designinterfaces/chapter/ch04.pdf (pdf)
