Multi Channel Publishing

Editor's Notes

• #3: What signficantly changed for computer users around the year 1989?
• #4: 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.
• #5: 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?
• #7: Oh and I forgot to mention. Our customers need to learn all of this on a variety of platforms with different designs and constraints.
• #9: 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.
• #11: 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.
• #12: 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.
• #13: 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.
• #14: 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.
• #26: 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.
• #27: 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.
• #31: 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.
• #32: 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.
• #34: 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.
• #35: 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.