“Don’t make me

think!”

Tiago SimõesR&D, OutSystems

Usability

Usability

“We don’t need it”

“We have no budget for it”

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

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

1. Location costs

“don’t make me think”

2. Wait costs

immediate response and feedback

3. 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, LabelsVisually relevant = Bigger, Bold, Different ColorShould be with the user language or the user data

e.g.Find the status of an

hot opportunity

1. Top-down2. Jump from attractor to

attractor3. Until cluster is located

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

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?

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

Best input depends on domain

Combo Box Finite,small domain

Auto complete Finite,large domain

Input Infinite, evenly distributed 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.

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?

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

User Story

As an account manager, Sally Reep needs to log information after talking with a contact.

Standard Master/Details = High cost!

1 difficult location3 clicks1 popup1 input

What are the problems here? How could this be improved?

Show Page

1 easy location (large size, center stage)1 input2 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