6 steps to engineering awesome user interfaces
DESCRIPTION
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/TRANSCRIPT
![Page 1: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/1.jpg)
“Don’t make me
think!”
Design User Interfaces
Rodrigo Sousa CoutinhoPM, OutSystems
![Page 2: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/2.jpg)
Usability
![Page 3: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/3.jpg)
Usability
“We don’t need it”“We have no budget for it”
![Page 4: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/4.jpg)
Agenda
1. Collect and prioritize user stories2. Understand UI costs3. Prototype4. Be agile5. Test, test, test6. Make it look good
![Page 5: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/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.”
“As a <role>, I want <goal/desire> so that <benefit>”
![Page 6: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/6.jpg)
1. Collect User Stories
• Get 2 or 3 personas• Get ~20 user stories• Prioritize this list (High, Medium, Low)
– 3 or 4 at high
![Page 7: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/7.jpg)
The most common the User Storythe cheaper should be the UI Path
![Page 8: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/8.jpg)
2. UI Path costs
1. Location costs“don’t make me think”
2. Wait costsimmediate response and feedback
3. Input costsnumber of clicks and keystrokes
![Page 9: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/9.jpg)
2.1 Location costs
![Page 10: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/10.jpg)
Eye fixation(the F pattern)
Top down, left to right
![Page 11: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/11.jpg)
Attention floats to Attractors
Attractors define clusters
![Page 12: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/12.jpg)
e.g.“As an account manager, Anna Man
needs to find the status of a hot opportunity”
![Page 13: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/13.jpg)
![Page 14: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/14.jpg)
![Page 15: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/15.jpg)
![Page 16: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/16.jpg)
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!!!
![Page 17: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/17.jpg)
2.2 Wait costs(minimize latency)
• Load New Page - $$$ • Popup - $$• Ajax - $
![Page 18: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/18.jpg)
2.3 Input costs(forms…)
• Typing - $ x number of keystrokes• Click - $ • Click to focus - $$
![Page 19: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/19.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 clicks several scrollshigh location cost
What are the problems here? How could this be improved?
![Page 20: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/20.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)
Mandatory inputs on top
![Page 21: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/21.jpg)
Best input depends on domain
Combo Box Finite,small domain
Auto Complete Finite,large domain
Input Infinite, evenlydistributed domain
![Page 22: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/22.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 23: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/23.jpg)
How to cut UI Path costsfor common User Stories?
![Page 24: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/24.jpg)
User Story
★ As an account manager, Anna Man needs to see the opportunities that are estimated to close this quarter.
![Page 25: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/25.jpg)
9 clicks1 page load1 ajax some high locations costs(e.g. quarter end date)
Standard CRUD = High cost!
What are the problems here? How could this be improved?
![Page 26: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/26.jpg)
Smart Defaults
Common Use Case(show only pending)
Less common on the sidebar
Default sort order is very important(most common use cases at the top)
1 click1 page load
Larger link for the identifying label
![Page 27: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/27.jpg)
User Story
★ As an account manager, Anna Man needs to log information after
talking with a contact.
![Page 28: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/28.jpg)
Standard Master/Details = High cost!
1 difficult location3 clicks1 popup1 input
What are the problems here? How could this be improved?
![Page 29: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/29.jpg)
Show Page
1 easy location (large size, center stage)1 input2 clicks
![Page 30: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/30.jpg)
User StoriesAs 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?
![Page 31: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/31.jpg)
In her homepage
![Page 32: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/32.jpg)
Different homepage per user profileAccount Manager
Sales Manager
What are my KPI's?What are my most common user stories?
![Page 33: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/33.jpg)
3. Prototype
![Page 34: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/34.jpg)
4. Be Agile
![Page 35: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/35.jpg)
5. Test, test, test
![Page 36: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/36.jpg)
![Page 37: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/37.jpg)
![Page 38: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/38.jpg)
![Page 39: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/39.jpg)
OK, that makes UI’s easier.How can I make them pretty?
![Page 40: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/40.jpg)
CRAP design rules
![Page 41: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/41.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 42: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/42.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 43: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/43.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 44: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/44.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 45: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/45.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
Repetition
![Page 46: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/46.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 47: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/47.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 48: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/48.jpg)
AlignmentLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
RepetitionLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.ProximityLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
ContrastLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra leo non enim sagittis faucibus.
![Page 49: 6 Steps to Engineering Awesome User Interfaces](https://reader035.vdocuments.net/reader035/viewer/2022070300/5400555c8d7f724c088b4c56/html5/thumbnails/49.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