SlideShare a Scribd company logo
Mobile UX
Design for
Advertising
Best Practices
Brant Nesbitt
Creative Designer
June 17, 2015 | NoVA UX
I want to apply
UX Best Practices
to 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

Recommended for you

Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience Designer

A talk we had at Texity systems. Topics were “ Are you really a User Experience Designer ? The shift from product design to process design” Contents - what is user experience ? A bit of historical perspective - Who coined the term and what did he mean ? ( Don Norman coined this term) - how does IA, interaction design, usability, user research, relate to user experience ? - what is product user experience ? - how is different from user experience design of a service ? - if this is User Experience, then what exactly is customer experience ? - Should there be a designation called User Experience designer? - The CEO, the engineer, the sales manager , product manager ….. are they UX designers or they aren’t ? - Product design vs Process design - The notion of a User , and who is the Customer ….. can user and customer be same ? - A better term : DUX ( designing for user experience )

UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!

It is my try to shed light on two often heard but little understood or confused acronyms and its impact on overall brand experience. The presentation originally designed to address a group of entrepreneurs who have little knowledge in design and it's technical jargons. https://www.linkedin.com/in/jayan-narayanan/

web designux designui design
Web Trends 2016
Web Trends 2016Web Trends 2016
Web Trends 2016

The document discusses trends and challenges facing web designers in 2016. It identifies three "villains" to beware of: templates that lead to lack of differentiation, overwhelming content that slows down sites, and lack of accessibility. It argues instead for focusing on custom content tailored to audiences, prioritizing speed, and making sites fully inclusive and accessible. The presentation aims to help designers stand out and create better user experiences online.

designtrendsweb
Typical User Flow
5
Optimize for mobile!
- Make the conversion
6
USERS
DON’T READ
THEY 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
USER
CONTEXT

Recommended for you

Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices

On these slides I have explained visual design principles and UI design best practices. This will help you to improve your visualization and UI Designing skills.

visual design principlesui design best practicesbandwidth of senses
Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013

Find the Interface Design trends for 2014 by - now freelance - Petra Sell on: http://www.slideshare.net/volpelino/id14 Prophets Agency presents "ID13": the trends in Interactive Design for 2013. Third year in a row, after the ID11 and ID12 trends. Written and designed by our Design Director Petra Sell. Starting at the emerging trends in 2012 moving to what is happening in interaction design in 2013. the consolidation of ongoing trends up to future thinking and some advice on how to keep up. Take your time to browse through the 147 slides of this impressive deck. Brands who fancy a 'live' presentation in their offices can contact us to make an appointment. Do spread along, cause sharing still is caring.

interactivedesigntrends
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...

I recently presented at the Internet Retailer Web Design Conference (IRWD) down in Orlando (Feb 13). The topic was "How to achieve harmony between usability and design". Special thanks to Jordan Lustig, from Saks Fifth Avenue, for joining me up on stage. We had a great time. Thank you all for joining us!

saksecommercealexander interactive
9
User Context
Where are they interacting?
Is the user’s environment disruptive (mass transit,
out socializing) or sedentary (watching TV)?
10
WE
PERFORM
MICROTASK
S
11
USER
CONTEXT
ONE
TASK
&
This contours our ad’s design
USER NEEDS BUSINESS REQUIREMENT
12
WHAT’S IN IT
FOR ME?

Recommended for you

The Value of User Experience (from Web 2.0 Expo Berlin 2008)
The Value of User Experience (from Web 2.0 Expo Berlin 2008)The Value of User Experience (from Web 2.0 Expo Berlin 2008)
The Value of User Experience (from Web 2.0 Expo Berlin 2008)

Companies and brands should think about (user) experience to find new competitive edge for their business. Better experiences create more value for users, which can be in turn transformed into business value for the company.

experienceuxuserexperience
Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!

Up Leveling Enterprise Data Visualization Watch the Enterprise X Insider talk here: https://vimeo.com/331014279

datavizenterpriseux
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design

Thinking "mobile" is not just about devices, it's about better usability, optimizing for screen real estate, and simplifying design elements and layouts. Asher Blumberg, Mobile UX Designer at StumbleUpon, walks us through creating a unique design language for your app that bridges the chasm between iOS and Android.

mobileexperience designuser experience
13
WHAT IS THE
ONE TASK?
Brand presence
Measure 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

Recommended for you

Ux design process
Ux design processUx design process
Ux design process

Creating User Experience for Applications involves multi various skill sets & is on vogue. Know what UX is all about & Pixel Studios Design Process in this presentation.

uxuiuser experience
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability

Presentation for my talk about the "Basics in User Experience Design, Information Architecture & Usability" at General Assembly Berlin, January 9th, 2013

user experience designinformation architectureusability
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups

User Interface and User Experience Design for Startups. This is the presentation i've made for Daily Social - SparxUp DevClass event 20 March 2014.

user interfacecreativityuser experience
17
EVOLVING
INTERFACES
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.
Primary
Content
Secondary
Content
Primary
Ad Space
Tertiary
Content

Recommended for you

Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design

This Presentation base on Joshua Porter Blog (http://bokardo.com/principles-of-user-interface-design/)

user experienceuxuser interface
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 Meetup

Slides from the Tampa UX November 2014 meetup, talking about what UX design is, and a list of items for a heuristic evaluation.

uxfloridadesign
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile StrategyReal World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy

As a UX / Visual Designer, Business Lead or Product Manager, we strive to create great digital experiences for our companies and audiences. But how many organizations are truly able to deliver? With over 15 years of business and UX experience, Greg Zapar shares real-world examples and insights that will help you create opportunities through design.

user experience strategyresponsive designmobile
Homepage Interface Design
21
The way it is and will be…
Primary
Content
Secondary
Content
Primary
Ad Space
Tertiary
Content
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 Library
https://developer.apple.com/library/ios/documentation/
UserExperience/Conceptual/MobileHIG/LayoutandApp
earance.html
The minimum hit area
24
44 pixels for mobile ads

Recommended for you

UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals

The document provides an overview of UI/UX design principles and processes, including strategies for user needs analysis, information architecture, visual design, and best practices for design tools, resources, and workflows like prototyping, mood boarding, and developing brand guidelines. It also discusses techniques for UX mapping like user journeys, flows, and blueprinting to understand customer interactions. The document is intended as a reference for someone learning about or working in UI/UX design.

uiuxmoodboard
User Experience & Design Research
User Experience & Design ResearchUser Experience & Design Research
User Experience & Design Research

This document provides an introduction to user experience (UX) design research. It discusses the history and definition of UX, highlighting that UX is about meeting user needs and providing an enjoyable experience. The document also explains why UX and design research are important, noting they can improve key metrics by 83% and prevent designing for only one user type. Finally, it gives an overview of how to conduct UX and design research through qualitative and quantitative methods like interviews, surveys, and usings tools at different stages of the design process. An example is provided of Airbnb improving their website through early design research.

designtechnology
Круглый стол BSUSMM - Improve media, Антон Ошмян
Круглый стол BSUSMM - Improve media, Антон ОшмянКруглый стол BSUSMM - Improve media, Антон Ошмян
Круглый стол BSUSMM - Improve media, Антон Ошмян

Презентация подготовлена руководством Imrove Media специально для круглого стола #BSUSMM, факультет МО БГУ

bsusmmsmmСоциальные Сети
Use gestures which are
most familiar to the user
25
Ensure a consistent experience across devices with
varying levels of technical capabilities
TAP
1 2 3
PULL/SWIPE SCROLL/DRAG
26
MOVING
FORWARD
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 CTA
Use 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

Recommended for you

Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and AccessibilityRed Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility

Presentation by Lisa Battle and Jennifer Chaffee from Design for Context, and Marguerite Bergel from Fidelity, at the 2014 User Experience Professional Association (UXPA) conference in London on July 24, 2014. Communicating status and providing signposts to tell users where they are within an application or process is essential to a good user experience. Some clients still believe they can’t use graphics or color for important cues because of accessibility. In reality, graphic design and accessibility can work together nicely. Our presentation provides case studies in we consider these questions from a visual design, user interaction, and accessibility perspective: - How can we make notifications “pop” on cluttered screens? - What treatments are most effective for field-level errors? - How can we handle multiple, simultaneous alerts to users of assistive technology? We examine tradeoffs between different design solutions, and explore how good graphic design and accessibility can work together to improve experiences for the broadest range of users.

user experienceaccessibilityux
Does UX design kill creativity?
Does UX design kill creativity?Does UX design kill creativity?
Does UX design kill creativity?

There's a health creative tension between the UX designer and others (the graphic designer, the developer, management, the client).

uxuxd
Mobile UX
Mobile UXMobile UX
Mobile UX

The document discusses the importance of user experience (UX) in mobile applications. It defines UX as a user's perceptions and feelings before, during, and after interacting with a mobile product. Good UX is critical for mobile apps as people have many choices and will reject apps with poor UX. The document provides guidelines for mobile UX design, such as identifying users, using mobile features appropriately, optimizing content for small screens, and designing for interruptions. It emphasizes an iterative process of prototyping, testing, and reworking mobile app designs based on user feedback.

uxmobilemcrm
Worth repeating…
avoid using tiny CTAs
29
30
“FINGERTIP
LEGIBILITY”
Evolve the call-to-action
We 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 should
connect 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?
?

Recommended for you

Tribal DDB: Advertising & UX, We Argue But We Love Each Other Really
Tribal DDB: Advertising & UX, We Argue But We Love Each Other ReallyTribal DDB: Advertising & UX, We Argue But We Love Each Other Really
Tribal DDB: Advertising & UX, We Argue But We Love Each Other Really

The document discusses advertising, user experience design, and their relationship. It argues that advertising as commonly practiced sees people as "sheep to be manipulated" rather than respecting them. However, user experience design takes a different approach by designing things to make people want to perform certain actions. The rise of the internet has led to a shift from a broadcast model of communication to more of a conversation. Customers are people rather than sheep, and user testing directly involves customers in the design process.

uxadaptive pathadvertising
Zen And The Art Of User Experience Design
Zen And The Art Of User Experience DesignZen And The Art Of User Experience Design
Zen And The Art Of User Experience Design

The document discusses the relationship between holism and reductionism in user experience design. It notes that Plato supported holism while Aristotle supported reductionism. The document advocates taking an balanced approach that applies both art and science to create high quality, beautiful experiences for users. It closes by thanking the audience and providing contact information.

zen and the art of motorcycle maintenanceuser experiencepirsig
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...

Conscientização sobre acessibilidade e checklist básico para melhorar a experiência de cegos no ecommerce. Palestra dada em outubro de 2016 na Webbr (conferência do W3C).

webuxw3c
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 elements
large 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

Recommended for you

Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14

1. O documento discute os principais problemas de acessibilidade na web e soluções, cobrindo tópicos como idioma, imagens, links, fontes, navegação, semântica e formulários. 2. Problemas comuns incluem falta de atributos alt em imagens, links sem texto descritivo, fontes pequenas e baixo contraste de cores. 3. Soluções como adicionar atributos alt, usar texto descritivo para links, aumentar o tamanho da fonte e garantir bom contraste de cores podem resolver esses problemas e

acessibilidadescreen readerfisl14
The Dual-Track Agile UX Process at Dell EMC
The Dual-Track Agile UX Process at Dell EMCThe Dual-Track Agile UX Process at Dell EMC
The Dual-Track Agile UX Process at Dell EMC

You'll learn: - How to design ahead of development without chaos - How to conduct user research within Agile - How to deliver consistent UX on tight timelines

product designuser interface designagile software development
Conductrics bandit basicsemetrics1016
Conductrics bandit basicsemetrics1016Conductrics bandit basicsemetrics1016
Conductrics bandit basicsemetrics1016

The document discusses optimization techniques for online experiments known as multi-armed bandits. It introduces the multi-armed bandit problem of balancing exploration of new options with exploitation of existing knowledge. It then describes several techniques for solving this problem, including AB testing, epsilon greedy, and upper confidence bound approaches. The document provides examples of how these techniques work and notes that multi-armed bandit methods can provide more efficient learning than AB testing alone.

banditoptimizationstatistical hypothesis testing
Optimize the experience.
Any screen, anywhere.
37
Built for speed
and consistency
38
INTERFACE ELEMENTS: LIGHT FILE SIZE,
LARGE & INVITING APPEARANCE
Take the guess work out of what is “tappable”.
CREATE TRUST BETWEEN THE
ADVERTISER AND THE USER
Attention to detail results in TRUST! Make it look & work great!
A PLEASANT USER EXPERIENCE YIELDS
MORE POSITIVE RESULTS
The reflective experience excites and engages the user.
For the latest ad formats…
39
Visit showcase.sizmek.com/formats
or e-mail info@sizmek.com
Scan Me
Thank You
All images and copy property of their respective owners.
©2015 Sizmek, Inc. All rights reserved.

Recommended for you

Mobile first ux
Mobile first uxMobile first ux
Mobile first ux

The presentation discusses designing mobile apps with a focus on the mobile user experience. It covers why mobile is the future over desktop, different screen sizes and platforms, common gestures and interactions, challenges in UX delivery across channels, and basic UI patterns for mobile. The presenter argues that mobile is not just desktop translated to a small screen, but requires its own design approach focused on accessibility, touch, and the contexts in which users engage with their devices on the go.

mobile firstmobile uxtouch gestures
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends

This presentation takes provides details on the latest design concepts and trends for Android and iOS UI/UX. Under the hood: UI/UX Design stages 2014 Web Design Trends Latest Technologies in Web Designing - Saas, Bootstrap, Yeoman, Compass Benefits of using Latest Trends in Web Designing Comparison between Old and New Trends in Web Designing 2014 Android Design Trends Benefits of using Latest Trends in Android in Interface Design Comparison between Older version Android and Android Kitkat 2014 iOS Design Trends Benefits of using Latest Trends iOS UI Design Comparison between iOS 6 and iOS 7 Good Design Tools & Expertise

ui/ux designparallax scrollingmobile first design method
iOS Native Development with Xamarin
iOS Native Development with XamariniOS Native Development with Xamarin
iOS Native Development with Xamarin

Xamarin as a mobile development platform getting huge adoption starting from startups to huge enterprises which creates lot of opportunities for developers like us. In this user group meetup, Arul, a practicing Xamarin architect will share his experience, insights and best practices on building apps using Xamarin. Agenda --------- • iOS Native Development with Xamarin (90 Mins) • Enhancing MonoTouch.Dialog (60 Mins) • Discussion & QA (30 Mins)

chennaiiosxamarin
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.html
or e-mail info@sizmek.com
Scan Me

More Related Content

What's hot

UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
Growth Hacking Asia
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
Jeremy Robinson
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
Theresa Neil
 
Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience Designer
Vinay Mohanty
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
Jayan Narayanan
 
Web Trends 2016
Web Trends 2016Web Trends 2016
Web Trends 2016
Tom Osborne
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
Avijit Chinara
 
Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013
Prophets Agency
 
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Josh Levine
 
The Value of User Experience (from Web 2.0 Expo Berlin 2008)
The Value of User Experience (from Web 2.0 Expo Berlin 2008)The Value of User Experience (from Web 2.0 Expo Berlin 2008)
The Value of User Experience (from Web 2.0 Expo Berlin 2008)
Niko Nyman
 
Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!
Theresa Neil
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
InVision App
 
Ux design process
Ux design processUx design process
Ux design process
Pixel Studios Pvt Ltd
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
Sebastian Waters
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
Richard Fang
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
KANKIPATI KISHORE
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 Meetup
Mike Gallers
 
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile StrategyReal World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Greg Zapar
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
 
User Experience & Design Research
User Experience & Design ResearchUser Experience & Design Research
User Experience & Design Research
Vivian Huang
 

What's hot (20)

UX Fundamentals for Startups
UX Fundamentals for StartupsUX Fundamentals for Startups
UX Fundamentals for Startups
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
UX Best Practices
UX Best PracticesUX Best Practices
UX Best Practices
 
Are You An User Experience Designer
Are You An User Experience DesignerAre You An User Experience Designer
Are You An User Experience Designer
 
UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
Web Trends 2016
Web Trends 2016Web Trends 2016
Web Trends 2016
 
Basic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best PracticesBasic Visual Design Principles and UI Design Best Practices
Basic Visual Design Principles and UI Design Best Practices
 
Trends in interactive design 2013
Trends in interactive design 2013Trends in interactive design 2013
Trends in interactive design 2013
 
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
Usability vs Design – When Does One Trump the Other? AI (Alexander Interactiv...
 
The Value of User Experience (from Web 2.0 Expo Berlin 2008)
The Value of User Experience (from Web 2.0 Expo Berlin 2008)The Value of User Experience (from Web 2.0 Expo Berlin 2008)
The Value of User Experience (from Web 2.0 Expo Berlin 2008)
 
Just Make Me a Dashboard!
Just Make Me a Dashboard!Just Make Me a Dashboard!
Just Make Me a Dashboard!
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
Ux design process
Ux design processUx design process
Ux design process
 
Basics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
Principles of User Interface Design
Principles of User Interface DesignPrinciples of User Interface Design
Principles of User Interface Design
 
Tampa UX November 2014 Meetup
Tampa UX November 2014 MeetupTampa UX November 2014 Meetup
Tampa UX November 2014 Meetup
 
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile StrategyReal World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
Real World Insights That Will Help You Develop an Amazing UX & Mobile Strategy
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
User Experience & Design Research
User Experience & Design ResearchUser Experience & Design Research
User Experience & Design Research
 

Viewers also liked

Круглый стол BSUSMM - Improve media, Антон Ошмян
Круглый стол BSUSMM - Improve media, Антон ОшмянКруглый стол BSUSMM - Improve media, Антон Ошмян
Круглый стол BSUSMM - Improve media, Антон Ошмян
Антон Ошмян
 
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and AccessibilityRed Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Design for Context
 
Does UX design kill creativity?
Does UX design kill creativity?Does UX design kill creativity?
Does UX design kill creativity?
John Kuefler
 
Mobile UX
Mobile UXMobile UX
Tribal DDB: Advertising & UX, We Argue But We Love Each Other Really
Tribal DDB: Advertising & UX, We Argue But We Love Each Other ReallyTribal DDB: Advertising & UX, We Argue But We Love Each Other Really
Tribal DDB: Advertising & UX, We Argue But We Love Each Other Really
David Vogel
 
Zen And The Art Of User Experience Design
Zen And The Art Of User Experience DesignZen And The Art Of User Experience Design
Zen And The Art Of User Experience Design
David Vogel
 
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Juliana Fernandes
 
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Juliana Fernandes
 
The Dual-Track Agile UX Process at Dell EMC
The Dual-Track Agile UX Process at Dell EMCThe Dual-Track Agile UX Process at Dell EMC
The Dual-Track Agile UX Process at Dell EMC
uxpin
 
Conductrics bandit basicsemetrics1016
Conductrics bandit basicsemetrics1016Conductrics bandit basicsemetrics1016
Conductrics bandit basicsemetrics1016
Matt Gershoff
 
Mobile first ux
Mobile first uxMobile first ux
Mobile first ux
Baidurjya Sinha ( Tatan )
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
RapidValue
 
iOS Native Development with Xamarin
iOS Native Development with XamariniOS Native Development with Xamarin
iOS Native Development with Xamarin
Arul Kumaran
 
UX Design for Mobile Interfaces
UX Design for Mobile InterfacesUX Design for Mobile Interfaces
UX Design for Mobile Interfaces
Andi Galpern
 
UX and best practices for mobile apps
UX and best practices for mobile appsUX and best practices for mobile apps
UX and best practices for mobile apps
Robert Surpateanu
 
Xamarin Traditional Approach & Xamarin.Forms
Xamarin Traditional Approach & Xamarin.FormsXamarin Traditional Approach & Xamarin.Forms
Xamarin Traditional Approach & Xamarin.Forms
William S. Rodriguez
 
Mobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesMobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devices
Antony Ribot
 
UX Process — From Idea To Implementation
UX Process — From Idea To ImplementationUX Process — From Idea To Implementation
UX Process — From Idea To Implementation
Dan Malarkey
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
Jim Bennett
 
Mobile Banking Apps with Xamarin
Mobile Banking Apps with XamarinMobile Banking Apps with Xamarin
Mobile Banking Apps with Xamarin
Xpand IT
 

Viewers also liked (20)

Круглый стол BSUSMM - Improve media, Антон Ошмян
Круглый стол BSUSMM - Improve media, Антон ОшмянКруглый стол BSUSMM - Improve media, Антон Ошмян
Круглый стол BSUSMM - Improve media, Антон Ошмян
 
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and AccessibilityRed Alert! Communicating Status Through Great UX, Graphics, and Accessibility
Red Alert! Communicating Status Through Great UX, Graphics, and Accessibility
 
Does UX design kill creativity?
Does UX design kill creativity?Does UX design kill creativity?
Does UX design kill creativity?
 
Mobile UX
Mobile UXMobile UX
Mobile UX
 
Tribal DDB: Advertising & UX, We Argue But We Love Each Other Really
Tribal DDB: Advertising & UX, We Argue But We Love Each Other ReallyTribal DDB: Advertising & UX, We Argue But We Love Each Other Really
Tribal DDB: Advertising & UX, We Argue But We Love Each Other Really
 
Zen And The Art Of User Experience Design
Zen And The Art Of User Experience DesignZen And The Art Of User Experience Design
Zen And The Art Of User Experience Design
 
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
Compras Online e Acessibilidade: Melhorando a Experiência de Usuários de Leit...
 
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14Acessibilidade na Web: Principais problemas e Soluções - FISL14
Acessibilidade na Web: Principais problemas e Soluções - FISL14
 
The Dual-Track Agile UX Process at Dell EMC
The Dual-Track Agile UX Process at Dell EMCThe Dual-Track Agile UX Process at Dell EMC
The Dual-Track Agile UX Process at Dell EMC
 
Conductrics bandit basicsemetrics1016
Conductrics bandit basicsemetrics1016Conductrics bandit basicsemetrics1016
Conductrics bandit basicsemetrics1016
 
Mobile first ux
Mobile first uxMobile first ux
Mobile first ux
 
2014 Android and iOS Design Trends
2014 Android and iOS Design Trends2014 Android and iOS Design Trends
2014 Android and iOS Design Trends
 
iOS Native Development with Xamarin
iOS Native Development with XamariniOS Native Development with Xamarin
iOS Native Development with Xamarin
 
UX Design for Mobile Interfaces
UX Design for Mobile InterfacesUX Design for Mobile Interfaces
UX Design for Mobile Interfaces
 
UX and best practices for mobile apps
UX and best practices for mobile appsUX and best practices for mobile apps
UX and best practices for mobile apps
 
Xamarin Traditional Approach & Xamarin.Forms
Xamarin Traditional Approach & Xamarin.FormsXamarin Traditional Approach & Xamarin.Forms
Xamarin Traditional Approach & Xamarin.Forms
 
Mobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devicesMobile UX - the intricacies of designing for mobile devices
Mobile UX - the intricacies of designing for mobile devices
 
UX Process — From Idea To Implementation
UX Process — From Idea To ImplementationUX Process — From Idea To Implementation
UX Process — From Idea To Implementation
 
Cross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVMCross platform Xamarin Apps With MVVM
Cross platform Xamarin Apps With MVVM
 
Mobile Banking Apps with Xamarin
Mobile Banking Apps with XamarinMobile Banking Apps with Xamarin
Mobile Banking Apps with Xamarin
 

Similar to Mobile UX Design Best Practices for Advertising

And Then What Creative - 2011 Q4 Trend Report for Experiential Marketing
And Then What Creative - 2011 Q4 Trend Report for Experiential MarketingAnd Then What Creative - 2011 Q4 Trend Report for Experiential Marketing
And Then What Creative - 2011 Q4 Trend Report for Experiential Marketing
And Then What Creative
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
InfinIT - Innovationsnetværket for it
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
Susanne Brøndberg
 
Portfolio Karen Sátiro
Portfolio Karen SátiroPortfolio Karen Sátiro
Portfolio Karen Sátiro
Karen Sátiro
 
Functional Design Lab
Functional Design LabFunctional Design Lab
Functional Design Lab
iFactory
 
Keeping your touch screen kiosk content creation business future
Keeping your touch screen kiosk content creation business futureKeeping your touch screen kiosk content creation business future
Keeping your touch screen kiosk content creation business future
Intuiface
 
Leveraging CX / UX / UI to optimise brand experiences
Leveraging CX / UX / UI to optimise brand experiencesLeveraging CX / UX / UI to optimise brand experiences
Leveraging CX / UX / UI to optimise brand experiences
Melissa Wilfley
 
Article on User Experience 2004
Article on User Experience 2004Article on User Experience 2004
Article on User Experience 2004
Different
 
How to Select the Touch Screen Kiosks?
How to Select the Touch Screen Kiosks?How to Select the Touch Screen Kiosks?
How to Select the Touch Screen Kiosks?
VRS Technologies
 
Key OTT (Over-The-Top) Market Trends in 2015
Key OTT (Over-The-Top) Market Trends in 2015Key OTT (Over-The-Top) Market Trends in 2015
Key OTT (Over-The-Top) Market Trends in 2015
michael_ritchie
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
Think 360 Studio
 
CGS E-learning Catalog
CGS E-learning Catalog CGS E-learning Catalog
CGS E-learning Catalog
Elizabeth Woodward
 
RESS @ SapientNitro CGN (UX CGN 10)
RESS @ SapientNitro CGN (UX CGN 10)RESS @ SapientNitro CGN (UX CGN 10)
RESS @ SapientNitro CGN (UX CGN 10)
Axel Hermes
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
Tunde Ojediran
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
DMI
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
Sameer dwivedi
 
Websites for Mobile Devices
Websites for Mobile DevicesWebsites for Mobile Devices
Websites for Mobile Devices
enterprisecenter
 
What is User Experience?
What is User Experience?What is User Experience?
What is User Experience?
Chuck Mallott
 
Building Mobile Creatives that Deliver Real Results
Building Mobile Creatives that Deliver Real ResultsBuilding Mobile Creatives that Deliver Real Results
Building Mobile Creatives that Deliver Real Results
InMobi
 
Making the Complex Simple
Making the Complex SimpleMaking the Complex Simple
Making the Complex Simple
Digital Exeter
 

Similar to Mobile UX Design Best Practices for Advertising (20)

And Then What Creative - 2011 Q4 Trend Report for Experiential Marketing
And Then What Creative - 2011 Q4 Trend Report for Experiential MarketingAnd Then What Creative - 2011 Q4 Trend Report for Experiential Marketing
And Then What Creative - 2011 Q4 Trend Report for Experiential Marketing
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
 
Fra idé til value proposition
Fra idé til value propositionFra idé til value proposition
Fra idé til value proposition
 
Portfolio Karen Sátiro
Portfolio Karen SátiroPortfolio Karen Sátiro
Portfolio Karen Sátiro
 
Functional Design Lab
Functional Design LabFunctional Design Lab
Functional Design Lab
 
Keeping your touch screen kiosk content creation business future
Keeping your touch screen kiosk content creation business futureKeeping your touch screen kiosk content creation business future
Keeping your touch screen kiosk content creation business future
 
Leveraging CX / UX / UI to optimise brand experiences
Leveraging CX / UX / UI to optimise brand experiencesLeveraging CX / UX / UI to optimise brand experiences
Leveraging CX / UX / UI to optimise brand experiences
 
Article on User Experience 2004
Article on User Experience 2004Article on User Experience 2004
Article on User Experience 2004
 
How to Select the Touch Screen Kiosks?
How to Select the Touch Screen Kiosks?How to Select the Touch Screen Kiosks?
How to Select the Touch Screen Kiosks?
 
Key OTT (Over-The-Top) Market Trends in 2015
Key OTT (Over-The-Top) Market Trends in 2015Key OTT (Over-The-Top) Market Trends in 2015
Key OTT (Over-The-Top) Market Trends in 2015
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
CGS E-learning Catalog
CGS E-learning Catalog CGS E-learning Catalog
CGS E-learning Catalog
 
RESS @ SapientNitro CGN (UX CGN 10)
RESS @ SapientNitro CGN (UX CGN 10)RESS @ SapientNitro CGN (UX CGN 10)
RESS @ SapientNitro CGN (UX CGN 10)
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
User Experience Explained
User Experience ExplainedUser Experience Explained
User Experience Explained
 
Websites for Mobile Devices
Websites for Mobile DevicesWebsites for Mobile Devices
Websites for Mobile Devices
 
What is User Experience?
What is User Experience?What is User Experience?
What is User Experience?
 
Building Mobile Creatives that Deliver Real Results
Building Mobile Creatives that Deliver Real ResultsBuilding Mobile Creatives that Deliver Real Results
Building Mobile Creatives that Deliver Real Results
 
Making the Complex Simple
Making the Complex SimpleMaking the Complex Simple
Making the Complex Simple
 

Mobile UX Design Best Practices for Advertising

Editor's Notes

  1. I had approached a well known author during a book signing and explained that I wanted to implement UX Best Practices in Mobile Ad Design.
  2. “You’re going to get fired.” was the response I got from the author. He was half-joking… at least I had hoped. But it brought up an interesting challenge.
  3. Given that we have such a limited amount of screen real estate and time to grab the user’s attention, we needed to provide a simplified definition of what a good UX would be for a mobile advertisement.
  4. As you can see in this brief user flow, we need to understand that providing content to the user on a mobile ad is an incremental process. Furthermore, we need to ensure that the landing page to which the ad is driving traffic is optimized for mobile devices in order to make a conversion.
  5. Make the initial message concise and provide value to the user.
  6. With mobile advertising you have about one quarter of the time or less to grab the user’s attention.
  7. Before we start producing content, we need to understand where our audience is interacting with their device.
  8. By understanding where they are interacting, we can gauge how complex it may be to have the user accomplish a task.
  9. Updating a social network status, checking for new email, and other microtasks performed on mobile devices have changed user behavior. Our ads need to be more concise than ever before.
  10. By understanding the User Context we understand the User Needs. It requires that the Task needs to be simple to execute. This contour’s our ad’s design.
  11. This is what the users want to know.
  12. This is what the advertisers want to measure.
  13. One possible option: providing subtle, yet effective brand presence to drive traffic to a landing page.
  14. Another option which provides an abundance of information in a short amount of time: video. It provides concise messaging and measurers the effectiveness of the ad by analyzing how much of the video was viewed by the user, and how many of the users tapped the call-to-action to be sent through to the landing page.
  15. Some verticals and products require a little bit more research. Overlay featured product imagery with interactive elements that present the user with seeds of information and complement them with video for a branded user experience.
  16. It is time to think “mobile first”. This is THE year.
  17. The fidelity of a mouse pointer is much greater than the human finger. Our interface design needs to reflect this.
  18. We need to not only contour our ads design to be free of peripherals, but provide visual cues to the user that invite them to touch or pull.
  19. This wireframe is a brief example of an interface that was designed around the fidelity of a mouse pointer. Note the dozens of exposed elements.
  20. This updated, simplified user interface increases the surface area around the interactive element, making it easier for the user to tap. Information is neatly tucked away making the content and information more concise and easier to navigate.
  21. Interactive elements between handheld, tablet and desktop devices are being shared as a result of responsive design and content management systems. This provides a consistent experience amongst devices and demonstrates “mobile first” thinking.
  22. Since we are parting from our peripherals, we need to familiarize ourselves with the need to design for touch.
  23. This is a good starting point which indicates the need for large, inviting elements. This guideline assumes 44 pixels at 72 pixels per inch. So the interactive “hit area” needs to be a little over 0.5 inches or 15.5 millimeters on screen.
  24. Start simple. Use gestures which are familiar to users.
  25. Let’s evolve the way we approach ad design.
  26. By “shrinking” the banner the copy is not legible on mobile devices and the call-to-action looses its effectiveness. If designing the ad on a desktop/laptop, we recommend viewing the advertisement at 50-66% for a better idea of how the ad may appear on a mobile device. Type size should be no less than 10 pt if designing at 72 ppi.
  27. Messaging needs to be brief, and clear with a call-to-action that is large, legible and appears to be “tappable”.
  28. Again, create a call-to-action that is easy for the user to tap.
  29. Good “Fingertip Legibility” is the result of ads that provide concise messaging and beautiful product imagery, thus allowing users to make split second decisions and take action.
  30. Let’s improve the way we present content in our ads and make sure they are “fingertip legible”, not peripheral dependent.
  31. Light-weight mobile banners need drive traffic to lightweight-mobile pages. Another possible option is to provide video on user-interaction to preview an event or product demonstration.
  32. Implementing a large amount of content within a very small amount of space can be tricky. However, by utilizing animation with proper breaking points we get the messaging out in a clear, effective manner and guide the user with visual cues on how to be presented with more information.
  33. Use large, salient elements to invite the user to interact and glean product information. Note the effective use of visual cues to inform the user that tapping the entire element will show and hide the feature. This provides confidence that the ad will behave as intended and mitigate frustration by not sending the user to a different location by accident.
  34. Make sure the design is lightweight and makes sense.
  35. Load time is part of the experience. Optimize as much as possible account for various network speeds.
  36. Optimize your ads for device and user behavior.
  37. Deliver concise, beautiful advertisements and create trust!
  38. For a complete list of our latest Rich Media formats complete with documentation and demonstrations, please visit http://showcase.sizmek.com/formats.
  39. Making the transition to HTML5 ads can be tricky…
  40. We have launched Ad Builder for HTML5 to help!
  41. For more information about this REVOLUTIONARY tool, please visit http://go.sizmek.com/adbuilder-for-html5.html.