mobile ux design best practices for advertising

43
Mobile UX Design for Advertising Best Practices Brant Nesbitt Creative Designer June 17, 2015 | NoVA UX

Upload: brant-nesbitt

Post on 14-Aug-2015

391 views

Category:

Mobile


1 download

TRANSCRIPT

Page 1: Mobile UX Design Best Practices for Advertising

Mobile UX Design for AdvertisingBest Practices

Brant NesbittCreative Designer

June 17, 2015 | NoVA UX

Page 2: Mobile UX Design Best Practices for Advertising

I want to apply UX Best

Practicesto Mobile Ads

2

Page 3: Mobile UX Design Best Practices for Advertising

3

You’re going to get FIRED.

“”

Page 4: Mobile UX Design Best Practices for Advertising

User Experience (UX) Defined

4

THE GOAL/CONVERSION REQUESTED FOR ROI

BUSINESS

HOW THE EXPERIENCE APPEARS / “FEELS”

PSYCHOLOGY

HOW THE PRODUCT/EXPERIENCE

IS EXECUTED

TECHNOLOGY

USER EXPERIENCE

USER EXPERIENCE

Page 5: Mobile UX Design Best Practices for Advertising

Typical User Flow

5

Optimize for mobile!- Make the conversion

Page 6: Mobile UX Design Best Practices for Advertising

6

USERS DON’T READTHEY SCAN

Page 7: Mobile UX Design Best Practices for Advertising

The amount of time a user spends on a web page before taking action or leaving according to Jakob Nielsen.

7

0:10s

Page 8: Mobile UX Design Best Practices for Advertising

8

USERCONTEXT

Page 9: Mobile UX Design Best Practices for Advertising

9

User ContextWhere are they interacting?Is the user’s environment disruptive (mass transit, out socializing) or sedentary (watching TV)?

Page 10: Mobile UX Design Best Practices for Advertising

10

WE PERFORMMICROTASKS

Page 11: Mobile UX Design Best Practices for Advertising

11

USERCONTEXT

ONETASK

&

This contours our ad’s design

USER NEEDS BUSINESS REQUIREMENT

Page 12: Mobile UX Design Best Practices for Advertising

12

WHAT’S IN ITFOR ME?

Page 13: Mobile UX Design Best Practices for Advertising

13

WHAT IS THEONE TASK?

Page 14: Mobile UX Design Best Practices for Advertising

Brand presenceMeasure effectiveness by Click Through Rate (CTR)

14

Page 15: Mobile UX Design Best Practices for Advertising

Deliver your message with videoMeasure effectiveness through video completion rate and

CTR

15

Page 16: Mobile UX Design Best Practices for Advertising

Concise info by interactivityIncrease your interaction time, increase your conversions!

16

Page 17: Mobile UX Design Best Practices for Advertising

17

EVOLVINGINTERFACES

Page 18: Mobile UX Design Best Practices for Advertising

18

Never attempt to out-mouse

the mouse.

Josh Clark – Founder of Global Moxie and Author of Tapworthy: Designing Great iPhone Apps

Page 19: Mobile UX Design Best Practices for Advertising

User behaviors are evolvingUsers rely on what they already know (learned behaviors)and apply it to the unfamiliar (hope for the best)

19

Page 20: Mobile UX Design Best Practices for Advertising

Homepage Interface Design

20

The way it was…

Search, Nav,Widgets, etc.

PrimaryContent

SecondaryContent

PrimaryAd Space

TertiaryContent

Page 21: Mobile UX Design Best Practices for Advertising

Homepage Interface Design

21

The way it is and will be…

PrimaryContent

SecondaryContent

PrimaryAd Space

TertiaryContent

Search &Simplified Nav

Page 22: Mobile UX Design Best Practices for Advertising

Evolving for behavior

22

Trends in responsive design are resulting in shared, simplified interfaces between tablet and desktop.

THE “HAMBURGER” MENU ICON

TOGGLE FOR EFFICIENCY

Page 23: Mobile UX Design Best Practices for Advertising

23

GESTURES& MOBILE UX

Page 24: Mobile UX Design Best Practices for Advertising

44 pixels: recommended minimum tap area for touch screen devices*

*Per iOS Developer Libraryhttps://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/LayoutandAppearance.html

The minimum hit area

24

44 pixels for mobile ads

Page 25: Mobile UX Design Best Practices for Advertising

Use gestures which are most familiar to the user

25

Ensure a consistent experience across devices with varying levels of technical capabilities

TAP

11 22 33

PULL/SWIPE SCROLL/DRAG

Page 26: Mobile UX Design Best Practices for Advertising

26

MOVINGFORWARD

Page 27: Mobile UX Design Best Practices for Advertising

Resizing banners of similar proportion does NOT work

27

Even though the banners below have roughly the same proportional values, visual concerns are apparent.

EXAMPLE A: 728x90

EXAMPLE B: 320 x 50

Not legible on mobile devices pixels on a monitor are larger than a mobile device (66% is a more realistic view on desktop)

Substitute an icon for CTAUse of a play button lends itself better as it is more concise, recognizable and tappable

Page 28: Mobile UX Design Best Practices for Advertising

Be kind to consumers…avoid tiny calls-to-action (CTAs)

28

More time spent discerning information may result in poor recall and potential to be ignored.

EXAMPLE A EXAMPLE B

Page 29: Mobile UX Design Best Practices for Advertising

Worth repeating…avoid using tiny CTAs

29

Page 30: Mobile UX Design Best Practices for Advertising

30

“FINGERTIP

LEGIBILITY”

Page 31: Mobile UX Design Best Practices for Advertising

Evolve the call-to-actionWe do not click. We tap.

31

We need to ensure the language in the CTA reflects the action we want the user to take.

CLICK HERE? WHEN IN DOUBT, PROMPT.

Page 32: Mobile UX Design Best Practices for Advertising

Mobile ads shouldconnect to mobile sites

32

Send them to a mobile-optimized landing page for better odds of making a conversion.

LIGHT-WEIGHT MOBILE BANNER

SENDS ME TO A DESKTOP SITE?

?

Page 33: Mobile UX Design Best Practices for Advertising

Abundance of information?Segment with animation.

33

The copy is legible, visuals are more recognizable, and the ad offers a clear message with inviting CTA.

Example A Example B

Page 34: Mobile UX Design Best Practices for Advertising

Make interactive elementslarge and inviting.

34

Large, salient elements on a mobile advertisement make users confident and mitigate risk for error.

Page 35: Mobile UX Design Best Practices for Advertising

Skeuomorphic design is okay(as long as it makes sense).

35

Below is a good example of using a simple gesture (tap) with skeuomorphic design (the ice).

Page 36: Mobile UX Design Best Practices for Advertising

Be creative… but stick to spec.

36

Simplify designs & use code when possible to reduce file size, reduce load times for a better user experience.

16K75K

Page 37: Mobile UX Design Best Practices for Advertising

Optimize the experience.Any screen, anywhere.

37

Page 38: Mobile UX Design Best Practices for Advertising

Built for speed and consistency

38

INTERFACE ELEMENTS: LIGHT FILE SIZE, LARGE & INVITING APPEARANCETake the guess work out of what is “tappable”.

CREATE TRUST BETWEEN THE ADVERTISER AND THE USERAttention to detail results in TRUST! Make it look & work great!

A PLEASANT USER EXPERIENCE YIELDS MORE POSITIVE RESULTSThe reflective experience excites and engages the user.

Page 39: Mobile UX Design Best Practices for Advertising

For the latest ad formats…

39

Visit showcase.sizmek.com/formatsor e-mail [email protected]

Scan Me

Page 40: Mobile UX Design Best Practices for Advertising

Thank You

All images and copy property of their respective owners.©2015 Sizmek, Inc. All rights reserved.

Page 41: Mobile UX Design Best Practices for Advertising

NEW product announcement!

41

Page 42: Mobile UX Design Best Practices for Advertising

Ad Builder for HTML5!

42

Streamline creation of HTML5 ads for mobile and desktop

WITHOUT CODE

Page 43: Mobile UX Design Best Practices for Advertising

Get More Info…

43

Visit go.sizmek.com/adbuilder-for-html5.htmlor e-mail [email protected]

Scan Me