justaddwater.dk » ui11

Paradox of Choice — Barry Schwartz Video

Jesper Rønn-Jensen — Fri, 24 Nov 2006 13:12:20 +0000

The most influential talk I have heard this year is Barry Schwartz on the paradox of choice. I cannot recommend this talk enough, so I was thrilled to see that Barry did a similar talk that’s available on Google Video.

Google TechTalks April 27, 2006 Barry Schwartz Paradox of Choice (one hour video). If you’re in a hurry, you can skip the first 3 minutes to where his talk begins.

The content of his talk has really influenced my daily work in many ways. Especially because his points are directly translated to choices in user interfaces and how too many choices affects user experience.

More info:
My live notes from UI11 in October: Barry Schwartz: The Paradox of Choice. Also Luke Wroblewski made an excellent summary and later a comparison: The sweet spot on the curve.

Technorati Tags: barry schwartz, uiconf, ui11, choice, psychology, paradox, usability, user experience, lukew, luke wroblewski, video, talk, speech

UI Conf: My Higlights from UI11

Jesper Rønn-Jensen — Wed, 18 Oct 2006 15:12:34 +0000

UI11 is over and I headed back to Denmark to digest the insightful presentations. The conference had many highlights and it was truly inspirational to meet so many bright people.Some highlights are worth mentioning.

Fantastic speakers

Meeting Luke Wroblewski made me realize there is much to being a successful designer than just graphical design. Most of his presentation was centered around understanding the business logic, processes, analysis of data. Though I’m not a graphical designer, that made me realize why I tend to be involved in business analysis when I’m on a project.

Oh, and I took this really cool photo of him presenting:

(In fact, photo is taken right after the presentation, because he was usually standing with his back to the audience while explaining the screenshots. After the session I got him to “present” to get the photo with his logo projected on his breast).

Jeff Patton’s talk on agile project teams was a powerwalk through tips, tricks and pitfalls of agile projects, compared to usual web development projects. I had a chance to meet Jeff after his 90 minute 76 (dense) slide presentation, and found out that he knows Ole (jepsen), my old Capgemini colleague. I know there is so much from his talk that I can use in my everyday work (even though very few projects I’m involved in are truly agile).

Bad usability is great education of project team: The Bad Usability Calendar is a great icebreaker at projects, and I already printed it and put it on the project room wall. A poster with bad examples are really better than good example to make people realize something is wrong. It was kind of the same when Jared Spool gave his talk. The bad examples were good an plenty.

It was the first time I saw Jared presenting live. And I must say: what a show! If you ever get a chance to see him live, I highly recommend it. He’s entertaining, lot’s of humour, very good examples — also of things that are done well.

There was one place where he talked about dropdowns that hide useful navigation. At this particular page, he talked about the alternative to pull all useful information out of dropdowns and placing it on screen:

I couldn’t say that the page would be less dense because it’s already dense. Except for this cute little baby that looks clueless. “I’ve been staring at these dropdowns for months and I still don’t get it

Actually, Jared will present at Danish conference “usability dagene” (link in Danish) next month here in Copenhagen. But as far as I know, It’s as a video presentation. Not quite the same, but hopefully still useful for those who attend.

The biggest eye-opener for me was probably Barry Schwartz who gave a brilliant talk about the paradox of choice. About how too much to choose from actually paralyzes.

Actually none of the speeches I saw were boring or irrelevant. One took a little too long to get interesting, but that was probably because I already knew the stuff.

Being a usability test victim

I met with Josephine and Barb from Techsmith and they used me for user-testing one of their upcoming products. That was actually a great experience, and found out that user testing is done almost the same in the US and here in Denmark. One little difference: Test lead was reading the introduction aloud from a paper word by word. I have never seen or used that in Denmark. Cultural difference perhaps?

Ruby on Rails awareness

UI11 was not a developers’ conference. However some of the presentations actually mentioned Ruby on Rails. Most people attending were graphical designers, interaction designers, usability specialists, user experience people, etc. I didn’t expect such awareness and attention on Ruby on Rails.

I believe I mentioned our own usage for Ruby on Rails as prototyping tool at work. Also, a person working for a Fortune 500 told me about their considerations to port intranets and websites to Ruby on Rails. Very exciting. (although I probably can’t mention who it is).

Meeting people

Finally it was truly inspiring to meet so many like-minded and inspiring people. Just to mention a few: Daniel Szuc, Matthew Oliphant, John Rhodes, Art Tran, Maureen, Eidar, Peter from Austria, Glenn, Elizabeth and Kyle. Also the other Danes that were there: Brian, Jane, Christina, and Rolf Molich of course.

Great photo opportunity

UI Conf was a great chance to take some photos. I posted the better of them on flickr. But some are worth highlighting here.

Here are my notes from the presentations

Technorati Tags: uiconf, ui11, usability, conference, event, jared spool, josh porter, luke wroblewski, barry schwartz, calendar,

UI Conf: Josh Porter on recommendation engines

Jesper Rønn-Jensen — Thu, 12 Oct 2006 20:16:34 +0000

[Jesper's note: It will be interesting to see how this maps to Jakob Nielsen's old ideas about reputation managers.]

Netflix example:

Wall-Mart went head to head with Netflix and lost. They are now linking to Netflix

* 4 million subscribers 10 months ago
* 60,000 titles, 40,000 of which are rented every day
* 2/3 of movies rented come from recommendations

The movies we recommend generate more satisfaction than (new releases)

- Neil Hunt, Netflix chief product officer

Collaborative filtering

Example with 5 users
1. Look for people with similar habits
2. Choose the best fiter. In this case, user 3
3. Find differences in best filter
4. Those difference become best filter

Netflix recommendation engine contest
* Giving a huuuge user database
* Improve recommendation by 10%
* in one week a team came up with a suggestion that was better

Implicit or Explicit behavior

Implicit data: Not a rating.
Example: LastFM where user don’t rate, but just watching what what music you play.

Implicit is everything behavioral data.

Explicit behaviour is when you demonstrate preference

Pandora’s Music recommendations
Hired musical experts and recorded small facets of the music.
Not a personalized recommendation system. Music based system recommendation from musical elements

Tivo (movie recommendation) thinks I’m Gay
* Basil Iwanyk
* he started watching “guy stuff” like war movies
* tivo started recommending documentaries on The Third Reich
* Queer eye for the straight guy
* Later this became an episode of King of Queens

So, recommendation engines are not perfect.

Customers who bought (clothes) also wear:
* clean underwear
==What?!?

Changed to
Customers who wear clothes also shop for:
* clean underwear

Wall-Mart put in a recommendation system last year
* planet of the apes
* recommended a martin luther king video

Still have not put recommendations back on site.

[My live notes from UI Conf. All UI Conf notes. Expect updates of thes rough notes, with references, images, etc. within the first few days – this footnote will stay, though. Feel free to add comments, links to similar notes, presentations, correct quotes and add where appropriate. thanks! Also I post my pictures on Flickr tagged uiconf]

Technorati Tags: joshua porter, uiconf, ui11, recommendation, reputation, jakob nielsen, uie, bokardo, filtering, social, netflix, niel hunt

UI Conf: Jared Spool

Jesper Rønn-Jensen — Thu, 12 Oct 2006 15:44:46 +0000

[Jesper's note: There is actually a lot of this that I decided not to jot down. Jared said that his talk is available on Google Video. However, I couldn't find it]

Scent of information. Like predator hunting, people hunt for information. The “scent” users pick up is actually trigger words.

Example: A short link from “Neutrogena” link text “SOS” which doesn’t work. It doesn’t contain trigger words.

Try to swap the sitemap for the homepage!

Jareds opinion. Sitemaps actually serve a better job than most homepages do.

[photo of me live-blogging]

Pulldowns and flyouts simply doesn’t work! The trigger words don’t smell.

Example Johnson & Johnson

I couldn’t say that the page would be less dense because it’s already dense. Except for this cute little baby that looks clueless. “I’ve been staring at these dropdowns for months and I still don’t get it

No indication, no clue, no smell. They hide links with trigger words

Hampshire college even worse. There are a list of arrows with absolutely no text. You have to put your mouse over the arrow and it sort of pops out.

Provide the content, or provide the scent

This is the

scrollstoppers

users are happy to scroll

Designers can actually put things into the page that prevent from scrolling
* small text at the bottom
* whitespace at the bottom
* horisontal scrollbar
=> users wont scroll below it

Either the users find what they are looking for, then leave. Or they just continue to read

Q: comment from Daniel Szuc: more aquestion of the priority of the content. How to convice clients to prioritize and perhaps get rid of content that has no strategic value.

“you can’t stop people from sticking beans up their nose”
Best thing you can ask them is afterwards: “is that when you expectes”

[big laugh in the audience]

One way could be to have a clear vision. Then you can ask yourself: is this helping our vision.

Intuitive design

[here are some great examples because Jared picks examples that are used elsewhere as best in class.]

Haynet (used by Jeff Veen).
Two buttons: Need Hay, Have Hay

At first it seems intuitive but it’s not at all. When you look beneath it, there are lot’s of people in the wrong place. And that’s the problem with asking “do you think it’s intuitive?” It just doesn’t work!

Another example: Broadmoor hotel, used as best-in-class example for AJAX interface.

Windows help wizard
Choose between
* minimize database (which by the way is recommended)
* maximize search capabilities
* customize search capabilities

Users have no clue to what to answer at the given time. These are the kind of interfaces that create unintuitive interfaces.

3D manipulation in Word

screenshot where Jared opened every toolbar in word possible.
“I’m so impressed of how small the paper is”
Points out the toolbar for “3D manipulation”.

Wants help to close all those darn toolbars. Hello Mr. paperclip.
It looks like you need help. There is a bullet point called “I need help” :)

[Jesper's note: reminds me of this image from Kathy Sierra's presentation on RailsConf:]

The knowledge gap
Discussion about Current knowledge point compared to target knowledge
[Jesper's note: Jared has a podcast from last year on this "what users want".]
[Also in this podcast (as I remember) description of tool knowledge and domain knowledge.]

Ways to make intuitive
* reduce target knowledge
* as close to current knowledge
* clear clues to increase current knowledge
* without resorting to training or help

Note the last one: Isolated help or training won’t work.

Example book a flight to Spokane, Washington.
Either it goes well, or it goes wrong. No help when things go wrong.
The people that put this into the database are actually designing user experience.

Example: Mail merge
* List of 23 steps (anyone of these can go wrong)
* Change in recent version (?)
Step 1,2,3,4,5,6

Important note: when things don’t go well, or if you will deviate from the default?
The changed wizard is a wizard that works really well.
Context specific help
* just enough knowledge in each step
* it’s a huuuge investment
* probably 2-3 people years to build this wizard?
* is it worth it?

Morale of story: Don’t do a half-ass job with this.

Other examples
* elcomsoft security auditor
* msn money research
* h&r quick tax calculator

Ways to reduce target knowledge

Teaching people things without them knowing that they’re actually learning

* necessary to make design seem intuitive
* has to match user goals
* …

Small additives makes application intuitive. “Exploratory discoverabilities”

How to make design intuitive

* Intuitive is personal to the user
* Based on their current knowledge and the required target knowledge
* Intuitive happens when the gap is minimized
* Just because something seems intuitive to you doesn’t mean it will seem intuitive to your user
* Study your users to discover what is intuitive to them

Technorati Tags: jared spool, uiconf, ui11, scent, trigger words

UI Conf: Barry Schwartz, the paradox of choice

Jesper Rønn-Jensen — Thu, 12 Oct 2006 13:23:51 +0000

[Jesper's live notes from UI Conf. Barry Schwartz really has some deep insightful psychological points, that we can actually use in our daily work as usability professionals.
His main point is that more choices actually makes choosing harder and sometimes can paralyze people. In contradiction to traditional research, he argues that, the more choices you present people to, the less satisified people will eventually be.]

Update: I recommend the notes from Luke Wroblewski if you like s short prosa of Barry Schwartz’ presentation.

The official syllogism
* More freedom means more welfare
* More choice means more freedom
* More choice means more welfare

- if there is one thing we could we couldn’t have enough of, it’s more freedom

This is the official syllogism. Everywhere in the us, we have operated as if this were true.

Barry’s cheap research
* 285 cookies
* 75 iced teas
* 275 cereals
* 40 toothpastes
* 230 soups
* 175 salad dressings (not including 12 extra virgin olive oils and 18 vinegars)

Circuit city: 6,5 million possible combinations of stereos in stock.
(amplifier, cd, equalizer, radio, etc)

To buy a phone today is really complicated. Cartoon of a phone that can do all these:
* phone
* mp3 player
* nosehair trimmer
* creme brulee torch

Choice not available: just a phone.

The same is true with healthcare (so many choices of subscription)
Also work has proven to implement:
We are free to work, at any day, at any minute to work wherever we are

Marital and family:
* “Should i get married”. No-brainer: YES
* “When should I get married”. No-brainer: As soon as possible

Nowadays
Every question is on the table. Married?, sooner or later?,

To summarize. Before ten commandments were written. Nowadays, it’s a [cartoon image] do-it-yourself ten commandments kit

Survey: People answer yes that there are too much to choose between.
Cars 80%, cell phones 78%, clothes 62%, …..

Paralyzed by too much choice
Buyinig jam in Palo alto
* 1 $ coupon saving
* 24 jams
* more people got to the table
* 1/10th bought more jam
* => Like having choice, but are
* 6 jams

Speed dating
increase efficiencies in mating ritual “and 6 months later there’s a wedding”

Finding: When you have seen more people, you make less choices
“I guess they go home and rent a video in stead”

401(K) investing [retirement plans]
* 2-3 mutual funds to choose from
* 10
* some even offere a few hundreds
Did this influence peoples participation
Despite theories on the opposite, people participated 2-3% less

I don’t know which one to choose, I’ll decide tomorrow, which in fact is no different from today. So the choice is procrastinated.

After choice, you get money from your employer. The only choice which was stupid, is NOT to choose. It’s like taking a match and putting fire to a 5,000$ bill.

Cartoon: superman cannot choose, standing between 25 dresses with all the alphabet letters

which one to choose

decision making.
effect on satisfaction. How satisified are people once they have chosen between 6.5million stereos?
* people mey do better
* but they may feel worse

buying jeans. presented with lots of choices

“I want the kind that used to be the only kind”. The shop assistant who was around 12, had no idea of what I was talking about

So, the more options there are, the more likely the fact that people will regret their choice.

From another cartoon: “Everything was better back when everything was worse!”

Use an agent to katalyze choice

Separate the torture from making choices: Use an agent.
Example call a friend: “What digital camera should I buy?”
Don’t ask “which one of these three models should I choose?”

* Take other peoples advice
* Give advice
* or better: Tell people what to choose

Reasonable defaults

Organ donor form example. 25% donors in the us. Triple that number for Europe. Only difference: In Europe, you sign NOT to donor your organ.

* People prefer a digtal CD player with 21 features to one with 7 (though they say it will be less usable)
* People who “build their own” add 19 features
* But people who actually use the 21-feature player first choose the simpler one

Lessons learned
* So, people HAVE to feel the pain, to have the whilmering experience.
* Somebody still have their gadget in their box. Never used it again.
* Can’t ask people to tell you: They don’t know
* Don’t do focus groups

Satisfaction curve

Subjective state related to number of choices.
[graph that tops at some choices]

Conclusion: welfare is not increased with number of choices. You figure out where the sweet spot is.

Technorati Tags: barry schwartz, uiconf, ui11, choice, psychology, paradox, dating, speeddating, procrastination, retirement

UI Conf: Luke Wroblewski on Visual Design in the Development Process

Jesper Rønn-Jensen — Wed, 11 Oct 2006 21:01:59 +0000

[Live notes from UI Conf]
Luke Wroblewski

Management “i hate purple” – the visceral side with immediate reaction. look-and-feel level.

But there is a deeper Structural, visual side. Structure underlining level.

Example: airport map. This example i use over and over again.
* no airplanes
* every single color is as saturated as can be
* small toggle arrows hide important symbol explanation

rework:
* primary purpose: see airplane traffic
* airport map is background
* same color map

Example: Yahoo! desktop.
Redesign: “where did your eye go?” [to the center main column]

So, visual design draws your eye to what’s important and tells a little story about what’s important

“If you cant’ make it good, make it red. if you can’t make it red, make it bold. If you can’t make it bold, make it big” This is sort of a classic design example: Red, Bold, Black, Big.

how we use the web

What we design for:
read read read read read … pause for reflection

What people do:
scan for something vaguely relevant… click! and then back if not relevant.

How come people don’t realize when they smell, but everybody else notice?
- because human brain is designed to register change.

Summary: Group visual information
* Proximity – elements close together are perceived as a group
* Similarities – of shape, size, color can group elements
* Continuance – grouped through basic patterns
* Closure – group elements by space filled between them

Example: What you look at first: “Type”, image, faded circle.
So here first “type” big bold, red. Then image, shape not grabbing attention (square) but there is lot of texture. Finally pale blue circle.

Example: Circus poster
First you see the strong shape, then the clown (oh it’s gonna be fun), then you see where and where.
So, the visual information tells you a little story.

Example: Compare Apple Pro with grabforattention.com (old buyit.com screenshot)

Visual hierachy & priority
1. list required content & action
2. prioritize
3. start on top apply visual weight
4. Work through the elements on the page again, visual consistency to related elements

Example: University of Illinois
Not only do they have resources. They also have featured resources.
Very visually equal weight. Compare that to university of florida

Example Monitoring overall health of network [very good example]
From two separate pages with table based data

To this

Example from ebay
finance, gallery, second chance bid, feedback, feature
Everybody

Solution for that: Data driven prioritization.
* participatory design rank
* trust ranking
* home visits
* user survey
* metrics: click throug rate ctr
* conversion rate
* decision criteria
* best practices
For each feature in the page. A very objective way of designing.

Cost of change
You need to be 30 or 40% better, people won’t change. There is still a cost of change.
Example: the qwerty keyboard

A japanese website gradually changed homepage, one bit at a time, and noone noticed that over time, everything changed completely.

Urban legend: Ebay. Everybody freaked out when the background color went from yellow to white. They switched it back, and gradually over time faded it out.

Q: above the fold.
My answer is “where is the fold?”. True that things below get less attention.
Anecdote. Google homepage didn’t have a footer. People were waiting for the page to load. This is an example of how you can use closures.

Screen resolution:
I work with things that scale appropriately from 800×600 to 1024×768. Above that, it’s not optimized.
Recently i had to design for an organization with only 256 colors. “IT will not let them upgrade. It’s a security risk”
[Jesper's note: this is interesting related to my recent article "Design for browser size — not screen size"]

Exercise

[following here was an excercise redesigning an interface]

Verizon example:

in case you still have questions after Read more, Learn more, See more. You can actually put them a question. Is this the primary purpose of this website? To put questions?

After a redesign, another redesign, a redesign, and a redesign. Still a lot of visual clutter. “Still, who’s site is it?”. Do you remember that Monty Python sketch? Those responsible for sacking the people who have just been sacked have been sacked …

You can actually log in with your zip code, which is great [sarcastic]. Many websites let you log in with a zip code.

Then a redesign. Finally a person on the website.

Redesign.
Step back and think about what people might come to the website to do.
Coverage a

See the [angle] slash is kind of echoed in the image

Unfortunately I don’t have any more sacking to show..

Example: LinkedIn
I don’t have a strong opinion on this, but they recently redesigned, so I thought it would be interesting to see what changed.

no it IS Web2.0. They have a gradient!

Before they said “find people” [button], now they’re actually letting you find people [added a search field directly on front page

Example with two maps.
Visual density and complexity.

Edward Tufte. The more information density, the better the website. The more links, the better. Luke doesn't agree.

It's not all about adding stuff.
Example of data table.
What have the least visual attention? The DATA!
In the final redesign: Emphasis on the data in the middle, scan data.
This example is online at UX Matters: Redefining Data Tables. [jespers note: Not the exact example, but good article and lot of ]

Other examples:
Now focus on data. Too much visual variations. All graphs are different.
Another ex. Too little variation data and navigation: everything looks the same.

Example Faircast [or farecast?]: Summaries on top (with graphs), and a table with all data below, probably prioritized so the most important has most visual attention.

Apple redesign of display settings
New version feels simpler but can actually do more. They got rid of visual differences.

Excersize: application comparison

After lunch: Other exercise to evaluate either two email applications or two currency trading applications.

Visual personality

Diamonds shopping. De Beers diamond shopping
* oversized images
* lots of whitespace

Then over to “buyarock.com”
* retro
* kind of cheasy
* fun
* can sort of put you in ease “if she says no, man, no problem” [big laugh]
* color
* fonts are almost cartoony

Comment “but this feels too cheap”

New example: dirtcheapdiamonds.com “you’ll love everything but our name”
* better have like 6 money back guarantees

Diamondring.com
What about the expectations here? (from the audience:)
* ebay
* ton of ads
* spyware
* looks like linkfarm
* sitefarm
* domain name doesn’t match that they’re actually selling diamonds

So. Ironically, all these could sell us the same ring. But the way they’re represented to us affects our expectations.

Color schemes
Based on colors found in nature actually creates more subtle and better looking color palettes. Less saturated and can fit better together.

Putting it all together
Example Nissan website
* image in movement
* draws attention and drives us forward into the text/menues
* blue and orange draws attention to links
* create message: speed, power, stability

Before and after examples
“Leading Edge” [Enterprises, Inc]
* very 1990’s leading edge
* changed tot communicate

Health informatics
* very little to indicate this is health related
* mouse example
* login is the other confusing element

Other ex.
* Added little iconography
* Not structural changes
* visual grouping
* all in all added visual personality

Q on icons
A example: sending your dog to camp
- how do you communicate that in 16×16 pixels?

Final exercise: cut from magazines

[Jesper's note: in fact this could be a very good team building exercise for your project team]
Cut/rip out of magazines. Look for
* images
* fonts
* colors
* words
* textures
* symbols
* etc…

Four groups of teams either describing
* rugby website
* search engine for people 40+
* recruiting web application
* kitchenware brand highend online store

=>These are called mood boards in traditional madvertising

Final Q&A

Q techniques for more effective web design
A articles of using small multiples, and the table design

Q Craigslist, myspace
A not a desussion about what is good looking, but what is working. Get job done in an effective manner.
When you look at content: scan the page, fight the bad things.
Myspace isn’t ugly, but a definition of a new graphical expression.

Q: How prioritize elements when evelything is equal
A: Went through ebay example with

Q: Does visual design create requirements
A: Article: developing the invisible

Q: Feature creep
A: Feature is the curse of software development
- email me if you want article

Q: WHy is blue such a great color
* lets content come forward
* available in nature
* Good colors: very light orange, light green, gray, very light purple
* Not light red.
* People have stronger opinions on colors that appear less often

Technorati Tags: luke wroblewski, uiconf, ui11, visual, design, visceral, yahoo, ebay, screen size, browser size

UI Conf: Jeff Patton on Agile Development

Jesper Rønn-Jensen — Tue, 10 Oct 2006 19:17:16 +0000

[Live notes from UI Conf]
My final thoughts: This is a power talk, and the full day tomorrow probably covers it better.

Why agile development continues to grow in popularity

Rare combination: Companies that are strong both on agile development and user experience.

Wrong assumption. Agile is just about finishing something faster
It isn’t just about finishing faster. It’s about finishing faster. I’ll explain some more about that later.

Greedines, short-sightednes and blame

Common things go wrong when projects go wrong.

To software developers, people like you [UXP people] are just “the requirements people”

Business case:
Consider a fictitious product:
– our business people tell us it will earn us $300K monthly after release
– development costs are $100K monthly
– it will take 12 months to design, develop, test, and release
– release costs are roughly $100K
this seems like a reasonable venture
– looking at a 4 year time window – development + 3

Then suddenly
* add features (Mona Lisa with candy bar and opera house)
* cut scope
* delays and risks

Outside the process
* political
* financial
* loss of key talent

Political: “I’ve seen a lot of projects die when new management take over”. Killing predecessors descendants

Once we release it, we may be off target.
* doesn’t meet business goals
* may be unusable
* may be technical weak

Also there may be reducing financial return.

So this is our problem: We have got all these risks that may affect return of the project.

Let’s look at the opportunity

* all released features is $300 K
* 25% features might earn us $120K

Business cases go from annual release go semi-annual to quarterly
Even with the added cost of 100 K per release, were earning more money and have an annual busines casse.
Overall we earn 9% better return on investment (actually IRR)

We can even contemplate to skip the 4th quarterly release and we’ll still earn more money.

Book: Software by numbers (amazon link)

Multiple cycles to reduce risks

Multiple user stories wrapped into an iteration

Planning phase (synonym for design and vice versa)
For agile people, testing usually means automated testing.

Different levels here:
* feature
* iteration
* incremental release
* project

In theory stakeholders feel more involved. More opportunities to adjust.

Agile

Common things that go wrong with agile projects

1. planning and releasing smaller releases often results in unusable releases
2. no one really understood where the value came from in the first place
3. keeping design simple now and worrying about usability later

Why prioritization go wrong is when noone really understands the value of the customers

Not involving design people. They are good at understanding who users are, what are their values. This is actually not an agile problem, but a software development problem.

I’m
and i’m usually pulled in when things go really bad.

Q’s like
* who’s gonna use it
* what’s the value for those people
=> lot of user reasearch debt

Conversation with stakeholder:
- We already did user research
- Let me get what you already researched
- Well, this was the requirements when we started

Adding User Experience people

At least They don’t use UML, so that’s a big advantage.
Top mistakes:
1. “reasonable” research period usually too long
=> Truth is: Often a small amount of research yields preliminary designs. Also known as assumptions
=> Engaged in research often means disconnected with rest of team

2. Desing solution is too large
=> the “ideal” solution is often so big that it has to be broken down to match releases
Results in ugly releases
=> Often diff between something optimal and something slightly sub optimal. Diff for development effort is sometimes enormous.

3. not understaning impmlementation costs compared to user value.

Agile strategies recommended

* defer specific design until late
* keep scope task centric
* create useful releases to users
* grow design iteratively

Latest responsible moment borrowed from lean manufacturing.
UXP people might translate to
* doing enough research to understand users, their problems and goals

User story

User story
* able to write on a 3×5 card
* reminder for a conversation
* wikipedia is dead wrong

write user stories using this simple template (credited to Rachel Davies in Cohn’s User Stories Applied)

As a [type of user]
I want to [perform some task]
so that I can [achieve some goal]

As a [harried shopper]
I want to [locate a CD in the store]
so that I can [purchase it quickly, leave, and continue with my day.

The car metaphor

Agile question: Which feature do you want us to build first: The tires or the breaks?
All features are equally important
=> adjust scale: Kia, Toyota, Mercedes-Benz

"The simplest thing that could possibly work"

In an agile context, its only works when you understand that you may add other things later.

All these elements have some of these things in it.
* Necessity
* Flexibility added later. Make feature useful in more situations
* Safety
* Comfort (usability), luxury (UXP) and performance (run faster, smoother)

If you're in a usecase driven approach, flexibility maps to alternative paths.

[Changed slide]
Bar diagram when adding to user story or feature
symbolizes discussion
* simplest task
* flexibility (what if)
* fair bit of safety
* usability is important

maps to
* necessity
* flexibility
* safety
* comfort, luxury, performance

Agile development needs help
* so much late decision making
* often end up building luxury, but forget necessities.

Agile softwaer development isn’t called rapid, or cheap
Agile because it’s maneuverability.

Linn miller, Alias. Written a report, recommend to download.
Good job at describing

Yahoo! has done a good job adopting Scrum, just didn’t have time to report about it yet.

I have more failures to report than successes.

Technorati Tags: jeff patton, uiconf, ui11, agile, software, development, webdevelopment, iterations

UI Conf: Gerry McGovern on Search engine optimization

Jesper Rønn-Jensen — Tue, 10 Oct 2006 15:59:58 +0000

AOL clicks related to search result position.

Important lesson: If you’re not in the first ten results you don’t exist
1st on list: 42%
2nd 12%
3rd 8%

They prefer to get the wrong results quickly rather than to waste time finding the right result.

North pole:

More people have been to the North Pole than there have been at search result 5,000

(creates a laugh in the room)

On Search Engine Optimization (SEO)

Google banned the BMW website. (because of shady search engine optimization).

If it sounds too good to be true, it is too good to be true

You could have very big damage from shady seo

There is always a tradeoff: Risc or work. (OK i’ll take risc)

Therefore: Work with the content (because it’s risc free SEO)

1. use the words your customers use

2. work with your linking
Most people write a page, but few are actually focusing on the connection between pages.

Low fare, cheap flight

* Low fare: 700
* Cheap Flight: 1,800,000

At a travel conference, showed this example. “Gerry we can never use the word cheap on our website. It would hurt our brand”. 3 months later the company went into liquidation.

Google trend examples. Even though the airline industry

Trend graphs show news reference. Lots of activity on “low fares”. Customer is not listening to the message anymore. But almost nobody search for “low fares”. This shows customer is not listening to marketing.

This is the huge shift on the web: Customer power.

The customer is not going to learn you language!

Other example “cheap hotel”. I’m not cheap, I’m “budget-minded”. (technically this was solved by a middle-man site that used the word “cheap” in the link)

British people go on holiday, Americans go on vacation.
50,000 british people searching for “carribean holiday”, but only 1,344 american searches for the same term. (“probably English people living in the US”)

Other highlighs

You might be saying cardiovascular disease, but they are saying “heart disease”

Another website (undisclosed):

“find a dealer” to “shop locator” resulted in 100% more visitors from one day to another. They had never seen anything like it

Therefore: Research your customers words, and use those words.

A link is a promise [that burns into your short term memory].

Technorati Tags: gerry mcgovern, uiconf, ui11, seo, search, web search, bmw, website optimization

UI Conf: Jeffrey Eisenberg on Top activities of Design & Usability Teams

Jesper Rønn-Jensen — Tue, 10 Oct 2006 14:18:37 +0000

From UI 11 Conference, Cambridge, Boston October 10, 2006.

I’m sitting in on Jeffrey Eisenbergs sample presentation, which is a compressed version of yesterdays all-day talk. He started off with an example from godaddy.com

Godaddy spent 5 million this year buying airtime for a superbowl commercial.
TV commercial: hopefully this direct link works. (Otherwise choose “superbowl 2006″ and enter access password to start).

* Commercial ends with “There is more at godaddy.com”
* 1100% increased traffic on homepage
* 35% increased sales
“I’m not saying this doesn’t work, I’m just saying there is some money left on the table”

This is justified by a godaddy.com webpage where there is no obvious clues for where to find “more at godaddy.com”. It turns out that superbowl related commercial is well hidden. At that time there was a tiny orange link “tv commercials” off the epicenter of the page.

3 clicks away (if youre able to find the most direct path) is the superbowl commercial. The girl on the godaddy homepage is definately not theh godaddy girl.

Very good point that there’s money left on the table. Jeff shows a 30 second modification of the homepage now with a photo of the godaddy girl and a punchline “There’s more …[of the godaddy girl]“.

Other highlights

A hyperlink should contain an imperative word + the benefit people get when they click

Technorati Tags: jeffrey eisenberg, uiconf, ui11, marketing, web, godaddy

UI Conf: David Malouf and Bill Scott on AJAX

Jesper Rønn-Jensen — Mon, 09 Oct 2006 13:40:10 +0000

David Malouf and Bill Scott: Designing Powerful Web Apps with Ajax

From UI 11 Conference, Cambridge, Boston October 9, 2006. David’s and Bills presentation notes available.

Macromedia coined the term “Rich Internet Application” originally because they wanted to create buzz around Macromedia Flash MX.

Usability tests often raise the Q: “Why doesn’t this work like my windows desktop”. So emulation of desktop behaviours.
* trees
* panels
* drag and drop
* spinner
* slider
* form validation
* context menu

Example Google Spreadsheet.
* doesn’t look like a desktop application.
* Also holding on to some web specific metaphors: underlined links

Cinematic effect. Animated effects like for minimize to show you where to find the minimized programs again.
Amazon bookstore example from Lazlo Systems: Add to card button activates a cinematic effect that makes the “cart” column jump very subtle. That indicates where to find the info.

“There is no [page]” – Neo watching the spoon.
David’s formulation: “page is a metaphor of a moment of uninterrupted context”. Another example: Kayak.com where results constantly flow to the browser.

What’s all the fuss about Web 2.0? Marketing buzz, but really nothing new: All existed separately.

Technical side of it: Pure browser. Open standards. AJAX new info from server without refresh.
* A Javascript call makes a query to the server
* server returns XML
* Javascript reformats content and updates browser page
This is visualized with JJG’s visual explanation .

Flash
Flash
* to add animation for web pages — not for creating applications
* requires plugin (very common)
* uses vector graphics

Bill adds: Flash adds the graphical aspect for html pages.
David demos Goowy (a Mac like desktop).
Goowy Made in flash.
* Can do most of what javascript does
* good image manipulation
* good audio support

Firefox “I can’t leave firefox because I’m addicted to it’s extensions” – David Malouf

An example: Google Notebook (as a Firefox extension). Add your notes to any page. You can even share and publish notes.

Q to what point will you aim for “emulating” a desktop application? Too much desktop emulation? A: It depends [on user expectations]. Certain things that never get there no matter how hard you try.

Example: Back button on home-made application. Opens a seperate window to show that back button not working. One user comes in with a 5-button mouse. Uses thumb as user command for going “back”.

Bill adds: Yahoo mail beta (looks like outlook). Didn’t look like a web app, and therefore users didn’t expect back button usage. Users also tried double click. So in all, there is an aspect here: It has to look EXACTLY like a desktop app.

David example for popup window that gets blocked by the standard browser behaviour. After a little while, page detects that new window is not open, and shows a message: (something like) “it seems a popup blocker prevented the window from opening. Click this button to open”.

Backend frameworks
* DOJO
* Script.aculo.us
* Rico (on top of prototype)
* Ruby on Rails
* ASP.NET
* Yahoo! User INterface Library (YUI)
* Backbase

At Yahoo! Rails really doesn’t fit well: We have a lot of JavaScript + HTML inventory that sticks around. Solution for Yahoo: Creating the open-source YUI library (public released Jan 2006)

Atlas renamed to Microsoft AJAX Framework.

Important note on Backend frameworks: The more you know about them, the better you can form your design.

What makes AJAX big now is that Netscape 4 went away.

In a b-to-b
Banks has a locked image as an end-user, you have to go to IT dept to get anything special installed. AJAX sidesteps all that. As long you use AJAX, you’re good to go.

I even tried to sneak flash in there (a bank) but the Flash player that is installed is an older version than the one thats most used on the web.

Q Flash accessibility: Can you navigate through your controls by using tab. A: Yahoo solved that problem (maybe on yahoo maps). It’s doable, but you have to add some code. If you want more details on that, I can give you that later.

Q AJAX accessiblity, assistive technologies? Again, it’s doable, but you have to do it on purpose.

The design. Could be

David: I’m a big advocate for every designer learning to code something. That will actually make your designs more code-able.
Meetups and barcamps are free. You learn by contributing, that’s the model.

Quick excercise: Meet your neighbours.

How many people have tried that technology is selected before you actually know what application to build.

Power of Patterns
Style guidelines tend to be thick and tend to not being read.
Recommend the non-designers design book (amazon link).

Examples of patterns. Bill’s role is not just AJAX evangelist, but more Rich patterns evangelist (lots of examples of terms).

The classic model: page, send to server, page went away. in fact this is a constant interruption of flow. Can be useful sometimes.

Affects wireframing applications. Because wireframes works best for page to page applications.

Affects payment models because is based on page views.

Desktop apps never worked for wireframing: It was better to prototype because the experience was so rich.

Principle: Keep it direct
Alan Cooper whereever there’s output there should be input.
Patterns
* Inline editing
* Drag and drop
* in-context tools
Guideline: Prefer interaction within the page.
What about discoverability? Example from Flickr. On hover: yellow background and title tip: Click to edit. Sometimes works also with little small “edit” links.

Added note: Redundant is good for discoverabilities. So the more “invitations”, the better. David: “when developers say ‘this is redundant’ I actually say ‘Good’ ”

Use direct editing on page content.
What about save/cancel? Example from Flickr.

37Signals Backpack uses an onhover approach shows an edit+delete link that’s carved out of the background.

Provide in-context tools
Only good for single atomic operations. Can actually slow you down: Example backpack where a list of todo-items are checked rapidly. Some of the items are resurrected from the dead, because of the technical implementation.

Use drag-and-drop appropriately. Not for simply setting an attribute. (bad example drag and drop movie rating)

Leave a light footprint. (makes more people creating content).
Patterns: remembered collection (Gap shopping bag for checkout)
Pattern: rating an object (recommend this story)
Pattern: in page action (digg button)

Kevin Rose, Digg creator: When he added AJAX digg button, participation exploded exponentially. Source: BayCHI meeting

Design for engaging moments.
Use invitations “write a review”, “vote”. Keep it fun, engaging and light.

Use lightweight events: Hover, click.

Principle:
Principle: Cross borders reluctantly
Pattern: endless scrolling
Pattern: in-context expand. (is sometimes misused, where you could have lazy loading instead)

Pattern: inline assistant (Gap store example)
Pattern: Hover details (Y! news stody links onhover photo + blurb)
Pattern: Lightweught popups (the lightbox effect)

Rethink process flows: Every page jump is a mental speed bump.
Rethink paging (vs. floating). It’s the users model not the paging model.

Scrolling vs. paging. For search it’s not that useful, because for search results, users are mostly interested in first page. Also, what do you do at the end of the scrollbar??

Lazy load.
My yahoo paging-like scrolling model, where you click and add more news items to the list, and UI sort of scrolls it down.
Animate that transition, where you kind of scroll them in.

Plan for linking, crawling and back button.
Not everything is a single page application.
What will the user think the back button does?

Example: Users actually didn’t expect back button to “remember” all the little micro-steps.

Use overlays. For momentary interruptions, can replace page tranistions.
When editing an individual more complex item.

Example a lightweight popup where you need more space for editing content.
Also where it’s OK to overlay other content of the page.

Use in-context expands.
Example Yahoo trip planner where you can expand details.
Example netvibes expand edit options.

Principle: Provide Live feedback
Pattern: live suggest
Pattern: auto complete

Keep the goal in mind. Is it narrowing or distracting?

Example: Alltheweb.
Combined the suggest with live search.
autocomplete builds a list below search box. with linked keywords. Add live-search results in main content frame.

(didn’t release as rebranded Yahoo search: Would triple the number of servers needed)

Keep the user engaged
Time passes faster. Look for engaging moments.
Example time
For the user

Use live-previews.
Look before you leap.
Example Google’s password stength validator.

Keep feedback focused.
GMail “your message has been sent” is located according to heatmap near searchbox.

Principle: Offer an invitation
shift-click doubleclick, even tripleclick for desktop apps.
Pattern: Tooltip invitation + hover invitation
Pattern: Drop invitation
Example flickr, where a dropped photo actually ondrop is showing a bomb explosion.

Keep actions out of it.
Don’t make the user afraid to explore.

Use invitations to aid discoverability
Two challenges: idiom & features
Adding signposts, always-on clues doen’t scale:
Example from backpack todo list where delet/edit links are all over.

Example Y! homepage. Where all but searchfield is dimmed (lightbox effext). As a guided tour for discoverability.

Example Turbotax, where a flash movie talks about all the wonderful things

Example Y! Maps too slow animation and the really bad thing that map grows on hover of a link. Makes it work like advertising.

Principle: Show Transitions
Pattern: Fade transition + selv-healing transition.
Pattern: slide + animate
Ex flicr where scroll is on horisontal arrows and content slides.

Speak to the BRAIN
understanding attention processing. Book Mind hacks (tom stafford and matt webb). Amazon link.

Example: Apple widgets on dashboard flies at you when dissappearing — not down to it’s icon.

Animations, transitions is actually important:
* speed up time
* slow down time
* show state change
* show relationships between objects
* focus attention

But remember to keep it sane.
“cut in half” rule of thumb
When you think you’re done, cut that time in half.
Example Y! mail time for object to snap into place, was cut in half.

Principle: Think in Objects
Example Trip planner
The power of sharing
Bloggable, shareable, findable
How to dial-in community
Collections

Web 2.0 as a platform
Rich objects fit the SOA model
Creates a good separation of concerns, microformats
Mashups

Easy way to geocode: Flickr example. Made it easy to geocode. Drag objects (images) onto map: 2 million photos geocoded the first 24 hours. Amazing participation.

[Bill coughs again: "I almost made it through"]

Engineering: We used to say no. Now we can actually say yes.

Yahoo homepage evolution
* old and clunky (2-3 multiple select boxes. Page reload)
* click on page: “move up/down, move to top/bottom”
* drag and drop new positions

Example Add to my stories, where the plus sign flies up to the “my stories” tab. Plus is too little.

Q shift of paradigm affects advertising model.
A work tightly with comscore advertising bureau.

Q discoverability of autocomplete
A autocomplete seems to be secondary functionality, so in that way it’s not critical.

Invitation has to be subtle. Point to waste as little brainpower as possible before you start typing. With better discoverabililty, less brainpower is wasted before typing starts.

Reccomends Jen Tidwells book Desinging interfaces (amazon link).

Design

When you draw (apply ink to paper) there is actually synapses crossing in the brain, connecting the two brain halves.

So, sketching is important. Also, you can communicate quite a lot you sketch on 10 seconds. Sketching is rapid and rough.

When people see too much permanence, they stop giving feedback.
* rapid and rough
* multiplicity (multiple sketches)

Don’t forget your digital camera when you work with whiteboards.

Next step: Framework and language
* create structure
* Navigation
* Language
– object
– action
– modifiers

Next step: Refinement
When you cross a boundary on details, people start thinking it’s the real thing.
* Details
* Behaviour (on a very deep level)

Next: Designing behaviour.
* User stories. Example: Kevin Chang using cartoon strips as design element early in the design process.
* Communicate “intra contextual moments”. Very hard to communicate.

Sample process:
* sketch on paper/whiteboard
* Scan/photograpth into digital environment
* Trace or re-draw using computer tool
* Use “blocking” tool (like visio) to define framework
* As further detail is required to refine framework fills in blocks using a higher fidelity drawing tool.
* Add interactivity so that behaviour can be experienced, evaluated, tested, and reflected upon.
Example: Add hotspots to your visio and export to html. OK, but
One guy (Anders Ramsay?) advocated XHTML, CSS, JavaScript for wireframes
Other tools mentioned: Axure, iRise, Serena, Macromedia Fireworks.

[Jesper's note: Nobody mentions using Ruby on Rails as Prototyping tool.]

Pain.

Wireframing Ajax is a [expletive]… We have to determine all of the things a user might do, and wireframe the blessed moments of each possibility.

- Jeff Zeldman, Web 3.0

The shift [from PIA to RIA]

PIA = Page-based Internet Application (or Poor Internet Application)
RIA = Rich Internet Application

Assumption
* All interaction is course-grained at page level
* Wireframes capture layout, priority, behaviour and content

Impact
* Full page refresh replaced by small content update
* hyperlink, submit are replaced by a full range of interactive elements
* Micro-interaction, micro-updates leading to micro-states
How to express micro-patterns as wireframes. From

Prototyping is highly important. Must see to make it happen. Paper based prototyping is not able to capture these prototypes
If you can’t actually prototype it, you could find someone doing it similar, and then talk about what you would change on the presentation level/behavioural level.

Q: How high fidelity should prototype have?

Bill working with iterative prototypes. Getting users in one day, then refining it and presenting them to results the next day.

Back to comic strips: 90 % of the time, computer is turned away from reader. Comic strips can show movement, feedback, time passing, etc…

Nuances in the interface are multiplied
* invitation
* activation
* deactivation
* affordances
* constraints
* timing
* delays
* rate of feedback

Benefits from being as close as possible to real code.
Example: Use css classes to indicate, drag-objects and drop-zones

Bill Scotts. Drag and drop interesting moments.
Not just event states, but interesting moments where you can interact with the user.
About a total of 15 different “interesting moments” for drag and drop.

Drag and drop objects
* cursor
* drag object
* drop target
* etc…

Drag & drop matrix (bills article Interaction Matrix)

Engineering teams are thrilled about this level of detail, and can be created in an agile way

Y! did that for different patterns
* drag drop
* inline editing
* 6-8 different examples

Working overseas: You can’t have enough detail when working overseas. In normal documentation there are so many assumptions in it.

Adaptive Path: Micro states. aka key frames
Storyboard add timeframe.

Axure, PowerPoint, Sketchup, Ruby on Rails.
Bill: Wish we would have a tool more like Sketchup. That you are just using without thinking about it.

It’s really hard to find that rapid prototyping tool that works good.

Animation with visio: on bill’s blog and boxes and arrows
Example: Inline editing with visio.

Example: Animation with Photoshop (Photoshop CS2).
Blog entry (used 20 minutes or so to take existing video and update the timings)

Q: Reviewing wireframes and an actual web page is very different. How to overcome differences?
A: (David) I try not to reflect so much about the background, but want my colleagues to explain my wireframes.

Good to project your wireframes on a whiteboard so you can start adding to it while discussing it.

Collaborative process. I tend to do all my presentations in front of all teams. Because I want everybody to hear everybody’s reaction.

The designers role is really to be a facilitator.

After coffee / fruit break a talk about design.
Design used in different ways. Design as noun/verb.
[Jespers note: I'm not blogging that part (it's a more philosophical discussion that's not directly relevant for my daily work)].

Design exercise: Design a few screens for a bus ticket kiosk.

Tool for sketching/prototyping: Denim.

Q and A closing questions

Q: Good way of debugging when working with Ajax.
A: Firebug (firefox extension). Make sure any javascript libraries are scoped. Name spacing helps a whole lot.
Comment: Google web toolkit (built in java) if you have the option to do that

Q: keyboard equivalents to hovering, clicking, doubleclicking, drag&drop
A: keyboard commands like GMail and Y! mail.

Q: Talk tomorrow different from today?
A: Some of it will be new.

Q: Accordion
A: We wrote it for Rico, but never transferered over to YUI library