Archive for category Interaction Design
Anti-Pattern: Competing Meanings in Website Nomenclature
Posted by Todd Toler in Interaction Design on October 29th, 2009
Yes. A love of words makes you a better IA.
Wordnik.com doesn’t jump to mind as an obvious resource for an interaction designer. For a dedicated Sunday puzzle solver? You bet. Or if you have a grandiloquent and sesquipedalian consulting style (pompous and prone to long words), then this is your place – btw, remind me not to hire you. I read Wordnik fairly regularly and am now a self-diagnosed cremnophobic (one who has a morbid fear of being near the edge of a cliff, precipice, or abyss) and I also know the difference between an acronym, like ACORN, and an initialism, like NAACP (one spells out a word and one doesn’t). But geeking out on words sharpens an important instinct for anybody who trades in the design of screens- a fetish for precision in language. Obsessing over language will keep you from repeatedly stumbling into what is perhaps the most common antipattern of all – vagueness and ambiguity. Here’s three main themes to keep in mind when choosing words for your wireframes or designs:
10 Great Interaction Designs – in Cut & Folded Paper
Posted by Todd Toler in Interaction Design, Reviews on September 30th, 2009
Experience designers who work in digital media such as RIAs, video games, and DVD menus are already well conditioned to thinking beyond the page as a metaphor for organizing information structures. But paper itself is not the villain. In fact, paper can be transformed into all sorts of interesting interactive possibilities – including graceful and surprising transitions, progressive disclosure of information, impactful visuals, and above all, a compelling and satisfying simplicity.
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 »
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…
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:
IA Primer: Landing, List, & Detail Pages
Posted by Todd Toler in Interaction Design on July 7th, 2009
From an information architecture point of view, it’s convenient to think of most website structures as a collection of three primary types of pages – landing pages, list pages, and detail pages. Everyone has seen plenty of examples of each of these, and the first two are often combined – making the issue somewhat blurred. A landing page is the type of page you typically see when you are either on the home page or a main category page of a site. It tends to be a page you pass through to get to a site’s full organization of content or products, which are organized as a series of list pages (screens designed to browse multiple choices with limited information about each one) and detail pages (screens devoted to a single product, article, etc.) Sort of like billboards, landing pages are typically plastered with feature boxes touting services, featured content or products, or smaller curated lists of links based on some attribute a designer thinks a user cares about (such as “most emailed”, “best selling,” “new,” etc.) Their layout is invariably some variation on the tiled or stacked boxes approach – a design choice made when the primary goal is to provide a layout where the designer has a lot of flexibility in assigning different visual importance to various elements. List and detail pages, on the other hand, are exactly as they sound – a framework to systematically display and organize items on a website.
A Typical Landing>List>Detail Page Progression at www.BestBuy.com
Landing Page
List Page
Detail Page
Choosing a Wordpress Theme: Part 2 – Blog, Magazine, or Portfolio Design Pattern?
Posted by Todd Toler in Interaction Design on June 30th, 2009
There are literally hundreds of Wordpress themes available, a number which seems to be growing faster than anyone can keep up with. Fortunately, most of them fall into a few basic interaction design patterns. An understanding of what these patterns are and how they differ will make it easier to identify the right theme to begin a project with. To distinguish this from other Wordpress theme categorization schemes out there, I’m grouping all themes into three major categories based on the way an information architect might think about it. It is important not to get too distracted by the visual design(e.g. colors and graphics) or content-type specialty (e.g. text, video, photo) of a pre-built theme – at least, at first. The look of things and the messaging and positioning of a theme is much easier to change than the basic flow between elements, how the navigation, pages and sidebars are laid out, which features are deployed and in what way.
Blog Themes
Magazine Themes
Portfolio Themes
Choosing a Wordpress Theme: Part 1 – Premium, Custom, or Free?
Posted by Todd Toler in Interaction Design on June 26th, 2009
Photo Credit: Eric Flexyourhead
Wordpress can be used to pull off just about any type of website these days, and clearly the magic of this platform lies in the vast proliferation of pre-designed themes, plug-ins, & widgets. Choosing a theme – which is the single largest determinant of a site’s look, feel, and organization – can be a confusing process. If you’re hacking together a site yourself, don’t overemphasis the way the theme looks – at least on the surface. After all, you can always tweak the basic feel of things, swapping out your own graphics, colors, and images with just a little hunting and pecking around the theme’s file structure and a few basic style-sheet tweaks. Far more important are the basic information architecture and functionality choices the theme designer made – because let’s face it – you’ll be locked into these unless you really know your way around the code. Most Wordpress theme choosing advice is focused on practical tips – e.g. Is it Widget Ready? But let’s step back and focus on the overall quality of the design, assuming we can tweak the little things we don’t like about it later. To help make sense of it all, I’m proposing a simple taxonomy of types of Wordpress themes to help with the decision-making process.
Recent Comments