The 6 Step Program to Create Better UIs for Design-Impaired Engineers
- 1. Design User Interfaces“Don’t make me think!”Tiago SimõesR&D, OutSystems
- 2. Usability
- 3. Usability“We don’t need it”“We have no budget for it”
- 4. AgendaCollect and prioritize user storiesUnderstand UI costsPrototypeBe agileTest, test, testMake 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 personasGet ~20 user storiesPrioritize this list (High, Medium, Low)
- 6. The most common the User Storythe cheaper should be the UI Path
- 7. 2. UI Path costsLocation costs“don’t make me think”Wait costsimmediate response and feedbackInput costsnumber of clicks and keystrokes
- 9. Eye fixation(the F pattern)Top down, left to right
- 10. Attention floats to AttractorsAttractors define clustersAttractors = Titles, Prompts, LabelsVisually relevant = Bigger, Bold, Different ColorShould be with the user language or the user data
- 11. e.g.Find the status of anhot opportunity
- 13. Top-downJump from attractor to attractorUntil cluster is located
- 14. Table lines typically define clusters
- 15. Location rules of thumbThe less elements in a page the easier it is to find what you wantGroup related elementsOrder is very importantmost common should be on topAttractors above or on the leftUse 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 keystrokesClick - $ Click to focus - $$
- 18. Style Guide CRUD = High cost!2 clicks several scrollshigh location costIf company does not exist need to create company+ 3 clicks + 1 input + 3 page loads!Save and Cancel have almost the same location costWhat are the problems here? How could this be improved?
- 19. Few inputs - decrease location costVery few mandatory inputsCompany will be created if it does not existCancel 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 thumbOrder of inputs in form is importantPut mandatory on topOrder optional by frequency of fillingMinimize TypingSwitching between typing and clickingFocus automaticallyUse the TABUse 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 clicks1 page load1 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 sidebarSmart DefaultsLarger link for the identifying labelDefault sort order is very important(most common use cases at the top)1 click1 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 location3 clicks1 popup1 input What are the problems here? How could this be improved?
- 28. Show Page1 easy location (large size, center stage)1 input2 clicks
- 29. User StoriesAs 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 profileAccount ManagerSales ManagerWhat 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?
- 42. RememberMost common user stories need cheaper UI pathsLocation costsWait costsInput costsSelect carefullyLabels - in user languageSort orderSmart defaultsHomepagesPrototype
Editor's Notes
- #6: Explain user stories
- #11: 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
- #14: cluster
- #21: examples
- #22: 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