Organizing design and process: Usability and Visual Hierarchy

Whenever I sit down to read the books and articles for class, I get really antsy. I want to go design something. I think part of the reason I prefer web design to being a historian is because I simply don’t have the patience to read as much as a historian should read. I like to be doing something. I like the process, sense of progress, near-immediate gratification, and the accomplishment of creation that web design offers. (Which is why I like the researching and writing aspect of being a historian, even though it’s a longer process.) So, sitting down to read this week, I kept flitting back and forth to tweak something on the project I was working on, to jot down questions that popped into mind, and to make notes for things to remember in later designs. Needless to say, it always takes far longer than it should for me to read any one of these articles. They also prompt me to re-think old projects and, unfortunately, worry that I’ve done things wrong. “Oh no,” I think, “I didn’t put in title elements in my links! Are my alt tags good descriptions or could they be better?” Fortunately, I think I get the concept of visual hierarchy that Luke Wroblewski discusses in his article “Visible Narratives: Understanding Visual Organization.” Not that it comes naturally or instantly, but I design a site, and then I look at it and think “something doesn’t look right, what is it?” It’s usually the visual hierarchy. I usually tweak and tweak and then eventually I think it comes out right. Now, at least, I have some terms for what I’m doing and maybe it will help to think about these concepts in a more strategic way at the beginning of a project. I also really want to design a circus poster now.

“Visual Architecture: The Rule of Three” by Carole Guevin showed how placement and interactivity among images guide a viewer through a web page (or printed page). I think, however, that until my graphic design skills improve tremendously, my websites will not be able to take full advantage of this tool. That said, of course one can use this concept with headings and text blocks and logos. I suppose there are levels of implementation of this rule of three: from basic visual structure to complex imagery. The underlying principle is the same—a visual guide through the page—but the implementation differs by orders of complexity. At least that gives me something to strive for and an area for improvement. Although, obviously, the article had a commercial bent, these concepts would still apply to serious historical work. You can still present the information so that it is visually clear and enticing, while drawing your readers to sections with your use of imagery (or titles, subtitles, etc).

Steve Krug’s book Don’t Make Me Think: A Common Sense Approach to Web Usability is great. I love the use of cartoons and diagrams throughout to help illustrate his points. Unfortunately, as some of you may have gathered, I do suffer from a rather short attention span. Or at least, if I can’t find what I’m looking for in about 2 seconds, I flip or click or otherwise look somewhere else. I’m impatient, and I value my time. I think this is actually the most effective part of Krug’s message: that when presented with information (be it a whole web page or a choice of links or a button), a user should not have to think, or at least only think minimally. This is a very difficult thing to design for because you often know what you mean when you type “Take Action” (just to use a recent example that I’m struggling with. But, how do you ensure your readers/viewers know what you mean? His answer is usability testing. This is such a hard thing to do. I’m trying to work on it, to find a way to incorporate this into my design process. For now, it’s one of those goals, like accessibility, that, for now, I’m only meeting the minimum requirements. In my mind, once my designing skills are better then I’ll improve on these things. Soon, hopefully, soon.

And, finally, Douglas Bowman’s “Design Process Revealed” was actually one of the first articles I read when I started re-learning web design last summer. I think it’s an excellent process and one I’ve tried to adopt or at least make my own. I particularly like his tip about creating an Illustrator file and playing with various fonts applied to your key text in order to choose your ideal font. Not only is this a great way to visualize and compare the different choices you have, but it is also a great way to begin gaining familiarity with the abundance of fonts available to us. I suggested to John on his blog that he try to incorporate this method, especially the early brainstorming stage, into his process for our upcoming design project. This brainstorming really helps me to think of types of images I can use and which of those images might work well together. When these ideas are all written down on paper, it helps me to see what the possibilities are, and when I’m in the middle of the design and needing something extra, I can look back to it and say “A-ha, yes, a bird would be an excellent addition to this motif.” Or something.

I also suggested that Misha, who cracked me up with her title “Good Design Beats a Poke in the Eye,” use Bowman’s design process. I think I’m just a very process-oriented person. Otherwise I get too distracted and/or waste time fooling around with things that are extraneous to the task at hand. But, seriously, working through this rather straightforward process, even if you take some shortcuts, can really streamline your efforts and achieve what you’re aiming for with greater ease.

Marty wrote about Krug’s book in his post “Clean pages = pleasant experience,” and I noted how there are indeed a few examples out there of successful commercial websites. By successful, I mean successful in design. They are clean, easy to follow, and visually interesting and/or appealing. I also mentioned how the legacy of old websites that need redesign and the lack of time to devote to such an overhaul is probably the main impediment to many of these businesses undertaking such an endeavor. I sympathize with those designers, because I know that it is most likely rarely their fault that the web site looks the way it does —as odd as that sounds. They take their direction from non-design management and, unless they’ve been employed there for 10 years or so, they likely inherited an old design that the company already has too much invested in to be willing to take on a redesign that this new designer seems to think is so important. There’s branding, recognition, and other equities I’m sure that give these businesses tremendous anxiety about changing the face of their Web presence. Creating a beautiful, clean, well-organized, visually uncluttered but interesting and engaging website is much, much easier said than done.

4 Responses to “Organizing design and process: Usability and Visual Hierarchy”

  1. Jenny Reeder Says:

    I think you’re right on, Laura, when you talk about your process of reading and tweaking. I think we demonstrate our cognitive understanding by doing. You are in a prime position to learn from this class because you have your hands on design every day with your job. You see things in a different light than I do.

    I think you reacted to Steve Krug’s book in exactly the way he indicates that we react to websites. We scan quickly, and if we don’t find what we want or we encounter difficulty, we move on.

    I admire your clean-yet intricate, accessible-yet provoking work. Keep it up!

  2. Jenny Reeder Says:

    […] love how Laura described her reaction to Steve Krug’s book as quick, active, and impatient. I, too, appreciated his frank, honest […]

  3. Marty Says:

    I agree that Krug’s presented some interested insight to the use of web design — and the way “over design” can easily send people packing.

  4. Tweak! » Blog Archive » Episode 9 The Design Phase Says:

    […] Organizing design and process: Usability and Visual Hierarchy (Veprek.com) […]

Leave a Reply