2. 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)
3. 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
4. What are Mobile devices
• Portable
• Hand held
• Usually refers to
Smart Phones
or Tablets
(with a touch screen)
Picture from jquerymobile.com
5. The Big 3
From left: Lumia 900, iPhone 5, Samsung Galaxy S3
Picture from : www.cnet.com/iphone-5/
8. 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
9. Using mobile devices for
instruction
Katy ISD -- A New Vision for Mobile Learning
10. What kind of technical content can
we write for mobile devices?
11. Non APP Content on Mobile
• User instructions
• Technician instructions
• Installation
• On-site service information
• Reference material
• Programming Maps
• Code samples and snippets
• Instruction videos
12. Instructions for APPs
• Help
• Content Sensitive Help
• Tutorial, Walk-through and Demo
• Reference material
• Instruction videos
13. 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
15. “Reading Mobile Content Is
Twice as Difficult”
Jakob Nielsen reader comprehension on mobile
Summary: When reading from an iPhone-sized
screen, comprehension scores for complex Web
content were 48% of desktop monitor scores.
Analysis of Facebook's privacy policy
Results:
Desktop screen: 39.18% comprehension score
Mobile screen: 18.93% comprehension score
Source: www.nngroup.com/articles/mobile-content-is-twice-as-difficult/
16. 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.
17. 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/
18. 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
19. Keep it Light
• Heavy graphics and media slow down the
phone and can cause time out.
Picture from www.tested.com/
20. Design for Easy Thumb Reach
• Controls at the bottom
• Scrollable content and buttons
in the middle.
• Headers for viewing only on
top.
• Consider left handers
Picture from//mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
31. Output Types
• Instruction APP
• Stand alone PDFs
• Widget or Mobile Website
• Help
• Mobile help
• HTML5
• ePub for Reading devices
32. 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)
33. 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
34. Where to Find Further Information
• Tapworthy Designing Great iPhone Apps
By Josh Clark
Publisher: O'Reilly Media
• Content Strategy For Mobile
By Karen Mcgrane
• Neil Perlin
• Tom Johnson - idratherbewriting.com
• www.SmashingMagazine.com
• Mobile Summit
• Mobile Mondays (www.momotlv.com)
smaller screen hurts comprehension because: Users can see less at any given time. Thus, users must rely on their memory when trying to understand anything that's not fully explained within the viewable space. Less context = less understanding Users must move around the page more, using scrolling to refer to other parts of the content instead of simply glancing at the text. Scrolling introduces 3 problems: It takes more time , thus degrading memory. It diverts attention from the problem at hand to the secondary task of locating the required part of the page. It introduces the new problem of reacquiring the previous location on the page.
Short term memory – don’t expect reader to remember information from one screen to another.
Rotation is often turned off. Users must move around the page more, using scrolling to refer to other parts of the content instead of simply glancing at the text. Scrolling introduces 3 problems: It takes more time , thus degrading memory. It diverts attention from the problem at hand to the secondary task of locating the required part of the page. It introduces the new problem of reacquiring the previous location on the page.
http://mobiledesignpatterngallery.com
Convertbot is a unit conversion tool. Upon first launching the app, it asks the user up-front if they’d like to view a demo of how it works, then uses an animated demo along with bubble callouts to demonstrate the end-to-end action of converting something within the app. This demo is also accessible under the “Support” screen in the app, allowing the user to view it at a later time.
http://mobiledesignpatterngallery.com
http://mobiledesignpatterngallery.com
Designing for mobile like shift from PDF to Help in 2000. Widget or Mobile Website – can be updated easily.
Designing for mobile like shift from PDF to Help in 2000. Widget or Mobile Website – can be updated easily.
Iridize – on page instructions – webapps. PDF good quality graphics to the side