Let’s face it: as software engineers we all suck when creating user interfaces. We studied and worked all our lives to understand complex systems, so we take it for granted that other people will also cope well with complexity. That is simply not true: the complex UIs we create are the main reason why some of our projects have not been successful in the long run. So, how can you design better user interface? It's easy, you just need to follow these 6 steps...

1. Design User Interfaces “Don’t make me think!” Tiago Simões R&D, OutSystems

2. Usability

3. Usability “We don’t need it” “We have no budget for it”

4. Agenda Collect and prioritize user stories Understand UI costs Prototype Be agile Test, test, test Make it look good

5. 1. Collect User Stories “As a team manager, Johnny Boss needs to see a calendar with all the team member's vacations, so he can understand if there are important overlaps before he approves someone's vacations.” Get 2 or 3 personas Get ~20 user stories Prioritize this list (High, Medium, Low)

6. The most common the User Story the cheaper should be the UI Path

7. 2. UI Path costs Location costs “don’t make me think” Wait costs immediate response and feedback Input costs number of clicks and keystrokes

8. 2.1 Location costs

9. Eye fixation(the F pattern) Top down, left to right

10. Attention floats to AttractorsAttractors define clusters Attractors = Titles, Prompts, Labels Visually relevant = Bigger, Bold, Different Color Should be with the user language or the user data

11. e.g.Find the status of anhot opportunity

13. Top-down Jump from attractor to attractor Until cluster is located

14. Table lines typically define clusters

15. Location rules of thumb The less elements in a page the easier it is to find what you want Group related elements Order is very important most common should be on top Attractors above or on the left Use the user language for attractors!!!

16. 2.2 Wait costs(minimize latency) Load New Page - $$$ Popup - $$ Ajax - $

17. 2.3 Input costs(forms…) Typing - $ x number of keystrokes Click - $ Click to focus - $$

18. Style Guide CRUD = High cost! 2 clicks several scrolls high location cost If company does not exist need to create company + 3 clicks + 1 input + 3 page loads! Save and Cancel have almost the same location cost What are the problems here? How could this be improved?

19. Few inputs - decrease location cost Very few mandatory inputs Company will be created if it does not exist Cancel is a link (not so common) Save & New (when this is a common use case -1 page load)

20. Best input depends on domain

21. Input rules of thumb Order of inputs in form is important Put mandatory on top Order optional by frequency of filling Minimize Typing Switching between typing and clicking Focus automatically Use the TAB Use defaults as much as possible

22. How to cut UI Path costsfor common User Stories?

23. User Story ★ As an account manager, Sally Reep needs to see the opportunities that are estimated to close this quarter.

24. Standard CRUD = High cost! 9 clicks 1 page load 1 ajax some high locations costs (e.g. quarter end date) What are the problems here? How could this be improved?

25. Common Use Case (show only pending) Less common on the sidebar Smart Defaults Larger link for the identifying label Default sort order is very important (most common use cases at the top) 1 click 1 page load

26. User Story ★ As an account manager, Sally Reep needs to log information after talking with a contact.

27. Standard Master/Details = High cost! 1 difficult location 3 clicks 1 popup 1 input What are the problems here? How could this be improved?

28. Show Page 1 easy location (large size, center stage) 1 input 2 clicks

29. User Stories As a sales manager, Sheila Manny needs to… ★★ constantly monitor the team’s global quarterly status, to know if they will reach their quota ★ see the quarterly quota status for each account manager, so she can follow up with them ★ check the pipeline to make sure there are enough opportunities in the early stages ★ get the next quarter’s forecast, so she can show it to the CEO. These are the most important user stories. How would you implement them?

30. In her homepage

31. Different homepage per user profile Account Manager Sales Manager What are my KPI's? What are my most common user stories?

32. 3. Prototype

33. 4. Be Agile

34. 5. Test, test, test

35. OK, that makes UI’s easier.How can I make them pretty?

36. CRAP design rules

43. Usability testing

45. Thank You! tiago.simoes@outsystems.com