The 6 Step Program to Create Better UIs for Design-Impaired Engineers


Published on

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...

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Explain user stories
  • 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
  • The 6 Step Program to Create Better UIs for Design-Impaired Engineers

    1. 1. Design User Interfaces<br />“Don’t make me think!”<br />Tiago Simões<br />R&D, OutSystems<br />
    2. 2. Usability<br />
    3. 3. Usability<br />“We don’t need it”<br />“We have no budget for it”<br />
    4. 4. Agenda<br />Collect and prioritize user stories<br />Understand UI costs<br />Prototype<br />Be agile<br />Test, test, test<br />Make it look good<br />
    5. 5. 1. Collect User Stories<br />“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.”<br />Get 2 or 3 personas<br />Get ~20 user stories<br />Prioritize this list (High, Medium, Low)<br />
    6. 6. The most common the User Story<br />the cheaper should be the UI Path<br />
    7. 7. 2. UI Path costs<br />Location costs<br />“don’t make me think”<br />Wait costs<br />immediate response and feedback<br />Input costs<br />number of clicks and keystrokes<br />
    8. 8. 2.1 Location costs<br />
    9. 9. Eye fixation(the F pattern)<br />Top down, left to right<br />
    10. 10. Attention floats to AttractorsAttractors define clusters<br />Attractors = Titles, Prompts, Labels<br />Visually relevant = Bigger, Bold, Different Color<br />Should be with the user language or the user data<br />
    11. 11. e.g.Find the status of anhot opportunity<br />
    12. 12.
    13. 13. Top-down<br />Jump from attractor to attractor<br />Until cluster is located<br />
    14. 14. Table lines typically define clusters<br />
    15. 15. Location rules of thumb<br />The less elements in a page the easier it is to find what you want<br />Group related elements<br />Order is very important<br />most common should be on top<br />Attractors above or on the left<br />Use the user language for attractors!!!<br />
    16. 16. 2.2 Wait costs(minimize latency)<br />Load New Page - $$$ <br />Popup - $$<br />Ajax - $<br />
    17. 17. 2.3 Input costs(forms…)<br />Typing - $ x number of keystrokes<br />Click - $ <br />Click to focus - $$ <br />
    18. 18. Style Guide CRUD = High cost!<br />2 clicks <br />several scrolls<br />high location cost<br />If company does not exist need to create company<br />+ 3 clicks + 1 input + 3 page loads!<br />Save and Cancel have almost the same location cost<br />What are the problems here? How could this be improved?<br />
    19. 19. Few inputs - decrease location cost<br />Very few mandatory inputs<br />Company will be created if it does not exist<br />Cancel is a link<br />(not so common)<br />Save & New<br />(when this is a common use case -1 page load)<br />
    20. 20. Best input depends on domain<br />
    21. 21. Input rules of thumb<br />Order of inputs in form is important<br />Put mandatory on top<br />Order optional by frequency of filling<br />Minimize <br />Typing<br />Switching between typing and clicking<br />Focus automatically<br />Use the TAB<br />Use defaults as much as possible<br />
    22. 22. How to cut UI Path costsfor common User Stories?<br />
    23. 23. User Story<br />★ As an account manager, Sally Reep needs to see the opportunities that are estimated to close this quarter. <br />
    24. 24. Standard CRUD = High cost!<br />9 clicks<br />1 page load<br />1 ajax  <br />some high locations costs<br />(e.g. quarter end date)<br />What are the problems here? How could this be improved?<br />
    25. 25. Common Use Case<br />(show only pending)<br />Less common <br />on the sidebar<br />Smart Defaults<br />Larger link for the identifying label<br />Default sort order is very important<br />(most common use cases at the top)<br />1 click<br />1 page load<br />
    26. 26. User Story<br />★ As an account manager, Sally Reep needs to log information after talking with a contact.<br />
    27. 27. Standard Master/Details = High cost!<br />1 difficult location<br />3 clicks<br />1 popup<br />1 input <br />What are the problems here? How could this be improved?<br />
    28. 28. Show Page<br />1 easy location (large size, center stage)<br />1 input<br />2 clicks<br />
    29. 29. User Stories<br />As a sales manager, Sheila Manny needs to…<br />★★ constantly monitor the team’s global quarterly status, to know if they will reach their quota <br />★ see the quarterly quota status for each account manager, so she can follow up with them<br />★ check the pipeline to make sure there are enough opportunities in the early stages<br />★ get the next quarter’s forecast, so she can show it to the CEO. <br />These are the most important user stories. <br />How would you implement them?<br />
    30. 30. In her homepage<br />
    31. 31. Different homepage per user profile<br />Account Manager<br />Sales Manager<br />What are my KPI's?<br />What are my most common user stories?<br />
    32. 32. 3. Prototype<br />
    33. 33. 4. Be Agile<br />
    34. 34. 5. Test, test, test<br />
    35. 35. OK, that makes UI’s easier.How can I make them pretty?<br />
    36. 36. CRAP design rules<br />
    37. 37.
    38. 38. Remember<br /><ul><li>Most common user stories need cheaper UI paths</li></ul>Location costs<br />Wait costs<br />Input costs<br /><ul><li>Select carefully</li></ul>Labels - in user language<br />Sort order<br />Smart defaults<br />Homepages<br /><ul><li>Prototype
    39. 39. Usability testing
    40. 40. CRAP design rules</li></li></ul><li>Questions?<br />
    41. 41. Thank You!<br /><br />