2014 Industry Design Implementation Trends

UX Guy - Mark Swaine

Twitter: @UX_UI_GuyBehance: behance.net/markswaineLinkedin: ca.linkedin.com/in/markswaineWeb: www.uxguy.com

Mobile & Web Design

User Experience Design

“No matter how perfect your design, users will find its flaws.

No matter how thorough your plan, users will do what you did

not intend. Expect this.”

Robert Hoekman Jnr

Education

Education, education, education

OS & device fragmentation

Think about screen input ask

User behaviours are constantly in motion

HTML 5 / Responsive frameworks

Site speed, networks and user frustrations

Keep updated on Android, iOS & Windows 8

OS & Device Fragmentation – Many Devices & OS versions in use

Agnostic Paradigms:Different Interface layoutsHardware input paradigmsDesign guidelinesThink about screen resolutions

Battery Life How the app / site performsHeavy image, animation and codeOlder devices have poor battery life

Design Inspiration

Look for inspiration from real world working apps and websites

Try not to reference Behance or Dribble platforms – misleading

Look at sites like, fwa, ui parade, awwwards, themeforest, grid assault, webdesigninspiration, pixelden, siteinspire, mobilepatterns, inspired ui, smashingmagazine, pttrns

More current trends…

Lean UX

“A user’s desire is not to stay on your website, it is to leave

your website. Design for that.”

Robert Hoekman Jnr

Trends for consideration

Flat UI Design will grow

Scrolling - (storytelling)

Micro UX effects – (transitions, rollover effects, nav)

Making the most of one page websites

Bigger imagery and video (desktop)

Storytelling – (most sites disjointed, IA)

Trends for consideration

Reducing user typing / input (forms)

Users will expect mobile to be better than desktop

Users appreciate a little magic (microinteractions)

Use of sound – when completing tasks, comforting for users

Trends for consideration

Kill the carouselEvery website has oneUsers tend to gloss overDon’t understand the interactionMake navigation obviousContent contextual – mostly rubbish

Storytelling the brand experience

http://www.gmc.com/incrediblethinking/

Sound

Wearbales will have major influence on micro interaction patterns in the future - glass, smartwatches, bracelets...

Will drive quicker interactionsand snappier experiences

Potential to become annoyingto users and the public

UX Mobile Gestures

Lean UX

“The less the user must do, the more you both gain.”

Robert Hoekman Jnr

Up to 49% of people use ‘One thumb’ to complete all tasks

36% use two hands (index finger)

15% use two thumbs

Stephen Hoober

Common Gestures – Patterns & Trends

One Thumb Access is important

Think about how to design apps and mobile experiences using one thumb where possible

Rethink your design always for the realities of mobile use

Always consider touch target sizes, spacing and allow for fat fingers

Luke Wroblewski

Common Gestures – Patterns & Trends

Common Gestures – Patterns & Trends

Stop making gestures invisible – make hidden gestures known – (incrementally)

4 most common gesturers used and understood:

Scrolling – (familiar to desktop)

Swipe – (images, menus)

Tap – (not like desktop)

Pinch / Zoom – (People need to zoom in on mobile sites)

Common Gestures – Patterns & Trends

Mobile gestures can sometimes be difficult to remember and hard for users to complete tasks if not guided i.e.

1. Swipe left to delete2. Tap the + button to add an item3. Tap and hold to re-order

Coach marks don’t work – users skip through them – educate them incrementally

Iconography

Icons can can have double meaning

Too many are not used consistently - between sites & apps

Most common understood icons, ‘play’ & ‘close (x)’

Be careful…Use icons that are consistent with other sites and apps

Use contextually

Hamburgers…

Still not understood universally

Some users think it to be part of the design

Sometimes stumbled upon and used accidentally

Can be perceived as dragable, list icon, text row, not always navigation…

A/B Test

Stephen Hoober

Test…

Details are in the Design

Details are in the Design

Can force designers to think more about the details within the ‘look and feel’

Keep them within context of use

Going the extra length with design detail can make you love an app or site

It can create stickiness, delight and some emotional attachment to the site or app

Details are in the Design

Set tone – when opening or closing an app or site

Enrich the experience with subtle animation, transition, sound or functionality that surround the bigger key features of the product

They can be come part of the overall branding and sometimes more the most remembered part of the experience...

WWF Together iPad App

WWF Together iPad App

WWF Together iPad App

Lean UX

Lean UX

“At Neo, we define a vision for the product: what problem

are we trying to solve; how will we define success? We iterate

from initial concepts towards a final state, based on rapid

feedback cycles with our target audience our design aesthetic

and brand values”

Jeff Gothelf

Lean UX

“Lean UX is the practice of bringing the true nature of a

product to light faster, in a collaborative, cross functional way

that reduces the emphasis on thorough documentation while

increasing the focus on building a shared understanding of the

actual product experience being designed.”

Jeff Gothelf

(UX) Key QuestionsWhy 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?

Build quickly, learn quickly…

Generate solutions quickly

Team colloaboration

Build and discover quicker with fast iterations

Find out what is wrong with the intiial product designs as quickly as possible

Adjust the UX MVP’s and test again

Hypothesis Statement

Declare AssumptionsWhat the team believes to be true

HypothesisDescriptions of assumptions of product for expirementation

OutcomesFeedback to validate or invalidate the hypothesis

PersonasModels of the key demographic types FeaturesWhat will drive outcomes (business goals)

Jeff Gothelf

Business Assumptions Worksheet

I believe my customers have a need to...

These needs can be solved with...

My intial customers are...

I will make money by...

My biggest product risk is...

What features are important...

Jeff Gothelf

Lean UX - Book

Lean UX

“The answers to most difficult questions the team will face will

not be answered in a conference room. Instead, they will be

answered by customers in the field.”

Jeff Gothelf

Cross Functional Team

Engineering

Product Management

Interaction Design (Ixd)

Visual Design

Content Strategy

Marketing

QA

Rapid Prototyping

Low fidelity: Paper, sticky jots, wireframes, clickable wireframes

Mid & High fidelity: Test designs with levels of interaction, visuals and content, forms, use of real data - similar to final product.

Simulate and validate the most important product features and business goals (outcomes)

Show stakeholders progress (Demo Day)

MVP - Build, measure, learn…

Minimize effort into MVP proven ideas

The business goals of the product will achieve the desired outcomes

Test Hypothesis - Build MVP’s and validate proposed solutions

MVP - Build, measure, learn…

Collect what you learn fromthe MVP and iterate / evolve

the solution

Removal of features (waste) that don’t help achieve the business goals Show to stakeholders, customers and potential customers

Lean UX

“All that matters is the quality of the product, as measured by

the markets reaction to it.”

Jeff Gothelf

Tools

Tools Worth Looking At…

Traditional Paper and PenPost it NotesUI Stencils (uistencils.com)

MobilePopApp CookerBlueprintInterface HDAdobe ProtoiMockupsSketchyPadLivewiresLaunchBriefscase

DesktopSketch AppBalsamiqVisioOmnigraffleAxureJust in Mind EaselDivshotBriefsSkeleton (HTML Prototyping)Mind NodeProto.ioUXPinApp Sketcher (HTML Prototyping)Adobe Brackets (Coding)

Books

Books…

http://www.peachpit.com/

https://rosenfeldmedia.com/books/

http://www.fivesimplesteps.com/

http://www.abookapart.com/

http://www.smashingmagazine.com/books/

http://www.nngroup.com/books/mobile-usability/

What’s on my shelf…

Glossary

What is (UX) User Experience?

“User experience is the net sum of every interactiona person has with an organization, be it marketing material, a customer service call, or the product or service itself. A user’s

impressions are shaped by an organizations beliefs and practices as much as by the purpose and the value it’s products

hold in his or her life”.

Robert Hoekman Jnr

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

2014 Industry Design Implementation Trends

UX Guy - Mark Swaine

Twitter: @UX_UI_GuyBehance: behance.net/markswaineLinkedin: ca.linkedin.com/in/markswaineWeb: www.uxguy.com

Mobile & Web Design