6 Steps to Engineering Awesome User Interfaces

“Don’t make me

think!”

Design User Interfaces

Rodrigo Sousa CoutinhoPM, OutSystems

Usability

“We don’t need it”“We have no budget for it”

Agenda

1. Collect and prioritize user stories2. Understand UI costs3. Prototype4. Be agile5. Test, test, test6. 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.”

“As a <role>, I want <goal/desire> so that <benefit>”

1. Collect User Stories

• Get 2 or 3 personas• Get ~20 user stories• Prioritize this list (High, Medium, Low)

– 3 or 4 at high

The most common the User Storythe cheaper should be the UI Path

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

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• 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!

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?

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

Best input depends on domain

Combo Box Finite,small domain

Auto Complete Finite,large domain

Input Infinite, evenlydistributed 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, Anna Man needs to see the opportunities that are estimated to close this quarter.

9 clicks1 page load1 ajax some high locations costs(e.g. quarter end date)

Standard CRUD = High cost!

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

User Story

★ As an account manager, Anna Man needs to log information after

talking with a contact.

Standard Master/Details = High cost!

1 difficult location3 clicks1 popup1 input

Show Page

1 easy location (large size, center stage)1 input2 clicks

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?

In her homepage

Different homepage per user profileAccount 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

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.

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.

Repetition

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

Thank You!rodrigo.coutinho@outsystems.com

http//www.outsystems.com/apps/

6 Steps to Engineering Awesome User Interfaces

Technology

Transcript of 6 Steps to Engineering Awesome User Interfaces

A2 Physiology People are awesome People are awesome.

Want Awesome Models? Build Awesome Training Data!

blank awesome project certificate - Web design · blank awesome project certificate Keywords: free printable awesome project award certificate, blank awesome project certificate template,

How to Build an Awesome Mobile Retail Campaign- in just 3 Steps

Awesome book and awesome exam

Structure and Mechanical Properties of Nanophase Materials ...assets.cambridge.org/.../9781107412972_frontmatter.pdf · Atomistic Simulations of Steps in Bimetallic Interfaces as

9 steps how to make an awesome presentation

Презентация компании Awesome&Awesome

170804 NewContentChecklists ALmypixels2pages.com/1_P2P_Handouts/Checklists/...C] Awesome Autumn Paper Pack C] Awesome Autumn Photo Mats Awesome Autumn Plastics Awesome Autumn Ribbon

Puppet Camp Berlin 2014 Closing Keynote: Next steps for doing more awesome things with Puppet

awesome PERU

Narrative means to Awesome ends - Awesome Alfie

Sun SPOT Universal Mote System Team Awesome by Team Awesome.

How To Be AWESOME! How To Be A Better Person in 4 EASY Steps!

How to Be Awesome in 2.5 Steps

20 steps to build an awesome personal brand

Are You Awesome? So Are We. Let's Be Awesome Together.

How to Create an Awesome Presentation in 3 Steps

10 Steps to Creating Awesome Headlines that Generate Clicks and Shares

AWESOME: Building Great Relationships Study Guide...FIGHTING FOR AN AWESOME MARRIAGE 9 AWESOME BUILDING GREAT RELATIONSHIPS FIGHTING FOR AN AWESOME MARRIAGE KEY VERSE “Marriage should