UIE Web Masters Tour

Where Worlds Collide by Jared Spool

• Its not about the application, its about the experience
• Good design disappears into the background
• The Twitter experience is about ambient intimacy
• What are web-based applications?
  • Where user needs, business, & technology collide
• Corporate underpants: when the organization of your company shows through on your homepage; “Like wearing your underpants on the outside of your clothes.”
• How do we create great experiences?
  • Not measurable & no patterns known
• Three elements of knowing whether a team will produce successful web apps
  1. Vision
  2. Feedback: In the last six weeks have you spent more than two hours watching someone use your design or a competitor’s design?
     • What matters is the amount of exposure your team has to this feedback
  3. Culture: In the last six weeks have you rewarded a team member for a major design failure?
     • You must be able to take risks in your designs in order to make things better
     • When we fail we learn incredible things
     • Every failure is an opportunity to learn
• Less and less people are comprising teams but the roles are expanding
  • Need to think in terms of skills, not roles
  • The future of design is based on skills that people have, not roles that they fill
• Editing & Curating: deleting and picking out the right stuff for the design is important
• Paradox of choice: the more choice you give people, the less satisfied they will be
• Kitchen cabinent problem: you know where everything is in your cabinets so you resist change
  • Can make things more transparent but makes things look more cluttered
  • Think about the process of change over time
• Make sure that someone is editing and curating

Serious Play: Designing Seductive Business Apps

• How to use the cards
  • Define a behavior that you want to occur, flip over a card and brainstorm
• thefuntheory.com
• Sequencing creates easily attainable goals that are smaller to achieve
• Sabretown/Cubeless = 5,000 employees
  • Must work for features and unlock them
  • Knowledge retention tool for a company
• Make sure you convert your business goal into a behavioral goal
• What do people have to do in order for your business to be successful?
• Foodspotting.com
• five.sentences
• Attaching a measure to something automatically makes it a game
• Johnny Holland Magazine
• Personal Velocity
• Once we own something we value it more
• brighterplanet
• Social proof: commonly used -> testimonials
• legalzoom
• Motivate human behavior through psychology
• getmentalnotes.com
• poetpainter.com

Escaping Navigation Hell by Hagan Rivers

• Design without navigation first, assume its perfectly designed and it was easy to get there
• Navigation is an application
  • Job is to find the right screen
• Design navigation systems last
• View navigation at 30,000′
  • Application maps utilizing tag system
  • Clouds are hubs but not pages
  • Green = new, blue = edit, yellow = general, orange = wizard
  • List all your screens, take screenshots, tag, make application map
  • OmniGraffle
• Application map vs. site map?
  • Site map is hierarchical
• The hub is a workspace where you do work and come back
• Site maps don’t always work because not everything is hierarchical (what parts are equal, etc.)
• 4 kinds of navigation
  1. Local Navigation: how to access spokes from the hub? Local nav on spokes too!
     • Modal spoke: okay, cancel
     • Websites and web apps are different
     • Non-modal spoke
     • What do I “need” here?
  2. Global Nav
     • Design last
     • Appears everywhere
     • Do not list every screen in the app
     • Link to major hubs
     • Links don’t have to appear equal
     • Link to important parts only or used a lot
     • “New” screens -> creating new things: Salesforce example
     • Selection screens: have to make a selection to see
     • What is useful to your users? (need the right hubs)
  3. Cross
     • Cross navigation is the concierge of presentation
     • Related items
     • Can show up any time
  4. Dashboard +
     • Reporting but also shows how the application should be used (multiple links available that make sense)
     • Tell a story of how the application works
     • Contextual way to display links
• Navigation is something you’re going to iterate through most
• Don’t allow customizable navs
• Do not draw lines among the hubs
• Are those hubs for the public or me?

Designing the Social In

• Need to be organic and about relationships (flexible)
  • Not about data and a database
• 5 principles to bring social in
  1. Pave the cowpaths
     See what people are doing and adjust or make it easier to do what people are already doing with the pieces you give them
  2. Talk like a person
     Talk in a conversational voice, ask questions, your vs. my, no joking around, self-deprecating error messages (never make the user feel stupid)
  3. Be open & play well with others
     Embrace open standards, sharing of data, accept external data, support 2-way interoperability
  4. Learn from games
     What are game mechanics? Collecting, points, feedback, exchanges, customization
  5. Respecting the ethical dimension
• 5 practices
  1. Give people a way to be identified and can identify themselves. Need to have a way to identify themselves more than just by name = user cards, profiles, avatars, personal dashboard, signs of life, levels, reputation, collectible achievements
  2. Make sure there is a “there” there = social object. The social object is why two people are talking to each other.
  3. Give people something to do. 10% of the people are doing 90% of the work. Majority of people do less of the work. This is about a continuum of stuff to do.
  4. Combine activities for richer experiences. Lead to relationships.
  5. Enable a bridge to real life
  6. Let the community elevate people and content while gently moderating
• 5 antipatterns (common mistake or bad solution to a common problem)
  1. Cargo cult
     Copying a visual design or a feature without understanding the underlying reason why it works
  2. Don’t break e-mail
     Don’t break things and the way they ordinarily work
  3. The password antipattern (phishing)
  4. The ex-boyfriend bug (group people together)
  5. The Potemkin Village (creates spaces when needed)
• The ecosystem is a balance with tradeoffs

Backstage at 37signals by Jason Fried

• The first company to build an entire business around web apps
• Constantly moving on to different projects (2 wks)
• Always want to work on the real thing right away; no use for abstraction
• Sketches should be with huge Sharpies so as not to concentrate on details
• Build HTML mockups right away
• Share it, use it, tweak it
• When you get rid of everything else
• Navigating the overview page
• Pull back slowly in the design to view from farther away
• Reduce the words on the screen to avoid being robotics
• Important to test try time interactions
• Checkmarks into strikethrough
• Use git for version control
• Context more than consistency
• “Rework” by Jason Fried

Designing for Interesting Moments by Bill Scott

• “Designing Web Interfaces” book
• The magic of misdirection
• Creating illusions
• Interactivity is both in the details and in the performance
• Drag & drop, iPad stack deleted is all an illusion
• Amount of events and objects multiplied together equal the interesting moments
• Be thoughtful about the points of engagement as well a the points you do not emerge
• Delicacy of the illusion is important
• 6 principles
  1. Keep moments direct
     • Editing moments: pay attention to discoverability, use a clear “call to action”
     • Activation/deactivation moments: use the same button to turn off and on
     • Drag & drop moments: small target antipattern, reduce physical and mental uncertainty
     • Artificial moments: use the correct behavior for the task, keep the approach simple, creating a visual metaphor that’s incorrect for the behavior
  2. Require only a light footprint
     • Remove barriers
     • Unnecessary moments: popups for no reason, “idiot box”, dont’ stop the proceedings with idiocy
     • Heavy moments: be mindful of the “click weight” (# of interaction steps, decision time, seek time, second guessing, wait time)
     • Visible moments: interactivity, make primary actions visible
     • On Click moments: overlay revealed on click
     • On Hover moments: overly revealed on hover
     • Clicks are explicit actions, hovers are not
     • Strike a balance between readability & interactivity
       • Hover & cover antipattern
       • Shifting content antipattern
       • Needless fanfare, mouse trap, novel notion
  3. Maintain flow
     • Change blindness: try to get rid of page refresh
     • Users can loose their context going page to page, encapsulate alternate flow into overlay
     • Interrupting moments
     • Look ahead moments
     • Use inlays for strong contextual relationships
     • Behind the scenes moments: consider the backstage
  4. Invite interaction (Dustin Curtis)
     • Use a clear call to action: new moments, use new visits to introduce new features
     • Prompting moments: add discoverability
  5. Show transitions: great power and great responsbility
     • Imagine a world without drop down animations
     • Consider cutting the effect in half
  6. Be reactive
     • Narrowing moments, use live previews, live form errors
• billwscott.com/share/presentations/2010/wamtph
• Farecast

The Care & Feeding of a Corporate Cash Cow by Kellogg

• Building a Toolkit: start with your strength, negotiate, evangelize (tell people what the team is doing, mistakes, etc.), new directions, different tools, optimization
• Research callouts
  • Less is more
  • Core 5 ideals changed
• Unique environment
  • Transactions are only part of Marriott’s revenue
  • Powered by mainframe tech.

Input: Moving Beyond Static Web Forms by Luke W.

• Moving beyond static forms

1. Rich interactions to enhance standard forms
2. Commonly used tools for input
3. Web services to bypass registration and set-up
4. New capabilities on mobile devices -> physical location

• 40% of people drop off before completing registration
• The more people use your mobile site, the more likely to use regular site
• Top aligned labels are best on mobile
• Input capabilities on mobile: form field, location, gestures, images

A Simple Ladder of Engagement by Mark Trammell

• @trammell
• “Be a force for good”

Turning Back to the Future by Jared Spool

• Commoncraft Show
• Executive “swoop & poop”

More stuff to Google & learn

• Tookmark (twitter bookmark)
• Snaptell
• Notable
• Brightkite
• Elegant.ly
• Naymz
• Tripit
• Posterous
• Instapaper