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