Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Multi Channel Publishing

1,435 views

Published on

Presentation for STC Conference 2013.

Published in: Technology

Multi Channel Publishing

  1. 1. Efficient and GracefulMulti-Channel ContentAuthoringandPublishingJoe WelinskeWelinske.comjoewe@writersuaLinkedIn: userassistance
  2. 2. Whatchanged?
  3. 3. 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?
  4. 4. http://opensignal.com/reports/fragmentation.phpAndroid variants (Samsung)
  5. 5. DesktopTabletPhoneCarDashHomeEnt.NFC
  6. 6. Sony media player remote• QWERTY keyboard• motion control• microphone (forvoice commands)• touchpad
  7. 7. How do you adjust gracefully? And efficiently?• Screen dimensions• Screen resolution• UI Elements• Proprietary OSComponents• Rapid interationMatching presentation & content with a device……without crafting solutions for each device… supporting these governing conditions:
  8. 8. Responsive Design• The presentation of informationadjusted for different “device types”• Page layout, information types• Text and image size• Navigation elements: inclusion/exclusionand placement• Big idea: A smartphone is not a smallerversion of the desktop• Resources• http://bradfrost.github.io/this-is-responsive/resources.html
  9. 9. See my recorded presentation on Adobe.com:Multi-screen Help Authoring”
  10. 10. SourcecsDesktop1080 x7241280 x720cs 10”TabletiPad 2 iPad 3GalaxyTabcs 7”TabletKindleFireGalaxyTabcsPhoneiPhoneNokiaLumiaSamsungNote
  11. 11. SourcecsDesktop1080 x7241280 x720cs 10”TabletiPad 2 iPad 3GalaxyTabcs 7”TabletKindleFireGalaxyTabcsPhoneiPhoneNokiaLumiaSamsungNote
  12. 12. SourcecsDesktop1080 x7241280 x720cs 10”TabletiPad 2 iPad 3GalaxyTabcs 7”TabletKindleFireGalaxyTabcsPhoneiPhoneNokiaLumiaSamsungNoteiPad MiniKindle Fire HDiPhone 3GXMacBook Pro
  13. 13. W3C Media Query Spec:http://www.w3.org/TR/css3-mediaqueries/Media QueryiOS Developer Library: http://tinyurl.com/aycbkp4Introduction to CSS Media Queries:http://tinyurl.com/b4cx9rk
  14. 14. Adaptive Content• Responsive Design is not the same as anddoes not compete with Adaptive Content.• Adaptive Content is adjusted for differentuse 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 theright choices, not just fewer words
  15. 15. Emerging Content Techniques• Interaction-specific instructions anduser-defined variables• Device-specific instructions withconditional text• Micro-concise text for mobile• Flat navigation for small screens• The first-time user experience• Voice support
  16. 16. 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”
  17. 17. Windows 8 Help topic example
  18. 18. Single-source, Conditional Text OutputLaptopPhoneTV
  19. 19. Command Language Interaction TableTabletPhoneTVCarLaptop
  20. 20. Variable Interaction SchemeUser-defined variables+ Screen profiles+ Multi-screen output1. 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 FlexibleInteraction Language Scheme with User Defined Variables (UDVs)”.
  21. 21. Gesture ResourcesTouch GestureReference Guidewww.lukew.com/ff/entry.asp?1071• iOS• Android• Windows Phone• Mac• Windows• Others
  22. 22. Touch Commands by Platform/Device
  23. 23. Gesture/Voice Commands by Platform/Device
  24. 24. Lexus NFC ad
  25. 25. o Contextualo Conformso Conditionalo Concise
  26. 26. What strikes you about this array of iPhone Help?• Native, not browser-based• Crafted, not automated• Highly visual, engaging• Small, but efficient
  27. 27. Tablet dimensions:allow for more activitywhich can mean acomplex touch UIwelinske.com/debating-the-value-of-walkthroughs/
  28. 28. Micro-concise instructions for small screensText automation doesn’tscale well smaller than a7” device
  29. 29. SourcecsDesktop1080 x7241280 x720cs 10”TabletiPad 2 iPad 3GalaxyTabcs 7”TabletKindleFireGalaxyTabcsPhoneiPhoneNokiaLumiaSamsungNote
  30. 30. SourcecsPhoneiPhoneNokiaLumiaSamsungNote
  31. 31. Flatten Navigation for Small ScreensOr eliminatecompletely
  32. 32. Design for the First-time User Experience`Usage over timeQuestionsFirst use is anedge case;support itaggressively
  33. 33. Design for the “Bumps” in the Road`Usage over timeQuestionsAdvancedFeatures Update/Upgrade
  34. 34. Voice Today• Automative may lead• Ford Sync• Honda Accord• Tesla• We need APIs• Android Google Voice• iOS Siri• Windows Phone APIwelinske.com/help-behind-the-wheel/
  35. 35. Writing for Voice is Different“…Break it down”Select * Back * Scroll * Assemble * Firing Range * Rotate“Choose a section to modify”“Grab a part to change”
  36. 36. Summary• Responsive design• The presentation of information adjusted fordifferent “device types”.• Consider HTML5/CSS/Media Query Scheme.• Adaptive content• Choose a direction for your multiple interactiontypes vocabulary.• Reflect on 4 “C”s for emerging device types.• For small-screen devices, craft content to be shortand flat.• Focus efforts on the first-time UX.
  37. 37. Efficient and GracefulMulti-Channel ContentAuthoringandPublishingJoe WelinskeWelinske.comjoewe@writersuaLinkedIn: userassistance

×