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...
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
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
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!!!
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)
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?
AttractorsTitles, Prompts, LabelsThe best Attractor is data itselfDevelop with real sample data. You will find much less use of PromptsShould be visually relevant related to surrounding elementsVisually relevant =DifferentBiggerBoldDark or RedCluster
cluster
examples
Perceived costs(for 1st time users)A link, even if AJAX, looks like it'll cost a page loadA text input, even if optional, will look costlyAfter continuous usage:Some location costs will decrease Input costs remain the sameLatency costs can sometimes increase
