MAX 2006 Beyond Boundaries

1
MAX 2006 Beyond Boundaries

• Creating Learnable Applications
• Stephen Gilson and Rob Adams
• Adobe Systems

2
Speakers

• Rob Adams
• Flex Product Line User Researcher
• Formerly Flash / Flex Builder User Researcher
• Came to Adobe from Macromedia
• Past life Software developer for large J2EE web
  application/
• Stephen Gilson
• Member of Flex Documentation Team
• Previously the documentation manager for JRun,
  Spectra, ColdFusion, and Flex
• Came to Adobe from Allaire/Macromedia

3
Creating Learnable Applications

• Overview
• Successful applications are a delight to use, not
  a frustration to learn
• The first step is quickly moving beginner users
  to intermediates / experts
• This means two things
• Designing your applications so that they are easy
  to learn
• Documenting your applications so stuck users can
  quickly get unstuck

4
Creating Learnable Applications

• Contents
• Part I Designing for Learnability
• Part II Learnability Design Principles
• Part III Writing Effective Documentation
• Part IV QA

5
Creating Learnable Applications

• Three (long) or four (short) bullets go here to
  describe the image, diagram or screenshot in the
  pod above

• Part I Designing for Learnability

6
Part I Designing for Learnability

• Know Your User

7
Know Your User
8
Know Your User
9
Know Your User
10
Know Your User
File reports as quickly as possible
Keep the system secure
Keep up on project status
11
Know Your User
File reports as quickly as possible
Keep the system secure
Keep up on project status
12
Part I Designing for Learnability

• Design from Goals and Tasks,Not Features

13
Design from Goals and Tasks, Not Features
Keep up on project status
Step 1 Log in
Step 2 View overview
Step 3 Select project
14
Design from Goals and Tasks, Not Features
Keep up on project status

• Heuristic Evaluations

Step 1 Log in
Step 2 View overview
Step 3 Select project
15
Design from Goals and Tasks, Not Features
Keep up on project status

• Heuristic Evaluations
• Cognitive Walkthroughs

Step 1 Log in
Step 2 View overview
Step 3 Select project
16
Design from Goals and Tasks, Not Features
Keep up on project status

• Heuristic Evaluations
• Cognitive Walkthroughs
• Usability Testing

Step 1 Log in
Step 2 View overview
Step 3 Select project
17
Design from Goals and Tasks, Not Features
Keep up on project status

• Heuristic Evaluations
• Cognitive Walkthroughs
• Usability Testing
• Dog Fooding

Step 1 Log in
Step 2 View overview
Step 3 Select project
18
Part I Designing for Learnability

• Take Time to Design

19
Take Time to Design
Coding
Architecture
Feature Dev
Bug Fixing
Time
20
Take Time to Design
Coding
Architecture
Feature Dev
Bug Fixing
Time
21
Take Time to Design
Coding
Architecture
Feature Dev
Bug Fixing
Design
Time
22
Take Time to Design
Coding
Architecture
Feature Dev
Bug Fixing
Design
Time
23
Take Time to Design
Design
User Research
Concept Design
Detailed Design
Coding
Architecture
Feature Dev
Bug Fixing
Time
24
Creating Learnable Applications

• Three (long) or four (short) bullets go here to
  describe the image, diagram or screenshot in the
  pod above

• Part II Learnability Design Principles

25
Part II Learnability Design Principles

• Teach the System, Not the User
• Support Exploration
• Provide Help In-Context
• Teach Concepts in Manageable Chunks

26
Part II Learnability Design Principles

• Teach the System, Not the User
• Reduce the number of things the user needs to
  learn.
• Computers are very good at remembering things.
• Whenever possible, put knowledge into the
  systems brain dont make the user learn it.
• Support Exploration
• Provide Help In-Context
• Teach Concepts in Manageable Chunks

27
Teach the System, Not the User

• Allow Any Reasonable Input Format

28
Allow Any Reasonable Input Format

• People write telephone numbers in many ways
• 415-555-6666
• 415.555.6666
• [phone]
• 1-415-555-6666
• 555-6666
• Etc

29
Allow Any Reasonable Input Format
30
Allow Any Reasonable Input Format
31
Teach the System, Not the User

• Automate Unnecessary Steps

32
Automate Unnecessary Steps
33
Teach the System, Not the User

• Give the User a Starting Point

34
Give the User a Starting Point
35
Give the User a Starting Point
36
Part II Learnability Design Principles

• Teach the System, Not the User
• Support Exploration
• Most users learn best by exploring.
• You must make it
• Easy to explore.
• Safe to explore.
• Provide Help In-Context
• Teach Concepts in Manageable Chunks

37
Support Exploration

• Forgive Errors Support Undo

38
Forgive Errors Support Undo
39
Forgive Errors Support Undo
40
Forgive Errors Support Undo
41
Support Exploration

• Use Standard Controls and Patterns

42
Use Standard Controls and Patterns
43
Use Standard Controls and Patterns
Organizer
Workspace
44
Use Standard Controls and Patterns
Organizer
Workspace
45
Support Exploration

• Put Important But Oft-Forgotten Commands in the
  Menus

46
Put Important But Oft-Forgotten Commands in the
Menus
47
Support Exploration

• Provide Signposts

48
Provide Signposts
49
Provide Signposts
50
Support Exploration

• Reduce the Number of Places to Go

51
Reduce the Number of Places to Go
52
Reduce the Number of Places to Go
53
Reduce the Number of Places to Go
54
Support Exploration

• Merge Input and Output

55
Merge Input and Output
56
Support Exploration

• Allow Direct Manipulation

57
Allow Direct Manipulation
58
Allow Direct Manipulation
59
Part II Learnability Design Principles

• Teach the System, Not the User
• Support Exploration
• Provide Help In-Context
• Going to the documentation interrupts users
  tasks and breaks their flow.
• Finding the right documentation is always tricky,
  even if you have a good index or search.
• Keep users from having to refer to the
  documentation by providing just the right help
  right when they need it.
• Teach Concepts in Manageable Chunks

60
Provide Help In-Context

• Write Good Error Messages

61
Write Good Error Messages
62
Write Good Error Messages
63
Write Good Error Messages
64
Provide Help In-Context

• Provide Just in Time Help

65
Provide Just in Time Help
66
Provide Just in Time Help
67
Provide Just in Time Help
68
Provide Help In-Context

• Dont Be Annoying

69
Dont Be Annoying
70
Dont Be Annoying
71
Part II Learnability Design Principles

• Teach the System, Not the User
• Support Exploration
• Provide Help In-Context
• Teach Concepts in Manageable Chunks
• Most users dont read pages of documentation.
• Sneak key concepts into the interface.
• Break them into bite-sized chunks that are easy
  to digest quickly.

72
Teach Concepts In Manageable Chunks

• Use Graphics to Teach Graphical Concepts

73
Use Graphics to Teach Graphical Concepts
74
Use Graphics to Teach Graphical Concepts
Screenshot credit John Schrag / Alias
75
Teach Concepts In Manageable Chunks

• Use Welcome Screens to Teach

76
Use Welcome Screens to Teach
Screenshot credit John Schrag / Alias
77
Use Welcome Screens to Teach
78
Teach Concepts In Manageable Chunks

• Provide Quick Access to Relevant Task-Oriented
  Help

79
Provide Quick Access to Relevant Task-Oriented
Help
80
Creating Learnable Applications

• Three (long) or four (short) bullets go here to
  describe the image, diagram or screenshot in the
  pod above

• Part III Writing Effective Help

81
Part III Writing Effective Help

• Before writing
• Know the user
• Knowing the user is also critical for designing
  help
• What do you expect the user to be able to
  accomplish?
• Know the writer - do they have the background?
• Can the writer use the product in the way that a
  user can?
• Does the writer's background fit the user
  persona?
• Make help a feature of the product
• Ensure that development understands the need for
  good help
• Make help compelling and available
• Integrate it appropriately with your application
• Are you tightly integrated or loosely integrated?

82
Part III Writing Effective Help

• While writing
• Work with the development team
• Synchronize doc and feature development
• Use the product
• Help the development team by being a user
• Provide feedback on the product
• If something is hard for the writer to do or to
  explain, it will be even harder for the user
• Observe someone using the application

83
Example Know the User for Flex 1.5
84
Example Know the User for Flex 2
85
Example Know the User for Netflix
86
Part III Writing Effective Help

• After writing
• Get reviews and gather feedback
• Developers
• QA
• Training dept
• Tech support
• Real users

87
Example Gathering Feedback on adobe.com
88
Example Connecting with the Community
89
Part III Writing Effective Help

• What to write
• UI help is typically task based
• Base your help on the same tasks the application
  was designed to support.
• Is there any overview needed?
• Are they in step m of an n-step procedure?
• Make help topics granular
• Don't provide all the info on a single page
• People often want an answer, not an explanation
• Point users in the right direction
• For more information links
• Learn more links
• See also sections
• Links to web sites
• Links to other locations

90
Example Task-based Help Topic

• Creating an EASYSHARE Gallery account Back to
  top
• The Gallery members have access to all areas of
  the Gallery's Web site. To become a member,
  create your user account
• Click "Join Now" on the Sign-in page.
• Fill in the registration information.
• Click "Join Now" button.
• Also see Changing your personal information.

91
Example Point Users in the Right Direction
92
Example Point Users in the Right Direction
93
Example Learn More Link
94
Example Learn More Link
95
Creating Learnable Applications

• Part IV QA
• More questions? Feedback?
• Rob adams_at_adobe.com http//usereccentric.com/
• Stephen smgilson_at_adobe.com
• Additional reading
• Alan Cooper Robert Reimanns About Face 2.0
• Bruce Tognazzinis First Principles of
  Interaction Design
• Jakob Nielsens Heuristic Evaluation article
• Jenifer Tidwells Designing Interfaces
• JoAnn Hackos and Dawn Stevens Standards for
  Online Communications
• See the notes for more

96
(No Transcript)