UI Fundamentals for Programmers

UI fundamentals for programmers. Chilango Rails Mexico DF.

Transcript

1. UI FUNDAMENTALS for programmers
2. @juanzuluaga
4. personal experiences and discussions
5. UI
6. is everywhere!
7. UI presentations
8. UI presentations emails
9. UI presentations emails television
10. UI presentations emails television software
11. UI presentations emails television software
12. UI is another layer of your software
14. database, etc
15. business rules database, etc
16. UI business rules database, etc
17. for some people, the UI is the software!
18. software is not about requirements
20. it's about people
21. mental models
22. email@example.com ***************
24. Your payment failed Your payment was successful
25. a mental model is a preconception
26. the user feels stressed when that preconception is not met
28. a stressed user means that you're losing money
29. least effective difference
30. 1 2 3 4 5 6 7 8 9
31. 1 2 3 4 5 6 7 8 9
32. less is more
34. fitt's law
35. the larger an item is, and the closer it is to your cursor the easier it is to click on
37. stress
38. a stressed user means that you're losing money
43. fluxes
44. stop spiting your DB schema into the UI
45. stop for a minute and think
46. design actions, not screens
47. add a phone number
48. add a phone number delete a blog post
49. add a phone number delete a blog post view my hostel bookings
50. break each action in three steps
51. 1. how
 how do I get there? which sections take me there?
53. 2. what
 add a new contact into the platform
55. 3. later
 what happens after I completed the action
57. color psychology
58. excitement
 energy fun increases heart rate stimulate appetite
60. calming
 lowers aggressiveness
61. men's favorite lowers appetite lowers heart rate increases productivity
62. eye tiring grabs attention quickly taxis and warning signs around the world babies cry more in yellow rooms uncomfortable and stressful if used in excess
64. pure
 innocent doctors and hospitals
65. elegance power status
67. tools
68. bootstrap getbootstrap.com
69. coolors coolors.co
70. consume products with good UI
71. thanks!
72. questions?