Date post: | 25-May-2015 |
Category: |
Design |
Upload: | dave-gardiner |
View: | 320 times |
Download: | 2 times |
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