This document discusses ergonomics for web applications. It begins with introductions and then covers the following key points: 1. The definition of ergonomics as it relates to designing user interfaces that fit human abilities and movements. 2. The benefits of a user-centered interface including fewer support issues, happier customers, and better marketing. 3. The speaker's vision to create the most user-friendly systems for the Norwegian market using open source technologies. 4. Their approach to projects which includes interviewing and observing users to understand needs before designing interfaces in Photoshop.

1. Ergonomics for web applications Emilie Lindqvist & Jens Christian Bang

2. Introduction Emilie Lindqvist Designer and PM Already On

3. Introduction Jens Christian Bang Sales rep and CEO Already On

4. Agenda CHOO Ergonomics? Benefits of a KA UI Our vision How we approach project Usability – how to get there Four key ingrediens Examples of usability from our projects

5. CHOO AMS – Association Management System Managing member information and data and communication with members. NCA – 30 000 members, 1000 choirs, 11 employees

6. Ergonomics Ergonomics is the study of designing equipment and devices that fit the human body, its movements, and its cognitive abilities. Ergonomics for web applications = User interface "A chair should be nice and good to sit in, an application easy and nice to use"

7. Benefits of a KA UI Fewer support issues Better marketing values Happier customers and visitors Better applications and websites Be a part of making the web a better and more friendly place

8. Our vision To make the most user friendly systems for the Norwegian market built on open source Fewest or easiest clicks for the task

9. How do we approach a project? Interviewing users Observing users Discussing with users Making the user interface in Photoshop without restrictions to the technical challenges “When the supplier spend time to understand our day to day tasks, we get a really efficient system"

10. The Usability Our four key ingredients

11. The Usability Our four key ingredients Knowyouraudience Brainstorming "Dont make me think" - thinking Testing

12. Knowyouraudience Who are the they? Or who do you want them to be? What is their main purpose in the application/on the website? What do they need the application/website for? What is need-to-have and what is nice- to-have?

13. Knowyouraudience If you have workedoutsomeofthese questions youcanbetter understand and buildtheapplication or websiteyou KNOW theywantinsteadofsomethingyou THINK theywant. Ask this in thebeginningkeeptheanswers and comparewiththe final product.

14. Brainstorming viewpayment status field for status addingmembers editingmembers exportmemberlists to Excel link to webpage findingmembers

15. Brainstorming - priority 2 3 viewpayment status field for status 1 addingmembers editingmembers 1 exportmemberlists to Excel 2 2 link to webpage findingmembers 1

16. Brainstorming - frequency 2 3 viewpayment status field for status weekly weekly 1 daily addingmembers daily editingmembers 1 monthly exportmemberlists to Excel 2 2 link to webpage weekly daily findingmembers 1

17. "Dont make me think" * Don't Make Me Think! A Common Sense Approach to Web Usability, Second Edition © 2006 Steve Krug

18. "Dont make me think" * Don't Make Me Think! A Common Sense Approach to Web Usability, Second Edition © 2006 Steve Krug

19. "Dont make me think" * Don't Make Me Think! A Common Sense Approach to Web Usability, Second Edition © 2006 Steve Krug

20. "Dont make me think"

21. People do not thinkalike

22. People do not thinkalike So lets not make themthink!

23. Testing

24. Testing

26. Examples of usability from our projects We Tabs & ribbons They’re self-evident. They’re hard to miss. They’re good looking. They suggest a physical space.

27. Examples of usability from our projects We Tabs

28. Examples of usability from our projects We Icons They’re hard to miss. They are faster to perceive than text They add esthetic values A picture says more than 1000 words

29. Examples of usability from our projects We Icons

30. Examples of usability from our projects We Colors They’re hard to miss. They are one of the first thing you notice They help you understand a message clearer They clarifies and reinforce messages

31. Examples from ourprojects

33. Advanced frontend CMS