A lecture I held on Windays13 conference from 22nd to 25 of April 2013. The original was in Croatian with two hands-on demos. This lecture is translated to English and complemented with a few new slides from the demos to give it a bit more context.

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

2. @merlinrebrovic
The award for the most overused buzzword
of the decade goes to “user experience”.

3. @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.

4. How to create a lousy experience?

5. @merlinrebrovic
Common mistakes
●
Not understanding the
real need

6. @merlinrebrovic
Common mistakes
●
Building components
without a bigger
picture

7. @merlinrebrovic
Common mistakes
●
Never tested in
production settings
●
“But it works on my
computer!”™

8. @merlinrebrovic
Common mistakes
●
Inconsistent labeling
and technical jargon

9. @merlinrebrovic
Common mistakes
●
Spelling and grammar

10. @merlinrebrovic
Common mistakes
●
No testing due to time
constraints
●
“We'll fix it later.”™

11. @merlinrebrovic
Common mistakes
●
End users not
educated to use
the product
●
“But everyone should
know that.”™

12. @merlinrebrovic
Common mistakes
●
“Just add another
button.”™

13. @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.”

14. @merlinrebrovic
Why is that happening?
And a few guidelines on how to avoid these mistakes

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

16. @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

17. @merlinrebrovic
Case study

18. @merlinrebrovic
Design lecture in a technical class

19. @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

20. @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

21. @merlinrebrovic
The best way to change someoneʼs attitude
about user interfaces is to show them
users having problems with their product.

22. 2) Creating unnecessary solutions
Failed communication with the customer

23. @merlinrebrovic
People value diversity and individuality,
but during a design process we assume
that everyone is like us.
Conflict

24. @merlinrebrovic
Turn off your computer
●
Talk to people and observe their problems

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

26. @merlinrebrovic
Case study
A paper prototype used to validate assumptions
with the customer

27. @merlinrebrovic
Buses - assemble and simulate

28. @merlinrebrovic

29. @merlinrebrovic

30. @merlinrebrovic

31. @merlinrebrovic

32. @merlinrebrovic

33. 3) Poor implementation
Failed communication within the team

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

35. @merlinrebrovic
Use the fastest and most efficient
channel of communication available:
in person → video → audio → text

36. @merlinrebrovic
Don't write an email. Go to that person,
grab a marker and use a whiteboard
to solve the problem if possible.

37. @merlinrebrovic
Case study
Using storyboards and digital prototypes to get
everyone on the same page

38. @merlinrebrovic
Demo

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

40. @merlinrebrovic
Prototype one
Listen to soothing music
during a work session
Take a break when the
time is up

41. @merlinrebrovic
Prototype two
Listen to soothing music
during a work session
Take a break when the
time is up

42. @merlinrebrovic
Time to build everything: 1 hour
Presentation to the team: 3 minutes
Result: shared understanding

43. @merlinrebrovic
Tools
●
Pen and paper
●
Balsamiq, Axure, InVision
●
Prototyping in code

44. @merlinrebrovic
Always create wireframes?
●
http://merlin.rebrovic.net/blog/wireframes-or-not
●
No, it depends on the specific
situation and context.

45. @merlinrebrovic
Visual design
Attractive is perceived as better

46. @merlinrebrovic

47. Conclusion

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

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

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

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