Peter Stahl & Josh Damon - Checking the feel of your UI with an interaction audit

(arrived 15 mins late)

eBay example - cycled through ebay property screen shots to see how jarring the different designs were.  Proposed was far less jarring because some standard elements were consistently on the screen.

Josh - shows eBay site diagram, includes metrics of page traffic.

Show example user flows through the system

Audit checklist for different defined flows

Catalog ui elements on page, icons, help text, interaction they are reviewing

Flows as storyboards

Ideas for presenting findings - page density

Radial charts to track feel metrics

Recommendations:

• Affordances - visual cues that an interaction is being offered (e.g., click link inconcistencies)
• Tasks - path to accomplish an immediate goal (e.g., form filter, click tab, click criteria, enable/disable section of form)
• Data object - representation of data record (e.g., representing eBay members differently)

Actions and Future Directions

• interaction goals - 1) low learning curve 2) consistent cues for actions 3) predictable behavior of affordances 4) instant recognition of interface elements 5) allow (eBay) member content to shine.
  
• clean up teams - clcikers, swappers, submitters, shufflers, disclosures

Design Pattern

• Pattern name
• description
• when to use

-ability to search pattern library

Example: customize page layout

Todd Zaki Warfel - Data Driven Design Research Personas

Personas can be for marketing and for design

Why use them?

• Make sure design matches up with user and biz goals
• The average user does not exist
•  They keep you out of the user
• communicate: knowledge, activities, interests, influencers, (what would influence you to use the system or prevent you from using it) goals, and pain points
• Can be used for recruiting
• Can be used for training

Tips for making better data-driven personas

• Have to use multiple resources - multiple sources keep things in balance
• quantitative vs. qualitative strengths and weaknesses Quantitative will not tell you why?  Self-rating is unreliable.  Qualitative tells you why but not what they do.
• Internal sources can be stakeholders, web analytics, and customer support
• external sources can be customers and someone you know (online forums)
• Basing them on someone you know keeps them grounded and realistic.  It also increases buy-in.
• Only build what you need.
• Getting it all on one page is tricky (goals, activities, behaviors)
  
• Primary and secondary personas

One page should include one sentence quote, a few paragraph description, key characteristics, "persona DNA"
Persona DNA is most important.

• knowledge
• activities, interests (how important), lifecycle
  

Austin Govella & Christian Crumlish -  designing with patterns in the real word (Yahoo! and Comcast)

Christian-

Brief history

Yahoo  Pattern Library (YPL) in 2005
Christian is the curator of the library
Do design patterns stifle innovation? No.  Spend innovation time on things that haven't been figured out.

What exactly is a pattern

• problem
• solution
• context
• example

• high level, based on principles
• linking to related specs and documentation (which can change more frequently)

How ux designers contribute

• check the library
• give feedback
• suggest a pattern
• help write or review a pattern

Interview the designer

Pattern Gallery  (Flickr - xian > collections)
Old article on YPL on Boxes and Arrows

Rating the Patterns

• working solution (recommended starting point)
  
• best practice (strongly recommended)
  
• the Yahoo! way (a must)

Keeping patterns fresh

• age-dating patterns
• quarterly review of existing patterns
• tuning in to user feedback
• revision and upkeep

Wireframe and diagram stencils

• give designers tools that make it easier to adopt the patterns

Pattern + Stencil + Code = very useful building block

Austin - patterns - WTF

Patterns important for organizational memory - put in people's heads (see, hear, do)
Design literacy (Jess McMullin)

Patterns should make your life easier, but they should also make your team embers easier.

Documentation, code, and design patterns

Email best practices.  A pattern

Nathan Curtis - Audiences and Artifacts

Different audiences = need for different deliverables to communicate design

Deliverable lifecycle

• preparation - use old stuff, templates
  
• concepts - concept maps, etc.
• variations
• details

Aspects of the lifecycle

• iteration
• descoping (cutting things)
• evolution
• disruption - stakeholder that throws in some crazy new idea
• consumer population growth

Document metadata - information design of deliverables
Track changes - be detailed. useful, auditable
Focused - move away from one size fits all deliverable,  Use layers
Modularity - create linked hierarchy of files (8shapes uses Creative Suite)
Predictable - create learnable deliverable page structures - "page patterns", ways to connect words with patterns
Be prepared - think before you speak

Recipes: description, ingredients (page patterns), preparation.  Formalize the recipe

Topics, content, calls to action - once you realize the need, map out how this fits a particular document.

Automating a recipe - use XML to codify starting points

Investigative - 1) plan deliverables collaboratively, 2) test the deliverable to see if audience can use it witout reading it to them, 3) iterate and improve your deliverable to your audience

Mechanized - create fluid relationships with other teams so you can create targeted deliverables

Sun web design standards

How to keep wireframes and HTML in sync, cost, context, process, audience

Scripting a wireframe page: template + definition + grid

 Vera Rhoads - Web Maturity Models

How do you measure the quality of a web site

Goal: "The overarching goal is to enhance the understanding of the interrelations and specific dependencies between a multitude of factors that contribute to the success of the web property."

Three attributes

• knowledge element
• assessment element
• improvement element

Innovation lifecycles

• stage 1: entry
• stage 2: adoption
• stage 3: adaptation
• stage 4: appropriation
• stage 5: invention

Standard CMM

• initial - ad hoc
• repeatable - stable
• defined - consistent
• managed
• optimizing

Model Creation and Its components

• company categorization (size, business model, web property existence, precedence, strategy prioritization, availability of sufficient funding)
• ...
  

Practical Prototyping - warfel, conley, ramsay, wood

 Introductions by presenters

Q&A based session...

Adobe Flex can use some pre-built templates for interactions.  Prototype interactions to see what works.
Adobe Fireworks allows you to create clickable prototypes without knowing code

"Less important the specific tool and more important to get something out quickly for the conversation" - Anders Ramsey

iRise and Axure have something, but rather use production tools to create an artifact that can be reused.

• Start with paper prototyping.  Then you might want something higher fidelity to show behavior, interactions.
• Get a cross section of stakeholders to debate the design to understand strengths and pain points.
• Using user-built prototypes to get information about priorities and rationale.
  
• Hardware-based prototyping kits (makingthings.com)
  
• Paper is a fantastic took for hardware designs - do simulation by cutting paper.  Get basic fundamental actions validated.
• Conley - "Use prototypes to explore alternatives, not to get it right.  Build 3-5 things that are as different as you can.  You make decisions based on how you feel or experience it, which is what you are trying to design."
• Warfel - have users play with two versions of a prototype and put it in their hands to determine what is right.  (users preferred simple form that they click to expose more features).
• Austin - 2 streams.  Prototype to brainstorm vs. prototype for final
• Conley - requirements writing is broken. corrupt and fundamentally flawed.  Have prototypes delivered with requirements hand-in-hand.
• Warfel - we have 1 client where their prototypes actually drive requirements
• How do you work with a client that loves their own design?  Conley - show respect and collaborate.  Ask what this person is trying to achieve.  Use as a vehicle to understand how solving problem.  Come back and show something to review and refer to their prototype.  The all of a sudden you are co-creating.  Warfel - keep core concept, ask them to talk you through what "drove" this.  The we can decide if that's the best delivery method.  You then create something and have them play around with it.
• Warfel - Prototypes that are for production vs. for throw-away.  Set the expectation up front.
• When to use design (color) and when to use b/w?  Warfel - we do it iteratively, but typically attack it holistically (have colors, complete ui)  Ramsey - whatever is needed to communicate design.
  

John Ferrara - Extending the gaming experience

Characteristics of games

1. static objectives
2. environmental constraints
3. formal constraints

What makes games compelling?

1. Operant conditioning - Includes rewards and punishments
2. currencies
3. joy of interactivity
4. audio/visual sophistication
   

Example - Brain Age (makes mundane tasks compelling)
Example: Google Image Labeler (images.google.com/imagelabeler
Example: Yahoo Answers - people compete for best answer.  Points aggregate on leaderboard.
Example: NASA online game
Top Coder: Compete to create software

Personal Finance

• use interface to arbitrate success
• Give the interface access to currencies
• issue rewards when goals are met

Education

• After correct answers, catch monster and keep in zoo, showcase, trade

Game Patterns

• 1. physical presence of the user in the game (game: rich, web: cursor)
  
• Second Life is not a game b/c no objective, but uses physical presence.
• Wii - make Mii and use in UI
• 2. Temporal motion - passage of time mirrors temporal motion.  as events occur, players must react
• Would be interesting to see past activities
• 3. Adaptive experiences - characters can work towards around preferred attributes
• web sites could build different experiences
• 4. Uncertainty - puts outcome in doubt
• Woot - one item per day
• Turbo tax - running tally of tax return amount
• 5. Micro/macro readings
• detail and context (google maps)
• 6. Health Bars
• 7. Tutorial levels - gameplay elements with lower stakes
• 8. Collaboration
• headsets allow for real time coordination

New innovations in game interfaces

• Nintendo Wii - detects motion in 3 dimensions (baseball - swing bat, feel rumble of connect and hear feedback)
• Nintendo DS - voice recongnition, gestures, stylus, tochscreen
• Sony EyeToy - project user and touch screen - no instructions required

worldwideintertubes.com

Yahoo! Group on game design

Luke Wroblewski - Content page design best practices

We optimize for static structures - move towards dynamic movement within a site.

Communication, display interfaces, content creators, content aggregators, search

How much traffic comes from within site and how much from the web ecosystem?

Communication:IM, email, twitter, Yahoo mash, Facebook, etc.
Content creation tools (blog)
Content aggregators (rss, digg, yahoo buzz)
Search

People come from different contexts.  What happens when they arrive?

Landing page:

1. actual content - primary focus
2. related - engage people in related content
3. context (navigation)

Content:

1. Keep links and titles in sync
2. content should be the majority focus and should take up most of the page
3. utilize visual hierarchy principles

People don't stay very long.  75% do not finish article.  Read a little, scan a lot.  Keep it short.

Example: a brief message.com
Example: CNN - story highlights - Nielsen did a study and determined people had better retention
Take aways - deliver on content promises, favor visual hierarchy over site hierarchy, short, concise

Related:
Spare people the full navigation menu, site map
Call out related content - access to what matters now
Change navigation based on selection
"The paradox of choice" - too much choice can be paralyzing, people choose what's simple.
People are great at tuning things out - how do people notice related content?
If viewing a link falls from 80-60%, the probability it will be selected falls by 50%

Best practices:

1. related calls to action welcome
2. do not overwhelm people with choices
3. think through presentation of calls to action (CTA) - aka. related

Context:
Stanford web credibility research

• people quickly evaluate a site by visual design alone
• batelle searchblog - welcomes searcher from where they came from - show related content
• highlight search term in resulting page, both on main and related content
• show what's popular related on site you just came from

Discount code - IAS08WFD

 

Peter Morville - Search Patterns

Search relates to: ixd, ia, km, future studies, patterns, wayfinding, discovery

Christopher Alexander - "The timeless way of building"
-Only through examination of patterns can we hope to build great buildings, spaces
-100s of design patterns proven to work

Peter points to his patterns on Flickr

Behavior Patterns

• narrow
• search & browse & ask
• Pearl grow (use metadata from resulting doc to grow more relevant docs)

Design Patterns

• faceted navigation
• best bets
• federated search - across databases
• auto-suggest
  

Search Metrics

Structured Results

• Google shows a deeper dive to deeper breadcrumbs
• speed is important - google shows speed to encourage more searches

Social  search

• interestingness
• show other content - mashup of other site results - images, news, blogs, etc.

Visual search

Mobile search

Bryce Glass - Design a Reputation System

Examples:

Amazon - Harriet Klausner is the top reviewer, but she must read 7 books/day

developer.yahoo.com/ypatterns

• Levels - numbered (e.g., level 2) or named (e.g., fanatic) - earned through activity
  
• Identifying labels - used to reward users (could be role name)
• Points - cautious about competition
• Collectible Achievements - things you can earn, milestones (e.g., Yahoo trophy).
• Ranking - leader boards
  
• Temporal Rewards - awards in a given time frame (you cannot lose them)
• Statistical Evidence - member since, number posts, average rating, photos favorited, number of friends)
• Peer testimonials
• User-to-user rewards - do make qualitative statements (e.g., Bravo nation)

So, which pattern do I use?

1. What are you business goals?  drive user engagement? Tara Hunt (fostering metrics for healthy communities), promote a specific feature, acknowledge top contributors, increasing content quality, build loyalty
   
2. What community spirit do you want to encourage?  The competitive spectrum - caring, collaborative, cordial, competitive, combative)
3. What motivates your community members?  Your answer better not be the incentive system, do not rely on altruism alone.  Self-interest, interest in others, interest in the object being rated.  Yelp includes 1st reviewer motivation, useful, funny, and cool
4. Which entitities will accrue reputation (the same principles apply for people and content).
5. Which inputs should you pay attention to?
   

Leah Buley - How to be a UX team of One

Generative Design - in order to get to goal design, start with volume and variety of ideas.  Then turn corner and narrow ideas that have strongest elements.  1) generate ideas 2) refine ideas

Goal for today - techniques for generative design

• Brainstorm a lot
• Assemble an ad hoc team
• Pick the best ideas

Use conceptual frameworks:

• spectrums ("What does evite look for the first timer vs. the expert?")
  
• 2 x 2s (first timer/expert, automatic/manual)
  
• grids (give you a large amount of categories between user types and goals)

• word associations
• keep an inspiration library - screen grab
• Make sketchboards
• host open design sessions - involve many people
• Decorate your space - you can get feedback on designs

How to keep focus?

• Business needs are not enough.  Business needs + user needs = design principles
• e.g..  Biz need - increase registrations, user need - help me manage communications = make addictive. encourage everyone associated with the event to keep coming back.
• Design principles help you defend design decisions.

Conclusion

• start sketching - 5 prototypes
• Schedule some workshops
• Draft design principles - what experience do you want the product to provide
  

Claude Steinberg - Blind Ambition

Have students draw the behavior before writing it.  Encourage reenactment of everyday activities.

Interactive Multimedia Learning (e.g., thinkaboutit.com)

Examples of accessible Flash: crossword, kid site   Getting sound feedback would make more fun.  Expand/collapse metaphor is meaningless to visually impaired user."Becomes about making the thing work rather than how the site makes me feel."

As users what they get out of the site - you can create an auditory equivalent.

Auditory correlates: Describe the experience

JAWS - dual stream of text and audio file.  Audio web demo.  Audio hyperlinks.  User can say "click"

Nike free example - click experience and sudio

As Is - sounds "acceptable" To be - sound expressive

Stephen Anderson - Inspiration from the edge for interface design

How has the iphone interface influenced web/desktop design application interface design?
Where do you get ideas for design?

Just say no to default thinking.

wundrbar travel search

Jared Spool

• customer engagement
• eyetracking
  
• UCD has never worked
• Site Analytics - what inference do we make?

3 Core UX Attributes: vision, research, right culture

Key questions:

Vision - Can anyone on the team describe the experience of using your design 5 years from now?
Feedback - In the last 6 weeks, have you spent more than 2 hours watching someone use yours or a competitor's design?
Culture - In the last 6 weeks, have you rewarded bad design and have lessons learned.  Do you have feedback mechanisms?

Think in terms of tricks rather than methodologies.

Informed Design - build a reward system based on informed measures.

Hallie Wilfert - Web Analytics

Tools - urchin, webtrends, analog, clicktracks, ACSI/foresee survey

• Start small - use a portion of the site
• You do not need to be a statistician, but you need to be a good communicator
  
• Make sure to exclude bots and internal visitors (exclude certain ip addresses)
  
• Has the report been set up correctly?
• Make results interesting
  

Ting Jiang Folksonomy, IA, and exploratory search

Social tagging systems

• hierarchical classification
• faceted categorization
• clustering
• social tagging

• type of structure: rigid, hierchical facted, topical, flat
  
• creatord
• users
• process
• vocabulary
• domains
• examples

hierarchical: citiviz, webTOC
faceted: flamenco
clustering: grokker, clusty
social tagging: del.icio.us, flickr

Activities: browsing, searching, being aware, monitoring
Elements: resources, users, tags

Recommendations: recent/popular, users of interest, tags of interest