paper & pencil

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