Upload
maya-irving-regev
View
1.954
Download
2
Embed Size (px)
Citation preview
Going MobileWhat you need to know
to create content for mobile devices
In This Presentation
• Mobile and Mobile devices
• Types of technical content to write for mobile
• Design considerations (layout, language)
• Look at instructions for mobile devices
• Publishing to mobile (Out put types, Tools, Single sourcing)
What is mobile?“It’s not about the platform or technology its
about the context. And when we differentiate by context, mobile as a concept, and a device, … into a range of scenarios: from interacting with the barcodes in a shop, to checking the bus schedule on your way to the station, playing games hours on end or spending 10 minutes reading through an article ...” Helge Tenno
What are Mobile devices
• Portable• Hand held • Usually refers to
Smart Phones or Tablets (with a touch screen)
Picture from jquerymobile.com
The Big 3
From left: Lumia 900, iPhone 5, Samsung Galaxy S3
Picture from : www.cnet.com/iphone-5/
Mobile (R)EvolutionMOCOM 2020 - The Future of Mobile Media and Communication
Source: www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1
Mobile in 2013• Brand wars will fuel innovation
• Apps evolving and becoming more useful not just
“time killers” and games.
• Digital wallets
• Flexible devices
• Personal cloud
• Seamless user experience
Using mobile devices for instruction
Katy ISD -- A New Vision for Mobile Learning
What kind of technical content can we write for mobile devices?
Non APP Content on Mobile• User instructions• Technician instructions• Installation • On-site service information• Reference material• Programming Maps• Code samples and snippets• Instruction videos
Instructions for APPs
• Help• Content Sensitive Help • Tutorial, Walk-through and Demo• Reference material• Instruction videos
APP Types• Native APPs
• Native to the devices operating system, are installed and run directly on the device.
• Has access to the devices features, hardware, ect.• Do not work cross platform
• Web APPs• Runs in the mobile device’s web browser.• Limited access to the device’s native features • Can run in different devices as long as they have a
browser.
Picture from http://info.actionpaper.net
Design Considerations
Picture from www.mlwebco.com
“Reading Mobile Content Is Twice as Difficult”
Jakob Nielsen reader comprehension on mobileSummary: When reading from an iPhone-sized screen, comprehension scores for complex Web content were 48% of desktop monitor scores. Analysis of Facebook's privacy policyResults:Desktop screen: 39.18% comprehension scoreMobile screen: 18.93% comprehension score
Source: www.nngroup.com/articles/mobile-content-is-twice-as-difficult/
Keep it Focused
• Clutter free main page with links to other topics.
• Each page should focus on a topic.• Reading on small devices is hard - text is often
skimmed. • Useful information should be found at a
glance.
Keep it Vertical• Handheld devices are usually used in vertical
mode.• Scrolling down is fine,
sideways is okay sometimes. Scrolling up, down left & right is disorienting.
Picture from www.funnyjunk.com/
Keep it in Style• Mobile Users have mobile design expectations
layout, buttons, mobile language • Apps have character
Picture from wt.blog.ictea.com/?cat=11
Keep it Light
• Heavy graphics and media slow down the phone and can cause time out.
Picture from www.tested.com/
Design for Easy Thumb Reach
Picture from//mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
• Controls at the bottom• Scrollable content and buttons
in the middle.• Headers for viewing only on
top.• Consider left handers
Mobile Language
Source: http://static.lukew.com/TouchGestureCards.pdf
Sample of Help
http://mobiledesignpatterngallery.com
Sample of Tutorial
Source: www.inspireux.com/
Sample of Walkthrough
Source: www.inspireux.com/
Sample of Screen Overlay
www.inspireux.com/
http://mobiledesignpatterngallery.com
http://mobiledesignpatterngallery.com
Sample of instructions
Publishing to Mobile
Picture from 123rf.com
Output Types
• Instruction APP• Stand alone PDFs• Widget or Mobile Website• Help
• Mobile help• HTML5
• ePub for Reading devices
Tools
• Wiziapps – for making APP’s• Iridize – on page instructions, walkthrough
demos• PDF• Flare (Web APP and HTML5) • Robohelp 10 (Android native APP & Web APP)
Single Sourcing
• Flare (Web APP and HTML5) • Robohelp 10 (Android native APP & Web APP)
• Plan for Mobile content:• Skins• Page breaks• Mobile language• Remove or trim graphics
Where to Find Further Information• Tapworthy Designing Great iPhone Apps
By Josh ClarkPublisher: O'Reilly Media
• Content Strategy For MobileBy Karen Mcgrane
• Neil Perlin • Tom Johnson - idratherbewriting.com• www.SmashingMagazine.com• Mobile Summit• Mobile Mondays (www.momotlv.com)
Thank You•mayairv@yahoo•@Maya_Regev