justaddwater.dk

[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

[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: luke wroblewski, uiconf, ui11, visual, design, visceral, yahoo, ebay, screen size, browser size

This entry was posted by Jesper Rønn-Jensen on Wednesday, October 11th, 2006 at 23:01 (GMT-1) and is filed under Events/seminars, justaddwater.dk, ui11. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.