Efficient and Graceful Multi-Channel Content Authoring and Publishing

Transcription

1 Efficient and Graceful Multi-Channel Content Authoring and Publishing Joe Welinske Welinske.com LinkedIn: userassistance

2 The device population keeps growing Desktop a dozen or so variants iphone/ipad 6 models Windows Phone 30 Android Automobiles?dozens? Smart TV?dozens?

3 Android variants (Samsung)

4 NFC Phone Tablet Desktop Car Dash Home Ent.

5 How do you adjust gracefully? And efficiently? Matching presentation & content with a device without crafting solutions for each device supporting these governing conditions: Screen dimensions Screen resolution UI Elements Proprietary OS Components Rapid interation

6 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

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

8 Samsung Note Nokia Lumia iphone Galaxy Tab Kindle Fire cs Phone cs 7 Tablet Source cs Desktop cs 10 Tablet 1080 x x 720 ipad 2 ipad 3 Galaxy Tab

9 Samsung Note Nokia Lumia iphone Galaxy Tab Kindle Fire cs Phone cs 7 Tablet Source cs Desktop cs 10 Tablet 1080 x x 720 ipad 2 ipad 3 Galaxy Tab

10 ipad Mini Samsung Note Nokia Lumia iphone Galaxy Tab Kindle Fire cs Phone iphone X 3G Source cs 7 Tablet cs Desktop cs 10 Tablet 1080 x x 720 ipad 2 ipad 3 Galaxy Tab MacBook Pro Kindle Fire HD

11 The Help-specific Tool Approach Solutions The HTML/CSS specific Tool Approach 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

12 A Layout Editor - RoboHelp

13 Multiscreen Settings - RoboHelp Device types Navigation elements Variables (custom vocabularies) Conditional builds

14 Content Object City Object heirarchy selection

15 Mobile output from authoring tools Varied approaches from different vendors Flare RoboHelp Doc-to-Help Author-it oxygen epublisher

16 Responsive design

17 Object heirarchy selection

18 Multi-screen Preview - Dreamweaver

19 Media Query Introduction to CSS Media Queries: W3C Media Query Spec: ios Developer Library:

20 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.

21 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

22 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

23 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

24 Windows 8 Help topic example

25 Single-source, Conditional Text Output Phone Laptop TV

26 Command Language Interaction Table Laptop Tablet Phone TV Car

27 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).

28 Define your UDVs Create a table of possible interaction types. Update as needed. Variable names can be whatever represents the interactions best. Excel Worksheet

29 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.

30 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.

31 Add the UDVs to your topics Highlight an interaction verb. From the Insert menu select User Defined Variable. Repeat, repeat

32 Assign UDV sets to screen profiles (Create screen profiles.) Properties > Screen Profiles > Variables Set

33 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.

34 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

35 Gesture Resources Touch Gesture Reference Guide try.asp?1071 ios Android Windows Phone Mac Windows Others

36 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.

37 Samsung Note Nokia Lumia iphone Galaxy Tab Kindle Fire cs Phone cs 7 Tablet Source cs Desktop cs 10 Tablet 1080 x x 720 ipad 2 ipad 3 Galaxy Tab

38 Samsung Note Nokia Lumia cs Phone iphone Source

39 Flatten Navigation for Small Screens Or eliminate completely

40 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.

41 Windows 8.1 Evernote Modern App Help

42 Wearable opportunities? co.uk/p/user-guide.html Samsung Galaxy Gear

43 Delivery of UA through social / mobile

44 Software everywhere = UA everywhere LG Smart Washer Chili s Blue-ray player Airline player

45 Efficient and Graceful Multi-Channel Content Authoring and Publishing Joe Welinske Welinske.com LinkedIn: userassistance