Mobile first 2-27_14-slidesonly
0 likes693 views
This document discusses best practices for mobile-first user experience (UX) and content strategy. It recommends designing for mobile first to take advantage of greater opportunities, better focus on mobile needs, and potential for more innovation. Key aspects covered include understanding the audience, defining experience principles through mapping the user journey, planning adaptive content that can be reused across devices, and wireframing designs based on user needs and content requirements.
Mobile first 2-27_14-slidesonly
- 1. MOBILE FIRST An Intro to UX & Content Strategy Best Practices for the Mobile Web Kerry Carnahan Ellis & Nicolas Perner - 27 Feb 2014 1
- 3. 📱 MOBILE FIRST …and second, and third 3
- 4. WHAT IS MOBILE FIRST? Thank you, Mr. Wroblewski! http://www.lukew.com/ff/entry.asp?933 4
- 5. THREE RATIONALES For Mobile First Methodology » Greater Opportunity » Better Focus » More Innovation 5
- 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
- 8. INNOVATION What will “mobile” mean next? 8
- 11. GRACEFUL DEGRADATION Where to start? 11
- 12. PROGRESSIVE ENHANCEMENT Where to start? 12
- 13. I’M IN. NOW WHAT?! Let’s think differently. Some best practices and process. 13
- 14. MOBILE IS NOT THE “LITE“ VERSION OF YOUR SITE. 14
- 15. UNDERSTAND YOUR AUDIENCE Who are we designing for? » Motivations & Objectives » Biographical Sketches » Usage Contexts » Domain Knowledge 15
- 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. WHAT ABOUT THE CONTENT? http://www.jeep.com/en/ 18
- 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. 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. 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. TO FORK, OR NOT TO FORK? Hard Task, Good Example 22
- 23. WIREFRAMING Based on user needs and content requirements. http://www.flickr.com/photos/43868681@N02/4066039551/ 23
- 24. WIRE FRAMING Based on user needs and content requirements. 24
- 25. FUTURE DISCUSSION Other important things, out of scope for this presentation. 25
- 26. WHAT CONTENT TO KEEP ON WHAT DEVICE? 26