paper & pencil

Sign Up Patterns #

This week I came across a couple of items all related to the sign up process. First, there is Luke Wroblewski's summary of a survey of sign up forms conducted by Smashing Magazine. Definitely check out the full survey report (part 1 and part 2) as it is interesting to see what most sites do.

Luke also references his own article, Sign Up Forms Must Die, which is an excerpt from his new book on forms, where he promotes "gradual engagement" - allowing users to try out a web service first before having to create an account.
The book: Web Forms Design: Filling In The Blanks.

Live by the Mockup, Die by the Mockup #

Luke's article, Live by the Mockup, Die by the Mockup, highlights a key point about mockups, that is they should not stand on their own. In order for mockups to be effective they need to:

- be accompanied by written description (use cases, annotations, etc.) of the functionality presented visually;

- be discussed with the client so that the mockups are viewed in the correct context.

When interface designers focus too much on mockups rather   than product solutions, the design profession may suffer. This   type of dilemma already exists for visual designers, who are   routinely called upon just to “make things pretty.” As   a result, every interface designer should focus on building   a reputation as a problem solver and communicating that through   the language of design and business. The presentation medium   will change, the need to solve problems will not.

Integrating Social Media into a Web Content Strategy #

Here is an excellent Digital Web Magazine article on focusing on your client's needs rather than the technology:Integrating Social Media into a Web Content Strategy

Make it clear that social media is not about technology, nor about keeping up with the latest trend. The primary goal of using social media has to be communication, not technology and not viral marketing. A company has phones because it wants employees to be able to talk to other people, not because it wants to be at the “cutting edge of voice-activated, enterprise digital communication systems”—and not because it wants to call everyone in the phone book with a sales pitch! If the main goal for using social media is to be at the cutting edge of technology, or if your client’s eyes light up when they realize they can use social media to send a mass message to followers, it will fail. Social media is part of a long-term communication strategy to build relationships.

You can replace "Social Media" with any of the latest and greatest tech buzzwords... "AJAX", "Web 2.0", "Cool whiz-bang thingee". The focus should be on the what your client wants to achieve balanced against their customer's needs.

Effective Prototyping Methods #

The following are notes from the Interaction08 session - Effective Prototyping Methods, presented by Jonathan Arnowitz of SAP Labs.

Video
Book site

• Sketching v.s Prototyping: not a dichotomy but a continuum
• Start 90% sketching, end 90% prototyping
• Everyone can prototype, prototyping is not always design, it's communication
• Transparency of the design process
• Don't start knowing exactly where you want to go, it's about making errors and fixing them quickly
• Exercise: define prototype = we all had different definitions
• Prototype = model of a design that is complete or incomplete, but is specific
• Most important design artifact in a software project
• Need to determine right level of specificity (phase of the project, audience, etc.)
• Everyone can prototype, as long as 1 person is in the driver seat
• Use the tool you know best
• Exercise: quick prototype of 1 screen of a contact system; we all made assumptions about the product
• Process: Understand users > Design UIs > Prototype > Ensure Usability
• Helps to verify requirements
• Select design criteria: ex. users should feel in control, speak the user's language, minimize user's memory load
• "Squishy", need to use your gut
• After prototype is done, set an expiration date on it and plan for that, communicate to stakeholders

Redesigning Sony-Ericsson's Product Catalog #

The following are notes from the Interaction08 session - Redesigning Sony Ericsson's Product Catalog, presented by Saskia Idzerda. She presented findings from a series of usability studies conducted around the world on the Sony Ericsson Mobile Phone Product Catalog web page. Check out the current page.

Unfortunately, the slides from the talk which show the design variations of the page don't seem to be online yet. But the video is available and they do a good job of showing the slides.

Notes:

• Was a product list but became too long as catalog grew from 10 to 20 to 70 different phones
• Customers indicated they wanted: 1) ways to filter the list and 2) summary info before the detail
• Usability Process: Created 3 throwaway protoypes > usability tests > from the findings created 1 prototype > usability test > final prototype > international usability tests.
• Used Agile development process
• 1st test with 7 testers in Sweden on all 3 prototypes
  • prototype #1 had a filter panel on the left with multi-steps, all white, mouseover photo provided detail
  • Didn't see the filter options, focused on the product photos
  • didn't see Next links in selection panels
  • got confused when combo of filter options and got 0 results
  • cannot underestimate the pull of product photos
• 2nd prototype had filter panel on left with expand/collapse categories of options
  • forgot selections when collapsed and wans't sure if list still couldn't take it into account
  • linked to large preview image
• 3rd prototype had 1 panel with all options visible and instant update of list, sliders for some options (size, etc.)
  • noticed more b/c of color choices
  • instantly updated list
  • size of the phone is an important selection factor
  • confused by how the sliders worked, did not get it at all
• Lessons learned
  • visibility is key
  • all controls visible all the time
  • immediate feedback necessary
  • avoid zero results
  • no innovative sliders
• 4th prototype included new marketing categories (In Focus = Camera phone, In Tune = Music Phone, In Style = Design Phones..) in tabs across top, filter panel also moved from the left to above the phone images
  • tested with 8 users in Sweden
  • users didn't see the categories, to separate from the phones
  • also even though some phones could play music they weren't considered music phones, those have additional functionality, same with camera phones. So, result is confusing to the user. Also, not easily translatable to other languages.
  • graphically the tabs looked like banners which resulted in users ignoring them
• Final prototype included categories within the filter panel, which remained above the images for better visibility
  • features written as user focused benefits "can take pictures" vs. "camera phone"
  • list is immediately update
  • as filters are chosen, any other filters that would result in 0 results is grayed out
  • click to preview w/large image and summary where filter panel was, instead of on mouseover, inline
  • comparison tool displays where filter panel is as needed, better imagery to "show" drag-n-drop
• International usability tests findings
  • everyone looked at phone images 1st
  • only US cared about styles
  • India users hated the color green, thought it was dull; everyone else said it was nice
  • No one noticed background image
  • 50% of China users preferred old design, tend to like dense layouts, to see all the phones at once
  • no one used the filters much in non-US countries
  • introduced an artificial progress bar to show the results were changing and it worked as the changes were quick and users didn't notice anything changed
  • users loved the drag-n-drop comparison tool but it had to be pointed out to them, didn't get it on their own
  • some filters had to be "only" (camera phones) and some had to be "and" (clamshell and slide out) so got a little confusing but result made sense to users
• what went live is similar to final prototype with some color changes
• Analytics since the implementation of the new design
  • 1/5 use the drag-n-drop comparison tool
  • filter options: 50% benefits (can take pics), 27% style (clamshell, stick, etc.), 22% category (music, camera, etc.)
• Usability studies were very valuable but they did see some conflicts with what occurs in reality
• about answering "can" people use it but doesn't answer "if" and "how"
• if & how users will use a feature is hard to test, hard to create the motivation in a test
• So, not a cure-all but still beneficial. Combine with other measurement tools such as surveys, field research and web analytics to get a more complete picture

Designing for SpaceTime #

The following are notes from the Interaction08 session - Designing for SpaceTime, Building in No Time, presented by Matt Jones of Dopplr. Dopplr is a site where you upload your travel itinerary, share it with friends, and it will show when connections of yours will be traveling to the same or nearby locations.

Slides
Video

Notes:

• Practices cybernetic serendipity, patterns to create unexpected and delightful results
• "Serendipity is looking in a haystack for a needle and discovering a farmer's daughter"
• Central object = the trip; where are you going = space and when = time
• Models: we make things to help us understand
• Dopplr: model of the future in spacetime
• Trying to find the perfect line through the world
• Inspiration: Recreating Movement
• How does a view of the past & future affect our interactions?
• Our social realities can be described as: Contextual, Interwoven, Fuzzy, Intertwingled
• Need to get more down & dirty with context; Tufte's recent redesign of the iPhone completely ignores context
• What we believe we cannot prove
• We're not even close to understanding how mobile devices devour our attention
• How to deliver bits of info in the right context at the right time?
• Interwoven + distributed: understanding how the very small has big implications
• Check out: Native to a Web of Data
• Web as coral reef: both architecture and organism
• Dopplr: web of data and movement
• Can we make a web site that no one has to go to?
• Deliver value wherever you need it
• Designing a distributed, interwoven identity
• Trying to focus on delight 1st; ex. hotels putting a rubber duck in your bathtub
• "Rational Delight"
• Fuzziness - no fuzziness on city search. Make a good guess on things based on past patterns; ex. searching for a city gets difficult when you hit N. America where there are 95 different Springfield's
• Ask for help when don't get it right; have users help correct
• Inject fuzziness in other places: you're in Oakland and a friend will be in SF around the same time
• Also show who's leaving or arriving just outside of your dates
• Play to find the perfect line; provide fuzzy ways to help people find the perfect line
• What you can do w/small teams (doesn't scale); main design tool: IM and speaking, continuous discussion; do you need to scale?
• Loves concept models: boundary objects create discussion
• To have 1 good idea you need lots of ideas
• Idea scaffolding: lots of sketching and talking
• You're never done!
• Prototype and test new features quickly
• Use tags to mark new features, versions
• Co-Design
• Constantly shifting, like the Hogwarts staircases
• Choreographer of SpaceTime
• "Creating the controversial conditions for an idea to survive"
• Trying to be more public with their ideas, opening the conversation up to users

Clear Signage #

Ever walk into a place and it did not match your expectations? A sign I saw in Savannah does an excellent job of setting expectations:

The sites we build need to achieve the same effect. That is we need to help our clients provide better signage. Signage is everywhere on a web site: it's in the visual design, navigation, headings, content and even the error and confirmation messages. All of this should reflect the purpose and personality of our customers in order to create a better user experience.

Don't Make Me Click #

The following are my notes from Aza Raskin's session, "Don't Make Me Click", from Interaction08.

• Fundamental web tension between boring and amazing
• Need to aim for just right somewhere in between these two
• To the user, the interface is the product and they lose sight of the real focus of the product
• The best interface is NO interface
• Ironic: need to design the best interface so that there is no interface, interaction designers need to work on minimizing interaction
• What's better than a shovel? A hole.
• Can't give in to the seduction of interaction
• With Google you can track flights, track shipments, do calculations, etc. But this is all done from ONE search field
• Our job is to say no
• RIA (Rich Internet Application) = MIA (Materialistic Internet Application)
• Want to aim for ZIA (Zen Internet Application) - act w/o doing
• When interaction (clicks) increases, content decreases and this is not good
• Don't force users to ask for more content, just give it to them
• Most people click on result #10 than #9 so why paginate - Continuous Scroll, ie. Google Reader. Interaction decreases, content increases.
• Scroll tabs - add tabs to the bottom instead of to the right, show breaks in scroll bar
• Bret Victor - worrydream.com
• Interaction decreases does not equal boring
• www.flashearth.com
• Take what already exists and try to remove unnecessary interaction
• Songza.com - youtube for music
• Inappropriate forms - ex. Google Calendar. See 30boxes.com for how to do it better.
• Another Bret Victor project - drag-n-drop To and From buttons on a map
• Don't force me to ask for content, just give it to me

Concept Models #

The following notes are from the Concept Models session, presented by Dan Brown, at Interaction08.

Presentation slides - click on Download File as the text is all garbled on the slideshow but the PDF is fine.
Video

• Have to create the tools to use in creating the design
• You have requirements now what? Sketch, scenarios, flow charts, mockups, wireframes, whiteboarding
• What if the requirements are unclear or incomplete?
• Can use Concept Models to flesh out underlying concepts (nouns) and connections between them (verbs)
• Ex. Design an expense report. Nouns = Employee, Expense, Amount, Manager, etc.
• Concept Models represent reality through nouns connected to verbs
• Helps to
  • establish an agreed upon vocabulary
  • bring out questions
  • understand new domains
  • synthesize new ideas and start designing
  • determine key concepts to focus on
  • determine relationships & interactions you need to design for
  • define scope, minimize concepts you don't need to focus on
  • define views (pages, states) and components (elements)
• From the model then blow out detail as needed for each concept. what should this look like online?
• Ex. concept is Expense, what are the components - amount, receipt, category, etc.
• The determine how to represent the lines = interactions, online?
• Collect & categorize all possible interactions which can then map to a pattern.
• Determine a particular kind of relationship always map to a particular interaction?
• Steps:
  1. Gather concepts
  2. Create connections
  3. Research and elaborate
  4. Validate concepts and connections (are these the right ones?)
  5. Simplify - remove redundant or unnecessary concepts
• Always ask questions!!
• Share concept models with stakeholders
  • set expectations, what this is, purpose, how to review it
  • generate questions
  • explain implications: if we take away X users will not be able to...
  • go in with a set of questions, generate conversation: what's missing?, are these correct?, do these relationships matter?, correct labels/wording?, can we enforce these relationships?
• Final thoughts
  • use when underlying structure is unclear to help get clarification
  • use to help escape the page metaphor
  • use to bridge gap between what & how
  • helps in understanding the problem and coming to a solution
  • useful in translating concepts into objects for developers, have them validate concepts

Fire Bad. Tree Pretty. #

At Interaction08 I attended a session called "Everyday Objects" presented by Bill DeRouchey. It was an entertaining session on the language of interaction. I highly recommend checking out the presentation and video:

In the meantime, here are my notes from the session:

• People use visual cues and past experience to figure out an interface
• Language of interaction evolves & spreads (ie. mouse pointer used in ads)
• Symbols start with 1 meaning; extend and add more meaning
• They can translate across products (ie. play/pause button in place of on/off on the LG washer & dryers)
• Meaning can survive a long time (ie. stacked list of short words)
• Need to see what people see; seek inspiration, look at objects around you
• Mixing - football stats integrated into the display
• We create and curate this language in the interfaces and interactions we design
• Components of language:
  • Elements - size, contour, motion, etc.
  • Relationships - proximity, repetition, etc.
  • Principles - clarity, appropriate, purpose, delight, etc.
• Command or label?
• Clarity or confusion? warmer v. colder; turbo cool v. express chill??
• Avoid redefinitions
• Colors used for meaning or just decoration? How did green come to represent start/on and red for stop/off? Bill's theory - it started with the "cavemen": Fire Bad. Tree Pretty.
• Icons used for habit or meaning? (ie. floppy disk icon = save)
• Gesture natural or cryptic? (ie. motion sensors in bathrooms)
• Priority, where is the focus? Create a hero (ie. Big yellow pause button on the TiVo remote)
• Clarity - action = results
• Appropriate, is it really necessary (ie. TV Remotes)
• Purpose - be yourself. Best. Interface. Ever. = garage door opener. single button, no label.

Check out Bill's www.historyofthebutton.com for more interface fun.