Efficient and Graceful Multi-Channel Content

Authoring and

Publishing

Joe Welinske Welinske.com

joewe@writersua LinkedIn: userassistance

The device population keeps growing

• Desktop – a dozen or so variants

• iPhone/iPad – 6 models

• Windows Phone – 30

• Android – 3900+

• Automobiles – ?dozens?

• Smart TV – ?dozens?

http://opensignal.com/reports/fragmentation.php

Android variants (Samsung)

Desktop Tablet

Phone

Car

Dash

Home

Ent.

NFC

How do you adjust gracefully? And efficiently?

• Screen dimensions

• Screen resolution

• UI Elements

• Proprietary OS

Components

• Rapid interation

Matching presentation & content with a device…

…without crafting solutions for each device

… supporting these governing conditions:

Responsive Design

• The presentation of information

adjusted for different “device types”

• Page layout, information types

• Text and image size

• Navigation elements: inclusion/exclusion and placement

• Big idea: A smartphone is not a smaller

version of the desktop

• Resources

• http://bradfrost.github.io/this-is-responsive/resources.html

See my recorded presentation on Adobe.com: “Multi-screen Help Authoring”

Source

cs Desktop

1080 x 724

1280 x 720

cs 10” Tablet

iPad 2 iPad 3 Galaxy Tab

cs 7” Tablet

Kindle Fire

Galaxy Tab

cs Phone

iPhone Nokia Lumia

Samsung Note

Source

cs Desktop

1080 x 724

1280 x 720

cs 10” Tablet

iPad 2 iPad 3 Galaxy Tab

cs 7” Tablet

Kindle Fire

Galaxy Tab

cs Phone

iPhone Nokia Lumia

Samsung Note

Source

cs Desktop

1080 x 724

1280 x 720

cs 10” Tablet

iPad 2 iPad 3 Galaxy Tab

cs 7” Tablet

Kindle Fire

Galaxy Tab

cs Phone

iPhone Nokia Lumia

Samsung Note

iPad Mini

Kindle Fire HD

iPhone 3G X

MacBook Pro

• Content in a central database.

• Separate output packages for various use cases

Advantages

• Help-specific authoring, e.g. related topics, navigation

• CSS expertise is not required.

Challenges

• Prototyping of output designs

• Scaling to a small-screen use case

• Integrated with suites

• Content in HTML files

• Single-source HTML manipulated by CSS/Media Query

Advantages

• A single set of cross-platform output files to manage

• Extremely powerful CSS/Media Query editor

Challenges

• No Help-specific capabilities

• Requires a strong understanding of CSS

• Integrated with Creative Suite

The Help-specific Tool Approach

The HTML/CSS–specific Tool Approach

Solutions

A Layout Editor - RoboHelp

Multiscreen Settings - RoboHelp

• Device types

• Navigation elements

• Variables (custom vocabularies)

• Conditional builds

Content Object – “City”

Object heirarchy selection

Mobile output from authoring tools

Varied approaches

from different vendors

• Flare

• RoboHelp

• Doc-to-Help

• Author-it

• oXygen

• ePublisher

Responsive design

Object heirarchy selection

Multi-screen Preview - Dreamweaver

W3C Media Query Spec:

http://www.w3.org/TR/css3-mediaqueries/

Media Query

iOS Developer Library: http://tinyurl.com/aycbkp4

Introduction to CSS Media Queries:

http://tinyurl.com/b4cx9rk

Adaptive Content

• Responsive Design is not the same as, and

does not compete, with Adaptive Content.

• Adaptive Content is adjusted for different

use cases and interaction types.

• Task analysis in context

• Context includes device types.

• Word and image choices at a granular level

• Big idea: Small-screen content is about the

right choices, not just fewer words.

Emerging Content Techniques

• Interaction-specific instructions and

user-defined variables

• Device-specific instructions with

conditional text

• Micro-concise text for mobile

• Flat navigation for small screens

• The first-time user experience

• Voice support

Interaction verbs: Generic or Custom

• Generic

• “To change the widget setting, select Preferences.”

• “Scroll to view additional items.”

• “Move the unused items to the trash.”

• Custom

• Click, double click, click and drag

• Tap, double tap, flick

• Hover, wave left/right

• Press left, press down, select

• Say “Preferences, then widget setting”

Double-taps aren’t generic

• WP8: To change between full-screen

and fit-to-screen viewing, double-tap

the screen.

• Analog: Double-click

• Android: To dismiss an overlay, swipe

right and double-tap OK.

Analog: ESC

• iOS: Double-tap a word to select it.

Analog: Highlight

Windows 8 Help topic example

Single-source, Conditional Text Output

Laptop

Phone

TV

Command Language Interaction Table

Tablet

Phone

TV

Car

Laptop

Variable Interaction Scheme

User-defined variables

+ Screen profiles

+ Multi-screen output

1. Define your variable.

2. Add variable to your topics.

3. Assign variable sets to screen profiles.

See my recorded presentation on Adobe.com: “Employing a Flexible Interaction Language Scheme with User Defined Variables (UDVs)”.

Define your UDVs

• Create a table of possible interaction

types. Update as needed.

• Variable names can be whatever

represents the interactions best.

Excel Worksheet

Define your UDVs

• From the View menu in RoboHelp, select

Pods, then select User Defined Variables.

• Each row in your command interaction table

is used to build a new variable set.

• Tip: Use the “Default Variable Set” for

generic commands.

Define your UDVs

• Create variable sets for each of the

remaining four interaction types.

• Click the green plus-sign. In the Variable

Set box, click Add.

Add the UDVs to your topics

• Highlight an interaction verb.

• From the Insert menu select User

Defined Variable. Repeat, repeat…

Assign UDV sets to screen profiles

• (Create screen profiles.)

• Properties > Screen Profiles > Variables Set

Miscellaneous issues

Supporting capitalization

Variable Name Generic Mouse Touch

Command_Select select click tap

Command_Select_ic Select Click Tap

Using images

• You can add variable images to your RH project.

• Use HTML IMG element in the “Variable Value” field.

Miscellaneous issues

Supporting capitalization

Variable Name Generic Mouse Touch

Command_Select select click tap

Command_Select_ic Select Click Tap

Using images

• Add images to your RH project

• Use HTML in the “Value” fields

Gesture Resources

Touch Gesture Reference Guide

www.lukew.com/ff/entry.asp?1071

• iOS

• Android

• Windows Phone

• Mac

• Windows

• Others

Summary Recommendations

• Use HTML/CSS-specific tools for prototype

design for CSS and Media Queries

• Import prototypes into Help tools

• Use Help tool for Content Authoring and

Publishing

• Test designs with users before implementation.

• For Smartphones, small-screen devices: evaluate whether any automation of authoring and publishing is effective.

Source

cs Desktop

1080 x 724

1280 x 720

cs 10” Tablet

iPad 2 iPad 3 Galaxy Tab

cs 7” Tablet

Kindle Fire

Galaxy Tab

cs Phone

iPhone Nokia Lumia

Samsung Note

Source

cs Phone

iPhone Nokia Lumia

Samsung Note

Flatten Navigation for Small Screens

Or eliminate

completely

Summary

• Responsive design

• The presentation of information adjusted for different “device types”.

• Consider HTML5/CSS/Media Query Scheme.

• Adaptive content

• Choose a direction for your multiple interaction types vocabulary.

• Reflect on 4 “C”s for emerging device types.

• For small-screen devices, craft content to be short and flat.

• Focus efforts on the first-time UX.

Windows 8.1 – Evernote Modern App Help

Wearable opportunities?

http://blog.getpebble.com/2014/03/07/

http://pebblecanvas.blogspot.co.uk/p/user-guide.html

Samsung Galaxy Gear

Delivery of UA through social / mobile

Software everywhere = UA everywhere

Chili’s

Blue-ray player Airline player

LG Smart Washer

Efficient and Graceful Multi-Channel Content

Authoring and

Publishing

Joe Welinske Welinske.com

joewe@writersua LinkedIn: userassistance