In the presentation I point out how the ability of visual communication to express core customer and brand messages across multiple forms of media has not changed much. However, shifts from locomotion to services, from pages to rich interactions, from sites to content experiences, and from content creation by webmasters to everyone online have introduced unique opportunities and constraints that the presentation layer of Web applications needs to account for.
7. How We Use the Web
“Look around feverishly for anything that is interesting or vaguely resembles
what you are looking for, and is clickable.” -Steve Krug
-Steve Krug, Don’t Make Me Think: A Common Sense Approach to Web Usability
7
8. Design Considerations
Luke Wroblewski, Site-Seeing: A Visual Approach to Web Usability
• Presentation: How your application appears to your audience
• Interaction: How your application behaves in response to user actions
• Organization: The structure of your application
8
9. Presentation
• All interactions occur through the presentation
• Inform users
• Establish relationships between content
• Guide users through actions
• Make organizational systems clear
• Provide situational awareness
• Maintain consistency to create a sense of place
• Effectively convey brand message to your audience
• Emotional impact
• Engage and invite
• Provide a unique personality
9
10. What Makes a Great Presentation?
• Visual Organization
• Communicates the
relationships between
user interface elements
• Enables Interaction
Design
• Information Design
• Personality
• Communicates the
brand essence of a
product
• Visceral design
• Color, font, image,
pattern selection
10
11. The End Goal
• Quickly Communicate
• What is this? Usefulness
• How do I use it? Usability
• Why should I care? Desirability
11
15. WAYS WE INTERACT WITH THE WORLD:
• Locomotion
• Conversation
• Manipulation
-TERRY WINOGRAD, STANFORD
15
16. Web Transitions
1. Locomotion to digital representations
of physical entities
• Directories & portals, Yahoo!
• Company sites & brochure-ware
2. Digital manipulation of physical goods
• E-commerce everywhere
• Amazon, eBay
3. Digital services
• Enable conversation & manipulation
• Display surfaces
• Content creation
• Aggregation
• Entertainment
-Types of digital services: TOM CHI, YAHOO! 16
32. • Content Creation Tools
• 120,00 new blogs created each day -4/07
• Content Aggregators
• digg hits one million registered users -3/07
• Display Surfaces
• MySpace number one site in page views -12/06
• Entertainment
• 100+ million daily streams on YouTube -6/06
32
33. Sites Content Objects
Emergent Networks: open, inexpensive,
Hierarchies: management, military
simple, close enough
Examples: closed, expensive, complex,
Examples: crowds, friends, incidental
accurate
networks,
ANDREW HINTON’S ARCHITECTURES OF PARTICIPATION 33
40. SITES CONTENT EXPERIENCES
• Visual design considerations
• Primary focus on primary content
• Secondary focus on related and relevant content &
actions
• Visual interest captures attention (avoid clutter &
visual noise)
• If expectations are met
• People look around the page
• Relevant calls to action are welcome
• When content is distributed or remixed
• Core principles of visual communication still
matter: personality & visual organization
40
43. “Most user-created content is crappy. As we
create better tools, we’ll increase the value of
the output of those tools.” -Will Wright
43
44. WEBMASTERS EVERYONE
• Visual design considerations
• Supporting personal aesthetics
• Tools for expression: easier to do the right
thing, remain flexible & robust
44
45. Summary
• Web is a visual medium
• Visual organization & personality
• Look to existing models for cross media brand
management
• Locomotion to Services
• Packaging Design for Web Applications
• Page to Rich Interactions
• Invitation, Transition, Feedback
• Sites to Content Experiences
• Landing page design
• Webmasters to Everyone
• Enable self-expression
• Better content creation tools
-Types of digital services: TOM CHI, YAHOO! 45
46. For more information…
Functioning Form
www.lukew.com/ff/
Drop me a note
luke@lukew.com
46