designing for play (at web directions @media)

40
1 Designing for Play Christian Crumlish consumer experience evangelist, AOL Web Directions @media | London @mediajunkie | #4play 10 June, 2010

Upload: christian-crumlish

Post on 11-Aug-2014

4.626 views

Category:

Career


0 download

DESCRIPTION

An updated version of my designing for play talk from London in June.

TRANSCRIPT

Page 1: Designing for Play (at Web Directions @media)

1

Designing for PlayChristian Crumlish consumer experience evangelist, AOL

Web Directions @media | London@mediajunkie | #4play

10 June, 2010

Page 2: Designing for Play (at Web Directions @media)

design

Page 3: Designing for Play (at Web Directions @media)

play

Page 4: Designing for Play (at Web Directions @media)

play acting

Page 5: Designing for Play (at Web Directions @media)

Signs of Life (who else is here?)

WhatA person wants to have some indication of who else frequents the site she is visiting and the she isn’t alone.

Use When• Use this pattern to signal the transient

presence of other visitors.• Use this pattern to give the current visitor a

sense that she has company while reading the blog, especially if she recognizes some of the faces or names.

Page 6: Designing for Play (at Web Directions @media)

Buddy List (can Timmy come out to play?)

WhatThe user wants a distinct list of people she knows (friends, coworkers, family) to communicate with in real time.

Use WhenUse this pattern when offering just-in-time communications, such as instant messaging.

Buddy list utilizes concepts like Who’s Here Now and Ambient Intimacy

Page 7: Designing for Play (at Web Directions @media)

masks

Page 8: Designing for Play (at Web Directions @media)

make believe

Page 9: Designing for Play (at Web Directions @media)

reimagining

Page 10: Designing for Play (at Web Directions @media)

Profile (who am I in this context?)

WhatThe user wants a central, public location to display all the relevant content and information about themselves to others – both those they know and those they don’t.

Use When• Use this pattern when your site encourages a lot of

user-generated content and you want one place to show a speci!c user’s contribution.

• Use this pattern when you want to allow users to look up another user to learn more about them.

• Use this pattern when you want to allow users to express their personality.

• Use this pattern to allow users to share information about themselves to others.

Page 11: Designing for Play (at Web Directions @media)

Avatars (how do I want to appear?)

WhatA user wants to have a visual representation of themselves as part of their online identity.

Use When• Use this pattern when the user wants

to have a visual associated with their identity.

Page 12: Designing for Play (at Web Directions @media)

games

Page 13: Designing for Play (at Web Directions @media)

13invitation

Page 14: Designing for Play (at Web Directions @media)

Welcome Area (invitation to the dance)

WhatA user registers for a new service and needs to have a sense of what can be done at the site and how to get started.

Use When• Use this pattern when a new user

!rst accesses the site.• Use this pattern to acquaint the

user with important or useful features.

Page 15: Designing for Play (at Web Directions @media)

rules

Page 16: Designing for Play (at Web Directions @media)

Community Norms (set the groundrules)

A principle of community management is to establish and communicate social norms to the participants in your community

While this may be done with interface copy, help text, support forums, newbie tutorials and so forth, it’s best communicated directly from member to member.

Founders and community managers can play the role of Model Citizen to demonstrate desirable behavior.

Page 17: Designing for Play (at Web Directions @media)

goals

Page 18: Designing for Play (at Web Directions @media)
Page 19: Designing for Play (at Web Directions @media)

Collecting (gathering and displaying tokens)WhatA user wants to save an item for later viewing, sharing, or discussion.

Use When• Use this pattern to enable people to save

web sites, pages, clippings, photos, videos or other items in an online environment.

• Use this pattern to allow people to show off, share or collaborate around a collection of online items.

Page 20: Designing for Play (at Web Directions @media)

competition

Page 21: Designing for Play (at Web Directions @media)

Points (what’s my score?)WhatParticipants want a tangible measurement of their accomplishments for personal satisfaction and to make comparisons with other competitors.

Use When• Use this pattern when the community is highly

competitive, and the activities that users engage in are competitive in nature, such as fantasy sports or games.

• Speci!cally, don't use this pattern when• The activities that users engage in are not

competitive in nature (e.g., writing recipes, or sharing photos).

• The awarding of points might demean or devalue the activity that they're meant to reward. By pinning an arbitrary incentive value to an activity, you may unintentionally replace a user's satisfying intrinsic motivation with a petty extrinsic one.

Page 22: Designing for Play (at Web Directions @media)

Leaderboard (how do I measure up?)WhatIn highly competitive communities using a ranking system, users may want to know who are the very best performers in a category or overall.

Use When• The community is highly competitive, and the

activities that users engage in are competitive in nature (e.g., player-vs-player contests, or coaching a fantasy football team.)

• You want to enable player-to-player comparisons, or permit users to de!nitively settle "Who is better?" arguments.

• Don't use this pattern when the activities that users engage in are not competitive in nature (e.g., writing recipes, or sharing photos).

Page 23: Designing for Play (at Web Directions @media)

cooperation

Page 24: Designing for Play (at Web Directions @media)

Collaborative Editing (win-win)

WhatPeople like to be able to work together on documents, encyclopedias, and software codebases.

Use When• Use this pattern when you wish to enable your

site members to work together to curate their collective wisdom or document their shared knowledge.

Page 25: Designing for Play (at Web Directions @media)

a comment from Bernie DeKoven:

I think there might be a problem with your musical instrument analogy. For most people (unless they're kids) it is really not successful in inviting "play." It's too open, too unstructured, too difficult to make it sound "good."

http://www.majorfun.com/

Page 26: Designing for Play (at Web Directions @media)

music

Page 27: Designing for Play (at Web Directions @media)

tuning

Page 28: Designing for Play (at Web Directions @media)

Constant Refinement (fine tuning)

WhatSocial media is a two way street: read/write. In addition to providing tool for sharing and publishing media, you can provide your users with interfaces for zeroing in on the streams they're interested in and then sifting through them for the most interesting and relevant objects in the stream.

Use WhenUse when you want to enable your users to update their experience on a constant basis and when there’s no possible way you could anticipate the ideal con!guration for each one of your users.

Page 29: Designing for Play (at Web Directions @media)

29

Page 30: Designing for Play (at Web Directions @media)

ensemble

Page 31: Designing for Play (at Web Directions @media)

31

Page 32: Designing for Play (at Web Directions @media)

frameworks

Page 33: Designing for Play (at Web Directions @media)

Leave Things Unfinished (room to play)

WhatThis principle !nds form in a number of familiar concepts: customization, skinning, user-contributed tags and the emergent folksonomies they can give rise to.

Use WhenYou might call this part of the process "meta-design." Rather then giving our users a !sh, we are giving them a rod, reel, bait, and instructions to teach them how to !sh. We design the rules of the system but not all of the outcomes.

Page 34: Designing for Play (at Web Directions @media)

control

Page 35: Designing for Play (at Web Directions @media)

35

Page 36: Designing for Play (at Web Directions @media)

chaos

Page 37: Designing for Play (at Web Directions @media)

37

Page 38: Designing for Play (at Web Directions @media)

38

curation

Page 39: Designing for Play (at Web Directions @media)

flow

Page 40: Designing for Play (at Web Directions @media)

@mediajunkiehttp://mediajunk.ie

thanks!