why you should use a mobile-first strategy

27
DESIGNING TECHNICAL DOCUMENTATION FOR A MOBILE AUDIENCE STEVE BAIN, MANAGER PRODUCT EDUCATION & CUSTOMER SUCCESS TERADICI CORPORATION

Upload: steve-bain

Post on 25-Jan-2017

15 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Why You Should Use a Mobile-First Strategy

DESIGNING TECHNICAL

DOCUMENTATION FOR A MOBILE

AUDIENCES T E V E B A I N , M A N A G E RP R O D U C T E D U C AT I O N

& C U S T O M E R S U C C E S S T E R A D I C I C O R P O R AT I O N

Page 2: Why You Should Use a Mobile-First Strategy

ABOUT ME• Technical communications manager,

specializing in Web publishing, WebCMS publishing, and building teams that engage and inspire customers

• 35+ years in communications providing content solutions that deliver better product education content that improves the end user experience and provides measurable ROI

• Delivering flexible, cloud-based publishing solutions and content strategies that turn customers into product advocates

S T E V E B A I NManagerProduct Education & Customer Success [email protected]

Page 3: Why You Should Use a Mobile-First Strategy

WHY USE A MOBILE-FIRST APPROACH?• Chances are, your documentation is being

found by someone using a mobile device search• This is a rapidly increasing trend• Look around. Most people love – and live

by – their mobile devices• Students spend more time on mobile

devices than any other device type• These are your future customers.

Page 4: Why You Should Use a Mobile-First Strategy

THE STATS Time Spent per User per Day with Digital Media, USA

2008-2015

Page 5: Why You Should Use a Mobile-First Strategy

MOST WEB TOOLS ARE FOR MARKETING CONTENT

• But, technical content serves a different purpose

– Doesn’t advertise or generate leads– Often features1,000s of topics– Includes detailed concepts, procedures,

and reference information– Potentially100s of illustrations, tables,

charts/graphs, and other stuff.

Page 6: Why You Should Use a Mobile-First Strategy

A MOBILE DOCUMENT DESIGN MUST HAVE…• Responsive elements, not fixed-width

layouts• Flat structure, not complex hierarchy• Concise, search-optimized content• Low-bandwidth elements• A simple, easy navigation UI• Offline viewing and printing.

Page 7: Why You Should Use a Mobile-First Strategy

ISSUES AND OBSTACLES• Many companies still use PDF for

technical documents • Microsoft Word is still the most common

tool used• Techcomm tools, Web technologies, and

WebCMS systems are all still evolving.

Page 8: Why You Should Use a Mobile-First Strategy

AND THIS…

AND THIS.

YOUR CONTENT NEEDS TO DO THIS…

Page 9: Why You Should Use a Mobile-First Strategy

DESIGN LIMITATIONS• A portrait-oriented mobile screen is one

third the width (320px) of a desktop screen (992px)• An average tablet screen is two thirds

(600px) the width of a standard desktop• Your technical documents must adapt to

the small screen size• They must also be readable and

navigable on the lowest common denominator

Page 10: Why You Should Use a Mobile-First Strategy

WHERE DO YOU START?

• If your documents don’t use structured authoring, define a stylesheet and stick to it• If your documents aren’t being written concisely, establish a concise-writing style• If you aren’t publishing documents in HTML, start doing this• If your tools don’t enable you to do these

things, find tools that will.

Page 11: Why You Should Use a Mobile-First Strategy

STRATEGIES TO ADOPT• Stop writing ‘books’• Stop creating page layouts• Stop numbering content• Stop over-organizing content• Simplify complexity• Publish longer pages• Make navigation and search easy• Hide non-essential elements.

Page 12: Why You Should Use a Mobile-First Strategy

STOP WRITING ‘BOOKS’• Tech docs are not read like story books• Think of your documents as relevant

topic lists• Write topics as ‘standalones’• Write concisely• Extract reference content (glossaries,

lists, knowledge base articles).

Page 13: Why You Should Use a Mobile-First Strategy

STOP CREATING LAYOUTS• Let the device browser control the

layout• Use structured stylesheets• Forget left/right pages• Eliminate multi-column text• Use code to add functions and add

interactivity.

Page 14: Why You Should Use a Mobile-First Strategy

STOP NUMBERING STUFF• Don’t number sections, chapters, or

pages• Don’t number screen captures, figures,

or tables• Make all elements targets you can link

to them from anywhere within your content• At a minimum, make all headings and

subheadings target links.

Page 15: Why You Should Use a Mobile-First Strategy

USE LINKS, NOT NUMBERS

Example: documents.polycom.com

Page 16: Why You Should Use a Mobile-First Strategy

DON’T OVER-ENGINEER

Complex structures are lost on mobile audiences• Avoid highly nested topic hierarchies,

nested tables, and nested procedures• Flatten and simplify• Use two levels maximum for everything.

Page 17: Why You Should Use a Mobile-First Strategy

MAKE NAVIGATION & SEARCHES EASY• Always show your audience where they are• Give them a map to navigate by• Keep search readily accessible• Use explanatory or task-based headings, not

vague content labels• Documents are often found via a search for

a specific answer to a specific question• Use internal links, avoid duplicating content.

Page 18: Why You Should Use a Mobile-First Strategy

MAKE SEARCH AVAILABLE

Example: Search Options/Polycom, Safari Books

Page 19: Why You Should Use a Mobile-First Strategy

PROVIDE SIMPLE WAYS TO MOVE THROUGHCONTENTExample: Safaribooksonline.com

Page 20: Why You Should Use a Mobile-First Strategy

PROVIDE TOPIC MAPS

Example: documents.polycom.com

Page 21: Why You Should Use a Mobile-First Strategy

PUBLISH LONG WEB PAGES

• Publish large sections as single Web pages• Long pages require less navigation• Use ‘lazy loading’ to load page content

based on screen size• Enables your audience to start reading

immediately.

Page 22: Why You Should Use a Mobile-First Strategy

HIDE NON-ESSENTIALS• Use a collapsible-content strategy that

defines primary and secondary content• Enables you to show primary content and

hide secondary details• Frees up space for most important content• Secondary content can be elements such

as procedures, tables, and image captions• Can be initially collapsed or expanded as

needed.

Page 23: Why You Should Use a Mobile-First Strategy

HIDE NON-ESSENTIALS

Example: Collapsible Procedure/documents.polycom.com

Page 24: Why You Should Use a Mobile-First Strategy

HIDE NON-ESSENTIALS

Example: Collapsible Table/documents.polycom.com

Page 25: Why You Should Use a Mobile-First Strategy

HIDE NON-ESSENTIALS

Example: Collapsible Image Captions/cbc.ca

Page 26: Why You Should Use a Mobile-First Strategy

MOBILE DESIGN SOLVES IMPORTANT PROBLEMS• Mobile design forces you to innovate

and reinvent your technical communication content• Scaling up a mobile documentation site

up to a desktop design is easier than doing the opposite• A great mobile documentation site often

looks even better on larger screens.

Page 27: Why You Should Use a Mobile-First Strategy

THANK [email protected]