Post on 14-Aug-2015
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