User Experience

2014 Industry Implementation Trends

UX Guy - Mark Swaine

Web: www.uxguy.com
Twitter: @UX_UI_Guy
Behance: www.behance.net/markswaine
What is (UX) User Experience?

User experience is the net sum of every interaction

a person has with an organization, be it marketing material, a
customer service call, or the product or service itself. A users
impressions are shaped by an organizations beliefs and
practices as much as by the purpose and the value its products
hold in his or her life.
Robert Hoekman Jnr
State of Industry
Client Education & Acceptance (is Key)
Speed of Industry Emphasis on User

Internet of Things Brand Context

Unlimited Options Time

Apocalypse Ongoing Work /

Maintenance
Client Education & Acceptance (is Key)
Needs to be acceptance of time and budget

Industry is moving too fast for clients to maintain best practice knowledge

New work produced will constantly need maintenance, ownership, updates,

new features and technical support.

Clients need to be much more tentative to industry pace and their brand
context.

Clients need to be accepting of pace of industry and technological change for

implementation of their brand.
Client Education & Acceptance (is Key)
Clients need to be more understanding of labor intensive industry (man
hours, time, cost, constant technical issues, discovery, maintenance, testing,
iteration, code updates, mobile agnostics etc.) it is ongoing and always will
be.

If a client asks to come down in price on small or large projects walk away
(client has no respect or understanding for the industry, your time, hard work,
technical time consuming issues and expertise required)
UX Implementation Trends
Lean Agile - Iteration

Create a prototype, then use it as a user would.

Youll see whats missing. Youll see whats wrong.
Repeat.

Robert Hoekman Jnr

Deliverables, Requirements, Assumptions, Hypothesis
The client may have set
deliverables, requirements and
outcomes to work from

You may need to start with

assumptions about the product /
project (what you believe to be
true)

Lean Approach - create & validate

Hypothesis - including,
experimental assumptions,
outcomes, personas and product
features.

Test and learn what creates

Value
Participatory Sketching
Opportunity to collaborate with
key project stakeholders

Explore, Create & Invent

Identify, create and prove key use

cases

Identify Pain Points

Help Build the Brief with Client

Research & Analysis

Rapid Prototyping
Low Fidelity Prototypes Paper /
Sort Cards

Create Rapid Interactive

Wireframe Prototypes

Iterate and develop in Lean Agile

Mode

Receive and monitor real time

feedback from key user
demographics
Discovery
We dont know in any meaningful way whether a
product feature is effective until it is in the
marketplace.

Engage the customer during the ux, design and

development process.

Find out what the users are doing with your

product and why?

The most difficult answers about your product

will be answered by customers in the
marketplace.
 Identifying Contextual Differentiators
Smartphone Tablet Desktop

Action / Task Key User Tasks Key User Tasks

Oriented Agnostic Paradigms Context of Content
Agnostic Paradigms Context of Content Calls to Action
Context of Content Tablet = Browsing / Content Scale and Stack
Simplified Couch Commerce
Navigation Site speed, CSS, Retina
What the user Images and Resolutions
wants.
Kill Documentation (time waste)
Time wasting on documentation creation

Prototype instead more beneficial

Learn more by prototyping the user experience

Test & Iterate Quickly

You can Achieve a big vision but in small increments.

It requires a commitment to iteration

Eric Ries
The User
What is (UX) User Experience Design?

User experience design as a discipline is concerned with all

the elements that together make up that interface, including
layout, visual design, text, brand, sound and interaction. It
works to coordinate these elements to allow for the best
possible interaction by users.
Don Norman
(UX) Key Questions
Why is the product being made?

Who is it being made for?

What are the stakeholders goals for the

project?

How do the requirements fit within the

wider business objectives of the
organization?

Who are the competitors?

How is success going to be measured?

Know Thy User
Users can be, Experienced, Expert, Novice
or Power Users

The more fluid and responsive the experience is

the more emotionally, invested users will become

Ask only for limited input from users

Users are not stupid

Create emotional connections

Users want novelty

Know Thy User
Build healthy long-term relationships with users

Users will ask why doesn't my brand / site / app

know me?

Build users trust incrementally and look for soft

commitments along the way

Reduce input forms, user fatigue

Hide technology from the user

Simplicity
Make it feel snappier always go back to engineering

Reduce chances for users to make mistakes

Stop making people passengers and more partners of the user experience

Stop commanding users what to do

Reduce everything thoughtfully

Tell a Story - User Research
Contextual research Competitor Analysis

In-depth interviews Visual Style

Social analytics Focus Groups

Online interviews Talk to Existing Users

Analytics / tracking On Location

Street interviews Third Party Studies

Usability Review Use Eye Tracking Labs

Create Personas
User Background:
Age range, native language, physical and or
cognitive limitations

Experience:
How familiar are your users with similar
systems? Will they need to learn?

Behavior:
What motivates users. Do they share any
behavioral traits?

Desires and Concerns:

What do they want to achieve, what
concerns do they have?
Focus on Outcomes Not Deliverables
Real people use your products and services, real people with different wants,
needs, abilities, environments and a million other possible variables that need
to be factored in

Businesses cannot treat their customers as passive consumers any longer,

every company is in the user experience business

If you take the time to understand how people think, then design solutions
around their true needs and behavior your design will be far more likely to
perform better with them.

http://alistapart.com/column/explaining-water-to-fish
Remember

Users will never forget how you made them feel

Maya Angelou
Design
Design

Design without constraints is decoration.

Robert Hoekman Jnr

Design Trends Flat UI Design
No drop shadows, bevels, gradients and no depth

Every element is clean, crisp including buttons

and navigation menus Color of the Year in Web

Flat interfaces are easy for users to understand

and interact with

Use simple interface elements such as icons

Simple, easy to click and tap

Pantone Emerald 17-5641
Simple shapes rectangle and circles

Use of bold simple Colors

Design Trends Flat Design Color Palette

flatuicolors.com
Typography Considerations
Look and Feel of type used should suit the overall tone and message

Use simple font pairings

Flat design uses no more than two font pairings (novelty font for headings)

Use sharp, crisp, bold clear typefaces

San Serif Typefaces are typically used in flat design

Flat design focuses on simplicity so should your text (content)

Reduce use of drop shadows, gradients strong color contrast, (black & white)

Give type / paragraphs plenty of room to breathe lots of white space

Good starting place Google Fonts: http://www.google.com/fonts

Flat UI Design

Flat UI Design Trends

Flat UI Design

Flat UI Design Trends

Flat UI Website Design
Square:

http://www.square.com
Flat UI Website Design
United Pixel Workers:

http://www.unitedpixelworkers.com/
Flat UI Website Design
Get Cellar App:

http://www.getcellarapp.com/
Mobile First
Mobile First (Project Depending)
No longer an afterthought

Prepares brand thinking for the explosive growth

in mobile apocalypse

Forces brand focus and prioritization under

mobile constraints

Allows for new and innovative brand experiences

built on capabilities and paradigms of devices

Start with presumptions of connectivity, context

interaction, and location
Mobile First (Project Depending)

The simple guideline is whatever you are doing do Mobile First

Eric Schmidt, http://bkaprt.com/mf/1

Were just now starting to get into Mobile first. What we are finding is that the
designers on mobile are really embracing the constraints and that it is actually
teaching us a lot about how to design back to the desktop
Kate Aronowitz, Facebook Director of Design, http://bkaprt.com/mf/2
Responsive Design (RWD)
Responsive Design
Is responsive design needed?

Still in its infancy

Content Dictates

It is Future Friendly

More Time = More Cost

Can be content Managed Across All Devices

Use Best Practice in HTML5 & CSS3 Media Queries

Many frameworks, templates and solutions

Responsive Design
Not always applicable to use learn and know your
context, content and mobile considerations first.

Be conscious of user connectivity capabilities when

using heavy content, retina images, video.

Test, iterate and test again - take into account of site

speed load times in low connectivity

Be concisions of agnostic paradigms for different

hardware and OSs.
Responsive Design (Sample 1)

boldandnoble.com
Responsive Design (Sample 1)

boldandnoble.com
Responsive Design (Sample 2)

skinnyties.com
Responsive Design (Sample 2)

skinnyties.com
Responsive Design (Mobile Samples)

thisiszone.com starbucks.com cibc.com

Tool Trends
Tools Worth Looking At
Traditional Desktop Mobile
Paper and Pen Sketch App Pop
Balsamiq App Cooker
Post it Notes
Visio Blueprint
UI Stencils (uistencils.com)
Omnigraffle Interface HD
Axure Adobe Proto
Just in Mind iMockups
SketchyPad
Easel
Livewires
Divshot
Launch
Briefs
Briefscase
Skeleton (HTML Prototyping)
Mind Node
Proto.io
UXPin
App Sketcher (HTML Prototyping)
Adobe Brackets (Coding)
Summary
Summary
We need to figure out what were making before we start production

Collaborate more with Key Stakeholders (The Client)

Work as collaborative product teams daily engagement

Agile workflows - continuous development, continuous deployment, continuous

integration and continuous iteration.

Release early and often receive market feedback

All that matters is the quality of the product, as measured by the markets
reaction to it.
Glossary
Glossary
User Experience Design (UXd)
How the user thinks and feels
Information Architecture (IA)
How the system is organized
User Interface Design (UI)
How the content is organized
Interaction Design (IX)
How the user and device act and react
Responsive Website Design (RWD)
Optimal fluid grid based website
design that will flow and stack on any
screen size / resolution / device.
Adaptive Website Design (AWD)
Web design to scale to predetermined
set of screens and devices.
Customer Experience (CX)
Web design to scale to predetermined
set of screens and devices.
But wait theres more!
But wait... there's more!

Next week Wednesday we'll be hosting the Seasoned Course in the Whole
Connector room.

And if you happen to be in the Detroit area in June, check out the UX
Thursday Detroit we're sponsoring.

Led by UIE's own Jared Spool, UX Thursday is six presentations from local
superstars and keynotes from two leading UX experts. Learn what you can
do to make the world better one iteration at a time.

Visit uxthursday.com for more info

User Experience
2014 Industry Implementation Trends

UX Guy - Mark Swaine

Web: www.uxguy.com
Twitter: @UX_UI_Guy
Behance: www.behance.net/markswaine