The 6 Step Program to Create Better UIs for Design-Impaired Engineers
-
Upload
tiagosimoes -
Category
Technology
-
view
2.151 -
download
1
description
Transcript of The 6 Step Program to Create Better UIs for Design-Impaired Engineers
![Page 1: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/1.jpg)
“Don’t make me
think!”
Tiago SimõesR&D, OutSystems
![Page 2: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/2.jpg)
Usability
![Page 3: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/3.jpg)
Usability
“We don’t need it”
“We have no budget for it”
![Page 4: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/4.jpg)
Agenda
1. Collect and prioritize user stories
2. Understand UI costs
3. Prototype
4. Be agile
5. Test, test, test
6. Make it look good
![Page 5: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/5.jpg)
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)
![Page 6: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/6.jpg)
The most common the User Story
the cheaper should be the UI Path
![Page 7: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/7.jpg)
2. UI Path costs
1. Location costs
“don’t make me think”
2. Wait costs
immediate response and feedback
3. Input costs
number of clicks and keystrokes
![Page 8: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/8.jpg)
2.1 Location costs
![Page 9: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/9.jpg)
Eye fixation(the F pattern)
Top down, left to right
![Page 10: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/10.jpg)
Attention floats to AttractorsAttractors define clusters
Attractors = Titles, Prompts, LabelsVisually relevant = Bigger, Bold, Different ColorShould be with the user language or the user data
![Page 11: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/11.jpg)
e.g.Find the status of an
hot opportunity
![Page 12: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/12.jpg)
![Page 13: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/13.jpg)
1. Top-down2. Jump from attractor to
attractor3. Until cluster is located
![Page 14: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/14.jpg)
1. Table lines typically define clusters
![Page 15: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/15.jpg)
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!!!
![Page 16: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/16.jpg)
2.2 Wait costs(minimize latency)
• Load New Page - $$$
• Popup - $$
• Ajax - $
![Page 17: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/17.jpg)
2.3 Input costs(forms…)
• Typing - $ x number of keystrokes
• Click - $
• Click to focus - $$
![Page 18: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/18.jpg)
Style Guide CRUD = High cost!
Save and Cancel have almost the same location cost
If company does not exist need to create company+ 3 clicks + 1 input + 3 page loads!
2 clicksseveral scrollshigh location cost
What are the problems here? How could this be improved?
![Page 19: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/19.jpg)
Save & New(when this is a common use case -1 page load)
Company will be created if it does not exist
Few inputs - decrease location cost
Cancel is a link(not so common)
Very few mandatory inputs
![Page 20: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/20.jpg)
Best input depends on domain
Combo Box Finite,small domain
Auto complete Finite,large domain
Input Infinite, evenly distributed domain
![Page 21: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/21.jpg)
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
![Page 22: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/22.jpg)
How to cut UI Path costsfor common User Stories?
![Page 23: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/23.jpg)
User Story
As an account manager, Sally Reep needs to see the opportunities that are estimated to close this quarter.
![Page 24: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/24.jpg)
9 clicks1 page load1 ajaxsome high locations costs(e.g. quarter end date)
Standard CRUD = High cost!
What are the problems here? How could this be improved?
![Page 25: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/25.jpg)
Smart Defaults
Common Use Case(show only pending)
Less commonon the sidebar
Default sort order is very important(most common use cases at the top)1 click
1 page load
Larger link for the identifying label
![Page 26: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/26.jpg)
User Story
As an account manager, Sally Reep needs to log information after talking with a contact.
![Page 27: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/27.jpg)
Standard Master/Details = High cost!
1 difficult location3 clicks1 popup1 input
What are the problems here? How could this be improved?
![Page 28: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/28.jpg)
Show Page
1 easy location (large size, center stage)1 input2 clicks
![Page 29: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/29.jpg)
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?
![Page 30: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/30.jpg)
In her homepage
![Page 31: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/31.jpg)
Different homepage per user profile
Account Manager
Sales Manager
What are my KPI's?What are my most common user stories?
![Page 32: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/32.jpg)
3. Prototype
![Page 33: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/33.jpg)
4. Be Agile
![Page 34: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/34.jpg)
5. Test, test, test
![Page 35: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/35.jpg)
OK, that makes UI’s easier.How can I make them pretty?
![Page 36: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/36.jpg)
CRAP design rules
![Page 37: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/37.jpg)
![Page 38: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/38.jpg)
![Page 39: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/39.jpg)
![Page 40: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/40.jpg)
![Page 41: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/41.jpg)
![Page 42: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/42.jpg)
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
![Page 43: The 6 Step Program to Create Better UIs for Design-Impaired Engineers](https://reader034.fdocuments.net/reader034/viewer/2022042816/5599c9871a28abe86e8b485f/html5/thumbnails/43.jpg)
Questions?