Eclipse Con - Best serve the User eXperience
•
0 j'aime•1,397 vues
Eclipse Con - Best serve the User eXperience
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (7)
Similaire à Eclipse Con - Best serve the User eXperience
Similaire à Eclipse Con - Best serve the User eXperience (20)
Plus de Bonitasoft
Plus de Bonitasoft (20)
Dernier
Dernier (20)
Eclipse Con - Best serve the User eXperience
- 1. Best serve the User eXperience A few usability principles and their Eclipse rendering Nathalie Cotté @NathBonitasoft nathalie.cotte@bonitasoft.com
- 2. © 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
- 3. and I © 2015 Bonitasoft 4
- 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
- 5. Bonitasoft, Eclipse, and I Bonita BPM Studio & UI Designer Form application Bonita BPM Portal Living Applications © 2015 Bonitasoft 6
- 6. Bonitasoft, Eclipse, and I Bonita BPM Studio & UI Designer Form application Bonita BPM Portal Living Applications © 2015 Bonitasoft 7
- 7. Bonitasoft, Eclipse, and I © 2015 Bonitasoft • Bonita BPM Studio • RCP application • Built on Eclipse 4.4
- 8. Bonitasoft, Eclipse, and I © 2015 Bonitasoft 9 Main components Welcome page Process designer "Coolbar" Custom wizards
- 9. 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
- 10. Users R&D & I © 2015 Bonitasoft 11
- 11. © 2015 Bonitasoft 12 Users, R&D, and I Users Java application developers on Eclipse
- 12. © 2015 Bonitasoft 13 Users, R&D, and I R&D Java application developers on Eclipse
- 13. © 2015 Bonitasoft 14 Users, R&D, and I SKILLS POINT OF VIEW CONTEXT
- 14. © 2015 Bonitasoft 15 Users, R&D, and I SKILLSUSABILITY
- 15. UX and Usability Principles © 2015 Bonitasoft 16
- 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
- 17. Users, R&D, and I 18
- 18. UX and usability principles UX = User-Centered Design (UCD) But WHO - WHAT is the USER? © 2015 Bonitasoft 19
- 19. UX and usability principles Creating UX = Solving the equation Cognitive similarities x Context-specific use-cases © 2015 Bonitasoft 20
- 20. Cognitive similarities: A Brain is a Brain © 2015 Bonitasoft 21
- 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
- 22. A Brain is a Brain © 2015 Bonitasoft 23
- 23. A Brain is a Brain Decision Making ActionFeedback Decoding Attentional Focus MemoriesBeliefs • Human-Machine interaction Senses Inspired from : Albert Ellis
- 24. Context-specific use-cases: Every situation is unique © 2015 Bonitasoft 25
- 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
- 26. 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 Impacts Impacts Parameters Parameters
- 27. UX = Solving the equation … here comes “Dave” © 2015 Bonitasoft 28
- 28. Solving the equation • Dave is a persona. • He is our Java Application DEVeloper © 2015 Bonitasoft 29
- 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
- 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
- 31. 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)
- 32. 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
- 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
- 34. 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
- 35. Usability principles - Details © 2015 Bonitasoft 36
- 37. 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
- 38. Information structure, incitation • Good: BDM manager
- 39. Information structure, incitation © 2015 Bonitasoft 40 • Good: Insert Data and Development menus from the Welcome page
- 41. 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
- 42. Help • Good: Contextual help and tooltips It can be hidden
- 43. Help • Good: Links to documentation, tutorials, process examples
- 44. 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
- 45. Help • Improve: Make better use of guiding space in pop ups
- 46. Decision Making ActionFeedback Decoding Attentional Focus MemoriesBeliefsSense Ease the right choice
- 47. 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
- 48. Minimize workload © 2015 Bonitasoft 49 • Good: Expression editor has plenty of lists
- 49. Minimize workload • Good: Radio buttons give a clearer explanation of the options
- 50. Minimize workload © 2015 Bonitasoft 51 • Improve: Visibility of the provided lists
- 52. 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
- 53. Graphical parameters • Improve: Location of buttons
- 54. Decision Making ActionFeedback Decoding Attentional Focus MemoriesBeliefsSense Give the power to the user
- 55. 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
- 56. User control and freedom © 2015 Bonitasoft 57 • Good: Preferences wizard
- 57. User control and freedom © 2015 Bonitasoft 58 • Good: contextual palette, shortcuts to create data
- 58. 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
- 59. Decision Making ActionFeedback Decoding Attentional Focus MemoriesBeliefsSense Guide on what needs to be input
- 60. Guidance on format • : – Tooltips – Placeholders – Hints © 2015 Bonitasoft 61
- 62. 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
- 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
- 65. Consistency & standards • Eclipse pop ups and wizards • Same UIs for similar uses – Titles – Button position – Ctrl+space – Labels © 2015 Bonitasoft 66
- 66. Consistency & Standards • Improve (?): Default labels sometimes tricky
- 67. 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
- 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
- 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)
- 70. Create Good UX • Meet your users • Create persona • Build empathy • Design for the persona • Apply principles • Check on the field © 2015 Bonitasoft 71
- 73. 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