Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 c...
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 ...
@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 exactl...
@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 ...
@merlinrebrovic
Design lecture in a technical class
●
Proved to be a hard, but rewarding exercise
●
Initial assumptions we...
@merlinrebrovic
The best way to change someoneʼs attitude
about user interfaces is to show them
users having problems with...
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.
...
@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
●
Textua...
@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 possib...
@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 spec...
@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
Upcoming SlideShare
Loading in …5
×

Building Modern Software: UX and Design

2,129 views

Published on

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.

Published in: Technology
  • Be the first to comment

Building Modern Software: UX and Design

  1. 1. Building Modern Software: User Experience and Design Merlin Rebrović, Five Minutes
  2. 2. @merlinrebrovic The award for the most overused buzzword of the decade goes to “user experience”.
  3. 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. 4. How to create a lousy experience?
  5. 5. @merlinrebrovic Common mistakes ● Not understanding the real need
  6. 6. @merlinrebrovic Common mistakes ● Building components without a bigger picture
  7. 7. @merlinrebrovic Common mistakes ● Never tested in production settings ● “But it works on my computer!”™
  8. 8. @merlinrebrovic Common mistakes ● Inconsistent labeling and technical jargon
  9. 9. @merlinrebrovic Common mistakes ● Spelling and grammar
  10. 10. @merlinrebrovic Common mistakes ● No testing due to time constraints ● “We'll fix it later.”™
  11. 11. @merlinrebrovic Common mistakes ● End users not educated to use the product ● “But everyone should know that.”™
  12. 12. @merlinrebrovic Common mistakes ● “Just add another button.”™
  13. 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. 14. @merlinrebrovic Why is that happening? And a few guidelines on how to avoid these mistakes
  15. 15. 1) Attitude “always done that way” Mentality, education, history
  16. 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. 17. @merlinrebrovic Case study
  18. 18. @merlinrebrovic Design lecture in a technical class
  19. 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. 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. 21. @merlinrebrovic The best way to change someoneʼs attitude about user interfaces is to show them users having problems with their product.
  22. 22. 2) Creating unnecessary solutions Failed communication with the customer
  23. 23. @merlinrebrovic People value diversity and individuality, but during a design process we assume that everyone is like us. Conflict
  24. 24. @merlinrebrovic Turn off your computer ● Talk to people and observe their problems
  25. 25. @merlinrebrovic For every solution ● Ask what value does it bring to the customer ● Can you test it before implementation?
  26. 26. @merlinrebrovic Case study A paper prototype used to validate assumptions with the customer
  27. 27. @merlinrebrovic Buses - assemble and simulate
  28. 28. @merlinrebrovic
  29. 29. @merlinrebrovic
  30. 30. @merlinrebrovic
  31. 31. @merlinrebrovic
  32. 32. @merlinrebrovic
  33. 33. 3) Poor implementation Failed communication within the team
  34. 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. 35. @merlinrebrovic Use the fastest and most efficient channel of communication available: in person → video → audio → text
  36. 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. 37. @merlinrebrovic Case study Using storyboards and digital prototypes to get everyone on the same page
  38. 38. @merlinrebrovic Demo
  39. 39. @merlinrebrovic Tested two layouts in the prototypes. Each had eight screens compiled into linked PDF for interactivity.
  40. 40. @merlinrebrovic Prototype one Listen to soothing music during a work session Take a break when the time is up
  41. 41. @merlinrebrovic Prototype two Listen to soothing music during a work session Take a break when the time is up
  42. 42. @merlinrebrovic Time to build everything: 1 hour Presentation to the team: 3 minutes Result: shared understanding
  43. 43. @merlinrebrovic Tools ● Pen and paper ● Balsamiq, Axure, InVision ● Prototyping in code
  44. 44. @merlinrebrovic Always create wireframes? ● http://merlin.rebrovic.net/blog/wireframes-or-not ● No, it depends on the specific situation and context.
  45. 45. @merlinrebrovic Visual design Attractive is perceived as better
  46. 46. @merlinrebrovic
  47. 47. Conclusion
  48. 48. @merlinrebrovic Communication is the most important part of any project.
  49. 49. @merlinrebrovic Step away from the computer when starting to design a solution.
  50. 50. @merlinrebrovic Use simple tools so they're not an obstacle.
  51. 51. @merlinrebrovic Contact merlin.rebrovic@fiveminutes.eu http://merlin.rebrovic.net

×