![Page 1: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/1.jpg)
Introduction to User Experience Design for Engineers
Presented byJeff LeBlanc
![Page 2: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/2.jpg)
The Qt Company: A Brief Introduction
› Responsible for all Qt operations› Qt Licensing › Creators, Developers and
Maintainers of Qt
› Worldwide leader in› Qt API Development› Qt Application Development› Design services – UI and UX
› 200+ in-house Qt experts› More than 20 years of Qt experience › Trusted by over 8,000 customers worldwide
![Page 3: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/3.jpg)
Presented ByJeff LeBlanc
Director of User Experience @ ICSSoftware developer for 20+ yearsCertified Qt trainer since 2003Adjunct faculty at WPI teaching HCI
Contact me: [email protected]
![Page 4: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/4.jpg)
Two Questions
• Who has coded a User Interface because you like creating UIs?
• Who has coded a User Interface because you needed something for your back end code?
![Page 5: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/5.jpg)
Why Do You Care About UX?
• Qt and QML are very powerful toolkits, but they focus on “how” and not “what”
• Software developers focus on “how”• Users care about “what”
• What your app does is more important than how it does it (to the user)
![Page 6: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/6.jpg)
Why Do You Care About UX?
• A mobile app needs to capture the user’s attention very quickly• 30 seconds or they move on• The user experience is what
• makes someone keep using the app• makes someone recommend it to others
![Page 7: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/7.jpg)
Why Do You Care About UX?
• Bad design effects people• Adds stress• Can cause errors and cost lives• Can lose customers
• Good design effects people• Improves job performance and satisfaction• Can save lives• Makes people want to use your product
![Page 8: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/8.jpg)
Focusing on UX
• Increase customer satisfaction leads to increased revenue• Wixon & Jones case study, 80% revenue increase by
focusing on usability• Reduce training costs• Reduce support costs
• McAfee reduced support 90% by focusing on UX (2005)
![Page 9: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/9.jpg)
User Experience vs User Interface
• All software has a User Interface (UI) of some type, but how do you feel after using it?
• A positive User Experience (UX) means• You enjoyed using the system, or at least did not
dislike it• You would use it again and recommend it to others
![Page 10: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/10.jpg)
Can Engineers Focus on the UX?
• Software engineers think like engineers, not like end users or designers• Different mental models than target users• Different skill sets than UX/visual designers
• Often get an interface that only makes sense to other technical people• Techies like to figure things out, but not everyone else
does
“Know Thy User” - Hansen
![Page 11: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/11.jpg)
UX Design as an Engineer
• Things to keep in mind if you’re doing the design and the implementation• Remember that you are not the target user• Work with a UX designer• Keep in mind UI guidelines
• As easy to implement the UI “right” as it is “wrong”
![Page 12: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/12.jpg)
UI Design Guidelines8 Golden Rules for Interface Design
Ben Schneiderman – U. Maryland
1.Strive for consistency2.Cater to universal usability3.Offer informative feedback4.Design dialogs to yield closure5.Prevent errors6.Permit easy reversal of actions7.Support internal locus of control8.Reduce short term memory load
![Page 13: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/13.jpg)
1. Strive for Consistency• Consistency can be
• Within a product• Across products within a company• Across the software industry
• Ctrl-C to copy
• Benefits of consistency• The user benefits from transfer of learning• Marketable as a “look and feel”
• Perhaps the most frequently violated or ignored rule…
![Page 14: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/14.jpg)
Consistency
![Page 15: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/15.jpg)
2. Universal Usability• Designing software to be usable by the widest
range of reasonably possible users• Many factors to consider
• Physical abilities• Vision, coordination
• Cultural differences• Colors, icons
• Technical experience• Human perception
![Page 16: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/16.jpg)
Universal Usability• Anyone can have color vision problems under
different circumstances
• “Cut.. the blue wire with the white stripe, not… the black wire with the yellow stripe…”
Tip: Use Secondary Encoding!
![Page 17: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/17.jpg)
3. Offer Informative Feedback• Every action should provide feedback that something
happened, or is happening• Controls should have descriptions
• Describe what is possible or not possible• Examples
• Progress bars• Status messages• Cursor changes• Tooltips• Animations
![Page 18: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/18.jpg)
4. Design Dialogs to Yield Closure• Users want to feel confident that a given task
has• Obvious steps• Well-defined outcome
• A dialog box should• Appear for a purpose• Have logical steps• Give a good indication of the success or failure of the
task
![Page 19: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/19.jpg)
5. Prevent Errors
• Guide towards correct actions• Gray out inappropriate actions• Selection rather than freestyle typing• Automatic completion• Input validation
• Error prevention lessens the need for error messages, which are often poorly worded
• Make error messages specific, positive in tone, and constructive
![Page 20: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/20.jpg)
Proper Choices
• Google Docs Context menu
???
![Page 21: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/21.jpg)
Unhelpful Error Dialogs
Geekspeak
![Page 22: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/22.jpg)
6. Provide Reversal of Actions
• Give the user some level of safety net• Undo• Easy “back to last screen”• Restore defaults
• Reduces anxiety, encourages experimentation• Mechanism for reversal is almost always better
than a confirmation dialog
![Page 23: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/23.jpg)
7. Support Internal Locus of Control
• The user believes his/her actions completely control the application’s behavior• The user is confident that certain actions will always
provide certain results• Providing flexibility for a user
• Customization, personalization
![Page 24: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/24.jpg)
8. Reduce Short Term Memory Load
• Don’t make the user have to remember things between steps / screens
• Short term and working memory are highly volatile • Disruptions cause loss of memory
• Task switching, multi-tasking
• The average person can only remember seven plus or minus two chunks of information at a time
![Page 25: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/25.jpg)
Reduce Short Term Memory LoadFrom ICS’s project.net:•Current task is picking a color, but provides context of already used choices.
![Page 26: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/26.jpg)
For More InformationVisit the ICS UXD Team web pages for more discussion
•http://www.ics.com/uxd •http://www.ics.com/blog/category/ux
![Page 27: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/27.jpg)
What’s a Good Book on Design?• The Design of Everyday
Things, Donald Norman, 1988
![Page 28: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/28.jpg)
To Recap
• The User Experience can be a competitive advantage
• UX Design uses a different skill set than software engineering
• Remember and apply• Know thy user• Be consistent• Make errors as impossible as possible• Design first, code later
![Page 29: Introduction to User Experience Design for Engineers](https://reader036.vdocuments.net/reader036/viewer/2022081513/58a46a9d1a28abb8288b6bcb/html5/thumbnails/29.jpg)
Thanks For Attending