User Experience 101 for Developers

User Experience 101 for DevelopersResearch, Ideation and Evaluation

Ross Belmont, Appiphony, Chief Experience Designer@rossbelmont

Safe harborSafe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

What is User Experience?


Let’s start with a visual analogy.


Let’s start with a visual analogy. Because bullets don’t cut it.

Product

User Interface

User Experience

User Experience (UX) Design: My definition

UX design boils down to: understanding what users

need to accomplish adjusting the interface so

that they can get it done in the best possible way





Feasible





Feasible

Desirable





Feasible

Desirable Profitable





Feasible

Desirable Profitable★

User Experience Design is NOT about…

User Experience Design is NOT about…Super fancy graphics (“jazz hands”)

User Experience Design is NOT about…Super fancy graphics (“jazz hands”)

Craig Villamor, Principal Design Architect at Salesforce.com

User Experience Design is NOT about…Super fancy graphics (“jazz hands”) Coffee shop inspiration



Sketching at Bean Around The World by freshbrewed on flickr.com


http://www.flickr.com/photos/freshbrewed/5112192848/


http://www.flickr.com/photos/freshbrewed


http://www.flickr.com





One specific platform










One specific platform✓










One specific platform✓ ✓







Why care about the User Experience?

Good User Experience ⇒ Business Success

Planning the design makes development easier

Cohesive design


Cohesive design

Data layer


Cohesive design

Server side code

Data layer


Cohesive design

Server side code

Data layer

Client side code


Cohesive design

Server side code

Data layer

Client side code

View components


Cohesive design

Server side code

Data layer

Client side code

View components View styling


Cohesive design

Server side code

Data layer

Client side code

View components View styling✓

Planning the design improves estimates

Design completeness

Est

imat

e ac

cura

cy

Want to know how?

Want to know how?

Which Should I choose? by buttersponge on flickr.com



http://www.flickr.com/photos/buttersponge/

http://www.flickr.com/photos/buttersponge/



User Experience Design in Three Easy Steps

ResearchLearn what your users are trying to accomplish.1Ideation Work through different ideas that would meet those goals.2EvaluationTest prototypes with users, and iterate when you find issues.3

The usual approach to discovery Research

On a scale of 1-10, how painful was your last requirements gathering session?

Activity: Story-based interview ResearchThink back to the last time you checked the weather.

Why did you need to know?What did you do next?

post-interview by Bennett 4 Senate on flickr.com

http://www.flickr.com/photos/bennett4senate/186167593/

http://www.flickr.com/photos/bennett4senate/186167593/

http://www.flickr.com/photos/bennett4senate/

http://www.flickr.com/photos/bennett4senate/



Problem: sometimes you can’t “just ask” ResearchUsers don’t absorb everything in their path and can’t recall it.

Driving home one night by Fellowship of the Rich on flickr.com

http://flic.kr/p/5nw3nc

http://flic.kr/p/5nw3nc

http://www.flickr.com/photos/richevenhouse

http://www.flickr.com/photos/richevenhouse



Learning what users actually do Research

Learning what users actually do ResearchRide shotgun with them.

Riding shotgun by mmcnabb3 on flickr.com

http://www.flickr.com/photos/mmcnabb3/3457781068/


http://www.flickr.com/photos/mmcnabb3/






Posted by Benjamin Voss on wordpress.com







http://benjaminvoss.wordpress.com


http://benjaminvoss.wordpress.com/2008/03/20/contextual-inquiries-and-diaries/




Notice the stickies on the monitor.
















Worrying by Jaypeg on flickr.com







http://www.flickr.com/photos/jaypeg/2070974659/


http://www.flickr.com/photos/jaypeg/








Worrying by Jaypeg on flickr.com















Affinity Diagram Research

affinity diagram by Sean Munson on flickr.com

Related notes grouped together

http://www.flickr.com/photos/logicalrealist/324420545/

http://www.flickr.com/photos/logicalrealist/324420545/

http://www.flickr.com/photos/logicalrealist/

http://www.flickr.com/photos/logicalrealist/



Mental Models Research

Mental Model Diagrams by Indi Young and Brad Colbow

http://uxdesign.smashingmagazine.com/2012/04/23/mental-model-diagrams-cartoon/


http://uxdesign.smashingmagazine.com/author/indi-young-and-brad-colbow/?rel=author






User Behaviors









Features that support them

User Behaviors







Real Understanding Research

Requirements: the usual approach Ideation


Requirements-Driven Software Development Must Die by Fred Beecher

http://pocket.co/sQeso


http://www.flickr.com/photos/rosenfeldmedia/




Beta





Requirements are an Input IdeationRun Tabular

ReportExport to

ExcelManipulate

data by handSend to manager


ReportExport to

ExcelManipulate


Run Joined Report


ReportExport to

ExcelManipulate


Run Joined Report

Send to manager

Standard layouts and Visualforce tags Twitter Bootstrap, jQuery UI, etc. UI elements described in Design Pattern Libraries

Pre-built design solutions can help Ideation

Create new design concepts by sketching Ideation

Sketch multiple possibilities on paper before coding.

A few words on sketching Ideation Think you can’t draw? Start with templates and simple shapes. This is not art. You’re not expressing your feelings. Sketches don’t need to be beautiful. Stick to four colors or less: black, red, blue and (eventually) grey.

Plan flows: Interactive Sketching Notation IdeationUse Interactive Sketching Notation to work out

the user’s flow—all the way to their end goal.

Stuck on sketching? Wireframe it. IdeationUse tools like Balsamiq Mockups for low fidelity renderings.

Wireframes can work, but... Ideation Don’t forget to try multiple ideas The focus shifts to individual screens,

not the whole flow They can be time consuming to create

Wireframes can work, but... Ideation Don’t forget to try multiple ideas The focus shifts to individual screens,

not the whole flow They can be time consuming to createUse whatever works!

Got flows? Now build a prototype! Ideation


Print each screen to visualize the flows more easily.


Print each screen to visualize the flows more easily.

Posted by Coleen Baik on Twitter's blog

https://twitter.com/colbay


http://blog.twitter.com/2012/07/overhauling-mobiletwittercom-from.html


The usual approach to evaluation Evaluation

On a scale of 1-10, how painful was your last User Acceptance Testing session?

The concept of UAT is broken Evaluation



Beta





Show prototypes to stakeholders Step through the flow you’ve planned and

show how the user will meet their goals Prepare for change requests, though

most will be cosmetic If changes are non-trivial, ask how it ties

back to the user’s goal Once you build up trust and goodwill, try

walking through your sketch

Get feedback along the way Evaluation






Introduce the prototype to the user. Ask them to click through and try to

accomplish their goal. Don’t be a “talking manual.” Tell them you’re testing the software,

not them. Ask them to “think out loud.” Take notes on what happens. Adjust the UI where necessary

Usability Testing Evaluation


Usability Test by l-i-n-k on flickr.com





http://www.flickr.com/photos/l-i-n-k/3654390818/

http://www.flickr.com/photos/l-i-n-k/3654390818/

http://www.flickr.com/photos/l-i-n-k

http://www.flickr.com/photos/l-i-n-k



Quick story: checking the weather

What if I was going skiing?

What if I was packing for Disneyworld?

Ross Belmont

Chief Experience Designer@rossbelmont

User Experience 101 for Developers

Design

Transcript of User Experience 101 for Developers