Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile UX Design Best Practices for Advertising

4,758 views

Published on

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.

Published in: Mobile
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Mobile UX Design Best Practices for Advertising

  1. 1. Mobile UX Design for Advertising Best Practices Brant Nesbitt Creative Designer June 17, 2015 | NoVA UX
  2. 2. I want to apply UX Best Practices to Mobile Ads 2 “ ”
  3. 3. 3 You’re going to get FIRED. “ ”
  4. 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. 5. Typical User Flow 5 Optimize for mobile! - Make the conversion
  6. 6. 6 USERS DON’T READ THEY SCAN
  7. 7. The amount of time a user spends on a web page before taking action or leaving according to Jakob Nielsen. 7 0:10s
  8. 8. 8 USER CONTEXT
  9. 9. 9 User Context Where are they interacting? Is the user’s environment disruptive (mass transit, out socializing) or sedentary (watching TV)?
  10. 10. 10 WE PERFORM MICROTASK S
  11. 11. 11 USER CONTEXT ONE TASK & This contours our ad’s design USER NEEDS BUSINESS REQUIREMENT
  12. 12. 12 WHAT’S IN IT FOR ME?
  13. 13. 13 WHAT IS THE ONE TASK?
  14. 14. Brand presence Measure effectiveness by Click Through Rate (CTR) 14
  15. 15. Deliver your message with videoMeasure effectiveness through video completion rate and CTR 15
  16. 16. Concise info by interactivityIncrease your interaction time, increase your conversions! 16
  17. 17. 17 EVOLVING INTERFACES
  18. 18. 18 Never attempt to out-mouse the mouse. Josh Clark – Founder of Global Moxie and Author of Tapworthy: Designing Great iPhone Apps “ ”
  19. 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. 20. Homepage Interface Design 20 The way it was… Search, Nav, Widgets, etc. Primary Content Secondary Content Primary Ad Space Tertiary Content
  21. 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. 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
  23. 23. 23 GESTURES & MOBILE UX
  24. 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. 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
  26. 26. 26 MOVING FORWARD
  27. 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. 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. 29. Worth repeating… avoid using tiny CTAs 29
  30. 30. 30 “FINGERTIP LEGIBILITY”
  31. 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. 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. 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. 34. Make interactive elements large and inviting. 34 Large, salient elements on a mobile advertisement make users confident and mitigate risk for error.
  35. 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. 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. 37. Optimize the experience. Any screen, anywhere. 37
  38. 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. 39. For the latest ad formats… 39 Visit showcase.sizmek.com/formats or e-mail info@sizmek.com Scan Me
  40. 40. Thank You All images and copy property of their respective owners. ©2015 Sizmek, Inc. All rights reserved.
  41. 41. NEW product announcement! 41
  42. 42. Ad Builder for HTML5! 42 Streamline creation of HTML5 ads for mobile and desktop WITHOUT CODE
  43. 43. Get More Info… 43 Visit go.sizmek.com/adbuilder-for-html5.html or e-mail info@sizmek.com Scan Me

×