RailsConf Europe 2008

Session – Design for Usability

presented by Christian Lupp

In his talk at RubyConf Europe 2008 Christian Lupp showed a designers approach to solving problems. It my seem strange to have a designer give a talk in front of a developer crowd, but I think you will find, that we can learn a few things by observing other professions’ methodologies.

He told the audience that many great ideas have evolved on paper. You start out with rough sketches and prototypes. In this stage you basically create a landscape of your application and it should help you to understand what the problems are you want to solve. Once you’ve dont that, you redefine these prototypes iteratetively. Be confident to throw stuff away that isn’t working out and explore alternative solutions. Fail fast and early.

Hmm, this all sounds an aweful lot much like agile software development, doesn’t it?

He also mentioned that you should always take the context into account when constructing your application. Without thinking about the user’s perspective and his needs, may it be a human or a machine, it’s likely that you develop in the wrong direction.

If you have two equal solutions to a problem, take the simple solution. This is called the Occham’s razor Behold! Knowledge from the 14th century folks, but still true. In order to find the simplest solution, you reduce functionality until your application is missing something important, then you go one step back.

Then the talk got technical after all.

Christian asked why we as web developers should use techniques like unobstrusive javascript at all and listed some valid points. First, people using screenreaders will love you. Second, the marketing and SEO guys will love you. You improve the overall performance of your website and thus speed up the overall user experience on your website. Users don’t like to wait. If a page is snappy and responsive, they are more likely to come back.

Christian also shared some basic design tipps with us.

Repeat with DRY. Don’t show different elements on every page. Instead develop an overall graphical and UX concept. It doesn’t only make you site look more professional but will also help users to find their way around on your site. Usability equals recognizable patterns, so repeat yourself and use layout grids etc. that will help your users to understand the content of your site faster.

Another good tipp is to always validate user input immediately by javascript for example. Give your user feedback all the time and instantly, eventough the action he started may take longer. Be creative and entertain you user while he is waiting for search results. Instead of letting the user wait for the search to finish, you can show him an immediary screen which informs him that his search is beeing performed and could take a few moments to finish. You informed your user and in the backgorund your server is already working on finding relevant results for him. This pattern is already used by most forum software.

That was “Design for Usability”, a very interesting talk.

Popularity: 1% [?]

What is this about?

These are excerpts of some very interesting articles I found while researching how simplicity is used in order to improve webdesign and user experience. I added the links to most articles so you can read them in full length if you like.

Another great resource about simplicty in both design and business: Getting Real

Quotes:

Leonardo Da Vinci: “simplicity is the ultimate sophistication.”

Milton Glaser: “less isn’t more; just enough is more.”

The complexity of simplicity:

http://uxmatters.com/MT/archives/000151.php

• reduction of lines, colors, shapes, plenty of whitespace => perceived as easy to use, even if it may not be the case
• but: simplicity can’t be determined by how few items are on a Web page. Simplicity, like most elements of design, needs to be evaluated in context

• simplicity engages users to try a service, perception of complexity turns users away (“this looks cluttered; therefore, it must be difficult to use”)
• contributing users under 10% on websites (youtube 0.5%, wikipedia 1.8% produce 70% of articles, top 100 digg users submit 56% of stories)

Yahoo! Groups – content production pyramid:
http://www.elatable.com/blog/?p=5

• 1% of the user population might start a group (or a thread within a group)
• 10% of the user population might participate actively, and actually author content whether starting a thread or responding to a thread-in-progress
• 100% of the user population benefits from the activities of the above groups (lurkers)
• social software sites don’t require 100% active participation to generate great value
• top users (power participants) most vocal about their needs, they need more powerful tools than lurkers
• edward tufte: measures simplicity by information density (= how much screen real estate is devoted to useful information)
• simplififying may penalize power users, if the needed tools are out of sight
• track different types of users, their states and transitions => map this to presentation of feature sets
• present more functionality if they tell you that they are ready for it
• showing all features available without context makes a product complex
• IDEA: “advanced”-links with dropdown (mouseover) which reveals expert options available in this context
• muting the expert actions will allow faster completion of the most frequent actions by both experts and novices
• power participants drive revenue, desired behavior must be encouraged by exposing the features that create value for the site
• hiding of functionalty discourages users to adopt desired behavior (content creation)
• most users don’t use customized toolbars etc, so smart defaults are important

John Maeda’s laws of simplicity:

http://lawsofsimplicity.com/category/laws?order=ASC

Reduce:

• “The simplest way to achieve simplicity is through thoughtful reduction.” When in doubt remove it
• how simple can you make it? <-> how complex does it have to be?
• balance between simplicity and complexity is important -> finding it can be truly complex

Organize:

• “Organization makes a system of many appear fewer.”

Time:

• “Savings in time feel like simplicity.”
• waiting is frustrating
• users want to find the quickest/simplest way to get a task done, everything else gets in their way and adds to their frustration
• When forced to wait, life seems unnecessarily complex.

Learn:

• “Knowledge makes everything simpler.”
• people don’t care for instructions, they will just try if it looks simple enough
• if they fail they will read instructions eventually so they should be within the users reach when needed

Differences:

• “Simplicity and complexity need each other.”
• without complexity we could not recognize simplicity when we see it
• in a complex world a simple product stands out, it becomes remarkable (worthy to make a remark about, like a purple cow)

Other laws:

• Context: “What lies in the periphery of simplicity is de?nitely not peripheral.”
• Emotion: “More emotions are better than less.”
• Trust: “In simplicity we trust.”
• Failure: “Some things can never be made simple.”
• The One: “Simplicity is about subtracting the obvious, and adding the meaningful.”

Other Articles:

http://www.guuui.com/browse.php?cid=225

• Users love link-rich home pages, The secret is clustering: “Users look at each cluster and quickly decide whether the cluster is likely to contain their content or not. By focusing on just one or two clusters, the user winnows down their choices to just a handful of links.” -> Page Hierarchy
• contrast is google’s search homepage

http://www.uie.com/articles/simplicity/

• people judge the quality of a product based on the number of features, if they have never used it before.
• After having used these products however, usability will start to matter more than features.
• many consumers, when faced with a purchase decision, choose complexity because they try to predict they potential future needs
• users want to avoid trade-offs, help them to make the right decision by understanding what they need -> user centric design
• also communicate simplicity, make it your story, tell users that they will find what they need and that all is simple to use

http://informationarchitects.jp/100E2R/

5 Statements

• Don’t tell us to adjust the font size
• Don’t tell us busy pages look better
• Don’t tell us scrolling is bad
• Don’t tell us text is not important
• Don’t tell us to get glasses

Five Simple Rules

1. Standard font size for long texts
2. Active white space
3. Reader friendly line height
4. Clear color contrast
5. No text in images

The beauty of simplicity:

http://www.fastcompany.com/magazine/100/beauty-of-simplicity.html

Google

• Marissa Mayer: “Google has the functionality of a really complicated Swiss Army knife, but the home page is our way of approaching it closed. It’s simple, it’s elegant, you can slip it in your pocket, but it’s got the great doodad when you need it. A lot of our competitors are like a Swiss Army knife open—and that can be intimidating and occasionally harmful.”

Philips

• philips transformed into the simple company
• consumer centric design, they listen to what consumers want
• advanced technology simple to use
• it’s not just a marketing term, it’s also lived on management level: 500 -> 70 businesses, 30 divisions -> 5
• meetings: max 10 slides per powerpoint allowed
• Sales growth for the first half of 2005 was up 35% in north america
• Supplier of the Year by Best Buy and Sam’s Club, 12 Innovation Awards

Quicken

• microbusinesses (9 million potential customers)
• small businesses afraid of accounting software, terminologie
• they blew the first try, then got it right after the 3rd interface iteration
• changed terminology to simple terms like “money in” and “money out”
• simplified setup and feature set to bare minimum (just enough) => 125 setup screens -> 3, 20 major tasks -> 6 essentials
• 100,000 units sold in its first year on the market

Simplicity/usability pitfalls

http://www.guuui.com/issues/04_03.php

“The human brain can’t process more than 7 +/- 2 items at a time”

• study to measured short term memory, not what people can perceive visually at a time
• Humans can only retain 7 +/- 2 items in the immediate memory, but have no problem in dealing with great amounts of information in the field of vision
• dangerous assumption when applied to navigation\!
• Reducing the number of menu items will make the site hierarchy deeper and thereby increase structural complexity
• users find information faster in broader navigations than in deeper ones

Download time

• strong correlation between perceived download time and how fast users can accomplish their tasks
• help users to find the information faster

“Users don’t like to scroll”

• study from 1996 (10% of users scroll beyond fold)
• not true anymore, strong clues that page contains desired information -> user will scroll to find it
• too much “breaking up” of content is frustrating
• hiding information on other pages increases structural complexity

Striking the balance

• difference between what people say and what they do
• rely on users behaviour, not on what they tell you

Popularity: 1% [?]