Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Multi Channel Publishing
Similar to Multi Channel Publishing (20)
Recently uploaded
Recently uploaded (20)
Multi Channel Publishing
- 1. Efficient and Graceful Multi-Channel Content Authoring and Publishing Joe Welinske Welinske.com joewe@writersua LinkedIn: userassistance
- 4. 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?
- 7. Sony media player remote • QWERTY keyboard • motion control • microphone (for voice commands) • touchpad
- 8. 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:
- 9. 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
- 10. See my recorded presentation on Adobe.com: Multi-screen Help Authoring”
- 11. 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
- 12. 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
- 13. 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 3GX MacBook Pro
- 14. 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
- 15. 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
- 16. 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
- 17. 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”
- 18. Windows 8 Help topic example
- 19. Single-source, Conditional Text Output Laptop Phone TV
- 20. Command Language Interaction Table Tablet Phone TV Car Laptop
- 21. 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)”.
- 22. Gesture Resources Touch Gesture Reference Guide www.lukew.com/ff/en try.asp?1071 • iOS • Android • Windows Phone • Mac • Windows • Others
- 23. Touch Commands by Platform/Device
- 24. Gesture/Voice Commands by Platform/Device
- 25. Lexus NFC ad
- 26. o Contextual o Conforms o Conditional o Concise
- 27. What strikes you about this array of iPhone Help? • Native, not browser-based • Crafted, not automated • Highly visual, engaging • Small, but efficient
- 28. Tablet dimensions: allow for more activity which can mean a complex touch UI welinske.com/debating-the-value-of-walkthroughs/
- 29. Micro-concise instructions for small screens Text automation doesn’t scale well smaller than a 7” device
- 30. 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
- 32. Flatten Navigation for Small Screens Or eliminate completely
- 33. Design for the First-time User Experience ` Usage over time Questions First use is an edge case; support it aggressively
- 34. Design for the “Bumps” in the Road ` Usage over time Questions Advanced Features Update/ Upgrade
- 35. Voice Today • Automative may lead • Ford Sync • Honda Accord • Tesla • We need APIs • Android Google Voice • iOS Siri • Windows Phone API welinske.com/help-behind-the-wheel/
- 36. 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”
- 37. 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.
- 39. Efficient and Graceful Multi-Channel Content Authoring and Publishing Joe Welinske Welinske.com joewe@writersua LinkedIn: userassistance
Editor's Notes
- 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.