Hypergraphics for Hypergraphics for help documentshelp documents

Dave Gardiner

Improving the user experience Improving the user experience with with

scalable vector graphics (SVG)scalable vector graphics (SVG)

About meAbout me

2/22

‘Content developer’ – products for online document publishing

XML for print/web > 6 years (book production/editorial, XSLT/XSL-FO stylesheets, and now SVG)

Training workshops, conferences and seminars, articles on XML for ebooks

Studying tekom first-level certificate in technical communication

Freelancing – redrawing illustrations, technical/scientific books

Qualified editor ~ 10 years (web writing, academic, legal)

Ancient history (>30 years) – mapping, spatial analysis, scientific communications, flowcharting/mind mapping

Why you need to know thisWhy you need to know this

3/22

If you write for translation

Scalable vector graphics (SVG) will help you produce visualweb documents

If you want to shortcut the writing process

If you want to produce mobile-first documents

If you’re looking for a more effective way to ‘value-add’ to graphics

If you’re moving to online documentation

4/22

Spend lots of time researching and writing text for users who have problems searching through all that text to find information

Technical communicators…Technical communicators…How we write documents nowHow we write documents now

Key points (concepts, tasks) may be all that’s needed > what’s in between states the obvious and is redundant

5/22

So… replace text with graphicsSo… replace text with graphics

Infographics show overall structure of product components/processes

Topics (icons, symbols), tasks/procedures (arrows), reference info (links to web pages)

6/22

We already do!

Conceptual diagrams show the ‘big picture’ of overall concepts

and procedures

7/22

How do users find information?How do users find information? TOC – document headings, subheadings, subsubheadings

Makes users think too hard

First need to navigate document structure > tap on what they want

Structure might not be task-based

8/22

Why not have both?Why not have both?

9/22

Summary reference tablesSummary reference tables

10/22

‘We need an alternative way to display tables

on mobile devices’Charles Cooper & Ann Rockley, STC Summit 2014

11/22

Otherwise…Otherwise…

12/22

Reformat tablesReformat tables Split into web topics

Create visual interfaces

Graphics for technical documentsGraphics for technical documents

13/22(Article titles reproduced from Communicator journal with permission)

14/22

Effort to conceptualise and draw illustrations > still designed for passive viewing (no interactivity)

Graphics still supplement text – they don’t replace text (e.g. screenshots)

Graphics designed for print documents/pages (physical size limits, legibility)

Users still need to work hard to find stuff in text (barriers - document structure, filtering out unwanted text)

15/22

Learn more easily, find information faster

Remember well-designed visuals more readily than words

Interactivity is intuitive, fun and engaging for a good user experience (UX)

For usersFor users

For technical communicatorsFor technical communicators

Concepts and tasks may be easier to draw/sketch than to write

Visual interfaces are suited to mobile-first design

If you produce web documents, you can produce SVG hypergraphics (part of HTML5)

Why use hypergraphics?Why use hypergraphics?

Screenshot hotspots Screenshot hotspots

16/22

SVG with CSS to control ‘mouse over’ events, visibility of text and hyperlinking Change the appearance of overlays/annotations ‘on the fly’

Web app documentsWeb app documents

17/22

Online help document links to interactive visual procedures

HTML ‘a href’ & ‘target’ links from: > text to graphics > graphics to text

18/22

Translation / localisationTranslation / localisation SVG <switch> element changes language based on a user’s browser settings

‘Single-source’ graphics for global markets – draw once, use in many places (multilingual)

Video e-learningVideo e-learning

19/22

Embedded video player in SVG – MP4, MPEG, WMV, MOV…

Video supplements interactive visual instructions in same browser page/file

Visual-first document structureVisual-first document structure

20/22

Visual entry pointsinto topics

Stand-alone topics (concepts, tasks, reference info, contextual help)

21/22

Practitioner’s takeawayPractitioner’s takeaway

Draw once, use in many placesDraw once, use in many places

Works for the webWorks for the web

Pictures you can poke a stick atPictures you can poke a stick at

Hypergraphics integrate with HTML5, Hypergraphics integrate with HTML5, CSS3 and JavaScript, can include CSS3 and JavaScript, can include rich media that rich media that work like web pageswork like web pages

Hypergraphics lead users to informationHypergraphics lead users to information they can dip into for an they can dip into for an interactive, interactive, engaging user experience (UX)engaging user experience (UX) that is that is fast, fun and makes learning easyfast, fun and makes learning easy

SVG markup creates SVG markup creates single-source single-source graphics graphics that are ‘value-added’ for that are ‘value-added’ for translationtranslation

Questions?Questions?

22/22

Web: xmplar.bizEmail: info@xmplar.biz

svgdocs.net

Twitter: @copebooxSkype: copebooxMobile: +61-424 003020