Mobile UX Design Best Practices for Advertising
•Download as PPT, PDF•
13 likes•6,460 views
As we transition from desktop to mobile devices, our behaviors evolve and we adapt to accomplish tasks quicker than ever before. With such a finite amount of screen space, yet infinite possibilities, it is time to evolve the way we present content, thus ensuring a pleasant user experience. 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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Mobile UX Design Best Practices for Advertising
Similar to Mobile UX Design Best Practices for Advertising (20)
Recently uploaded
Recently uploaded (6)
Mobile UX Design Best Practices for Advertising
- 1. Mobile UX Design for Advertising Best Practices Brant Nesbitt Creative Designer June 17, 2015 | NoVA UX
- 2. I want to apply UX Best Practices to Mobile Ads 2 “ ”
- 3. 3 You’re going to get FIRED. “ ”
- 4. 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
- 5. Typical User Flow 5 Optimize for mobile! - Make the conversion
- 7. The amount of time a user spends on a web page before taking action or leaving according to Jakob Nielsen. 7 0:10s
- 9. 9 User Context Where are they interacting? Is the user’s environment disruptive (mass transit, out socializing) or sedentary (watching TV)?
- 11. 11 USER CONTEXT ONE TASK & This contours our ad’s design USER NEEDS BUSINESS REQUIREMENT
- 12. 12 WHAT’S IN IT FOR ME?
- 13. 13 WHAT IS THE ONE TASK?
- 14. Brand presence Measure effectiveness by Click Through Rate (CTR) 14
- 15. Deliver your message with videoMeasure effectiveness through video completion rate and CTR 15
- 16. Concise info by interactivityIncrease your interaction time, increase your conversions! 16
- 18. 18 Never attempt to out-mouse the mouse. Josh Clark – Founder of Global Moxie and Author of Tapworthy: Designing Great iPhone Apps “ ”
- 19. User behaviors are evolvingUsers rely on what they already know (learned behaviors) and apply it to the unfamiliar (hope for the best) 19
- 20. Homepage Interface Design 20 The way it was… Search, Nav, Widgets, etc. Primary Content Secondary Content Primary Ad Space Tertiary Content
- 21. Homepage Interface Design 21 The way it is and will be… Primary Content Secondary Content Primary Ad Space Tertiary Content Search & Simplified Nav
- 22. 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
- 24. 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
- 25. 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
- 27. 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
- 28. 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
- 29. Worth repeating… avoid using tiny CTAs 29
- 31. 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.
- 32. 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? ?
- 33. 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
- 34. Make interactive elements large and inviting. 34 Large, salient elements on a mobile advertisement make users confident and mitigate risk for error.
- 35. 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).
- 36. 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
- 37. Optimize the experience. Any screen, anywhere. 37
- 38. 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.
- 39. For the latest ad formats… 39 Visit showcase.sizmek.com/formats or e-mail info@sizmek.com Scan Me
- 40. Thank You All images and copy property of their respective owners. ©2015 Sizmek, Inc. All rights reserved.
- 42. Ad Builder for HTML5! 42 Streamline creation of HTML5 ads for mobile and desktop WITHOUT CODE
- 43. Get More Info… 43 Visit go.sizmek.com/adbuilder-for-html5.html or e-mail info@sizmek.com Scan Me
Editor's Notes
- 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.
- “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.
- 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.
- 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.
- Make the initial message concise and provide value to the user.
- With mobile advertising you have about one quarter of the time or less to grab the user’s attention.
- Before we start producing content, we need to understand where our audience is interacting with their device.
- By understanding where they are interacting, we can gauge how complex it may be to have the user accomplish a task.
- 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.
- 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.
- This is what the users want to know.
- This is what the advertisers want to measure.
- One possible option: providing subtle, yet effective brand presence to drive traffic to a landing page.
- 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.
- 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.
- It is time to think “mobile first”. This is THE year.
- The fidelity of a mouse pointer is much greater than the human finger. Our interface design needs to reflect this.
- 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.
- 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.
- 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.
- 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.
- Since we are parting from our peripherals, we need to familiarize ourselves with the need to design for touch.
- 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.
- Start simple. Use gestures which are familiar to users.
- Let’s evolve the way we approach ad design.
- 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.
- Messaging needs to be brief, and clear with a call-to-action that is large, legible and appears to be “tappable”.
- Again, create a call-to-action that is easy for the user to tap.
- 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.
- Let’s improve the way we present content in our ads and make sure they are “fingertip legible”, not peripheral dependent.
- 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.
- 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.
- 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.
- Make sure the design is lightweight and makes sense.
- Load time is part of the experience. Optimize as much as possible account for various network speeds.
- Optimize your ads for device and user behavior.
- Deliver concise, beautiful advertisements and create trust!
- For a complete list of our latest Rich Media formats complete with documentation and demonstrations, please visit http://showcase.sizmek.com/formats.
- Making the transition to HTML5 ads can be tricky…
- We have launched Ad Builder for HTML5 to help!
- For more information about this REVOLUTIONARY tool, please visit http://go.sizmek.com/adbuilder-for-html5.html.