Your SlideShare is downloading. ×
0
MOBILE FIRST
An Intro to UX & Content Strategy Best Practices for the Mobile Web

Kerry Carnahan Ellis & Nicolas Perner - ...
📱
MOBILE FIRST
iPhone, anyone?

2
📱
MOBILE FIRST
…and second, and third

3
WHAT IS MOBILE FIRST?
Thank you, Mr. Wroblewski!

http://www.lukew.com/ff/entry.asp?933

4
THREE RATIONALES
For Mobile First Methodology

» Greater Opportunity
» Better Focus
» More Innovation

5
OPPORTUNITY
Some Stats

1. Nearly half of all American kids want an iPad for Christmas
2. Global mobile traffic now represe...
FOCUS
Removing distractions.

7
INNOVATION
What will “mobile” mean next?

8
SOME DEFINITIONS
Getting Buzzed…

9
RESPONSIVE DESIGN

10
GRACEFUL DEGRADATION

Where to start?

11
PROGRESSIVE ENHANCEMENT

Where to start?

12
I’M IN. NOW WHAT?!
Let’s think differently. Some best practices and process.

13
MOBILE IS NOT THE “LITE“
VERSION OF YOUR SITE.

14
UNDERSTAND YOUR AUDIENCE
Who are we designing for?

» Motivations & Objectives
» Biographical Sketches
» Usage Contexts
» ...
DEFINE EXPERIENCE PRINCIPLES

16
Rail Europe Experience Map
Guiding Principles

People choose rail travel because it is
convenient, easy, and flexible.

Rai...
WHAT ABOUT THE CONTENT?

http://www.jeep.com/en/

18
WHAT IS “CONTENT,”
ANYWAY?

SUBSTANCE

STRUCTURE

“What kind of content do
we need and what is it
about?

“How is content
...
ADAPTIVE CONTENT
» Content structure and chunking
(think “components,” not “pages”)
» Divorce content from presentation
(l...
CONTENT DEVELOPMENT
BEST PRACTICES

1.

Embrace mobile-first as the new mindset

2.

Understand your audience’s mobile hab...
TO FORK, OR NOT TO FORK?
Hard Task, Good Example

22
WIREFRAMING
Based on user needs and content requirements.

http://www.flickr.com/photos/43868681@N02/4066039551/

23
WIRE FRAMING
Based on user needs and content requirements.

24
FUTURE DISCUSSION
Other important things, out of scope for this presentation.

25
WHAT CONTENT TO KEEP
ON WHAT DEVICE?

26
DEFINE CONTENT
REQUIREMENTS

27
EXPERIENCE MAPPING

http://mappingexperiences.com/

28
DIVORCE CONTENT FROM
PRESENTATION

29
Upcoming SlideShare
Loading in...5
×

Mobile first 2-27_14-slidesonly

220

Published on

An Intro to UX & Content Strategy Best Practices for the Mobile Web

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile first 2-27_14-slidesonly"

  1. 1. MOBILE FIRST An Intro to UX & Content Strategy Best Practices for the Mobile Web Kerry Carnahan Ellis & Nicolas Perner - 27 Feb 2014 1
  2. 2. 📱 MOBILE FIRST iPhone, anyone? 2
  3. 3. 📱 MOBILE FIRST …and second, and third 3
  4. 4. WHAT IS MOBILE FIRST? Thank you, Mr. Wroblewski! http://www.lukew.com/ff/entry.asp?933 4
  5. 5. THREE RATIONALES For Mobile First Methodology » Greater Opportunity » Better Focus » More Innovation 5
  6. 6. OPPORTUNITY Some Stats 1. Nearly half of all American kids want an iPad for Christmas 2. Global mobile traffic now represents roughly 13% of Internet traffic 3. Nearly a third of all American adults own a tablet or e-reader 4. There are 5 billion mobile phone users in the world, but only 1 billion smartphone users 5. Android is growing after than anything http://www.forbes.com/sites/parmyolson/2012/12/04/5-eye-opening-stats-that-show-the-world-is-going-mobile/ 6
  7. 7. FOCUS Removing distractions. 7
  8. 8. INNOVATION What will “mobile” mean next? 8
  9. 9. SOME DEFINITIONS Getting Buzzed… 9
  10. 10. RESPONSIVE DESIGN 10
  11. 11. GRACEFUL DEGRADATION Where to start? 11
  12. 12. PROGRESSIVE ENHANCEMENT Where to start? 12
  13. 13. I’M IN. NOW WHAT?! Let’s think differently. Some best practices and process. 13
  14. 14. MOBILE IS NOT THE “LITE“ VERSION OF YOUR SITE. 14
  15. 15. UNDERSTAND YOUR AUDIENCE Who are we designing for? » Motivations & Objectives » Biographical Sketches » Usage Contexts » Domain Knowledge 15
  16. 16. DEFINE EXPERIENCE PRINCIPLES 16
  17. 17. Rail Europe Experience Map Guiding Principles People choose rail travel because it is convenient, easy, and flexible. Rail booking is only one part of people’s larger travel process. People build their travel plans over time. People value service that is respectful, effective and personable. Customer Journey STAGES Research & Planning RAIL EUROPE Shopping Enter trips Research destinations, routes and products Destination pages Review fares Select pass(es) Confirm itinerary Post-Booking, Pre-Travel Delivery options Payment options Review & confirm Change plans Map itinerary (finding pass) Print e-tickets at home Web FEELING Check ticket status Google searches • What is the easiest way to get around Europe? • Where do I want to go? • How much time should I/we spend in each place for site seeing and activities? • I’m excited to go to Europe! • Will I be able to see everything I can? • What if I can’t afford this? • I don’t want to make the wrong choice. E-ticket Print at Station View maps Paper tickets arrive in mail Look up timetables Research hotels • I want to get the best price, but I’m willing to pay a little more for first class. • How much will my whole trip cost me? What are my trade-offs? • Are there other activities I can add to my plan? • It’s hard to trust Trip Advisor. Everyone is so negative. • Keeping track of all the different products is confusing. • Am I sure this is the trip I want to take? Follow-up on refunds for booking changes Share photos Get stamp for refund Web Share experience (reviews) Buy additional tickets Kayak, compare airfare Blogs & Travel sites Share experience Activities, unexpected changes May call if difficulties occur Talk with friends Post Travel Live chat for questions DOING THINKING Travel Wait for paper tickets to arrive Look up time tables raileurope.com Plan with interactive map Booking • Do I have everything I need? • Rail Europe website was easy and friendly, but • Do I have all the tickets, passes and reservations web/ apps Arrange travel Plan/ confirm activities Request refunds • I just figured we could grab a train but there are • Trying to return ticket I was not able to use. Not when an issue came up, I couldn’t get help. • What will I do if my tickets don’t arrive in time? • Am I on the right train? If not, what next? • I want to make more travel plans. How do I • People are going to love these photos! • Next time, we will explore routes and availability • Stressed that I’m about to leave the country I need in this booking so I don’t pay more shipping? • Rail Europe is not answering the phone. How else can I get my question answered? not more trains. What can we do now? sure if I’ll get a refund or not. do that? more carefully. • I am feeling vulnerable to be in an unknown place in • Excited to share my vacation story with • Frustrated that Rail Europe won’t ship tickets • Stressed that the train won’t arrive on time for my • A bit annoyed to be dealing with ticket refund to Europe. • Happy to receive my tickets in the mail! • Website experience is easy and friendly! • Frustrated to not know sooner about which • Meeting people who want to show us around is fun, and Rail Europe won’t answer the phone. tickets are eTickets and which are paper tickets. Not sure my tickets will arrive in time. the middle of the night. my friends. connection. issues when I just got home. serendipitous, and special. Enjoyability Enjoyability Enjoyability Enjoyability Enjoyability Enjoyability Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Relevance of Rail Europe Helpfulness of Rail Europe EXPERIENCE Mail tickets for refund Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Helpfulness of Rail Europe Opportunities GLOBAL PLANNING, SHOPPING, BOOKING POST-BOOK, TRAVEL, POST-TRAVEL Communicate a clear value proposition. Help people get the help they need. Support people in creating their own solutions. Enable people to plan over time. Visualize the trip for planning and booking. Arm customers with information for making decisions. Improve the paper ticket experience. Accommodate planning and booking in Europe too. STAGE: Initial visit STAGES: Global STAGES: Global STAGES: Planning, Shopping STAGES: Planning, Shopping STAGES: Shopping, Booking STAGES: Post-Booking, Travel, Post-Travel STAGE: Traveling Make your customers into better, more savvy travelers. Engage in social media with explicit purposes. Connect planning, shopping and booking on the web. Aggregate shipping with a reasonable timeline. Proactively help people deal with change. Communicate status clearly at all times. STAGES: Global STAGES: Global STAGES: Planning, Shopping, Booking STAGE: Booking STAGES: Post-Booking, Traveling STAGES: Post-Booking, Post Travel Information sources Stakeholder interviews Cognitive walkthroughs Customer Experience Survey Existing Rail Europe Documentation http://www.adaptivepath.com/ideas/the-anatomy-of-an-experience-map/ 17 Ongoing, non-linear Linear process Non-linear, but time based Experience Map for Rail Europe | August 2011
  18. 18. WHAT ABOUT THE CONTENT? http://www.jeep.com/en/ 18
  19. 19. WHAT IS “CONTENT,” ANYWAY? SUBSTANCE STRUCTURE “What kind of content do we need and what is it about? “How is content organized, prioritized, and accessed?” Kristina Halvorson/Brain Traffic, “Content Strategy for the Web” http://www.contentstrategy.com 19
  20. 20. ADAPTIVE CONTENT » Content structure and chunking (think “components,” not “pages”) » Divorce content from presentation (let the platform make style decisions) » Meaningful metadata » Categories » Topics » Tags » Relationships to other content » Take it slow! http://www.abookapart.com/products/content-strategy-for-mobile 20
  21. 21. CONTENT DEVELOPMENT BEST PRACTICES 1. Embrace mobile-first as the new mindset 2. Understand your audience’s mobile habits 3. Plan & write for multi-format reuse 4. Focus on your headlines 5. Find opportunities to work your lead-ins 6. Mix up your content lengths 7. Consider the reading level 8. Introduce video and visual content 9. Use secondary screens http://www.forbes.com/sites/jaysondemers/2013/11/07/10-steps-to-creating-a-mobile-optimized-content-marketing-strategy/ 21
  22. 22. TO FORK, OR NOT TO FORK? Hard Task, Good Example 22
  23. 23. WIREFRAMING Based on user needs and content requirements. http://www.flickr.com/photos/43868681@N02/4066039551/ 23
  24. 24. WIRE FRAMING Based on user needs and content requirements. 24
  25. 25. FUTURE DISCUSSION Other important things, out of scope for this presentation. 25
  26. 26. WHAT CONTENT TO KEEP ON WHAT DEVICE? 26
  27. 27. DEFINE CONTENT REQUIREMENTS 27
  28. 28. EXPERIENCE MAPPING http://mappingexperiences.com/ 28
  29. 29. DIVORCE CONTENT FROM PRESENTATION 29
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×