Ergonomics for web applications

4,408 views
4,142 views

Published on

Published in: Design, Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,408
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
63
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ergonomics for web applications

  1. 1. Ergonomics for web applications<br />Emilie Lindqvist & Jens Christian Bang<br />
  2. 2. Introduction<br />Emilie Lindqvist<br />Designer and PM<br />Already On<br />
  3. 3. Introduction<br />Jens Christian Bang<br />Sales rep and CEO<br />Already On<br />
  4. 4. Agenda<br />CHOO<br />Ergonomics?<br />Benefits of a KA UI <br />Our vision<br />How we approach project<br />Usability – how to get there<br />Four key ingrediens<br />Examples of usability from our projects<br />
  5. 5. CHOO<br />AMS – Association Management System<br />Managing member information and data and communication with members.<br />NCA – 30 000 members, 1000 choirs, 11 employees<br />
  6. 6. Ergonomics<br />Ergonomics is the study of designing equipment and devices that fit the human body, its movements, and its cognitive abilities. <br />Ergonomics for web applications = User interface<br />"A chair should be nice and good to sit in, <br />an application easy and nice to use"<br />
  7. 7. Benefits of a KA UI<br />Fewer support issues<br />Better marketing values<br />Happier customers and visitors<br />Better applications and websites<br />Be a part of making the web a better and more friendly place<br />
  8. 8. Our vision <br />To make the most user friendly systems for the Norwegian market built on open source<br />Fewest or easiest clicks for the task<br />
  9. 9. How do we approach a project?<br />Interviewing users<br />Observing users<br />Discussing with users<br />Making the user interface in Photoshop without restrictions to the technical challenges<br />“When the supplier spend time to understand our day to day tasks, we get a really efficient system"<br />
  10. 10. The Usability<br />Our four key ingredients<br />
  11. 11. The Usability<br />Our four key ingredients<br />Knowyouraudience<br />Brainstorming<br />"Dont make me think" - thinking<br />Testing<br />
  12. 12. Knowyouraudience<br />Who are the they? Or who do you want them to be?<br />What is their main purpose in the application/on the website?<br />What do they need the application/website for?<br />What is need-to-have and what is nice- to-have?<br />
  13. 13. Knowyouraudience<br />If you have workedoutsomeofthese questions youcanbetter understand and buildtheapplication or websiteyou KNOW theywantinsteadofsomethingyou THINK theywant. <br />Ask this in thebeginningkeeptheanswers and comparewiththe final product. <br />
  14. 14. Brainstorming <br />viewpayment status<br />field for status<br />addingmembers<br />editingmembers<br />exportmemberlists to Excel<br />link to webpage<br />findingmembers<br />
  15. 15. Brainstorming - priority<br />2<br />3<br />viewpayment status<br />field for status<br />1<br />addingmembers<br />editingmembers<br />1<br />exportmemberlists to Excel<br />2<br />2<br />link to webpage<br />findingmembers<br />1<br />
  16. 16. Brainstorming - frequency<br />2<br />3<br />viewpayment status<br />field for status<br />weekly<br />weekly<br />1<br />daily<br />addingmembers<br />daily<br />editingmembers<br />1<br />monthly<br />exportmemberlists to Excel<br />2<br />2<br />link to webpage<br />weekly<br />daily<br />findingmembers<br />1<br />
  17. 17. "Dont make me think"<br />* Don't Make Me Think! A Common Sense Approach to Web Usability, Second Edition © 2006 Steve Krug<br />
  18. 18. "Dont make me think"<br />* Don't Make Me Think! A Common Sense Approach to Web Usability, Second Edition © 2006 Steve Krug<br />
  19. 19. "Dont make me think"<br />* Don't Make Me Think! A Common Sense Approach to Web Usability, Second Edition © 2006 Steve Krug<br />
  20. 20. "Dont make me think"<br />
  21. 21. People do not thinkalike<br />
  22. 22. People do not thinkalike<br />So lets not make themthink!<br />
  23. 23. Testing <br />
  24. 24. Testing <br />
  25. 25.
  26. 26. Examples of usability from our projects<br />We<br />Tabs & ribbons<br />They’re self-evident.<br />They’re hard to miss.<br />They’re good looking.<br />They suggest a physical space.<br />
  27. 27. Examples of usability from our projects<br />We<br />Tabs<br />
  28. 28. Examples of usability from our projects<br />We<br />Icons<br />They’re hard to miss.<br />They are faster to perceive than text<br />They add esthetic values<br />A picture says more than 1000 words<br />
  29. 29. Examples of usability from our projects<br />We<br />Icons<br />
  30. 30. Examples of usability from our projects<br />We<br />Colors<br />They’re hard to miss.<br />They are one of the first thing you notice<br />They help you understand a message clearer<br />They clarifies and reinforce messages<br />
  31. 31. Examples from ourprojects<br />
  32. 32.
  33. 33. Advanced frontend CMS<br />

×