Krug is at it again with his easy to read, highly informative approach to User Experience design. Chapter 9 specifically deals with Usability Testing, and opens with a very eye opening treatment on the failure of most designers or clients to tackle this part of the process early on.
The statement “After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore,” is so true, and true not just of web design. We have to get our project in someone’s hands early and often, with little introduction to see if it is approachable and understandable. For the designer, we can no longer see the project from that point of view, and we forget that the users do not have the benefit (or horror) of weeks or months of prior involvement with it.
I also love the point that testing 1 user at the beginning is better than testing 50 at the end. I fall in this trap far too often. Proudly displaying some design or another (come on, you know it’s to get approval, not critique!), to have them go, “I don’t get it,” and realize in terror that it is infinitely harder to change course when you’re this far down stream.
Beyond these opening statements Krug goes on to describe Usability Testing on the cheap. Not only is it interesting to see how inexpensively testing can be done, but also how effective it can be. In fact, when keeping testing so lean and mean, it becomes more agile, repeatable throughout the design, and often uncovers more problems than a single, massive usability test right before launch might uncover.
Guerrilla UX testing at its finest.
What is there to say about Meet Your Type? It is 49 pages of quippy statements that seem more of a showcase of the author’s tiring analogous comparison of font type parings and choosing a mate than actual commentary on typography. Granted it is very beautifully laid out and it is clear that the author is… passionate about fonts, but it I counted five statements in all most ten times as many pages that I was actually given good or new information.
That is not to say the article is all bad. What does it does well, and that is give clear visual examples of matching fonts, and I greatly appreciate that he labels each type that he uses. It also offers some great guidelines for display and body type, and certainly gives designers the green light for a greater degree of playfulness in their choices (fitting given the playfulness in which he attacks the subject in general).
There is no denying the manual is well designed and very visually pleasing. The author certainly has fun operating withing a loose, modern design method, but it falls flat in actually educating the reader. I was just hoping that it would be more in line with Krug’s article Don’t Make Me Think in that it mixes wit with meat. I found that in overreaching for wit, Meet Your Type ended up feeling more like novelty, and the moments of clarity did not buoy the article enough to give it a thumbs up.
Web typography is actually something I have always enjoyed. Pairing up a couple of fonts to provide visually pleasing yet readable text that matched the mood of the website was ever a fun, creative challenge. I am sure somewhere back in the distant past (perhaps my high school web design class) I came across some of the concepts given in “On Web Typography.” As I read the article, I found myself nodding along with so many of the points as they lined up with many of the guiding principles I stick to when picking web fonts.
What did strike me was how the article put some science behind why some fonts just “feel right.” For example, when considering fonts for body text to make sure they scale properly to smaller sizes, stick to fonts with taller x-height, adequate spacing, and high character contrast help maintain legibility at smaller sizes. So that’swhy Verdana makes my eyes happy.
Since firing up design school, my attention has been drawn to the designers responsible for many of the font types we use (and overuse) every day. Previously I gave very little thought to the art of typography, particularly with fonts that are staples to our daily reading. Consequently, a design option I had not previously considered was opting for fonts from the same designer, capitalizing on their unified inspirations or geometry (such as the example offered: Eric Gill’s Perpetua and Gill Sans). It will be fun to explore similar harmonies among the works of other typographers in future projects.
While working on an editing project last week I came accross an ancient sales training film in black and white, good old 50’s style TV music, and hilarious, old school narrative teaching style. Yet in this time long before the internet, websites, or e-commerce, the heralded “greatest salesman in America” in the training video was giving me the exact same principles that are given in “Web Content that Persuades and Motivates.” The fact is that persuasive content and salesmanship has not changed at all, just the vehicles we use for accomplishing it.
What it boiled down to was exactly as Chandler Turner states; you don’t sell the steak, you sell the sizzle. Content that captures our attention does not list cold facts, it tells us a story of how those features will benefit our lives. Secondly, your first ten words are far more important than the next 100. If you can’t sell the sizzle in the first sentence, we lose our audience and they move on to shinier, more attention grabbing pastures. Think about your own browsing and reading habits. We are very busy people, we determine something’s relevance within the first sentence of two of reading. If we’re not hooked, we move on; I don’t have time to dig through five paragraphs to find the “sizzle”.
I believe this concept is true even if a site is not trying to sell me something. Regardless of what a website’s purpose is, ultimately it is there for someone to look at it. If our content falls flat, or doesn’t create an inviting experience, we have made it that much harder on the user to stick with it. We are emotional animals, we need to connect with our readers on an emotional level; not slap them upside the head with a cold slab of dry information.
Something I learned from this reading, as well as the Personas interviews for Facebook, was how it easy it is to layer my own motivations and goals over the user. “Well if this is what I want to do on this website, surely this is what everyone else wants to do on this websites.” We jump to conclusions and put words in their mouth, and failed to listen to their real need. Clearly this is a fantastic way to build an irrelevant website when I stop to think about it. Yes a website should be designed with the designers and client’s goals in mind, but those should be secondary or in support of the information that users want emphasized.
What seems to be a key factor in helping personas take center stage in design focus is found on page 25 and 26, in which presenting personas to our key audience, the stakeholders, should be presented not as a list of user needs. After all, stakeholders and designers can just as easily make a list of user needs that seems perfectly logical to us, but then we’re not the user. It is not until the actual questions and user answers are presented that we see how user responds to a particular problem, challenge, or set of options.
As designers and creative types, it can be a bit scary to give up some of that creative control, but in the end it will only serve to produce a well designed, highly intuitive site.
Start simple, keep it simple, and let it grow from there. The biggest “no duh” moment was easily the very first figure in Chapter 10, the simplest wireframe example. Simply ordering the information in order of importance can offer a fantastic guiding light throughout the rest of the design process. Particularly by the time visual elements are being placed, and we are determining how we want to visually guide the user, we can make sure that certain pieces of information fit in their proper place of importance (“none may sit higher than the king!”).
It is also important to note that another major theme to this chapter is how the Wireframe is also a communication tool within the development team. If the very first step is done correctly, then the baton should be handed off successfully at each stage of development. How clearly the content is presented to the user, and how easy it is to achieve their goals depends on how clearly the content was laid out at conception. A great guideline for web developers should be does this make sense to someone else, and not just some personal annotations. As the project changes hands they simply add their piece to the story.
Also useful was the idea of the experience context. It is easy for navigation, or some form or functionality to get lost in the weeds and lose its way from the rest of the site. This can help ensure that a user has the option to change course without confusion, or that our balance of “content importance” does not get thrown off.
Every time I hear someone say something along the lines of, “I don’t believe in labels, you can’t label me, and I don’t label anyone else” I gleefully label them in their easy to identify bin with the rest of the ‘too naive to think that they can’t be labeled’ crowd. Yes, we’re all unique little snowflakes, but there is also a lot about us that is pretty predictable. How do you think insurance works?
In the chapter “What Users Do” from Designing Interfaces, the authors frame the topic of designing UI in light of the predictability of human nature. Particularly we see this described in the section titled “The Patterns.”
Boiling down human behavior and smearing it over a web page is actually pretty interesting (and rather violent sounding). The beauty is that a well designed site doesn’t draw attention to my habits, expectations, or patterns. Instead it uses them without my knowing, bringing forward the content first and foremost because the site has not asked me to learn anything new to access it.
Particularly the section “Changes in Midstream,” the ability to easily redirect my actions and goals in a given website without feeling like I have to start from scratch is a hallmark to good design. A good example of this is Amazon.com (and really any site that has strong recommendation algorithms) where a suggested product might educate me that my initial search was close, but here might be a better option. This satisfies other patterns in that I was able to “safely explore” and not stumble in to a dead end, and scratch that “instant gratification” itch even though my primary search result wasn’t exactly what I needed.
To my more youthful, idealistic classmates, be thankful you (and I) are so predictable; that means people can make websites that don’t tick us off when we use them.
Once again the theme is that we as humans are huge fans of signs and symbols. We will not look any closer at something than we want to, which is usually less than sign makers (of whatever variety) think. I love the analogy of real world spaces to web spaces. Web designers must be master sign makers, making the entrances, exits, turns, and forks as clear as possible and as consistent as possible.
The section discussing the difference between LA and Boston street signs was hilarious. As much as I hated living in LA, I had to appreciate those massive street signs. The move to oversized titles and minimized content is definitely a trend of modern web design that I’ve noticed. Take the log in or splash page for Tumblr for example. Massive “tumblr.” logo, huge “USERNAME” and “PASSWORD” field titles. There is not mistaking where I am suppose to register.
(Permit me a parenthetical side note, however… WHY OH WHY is the log in always so hard to find for existing users? The registration field is plain as day, but not the log in! Netflix does this as well as do a number of other sites, and it drives me nuts. In most cases I access a website on my computer with my log in info cached, but when I’m on an alien computer I have to hunt for the tiny log in! Sorry, just a pet peeve of mine!)
In the final analysis I can appreciate the “Playskool-ification” of the web, as long as I when I’m good ready to dive in to some meaty content it hasn’t been left on the cutting room floor for a website full of big bubbly boxes, logos, and gargantuan registration fields.
After realizing my notes were quickly approaching the length of the article itself, I decided I would focus in on one area that stood out most to me. Being a process oriented, analytical thinker, I try and look at a problem from every possible angle, plan for every contingency, and plug in every gap! Unfortunately I take that style of thinking in to situations where it is not always necessary. I’ve taught classes where by the end of a session the student’s eyes are glazed over from information overload. In hopes to help the audience avoid confusion when they inevitably encounter an “edgecase”, I instead confuse them by giving them more detail than is immediately necessary.
We fall in to the same pit in all manner of creative endeavors. In fact, ever since a brutally tough English class my junior year of high school, I began a nasty habit of saying something in 10 words when 2 would have sufficed. Shortening sentences, getting to the point, and making my ideas more immediately accessible has been a battle since.
This same thought process must also be brought to web design. Burying the important content in a mountain of detail does not do anyone any good. The other pitfall, especially for creative types, is to design with the design first. We already know what colors, graphics, animations, and other visual elements we want to throw down; yet we haven’t carefully considered how they will function. Building from the skeleton; the fundamental, underlying functionality and navigation structure, will give us a much more effective canvas to put our shiny graphics on.
Overall the article was a great, thought provoking read. A condensed, bullet pointed list for some of those key design concepts would be great cubicle wall material next to any designer’s monitor!
I was also amused at how “typical” of a user I am! I skim, I want my info in 3 clicks or less, I want the inverted pyramid of information, I scan for the familiar search box, I ignore instructions and plow through a website like a bull in a china shop until I get the information I want. If that is how I surf, why would I demand users do break their habits for one of my designs?
The Smashing Book’s thesis would seem to be that predictability and simplicity are often a designer’s best friends, and I would agree. Truly innovative design often gets us to do entirely new things in a way that feels familiar to us. We aren’t being forced to relearn how to complete a task or obtain information. Instead we are lead along a system in which we interact with a new product through natural or previously learned behaviors. A tried (and tired) yet true example is how the iPhone brought a multitude of nearly techno-illiterate consumers in to the world of smartphones; a world that was previously exclusive to the tech fanatic or business consumer.
Undoubtedly my design process for websites will change drastically as a result of this article. I can look at God knows how many projects where I started with – what I thought was – a great idea. Giving a user access to that idea is a whole other ball of wax. For myself, I already understood the whatof my idea, I was the one that came up with it! But how do I get othersto understand it? How often do we give that much concerted effort to make that as simple and effective as possible? We simply move forward and present it to the hapless user who didn’t have the benefit of riding along in our mad “genius” creative process. The common result is a confused, lost, and baffled audience. This article certainly offers some great tools to build from the audience side backwards and to help ensure our “brilliant” ideas aren’t buried under a mountain of inaccessibility.