Multi Channel Publishing

1,139 views

Published on

Presentation for STC Conference 2013.

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
1,139
On SlideShare
0
From Embeds
0
Number of Embeds
508
Actions
Shares
0
Downloads
0
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • What signficantly changed for computer users around the year 1989?
  • That’s right. It was actually a confluence of events: the mouse, the GUI, and color monitors at a relatively inexpensive price. That technology had been at Xerox Parc, the first Mac, and early versions of Windows. But it was really around 1989 that it all came together. One aspect of that transition that has been sort of lost in history. And it will seem stupid to a lot of you. But there was a period of about two years where software applications had to explain to their users that their familiar Tab and Return was overtaken by Move and Click. How to click, double-click, click and drag. Right click. Noone every figured out the right click. The digerati didn’t have a problem figuring it out. But for the mainstream consumer it was a big issue.
  • This has changed quickly and dramatically. The Smartphone storm kicked off by the iPhone created enormous demand for devices with dimensions of less than three inches on a side. Similarly, Apple’s launch of iOS sparked a furious drive by software developers to create applications to fit this new form factor. The big question in mobile software development became how to create an effective user experience. At least in the Apple ecosystem, the iPhone maintained a very consistent size over time. From 2007 through the iPhone 4S, the dimensions have been essentially the same. Other phones used a similar screen size and for a short time it appeared we just had one new category to deal with. Then along came Android which opened up the market for smartphones and apps even more. Its free operating system and open source underpinnings made it possible for hundreds and thousands of different-sized devices to crop up in just a few years. There are currently over 3,900 distinctly different devices using Android. Suddenly we have screen sizes for phones and tablets covering almost every possible variant between the iPhone and the desktop. On top of that we now have developers looking to display apps on 60-inch living room displays. And software is being designed to be displayed in dozens of car entertainment systems. What is a UA person to do?
  • Oh and I forgot to mention. Our customers need to learn all of this on a variety of platforms with different designs and constraints.
  • One of the things we must to do is start thinking about what this means for the design and delivery of our user assistance. Whether we are doing Help for native OS apps or presenting content in a mobile browser, we need to address the wide and growing fragmentation of devices. Beyond screen dimensions we need to deal with varying screen resolutions, UI elements and OS components that are proprietary to individual platforms, and do all this in the evolving culture of rapid product interation.
  • This demo shows how to use a media query for a responsive, scalable design.A web app and associated web-based Help content is stored as a single set of content files on a server. The content is accompanied by several cascading style sheets. Depending on the type of device, the content is dynamically adjusted to change what is displayed and how it is displayed. Large screens can show more information and have a more robust set of navigation tools. Smaller displays hide certain feature so as to optimize the information flow for a particular display.
  • A set of media queries direct the device browser to load the appropriate style sheet. In this demo, there are four media queries based on the screen dimensions of four different categories of devices: a typical desktop display, a ten-inch tablet (currently iPad), a seven-inch tablet (currently Kindle Fire), and a phone.
  • Using just these four “buckets” supports a significant percentage of the installed user base of devices. It is likely they can continue to do so for several years. However, it will not be difficult to support emerging screen sizes with a few new buckets. We may have ones for home entertainment screens, automotive displays, and information kiosks. In addition to adjusting the look and feel of the content, the CSS can control the language through conditional text. Selectors can be set to hide and reveal variants such as “tap” and “click” based on the device type and the type of i/o.
  • Using just these four “buckets” supports a significant percentage of the installed user base of devices. It is likely they can continue to do so for several years. However, it will not be difficult to support emerging screen sizes with a few new buckets. We may have ones for home entertainment screens, automotive displays, and information kiosks. In addition to adjusting the look and feel of the content, the CSS can control the language through conditional text. Selectors can be set to hide and reveal variants such as “tap” and “click” based on the device type and the type of i/o.
  • Here is that Lexus NFC ad I mentioned earlier. How do you know there is a link? How do you know what to do when you find one? In this case, the designer needed to include a specific instruction paragraph on the page.
  • Here are my four keystones in providing helpful information,It should be contextual. The information should be presented in the UI at the point where it is needed. Users aren’t going to spend time clicking around to find an answer, especially with mobile. It should conform to the look and feel of the overall application. Helpful information should flow in an app just like any other element. It shouldn’t be an afterthought or piece of baggage. It should be conditional. A first-time UX element should not appear after the first-time. This requires a discussion about when they should be triggered and not. You may want to have conditional items to deal with those advanced features and upgrades. Finally it should be concise. Not dumbed down. The perfect word or phrase to fit the situation and the available screen real estate. This is not trivial. And it is testable. Word choices should be included in your studies.
  • A set of media queries direct the device browser to load the appropriate style sheet. In this demo, there are four media queries based on the screen dimensions of four different categories of devices: a typical desktop display, a ten-inch tablet (currently iPad), a seven-inch tablet (currently Kindle Fire), and a phone.
  • A set of media queries direct the device browser to load the appropriate style sheet. In this demo, there are four media queries based on the screen dimensions of four different categories of devices: a typical desktop display, a ten-inch tablet (currently iPad), a seven-inch tablet (currently Kindle Fire), and a phone.
  • So I’ve presented you with this complex situation. What can you do about it? Probably the most important thing you can do and one of the simplest is to design for the first-time user experience. This curve shows a typical lifecycle for many software users. It plots the number of questions users have with software over time. The first couple of times users work with a robust product they will have a lot of questions. But this quickly diminishes into a steady state with few if any questions. First-use is an edge-case. A very important one. For free App store products it can mean the difference in keeping a customer or having them move on to the next in the list.
  • Looking at the long tail of our experience with an app, there are other times when questions increase. Some users will start exploring more features in a robust app. Occassionaly an update or upgrade will impose a new UI. Rather than try and make everything in your product perfectly intuitive, recognize that first use is an edge case. Supporting some early learning can reduce the need to over-design elements in your app.
  • 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

    ×