Building Modern Software:User Experience and Design

Merlin Rebrović, Five Minutes

@merlinrebrovic

The award for the most overused buzzwordof the decade goes to “user experience”.

@merlinrebrovic

It's not a new area, but has come into prominence because users have more choices today and it's hard

to compete on hardware and features only.

How to create a lousy experience?

@merlinrebrovic

Common mistakes● Not understanding the

real need

@merlinrebrovic

Common mistakes● Building components

without a bigger picture

@merlinrebrovic

Common mistakes● Never tested in

production settings● “But it works on my

computer!”™

@merlinrebrovic

Common mistakes● Inconsistent labeling

and technical jargon

@merlinrebrovic

Common mistakes● Spelling and grammar

@merlinrebrovic

Common mistakes● No testing due to time

constraints● “We'll fix it later.”™

@merlinrebrovic

Common mistakes● End users not

educated to usethe product

● “But everyone should know that.”™

@merlinrebrovic

Common mistakes● “Just add another

button.”™

@merlinrebrovic

“If you're looking for usability disasters, just google for shareware or freeware. Sad but true, 99.9% of it looks like is was designed by a blind man with both

hands tied behind his back.”

@merlinrebrovic

Why is that happening?And a few guidelines on how to avoid these mistakes

1) Attitude “always done that way”Mentality, education, history

@merlinrebrovic

How to recognize it?● User interface is a necessary evil● Design starts from a database● We know exactly what a user needs● Keeping everything secret

@merlinrebrovic

Case study

@merlinrebrovic

Design lecture in a technical class

@merlinrebrovic

Design lecture in a technical class● Computer science students tasked with creating

paper prototypes for their class assignments● Never taught about user interfaces in four years

of studying

@merlinrebrovic

Design lecture in a technical class● Proved to be a hard, but rewarding exercise● Initial assumptions were shattered by other

students, but through iteration everyone got to a decent interface

● The lecture was declared a success by everyone

@merlinrebrovic

The best way to change someoneʼs attitudeabout user interfaces is to show them

users having problems with their product.

2) Creating unnecessary solutionsFailed communication with the customer

@merlinrebrovic

People value diversity and individuality,but during a design process we assume

that everyone is like us.

Conflict

@merlinrebrovic

Turn off your computer● Talk to people and observe their problems

@merlinrebrovic

For every solution● Ask what value does it bring to the customer● Can you test it before implementation?

@merlinrebrovic

Case studyA paper prototype used to validate assumptions

with the customer

@merlinrebrovic

Buses - assemble and simulate

@merlinrebrovic

@merlinrebrovic

@merlinrebrovic

@merlinrebrovic

@merlinrebrovic

3) Poor implementationFailed communication within the team

@merlinrebrovic

The most common problems● Mind reading (if I know it, everyone else does too)● Broken telephone● Textual specification is misunderstood or not read

@merlinrebrovic

Use the fastest and most efficientchannel of communication available:in person → video → audio → text

@merlinrebrovic

Don't write an email. Go to that person,grab a marker and use a whiteboard

to solve the problem if possible.

@merlinrebrovic

Case studyUsing storyboards and digital prototypes to get

everyone on the same page

@merlinrebrovic

Demo

@merlinrebrovic

Tested two layouts in the prototypes. Each had eight screens compiled into linked PDF for interactivity.

@merlinrebrovic

Prototype one

Listen to soothing music during a work session

Take a break when the time is up

@merlinrebrovic

Prototype two

Listen to soothing music during a work session

Take a break when the time is up

@merlinrebrovic

Time to build everything: 1 hourPresentation to the team: 3 minutes

Result: shared understanding

@merlinrebrovic

Tools● Pen and paper● Balsamiq, Axure, InVision● Prototyping in code

@merlinrebrovic

Always create wireframes?● http://merlin.rebrovic.net/blog/wireframes-or-not● No, it depends on the specific

situation and context.

@merlinrebrovic

Visual designAttractive is perceived as better

@merlinrebrovic

Conclusion

@merlinrebrovic

Communication is the mostimportant part of any project.

@merlinrebrovic

Step away from the computer whenstarting to design a solution.

@merlinrebrovic

Use simple tools so they're not an obstacle.

@merlinrebrovic

Contactmerlin.rebrovic@fiveminutes.euhttp://merlin.rebrovic.net