© Mayflower GmbH 2010

Usability for ProgrammersThe Art of Social Interfaces

Markus Geiger I 16. September 2010

Mayflower GmbH I 2

http://www.flickr.com/photos/25451699@N04/2788734668

Who are you?

Mayflower GmbH I 3

You will not learn...

How to identify usergroups...How to build cool layouts...How to audit user testing...How to do perfect ui controls...

Mayflower GmbH I 4

?http://www.flickr.com/photos/raster/3380860520/

But we can talk about it...

Mayflower GmbH I 5

Actually, thereis a needsometimes...

Customer

http://www.flickr.com/photos/shonk/4112895587

Mayflower GmbH I 6

Costs of making changes

Concept Phase

DuringDevelopment

After Launch

1x

6x

100x

Mayflower GmbH I 7

User Testinghttp://www.flickr.com/photos/shonk/4112895587

Mayflower GmbH I 8

Conventional usertesting is a monster!

I Data analysis

I Usability Benchmarks

I Surveys

I Field studies

I Camera/diary studies

I Customer feedback

and so on…http://www.flickr.com/photos/shonk/4112895587

Mayflower GmbH I 9

When do you do usability testing...?

Are you working on

the site?

You alwaysdo testing.

YES?

Mayflower GmbH I 10

User testing in the office...

I Grab your chair neighbour (the least he knows the better)

I Or use your customer to the the job (product owner)

I Think about tools (screen recordings, checklists, …)

I Don't do do-it-yourself testing!

Mayflower GmbH I 11

User testing in the office...

I Pick up some tasks and make scenarios (do you have userstories?)

I Place restrictions on the task (e.g. don't use the search box or help!)

I Keep talking and take down notes (very important!)· Ask the test person to describe what they are thinking and doing· Ask test questions and give tasks to the test person!· You need to know what they problably don't say…

I Look exactly how they perceive the page!

Mayflower GmbH I 12

Some things to pay attention to during your tests...

I Don't make up elephants! (It's ok when it just works!)

I Does everyone understand how it works (your usergroups)?

I Are there all elements which would be expected?

I Mind your checklists!

I Alway take notes, make up questions...

Mayflower GmbH I 13

http://www.prweb.com/releases/2005/3/prweb213516.htm

Attention is always important...

Mayflower GmbH I 14

But only one Decision at a time!( Attention is a limited commodity ;)

Mayflower GmbH I 15

Usability and Psychology

Usability Principles

I Consistency

I Feedback

I Portability

I Ease of use

I Responsibilty

I [...]

Human Psychology

I Movement

I Perception

I Language

I Memory

I Thinking

I Experience

Mayflower GmbH I 16

Heuristics of Usability / Social Patterns

I Visibility of system status (Feedback)→ user feedback is mandatory, e.g. ajax-loaders

I Match between system and the real world→ e.g. use language which is known to your user

I Consistency and standards→ prevent user distraction, natural and logical sort orders

Mayflower GmbH I 17

Heuristics of Usability / Social Patterns

I Recognition rather than recall→ make important elements visible, use icons

I Flexibility and efficiency of use→ e.g. accelerators for pro-users

I Help users recognize, diagnose, and recover from errors→ the system is „sorry“ for not finding your expected search term

Mayflower GmbH I 18

Heuristics of Usability / Social Patterns

I Assumption & Practice

I Strict vs. fluid taxonomy

I 3-Clicks-Rule→ everything should be possible within three clicks

I Anti-patterns/unwanted behaviour→ prevent it!

I A morning a month, that's all we need... → not too much information!

Or simply what users want and how they act…

Mayflower GmbH I 19

Be a person, not a computer!

Mayflower GmbH I 20

I gentle - interested in me, remembers settings

I perceptive - shows me what will be next

I forthcoming - don't hold back useful information

I responsive - don't annoy your users

I forgiving - dialogs, history, undo options

I focused - focused on tasks

I fudgeable - allow partial completes

Pilote Computing

“Be a person – not a computer!”

Mayflower GmbH I 21

User Guidancehttp://www.flickr.com/photos/shonk/4112895587

Mayflower GmbH I 22

I Keep the main focus on tasks (one per screen)· Switching tasks takes effort and distracts users· Interruption burdens shorts memory!· Allow user to develop habits!

I Show only relevant information· Emphasize important parts· Don't distract the user with too much information

(perception vs. time, provide options for drill-downs)· Focus on user activities not on features

Being a good guide...

Mayflower GmbH I 23

I Give the user the illusion of choices· Don't ask users to make choices, be a good guide

(Not every person likes to make [hard] decisions)

I Give the user a good experience concerning the application· Reward the user for learning (Skinnerbox)· But let him still do his work or task

(= seperate between task-orientated viewsand what's around in your application)

Being a good guide...

Mayflower GmbH I 24

Focus on actions, not on features!http://www.flickr.com/photos/sherrattsam/3585024912/sizes/o/

...but bring the most frequently used features to the front ;)

Mayflower GmbH I 25

http://www.flickr.com/photos/buridan/8311216/sizes/l/

Don't be a cargo cultist*...!

Mayflower GmbH I 26

Don't be a cargo cultist*...!

I Focus on a usercentric design. Identify your users, theirgoals and tasks and provide solutions. Do not just copysomething because it's cool and others use it!

The Social Web· Users spend time in things from which they gain value· Allow users to develop their own habits· Good usability allows the application to be a contributing

part of our life we like and share with others.

*NOTE: Cargo cult science is not real science!

Mayflower GmbH I 27

Some links

I On usability itselfhttp://www.luckydogarts.com/dm158/docs/posit.pdf

I Guidelines for websites:http://www.usability.gov/guidelines/index.html

I Steve Krug - Rocket Surgery made easy

I Christian Crumlish & Erin Malone–Designing Social Interfaces (O'Reilly)

I http://germanupa.de/

22.11.2010 Mayflower GmbH 28

Vielen Dank für Ihre Aufmerksamkeit!

Kontakt Markus Geiger

markus.geiger@mayflower.de

+49 89 242054 1162

Mayflower GmbH

Mannhardtstraße 6

80538 München

Mayflower GmbH I 29

Bonus Slides: Cleaning up...http://www.flickr.com/photos/toms/105166597

Mayflower GmbH I 30

Know where the problem lies...

I Appearance – How does it look like?

I Interaction – How does the user interact with components?

I Information – Problems with information levels at different stages

I Structure – Less cluttering keeps the users focused

I Concept – How to gain value?

I Proposition – The value to the customer

Experience

Usability

Mayflower GmbH I 31

Fixing usabiltiy problems...

I Know exactly where the problem can be found

I Is it a core problem or just a problem of few test persons(including yourself)?

I Fix the least you can do – do not reinvent the wheel!

I Use checklists – if you don't know use books or the web!

Mayflower GmbH I 32

Common design flaws (some kind of checklist)

I Do we have unnecessary elements?

I Do images support the user or do they distract him?

I Is the application responsible for what it does?

I Is the layout/design supporting the users' tasks?

Is your application fullfilling these requirements?