Upload
bonitasoft
View
118
Download
0
Tags:
Embed Size (px)
Citation preview
Best serve the User eXperience
A few usability principles
and their Eclipse rendering
Nathalie Cotté
@NathBonitasoft
© 2015 Bonitasoft 3
BONITASOFT, ECLIPSE, AND I
USERS, R&D, AND I
UX AND USABILITY PRINCIPLES
USER EXPERIENCE
DAVE
USABILITY PRINCIPLES
USABILITY PRINCIPLES – DETAILS
CREATE GOOD UX
and I
© 2015 Bonitasoft 4
Bonitasoft, Eclipse, and I
• Open source, BPM, any vertical • Automate processes, connect with the IS • Efficiency, security, traceability, flexibility => A generic product that needs a good UX
Bonitasoft, Eclipse, and I
Bonita BPM
Studio &
UI Designer
Form
application
Bonita BPM
Portal
Living
Applications
© 2015 Bonitasoft 6
Bonitasoft, Eclipse, and I
Bonita BPM
Studio &
UI Designer
Form
application
Bonita BPM
Portal
Living
Applications
© 2015 Bonitasoft 7
Bonitasoft, Eclipse, and I
© 2015 Bonitasoft
• Bonita BPM Studio • RCP application • Built on Eclipse 4.4
Bonitasoft, Eclipse, and I
© 2015 Bonitasoft 9
Main components
Welcome page
Process designer
"Coolbar"
Custom wizards
Bonitasoft, Eclipse, and I
• Product started in 2009, I onboarded in 2013 • Cognitive psychology background • 10 years as a consultant
• Only know the studio UI but no eclipse
• UX methods apply whatever the technology
© 2015 Bonitasoft 10
Users R&D & I
© 2015 Bonitasoft 11
© 2015 Bonitasoft 12
Users, R&D, and I
Users
Java application
developers
on Eclipse
© 2015 Bonitasoft 13
Users, R&D, and I
R&D
Java application
developers
on Eclipse
© 2015 Bonitasoft 14
Users, R&D, and I
SKILLS
POINT OF VIEW
CONTEXT
© 2015 Bonitasoft 15
Users, R&D, and I
SKILLS USABILITY
UX and Usability Principles
© 2015 Bonitasoft 16
• UX = make your • U • S • A • B • L • E
• From the scope of a feature
to the very details of the UI
UX and usability principles
• UX = make your • Users • Succeed • Avoid and recover from error • Be efficient • Learn • Enjoy
• From the scope of a feature
to the very details of the UI
© 2015 Bonitasoft 17
Users, R&D, and I
18
UX and usability principles
UX = User-Centered Design (UCD)
But
WHO - WHAT is the USER?
© 2015 Bonitasoft 19
UX and usability principles
Creating UX = Solving the equation
Cognitive similarities x
Context-specific use-cases
© 2015 Bonitasoft 20
Cognitive similarities: A Brain is a Brain
© 2015 Bonitasoft 21
A Brain is a Brain
© 2015 Bonitasoft 22
GOAL
SUB-GOAL
TASK
• From task to goal
E.g.: Customer Support team
Pick a ticket
from a sorted
list
Answer tickets
relevantly and
on time
Expand
Please
customers
A Brain is a Brain
© 2015 Bonitasoft 23
A Brain is a Brain
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs
• Human-Machine interaction
Senses
Inspired from : Albert Ellis
Context-specific use-cases: Every situation is unique
© 2015 Bonitasoft 25
Every situation is unique
© 2015 Bonitasoft 26
A user has A role, in A company, at A given time
+ a unique skill set, history, personal life events, emotions, and more
Every situation is unique
© 2015 Bonitasoft 27
Physical state
Mental state
Gender
Skills
Seniority
Prescription
Materials
Machines
Social relationships
Organization
Work time
Work space
Activity
Health
Security
Skills
Satisfaction
Production
Quality
Robustness
Imp
acts
Imp
ac
ts
Pa
ram
ete
rs P
ara
me
ters
UX = Solving the equation
… here comes “Dave”
© 2015 Bonitasoft 28
Solving the equation
• Dave is a persona.
• He is our Java Application DEVeloper
© 2015 Bonitasoft 29
Solving the equation
• Create persona:
– Define a scope worth learning about:
• Responsibilities in the project
• Goals
• Technical skills & environments
• Usage habits, common references
• Likes, don’t likes
• Geographies
© 2015 Bonitasoft 30
Solving the equation
– Apply methods to learn about the scope:
• Surveys
• Observations
• Interviews
• Market listeners
– Learn about specific use-cases as you go
– Keep it dynamic: skills evolve, contexts evolve…
© 2015 Bonitasoft 31
ACME
Solving the equation
• Apply knowledge: Persona
© 2015 Bonitasoft 32
Sam (System Admin)
Fred (Front-end Developer)
Dave (Java Application Developer)
Anna (Business Analyst)
Andy (End-User)
Solving the equation
• Dave’s scope:
– Geography • USA, France, LATAM, Spain, Italy, Brasil, Germany
– Responsibility in the project • Main developer, interfacing with Anna , Sam, and Andy
– Technical skills / environment • Java, Groovy, Eclipse, BPMN(?)
– Habits and common references • Eg.: ctrl+space for auto-suggestion
– Likes, don’t likes • Eg.: Changing specs, lack of versioning, slow tools
– Goals • Create slick code, deliver on time (make Andy happy)
© 2015 Bonitasoft 33
Solving the equation
What Bonita BPM needs to do to let Dave use it
What Dave needs to do to use Bonita BPM Studio
User-centered design
Techno-centered design
34
• Do it
Solving the equation
• Create empathy for the users
• Enforce a process
– New feature
– Improvement
© 2015 Bonitasoft 35
Design
Implement
Check Deliver
Knowledge
Data from
the field
Argue,
lobby,
train
Check
Check
Usability principles - Details
© 2015 Bonitasoft 36
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Capture, guide
Information structure, incitation
• Organize the content
• Give it a visual hierarchy
• Create space around what’s
important
• Use colors and images
– Menu / Properties / Palette
– Tree
– BDM manager
– Top menu
© 2015 Bonitasoft 38
Information structure, incitation
• Good: BDM manager
Information structure, incitation
© 2015 Bonitasoft 40
• Good: Insert Data and Development menus from the Welcome page
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Build meaning
Help
• Name the models used as
references
• Explain the concepts, the
paradigm
• Describe or lead through a
basic workflow
• Explain useful tips and tricks
• Warn against pitfalls
• Open to more information
– Contextual help
– “i”
– Links to web
– Documentation
– Tutorials
© 2015 Bonitasoft 42
Help
• Good: Contextual help and tooltips
It can be hidden
Help
• Good: Links to documentation, tutorials, process examples
Help
• Name the models used as
references
• Explain the concepts, the
paradigm
• Describe or lead through a
basic workflow
• Explain useful tips and tricks
• Warn against pitfalls
• Open to more information
– Contextual help
– “i”
– Links to web
– Documentation
– Tutorials
– Pop up guidance
– Question marks
(video 1:09:07)
© 2015 Bonitasoft 45
Help
• Improve: Make better use of guiding space in pop ups
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Ease the right
choice
Minimize workload
• Minimum memory calls
• Recognition rather than recall
• Offer the right options
• Clarify labels of choices
– Lists
– Expression editor
– Ctrl+space
– Dropdown
– Checkbox vs radio
buttons
© 2015 Bonitasoft 48
Minimize workload
© 2015 Bonitasoft 49
• Good: Expression editor has plenty of lists
Minimize workload
• Good: Radio buttons give a clearer explanation of the options
Minimize workload
© 2015 Bonitasoft
51
• Improve: Visibility of the provided lists
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Make the controls
obvious
Graphical parameters
• Location
• Size
• Colors
• Fitt’s law: closer and bigger
targets are accessed faster
• :
– The whole
checkbox line
clickable
– Buttons for tables
– Expression editor
– List of options
– Question marks
© 2015 Bonitasoft 53
Graphical parameters
• Improve: Location of buttons
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Give the power to
the user
User control and freedom
• Give flexibility
• Give various means to do a task
• Consider the phase of a project
• Adapt to levels of expertise
– Preferences
– Environments
– Contextual palette
– Shortcuts on
create variables
– Default names
© 2015 Bonitasoft 56
User control and freedom
© 2015 Bonitasoft 57
• Good: Preferences wizard
User control and freedom
© 2015 Bonitasoft 58
• Good: contextual palette, shortcuts to create data
User control and freedom
• Flexibility
• Variability
• Time of the project
• Expertise: shortcuts
• No kidnapping
– Preferences
– Environments
– Contextual palette
– Shortcuts on create
variables
– Default names
– Cancel is unavailable
– Welcome page is
forced on each start
© 2015 Bonitasoft 59
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Guide on what
needs to be input
Guidance on format
• :
– Tooltips
– Placeholders
– Hints
© 2015 Bonitasoft 61
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Success or error:
tell them
Visibility on the system status, feedback, waiting time, error management
– Validation
progress bar
– Error messages in
properties
– Default names
– Random progress
bars
– Live validation
problems over the
workspace
© 2015 Bonitasoft 63
Visibility on the system status, feedback, waiting time, error management
© 2015 Bonitasoft 64
• Good: Default names to avoid unstable status
• Good: Instant error detection
Decision
Making
Action Feedback
Decoding Attentional
Focus
Memories Beliefs Sense
Use standards and
consistency
Consistency & standards
• Eclipse pop ups and wizards
• Same UIs for similar uses
– Titles
– Button position
– Ctrl+space
– Labels
© 2015 Bonitasoft 66
Consistency & Standards
• Improve (?): Default labels sometimes tricky
Usability principles - Details
• Summary
– User guidance, information structure, incitation
– Help
– Minimal workload, concision, low density
– Consistency & standards
– Visibility on the system status, feedback, waiting time
– User control and freedom
– Flexibility, variability intra-individual
– Avoid errors and help error recovery, manage delete
© 2015 Bonitasoft 68
Usability principles - Details
• Sources:
– Bastien, J. M. C., & Scapin, D. L. (1993). Ergonomic criteria for the
evaluation of human-computer interfaces (Report No. 156).
Rocquencourt, France: Institut National de Recherche en Informatique
et en Automatique.
=> http://www.ergoweb.ca/criteres.html
– Nielsen, J., and Molich, R. (1990). Heuristic evaluation of user
interfaces, Proc. ACM CHI'90 Conf. (Seattle, WA, 1-5 April), 249-256.
=> http://www.nngroup.com/articles/ten-usability-heuristics/
– ISO 9241-110
=> http://www.userfocus.co.uk/resources/iso9241/part110.html
© 2015 Bonitasoft 69
Create Good UX
© 2015 Bonitasoft 70
• UX = make your
• Users
• Succeed
• Avoid and recover from error
• Be efficient
• Learn
• Enjoy
• UX = User-Centered Design (UCD)
Create Good UX
• Meet your users
• Create persona
• Build empathy
• Design for the persona
• Apply principles
• Check on the field
© 2015 Bonitasoft 71
Thank you, heroes.
Visit us online bonitasoft.com
Join our community Bonitasoft.org
Download Bonitasoft.com/downloads
Follow us on twitter @bonitasoft
Meet your users
@NathBonitasoft
© 2015 Bonitasoft 74