Scalable vector graphics for interactive infographics in technical documents

1. PICTURE
THIS
Dave Gardiner
Scalable vector graphics (SVG)Scalable vector graphics (SVG)
forfor
visual documentationvisual documentation

2. 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

3. 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. 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

5. 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/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 includeCSS 3 and JavaScript, and include
rich media thatrich 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 anthey 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 createsSVG markup creates single-sourcesingle-source
graphicsgraphics that are reusable throughoutthat are reusable throughout
documents for translation and localizationdocuments for translation and localization
Progression: Tools, Graphics and More

7. 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

8. Extra infoExtra info
Progression: Tools, Graphics and More

9. 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
AnnotatedAnnotated
screenshotsscreenshots
Progression: Tools, Graphics and More

10. 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

11. 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

12.  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

13. 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

14. 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

15. Interactive SVG – a toolchainInteractive SVG – a toolchain
1. xxxxx
2. xxxxx
3. xxxxx
Conceptualize infographics for
document procedures
Draw symbols, icons and procedures
in technical illustration software
Export as SVG
Add ‘filters’ to SVG
markup for styling
symbol design – drop
shadows, highlighting
> improves user experience (UX)
1
2
3
4
Progression: Tools, Graphics and More

16. 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

17. 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