ux != ui design (user experience does not equal user interface)

X!= UI Design

@chrispalle@wisdomandcraft#jstm22 or #jstm

U

Jersey ShoreTech Meetup #22June 20, 2012

Show of hands:Who’s dev?Who’s biz?Who’s design?

A Bit About Me

User Experience Professional with 16 Years Experience Creating Digital Products

Recently went from a “me shop” to “we shop”

(spiel for w+c hiring - “We hire for heart, teach for talent”) We’re looking for all levels, though. Explain why we’re special:

Various capacities/rolesVarious verticals

User Experience:Not Just Another Pretty Interface

❖UX and UI Design - Related; Not the Same

❖Activities UX professionals use to uncover great ideas

❖Considerations when working with UX professionals

(Caveat: this talk is a prototype. Thanks for being my beta testers :-)

UXA Story from the Analog World

We’re all familiar with popular, digital User Interfaces from the computers and phones we use, but to illustrate the key differences and how a UI supports the user experience, we’ll borrow from an Analog experience.

Something Many of us can probably relate to: Making Coffee.

This actually started with a delightful little experience I had with a Trader Joe’s packaging. Decaf is “REALLY” mellow...

So, the Experience begins with me reaching for a tin of coffee on top of the refrigerator.

I then experience this brand touchpoint as I open the container to the get out my grounds.

Big healthy spoonful.

Pouring the coffee into the maker.

Booting up the brew...

I like to pour my milk in first. Doesn’t dirty a spoon and I don’t have to worry about stirring it.

After waiting a while, it’s ready to serve...

UXThat’s not the whole story, though.

My experience with brewing coffee starts before I even get the product home, though. This sets the stage for any number of conditions in which a customer can land on your property.Let’s go to the pre-experience.

On my way to the store, I drive past a friend’s house (shout out to @erova).

Getting into the store is relatively simple. Oddly (maybe), this Trader Joe’s is next to office supply store.

Entering Trader Joe’s is a relatively common experience. Grab a cart or basket, enter into produce.

An unfortunate end-cap....

So, I’m looking for coffee... where is coffee normally?...

By the breakfast foods! Only... not at Trader Joe’s. Continuing to walk...

I find the SAMPLEs in the back of the store. Cool. Not what I’m looking for, but hey, nice to know this is here. Kind of a little surprise, actually. Next to Free samples of coffee is a cheese sampling station (not shown). Nice little way to stamp a pleasant experience: Free Continuing on...

Ah. Just to the right, the staple: Milk. This is in the back which is another common practice. Still no sign of the coffee yet, though...

Ah, here it is! Wow, nice display...

Continuing in typical Trader Joe’s fashion, the packaging AND the display is delightful. “Coffee that energizes you AND your wallet!” brilliant.. plus, the colors match.Grab some whole bean and go...

Oh, nice! Grinders! How convenient- right here as I make my way to the cashier. Well played, Joe.

1. Okay. So, Trader Joe’s is a bit uncommon, but this is where they come back to being common: impulse buys at the checkout...2. Gummy Bears for the kids (it’s okay though because they’re actually Veggies)3. Staying true to the Trader Joe’s Brand, you can get an eco-friendly bag for only a dollar!4. Okay, this where they get really uncommon. Look at the carts... closely... where do they go?

Into the CASHIER! Customers don’t have to worry about managing my cart or bagging, etc. as I deal with my wallet. (that’s not me by the way)I never noticed this about Trader Joe’s until this analysis, but this about the best Checkout Optimization I’ve ever seen. It’s totally subconscious, but it’s little delighters like this make for an overall positive experience.

registers

Samples Milk

fo

od

fo

od

fo

od

fo

od

*not to scale

food

food

food

photo credit: Thomas Vander Wal - Used without permission

Entrance

(Deconstructed Floor Plan Wireframe)Okay. Quiz time. You know how stores notoriously put the common items to the back, to make you walk through the store to see everything else, right?Where do you think the put the coffee?

registers

Samples Milk

fo

od

fo

od

fo

od

fo

od

*not to scale

food

food

photo credit: Thomas Vander Wal - Used without permission

Entrance

It’s in the FRONT ALLLL the way away from the door.Look at the path you have to take. If you don’t know where you’re going, you wander everywhere because coffee is not in its typical spot – by breakfast foods and having the aisles on an angle, invites the shopper to move through the store effective exploring close to a third by the time one finds the coffee.That’s awesome, but what’s totally awesome is that even if you know where coffee is during subsequent visits, think a little more about those aisles. Having the aisles at an angle visually exposes more to shoppers as they walk to the coffee.

Okay. So, back to our story. That was an overall experience. Many touchpoints. Many of which Trader Joe’s has NO control over (that’s an important point to remember) But this is story to show the differences between UX and UI Design.... so, how does this relate to User Interface design? Let’s step back through the experience again.

Opening Can - That’s a User Interface (UI).Pulling out grounds - from the UI.

Opening my coffee maker - UI

Turning on the pot - Obvious UI.

Water filterer - UIPouring in to UI of coffee maker.

Milk carton UI, into mug another UI.

Coffee pot - UI.

And now....

I’m ready to go.

Back to Design in the Digital World

❖Trader Joe’s has no control over the total product experience

❖Different browsers and multi-channel experiences

❖My experience is my own, nobody can “design it”

❖Need to consider holistic (pre, during, post) experience

You can’t control what people experience before they get to your site or use your products, but this impacts the perception of your products and services.

Friends’ names on images

An error before I finish?

Just a couple samples I found when I was putting this story together.See how Google is leveraging data to think holistically? It prioritized photos from my friends (and these were on Flickr!)

UXActivities: Strategies and Methods

Okay. Since most everyone here knows what a User Interface is, what is UX?? Here’s my (quick) take... UX is a practice – an industry. The history of it is very short, but the roots run deep in design. That said, it’s not something that can be designed. I’m designing this presentation, but your experience is very different than another person’s.UX is strategic. It is art/design and science. UX is Extremely Multi-Disciplinary. We all “do” UX in someway or another. We just have to unpack what you know, look at it together, and put it back together so you can see how your creative practice fits in the UX umbrella.

Goals of UX

Easy-to-Use(intuitive)

Memorable

Useful(valuable)

Desirable

Let’s start with goals. What are we trying to ultimately accomplish with our designs?

Human wants & needs

Institutional rules & objectives Technical

feasibility

Problems

Tensions in the Environment•People expect more performance from that

which they consume (often times for a lower price)

•Technology is challenged to meet performance demands and pull on resources (or don’t perform)

•Institutions want to change and improve processes, optimize technologies, and reduce costs & increase revenue - all of which pull on people

Truly, where tensions exist, problems arise. So, a consistent, comprehensive, measurable approach is needed to find balance.

OKAY. Intro to the Environment Venn: Business, Technology, & Humans

Now, I know famous industrial design firm IDEO has something very similar, but I have a little different take on it.

We saw how pervasive technology had become so pervasive into Human life, this model helps us identify where to start looking for solutions.

Human wants & needs

Institutional rules & objectives Technical

feasibility

Tensions in the Environment•People expect more performance from that

which they consume (often times for a lower price)

•Technology is challenged to meet performance demands and pull on resources (or don’t perform)

•Institutions want to change and improve processes, optimize technologies, and reduce costs & increase revenue - all of which pull on people

Truly, where tensions exist, problems arise. So, a consistent, comprehensive, measurable approach is needed to find balance.

This is where we

frame the problem

to uncover paths

that lead us to

solutions

OKAY. Intro to the Environment Venn: Business, Technology, & Humans

Now, I know famous industrial design firm IDEO has something very similar, but I have a little different take on it.

We saw how pervasive technology had become so pervasive into Human life, this model helps us identify where to start looking for solutions.

Continuously Improving the UX

This is an illustration that I started working on about 3 years ago. Most designers have a similar process. Wisdom + Craft uses the infinite loop metaphor to demonstrate continuous improvement.Start with the Customer; make a hypothesis. Then go through all the steps. Sometimes these steps are 2 weeks, sometimes 2 hours, but they have be executed every time.Ideating and Prototyping includes all Discovery Activities (hence all the colors)The notion of “Sprints” is for Agile. Discovery is always working on what will be implemented 2 sprints out as we see....

UX + Agile

Discovery, Design, & Scoping

Sprint 0Release Planning

Sprint 1 Sprint 2 Sprint 3

Developer Track

UX Design Track

UX Discovery Track

ImplementHigh Dev Cost &

Low UI Costfeatures

Design for Sprint 2

ImplementSprint 1Designs

ImplementSprint 2 Designs

Design for Sprint 3

Design for Sprint 4

Engineering & Implementation

User Research & Planning

Ideation & Speci!cation

Research for Sprint 3 Release

Validate Sprint 1 Releaseas Research for

Sprint 4

Validate Sprint 2 Releaseas Research for

Sprint 5

CollaborationWith thorough collaboration between business, marketing, design, and engineering teams, we ensure production success.

Adapted from D. Sy & L.Miller - Autodesk

So, we must still coordinate all of these activities, but it needs to be threaded into the release cycles. Note: this works better as animation, but the important point is that Discovery is always working on uncovering insights that will be (theoretically) released 2 Sprints out.

UXDiscovery

So, what do “Discovery Activities” look like? Here is a small sampling...

Modes of Research❖ Formative❖ Incremental, smaller studies to

help guide development and design

❖ E.g. Prototyping, market testing, user acceptance

❖ Summative❖ Post-release, generally needs larger

amount of data

❖ E.g. Establishing baselines, ensuring broader, market acceptance

❖ Exploratory❖ After data is gathered,

intended to find interpretation

❖ Generative❖ Creating models that inform

Simplifying modalities of research..

•Reviewing Analytics

•Stakeholder Interviews

•Contextual Inquiry

•Moderated Usability Testing

•Task Analysis

•Surveys

•Ethnographic Field Studies

•Split Testing

Only examples and not intended to be comprehensive. There are many more in practice.

“Lead with the Listen”

Chant this: “Lead with the Listen, Lead with the Listen, Lead with the Listen” Don’t ever forget it.

Review Analytics & KPIs

Listening & Observing

Get the KPIs. Ask for them. If there are no KPIs set, that’s a point of observation and should be including when drafting your problem articulation.

Listening & ObservingModerated Usability Testing

Ethnographic Field Studies

Here are some examples of Contextual Inquiry activities, Typically, we’re just gathering data. For ethnography, We’ll develop a guide that helps us stay focused.

In usability Testing, we’re usually looking for significantly problematic issues. If the test moderated, this usually involves giving instructions and asking questions. Biases can be introduced. So, moderators need to be skilled in soft-skills to keep the participant as close to the real-world as possible.

What are we observing? This could be processes that are taking too many steps, too long, or unable to complete. There’s usually a blend of quantitative and qualitatives measures.

We may make note of things like, time on task, or errors and contemplate that against our KPIs.

•Rapid Assessments

•Heuristic Evaluations

•Landscape Analysis

•Design Studios

•Affinity Mapping

•Participatory Design

•Card-Sorting

•Content Inventory/Audit

•Whiteboarding

•Empathy Mapping

Only examples and not intended to be comprehensive. There are many more in practice.

Fun with Data!

Let’s have fun with data!

Exploring & Interpreting

Notes:Various workshop activities, Affinity Mapping on the RightParticipatory Design Workshop (Design Studio) on the left.Use cards and Empathy map for generative research. (foreshadowing to our assignment this week)This bottom photo is at message first, in which we were getting ready to have a massive exploratory session... you might be able to see the paper on the side walls as well. Using long stretches of butcher paper like this is good because we can roll it up take it to a client, or if we’re at a client’s place, we can roll it up and bring it back to our workshop/studio.

Exploring & Interpreting

Card Sort

Card SortThis is from a navigation and content audit of about 15 similar Web properties that had some overlap. Client wanted to homogenize all properties and eliminate special considerations of brand particulars. Note, that sounds sophisticated, but it was a bad idea. Users rejected it.

•Problem Articulation

•(Re)Vision Casting

•Experience Principles

•Scenarios & Narratives

•User Journeys

•Personae

•Concept + Logic Models

•Thematic Lenses

•Visualizations

•Validation

Only examples and not intended to be comprehensive. There are many more in practice.

After exploration and interpretation, two things need to happen: we need to create models or illustrations that inform business and we need to validate. If we validate that there is in fact a problem we need to

Modeling & Informing

Concept Visualization

Thematic Lens

Notes:

Modeling & Informing

Current-State Future-State

Vision Casting

Modeling & Informing

Only examples and not intended to be comprehensive. There are many more in practice.

Scenarios & NarrativesPersonae

Personae and Narratives

Modeling & Informing

Personas, Narratives, User Journeys

UXDesign

You should not be past 24 mins.

So, what does the practice look like?

Design for User Experience❖Lead with Vision❖ What does success look

like?

❖ What are the business goals?

❖Moving Forward❖ We know who our users are.❖ What outside resources do

we need?❖ What are our competitors

doing?

❖Design from Information❖ Personas

❖ Concept Models

❖ Voice of the Customer

•Sketching & Iterating

•Participatory Design Sessions

•Design Critiquing

•High-Level Wires

•Low-Fidelity or Paper Prototypes

•High-Level User Flows

•Hallway User Testing

•Draft Site Maps

•Content Drafting

Only examples and not intended to be comprehensive. There are many more in practice.

The point of this stage is to get prototypes out quicklyIterating is important (include in visual)

Progression of Ideas

❖Ideation❖All ideas are welcome

❖ Ideas are not final, but a start

❖Prototyping❖Combine similar ideas

❖Decide on ideas to move forward with

Presentation Notes:Both of these need to happen in this stage of the UX Design ProcessWithout ideas, no starting pointWithout prototyping, no forward movement

Ideation/Prototyping Principles❖Fail quickly, recover (learn)

quickly

❖Don’t make final decisions too early

❖Explore multiple ideas, none too much

❖Perfect is the enemy of good

❖GET OUTSIDE

UI Sketching

Sketching.....

Ideation/Prototyping Principles

More sketching and paper prototyping. The one with the grid overtop

iPhone mock-up templates. Used in a workshop with everyone sketching their ideas on how the UI should work.

http://Konigi.com

iPhone mock-up templates. Used in a workshop with everyone sketching their ideas on how the UI should work.

High-Level Wireframes. No details, no annotations. Best used as talking point in a series.

Ideation/Prototyping Principles

HTML HIGH-FIDELITY Prototypes built in Axure.

•Storytelling in the Context of Business Scenarios

•Presentations

•Stakeholder Reviews

•Putting Ideas Forward

•Product Roadmaps

•Concept Documents

Only examples and not intended to be comprehensive. There are many more in practice.

Concepts don’t have to look good, just need to tell a good storyFew artifacts, more dialogueBusiness context - scenarios

Telling the Story

❖Proposing❖Making suggestions❖Clients, investors, teammates

❖Prioritizing❖Levels of importance❖Alignment with business goals

Both steps are requiredPresenting potential solutions to articulated problemsDecide what solutions to pursue first based on relative impact of the problems they solveProposing > ImposingPropose, don’t demandPrioritize each step

•Feature Set Details

•User Stories (Agile)

•Functional Specifications (Waterfall)

•High-Fidelity Wires (+Annotations)

•Final Copywriting

•Detailed Site Maps and User Flows

•Branding Detail

Only examples and not intended to be comprehensive. There are many more in practice.

Building the RoadmapSpecify❖What resources are needed?❖How it will be built? Which

technologies?❖Timelines❖Articulating functional specs or

User Stories

Detail❖ Fine-tune visuals and verbiage❖ Steps in User Flows❖ User interface annotations

Put together a Plan to get there!In this stage, we decide on detail action steps and resources on how to create our product. It’s not usually a single document, but rather a collection of documents.

Building the Roadmap

HEre are some User Flows. detailing the steps in an intended user experience.

Detailed Wireframe

Detailed Wireframe

Detailed Design

•Development Teams

•Collaborative Working

•User Acceptance Testing

•Performance Management

Only examples and not intended to be comprehensive. There are many more in practice.

In this stage, we actually build the productWork with developersHelp users get comfortable with changes

•Listening Process

•Feedback Loops

•Analytics & Metrics

•Continuous Improvement

Only examples and not intended to be comprehensive. There are many more in practice.

In this stage, we release the product and monitor successUse analytics to measure resultsAnalyze results to inform future improvements

UXConsiderations when Working with Professionals

You should be at about half-hour mark

You want to think about what you really need.

The Interface

Service Design

Communications

Information Architecture

Branding & Aesthetics

Engineering

Cognitive & Social Sciences

User Research

Usability Testing

Business Analysis

Analytics & Statistics

Strategy, Operations, & Management

Disciplines of User Experience

Discovery Design

These while we’re thinking about the different disciplines.

Main Take-Aways❖User Interface Design is only one aspect of UX

❖“Experience” is owned by the user; cannot be “designed”

❖The process is ultimately about framing problems and uncovering solutions

❖We’re all “User Experience” practitioners when we uncover who our audience is and craft something for them.

UXThanks!@chrispalle

chris.palle@wisdomandcraft.com

UXRUA or Q&A?

UXCurrent Trends in the Field

Current Trends & Future InnovationsThe Interface❖Ubiquitous Computing

(ubicomp)

❖Pervasive Technology - many digital touch points

❖Mobile Phones, Tablets, Ebook Readers

❖Augmented Reality

❖Context-Aware Computing

Current Trends & Future InnovationsThe Interface❖Gestural Input

❖Touch - Tactile, Haptic Feedback

❖Wii, XBox Kinect

❖Search (Findability)- Yes, this is still trendy

❖Education Technology

❖Affective Computing

Current Trends & Future InnovationsUser Research❖ Context is Everything

❖ Gender HCI

❖ Social & Cultural Implications

❖ Research Tools

❖ Remote Usability Testing

Understanding the users’ contexts and their motivations, attitudes, preferences to propose new ideasGender HCI - focuses on the differences of how men and women interface technology

Current Trends & Future InnovationsHyper-connectivity❖Network Science

❖Semantic Web

❖The Web of Data

❖Natural Language Processing

❖The Web of Things

❖Social Business

Machines are able to act more intelligently and contextually as everything becomes connected,your car, your alarm clock, your refridgerator.Machines are able to record and interpret information in more natural way.Going back to Ubicomp

Social businesses leveraging social technology to operate. Think of this as Facebook behind the firewall.

Current Trends & Future InnovationsCommunications

❖ Information Visualization

❖Content Strategy

❖Branding Strategy

❖Social Media

As mentioned throughout this presentation, COMMUNICATION plays a huge role in the user experience.Talk about: Feedback Loops.Governance of our communications is considering the end-user experience

Current Trends & Future InnovationsBusiness Empathy ❖ Management and Leadership in

UX

❖ Defining Return on Design Investment

❖ Cross-Channel Design and Management

❖ Improvements in Process

❖ Agile, Lean (“borrowed” from Manufacturing) Rapid Prototyping

❖ End-User Development

This is important because as UX becomes a strategic play for organizations, UX needs to grow up.In fact, and we’ll get into this in the later modules, user-centered design is no longer enough and it’s naïve to forget about the organizations and people who have to implement designs.Again, thinking about ubicomp, we need a way to manage all those channelsWe’re also seeing trends in improving our process, which we’re going to look next .but we’re identifying ways to iterate our design thinking more rapidly, by releasing smaller productions and involving the end-user, or co-creating, with our audiences.

UXThanks!

AssignmentLook at the list of disciplines and current trends and write an essay on the topic that’s most interesting to you.

The Five FivesIn the course material, You’ll find the Five Fives. These are five People; Books; Blogs: Posts, Articles or Presentations, and Conferences