Mobile Inbox 101: Email Design Content & User Experience
•
0 gefällt mir•518 views
How do subscribers interact with emails on mobile devices? Is a mobile tap worth as much as a desktop click? What type of content doesn’t make sense on mobile devices? Learn the importance of mobile optimization as we reinvent email. This presentation was given at Connections 2013 on Wednesday, September 18, 2013 by Alex Williams & Kristina Huffman.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (17)
Ähnlich wie Mobile Inbox 101: Email Design Content & User Experience
Ähnlich wie Mobile Inbox 101: Email Design Content & User Experience (20)
Mehr von Alex Williams
Mehr von Alex Williams (6)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Mobile Inbox 101: Email Design Content & User Experience
- 2. The Mobile Inbox 101 Content strategy and userexperience lessons toconnect with yourmobile subscribers.
- 8. The mobile barrier still exists 13% 25% 0% 5% 10% 15% 20% 25% 30% Mobile clickthrough rate Desktop clickthrough rate Mobile openers still tap less than desktop openers. Click-to-openrate Click-to-open rates for a B2C customer
- 10. For one retailer, 72% opened the email once.
- 11. For one retailer, 81% clicked the email once.
- 13. Designing content for [sm]all screens
- 16. Resist the Kitchen Sink
- 17. 1. Pull click overlays for a variety of sends from the same template 2. Analyze each static section, cut content that has historically performed low 3. Trace “required” content back to the source to understand rationale. 4. Prioritize content into top three clicks Ensure all clicks tie back to overall email goals. Something’s gotta go… Mobile Success Requires Tough Choices
- 18. Ensure all clicks tie back to goals. Be ruthless.
- 19. Give them “The Ten Peso Version”
- 20. [sm]All Screens Require Focus: 3 Questions to Ask For Your Next Email… What Why How is the point of this email? should they care? do they take action?
- 21. What? Why? How? Optimize each modular section of an email for fast comprehension, not just real estate. Users might jump straight from What to How, with the general content and imagery of the inner triangle acting as the Why. How it WorksAnswer All 3 in One Glance
- 22. Answer All 3 in One Glance
- 23. The Triangle in actionAnswer All 3 in One Glance
- 24. Countdown to what? The Triangle in actionAnswer All 3 in One Glance
- 26. Branding on Mobile • Don’t design yourself into a box, give yourself visual flexibility • Consistent Type, CTA’s and Styles will hold your brand together across screens • The message, tone, and feel is your brand, not pixel perfect rendering of your layout across 50 email clients
- 27. UI: Use Mobile Conventions “The most beautiful toilet sign is useless if men constantly walk into the ladies’ room” -Oliver Reichenstein
- 28. UI: Make calls to action stand out with color, whitespace, placement Source: HubSpot Protip: Whatever stands out gets clicked. winner
- 29. • Use them. Don’t hide them on mobile Images
- 30. • Use them. Don’t hide them on mobile Images
- 31. • Use them. Don’t hide them on mobile • Accommodate retina now Images Fuzzy image- based button
- 32. • Use them. Don’t hide them on mobile • Accommodate retina now • CSS > image-based elements Images
- 33. • Use them. Don’t hide them on mobile • Accommodate retina now • CSS > image-based elements • Rethink borders: the device is the container Images Border- mania!
- 34. ExactTarget.com Blog video content – average viewing duration by device Video was made for mobile
- 35. Testing and Tracking Mobile It’s a whole different ballgame
- 36. Testing & Failing Mobile has made email testing & analysis a bit more complicated…
- 37. All data points are not created equal. • Open • Click • Unsubscribe • In store conversion • Online conversion • Website visits • Engagement • Logins/Registrations • POS conversion • Coupon Redemption • Social sharing How are they trending over time?
- 39. Analysis Then… Avs. BOpen Click Through Click to Open a Conversion a Unsubscribe Open a Click Through a Click to Open Conversion Unsubscribe a Winner
- 40. Analysis Now… Desktop Open Rate Click Through a Click to Open Conversion Conversion Avg. $$ Unsubscribea Tablet Open Rate Click Through Click to Opena Conversion Conversion Avg. $$ Unsubscribe Smartphone Open Rate a Click Through Click to Open Conversion Conversion Avg. $$ Unsubscribe Multi-Open Combo Open Rate Click Through Click to Open Conversion Conversion Avg. $$ a Unsubscribe
- 41. Version B, the Responsive design email saw a double digit increase in sales of items that start at over $1,700 at a 94% confidence level. (A- Fixed Width) (B - Responsive) http://whichtestwon.com/bowflexs-responsive-design-test-results A- Fixed Width Open Rate a Click Through a Click to Open a Conversion Conversion Avg. $$ B - Responsive Open Rate Click Through Click to Open Conversion a Conversion Avg. $$ a Case Study
- 42. Failing in Testing is OK, as long as you learn something. Don’t test until you win/lose, test until you understand why.
- 43. Testing to Understand • Gradually introduce mobile optimization techniques • Keep as much similar creatively as possible until you have solid data • Stay focused on key data points, don’t get distracted by spikes in open/click • Test multiple emails over a an extended period of time in lieu of one off A/B tests.
- 44. Define goals • Branding • Performance • Production Efficiencies Download code samples • http://pages.exacttarget.com/ETDesign Identify a small team to pilot 1.Design 2.Code 3.Launch 4.Repeat repeat repeat Launch Do what’s best. Start now. Iterative testing
Hinweis der Redaktion
- We know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
- REDO IN PSWe know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
- REDO IN PSWe know that for any given campaign, 40% of opens are mobile, but look at the customers, not the campaign, we’ve found that 75% of the CUSTOMER BASE have opened email on mobile at any given point. These stats are always AFTER sends – let’s think about the NEXT send. How many subscribers got a new phone between your last send? They have expections.
- KThis doesn’t work on mobile. Barrier to click is higher. On average, Mobile opens usually have lower engagement but it’s not all your fault. That’s natural for the evolutionary state we’re in – Forget about the industry numbers of % opens on mobile, and think about the user and how the user is changing their behavior to decide how they are going to use these devices.
- The real question is not ‘what % of opens were on mobile on last week’s send?’ but ‘How many people have the potential to open on mobile next time? Next week? Next month?’ Am I ready?
- We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
- We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
- We have one chance to make an impression - you think you will read it later? you won’t.3-5% of opens are repeats
- Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
- Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
- KThis doesn’t work on mobile. Barrier to click is higher. On average, Mobile opens usually have lower engagement but it’s not all your fault. That’s natural for the evolutionary state we’re in – Forget about the industry numbers of % opens on mobile, and think about the user and how the user is changing their behavior to decide how they are going to use these devices.
- Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
- Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
- Just make sure your UI stands out from the content, but borrow usability learnings from device ui.- Mobile magnifies the experience, good or bad. All about clarity and simplicity - the channel falls to the background, the content is projected. (screenshots of desktop vs mobile)- you are making up your own UI - don’t do that. think of a seamless experience between the phone’s ui and your email ui. they use their phone more than they use the ui in your email or your website. - emails are going to be more integrated into the phone in the future. undesign it.- ironically things are getting simpler as support increases. just because you can doesn’t mean you should. ahem, video.
- Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
- Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
- Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
- Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
- Use them. Don’t hide them on mobile 1. they’re already loading 2. your message will be consumed faster: your brain consumes images more quickly than textAccommodate retina now 1. why not? Do what’s best. Don’t piss off your most sophisticatedusers. CSS > image-based elements 1. support has finally tipped in favor of these elements. Degrade gracefully. Rethink borders: the device is the container 1. ImagesUse images on mobile - don’t hide them (they’re already loading). Make sure they are simple, clear to see small, high contrast, text overlays shrink down legibly, and file size is reasonable. say goodbye to print carryovers: RIP nested borders, rounded corners, excessive drop shadows and wraparounds. Use sparingly with a large helping of whitespace for the most visual impact. (let the iphone be the container - image of cereal box with a cereal box printed on it?)We’ll talk specifics around implementing images in 201 (low res scalable, retina considerations)Retina: do what’s better.
- Video content is extremely popular on mobile devices:Vine, instagram video, youtube (3rd most popular app), etc.Video content may lower barrier to click because video was made for mobile. it's a very familiar experience: no small text to read, headphones/audio is handy/familiar, engages two senses: sight and sound, very legible: content takes up whole screen, consistent/system UI for playback controls.In recent data gathered from video content on exacttarget.com, users watched video longer on tablets and phones than desktops. Host on landing page, closer to conversion opportunitiesSimilar results have been found throughout the web. Tablets love video.
- DefineWHY we’re doing this. It can be purely a brand decision to show innovation, also can be to prevent decrease in clicks, or maybe even increase clickthrough rate if you have a particularly bad mobile experience. You can’t prove value in a one-off AB test - responsive email is a long term investment in user experience. Don’t get stuck in concepting phase. Launch, test, watch over time. 1. make simple mobile aware/shrink wrap email with new content strategy 2. track engagement over time, iterate. I’d highly recommend a small pilot with a small agile team to flesh out process, tracking, etc. before rolling out to other BUs and email types.Emails can go from ideation to implementation in a matter of weeks - your web team can learn from your process, content strategy, testing approach, and success. Email is forgiving due to its high frequency, short shelf life, and endless segmentation/analytics possibilities. We know you need to show off metrics for internal buy-in. sometimes the inherent usability isn’t enough.We’re talking mostly to teams who design and code their own emails and paste code into the app, but you can start using responsive templates inside the ET editor now - xyz to enable, pick a format (show formats, tell how to turn on)