Building Modern Software:
User Experience and Design
Merlin Rebrović, Five Minutes

@merlinrebrovic
The award for the most overused buzzword
of 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 use
the 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 attitude
about user interfaces is to show them
users having problems with their product.

2) Creating unnecessary solutions
Failed 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 study
A paper prototype used to validate assumptions
with the customer

@merlinrebrovic
Buses - assemble and simulate

@merlinrebrovic

@merlinrebrovic

@merlinrebrovic

@merlinrebrovic

@merlinrebrovic

3) Poor implementation
Failed 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 efficient
channel 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 study
Using 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 hour
Presentation 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 design
Attractive is perceived as better

@merlinrebrovic

Conclusion

@merlinrebrovic
Communication is the most
important part of any project.

@merlinrebrovic
Step away from the computer when
starting to design a solution.

@merlinrebrovic
Use simple tools so they're not an obstacle.

@merlinrebrovic
Contact
merlin.rebrovic@fiveminutes.eu
http://merlin.rebrovic.net