1. UI for Alien Cowboys Matt Jones The Disappearing Organisation

2. UI for alien cowboys or, easy user-centred practices for designing emerging applications 3. Three things youll leave with

What user centred design is

• And why it is useful

Easy ways to incorporate user -centred design

• Tricks and tips that dont take long, and deliver results

How to marry user-centred design with emerging technologies and methodologies

4. Two (maybe three) parts

Overview of user-centred design methods

Practical tips and tricks

• Working on a design exercise

If theres time:

• Specific challenges of

• • Mobile

• • MMORPG Gaming/Play

• Some future trends

5. First though Whats analien cowboy? 6. One thing to always remember 7. We are Aliens. 8. We are aliens

We are not our audience

• Geoffrey Moores Adoption Curve from his book Crossing the Chasm

We are not our audience

• Geeks forgive

• • Computers, not people

We are not our audience

• Even if we are building for other builders

Geoffrey Moores Adoption Curve:Don Norman Remix :http://www. jnd .org 9. Crossing the Chasm Geoffrey Moores Adoption Curve:Don Norman Remix :http://www. jnd .org WE ARE ALL HERE SOMETIMES WE ARE HERE 10. Crossing the chasm Geoffrey Moores Adoption Curve:Don Norman Remix :http://www. jnd .org [ UNDERSTANDING CONTEXTS OF USE CREATES BRIDGES ACROSS THE CHASM 11. First though Whats an alien cowboy? 12. I am a cowboy

I am lazy

I like things which dont take long but give good results

I like approaches, but dislike processes

• Processes or methodologies used creatively can get you to unexpected and delightful end results

• But they can also become dogmatic and destructive

• Things are useful as long as they are useful

I think this is pretty common (are you a cowboy too?)

This tutorial will focus on approaches and tips that appeal to the cowboy in me

13. okay... 14. Part 1:Overview of User-Centred Design 15. What is User-Centered Design?

User-Centred Design (UCD) is an approach to design that grounds the process in information about the people who will use the product. UCD processes focus on users through the planning, design and development of a product.

Usability Professionals Association

http://www.upassoc.org

16. Main Benefits 17. Macro & Micro macro micro What to build What will solve the problem What will sell How to build How to solve the problem How to sell What will people use How will people use What/Why? How? 18. Enlarging markets

Inclusive design

• Design for extremes of market (old, young, less able)

• Utility and desirability for everyone in between

• • E.g. Good Grips

See your product/service in terms of an ecology

• Apples iLife

• • Arguable

• Sonys sunrise to sunset view

19. Sunrise to sunset:evolve ideas in the market Market Creation Market Penetration Market Domination NOON Market Expansion Market Saturation Market Exhaustion SUNRISE Mid morning Mid afternoon SUNSET 20. 21. Diagram from Digital Dreams: The work of the Sony design centre Paul Kunkel 22. Benefits to Cowboys of User-Centred Design process

Removes the power politics of development:

• Externalises issues

• Allows constructive discussion

Shared frame of reference for all team members

• User research information can introduce

• • Shared language

• • Shared goals

• • More multidisciplinary approach

23. Some notable approaches 24. Some notable approaches

Cooper

• Persona Driven Design

ISO standard

• ISO 13407

• ISO 18529

UPD

• User Participatory Design

Adaptive Design

25. Coopers Persona Driven Design 26. Alan Cooper

Alan Cooper

• Persona driven design

• Cooper's personas are simply pretend users of the system you're building. You describe them, in a surprising amount of detail, and then design your system for them. Meg Hourihan*

• Primary personas

• • Dictate focus, scope

• • Target audience

• Secondary personas

• • On periphery of target market

• • Might even be anti-customers

• • • People you will never satisfy

* http://www.boxesandarrows.com/archives/002330.php 27. ISO standards on Human-Centered Design 28. ISO standards for UCDISO 13407 / ISO 18529

Very high-level umbrella definition of user-centred processes

A pretty useful overview:

• • Understand and specify the context of use

• • Specify the user and organisational requirements

• • Produce design solutions

• • Evaluate designs against requirements

Useful to quote to the sort of people who like ISO standards

29. User Participatory Design 30. UCD orUPD

Sometimes UCD is referred to, or seen as specialised sub-discipline:

• User PARTICIPATORY design

A set of methods for close cooperation with end-users

• In product/service creation

• User interface development

• Often very good for internal / enterprise-specific projects

Very compatible with XtremeProgramming thinking

• The Customer is Always Available

• • http://www.extremeprogramming.org/rules/customer.html

31. Ask the users? Are you crazy? 32. iiiiiiiiiiiinnnnnpuuuuttttt! users * The users are just one input into a successful design biz tech 33. Research, analysis and synthesis Users Research Analysis & Synthesis Designer(s)/Builder(s) X 34. Designer-Centred Design! 35. Ask the users? Are you crazy? If you ask the public what they think they will need, you will always be behind in this world. You will never catch up unless you think one to ten years in advance and create a market for the items you think the public will accept at that time. Akio Morita, Sony 36. NOT user-centred till mid-afternoon Market Creation Market Penetration Market Domination NOON Market Expansion Market Saturation Market Exhaustion SUNRISE Mid morning Mid afternoon SUNSET Entry with technology Drive with design Diversify with marketing, and Some UCD 37. Adaptive Design 38. 39. Stewart Brand: How buildings learn Sketch by Dan Hill http://www.cityofsound.com/ 40. Dan Hill: Designing for adaptation 41. Adaptive Design + Emerging Tech Great basis / investment for rapid cycles of emerging tech! 42. To sum up UCD. 43. UCD: summing up

Drives

• Acceptance

• Makes utility obvious

• Desirability

If commercial

• Enlarges market and return on investment

• Reduces risks

If not, enlarges ecosystem

• For emerging tech, this increases in importance

• • If people get it then they are more likely to play with it

• • • Adaptive design is the best candidate here because

• • • Most human behaviour changes slower than technology a good anchor in rapidly changing tech environment

A number of approaches but with one common aspect

• Context of use

44. Looking out from the screen at the world 45. To understand peoples mental models of the world and design technology to solve their problems The files areinthe computer? 46. The practical 47. Tricks and tips

Were going to design

• A recipe aggregator

Using some of the most useful tricks and tips Ive found

• Itch++

• Market mapping and persona building

• The value sieve

• Use your illusion

• Flowcrash

48. Not to be taken as a substitute for a full user-centred project These are tricks and tips that, if you only have time to do a little design work before you build, will get you good results 49. The Brief. 50. The brief for the recipe aggregator

Goals

• Can be used in the kitchen

• Can be accessed in the supermarket

• Can find recipes from key ingredients

• • Whats left on the shelf?

• Can share recipes easily with others

51. Caution... 52. = No speaking alien! Use ofexcessivejargon, mention of RDF, XML, or anything that the benefit cant be explained once and easily to a user (or causes geek religious wars) will be punished by a fineWhich will be a beer fund! 53. Break... please be back at 3:30pm... 54. The Brief. 55. The brief for the recipe aggregator

Goals

• Can be used in the kitchen

• Can be accessed in the supermarket

• Can find recipes from key ingredients

• • Whats left on the shelf?

• Can share recipes easily with others

56. = No speaking alien! Use ofexcessivejargon, mention of RDF, XML, or anything that the benefit cant be explained once and easily to a user (or causes geek religious wars) will be punished by a fineWhich will be a beer fund! 57. Even cowboys can pass ISO standards

Understand and specify the context of use

• Itch++

• Market mapping and persona building

Specify the user and organisational requirements

• The value sieve

Produce design solutions

• Use your illusion

Evaluate designs against requirements

• Flowcrash

58. Understanding context of use real way

Before each the cowboy tips, Ill outline some of the pro methods

Contextual Inquiry

• A mile in their shoes

• Shadowing

Ethnography

• User diaries

• Pager studies

• Interviews

• Buildrealpersonas

Contextual inquiry / interview by Lodestar, ltd. for BBC iCan project. 59. Itch++ 60. Framework to ask yourself questions*Familiar Context With Others One paragraph of an experience relating to the brief for each Alone Unfamiliar Context * This is even more useful if you can get someone else to ask you the questions and record your responses 61. Itch++: 15 minutes

10 minutes writing

5 minutes presentation

If you want to pair, and interview: thats great

• but self-organise!

Familiar Context With Others Alone Unfamiliar Context 62. 63. Market Mapping & Persona Building 64. Mapping users characteristics practical ideas Business decision An example from my past working on a design for an online home improvement store 65. Words to describe each user profile

A:Practical, functional, does chores, room has to look okay but not confident in design

B:More interested in design, less confident in technical abilities

C:Always has projects on the go, hobbyist

D:Creates a look, less involved in project execution, most interested in creative, trends

practical ideas A B D C 66. Who are they? It helps!

A: Mike,early 40s, depends on wife Louises opinion for design. Two kids, his wife is expecting a third

B: Jane,early 30s, has partner, busy, relies on friends and other people for advice

C: Jack,single, quite confident in abilities and taste.Shops around and reads lots of magazines, focusing on DIY titles: Better Homes, Changing Rooms

D: Lucy,single, in her 50s, out-sources doing, shops around, reads lots of magazines, style and end result oriented.Reads lots of magazines, broad lifestyle, Habitat, IKEA, BHS

practical ideas A B D C 67. Take personas and contexts to arrive at concepts/features for BBC iCan project. 68. 69. Understanding context

Understand and specify the context of use

• Itch++

• Market mapping and persona building

Specify the user and organisational requirements

• The value sieve

Produce design solutions

• Use your illusion

Evaluate designs against requirements

• Flowcrash

70. The value sieve 71. A value / complexity sieve The feature prioritisation is based on the user research and the business strategy, along with the initial technology estimates.I like doing this prioritisation exercise in person with all the stakeholders so all viewpoints can be factored in.Its a seminal meeting and the results guide the rest of the project.- Victor Lombardihttp://www.noisebetweenstations.com 72. How to use the sieve

High Complexity / High Value:

• It's important to include these features, and because they're hard let's address them first so we have enough time and find any unknown snags.

High Complexity / Low Value:

• They're hard and no one thinks they're important, so try to leave them out.

Low Complexity / High Value:

• Definitely include these, but give them lower priority.

Low Complexity / Low Value:

• These features can be put on a reach list, to do if resources permit. Or left until a future phase. Or you can re-examine them to see if your original values are accurate.

73. 74. Understanding context

Understand and specify the context of use

• Itch++

• Market mapping and persona building

Specify the user and organisational requirements

• The value sieve

Produce design solutions

• Use your illusion

Evaluate designs against requirements

• Flowcrash

75. Use your illusion 76. User Illusion Alan Kay 77. Medium and message Harry Beck... 78. 79. Jakob does it Card Sorting to Discover the Users' Model of the Information Space Jakob Nielsen, May 1995http://www.useit.com/papers/sun/cardsort.html 80. Use your illusion: 30 minutes

5 minutes writing your imagined features to a fairly granular level, but nothing too detailed

• remember, you will be fined for using jargon!

5 minutes arranging the cards into the system as you think it will be organised AS A USER EXPERIENCE

• STOP!Were going to take a snapshot this should take 5 minutes or so

Swap your cards with someone else

5 minutes organise the cards youve received into a system that makes sense to you, given the brief

• STOP!Were going to take another snapshot another 5 minutes

Then, well spend 5 minutes looking at the results

81. 82. Understanding context

Understand and specify the context of use

• Itch++

• Market mapping and persona building

Specify the user and organisational requirements

• The value sieve

Produce design solutions

• Use your illusion

Evaluate designs against requirements

• Flowcrash

83. Paper prototyping Courtesy Marc Rettig: http://www.marcrettig.com/ 84. Fast, cheap and out of control Courtesy Marc Rettig: http://www.marcrettig.com/ 85. But I can code quicker than I can draw Courtesy Marc Rettig: http://www.marcrettig.com/

You cant. Try it.

You dont have to draw well anyone can draw well enough to get results

You will get nitpicking at a coded prototype, not answers

But the biggest problem with coded prototypes

86. You will not want to destroy it 87. Flowcrash 88. Using paper prototypes for rapid testing

Design paper screens for your system

• Include buttons, drop-downs, widgets

• • Simulate them all with stickies for ease of repositioning and re-use

Make sure there are two of you who know how the design works

• One of you will facilitate

• One of you will play the computer

Go grab a colleague or family member who hasnt seen your design

Facilitator: ask them to complete tasks based on the goals of your design

Computer: serve up the screens as per the flow of the design you did.Be neutral! Emotionless!

Record what you learn, and redesign there and then

Retest!

89. The end? 90. Two (maybe three) parts

Overview of user-centred design methods

Practical tips and tricks

• Working on a design exercise

If theres time:

• Specific challenges of

• • Mobile

• • MMORPG Gaming/Play

• Some future trends

• Discussion?

91. Mobile 92. Marc Rettig sums up the main challenge well 93. Contextual inquiry is key

Understanding the real attention deficits that your application will suffer

Understanding the in-between times in real life, where your service or product might be a boon

Understanding the audio, visual and interaction constraints your design will operate under

Walk a mile in mobile shoes

94. A trick pioneered by Palm / Handspring too 95. For mobile

The world is more important than the screen

• Invest in studying the world

• Its not that easy to hack

Products and services are

• Used in social situations

• • Study the social patterns of use

• • Social interactions more valuable that screen interactions

• • • Prada a cautionary tale

96. Further at Etech

Christian Lindholm

• Nokia UI pioneer

• Art-of-Logic: Experience Making, the Nokia Way

• Track:Untethered Date:Wednesday, February 11 Time: 2:45pm - 3:30pm

• http://conferences.oreillynet.com/ cs/et2004/view/e_sess/4864

97. Gaming/Play MMoRPGs 98. From a conversation with Stewart Butterfield

Looking at Play as a broad category

• In addition to the activity (chess, rugby, Quake)

• A way of trying on another mode of relationship or identity

• • Children play the limits of the relationships. They have violence, sexuality, power dynamics in their games. Exploring the kinds of ways they can have relationships with their peers

• • Even if we are friends - when we play we become competitors.

• Control over identity is the most important control

• In most apps like online banking or search the users character or personality is kind of irrelevant because task overrides

• But in worlds of Play ways in which peoplecome together(place/channel) andidentify each other/selfare key

99. UIs that get out of the way ofthe players and their relationships Drag and drop to establish chats and ad-hoc groups Visualising relationships in heads-up displays From http://www.gne.net 100. Future trends 101. Next-gen mobile Bigger screens,more whizzy features Same old messy world. 102. More embodied interaction 103. Converts This holiday, my two sisters - who to my knowledge had neverplayed a console game before - got addicted to EyeToy 104. Discussion 105. Thats all... Thank You for your timeand energy 106. Further study: Web

Mark Rettig: http://www.marcrettig.com

• Interaction design history in a teeny little nut shell http://www.marcrettig.com/writings/ rettig.interactionDesignHistory.2.03.pdf

• Design for small screens: http://www.marcrettig.com/writings/rettig,SmallScreens.pdf

• Interface Design in Seven Weeks: Marc Rettig

• • http://loop.aiga.org/content.cfm?ContentID=83

AdaptivePath:

• http://www.adaptivepath.com/

AskTog: Bruce Tognazzini

• http://www.asktog.com/

Carolyn Snyder on paper prototyping:

• http://www.snyderconsulting.net/paperprototyping.htm

• http://www-106.ibm.com/developerworks/library/us-paper/?dwzone=usability

UsabilityNet.org: EU funded resource centre

• http://www.usabilitynet.org/home.htm

User-Centred Design & Agile methodologies: Anthony Colfelt

• http://www.colfelt.com/blog/cat_agile_development.shtml

107. Further study: Books

General

• About Face, The Inmates Are Running the Asylum :Alan Cooper

• Don't Make Me Think:Steve Krug

• The Design of Everyday Things:Donald Norman

• The elements of user experience:Jesse James Garrett (http://www.jjg.net/elements/)

• Observing the User Experience:Mike Kuniavsky

• Information Architecture:Christina Wodtke

• • Christina also has a great reading list at http://www.eleganthack.com/reading/

Mobile

• Information Appliances and Beyond: Bergman

• Mobile Usability: Lindholm, Keinnonen, Kiljander

• Handheld Usability: Scott Weiss

108. Further study: Organisations/Events

ACM SIGCHI, the ACM's Special Interest Group on Computer-Human Interaction

• http://sigchi.org/

• CHI2004: April 24-29 th , Austria

• • http://www.chi2004.org/

• DIS2004: Designing Interactive Systems, August 1-4, Cambridge, Mass

• • http://sigchi.org/dis2004/

AIGA-Experience Design

• http://www.aiga.org/content.cfm?Alias=experiencedesign

ASIST

• Information Architecture summit:March 21-23, 2003 Portland, Oregon

• • http://www.asis.org/Conferences/IA03/

AifIA: The Asilomar Institute for Information Architecture

• http://www.aifia.org/

109. Send me questions... [email_address]