Integrated Computer Solutions€¦ · Skills of a UX Designer • Some of the skills of a UX person...

www.ics.com

Integrated Computer SolutionsUnleashing the Power of Modern Devices

User Experience Design for Engineers

Presented By

• Jeff LeBlanc

• User Experience Team Lead @ ICS

• Software developer for 20+ years

• Certified Qt trainer since 2003

• Adjunct faculty at WPI teaching HCI

• Contact me: jeffl@ics.com

About ICS

• ICS is the largest Qt professional services firm in

North America.

• ICS provides embedded, mobile, and desktop

consulting services for Qt, multi-touch applications

and GUI application development.

• As a Qt-Certified Training Partner, ICS has trained

thousands of Qt developers.

• Visit www.ics.com for more info and free training

videos.

Agenda

• Why and what of UX

• Best Practices

• Guidelines during development

Why Do You Care?

• 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)

Why Do You Care?

• A mobile app needs to capture the user’s

attention very quickly

• 30 to 120 seconds or they move on

• The user experience is what

• makes someone keep using the app

• makes someone recommend it to others

Focusing on UX

• Increase customer satisfaction

• Increase successful product evaluations

• Reduce training costs

• Reduce support costs

• McAfee reduced support 90% by focusing on UX (2005)

User Experience vs User Interface

• All software has an interface 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

For Your Consideration

• You have reservations at a high end

restaurant for a special occasion

• Everything looks good, but...

On the Other Hand

• You’re traveling and you stumble on this

place…

The Whole Picture

• The User Experience isn’t just the UI

• UX also includes things like

• Downloading and installing

• Licensing and support

• Integration with the OS and other apps

• The UX considers business goals as well

as the end user (customer)

Why Can't Engineers just do the UX?

• Software engineers think like engineers, not like end users• Different mental models

• Different skill sets

• 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

“What’s a good book on design?”

• The Design of Everyday Things, Donald Norman

• If the user is confused, it’s the designer’s fault

What Goes into UX

• A continuous, iterative process of

understanding target users and refining

the product design

• Understanding the goals of all the target

stakeholders

• Usability goal

• Business goals

Skills of a UX Designer

• Some of the skills of a UX person include

• Sketching designs at different levels of fidelity

• Interviewing and understanding the target

users and stakeholders

• Conducting user testing sessions

• Defining an Information Architecture

• Analyzing usability metrics

• Yes, usability is quantifiable

UX Design as an Engineer

• Things to keep in mind if you’re doing the

design and the implementation

• Find a graphic designer

• Follow common UX Best Practices

• Keep in mind UI guidelines

• As easy to implement the UI “right” as it is “wrong”

Best Practices

• Tried and true methods that have proven

to be successful

• Tend to evolve as people and technology changes

UX Best Practices

• Following UX Best Practices can help us

avoid some common problems

• Forgetting YOU are not the target user

• Not enough adherence to UX design specs

• Rigidity during implementation

UX Best Practices

• User Stories

• User Testing

• Iteration

User Stories

• Simple, one-line descriptions of a feature

from the user’s perspective

• Fits nicely into an Agile development

• Examples

• As a user I want to be able to mark and

unmark a contact as a favorite

• As a user I want to be able to email a contact from the individual contact screen

User Testing

• Put your designs in front of target users

before you start coding

• Or at least non-engineers and prototype code

• Testing can be done at varying levels of

fidelity and formality

• Consider Paper Prototypes

Paper Prototyping

• Representation of a user interface using office supplies

• Can vary in aesthetic fidelity

• Can be used to represent• Software

• Hardware

• Web sites

• Mobile Devices

Iteration

• Take the results of testing and change

your design

• Re-design, re-test, iterate

• Don’t consider a feature “done” until tested

• Be open to iteration

• Don’t ship the wrong product

UI Design Guidelines

• 8 Golden Rules for Interface Design

Ben Schneiderman – U. Maryland

1. Strive for consistency

2. Cater to universal usability

3. Offer informative feedback

4. Design dialogs to yield closure

5. Prevent errors

6. Permit easy reversal of actions

7. Support internal locus of control

8. Reduce short term memory load

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…

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

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

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

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

Unhelpful Error Dialogs

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

Support Internal Locus of Control

• The user believes his/her actions

completely control the application’s

behavior

• The user believes certain actions will always provide certain results

• Providing flexibility for a user

• Customization, personalization

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

Useful Web Sites

• Just a handful of the many UI / UX places on the web

• http://www.ics.com/services/user_experience

• http://www.developer.nokia.com/design

• http://www.nngroup.com

• http://portal.acm.org

• http://www.youtube.com – search for paper

prototypes

Some Useful Books

• GUI Bloopers, Jeff Johnson, 2000, Academic Press

• Designing the User Interface, Ben Schneiderman (4th

edition), 2005

• Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces” Caroline Snyder

• About Face 3.0, Cooper, Cronin, Reimann, 2003

• The Design of Everyday Things, Donald Norman, 1988

• Designing the Mobile User Experience, Ballard, 2007

• The Human Factor, Kim Vicente, 2006

Summary

• The User Experience can be a competitive advantage

• UX Design makes use of 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

Thanks For Attending

Any questions?