Anti-pattern: Dead Zones
Posted by Todd Toler in Interaction Design, Visual Design on September 10th, 2009
The Independent Film Channel's home page used to be one big "Dead Zone" before they redesigned it.
Ad placements are, by definition, dead zones. These are specific, predictable sections of a website’s screen real-estate that are subconsciously tuned out by the user as unrelated to the page’s main content and functionality. But designers unintentionally create dead zones of their own all the time. A classic and well understood example of a dead zone is “right-rail” blindness. Content and features below an ad – such as in the right-hand column of a typical two or three column layout – are tuned out as ads on the assumption that everything from an ad down is also an ad. According to Nick Gould, CEO of the design and research firm Catalyst Group, the evidence of this phenomenon goes well beyond the anecdotal. “There is no question that right-rail blindness is a phenomenon we’ve observed in both eye-tracking and usability testing. This is of course mainly due to the ingrained expectation that ads live there.” And it’s not just a matter of positioning elements in a layout. The manner in which a page element itself is designed can greatly amplify or lessen the dead zone effect, in the worse case scenario unintentionally deactivating important content areas and features from the user’s attention. Often this comes from trying so hard to make an element “pop” visually, that the reverse effect occurs. “The dead zone effect is obviously exacerbated if elements below ads are ad-like in their design,” Gould says. ”Furthermore, promotional elements that have standard ad dimensions and contain images are frequently mistaken for ads.” Read the rest of this entry »
The Rounded Corner Debate
Posted by Todd Toler in Visual Design on August 27th, 2009
Rounded Corners Are Cognitively Cheaper, Yet Facebook Drops Them Anyways: Image Source: UI & US
Yesterday Facebook announced that it decided to drop all rounded corners in their latest UI refresh, sacrificing those cheerful corner radii on most of its interface modules for the more severe but coder-friendly squared off look. It’ s almost like they’re declaring the end of web 2.0, once and for all. Keith Lang’s UI & Us has consolidated a terrific history of where this rounded rectangle thing started in the first place… with the original Macintosh apparently. Folklore has it that Steve Jobs pointed out to Bill Gates that the real world is full of rectangles and squarish shapes that have rounded corners -stop signs, coffee tables, beverage coasters – so why not user interfaces? Right angled shapes are computationally efficient to draw, but let’s face it – you can put an eye out with one of those things if you’re not careful. And that’s exactly the kind of human-centric thinking that has Apple rounding the corners on everything from your iPhone to those error message pop-ups that you’re getting in iTunes. Interestingly, Lang makes a cognitive processing argument for the benefits of the roundedness, quoting author Jurg Nanni. “A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our fovea is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”
Wired Misses the Point in Craigslist Cover Story
Posted by Todd Toler in Interaction Design, Reviews on August 21st, 2009
The September, 2009 Issue of Wired
For several years now, I’ve been showing a screen capture of the craigslist.org home page to audiences at various presentations on usability. I ask a simple question. Is this website usable? The audience members, who are generally students, programmers and business people and not members of the design community, invariably return a resounding yes in response to my question. It’s taken for granted. Craigslist, in all it’s glorious straightforwardness, defines usable. Then I proceed to show them how the design breaks a lot of rules – at least by the conventional wisdom of modern web UI designers. For instance, the craigslist home page is crammed full and almost completely lacks any sense of visual heirarchy or prioritization. It provides little to no opportunity for serendipitous discovery of content, only myriad starting options for those who already know what they are looking for. It’s chock-full of cryptic abbreviations. It’s un-visual. It squanders precious screen real-estate on seldom used features. For instance, a full third of the screen is devoted to displaying all the cities where the various Craigslists are located – something which the average user rarely, if ever, has the need to change. Let’s face it, this site is a usability train wreck, right?
Think Like an Instructional Designer: Germane Cognitive Load
Posted by Todd Toler in Interaction Design on August 20th, 2009
It’s been understood since the 1950’s that human cognitive processing capacity is severely limited. In fact, you can put a more or less precise number on the amount of discrete pieces of information that a person can manage in their working memory at any given time – the “magic number” of seven. (see Miller, 1956) When asked to repeat a list of random digits or tones (e.g. 5,6,2,10), most people can manage about 5 to 7 of these “chunks” of information when drawing only from their working memory. It is no accident that we can all remember our phone numbers but only the most acquisitive of us can remember our credit card numbers. Of course, it’s a complicated business of how information gets moved in and out of working memory from long term memory (the closest thing nature has to the $4.4 million hard drive, the RamSan-6200). To get into that we’d have to talk about schema theory and the expertise reversal effect and all sorts of other cognitive science concepts… so let’s keep this simple. How can a basic understanding of working memory and cognitive load theory make us into better UI designers?
Think Like an Instructional Designer: Website Imagery
Posted by Todd Toler in Interaction Design, Visual Design on August 14th, 2009
Everybody Loves Puppies, but The Instructional Potential of This Image is Zero
Careless use of imagery – particularly photographs – is often the difference between a dull “brochure-ware” site and a persuasive information experience. When we redesigned www.dummies.com, we initially populated our design mock-ups with the type of stock photography that professional designers mostly use… only to find that the otherwise attractive imagery added a level of generic-ness that felt downright off-brand. Then we created a style guideline only to use imagery that had true instructional value, whenever possible framed and centered on the action that was being discussed in the content. This applied not only to imagery embedded in the how-to articles, but also the landing page teaser thumbnail photos for the articles and videos. This is a policy the mega-successful book line has had for years, but it wasn’t immediately obvious to us on the web design side. Once we made this change the site felt instantly better. The difference? We thought like an instructional designer.
Interaction designers, graphic designers, and anybody else involved in the ongoing production of commercial websites should pay a lot more attention to instructional principles – even if the site is not overtly instructional. What makes material good for learning also makes it good for other conversion goals – such as explaining products, services, and brand building.
Dummies.com Uses Explanatory Imagery Even in Thumbnails
In fact, why not audit your site’s imagery right now for instructional potential? If you find that most or all of your visuals are falling into the “decorative” category – unless of course it’s fluffy puppies or blondes on the hoods of sports cars (two time-tested exceptions) – then it’s time to make a change. Fortunately, the educational psychologist Richard Mayer has conveniently classified types of imagery in terms of their instructional benefit and effectiveness for learning. The good folks behind the Wiley Visualizing series, which is a textbook line that is highly committed to applying cognitive theories of learning to the design of their products, put together the following summary table, which I’ve adapted with examples that might apply to a typical web designer’s challenge…
The $5,000 Website: I’m Looking for Interview Subjects
Posted by Todd Toler in UX-Driven Company on August 7th, 2009
Minutemen's Brilliant "Double Nickels on the Dime" Was Made For $1200
Sure, anyone can put a website up for free these days, so who even needs to spend five grand anymore, right? In fact, I put this Wordpress site up in under two hours for a cost of $0 (I even piggybacked the hosting charges on another site I have.) Then there is the other end of the spectrum – agency designed sites still cost $250,000+ to design and implement. Companies are still piling hundreds of thousands into internal development of their web presence with homegrown content systems and loads of internal developers. When is this all going to converge?
As an information architect and user researcher I’m part of this machine – part of the development overhead. But I’m feeling the pull every day to work smaller, faster, and cheaper. How do we contain the scope of our projects while simultaneously striving for excellence in design? Perhaps a clue lies in this recent post by graphic designer Lea Alcantara about redesigning her own portfolio site, a project which came in somewhere between $0 and $5,000. Here’s the basic workflow she describes:
Validity and Think-Aloud Protocols
Posted by Todd Toler in User & Design Research on August 5th, 2009
First adapted from the work of experimental psychologists – most notably, Ericsson and Simon’s landmark 1993 work Protocol Analysis, – think-aloud protocols are the de-facto standard for usability research in both the lab and field settings. If you’ve seen or given a usability test before then you know what this is, it’s when the moderator tells the respondent to use a website or other application and then says “Hey, tell me what you are thinking.” Jakob Nielsen and other HCI researchers were quick to trump the merits of this technique for uncovering usability problems with sample sizes as small as four people. Why is the technique so effective? Well, it’s validity stems largely from the fact that it’s a direct measure of what’s happening in a subject’s short-term memory. Other examples of direct measures of human cognition are hard to find… in fact, the two others that are primarily used are response tests (e.g. reaction time indicators) and MRI brain scans! So to have a direct measure that is cheap and easy to administer and also provides qualitative insights into the user experience is powerful indeed! But if the interview is poorly moderated, or descends into a Q & A session between moderator and respondent, then this validity flies out the window… so let’s look at the issue more closely.
10 Focus Group Moderation Tips
Posted by Todd Toler in User & Design Research on August 3rd, 2009
Photo Credit: curiouslee
Focus groups are probably the most difficult moderating challenge. And I know this because I was terrible at conducting them until I learned a few tricks…
Practical Tips for Fielding Design-related Ethnography
Posted by Todd Toler in UX-Driven Company, User & Design Research on August 1st, 2009
Ethnographic Insight: Manhattan Vets Store Their Extra Prescription Pet Food Where They Can
It’s been a great week in the field conducting ethnographic interviews with veterinarians and vet techs. Mostly we’ve been in Manhattan, where food storage in the animal hospitals is a major issue. We’ve seen bags of prescription chow stacked in hallways and offices, hidden in unused cages, stacked on surgical operating tables and x-ray equipment, and almost always taking over the waiting rooms and foyers of the client greeting area. Someone should devise a drop-shipping or home delivery scheme wherein vets can earn their margins re-selling the supplies but don’t have to receive and store the inventory.
I doubt this idea will be used by my employer, which for this job is our scientific, technical, and medical publishing division, Wiley-Blackwell. I’m lucky to work for a company that is committed to understanding its customers with this kind of research before embarking on a product idea. My favorite study design of late for the early, product discovery phase of user research is to do 10-12 remote contextual inquiry interviews via phone and web conferencing software, followed up by 5-6 in-home or in-office ethnographic visits. It’s a large enough of a sample to cover a couple of key audience segments and really learn their unmet needs, but still quite cost effective. And even just a few visits out to a respondent’s real environment crystallizes the findings and brings the research to life. We’ve refined the mechanics of fielding a study like this without breaking the bank, so let me share a few pointers with you.
Read the rest of this entry »
Anti-Pattern: Anthropomorphism
Posted by Todd Toler in Interaction Design on July 26th, 2009
Design for humans – their work, their lives, their dreams. It’s #1 on the list to achieve that state of googleyness we’re all looking for these days. It’s hard to argue with such sage advice. But does this mean that we should seek to give machines human-like characteristics in our design work? Judging by the hapless Ikea-bot, Anna, it’s clear that we’re a long way from anyone passing the Turing test – which is when a computer simulation is created that actually fools a human into thinking it’s another human. A recent transcript from one of my conversations with Anna demonstrates the current state of things:
Recent Comments