UI fundamentals for programmers

iOS HIG: https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/
Mac HIG: http://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/
Don't make me think: http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758
Mobile Design Patterns: http://pttrns.com
Community of designers to find inspiration: https://dribbble.com

Transcript

1. UI Fundamentals for programmers
2. • ui • mental models • smallest effective difference • fitt's law The tip of the iceberg
3. UI
4. is the space where interactions between humans and machines occur
5. UI chat message emails software
6. UI is a software layer UI
7. …software is about people
8. this is a gov website in colombia
9. mental
 models
10. mental models
11. mental models how a user thinks that a system works
12. mental models a mental model is based on belief, not facts assumptions based on previous experiences different for every person
13. email@example.com *************** mental models
14. use patterns used by big players mental models
15. smallest effective
 difference
16. smallest effective difference make all visual distinctions as subtle as possible, but still clear and effective.
 
 is the difference here noticeable, and no more?
17. 1 2 3 4 5 6 7 8 9 smallest effective difference
18. 1 2 3 4 5 6 7 8 9 smallest effective difference
19. smallest effective difference
20. smallest effective difference
21. strong normal weak
22. Bibendum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. lorem ipsum dolor amet
23. Bibendum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus. lorem ipsum dolor
24. Bibendum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. lorem ipsum dolor Bibendum
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. lorem ipsum dolor
25. fitt's
 law
26. “the larger an item is, and the closer it is to your cursor, the easier it is to click on” fitts’ law
27. fitts’ law
28. fitts’ law
29. fitts’ law
30. edit a wordpress post
31. Group similar actions together fitts’ law
32. resources
33. iOs human Interface Guidelines https://developer.apple.com/library/safari/ documentation/UserExperience/Conceptual/ MobileHIG/
34. Mac OS human Interface Guidelines http://developer.apple.com/library/mac/ documentation/UserExperience/Conceptual/ AppleHIGuidelines/
35. Don’t make me think http://www.amazon.com/Dont-Make-Me-Think- Usability/dp/0321344758
36. Find inspiration http://pttrns.com https://dribbble.com