“Don’t make me                             think!”Rodrigo Sousa CoutinhoPM, OutSystems
Usability
Usability“We don’t need it”“We have no budget for it”
Agenda1.   Collect and prioritize user stories2.   Understand UI costs3.   Prototype4.   Be agile5.   Test, test, test6.  ...
1. Collect User Stories“As a team manager, Johnny Boss needs to  see a calendar with all the team members vacations,  so h...
1. Collect User Stories• Get 2 or 3 personas• Get ~20 user stories• Prioritize this list (High, Medium, Low)  – 3 or 4 at ...
The most common the User Storythe cheaper should be the UI Path
2. UI Path costs1. Location costs  “don’t make me think”2. Wait costs  immediate response and feedback3. Input costs  numb...
2.1 Location costs
Eye fixation      (the F pattern)Top down, left to right
Attention floats to Attractors  Attractors define clusters
e.g.“As an account manager, Anna Man    needs to find the status of a         hot opportunity”
Location rules of thumb• Less is more• Cluster related data• Order is very important  – most common should be on top• Attr...
2.2 Wait costs                (minimize latency)• Load New Page - $$$• Popup - $$• Ajax - $
2.3 Input costs                     (forms…)• Typing - $ x number of keystrokes• Click - $• Click to focus - $$
Style Guide CRUD = High cost!                                                2 clicks                                     ...
Few inputs - decrease location cost                            Mandatory                            inputs on top         ...
Best input depends on domainCombo Box       Finite,                small domainAuto Complete   Finite,                larg...
Input rules of thumb• Order of inputs in form is important  – Put mandatory on top  – Order optional by frequency of filli...
How to cut UI Path costsfor common User Stories?
User StoryAs an account manager, Anna Manneeds to see the opportunities thatare estimated to close this quarter.
Standard CRUD = High cost!                        9 clicks                        1 page load                        1 aja...
Common Use Case             (show only pending)                                                     Less common           ...
User StoryAs an account manager, Anna Manneeds to log information aftertalking with a contact.
Standard Master/Details = High cost!             1 difficult location             3 clicks             1 popup            ...
Show Page1 easy location (large size, center stage)1 input2 clicks
User Stories  As a sales manager, Sandy Boss needs to…  constantly monitor the team’s global quarterly  status, to know if...
In her homepage
Different homepage per user profile                               Account Manager                              Sales Manag...
3. Prototype
4. Be Agile
5. Test, test, test
OK, that makes UI’s easier.How can I make them pretty?
CRAP design rules
Contrast                       RepetitionLorem ipsum dolor sit amet,    Lorem ipsum dolor sit amet,consectetur adipiscing ...
Contrast                       RepetitionLorem ipsum dolor sit amet,    Lorem ipsum dolor sit amet,consectetur adipiscing ...
Contrast                                             RepetitionLorem ipsum dolor sit amet,                          Lorem ...
Contrast                       RepetitionLorem ipsum dolor sit amet,    Lorem ipsum dolor sit amet,consectetur adipiscing ...
Contrast                         RepetitionLorem ipsum dolor sit amet,       Lorem ipsum dolor sit amet,consectetur adipis...
Contrast                       RepetitionLorem ipsum dolor sit amet,    Lorem ipsum dolor sit amet,consectetur adipiscing ...
Contrast                       RepetitionLorem ipsum dolor sit amet,    Lorem ipsum dolor sit amet,consectetur adipiscing ...
Contrast                       RepetitionLorem ipsum dolor sit amet,    Lorem ipsum dolor sit amet,consectetur adipiscing ...
Remember• Most common user stories need cheaper UI paths  •   Location costs  •   Wait costs  •   Input costs• Select care...
Thank You!rodrigo.coutinho@outsystems.comhttp//www.outsystems.com/apps/
6 Steps to Engineering Awesome User Interfaces
6 Steps to Engineering Awesome User Interfaces
6 Steps to Engineering Awesome User Interfaces
6 Steps to Engineering Awesome User Interfaces
6 Steps to Engineering Awesome User Interfaces
6 Steps to Engineering Awesome User Interfaces
Upcoming SlideShare
Loading in …5
×

6 Steps to Engineering Awesome User Interfaces

551 views

Published on

In this webinar dedicated to engineers, you’ll learn 6 steps that will help you build beautiful and usable applications for your enterprise. Thanks to Apple and new SaaS offerings, User Experience (UX) is becoming a hot topic, and everyone expects beautiful software they can use without reading the manual. You can deliver highly usable applications by applying the simple UX guidelines you’ll learn during this webinar. Watch the webinar here: http://www.outsystems.com/company/events/web/user-interfaces-webinar/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
551
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Yes you need it:No training requiredGreater adoption: bigger ROIIncreased user productivityNo budget:- You can do it lean and on the cheap. We’ll see how
  • Explain the structure of user storiesExplain what a persona isNumbers are for starting. Adjust as you need.
  • Explain the structure of user storiesExplain what a persona isNumbers are for starting. Adjust as you need.
  • Location costs are the harder to measure and to grasp. Needs some practicing. The importance may change with usage. From 1st time-users to recurrent users (wait and input > location)
  • Nielsen studiesWestern countries, obviously
  • Attractors = Titles, Prompts, Labels, LinksVisually relevant = Bigger, Bold, Different ColorShould be with the user language or the user dataAttractorsTitles, Prompts, Labels, LinksThe 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
  • Imagine a sales app. The sales manager wants to find hot opportunities
  • Some eyes can go to the pipeline, it’s alrightIs largest the right term? Use the user’s language: Hot Opportunities (there’s always room for improvement)
  • cluster
  • Pop-up: Might be a page load, but there’s movement.How to fix wait cots: All in the home page. Problem: Location costs will skyrocket.
  • How do you like it when you’re presented with a 20 field form to read a magazine article?Switch mouse to keyboard is expensive. You need to move your handsFocus on the 1st inputCorrect tab order
  • Job title could be better.
  • Combo: Lead status, issue statusAuto-Complete: Company name in a CRMInput: Your name
  • Defaults: Use the country example
  • Click oppsClick click to select meClick Click for pendingClick click click calendar, month, day (it’s hard to find the end of the quarter)Click
  • We have our storiesWe prioritize themWe know how to decrease UI costsPrototype at least hub-pages and home.pages -> Get quick feedback from the usersDon’t get restricted by technologyLow fidelity is an advantage. Don’t worry about the color of the button.No emotional attachment to the hard work you’ve done.Be agile, show early. Don’t be afraid of feedback. It’s natural, if you’re afraid of getting feedback now, it’s probably the time to get it.
  • Hallway testsThe app is being tested, not youWhat are you thinkingWhere are you looking atDon’t help, don’t apologizeYou’re the shrinkCheap live testsSame as hallway1 morning a monthInvite 3 people to test – pay them in vouchersPeople looking at the testsSame as watching a football game – emotional (“Click here!!”) screaming at the screenBest way to learn about usability
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • contrast – atractorsrepetition – coherent, know what to look foralignment – Clustersproximity - Clusters
  • 6 Steps to Engineering Awesome User Interfaces

    1. 1. “Don’t make me think!”Rodrigo Sousa CoutinhoPM, OutSystems
    2. 2. Usability
    3. 3. Usability“We don’t need it”“We have no budget for it”
    4. 4. Agenda1. Collect and prioritize user stories2. Understand UI costs3. Prototype4. Be agile5. Test, test, test6. Make it look good
    5. 5. 1. Collect User Stories“As a team manager, Johnny Boss needs to see a calendar with all the team members vacations, so he can understand if there are important overlaps before he approves someones vacations.” “As a <role>, I want <goal/desire> so that <benefit>”
    6. 6. 1. Collect User Stories• Get 2 or 3 personas• Get ~20 user stories• Prioritize this list (High, Medium, Low) – 3 or 4 at high
    7. 7. The most common the User Storythe cheaper should be the UI Path
    8. 8. 2. UI Path costs1. Location costs “don’t make me think”2. Wait costs immediate response and feedback3. Input costs number of clicks and keystrokes
    9. 9. 2.1 Location costs
    10. 10. Eye fixation (the F pattern)Top down, left to right
    11. 11. Attention floats to Attractors Attractors define clusters
    12. 12. e.g.“As an account manager, Anna Man needs to find the status of a hot opportunity”
    13. 13. Location rules of thumb• Less is more• Cluster related data• Order is very important – most common should be on top• Attractors above or on the left• Use the user language for attractors!!!
    14. 14. 2.2 Wait costs (minimize latency)• Load New Page - $$$• Popup - $$• Ajax - $
    15. 15. 2.3 Input costs (forms…)• Typing - $ x number of keystrokes• Click - $• Click to focus - $$
    16. 16. Style Guide CRUD = High cost! 2 clicks several scrolls high location cost If company does not exist need to create companySave and Cancel have almost the + 3 clicks + 1 input + 3 pagesame location cost loads! What are the problems here? How could this be improved?
    17. 17. Few inputs - decrease location cost Mandatory inputs on top 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)
    18. 18. Best input depends on domainCombo Box Finite, small domainAuto Complete Finite, large domainInput Infinite, evenly distributed domain
    19. 19. 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
    20. 20. How to cut UI Path costsfor common User Stories?
    21. 21. User StoryAs an account manager, Anna Manneeds to see the opportunities thatare estimated to close this quarter.
    22. 22. 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?
    23. 23. Common Use Case (show only pending) Less common on the sidebar Smart DefaultsLarger link for theidentifying label 1 click Default sort order is very important 1 page load (most common use cases at the top)
    24. 24. User StoryAs an account manager, Anna Manneeds to log information aftertalking with a contact.
    25. 25. Standard Master/Details = High cost! 1 difficult location 3 clicks 1 popup 1 input What are the problems here? How could this be improved?
    26. 26. Show Page1 easy location (large size, center stage)1 input2 clicks
    27. 27. User Stories As a sales manager, Sandy Boss 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?
    28. 28. In her homepage
    29. 29. Different homepage per user profile Account Manager Sales Manager What are my KPIs? What are my most common user stories?
    30. 30. 3. Prototype
    31. 31. 4. Be Agile
    32. 32. 5. Test, test, test
    33. 33. OK, that makes UI’s easier.How can I make them pretty?
    34. 34. CRAP design rules
    35. 35. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.
    36. 36. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.
    37. 37. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, consectetur adipiscingelit. Phasellus pharetra leo non enim sagittis Lorem ipsum dolor sit amet,faucibus. consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
    38. 38. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.
    39. 39. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus. Alignment Proximity Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipiscing elit. consectetur adipiscing elit. Phasellus pharetra leo non Phasellus pharetra leo non enim sagittis faucibus. enim sagittis faucibus.
    40. 40. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.
    41. 41. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.
    42. 42. Contrast RepetitionLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.Alignment ProximityLorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,consectetur adipiscing elit. consectetur adipiscing elit.Phasellus pharetra leo non Phasellus pharetra leo nonenim sagittis faucibus. enim sagittis faucibus.
    43. 43. Remember• Most common user stories need cheaper UI paths • Location costs • Wait costs • Input costs• Select carefully • Labels - in user language • Sort order • Smart defaults • Homepages• Prototype• Usability testing• CRAP design rules
    44. 44. Thank You!rodrigo.coutinho@outsystems.comhttp//www.outsystems.com/apps/

    ×