overcoming design challenges in hat-based multichannel publishing
DESCRIPTION
Presented by Neil Perlin Considering converting your help authoring tool (HAT) output to mobile but not sure what you’re getting into? Recent releases of HATs like Flare and RoboHelp can output to multiple channels such as ebooks, web apps, HTML5, even native apps. Mechanically, it’s surprisingly simple. It’s in the interface design and information design that things can get messy. Come to this session to learn about how. We’ll cover: The types of mobile supported by HATs and how to define your mobile needs Interface differences between online help and mobile What help authoring tool features work, may work, and won’t work in mobile outputsTRANSCRIPT
![Page 1: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/1.jpg)
Design Challenges In HAT-Based
Multichannel Publishing
![Page 2: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/2.jpg)
Who Am I?
Neil Perlin - Hyper/Word Services.
– Internationally recognized content creation and
delivery consultant.
– Help clients create effective, efficient, flexible
content in anything from print to mobile.
– Working with mobile since Windows CE and
WML/WAP c. 1998
– Certified – Viziapps, Flare, Mimic, RoboHelp.
![Page 3: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/3.jpg)
The Issues
Should tech comm get involved in mobile?
– If we don’t, someone else will.
…how?
– By converting HAT-based help to mobile.
– By getting into “real” mobile.
What to expect when we single source our
content to “mobile”?
– The focus of this presentation…
![Page 4: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/4.jpg)
First, Some
Mobile Basics
![Page 5: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/5.jpg)
A Note About Terminology
Terminology affects your choice of hard-
ware and software.
Terminology mixups…
– Like not being clear re WebHelp vs. Web Help
or HTML help vs. HTML Help.
… can spell trouble.
– Like buying the wrong tool or hiring the wrong
developer.
![Page 6: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/6.jpg)
Terminology – eBooks
Electronic books a
la Kindle, Nook.
– Largely linear format
and design.
– Generally sit on the
reader device.
– Good for stable,
linear material.
– Largely the focus of tech comm now, in my
experience.
![Page 7: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/7.jpg)
Terminology – Apps
Applications for mobile devices.
– Highly focused – “micro-tasking” – compared
to PC-style applications.
– Native – Follow a platform standard, easily run
on-device resources.
– Web – (“Mobile web”) Run in browser on any
device, can’t easily run on-device resources,
may be mobile-optimized – e.g. WebHelp vs.
WebHelp Mobile.
– Hybrid – Combine native and web, HTML5.
![Page 8: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/8.jpg)
Apps and Tech Comm
Little app dev from tech comm so far, in
my experience, for several reasons.
– “Mobile” is still new in the tech comm world
and companies aren’t sure of the need yet.
» And we don’t think of tech comm as creating apps.
– Going mobile required programming tools and
skills until HATs added mobile output.
Yet apps can be function- or content-
centric.
![Page 9: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/9.jpg)
Function-Centric Apps
Differ from “normal” tech
comm…
Sometimes weirdly so…
![Page 10: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/10.jpg)
Content-Centric Apps
But this is tech comm.
We can create these.
![Page 11: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/11.jpg)
What About Authoring Tools?
Depends what “mobile” you want:
– eBooks – ePub, using RoboHelp 8+, Flare 8+.
– Web apps (general) – Any HAT that outputs
browser-based help like WebHelp or HTML5.
– Web apps (mobile-optimized) – Flare 6+, “mo-
bilizers” like Duda or Mobify, ViziApps.
– Native apps – RoboHelp 10+, GUI app dev
tools like ViziApps, iBuildApp, appmakr, etc.
– Hybrid apps – GUI app dev tools, HATs
eventually via HTML5.
![Page 12: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/12.jpg)
Why Author Using a HAT?
Why?
– If you know the tool, you only have to learn a
few new features.
– Keep you out of the code.
– Set technical boundaries for you.
Why not?
– HAT won’t offer the features you expect in a
function-centric app.
– Possible code bloat.
![Page 13: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/13.jpg)
Help vs. Mobile –
Screen and Content
Design Challenges
and Suggestions
![Page 14: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/14.jpg)
Screen Design – Orientation
Landscape in help, portrait
(typically) in apps.
![Page 15: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/15.jpg)
Orientation (cont’d)
Consider the effect of
screen rotation on an
app in a portrait mode
screen, like this one:
Can you force screen
rotation to off?
![Page 16: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/16.jpg)
Control Position
Usually at top and left in help…
![Page 17: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/17.jpg)
Control Position
But at the bottom in apps – less tap risk…
![Page 18: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/18.jpg)
An Emerging HAT Approach
“Responsive-design” – device-agnosticism.
New releases of HATs support this.
For example,
from
RoboHelp 11.
![Page 19: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/19.jpg)
Content Design – Text-Heaviness
Help usually text-heavy, apps not.
![Page 20: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/20.jpg)
Text-Heaviness
Though there are exceptions, sort of…
![Page 21: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/21.jpg)
Text-Heaviness Suggestion
Cut down text – not fat but real text – to
the bare bones.
A less extreme version of this, perhaps…
![Page 22: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/22.jpg)
More Content Design Issues
Images may be too wide for phone screens.
– Can size them dynamically to fit by setting the
width to % and height to auto (if available).
– But are they still legible?
– If not, can you conditionalize them out?
– If you do, does that affect the contents?
– May call for greater granularity of content…
– And need a CMS to deal with the greater # of
content chunks even if traditional help did not.
![Page 23: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/23.jpg)
More…
Ditto wide or “complex” tables.
Consider SWFs.
– Won’t run on iOS – must be MP4 or HTML5.
– Are text captions legible or must you replace
them with audio, which means creating 2+
versions of each movie.
– What happens to interactivity in a mouseless
world?
![Page 24: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/24.jpg)
Still More…
Consider platform differences for feature
support and need to rework material.
– Minimal table support in ebook formats.
– Lack of support for Word bullets in KDP even
though Createspace supports them.
– Many more, no doubt…
“Invisible” problems like tables, graphics,
SWFs, popups, etc., embedded in snippets.
Popup links that convert to jumps.
![Page 25: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/25.jpg)
And Still More…
Features with no equivalent controls in
mobile, like Flare togglers.
Graphics management may have to change
as graphics get stored in the cloud, perhaps
using Amazon S3.
![Page 26: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/26.jpg)
An Interesting Side Note
You can mobile-optimize a regular site via
tools like Mobify (www.mobify.com) or
Duda (http://www.dudamobile.com/)
Creates a web app.
For example…
![Page 27: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/27.jpg)
Web Apps – Creation
Here’s my regular site from Jan. 2013.
![Page 28: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/28.jpg)
Web Apps – Creation
Same web site on an
iPhone 5…
– Works fine via scrolling,
pinch and zoom
– But hard to use.
![Page 29: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/29.jpg)
Web Apps – Creation
Same site partly mobile-
optimized via DudaMobile.
– Aesthetics need work but now
a much better mobile site.
– Still a web site – e.g. a web
app.
– NOT a native app.
– $9/month for hosting.
– But…
![Page 30: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/30.jpg)
Web Apps – Creation
The web and mobile versions don’t match.
I created the mobile version by hand.
Because the original site was never meant
to be mobilized; the result showed it.
Lesson – expect to redesign your content
before you can multichannel publish it
effectively.
![Page 31: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/31.jpg)
A Design Tool
Here’s what you have to
work with.
Where does your thumb go?
What can you reach? What
do you obscure?
– If you’re a righty?
– A lefty?
![Page 32: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/32.jpg)
Design Conclusions
Help converted to mobile won’t look like
Fruit Ninja.
If you’re single sourcing a help project to
mobile, plan for mobile before starting the
project.
– Consider user expectations when you tell them
you’re creating an app for them.
More involved here than just outputting a
help project to “mobile”.
![Page 33: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/33.jpg)
Summary
Lots of new technical, design, and output
options to balance.
– Define your terms, platforms and differences.
It sounds daunting, but so did the move by
tech comm to online help and the web in
the ‘90s and still today.
We met those challenges – time to do so
again.
![Page 34: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/34.jpg)
Hyper/Word Services Offers…
Training • Consulting • Development
Flare • Flare CSS • Flare Single Sourcing
RoboHelp • RoboHelp CSS • RoboHelp
HTML5
ViziApps
Single sourcing • Structured authoring
![Page 35: Overcoming Design Challenges in HAT-Based Multichannel Publishing](https://reader035.vdocuments.site/reader035/viewer/2022062312/555b0ddbd8b42a64398b556b/html5/thumbnails/35.jpg)
Thank you... Questions?
978-657-5464
www.hyperword.com
Twitter: NeilEric