PICTURE

THIS

Dave Gardiner

Scalable vector graphics (SVG) Scalable vector graphics (SVG) for for

visual documentationvisual documentation

2/6

Imagine…

User documentation on a tablet or desktop

Graphics replacing text

Users zooming in to parts of graphics and tapping on them to find information

<hypergraphics>

Progression: Tools, Graphics and More

Web app documentsWeb app documents

3/6

WebHelp document links to interactive visual procedures

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

Progression: Tools, Graphics and More

4/6

Translation/localizationTranslation/localization Type translated text directly in SVG

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

Progression: Tools, Graphics and More

Video e-learningVideo e-learning

5/6

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

Video supplements interactive visual instructions in same web page/file

Progression: Tools, Graphics and More

6/6

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 HTML 5, Hypergraphics integrate with HTML 5, CSS 3 and JavaScript, and include CSS 3 and JavaScript, and include rich media that rich media that works like web pagesworks like web pages

Hypergraphics lead users to key informationHypergraphics lead users to key information they can dip into for an they can dip into for an interactiveinteractive, , engagingengaging useruser experienceexperience (UX) that is (UX) that is stylish, fun and makes learning easystylish, fun and makes learning easy

SVG markup creates SVG markup creates single-source single-source graphics graphics that are reusable throughout that are reusable throughout documents for translation and localizationdocuments for translation and localization

Progression: Tools, Graphics and More

Let’s talk…Let’s talk…

Are there gaps in your documentation where users have difficulty understanding written instructions?

Would users like interactive procedures in documents – hyperlinks, audio, video, animated menus?

Do users need quick links to key parts of documents?

Do your graphics encourage quick learning for users? How would you like to improve that design?

Have you considered creating e-learning material to value-add to your documentation? What would that be? Could you draw parts of your software for a user interface (i.e. the end product, or things the software helps manage)?

Do you need tablet-based documents because users need instructions in the field? Android or iPad?

Do you need options for translating/localizing graphics?

Progression: Tools, Graphics and More

Extra infoExtra info

Progression: Tools, Graphics and More

Why use hypergraphics?Why use hypergraphics?

Simple infographics to supplement text (lines, shapes, text)

‘Quick link’ icons to important parts of

web documentsOverview of system components

Restructure documents with interactive illustrations for

system/product help

Complex illustrations to replace text(hyperlinks, CSS, JavaScript, embedded HTML)

Popup tooltips on tablets

Change languages for

translation/localization

Open new browser windows for more info

Embedded video for e-learning

Annotated Annotated screenshotsscreenshots

Progression: Tools, Graphics and More

Visual entry point into documentsVisual entry point into documents

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

Web app documents with visual user interfaces – jump off to conventional written topics

Interactive infographics show overall structure of software components

Progression: Tools, Graphics and More

Why you’d use itWhy you’d use it Resolution: High-quality lines for illustrations even when you zoom in

Multi-platform: Display in PDF and all web browsers (Windows, Mac OS X, iOS, Android…)

Progression: Tools, Graphics and More

Small file size: SVG 460 Kb, AI 2299 Kb, JPEG High 975 Kb, GIF 922 Kb, PNG 509 Kb

Lightweight production: XML/HTML/text editor, WYSIWYG SVG editor, illustration & photo editing software

Gb Mb Kb

Why you’d use itWhy you’d use it

Progression: Tools, Graphics and More

Usability and accessibilityUsability and accessibility

A web technology – integrates with HTML 5, CSS 3, JavaScript for browser documentation

Accessibility – use alternate text (xlink:title) for lines & shapes

Progression: Tools, Graphics and More

Usability and accessibilityUsability and accessibility Browsers support SVG functionality – font styles, linking, CSS mouse events, JavaScript functions, animation…

Display vector graphics on mobile devices for tablet documentation

Progression: Tools, Graphics and More

Interactive SVG – a toolchainInteractive SVG – a toolchain1. xxxxx2. xxxxx3. xxxxx

Conceptualize infographics fordocument procedures

Draw symbols, icons and proceduresin technical illustration software

Export as SVG

Add ‘filters’ to SVG markup for styling symbol design – drop shadows, highlighting> improves user experience (UX)

12

34

Progression: Tools, Graphics and More

Add hyperlink markup in SVG editor

CSS styles for mouse events & user feedback

5

6

Interactive SVG – a toolchainInteractive SVG – a toolchain

Progression: Tools, Graphics and More

JavaScript libraries for interactivity (zoom + pan, open browser windows)

Integrate with web app documentation (HTML for links to/from text and infographics)

7

8

Interactive SVG – a toolchainInteractive SVG – a toolchain

Progression: Tools, Graphics and More