Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

102
ria mojo 360|Flex Indianapolis Francisco Inchauste Making your Flex application standout with a great UX.

description

The interface is the product. Make it great. Creating a differentiating experience and effectively positioning your RIA in the market is key to success. We'll look at why it's important to invest in the experience in this tough economy, explore UX methodologies, and touch on real world examples.

Transcript of Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Page 1: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

riamojo 360|Flex Indianapolis

Francisco Inchauste

Making your Flex application standout with a great UX.

Page 2: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Boring old Me

‣ UX Specialist at Universal Mind

‣ SpatialKey Team

‣ Agency background

‣ Obsessed with design and typography

‣ I fight ugliness and the unusable

Page 3: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Here’s the plan

‣ Emotion and UX

‣ Basic XD Principles

‣ Overview of UX Process

‣ SpatialKey Case Study

Page 4: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

UX = XD(User Experience) (Experience Design)

Page 5: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

What is XD?

‣ Another buzzword

‣ Sum of a series of interactions

‣ All interactions are subjective (best practices)

‣ Emotion and cognition

‣ Understanding the user and their world

Page 6: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

This is not XD

Page 7: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

“skin the app”

Page 8: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

“beauty is only skin deep”

Page 9: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

XD is much deeper than just “eye candy.”

There are theories, laws, and best practices.

Page 10: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

The interface is the product.

Page 11: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

So why are most experiences so

confusing, rude, and ugly?

Page 12: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Technology in our lives is swiftly adding complexity

to our products, services, and environments.

Page 13: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 14: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 15: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

This is where the need for UX has grown.

There’s a problem though.

Page 16: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Haven’t you heard?There’s a recession.

Page 17: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

There’s a UX recession.

Page 18: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Challenges in the UX recession

‣ Scarce resources ($)

‣ Rush to market

‣ UX isn’t understood

‣ Vague = No value

‣ Always an afterthought

‣ Bad experiences

Page 19: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Crappy UX vs. Good UX* Source: Me

Page 20: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Let’s discuss the why of UX.

Page 21: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

1.Emotion

Page 22: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Visceral

Behavioral

Reflective

The Three Levels of Processing

Page 23: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Appearance and Aesthetics

Ease of Use and Effectiveness

Self-image, Satisfaction, and Memory

The Three Levels of Processing

Page 24: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

We are wired to like certain things.

Page 25: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 26: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 27: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 28: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

We are wired to dislike certain things.

Page 29: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 30: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 31: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Attractive things work better.

Page 32: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Researchers in Japan setup two ATMs. The only difference was that one machine’s buttons and screens were arranged more attractively than the other. Researchers found the attractive machines were perceived to be easier to use.

Page 33: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Attractive things make people feel good. When you are happy your mind relaxes and is more open to creative thinking to solve problems encountered. If you are anxious you to tend to narrow your thought process.

Page 34: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

People payto be scared

Page 35: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 36: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 37: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 38: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

“Do any of these package-design people actually shop for orange juice? Because I do, and the new cartons stink.”

Tropicana Customer

Page 39: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

2.Principles

Page 40: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Divine ProportionAlso known as The Rule of Thirds. The ratio of the greater side over the smaller side equals 1.618 (Phi)—the number

known mathematically as "gold" or "golden."

UX principle

Page 41: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 42: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 43: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 44: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

The Divine Proportion is evident everywhere in our known universe. Using it can actually help improve the aesthetics and communication of the experience.

Page 45: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 46: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Perceived AffordanceUser perceives that some action is possible.

UX theory

Page 47: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Which one is clearly a button?

Page 48: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Fitt’s LawThe time to acquire a target is a function of

the distance to and size of the target.

UX law

Page 49: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 50: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 51: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

1

4

2

3

5

Page 52: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Gestalt LawsThe whole is different than the sum of its parts. Set of principles to explain perceptual organization, or how

smaller objects are grouped to form larger ones.

UX law

Page 53: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

law of proximity

Page 54: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 55: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

law of similarity

Page 56: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

law of closure

Page 57: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 58: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

law of continuity

Page 59: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

law of simplicity

Page 60: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

“Simplicity is about subtracting the obvious, and adding the meaningful.”

John Maeda

Page 61: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

80/20 Rule. Your application should meet the needs of at least 80 percent of your users. This type of design typically favors simpler, more elegant approaches to problems. If you try to design for the 20 percent of your target audience who are power users, your design may not be usable by the other 80 percent of users.

Apple Human Interface Guidelines

Page 62: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

3.Process

Page 63: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Function. Based on user’s goals.

Page 64: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

ShipCode

Initiate ShipCode

QA DesignInitiate Code Ship

Look & Feel

Page 65: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

QADesignInitiate Code Ship

Users Users

Page 66: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Who is the user?

Page 67: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

UI should be based on user mental models.

ImplementationModel

MentalModel

Reflects Technology Reflects User’s Vision

Represented Models (Worse to Better)

Page 68: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Enhancement or Innovation

Page 69: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Quantitative Research. Market segmentation and research that is useful for selling.

Qualitative Research. How people actually use products. Especially those with complex behaviors.

Page 70: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Goals. Not features or tasks.

Page 71: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Goal-Directed Design Process

‣ Research

‣ Personas and goals

‣ Requirements

‣ Framework

‣ Refinement

‣ Support

Page 72: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 73: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

What the Flip Can’t Do

‣ Screen is tiny (1.5 inches). No swing out for self-portraits.

‣ There are no tapes or discs. Must offload to a computer when the memory is full (30 to 60 minutes).

‣ There are no menus, no settings, no video light, no optical viewfinder, no special effects.

‣ No optical zoom — only a 2X digital zoom that blows up and degrades the picture.

Page 74: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

“Somebody at Pure Digital must have sat through countless meetings, steadfastly refusing to cede any ground to the forces of feature creep”

David Pogue - NY Times

Page 75: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Flip took 20% of the market share.

Page 76: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Great UX took 20% of the market share.

Page 77: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

What the Flip Can Do

‣ Capture video. Review. Keep or/ Delete.

‣ Everything is self-contained: Software to edit/upload. USB plug. Videos formatted for YouTube to share.

Page 78: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Extra features sometimes take away from the

experience and actually remove value. In some

cases, doing more actually means less to a user.

Page 79: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 80: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

I won’t show you Sony’s Handycam guide

since it’s 40 pages.

Page 81: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Featuritus

‣ Larger and slower

‣ More complex

‣ Not refining existing features

‣ Risk affecting existing features

‣ Increase the time required to validate

Page 82: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

4.SpatialKey

Page 83: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 84: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Officer Jim Smith

Page 85: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 86: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 87: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

After discovery and research extrude the goals.

Page 88: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

What are the average response times for high priority calls (A-priority and B-priority)? Users: Watch Commander, Patrol Commander and Command Staff Why it’s important: Life-threatening and potential harm to life situations are even more critical in response time and a small time/staffing improvement could mean a larger improvement for crime levels. Data: Dispatch information (Response time/High Call Freq Loc/Number of Units/Call Location) Other questions: Where are the highest volume of calls located? What are the top types of incidents? What is the average time on these calls? When are these calls? Actions: Appropriate staffing for shifts. Analyze: Measure is in time (min). Dimension would be last days/weeks/months increments. For target, hit closer to set goals.

Page 89: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 90: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Prototype and iterate.

Page 91: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 92: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 93: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 94: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 95: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Explore user workflows.

Page 96: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 97: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Get user feedback.

Page 98: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.
Page 99: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Wrap up

Page 100: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Fighting the UX Recession

‣ Time = Understanding

‣ Educate clients

‣ UX concerns/improvements

‣ Survival of the Fittest

‣ Not an afterthought

‣ Better experiences

Page 101: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

Recommended Reading

Page 102: Francisco Inchauste - RIA Mojo - Making your Flex application standout with a great UX.

muchas graciasTwitter: @iamFinch

Blog: www.getfinch.com