Advanced Visualization Techniques Suitable for Technical ...

Tekom Germany 2013 – Advanced Visualization Techniques Suitable for Technical Communication– Charles Cooper (TRG)

Advanced Visualization Techniques Suitable for Technical Communication tekom/tcworld – November 2013

Charles Cooper – VP The Rockley Group @Cooper_42

#tekom

#tcworld

@Cooper_42 www.rockley.com

© The Rockley Group, Inc.

Background • Work with companies in pharmaceutical, medical devices, high technology, and finance • These companies translate content in 4-70 languages • Deliver content on multiple devices • Create intelligent content strategies from creation through translation and delivery • Optimizing localization plays a big part in this process • Component content management plays a key role in the solution © The Rockley Group, Inc.



1


Rockley Customers



Why do we do this? • To communicate ‘stories’ to our readers. • Those stories can be: • Technical • Narrative • Informative, non-fiction • Graphical • Sales and marketing




2


We’ve used many techniques • • • • • • • • • • •

Face to face communication Cave wall Clay tablets Scrolls Handwritten books Typeset books Portable computers Mobile phones & PDAs eReaders Smartphones Tablets @Cooper_42 www.rockley.com



Face to face communication Cave wall Clay tablets Scrolls Handwritten books Typeset books Portable computers Mobile phones & PDAs eReaders Smartphones Tablets Wall Art– Matobo Hills, Zimbabwe




3



Face to face communication Cave wall Clay tablets Scrolls Handwritten books Typeset books Portable computers Mobile phones & PDAs eReaders Smartphones Tablets

Clay tablet (87 BCE) describing the arrival of Halley’s Comet– British Museum @Cooper_42 www.rockley.com







4



Face to face communication Cave wall Clay tablets Scrolls Handwritten books Typeset books Portable computers Mobile phones & PDAs eReaders Smartphones Tablets Book of Kells – Trinity College, Dublin




Face to face communication Cave wall Clay tablets Scrolls Handwritten books Typeset books Portable computers Mobile phones & PDAs eReaders Smartphones Tablets Gutenberg Bible – Morgan Library NYC




5










6










7





When most successful… • We’ve adapted the way we display the content to match the medium

Book of Kells – Trinity College, Dublin © The Rockley Group, Inc.



8


We’ve hit a few bumps

1985

Canadian Encyclopedia

1991 © The Rockley Group, Inc.


This now fits in your pocket




9


But the tech is finally here • To deliver content, to anyone, any time, on any device, in any language.



Don’t panic • We’re pretty good at figuring this stuff out

Don’t Panic © The Rockley Group, Inc.



10


Even managed to teach languages • If you’re teaching languages, print or textbooks are a limited medium. • How can you teach a spoken language with a book?



Even managed to teach languages • If you’re teaching languages, print or textbooks are a limited medium.




11


Even managed to teach languages • Textbook came with ‘Rich Media’



So where are we going now?




12


So where are we going now? • On the road… • Combined shipments of smartphones and tablets exceeded that of PCs in 2011 • 60 percent of time spent on smartphones comprises new activities (because mobile devices didn’t exist!) • Global mobile data traffic is expected to grow to 26 times its current volume over the next five years • There are 5.3 billion mobile subscribers worldwide (77 percent of the world population) with growth led by China and India. http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats © The Rockley Group, Inc.


Paper can still be important




13









14





What does mobile mean? • Five main types of mobile information delivery: • Traditional Web • Mobile Aware Web • Adaptive • Responsive • And blends • Web Apps • Ebooks • Kindle • EPUB and variants • Native Apps © The Rockley Group, Inc.



15


What does mobile mean? • Five main types of mobile information delivery: • Traditional Web • Mobile Aware Web • Adaptive • Responsive • And blends • Web Apps • Ebooks • Kindle • EPUB and variants • Native Apps @Cooper_42 www.rockley.com





16







17




What is adaptive content?

Adaptive content automatically adjusts to different environments and device capabilities to deliver the best possible customer experience, filtering and layering content for greater or lesser depth of detail.




18


Adaptive vs Responsive • Adaptive • An overall approach for enhancing the usability or capability of content on a given device • Responsive • Focused on displaying the content in the best possible way on a given device



Adaptive content • Adaptive content is limited only by your design decisions, the functionality of the device being used, and the intelligence of your content.




19


Betcha can't eat just one!™ • Like the Frito Lay’s tag line, we can’t seem to ‘eat just one’ • Constantly using multiple devices



There are challenges




20


No one reads… • They just scan the screen. • If you thought reading on this was hard…



No one reads… • They just scan the screen. • If you thought reading on this was hard…

• Consider reading on this >




21


Attention Span

43 Min

www.google.com/think/research-studies/the-new-multi-screen-world-study.html



Attention Span

39 Min





22


Attention Span

30 Min




Attention Span

17 Min





23


Attention Span



Attention Span




24


Attention Span

3 Sec *

* Apocryphal - alas not true



It’s not about size…

It’s about intent




25


Know your user • The two biggest reasons people visit websites or read content on their mobile devices are: • Kill time • Solve a problem

• Are they there to solve problems, or are they there to kill time?



Solve a problem • They’re likely there to solve a problem. • Content must be • easy to find • to the point • Long introductory paragraphs and background information are not appreciated. • Remember, vs and




26


Yes, it can be hard • Typically, fewer than 40% of technical writers have regular contact with customers • Who can you talk to? • CSR or Help Desk • Installers, configuration people



Yes, it can be hard • Typically, fewer than 40% of technical writers have regular contact with customers • Who can you talk to? • CSR or Help Desk • Installers, configuration people • And yes, Sales and Marketing




27


Yes, it can be hard • Typically, fewer than 40% of technical writers have regular contact with customers • Who can you talk to? • CSR or Help Desk • Installers, configuration people • And yes, Sales and Marketing (I’ll get to these guys in a moment)



Consider the future • • • •

Generation ”Z” Born c. 1995 and beyond Most connected generation ever 46% would choose internet access over a car

• They are the future, start writing for them now • They’re not having the “scroll problem’




28


What are they using?



Smartphones • • • • • • • •

All colour screens Small Hard to read Hard to interact with Like the invisible man in sunlight Can run apps like tablets do Almost always at hand The ‘new PC’




29


Phablets • Mid size between the phone and tablet • Typically between 6-9 inches • Run apps like phones and tablets • Like the invisible man in sunlight • Easier to interact with than phones, harder than tablets • Have cell capability, so better connectivity than most tablets www.pconline.com.cn



Phablets • Mid size between the phone and tablet • Typically between 6-9 inches • Run apps like phones and tablets • Like the invisible man in sunlight • Easier to interact with than phones, harder than tablets • Have cell capability, so better connectivity than most tablets • May become the New, New PC © The Rockley Group, Inc.



30


Tablets • • • • • • • •

All colour screens Varying sizes, but larger than phones Multiple sizes of tablets is problematic Easy to read Easy to interact with Like the invisible man in sunlight Can run apps like smartphones do Less likely to be carried at all times

• “Tablet use peaks between six and eight in the morning”* * Stephen Elop, Nokia President, Oct 2013



Large screens – TV • You thought this was gone… • Coming back as larger screens are being used in conference rooms for display • Also used in the office for multimedia browsing, web interaction and training • Definitely NOT mobile, but one more thing you may have to consider in your content delivery strategy.




31


Eventually… • Dr. Steve Mann (University of Toronto)



Eventually… • Dr. Steve Mann (University of Toronto)




32


www.google.com



www.technologyreview.com




33


How do they expect to get info?




More importantly – how will we be expected to deliver it so they’ll pay attention?!




34



More importantly – how will we be expected to deliver it so they’ll pay attention?! We’re not competing for attention with last years manual.




More importantly – how will we be expected to deliver it so they’ll pay attention?! This is what we’re up against, folks.




35




David Bowie is…




36




• Numbers to find on display • Buttons to press • Constantly fumbling with it…

Courtland Technical Services




37


David Bowie is…



• Sennheiser guidePORT • Totally automatic • RF proximity detectors • Easy to use • Notice reduced number of buttons? • The right information, at the right time, in the right place • Response – Divided © The Rockley Group, Inc.



38


It gets worse



We’re in the multi-device world

http://commons.wikimedia.org/wiki/File:Device_pile.jpg © The Rockley Group, Inc.



39


Not just ‘tablets’



Some devices are unexpected




40


Car = Accessory*

Attached to Accessory OK to disconnect

*According to Apple, that’s all it is.



There are concerns… • Meet Dug • What does he have to do with anything?

(c) Walt Disney Pictures/Pixar




41


There are concerns… • Meet Dug • What does he have to do with anything?

Squirrel! (c) Walt Disney Pictures/Pixar



There are concerns…




42


And even art installations



And even art installations




43


That squirrel has left the barn



We use screens a lot • 90% of our media consumption is on a screen of some sort • Radio, magazines and paper books have taken a beating





44


We like to use many screens • We’re opportunistic users, and will grab the nearest screen • Information doesn’t know what we’re using, so we have to get back to same place manually • Over 60% of users simply ‘re-search’ using the same engine




We swap from device to device • Re-searching works, but it’s not an ideal method of consuming information • If possible, keep user status and allow users to swap from device to device • Cookies, shopping carts, login status… www.google.com/think/research-studies/the-new-multi-screen-world-study.html




45


We swap from device to device • And often we’re in different locations, in different circumstances when we ‘get back to’ the information we’re looking for • The ‘information’ should keep track of that too.

July-September 2003 PERVASIVEcomputing - Panu Korpipää, et al



We like to use many screens • But we really like our phones! • 38% is phone usage • 24% is computer • 9% is tablet • This is before wide adoption of phablets

Image Credit http://www.cnn.com/2012/09/25/opinion/granderson-technology-phones/





46


TV is no longer the king • The days when we all watched the same program and then talked about it at work are gone • We’ve already tweeted about it to our friends or shared our impressions on social media • 77% of TV watchers do so with a smartphone in their hands www.google.com/think/research-studies/the-new-multi-screen-world-study.html



Interactivity in the Cinema • We play with others (strangers even) in public




47


You probably can’t do that



You probably can’t do that

But there’s lots you can do…




48


QR and related codes • Can bridge the gap between your printed content and the real world • QR codes have the ability to provide links to external content • Can link from document or service manual to online video or more detailed information (viewable on a tablet or smartphone)



QR and related codes • Can bridge the gap between your printed content and the real world • QR codes are not just for advertising • Either low budget, ad hoc advertising…




49


QR and related codes • Can bridge the gap between your printed content and the real world • QR codes are not just for advertising • High budget, high impact advertising….



QR and related codes • Already in use • They’re not just for manufacturing




50


Low hanging fruit



Have to implement it right • A user would expect information related to the particular microwave.




51


Have to implement it right • Who knows what the model number is? • Not the consumer! • In this case, the QR code must link to the specific model. • Each model must have it’s own QR code. • Not the QR code’s fault it was poorly implemented © The Rockley Group, Inc.


Maybe you don’t like QR Codes




52


Whatever they look like • For Austin Texas’ Bat Bridge



Whatever they look like • Louis Vuitton QR code in Japan




53


Augmented Reality • Using a smartphone with an augmented reality app to help change a printer cartridge.

From metaio, makers of an augmented reality tool Unifeye http://www.youtube.com/watch?v=_6FMABGBMjY



Augmented Reality • Using AR to identify the location of a TV satellite prior to installation • Apps have full access to the capabilities of the device • Compass • GPS • Camera • Wifi • 3/4G connectivity




54


Augmented Reality • Using AR to explore an unfamiliar location • Apps have full access to the capabilities of the device • Compass • GPS • Camera • Wifi • 3/4G connectivity @Cooper_42 www.rockley.com


Augmented Reality • Using AR to explore an unfamiliar location • Apps have full access to the capabilities of the device • Compass • GPS • Camera • Wifi • 3/4G connectivity




55


AR replaces user manuals • Audi A1 and A3 have replaced user manuals with AR

http://www.autoblog.com/2013/08/13/2015-audi-a3-augmented-reality-app-owners-manual-video/ @Cooper_42 www.rockley.com


We’re willing to put up with a lot • HUD (Heads Up Display) app for drivers.

http://www.youtube.com/watch?v=AoeXt5Zs8rA




56


Location based content delivery • Yeah, advertising • But can be used for much more • Remember the reaction to the David Bowie is… exhibit

http://www.mobilefringe.com/location-based-services-mobile-content-delivery-solution/



Doesn’t always work • Google Glass search for those without Google Glass




57


• Search for the hotel based on location and image



• Decided I’m at a crosswalk • Displays unexpected results • Note that push is often better than search for targeted information.




58


Repurpose your content • Your engineers are likely using Autodesk

www.autodesk.com iTunes app store



Repurpose your content • Your engineers are likely using Autodesk




59


Repurpose your content







60





Remember this slide?




61


Talk to someone with money • Can support marketing and service functions • Hyundai Equus sales and service app 2011



Layar • You can interact with print as well • Not just in magazines, but any printed material such as posters, newspapers, manuals, etc.

http://www.layar.com/layared-magazine © The Rockley Group, Inc.



62


• Screen capture of interactive ‘Layar’ in operation. • No visible indication (like a QR code) required



Interactive Augmented Reality

From Cisco’s The future of shopping

http://www.youtube.com/watch?v=jDi0FNcaock&feature=player_embedded




63


Haptic interaction • Haptic Technology – to provide feedback via touch. • Clicking physical keyboards • Click-like interaction with virtual keyboards • Air-jet interaction Disney Corp prototype

• Called Aireal http://www.youtube.com/watch?v=xaFBjUJj00M



Virtual Reality – not just SL




64


VR/Immersive Reality • Not for use ‘in public’ • Gaming • Training

http://www.youtube.com/watch?v=xaFBjUJj00M



BMW Service Centre • Long term BMW project to enable service technicians to ‘do away with manuals’ • Ford has a similar initiative

http://www.youtube.com/watch?v=P9KPJlA5yds




65


You can use Magic • This is a Magic Symbol™ • It has nothing to do with D&D or multi-sided dice.



You can use Magic • It can invoke this…

http://inition.co.uk/ © The Rockley Group, Inc.



66


But that’s where the magic stops



But that’s where the magic stops




67




Market fragmentation




68


Fragmentation • 3997 distinct devices with different resolutions and different OS versions • (GT-I19100 is the Samsung Galaxy SII)

http://opensignalmaps.com/reports/fragmentation.php @Cooper_42 www.rockley.com


Maybe not that fragmented • Samsung has 40% of the market




69


Not everyone has the latest OS • Android OS fragmentation, October 2013

http://developer.android.com/about/dashboards/index.html @Cooper_42 www.rockley.com


Not everyone has the latest OS • Apple iOS fragmentation, February 2013

http://chitika.com/ios-version-distribution © The Rockley Group, Inc.



70


But some do it get it faster… • Apple iOS 7 uptake, September 19th, 2013

http://info.chitika.com/ @Cooper_42 www.rockley.com


Even so.. • There are a lot of older devices out there! • Almost 40% of iPads in use are iPad2 models • Yes, this is recent data – October 2013

http://www.localytics.com/blog/2013/is-the-iphone-5c-catching-up-and-what-to-expect-from-apples-1022-ipad-launch/




71


Handcrafting is unsustainable • Devices are proliferating • Device wars means that new devices are released every 3-5 months • Functionality varies across device • What works on one, may not work on another • Constant churn to identify new functionality and design content to take advantage of the functionality • Can’t keep up © The Rockley Group, Inc.


Not everything looks right! • • • •

Services can help you test both apps and ebooks Emulators exist as well Best to have a small ‘petting zoo’ of devices to test with. Turnaround time is better ;-)




72


Same App, different platform



Same App, different devices




73


Same App, different orientation



Left brain – Right brain




74


Same OS, different versions

Android 3.X

Android 4.X @Cooper_42 www.rockley.com


It won’t work the first time There’s this gap between plans and reality




75


You can’t make it up as you go along



You need a Content Strategy




76


You need a Content Strategy Not a Mobile Content Strategy



Where does Content Strategy Start? • Right at the beginning • Not restricted to: • Content creation • Publishing • Translation • Localisation • Mobile • All are important facets of an overall method




77


You need to understand: • • • • •

Structure Modularity and Granularity Metadata Your content Your users



Structure




78


What is structure? • Structure is the hierarchical order in which content occurs in an information product. • An information product can be a web page, a book, an eBook, a brochure, a training course, and so on. • Information products have recognizable structures that are repeated each time the information product is created. • Information products consist of components (topics) that also have structure within them. @Cooper_42 www.rockley.com


Why structure? • Structured content is content in which the format is independent of the information. • Can output the content to multiple channels, adapting it to best meet the needs of the channel, or we can automatically mix and match content to provide what the customer wants when they want it and the way they want it. • Transform (reconfigure) content from one structure to another, but only if we know what the structure is in the first place. • Filter and layer content when we know its structure.




79


Modularity and Granularity



Modularity • Physically chunk content into smaller modules that can be easily manipulated for display • Or enable the system to chunk content automatically based on semantic structure




80


Granularity • How big are those modules? • Chapter? • Topic? • Paragraph? • Bulleted and numbered lists? • Individual list items? • Words within sentences?



Metadata




81


Metadata • The glue that holds everything together



Metadata • The lubricant that allows everything to work




82


The metaphor doesn’t matter






83


Card Catalog(u)es • Contains information about the book • Location • Date • Author • Publisher • But not the information in the book



More metadata… • Any information you might need to segment/find/display information • • • • •

Location Language Suitability for transmission (bandwidth) Text Video




84


Your Content (It’s all about the content)



Content • Determine primary content to display • What can be layered/scrolled? • How does the content need to be structured to facilitate filtering/layering/scrolling? • What content should be eliminated and in what situation? • What alternate content should be presented? • How must your content be structured to support this functionality? • Can you structure your content for unexpected situations?




85


…and how your customer will experience it • Know your customer • Know your device constraints • Map requirements to content requirements



Your Users (It’s actually about the users)




86


Know your customer Who are the primary customers? What language do they use? Where do they live? What the typical customer profile? Where do your customers come from (region/country, referring site, search engine)? • What platform are they using: Smartphone, Tablet, Phablet (OS)? • What do customers need to know to make a buying decision? • What do they think are the most effective ways to be reached? • • • • •



Know your device constraints • Even though you should write content separate from its eventual output, you must understand the constraints of the device on which your content will be displayed. • Design your models to adapt to those constraints.




87


Implementation

or Where the rubber hits the road



Media Queries • Simple idea – why don’t we ask the device about itself? • Part of the available meta information from a webpage

• How big is the content area on the screen? - use the ‘viewport’ query • Protip – sometimes the devices lie © The Rockley Group, Inc.



88


Talk to the hand (set) • Works with apps • Not as simple as Media Queries • Much more reliable • Code fragment querying the device to see if it has a magnetometer (compass) and if it’s working



Like regular ”writing for online” • But more so… • Keep titles short • Keep content short • Use bulleted lists • Balance brevity with legibility and clarity • Carefully consider the use of charts/tables/images. • They may be the best way to present information on a page, but are problematic on a small screen.




89


Tables • Tables are always an issue on mobile. Some options include: • Tables where screen real estate permits • Image of the table • Modularized table • Fixed first column, scrolling remainder • Cascading list • Drill down • Tables are inherently structured, you just need to map your table structure to desired output @Cooper_42 www.rockley.com


Navigation is key • Navigation can be a challenge, due to small screen size. • Try not to break content into too many pages, one page per item/article is usually better, even if the page is loooong. • Flatten the hierarchy. • Drilling down to reach content is problematic. • Cluster like information together • Use ”more like this” or ”related content” links to make it easy for the user to navigate • Images should not be used for navigation, and should never be used as the only means of navigation.




90


Business rules • Business rules are the rules that your content follows to adapt to different devices and different customer requirements. • Business rules allow the system to automatically pick and choose content and adjust the presentation of that content to meet specific requirements. • If ‘this’ then ‘that’ • If displaying on a mobile device break content into ‘pages’ at the intro, ingredients and instructions • Integral to your complete content strategy



Format free content: XML • XML lets you separate content from layout and visual design • Like HTML, but focuses on structure, not appearance • Can use one of many underlying structural schemas • DITA Concerned about XML? Don’t be, even Word uses a form of XML • DITA4Publishers “under the hood’. • DocBook • Industry specific • Very powerful for transformation and reconfiguration for multiple channels © The Rockley Group, Inc.



91


But! • Technology is not the focus for content contributors and never should be • Tools should support tasks, not impede tasks • Tools must enable content strategy Logging On to AccSoft
The first time you click on a component in AccSoft you are required to log on to the system.
To log on to AccSoft: Double-click the AccSoft application. Select Accounts Payable from the Explorer. Type your USERID into the Name field. Type your password into the Password field. Select the customer to update. Click the OK button to log on to AccSoft. If you do not know your USERID or Password, consult your System Administrator.



But! • Technology is not the focus for content contributors and never should be • Tools should support tasks, not impede tasks • Tools must enable content strategy Logging On to AccSoft
The first time you click on a component in AccSoft you are required to log on to the system.
To log on to AccSoft: Double-click the AccSoft application. Select Accounts Payable from the Explorer. Type your USERID into the Name field. Type your password into the Password field. Select the customer to update. Click the OK button to log on to AccSoft. If you do not know your USERID or Password, consult your System Administrator.




92


But! • If your technology makes your employees look like this… you’re doing it wrong! • It must be easy to use



Summary • It’s a complicated new world – but then, it always has been • No more tweaking and tuning the content to get that perfect fit. • Know what content is required, by whom, when, in what circumstance, and in conjunction with what other content or interactivity. • Create structured content separate from format. • Use templates, styles, and structured writing guidelines. • Partner with other groups to share information and resources • Create content first, not Mobile first or eBook first or Video first or Poster first or…. but always with an awareness of where and how content can be consumed. • Remember – mobile is expected, it’s not something special! © The Rockley Group, Inc.



93


Questions? Adaptive Content and Responsive Design for Mobile Devices Wednesday 6 November 16:15 – 18:00 ~ Room 1A/1 Thursday 7 November 08:45 – 10:30 ~ Room 1A/1

[email protected] © The Rockley Group, Inc.



94