mobile ux design best practices for advertising

Mobile UX Design for AdvertisingBest Practices

Brant NesbittCreative Designer

June 17, 2015 | NoVA UX

I want to apply UX Best

Practicesto Mobile Ads

2

“

”

3

You’re going to get FIRED.

“”

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

Typical User Flow

5

Optimize for mobile!- Make the conversion

6

USERS DON’T READTHEY SCAN

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

7

0:10s

8

USERCONTEXT

9

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

10

WE PERFORMMICROTASKS

11

USERCONTEXT

ONETASK

&

This contours our ad’s design

USER NEEDS BUSINESS REQUIREMENT

12

WHAT’S IN ITFOR ME?

13

WHAT IS THEONE TASK?

Brand presenceMeasure effectiveness by Click Through Rate (CTR)

14

Deliver your message with videoMeasure effectiveness through video completion rate and

CTR

15

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

16

17

EVOLVINGINTERFACES

18

Never attempt to out-mouse

the mouse.

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

“

”

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

19

Homepage Interface Design

20

The way it was…

Search, Nav,Widgets, etc.

PrimaryContent

SecondaryContent

PrimaryAd Space

TertiaryContent

Homepage Interface Design

21

The way it is and will be…

PrimaryContent

SecondaryContent

PrimaryAd Space

TertiaryContent

Search &Simplified Nav

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

23

GESTURES& MOBILE UX

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

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

26

MOVINGFORWARD

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

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

Worth repeating…avoid using tiny CTAs

29

30

“FINGERTIP

LEGIBILITY”

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.

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?

?

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

Make interactive elementslarge and inviting.

34

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

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).

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

Optimize the experience.Any screen, anywhere.

37

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.

For the latest ad formats…

39

Visit showcase.sizmek.com/formatsor e-mail info@sizmek.com

Scan Me

Thank You

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

NEW product announcement!

41

Ad Builder for HTML5!

42

Streamline creation of HTML5 ads for mobile and desktop

WITHOUT CODE

Get More Info…

43

Visit go.sizmek.com/adbuilder-for-html5.htmlor e-mail info@sizmek.com

Scan Me