• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
The 6 Step Program to Create Better UIs for Design-Impaired Engineers
 

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

on

  • 2,261 views

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

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

Statistics

Views

Total Views
2,261
Views on SlideShare
2,258
Embed Views
3

Actions

Likes
4
Downloads
18
Comments
0

1 Embed 3

http://www.linkedin.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 The 6 Step Program to Create Better UIs for Design-Impaired Engineers Presentation Transcript

  • Design User Interfaces
    “Don’t make me think!”
    Tiago Simões
    R&D, OutSystems
  • Usability
  • Usability
    “We don’t need it”
    “We have no budget for it”
  • Agenda
    Collect and prioritize user stories
    Understand UI costs
    Prototype
    Be agile
    Test, test, test
    Make it look good
  • 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)
  • The most common the User Story
    the cheaper should be the UI Path
  • 2. UI Path costs
    Location costs
    “don’t make me think”
    Wait costs
    immediate response and feedback
    Input costs
    number of clicks and keystrokes
  • 2.1 Location costs
  • Eye fixation(the F pattern)
    Top down, left to right
  • 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
  • e.g.Find the status of anhot opportunity
  • Top-down
    Jump from attractor to attractor
    Until cluster is located
  • Table lines typically define clusters
  • 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!!!
  • 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 
    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?
  • 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)
  • Best input depends on domain
  • 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
  • How to cut UI Path costsfor common User Stories?
  • User Story
    ★ As an account manager, Sally Reep needs to see the opportunities that are estimated to close this quarter. 
  • 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?
  • 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
  • User Story
    ★ As an account manager, Sally Reep needs to log information after talking with a contact.
  • Standard Master/Details = High cost!
    1 difficult location
    3 clicks
    1 popup
    1 input 
    What are the problems here? How could this be improved?
  • Show Page
    1 easy location (large size, center stage)
    1 input
    2 clicks
  • 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?
  • In her homepage
  • Different homepage per user profile
    Account Manager
    Sales Manager
    What are my KPI's?
    What are my most common user stories?
  • 3. Prototype
  • 4. Be Agile
  • 5. Test, test, test
  • OK, that makes UI’s easier.How can I make them pretty?
  • CRAP design rules
  • 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
  • Questions?
  • Thank You!
    tiago.simoes@outsystems.com