DESIGN AND DEVELOP BEAUTIFUL UIS FOR APPLICATIONS

SenchaCon Roadshow 19.10.2015 Session

Transcript

1. S e n c h a C o n R o a d s h o w Z ü r i c h 1 9 . 1 0 . 2 0 1 5 T o r s t e n K o c h DESIGN AND DEVELOP BEAUTIFUL UIS FOR EXTJS APPLICATIONS
2. In other words, „change your perspective“
3. Why the UI is so important! A good UI has a significant impact on the success or failure of an product! Smartphones < 2007 2007 <
4. Why the UI is so important! Because it is the most important interface between the user and the applicaWon!
5. Why the UI is so important! It lets your applicaWon communicate with your user!
6. Change the way you‘re thinking!
7. Another perspecWve First of all, change your perspecWve!
8. Change your perspecWve Do not think in technical processes! Do not think in funcWons! Do not think, the user will know what to do!
9. Change your perspecWve Imagine, your so[ware is somebody you want to communicate with.
10. What means „communicaWng“ What do you expect when you communicate with someone? •  He gives you aaenWon and understands you •  He speaks a language you do understand •  He follows your words and answers your quesWons •  He interacts with you, with words and gestures •  He listens when you speak •  He emphasizes his pronunciaWon
11. So, you expect someone like A clever, smart and sympathic person.
12. But o[en, so[ware is like
13. Do not make so[ware look like this!
14. Start from the top!
15. simple points, you always have to have on your checklist! I0
16. UI Design is not Graphic Design I Graphic Design is like clothes, it will give sympathy, but it will not affect the conversaWon or change the person. So, do not start with a graphic design!
17. Understanding 2 Do not only think about processes and technical soluWons, invite different user-types into your development process. Work with mockups, prototyps and klickdummys and share them from the beginning! Take feedback seriously! Invole End-Users in this process! Start from the user view!
18. Know your user 3 Think about your users, there enivroment and skills. What type of applicaDon do they expect? What kind of devices will they use?
19. Language 4 Think about your language, speak the same as your users. Text and symbols should be understandable! In every situaDon!
20. AIenDon 5 Think about the response Wme and the performance! Give the user feedback about longer response Dmes! Reduce response Dme in every way you can!
21. Feedback 6 Give feedback! Show the user clearly what he can do with an element! Use hover effects and use them conDnuously! ✗
22. Emphasizes the pronunciaDon 7 Give users support in processes. Set the focus to important objects! Use single point of acDon! ✗ ✓
23. ConDnuity 8 Be conWnuous in layout. Work with recurrently arrangements! Place funcDons in the same place! ✗
24. Listen to your users 9 Not everything must be visible everyWme. Give your users only the most significant funcDons they need on screens! ✗
25. Be simple I0 Try to „speak“ in simple „words“. Be smart, use technology instead of user decisions! Reduce looking paths and mouse movements! ✗ ✓
26. In short Start your project from the „top“, from the user view. !  Mockup worflows, clickpaths and screens before you develope your applicaDon !  Reduce funcDons to the absolute minimum !  Use technology to simplify the interface !  Make one person to the UI-Owner
27. Some tools For Mockups/Wireframes •  balsamiq.com •  Sencha Stencils For Klickdummys/Prototyps •  Adobe Muse •  JusWnmind For UI basics •  eBook „GUI Bloopers 2.0 by Jeff Johnson“ •  eBook „Usability By Bunnyfoot“
28. T H A N K Y O U w w w . e y e w o r k e r s . d e T o r s t e n K o c h