stc summit 2015 hypergraphics for visual-first help
TRANSCRIPT
<g id="page_elements">
<polyline fill="#74B74A" points="356.13,126.07 338.659,143.612 321.13,126.07 "/>
<path fill="#FFFFFF" stroke="#000000" d="M365.617,114.654c0,6.627-5.373,12-12,12h-230c-6.627,0-12-5.373-12-12v-7.5
c0-6.627,5.373-12,12-12h230c6.627,0,12,5.373,12,12V114.654z"/>
<path fill="#D1D3D4" d="M1105.136,1417.218c0,6.627-5.372,12-12,12H55.188c-6.628,0-12-5.373-12-12v-124.493
c0-6.627,5.372-12,12-12h1037.947c6.628,0,12,5.373,12,12V1417.218z"/>
<path fill="#E7E8E9" d="M1095.617,1407.654c0,6.627-5.373,12-12,12h-469c-6.627,0-12-5.373-12-12v-81c0-6.627,5.373-12,12-12h469
c6.627,0,12,5.373,12,12V1407.654z"/>
<path fill="#E7E8E9" d="M546.617,1408.654c0,6.627-5.373,12-12,12h-469c-6.627,0-12-5.373-12-12v-81c0-6.627,5.373-12,12-12h469
c6.627,0,12,5.373,12,12V1408.654z"/>
<g><g><line fill="none" stroke="#000000" stroke-width="5" x1="510.764" y1="1293.321" x2="502.097" y2="1301.988"/>
<polygon points="495.856,1308.229 501.058,1295.842 502.563,1301.521 508.243,1303.027 "/>
</g></g><g><g><script type="text/javascript">
<
What’s happening in tech comm?What’s happening in tech comm?
2/23#stc15
3/23#stc15Image: David Sandonato / 123RF
““Interactive Interactive infographics”infographics”
(But “hypergraphics” (But “hypergraphics” sounds more “techie/geeky”)sounds more “techie/geeky”)
Take a closer look at …Take a closer look at …
4/23
<section>
<header>
http://www.w3schools.com/htmL/html5_new_elements.asp
New semantic elements
<audio>
<track><video>
New media elements
<canvas><svg>
New graphics elements
#stc15
<nav>
HTML5 SVGHTML5 SVG
5/23http://www.w3schools.com/htmL/html5_svg.asp
#stc15
… It’s a high-quality graphics format for displaying interactive sketches
and technical illustrations
What’s in it for technical communication?What’s in it for technical communication?
6/23#stc15
Can be done with SVG
You want mobile-first docs
You’ve seen touch gestures for web apps How about interactive documentation for a similar user experience?
And created with cost- effective graphic design tools
7/23
Emerging trends, emerging challengesEmerging trends, emerging challenges
“We need an alternative way to display tables
on mobile devices”Charles Cooper & Ann Rockley, STC Summit 2014
#stc15
8/23
Otherwise…Otherwise…
#stc15
9/23
Reformat tables into web topicsReformat tables into web topics Fragment into web topics
Create visual interfaces
#stc15
Cool idea #1: Hypergraphic web topicsCool idea #1: Hypergraphic web topics
10/23
Online help document with links to hypergraphics for accessing reference info and procedures
Hypergraphics link to standalone web topics for online help
#stc15
What’s under the hood …What’s under the hood …
11/23
It’s text, just like HTML5 Use a text editor to add CSS styles & interactive HTML elements
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1212.553px" height="640px" viewBox="0 0 1212.553 1600" preserveAspectRatio="xMidYMid meet"><defs><style type="text/css"><
Hyperlinking in SVGHyperlinking in SVG
12/23
<a xlink:href="PDF-chaptitlepage-chaptitle.xhtml"
xlink:title="Chapter title"
onclick="return chaptitle('chaptitle')">
<text class="overlay" transform="matrix(1 0 0 1
325.3223 297.1016)" fill="#ED1C24" font-
family="'ArialMT'" font-size="36">Title of
Chapter</text>
</a> HTML linkingHTML linking
Javascript eventsJavascript eventsfunction chaptitle() { var chaptitle = window.open ("PDF-chaptitlepage-chaptitle.xhtml", "chaptitle", "resizable=yes,width=500,height=410,left=100,top=100,scrollbars=yes"); chaptitle.focus(); return false; }
#stc15
CSS3 media queriesCSS3 media queries
13/23
@media screen and (orientation: landscape) {#smallscreen {display: none;}}@media screen and (orientation: landscape) {#bigscreen {width: 30%;height: 80%;}}@media screen and (orientation: portrait) {#bigscreen {display: none;}}@media screen and (orientation: portrait) {#smallscreen {width: 80%;}}
Modify the style/display of whole or parts of graphics Reference ID or class values of SVG elements in the CSS Set breakpoints, orientation, device aspect ratio …
Incorporates RWD:
http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/
Display, resize, …
display: none/block/inline
fluid grid – resize to browser width/height
#stc15
14/23
Cool idea #2: Translation / localizationCool idea #2: Translation / localization 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)
#stc15
JavaScript for interactivityJavaScript for interactivity
15/23
JavaScript functions and libraries extend interactive functionality (animations, touch gestures, draggable objects …)
#stc15
Even further with jQueryEven further with jQuery
16/23
External SVG file is referenced in an HTML5 page
HTML5 pages are the basis for documentation (i.e. for navigation, accessibility, metadata, SEO) Hypergraphics can ‘talk’ to jQuery (integrate interactive sketches with mobile help)
#stc15
17/23
+ JavaScript to open external HTML files in <div>
Export SVG from illustration tools + <a xlink:href> for hyperlinking + <title> and <desc> for screen reader accessibility
+ jQuery to use interactive SVG within HTML5 files, and responsive web design
Cool idea #3: Visual mobile-first docsCool idea #3: Visual mobile-first docs
#stc15
Best viewed with …Best viewed with …
18/23
Varies depending on CSS, JS, fonts, styling, video
Firefox
IE
HTML5 title and desc ARIA attributes in SVG
× Screen reader support poor/inconsistent
(NVDA in FF locally, Chrome online, mobile)
No one tool does everything CorelDRAW / Illustrator produce clean markup, ‘OK’ SVG output options
×Most ‘SVG editor’ tools produce inline CSS styles
Opera (Andr.), Chrome
×Proprietary ns declaration
Some hand-coding to implement JS and SVG functionality
Several tools – graphics, JS editor, SVG optimiser
jQuery libraries for touch gestures are promising
#stc15
What this means for information designWhat this means for information design
19/23
#stc15
Retain existing information architecture,add a visual interface to ‘restructure’
what users interact with
Minimize interaction with complex hierarchical document structures that
are a barrier to finding information
20/23#stc15
SVG - A more direct route from task/SVG - A more direct route from task/workflow sketches to user interfaces?workflow sketches to user interfaces?
So… why use hypergraphics?So… why use hypergraphics?
21/23
What’s big in tech comm …
What SVG hypergraphics offer …
HTML5 • A web tool that integrates with online help
CSS3 • Use media queries, animations and many CSS styles
Responsive web design • Graphics resize to fit device screen • Display and style content depending on device
specs, orientation, browser size…
Infographics / sketching • Finally, graphics and sketches are put to good use with interactivity (illustration tools can output SVG)
Video / rich media • A place to embed videos with interactive illustrations
Mobile-first • Integrates with JavaScript, jQuery elements• “Work in progress” to automate implementation
of coding
User experience (UX) • Restructure information architecture into task-based interfaces
• Combines several web technologies into engaging experiences that make learning easier
#stc15
Today ... Today ...
22/23#stc15
SVG 1.1 + editing toolchain
Håkan Dahlström / Wikimedia Commons
SVG 2 + JS/HTML graphics editor
+3 years+3 years
23/23
W: xmplar.bizE: [email protected]: @copebooxSk: copeboox1M: +61-424 003020
Questions?Questions?
#stc15
svgdocs.net