Skin editor _Adobe

DIPLOMA PROJECT

Adobe Robohelp Vers.9 Selected feature work

Sponsor : Adobe Systems, Noida

GUIDE : RUPESH VYAS

STUDENT : SHUCHITA BARANWAL

COMMUNICATION DESIGN FACULTY (SOFTWARE & USER INTERFACE DESIGN)

National Institute of DesignAhmedabad

2009

PROGRAMME : Post-Graduate Diploma Programme

The Evaluation Jury recommends SHUCHITA BARANWAL for the

Diploma of the National Institute of Design

IN COMMUNICATION DESIGN (SOFTWARE & USER INTERFACE DESIGN)

herewith, for the project titled "ADOBE ROBOHELP VERSION 9 ,selected feature work"

on fulfilling the further requirements by

Chairman

Members :

*Subsequent remarks regarding fulfilling the requirements :

Chairman

Shuchita Baranwal ~SUID Pg no.1

ADOBE ROBOHELP A help authoring toolSelected feature work for version9Project by : Shuchita BaranwalSoftware & User Interface Design,09National Institute of Design

INDEX


Acknowledgement , Pg no. 4About NID , Pg no. 5About Adobe Systems Inc. , Pg no. 6

SECTION A :UNDERSTAND THE PROBLEM , Pg no. 7 Introduction to the project , Pg no. 8

Understanding the domain , Pg no. 9

Context , Pg no. 12

SECTION B :LITERATURE REVIEW , Pg no. 13 Introduction to Robohelp , Pg no. 14

Market , Pg no. 16

Users , Pg no. 19Usability study , Pg no. 20

ADOBE ROBOHELP 8 , Pg no. 15A. skills , Pg no. 16B. technology , Pg no. 17C. platform , Pg no. 18

SECTION C :METHODOLOGY , Pg no. 46 What is User Experience Design?, Pg no. 46

Product life cycle process, Pg no. 47Organization Structure , Pg no. 50Overview of process followed ,Pg no. 51Rich Internet Applications and Flex ,Pg no. 53

SECTION D :PRELIMINARY STUDY , Pg no. 54 Madcap Flare , pg no. 55


SECTION E :SKIN , Pg no. 57 Skins , Pg no. 58

Current RoboHelp Skin Editor , Pg no. 60Problem Investigation , Pg no. 63Air Help , Pg no. 64

Common elements mapping , Pg no. 70Need for a common Skin Editor , Pg no. 72

Air Help Templates 65Air Help elements mapping 66

SECTION F :USER FOCUS , Pg no. 74

Behavior model , Pg no. 75User study , Pg no. 76Scenarios , Pg no. 94Analysis , Pg no. 99User Needs , Pg no. 101Possible Approach for skin editor ,Pg no. 103

Personas , Pg no. 105

Detailed User pro!les 77

Validating the approach 104

SECTION G :DESIGN EXPLORATIONS , Pg no. 106

Concept 1 , Pg no. 107Concept 2 , Pg no. 109Concept 3 , Pg no. 111Concept 4 , Pg no. 113

Concept 3,further exploration , Pg no. 116Common skin editor wireframe , Pg no. 120

Concept Selection 115

SECTION F :FINAL DESIGN , Pg no. 123

Scheme design 124Detailed breakdown,Scheme design 125Task Analysis 126Wireframe 129Visual design 130

Conclusion , Pg no. 132-133Apendix , Pg no.134Biblography, Pg no.135


Several people have been instrumental in allowing this project to be completed. The commitment of of all these people has contributed to this project’s vitality and expansion. My sincere thanks to Rupesh Vyas, my guide for this project for his valuable advice and constant encouragement and also thank, Dr. Prabir Mukhopadhyay, my co ordinator.

I would like to thank Sumit Dey, my mentor at Adobe, for his patience, generously shared knowledge and encouraging me throughout the duration of this project. He gave me valuable criticism that I am sure translated into the quality of my work and Phil Clevenger , Experience Design Manager , India , Adobe for his unbiased opinions and thoughtprovoking questions.

I sincerely thank Aman,Yachna and Zinal, for their encouragement and support. They helped me remain cool and focused when the going was tough and giving me the encouragement to get along with the project.

A sincere thanks to Adobe for giving me the opportunityto be a part of their reputed firm and help me successfully complete the project by providing me with all the facilities and resources the project demanded.

A heartfelt thanks to my batchmates and juniors for theirunwavering support and especially Gaurav, Ruchika, Vivek, and Harish for helping me immensely throughout the duration of this project.

Acknowledgement

I would like to thank NID for always being an inspiration throughout my stay here and my family for their unconditional support.

Finally, I would like to add that I sincerely apologize to everyone who was somehowrelated to the project as I was unable to mention their contributions in this acknowledgement.


About NID

The National Institute of Design (NID) is internationally acclaimed as one of the foremost multidisciplinary institutions in the field of design education and research. The

institute functions as an autonomous body under the Ministry of Commerce & Industry, Government of India. The Department of

Scientific & Industrial Research (DSIR) under Department of Science & Technology, Government of India recognizes NID, as a

scientific and industrial design research organization.

NID has been a pioneer in industrial design

education after Bauhaus and Ulm in Germany and is known for its pursuit of design excellence to make Designed in India, Made for the World

a reality.

NID’s graduates have made a mark in key

sectors of commerce, industry and social development by taking role of catalysts and through thought leadership.


About Adobe Systems Inc.

Adobe Systems Incorporated, founded in 1982, is a leading provider of graphic design, publishing, and imaging software for Web and print production, and the second‐largest

desktop software company in the world.

Adobe revolutionizes how the world engages

with ideas and information. For more than twenty‐five years, the company’s award‐winning technologies and software have

redefined business, entertainment, and personal communications by setting new standards for producing and delivering content that engages people anywhere at any time.

From rich images in print, video, and film to dynamic digital content for a variety of media, the impact of Adobe solutions is clear to anyone

who creates, views, and interacts with information.Core Services & Technologies (CS&T) is an

internal team that enables Adobe Systems India Pvt Ltd, the regional head quarters for Asia Pacific region, to build globally ready, industry‐leading solutions through highly leveraged

innovative frameworks, tools & technologies, and offerings, with high operational efficiency.

Adobe RoboHelp is a product acquired by Adobe from Macromedia which is a Help Authoring Tool.It allows Technical writers to Author Help systems.


SECTION A :UNDERSTAND THE PROBLEM This section describes the project and its domain. Introduction to the project Understanding the domain


Introduction to the project

“Enhancing Adobe RoboHelp publishing environment to allow user to create Rich,

Immersive help systems”

The focus of the project will be the customization of help systems that are to be

published in multiple channels to address different audiences’ requirement in collaborative manner using Adobe RoboHelp.

The expected outcome would, allow users to exercise more control over the published output.

Most of the technical writers end up having an experience of working with a number of

different organizations, and realizes how important it can be to be able tailor the look‐and‐feel of the Help environment. And that’s

exactly what Skins enable the users to do for.

Though, there are a no. of skins available to download and import, but eventually

customizing them to meet the user needs becomes crucial for help authors.

Also, since all users are not very well acquainted with the back –end programming of the help system , an interface to allow them change the look and feel of the published output becomes evitable.

The basic task flow of RoboHelp is shown in the figure.


help systems a more rich and interactive experience.

Hence, a need to give user more control over the published AIR output also arises.

Currently, user can select from three templates and apply either midnight black or icy blue skin on it. So, there is limited control of the user on

the AIR published output especially related to the look and feel of the output generated.

Therefore, there is a demand by the users to

allow them tailor the AIR output published

The question:

Why would people want to change the look and feel of the help file system?

The answer:

Branding

Branding makes you, you. It separates you from

the crowd and makes you stand out. It defines the uniqueness of your services and products. It informs people who you are, quickly. It is how

you are perceived by others.

For these reasons one needs to protect the identity and work to make it strong. To protect the identity one has to make sure that there is

consistency in what is produced, in how the logo is used and how one showcase about the company as a whole; this includes the company

products also. A help system shall also fall under the company’s product categories and will be required to abide by the company’s

barding strategies in terms of both experience and look and feel.

To make it strong one needs to make sure that a unified look and feel is maintained, and are

sending out a unified message, whether it is in an email, a memo, a phone call, a client visit , a product or an event.

Branding is huge; because it is more than a logo or materials, because it encompasses so many areas and touches so many parts.

Companies throw around a lot of words that they want to be reflected in the company; respect, trust, quality, transparency, responsibility, knowledge, experience, insight.

Allow users to exercise more control over the published output.

Understanding the product and synchronizing

with the goals and objective of the team is essential for healthy development of the project. To bring clarity and define the scope of

design work, the initial idea of the project is questioned on the following parameters‐

Why do we need to give more control to the user over the published output?

Adobe RoboHelp is designed for everyone who needs to create professional Online Help

Guides

• for Software;

• for Equipment;

• for Business Procedures;

• for Reference Information;

• for Training Materials.

With the introduction of AIR output generation in Adobe RoboHelp, a seamless online and offline web experience could be established in the published help systems making the usage of

Understanding the domain


Although the default skin looks acceptable, for some people it still may look a bit too default. RoboHelp allows one to easily locate and import new skins from the RoboHelp Exchange.

What are we proposing?

Robohelp already has a Web Help skin editor to allow editing of Webhelp and Web help pro output formats. With the introduction of AIR

output format, the demand from the users for being able to customize skins for the same also, came in. The product manager identified the major

decision points and the decision was made to develop a new skin editor for AIR output. The areas of uncertainty in the thinking of the

design with regard with the usage of the product would be removed with the help of user studies at various stages.

At this time focus would be on areas where information needs to be discovered.

The decision makers were involved at all stages,

keeping in mind the organizational contexts

that are likely to be affected the design would be proposed for the Skin editor.

An example of a thread of the user need for AIR

SKIN EDITOR is quoted from A RoboHelp discussion group on the web.A: I have created an AIR app from my RH8

WebHelp. Works and look quite nice. Great. It's just that it did not use the WebHelp skin I created. It uses some default skin.

How can I customize the skin of my AIR app? When I run the RH Packager for Adobe AIR, I get a dlg box come up, called, "General Options ‐

RoboHelp Packager for Adobe AIR" and it offers me a few default skins, but it does not offer me the skin I made for WebHelp.

B: Yep, that's what you get with AIR output. You have to live with the skins the AIR layout

provides. I suppose if you are a FLEX developer you might be able to change the skins. But it is what it is.

You might consider submitting a Wish Form to ask the development team to allow us more flexibility with AIR skins. Or to even create a way

Ultimately the cornerstone to a strong brand is consistency.

Today, brand building no longer constitutes a mere manipulation of the consumer’s

perceptions and desires, but it is a creation of a system that on the one‐hand makes promises and arouses anticipations, while on the other‐

hand it delivers and realizes the promises that it makes.

Creating online documentation for websites is

all about customization. Nobody likes to use a standard interface anymore. Standard interfaces are often too bland, particularly website interfaces that you automatically generate using

established software.

For users who don’t want their sites to look like every other site on the Internet, RoboHelp lets

you easily “skin” your online documentation. Simply put, skinning means replacing the current look and feel of an application with a

completely different set of colors or graphics. RoboHelp supports downloading different color schemes and customized graphics directly from the web, or one can even make their own skins

that match the existing site.




for the AIR app to use elements of the WebHelp skins.http://www.Adobe.com/cfusion/mmform/index.cfm?name=wishform&product=38

The proposed system is assumed to be used by

people to apply skinning on help output as specified by the user group. The approach of the skinning process will depend on the

objective and template defined to be used for skin editor specificity for AIR output and so will be the after‐actions available to receiving side members.

http://www.Adobe.com/cfusion/mmform/index.cfm?name=wishform&product=38






CONTEXT


Information is no longer relegated to personal computers; users are accessing help from cell phones, PDAs, iPods, GPS, and other handheld printed doc, etc.‐‐from gadgets. To meet this demand RoboHelp today offers a rich set of features for delivering multiple customized outputs from a single project.”Single source Layout” is RoboHelp, s term for a layout (set of rules) that generates a specific type of output.

Single sourcing creates multiple deliverables from one unmodified source document – that is, in the process of creating the deliverables, the source document is not edited or modified.”

Multiple Layouts lets users generate multiple outputs – WebHelp, HTML help, printed doc, etc –from a single set of source files (topics).

In simple definition single sourcing would mean,

‐ Writing content once and reusing it many times

‐ Building modular information and assembling it into different formats (for example, print, web, and online help)

‐ Designing information for different audiences

‐In this day and age of online documentation, no one wants to use a standard interface if they can

help it. They can be very plain and, well, boring. If you don’t want your site to look like any other, RoboHelp offers you the ability to create your own look and feel through the use of skins. These allow you to customize the interface to your help file by changing the colors and graphics as well as other elements of your window.There are two types of skin that can be used in RoboHelp. WebHelp skins are designed to be used in WebHelp and WebHelp Pro output, whilst FlashHelp skins are designed to be used in FlashHelp and FlashHelp Pro output. That said, it is technically possible to apply a skin to a CHM file.

Now , Air help skins can also be created using RoboHelp.Creating a skin is easy enough with a single dialog used to assign colors and graphics to the various skin elements. One can even preview the results before applying them to the project. But, this is only for WebHelp Skin editing. However if all this seems like a little too much trouble, there are other resources that can be used:

* The default project skin. * The RoboHelp Gallery. * The RoboHelp Exchange.

With the current trends and improving web technologies, user today requires more control over the published document. The newer release would focus on gathering user feedback and allow users to comment to create a richer help system.


SECTION B :LITERATURE REVIEWThis section describes the product and its features Introduction to Robohelp Market Users Usability Study


Introduction to Robohelp

The RoboHelp help authoring tool is now entering its thirteenth year of existence. That's a remarkably long existence for any software title. In that time period, we have seen an amazing expansion of the software industry throughout the 1990s and an equally amazing retraction due to the bursting of the Internet bubble. Making its start in the tiny offices of Blue Sky Software in LaJolla, California, RoboHelp grew into an extremely profitable product. It is also a market leader—having capturing some two‐thirds of all Help authoring tool sales. During the Internet bubble years the company changed its name to eHelp, but RoboHelp continued to be its flagship profit center. In 2003, eHelp (and RoboHelp) were acquired by one of the leading providers of web tools—Macromedia. Now it appears that the end may be approaching for RoboHelp.

RoboHelp is a help authoring tool (HAT) created by eHelp Corporation (formerly named Blue Sky Software)acquired by Macromedia,

which itself was then acquired by Adobe Systems.Features

The software is used by technical writers to create computer help files in various formats, including:

* Adobe PDF * FlashHelp * Adobe AIR * XHTML

* Microsoft Compiled HTML Help * Microsoft WinHelp * Microsoft Word * Oracle Help for Java * Sun JavaHelp * WebHelp * XML

History

Macromedia RoboHelp 5

RoboHelp 5, (or more precisely, RoboHelp X5 Office), was produced by eHelp Corporation. It was acquired by Adobe and is no longer supported. This version of the product required the use of Word for XP, Word 2000 / Word 97.

Adobe RoboHelp 6

On January 16, 2007, notices were sent out announcing "RoboHelp 6." Some of the new features are command‐line compilation, user‐defined variables, conditional build tags, build‐tag usage reports, RoboSource Control 3, Microsoft Word import/export improvements, and Adobe Acrobat Elements.

Adobe RoboHelp 7

On September 25, 2007, notices were sent out announcing "RoboHelp 7." Some of the new features are Unicode support, Vista and Office 2007 support, a more‐flexible user interface, and a cleaner editor.

Adobe RoboHelp 8

Announced on January 20, 2009, this version is included in the new version of the Technical Communication Suite , & features the ability to publish a help system as an Adobe AIR application.

ADOBE ROBOHELP 8


Adobe RoboHelp 8 software is designed for developing Help systems, eLearning content, policies and procedures, and knowledgebases. Its enhanced editing and layout capabilities enable you to create professional looking content. You can publish this content to multiple channels, including Adobe AIR for an integrated online and offline user experience.

Worldwide, Adobe RoboHelp 8 is a leader of online Help authoring tools through innovation. New features create a more productive experience for technical communicators and their audiences.

New Publishing features

Adobe AIR The Adobe AIR output type allows you to generate Help in Adobe AIR format. The cross‐platform Adobe AIR Help format provides several enhancements, such as these:

• Easy navigation through breadcrumbs• New templates and skins• A rich branding experience, and the • ability to insert corporate logos and an About

box in Help• Rich commenting and auto‐updates• Browser‐based Help, with both offline and

online content• Ability to add and access RSS feeds• Enhanced search

Adobe AIR

Adobe AIR is a cross‐platform runtime for building and deploying applications that connect the desktop to the web. You use the Adobe AIR layout within RoboHelp to convert your RoboHelp‐generated Help files to a Help application. One advantage of Adobe AIR applications over browsers is that Adobe AIR applications can read and write local files. The Help application also maintains local data and syncs up with servers when the user connects to the Internet. In this way, users always have the most updated content on their systems.This list summarizes some benefits of Help applications based on Adobe AIR:

• Single distributable file You generate a single file, similar to a CHM file, with the filename extension .air.

• Automatic updating and constant availability When connected to the Internet, the user gets the latest updates you make to Help content. When the user is not connected, the Help application persists as a desktop application .

• Consistent behavior The user experience does not vary across platforms.

• Ability to comment You can engage your readers to become involved in the user community. The ability for end users to comment on Help topics enables you to solicit their feedback on Help.

• Branding options Authors of Help can specify branding options such as templates, skins, and logos.

A. skills


Market

The development of user assistance is a blend of a wide variety of skills. Technical communication skills provide the foundation. They are supplemented by skills unique to the

software development world. In a survey, conducted by Writer USA the respondents were asked to value the

importance of a number of skills commonly employed by user assistance professionals in their daily work. The figure below shows the

top ten skills valued highly with a rating of "4" (Very Valuable) or "5" (Invaluable), the top two ratings on a five‐point scale.

Content development was at the top of the list with writing procedures (83%) and writing

reference information (77%)numbers one and three, respectively.As for other aspects the nature of working with

a digital medium like software user assistance requires the use of a variety of tools. Other ResultsHere are the percentages of respondents rating

the rest of the skills choices as either "Very Valuable" or "Invaluable":Quality assurance — 48%

UI design — 45%Developmental editing — 43%Graphics development — 38%Management & supervision — 35%

Usability testing — 34%Instructional design — 29%Translation/localization — 23%

So, there is about 45 % of Technical writer/ Authors who feel that UI design is an important part their domain. Of course, after content development and tasks related to content development.

B. technology


The use of technologies is a defining element in the identity of software user assistance professionals. Enhancing a product's usability requires transforming the words and ideas into digital form with a variety of technologies to help with that. In the survey conducted by writer’s USA, they provided a list of popular user assistance technologies and asked the respondents to value the importance of those technologies in their current development efforts. The technologies that were presented to the survey respondents are broad solution technologies as opposed to specific file formats. The figure below shows the top‐rated user assistance technologies.

• Support for Digital Manuals (74%) in the form of PDF is at the top of the list as the most valued technology component. Using PDF as a delivery format has become a staple in the documentation sets.

• The use of browser‐based Help (72%) continues to be very popular with the respondents placing it second. The lure of displaying content in a web browser window seems to offer enough positive value for us to favor it over more feature‐rich, platform‐specific proprietary Help systems.

• The World Wide Web (62%) continues to increase in visibility as a key element of our user assistance as evidenced by the strong showing in the survey. Until recently, the Web was primarily used as a supplement to online Help and printed manuals. As we

move increasingly toward Web‐based applications and ubiquitous broadband Internet connections, server‐side deployment of user assistance via the Web is becoming a hot topic in many tech pubs departments. So the Web is filling more than one role.

• Traditional documentation components such as quick reference materials (51%) and knowledge‐bases (46%) are still valued highly by over half of respondents. Others like paper‐based manuals (32%) and Microsoft HTML Help (34%) have significantly dropped in popularity.

• Embedded user assistance (39%) — the technique of adding helpful information directly into the user interface has become very attractive.

Browser based Help and World Wide Web help are becoming increasingly popular, hence a need for everyone’s help system to look different for the sake of identity also increases.

C. platform


Our organizations embrace multiple platforms as a way to maximize product usage and to offset the high cost of software development. However, this results in many difficult challenges for software developers. In the technical writer’s part of the development process, the design and implementation of user assistance components is dictated largely by the nature and number of different platforms they need to support. In the survey respondents were to identify all of the platforms their products run on. Microsoft is still the dominant player. Almost all of the survey respondents (95%) indicated that their products support the latest versions of Windows 1,

The World Wide Web (62%) is recognized as the second biggest platform for respondents supporting it. Most software organizations appear to either already have versions of their products that can be delivered over the Web or they have some sort of strategy for doing so in the future. Survey was distinguished between Web applications running on the Internet and those running on intranets/extranets. The latter category is supported by 52% of the respondents.

The OS cousins of UNIX (34%) and Linux (33%) each are supported by about a third of respondents. UNIX includes Solaris, HP‐UX, and AIX variants.

Mac OS X has risen from 6% a few years ago to 16% in the current survey. The influence of iPods/iTunes/iPhones appears to be increasing the strength of the platform.

Java sits at (22%). The JavaHelp standard has been uncoupled from Sun and dropped into the open source domain.

The broad label of Mobile is now supported by a healthy 20% of respondents. However, this represents a variety of operating systems within this category, including Windows, Mac, Symbian, RIM, and others.

Different platforms and their usage by so many people allow a sort of standardization help systems making everything look the same unless for different output formats different skinning is allowed.


Users

Primary users

Robohelp is a program designed to assist the user in writing help files.

According to my research, the primary users for Robohelp are,

• Technical writers

• Help Documentation writers

• Knowledge Based writers.

In most of the cases the users have been using Robohelp since a long time.

Secondary users

There are no secondary users for Robohelp.

Since it’s a technical tool and is mostly used by power users.


Usability study

Categorization and grouping of all elements in the menu needs to be Re‐done

This can be done according to creation tasks , Editing tasks , Insert tasks, show/hide tasks and formatting tasks. A lot of functions are difficult to find unless one refers to the user manual as the grouping is not intuitive and subjective.

The icons are not clear and intuitive

They look visually cluttered


From the edit menu when one goes to edit center topic it shows a delete icon and delete button along with it instead of editing icon.

On clicking on the edit center topic from the edit menu a cursor is shown indicating the center topic is in edit mode, but its not actually getting deleted.


Formatting toolbar displays all the formatting options available

But when one goes to format option from the menu bar only a few options are available.


The styles pod can be opened from the format option from menu bar (not from show pods).

All the styling options are available in the styling and formatting pod


Repeated information on the screen at the same time (for formatting and styling)

In the screen on the right hand side , a user defined variable is selected


On right click all the contextual menu items are still enabled.

Even when no text data is selected the contextual menu allows to apply conditional build tags


Takes time to find out the required feature.

On add or remove button all the tool bar options are displayed even if they are added/not added.





The toolbars are divided into three levels.

On the first level it displays the option of adding all four toolbars.

On the second level it displays the option of adding two toolbars.


On the third level it displays the option of adding only one toolbar.

So if the user is given the capability of customizing toolbars . All toolbars should be allowed to be added at each level.

The maximum number of tabs that can be opened and are clearly visible at a time are shown below.


The moment more topics (opens as tabs) are opened the previous open topics get completely hidden.

Also , to shift the tabs left and right side , very small arrow icons are provided that too only on the right side of editor browser.


From the insert menu , open filed and variables.

It displays a field and variables dialogue .


Now from the insert menu open user defined variables.

It displays the same field and variable dialogue box.


The workflow of creating anew skin from file menu‐>new‐>skin is not mentioned in the help documentation at all which is the more easier and logical workflow for the user to find in case he/ she is not aware of the other workflow .

The other workflow for creating new skin is going to project set up pod and clicking on icon create new skin.


Similarly, the workflow for creating a new window is hidden as its not easily discoverable; many users are not even aware of the concept.

For the first time user, who ends up shifting the pods and wishes to get the original workspace back becomes difficult.(pod movements are not very smooth)

As, its difficult to find the environment option in the product unless referred in the manual.


The Topic list display a lot of information like title ,toc , etc which cannot be edited or acts as a link . It’s like a topic property information shown taking screen space and serving no actual purpose.

When you expand the project files folder in the project manager all the sub folders and topic lists are displayed.


The same folders can be viewed from the topic list pods by clicking on the folder select box opening in an awkward manner on the top, for viewing the topic .Hence , the entire topic list pod should either be more interactive or used in more efficient manner saving screen space and showing topics at a glance to be opened in the editor.

The conditional build tags are actually a formatting option and should be like a toolbar option or a drop down option instead of a pod.Also , Cbt’s can be directly applied using contextual menus. So it does not make sense making it a default pod.


Where as, TOC is something all writers refer while working on document .This should have been made default pod. Saving the user his time. The user otherwise needs to go to project manager and open it , also it takes more screen space , unless adjusted by the user.

The single source pod also, is not required to be a default pod , as it is a publishing activity and is done at the end of writing the entire document and is not required to be present at all the times instead could open when the user wishes to publish or view the output , saving the screen space.


Since so many pod’s are present as default pods , and also since toc is a very important pod to be opened. When everything is opened there is hardly any screen space left for the Editor window.

Also, there is no way to get the editor browser window in full screen mode , as when the document is written that is the only area of focus for the user.

From the resource manager when one clicks on the images , it opens a preview of the image below which displays , some in between area of the image. It’s a inappropriate way of showing preview of an image.


The link pod has an awkward interface and is not really used by the users.

One can also go from tools‐>show topic links and open the link view.


But here , a Find topic box appears on clicking on the empty space in the link view window.

The search box here appears in a very unintuitive manner.

Even, when an Iframe is inserted the contextual menu shows all the options enabled. Although the contextual menu shown is shortened.


From tools option in menu bar , click on removed Unsued File ID’s.

A Remove unused map Id’s dialog box opens displaying map files instead of unused map Id’s.


From format option in the menu bar open topics borders and shading.

Borders and shading dialog opens


Now, from format option in the menu bar open borders and shading.

The same Borders and shading dialog opens


From the Format option in menu bar go to font sets.

A font set dialog opens having a very unusable interface.


The option of opening the starter window is present in the view ‐> pods‐>starter from the menu bar.(also, known as the splash window)

Highly unintuitive for the user and difficult to find the starter page is not treated as a pod.

Each topic opens as a window in the editor browser and in multiple colors.

Hence it’s difficult to know which one is active.


SECTION C :METHODOLOGY This section describes the process followed.

What is User Experience Design?


User Experience Designer is the process of creating structures for understanding and manipulating information, designing consistent

contexts, which encourage cumulative learning. In doing so the bar is raised from "being able to do something" to "being able to do something

easily".

User Experience Designers are typically

employed on applications or sites with large amounts of features, complexity or information.

They create structures for understanding and

manipulating information or parameters, designing consistent contexts, which encourage cumulative learning.

As a starting point they conduct research to find:

Who are the users?

What are their goals?In what context will they use the product?

Then they use any modeling technique available to propose solutions that go beyond

code to model the most efficient and pleasing conceptual space that can be created within the constraints of time, budget & resources.

PRODUCT LIFE CYCLE PROCESS


The management of the entire Life cycle of the product cross functionally from its conception and definition, through its implementation, production, maintenance and end of life, is

called Product Life Cycle Process.

At Adobe, either a concept with a scope for becoming a new revenue generating product, or

information gathered by the marketing team from target Users for existing products, is presented to the decision making body. This

panel prioritizes the requirements based on some of the aspects like time, resources and return on investment ahead of giving consent for development.

Development team, working synchronously with Design team and Quality engineering

teams, translate these requirements into workable applications. This phase is called Project Requirements Defined (PRD).

After undergoing multiple quality checks, these applications are marketed. This is a continuous process till the life span of the product.

In order to deliver the best products in this highly competitive market, various Product development processes are adopted which improve the efficiency of and collaboration

among teams.

On receiving consent for development, the three teams analyze and understand the

requirement. After arriving at a common understanding of the requirement, time estimations are given considering the resources,

risks and dependencies, committing on a deliverable date.Development team prepares an Engineering Specification and Design team prepares UI

specification. Based on these specifications, Quality Engineering teams test the product and in case of discrepancy, bugs‐ errors are logged

for rectification. This is an ongoing process till the product is good to go to market.

There are various milestones in the process of

which few related to Quality Engineering are mentioned here

• Concept Accept (CA): This milestone is achieved when the executive committee reviews and accepts product proposal.

• Project Requirements Defined (PRD): This milestone is achieved when the User requirements are reviewed and approved for

development.

• Project Plan Committed (PPC): This milestone is achieved when the cross‐

functional teams like Development team, Quality Engineering team and User Experience team understand the requirements and give a shipping date.

• Proceed to Plan (PTP): This is core of testing activity where Development team writes specifications and

User Experience team based on which Quality Engineering team to tests the product. This milestone is similar to Alpha and Beta in

Waterfall development model.


• API Freeze: By this milestone all the APIs are validated by the Quality Engineering team and beyond this no alterations can be done.

• UI Freeze: This is a milestone where the user interface is frozen and all interface related issues are

resolved. Beyond this no changes in UI are done.

• Shared Component Freeze (SCF):

By this milestone all the issues related to shared components are resolved.

• Release Readiness: This is stage where the testing is almost

completed.

• Release candidate: All the bugs are closed and Quality Engineering

team gives a green signal to release the product.

• Gold Master: This is the stage concluding testing of the

product. * There are other milestones related to Marketing of product, which haven’t been included here.

ORGANIZATION STRUCTURE


At Adobe, Core Working Group is the final decision making body for product related issues. It comprises of Senior Managers or Product Managers, who are experienced in that

corresponding fields.

In Quality engineering, Engineers and Vendors

report their work either to a team lead or directly to their team Managers.

In case of clash in opinions or for prioritization of features, where Managers of Experience Design team, Engineering team and Quality

Engineering team are unable to arrive at a conclusion, it is taken to Core Working Group.

User Expereince Designers , fall under the Expereince Design team at Adobe.

At , Adobe I was working as a user expereince designer trainee , along witth the product manager and enginneering team.

OVERVIEW OF PROCESS FOLLOWED


Firstly, interviews were conducted to understand the users. Simultaneously a study

was done to identify limitations and potential of Flex‐ a collection of technologies released by Adobe Systems for the development and

deployment of cross platform rich Internet applications based on the proprietary Adobe Flash platform. These target teams were short

listed by the Core working group, which comprises of Senior Quality Engineering Managers. As a skin editor was already in place, most of it was a feedback about the existing

application rather than information about their previous working methods. Though this study has given a new insight into the way the users

perceived Adobe RoboHelp, it did not serve the objective. The study was then divided into smaller parts with focus on major tasks in a

linear step‐by‐step process. This time, the focus was on understanding the skinning process of the help system files.

Since, there was limited access to the user group most of the studies were conducted through blogs and user group forums online.

With a basic understanding of processes, and study of the existing skin editor, concept

explorations were done for the new skin editor. Users (people using the application), Process (how exactly users skin the output),

Configurations (the elements users would like to edit) are few of the influential factors. Another outcome of this study was a list of

Users, pain‐points and expectations

Story boarding techniques and paper

prototypes were used to arrive at initial screens, which were later validated with Users (limited access). This phase was an iterative process till

the mock‐ups were accepted. During creation/ iteration of Paper prototypes/low‐fidelity mock ups, though important feedback was gathered

about the usability of prototypes and interface details, the users nevertheless wanted more information about the functionality.

Meanwhile, Surveys and feedback sessions were conducted on the existing application, which

gave a deeper understanding about Flex and also some design flaws. All these were

considered.

OVERVIEW OF PROCESS FOLLOWED


Note: The entire process may not be mentioned in the same order for the sake of the flow of the documentation

!"#$%&'(

)**+&(

),-&*./0.#,((

1&2,&(

3"#$%&'(0,4(

50"/&5(

6)5&"05+"&(

*5+47(

8*&"(*5+47(

95"+:5+"),/(

),;#"'0.#,(

<#"=(>#?(@

9:&,0")#*((

1&*)/,(

&A3%#"0.#,*(

6#?(24&%)57(

!"#5#573&*(

1&-&%#3(8B(

C)*+0%(

1&*)/,(

!"#4+:5(*5+47(

9=),(&4).,/(3"#:&**(*5+47(

D):E(B,5&",&5(F33%):0.#,*@G%&A(

:#'3&..-&(3"#4+:5(*5+47(

8,4&"*50,4(3"#H&:5($")&;(

8,4&"*50,4(3"#H&:5(/#0%(

B4&,.;7(50"/&5(+*&"*(

8,4&"*50,4(5E&(*7*5&'(

8,4&"*50,4(+*&"*(0,4(50*=(

!03&"(3"#5#573&*(

1&:)4&(),5&";0:&(:#'3#,&,5*(

607#+5(3%0,,),/(

I0-)/0.#,(

J&*5(0,4(B5&"05&(

K"&05&(*:E&'&*(

G),0%(4&*)/,('#:=+3*(

K#,5&A5+0%(B,L+)"7(

95+47(&A)*.,/(F33%):0.#,(

J0*=(?)*&(?#"=>#?(*5+47(

*:&,0")#*(

MCF68FJM(

D&*&0":E(0,4(

8,4&"*50,4),/(

K#,:&35+0%)N0.#,(

0,4(1&*)/,(

!DOJOJP!M(QJM9J(

0,4(DMGBIM(

Rich Internet Applications and Flex


Rich Internet applications (RIA) are web applications that have the features and

functionality of traditional desktop applications.RIAs typically provide a “no‐refresh” look to the

user interface and provide what is now being known as HDuX ‐ High Definition User eXperience. For an end user, RIA applications

bring the best of client‐server and web technology and for most ISVs and E‐businesses; it is now imperative to adopt RIA technology for their next release.

From software development perspective RIA follows a standard software development model

with rich controls that include powerful data and multimedia capability allowing us to present a rich set of information in an attractive

interface. From design perspective, RIA delivers highly customized output with a CSS (Cascading Style Sheet) based model.

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy

consistently on all major browsers, desktops, and operating systems.

While Flex applications can be built using only the free Flex SDK, developers can use Adobe(R)

Flex(R) Builder™ 3 software to dramatically accelerate development.

In the RIA concept the 5

layers software

architecture is always

aware but have to evolve

to take care of rich client

features.


SECTION D :PRELIMINARY STUDY This section describes the study before,design process

Madcap Flare


Flare's interface is similar to RoboHelp's and to a lesser degree, WebWorks ePublisher's. At the top of the window, there are the usual menus and toolbars. In a left pane, there are tree views of either your content or your

project's resources. In the right pane, you can display your content or the resources you're working with. At first, the interface a bit daunting and somewhat gaudy,

being used to the rather more spartan interface of WebWorks ePublisher, but it does not take long to learn it. Toolbars and menus are fully customizable as well.

Figure 1: Flare's Target editor

For many years, the dominant tools in the help authoring market were RoboHelp and WebWorks Publisher, but in 2004 there was a major shakeup. Macromedia Corporation bought eHelp, and then in turn was

acquired by Adobe. Along the way, the original RoboHelp developers were laid off. A core group of developers founded a new company, MAd Cap Software

with the goal of building a new help authoring tool that RoboHelp users would feel comfortable using, but one built with modern and standards‐compliant

technology. ). The result was Flare, which was announced two years ago at the WinWritersUA conference, released later that year, and is now up to version 2.5.

Unlike WebWorks Publisher, which is essentially a sophisticated filter for single‐sourced content, Flare is a

true help authoring tool. You can create help projects in Flare without any other tools or documents. You can import RoboHelp projects (but not Webworks projects),

or Word, FrameMaker, or HTML files. You can also use Flare as a single sourcing tool, writing in Word or FrameMaker and reimporting your content into Flare when you make changes. Flare is more limited than

WebWorks in its output options, which are HTML Help, WebHelp (a browser‐based format), DotNetHelp (a

MadCap‐developed format designed to work with Visual Studio 2005 applications), HTML and PDF.

The most recent release of Flare, version 2.5, has been

updated to support both import and export of Word 2007 files and to run under Microsoft Vista, something that Adobe couldn't manage in its recent release of

RoboHelp 6. If you have Office 2007 and have installed Microsoft's PDF add‐in, you can also export to PDF and the new Microsoft XPS file format.


Snippets and variables promote re‐use of content. Snippets are chunks of content that you write once and insert into more than one topic. Flare also provides several types of variables that you can use for terms like product names. Variables can be grouped into sets to make them easier to manage. Flare also supports condition tags, and can be applied to many different elements of your projects, not just text.

Flare supports several methods for making your help projects context sensitive.

Output files are a mix of XML, CSS, and HTML, depending on your chosen target.

It's pretty clear that MadCap Software is now one of the dominant players, if not the dominant player, in the help authoring field. Starting from scratch, they've created a suite of products that covers most documentation tasks. Their products are standards‐based, compatible with the latest version of Windows, and are tightly integrated.

Even if one does not need any of the other tools, Flare certainly merits your attention if online help is your primary deliverable. It's got RoboHelp beat hands down in almost every area. About the only reason to even consider using RoboHelp instead of Flare is if you have to create WinHelp and now AIR output. But if that's not the case, moving from RoboHelp to Flare is a no‐brainer.

MadCap has added some nice touches to the standard Windows controls. When one selects on something, (for example, a word formatted in bold text), the insertion cursor changes to show you the element boundaries (an element being something that you can select, and which may correspond to an XML element in Flare's source files). Elements are also shown by element bars in to the left of the text. These let one select and move elements while providing a visual indication of the the element or block of text that you're working with. A separate set of element bars appears when you're working in tables.

Flare uses Cascading Style Sheets to control its formatting. For more control over formatting, you can apply skins, which can completely change the appearance of a project. Flare's skin editor allows you to control the size and location of the help window, which buttons appear in the toolbar, the format of the tabs, style of the TOC and index, and many other items. Flare's approach to skins is more preferred to that of WebWorks ePublisher, which offers more skins out of the box, but requires manual editing of files and graphics to change many of the skin elements. One can preview the changes, and although the preview uses a sample project instead of one’s own, it's still a real time saver.

One has a great deal of control over navigation in your topics. Flare supports standard text hyperlinks and image hyperlinks, including image maps. Linking includes concept links ("See also" or A‐links), related‐topic links, and keyword links (K‐links). You can also create browse sequences for your whole project or for groups of topics that you consider to be related.


SECTION E :SKIN This section describes skin, its usage in Robohelp;Air Skins Current Robohelp skin editor Problem Investigation Air help Common element mapping Need for a common skin editor


Skins

What is skin?

Skins represent one of the most glamorous and high‐profile additions to RoboHelp , and eHelp

had put "Customizable look and feel" at number two in its list of new features. Skins are a part of the RoboHelp HTML component and

the WebHelp output format only,

It’s perhaps tempting to write Skins off as a purely cosmetic feature that has little real value

in improving the experience of either Help author or user. However, based on the experience of technical writers working with a number of different organizations, they realized

how important it can be to tailor the look‐and‐feel of the Help environment. And that’s exactly what Skins enable one to do for WebHelp.

eHelp had clearly put a lot of work into this area, and they have come up with a system that is highly flexible and easy to use, which should

meet the needs of even the most demanding Help designers.

The idea behind Skins is that you can specify precisely the way in which the topics,

navigation, and toolbars are laid out and

presented to the user within the WebHelp browser window. Within your control are background colors, buttons (you can select from a range of standard options or specify your

own custom gifs), font size for the TOC, index and search, and a range of other variables. Together, a collection of values for all these

visual characteristics is known as a Skin.

Here is a screenshot of RoboHelp's Skin Editor:


You can select from a range of Skins that RoboHelp supplies "off the shelf" or you can create your own Skins. With the default Skin applied, a WebHelp system looks like the following:

All the information for a Skin is actually saved within a .ZKN file and may be exchanged between different RoboHelp projects.

Adobe /eHelp has a shared gallery of Skins on its web site( now RoboHelp Exchange), and is encouraging RoboHelp authors to contribute to it which is a great idea. If user needs to be able to incorporate the company’s logo into the WebHelp frameset, Skins provide a useful and easy way to do this.

Use skins to change the appearance of WebHelp and FlashHelp systems. Skins apply to the left side of a window and the toolbar across the top of the output. Customize the Help system by changing colors, buttons, fonts, and icons, and by adding backgrounds and logos.

RoboHelp includes predefined skins in the RoboHelp Skins Gallery.


Current RoboHelp Skin Editor

Edit skins

Edits to skin properties take effect the next time you generate using the skin.

In the Project Set‐up pod, expand the Skins folder.Right‐click a skin. Select Edit.Click the Toolbar tab. Set options, as needed:Note: Some options aren’t available, depending on the output type.

Main Lists items that appear on the main toolbar.Add custom toolbar item (WebHelp and WebHelp Pro only) .Click to add a custom button to the main toolbar. In the Custom Toolbar Item dialog box, define the text, image, or both for the button on the Text tab. Type spaces before or after the text to add space between the edge of the button and text.On the Action tab, define a link or a script for the button:

Link Link the button to a URL.

Type the path or click the Browse button to browse to it. Linked files are copied to the skins folder (ProjectName\!SkinSubFolder!\YourSkin).

For JavaScript, specify the function calls for these actions:Onload Specify a function to call when the page containing the button is loaded (MyFunction())OnMouseOver Specify the function to call when the pointer is over the button.OnClick Specify the function to call when the button is clicked.

Under Advanced, add or remove dependent files for the custom toolbar item when using the multi‐author feature.Dependencies Lists the dependent files already added.Click Add to specify the name of another dependent file.Add Browse to the location of a dependent file. Click OK. External files are copied to the project folder automatically.

Remove Remove a dependent file from the

Dependencies list. An image in the custom toolbar cannot be removed. Files are removed only from the RoboHelp software, not from the hard disk.Inline JavaScript Write function definitions for custom button functions in the project.External JavaScript File Browse for and select the file.Remove custom toolbar item Click to delete a selected custom toolbar item.

Contents, Index, Search, Glossary Select the button to change and click the Edit button to edit the button text or to place an image on the button.

Search Input Double‐click to edit the field that appears in the toolbar and the Search pane. The button options apply to both the toolbar and the Search pane. The Caption and the Text Box Width apply to the toolbar only. The box can be from 10 to 40 characters wide.

About Select and click Edit to change which image is displayed in the upper right of the main toolbar.


Specify an About Button image, which is copied to the Skins folder. Then specify the following information, as needed for the output format:Image Select an image to display at the left of the About box.Company Enter the company name, which is displayed below the logo. This text is a hypertext link to a URL specified under URL.Copyright Enter a copyright notice.URL Enter a web address for the company website.Title Image Specify an image to display at the top of the About box. Keep the image smaller than 211 by 60 pixels.

Author Identify the system or give more information to users.

E‐mail Enter the e‐mail address of the author.

Navigation Bar Modify the items directly under the main toolbar.

Previous, Next, Sync TOC, and Hide Select the item to change and Click Edit to change the image for the button.

Enabled indicates that the user can click the button for more topics. Disabled indicates that no topics exist in that direction.

Click the Navigation tab. Click the browse buttons to select images, and specify other settings as needed:.Topic/Page Select an image for TOC topics.Remote URL Select an image for links not in the project.

Background Image Select an image to use in the background of the content region. The images are tiled.

Hover Color Select a color to display when the pointer moves over links.Click OK.To rename the selected skin,

right‐click, select Rename, and type a name in the Name box.

Click Update View to view updates.

Click Preview to see the full skin.Add skins to the gallery

Store or reuse skins by adding them to the Skins Gallery.

In the Project Set‐up pod, expand the Skins folder.Right‐click a skin.Select Add To Gallery.

Import skinsWhen you import WebHelp SKN files or FlashHelp FHS files, all associated files are added to the skins subfolder. You can also import a compressed ZKN (for WebHelp) or FHZ (for FlashHelp) file.

In the Project Set‐up pod, right‐click the Skins folder. Select Import.Navigate to a skin file or a compressed skin file.Select the file. Click Open.(Optional) Type a name and filename for the skin.Click OK.


You can select this skin the next time you generate output.

Export skins

Exporting a skin saves it as a compressed file

that contains the skin and its associated files.

In the Project Set‐up pod, expand the Skins folder.Right‐click a skin.Select Export. Navigate to the location for the exported skin. Click Save.

Delete skins

Do one of the following:

To delete a skin from the project, select it in the Skins folder in the Project Set‐up pod.To delete a skin from the gallery, select the skin in C:\Program Files\Adobe\Adobe RoboHelp [version]\RoboHTML\Sqskinsext\Gallery.Press Delete.

Preview skins

You can preview skins for WebHelp, WebHelp Pro, FlashHelp, and

FlashHelp Pro projects.

In the Project Set‐up pod, expand the Skins folder. Select a skin.In the toolbar, click the View button .Create custom skins for WebHelp and WebHelp Pro projectsThe custom skin is saved as an SKN file to [Project folder]\!SkinSubFolder!\[skin name].

If you create a custom a skin from a gallery skin, the gallery skin remains unchanged.

In the Project Set‐up pod, right‐click the Skins folder. Select New Skin.Do one of the following:Select Create Custom WebHelp Skin. Click OK.Select Create Skin From Gallery. Click OK. Select a skin. (Optional) Click Preview to view the selected skin.

Set options in the toolbar and Navigation panes.Click Update View to view changes in the dialog box. Click Preview to view the changes in a separate window.

Click OK. Type a name and filename for the skin, including the .skn extension.

You can use the skin the next time you generate output.To share a skin file (SKN) with others, define all

customizable elements of the skin beforehand so that other authors can include or exclude certain elements when they generate output.

Customize FlashHelp skins

You can customize FlashHelp skins by replacing elements in an existing skin with elements from another skin. You also can create a skin with Adobe Flash or the RoboHelp Skin Development Kit.

Customize or create a skin with Flash

Use an existing compressed skin file (FHZ) from the RoboHelp Skin Gallery or create one.

Navigate to the SDK template folder in C:\Program Files\Adobe Robohelp [version]\FlashHelp SDK.To view the FlashHelp SDK documentation, open Help.htm or use the FlashHelp SDK.PDF.To distribute to a developer, share the FlashHelp SDK folder.


Problem Investigation

PROBLEM:

“To enhance the published AIR output by providing ways to control the design elements of the published help system in Robohelp”

USERS:

Technical writersHelp AuthorsKnowledge based writers

GOALS:

Propose a skin editing interface for AIR, to control and tailor the published AIR output in terms of cosmetic and usability changes.

ISSUE INVESTIGATION:

Following are few of the key points on a BROADER LEVEL that were proposed which should be kept in mind while designing and conceptualizing the solution for the problem.

A modern looking and more usable interface required.

Interactions within the interface should be minimized.

It should be easy to learn.

Options should be exposed in such a way that the user is encouraged to explore.

A overall scheme should be availble for one to apply.

The layout itself should be allowed to be defined by the user.

Edit in place,option.

Real time preview should be available.

Workflow of reaching the skin editor should be looked into.

Options should be available in a sequenced manner.

There should be two levels of design , one basic two advanced.

Allow comparing two skins at the same time.

For, some features users should be allowed to apply code from the interface itself

A similar interface should be provide for all output types, or a common skin editor for all.

Air Help Components


Air Help

The main AIR Help main components are:‐

Title bar

Contains the company image (if provided by the author) and the help name.

There is minimize maximize and close buttons.

Top Pane

This area will have 2 buttons for forward and backward movement for browser history. It has Print menu, Add or view favorites and toggle comment pod buttons also. –Uni Pane

Apart from the above, there is search text input and search button where in user can type words to search, and on pressing it will open the search results. ‐ Multi Tab Accordion

Apart from the ones in Uni Pane, there are Search text input, buttons for home (TOC), index button and glossary button.‐Classic Help

Status Bar

Status bar will always show the adobe help viewer name, zoom slider and also there is a

text input box as well where user can input the zoom percentage directly.

Content Pane

This is the main area where user will see all the content. Right clicking on the content pane will open a context menu to show or hide comments. We user select to show comment , he can add or view comments in the pages. All the comments will be added to the end of the content page and this is always stored in the application DB so on closing and reopening the help , comments will remain persistent .There will be a mini TOC present in the content pane at the top of HTML page.

Left Pane

This area contains TOC/Index/glossary/Favorite – Multi Tab Accordion

This area contains TOC/Index/glossary/Favorite/Search – Classic Help

Not present for Uni Pane

Air Help Templates


There are three types of Air help Templates, currently available

Classic Help

The Classic Help template divides the page into a top pane, left pane, and a content pane.

Multi Tab Accordion

The Multi Tab Accordion template divides the page into a top pane, left pane, and a content pane.

Uni Pane

The Uni Pane template divides the page into a top pane and a content pane.

All the templates have different appearance and navigation options.(See Appendix A)

Common features among the three types of templates:

Support for TOC, index, glossary, search, print, and the Content pane.

The following table shows the differences among three types of templates:

Features Classic Help

Multi Tab Accordion

Uni Pane

How do I Yes No No

Search Yes Yes Yes

Search results that show context

No Yes Yes

Showing/Hiding the left pane

Yes Yes No

Viewing status bar

Yes Yes Yes

Air Help elements mapping

The screen capture below, illustrates many of the features that are part of an AdobeAIR help application generated by Adobe RoboHelp 8. The author can create acustom design from a number of color schemes, skins and other features. Thisexample uses the Classic Help Template with the Ocean Blue skin.


A The branding logo and title across the top.B Contents, Index, Glossary and Search tabs of the navigation pane.C Mini TOC shown expanded to jump to a location in the topic.D Tabs showing multiple topics open at the same time.E Breadcrumb trail showing path where topic is located.F Arrows to navigate a Browse Sequence defined by the author.G “How do I?” tab for showing steps in procedures.H Favorites tab to user-defined topic shortcuts, Resources to external blogs, Wikis and Websites or for RSS Feeds.I Comments tab to show user's notes along with others in a shared review.J Preferences link allows a user to customize the items they prefer to view and to configure Comments.K A zoom tool for users who may prefer larger text.L Send and Receive button for sending and receiving comments from other users or reviewers.


Contents paneThis example uses theClassic Help templatewith the Ocean Blue skin.Note the branding icon inthe upper left.

How do I? paneA custom‐made list of steps in atask can be created for the userwho has a certain process they

want to work through.The author creates these “How

do I?” lists in the AdobeRoboHelp 8 Browse Sequence

Editor. These sequences can usethe order found in the TOC orspecially organized in a veryspecific sequence the author

defines.

Favorites paneIn this view, the end user canadd and organize manyinternal and external links toresources such as Blogs,Wikis, Websites and messageforums and RSS feeds.


!"#$#%&'(&)(*#('+),%(

-)%&#%&(

.%/#0(

1")''234(

526)37&#'(

( 87%9'(

( :;;(5##/'(

;#23<+((

=3#>#3#%<#'(

-)$$#%&'(=)/(

=37%&(?@A)%(

="2<7%B(&+#(!"#$#%&'(

C)@(@2%#(

D267B2A)%(*23

( =3#67)E'(

( D#0&(

526)37&#'(7<)%(

;#23<+((

-)$$#%&'(=)/(

=37%&(?@A)%(

-)")3(

F2<9B3)E%/(<)")3(

G7B+"7B+&H(

G7B+"7B+&I(

G7B+"7B+&J(

G7B+"7B+&K(

G7B+"7B+&L(

G7B+"7B+&M(

5)%&'(

5)%&H(

5)%&I(

5)%&J(

5)%&K(

5)%&L(

5)%&M(

5)%&N(

-)%&#%&'(

.%/#0(

1")''234(

526)37&#'(

F)3/#3'(

F)3/#3H(

F)3/#3I(

F)3/#3J(

F)3/#3K(

F)3/#3L(

F32%/7%B()@A)%'(

-)$@2%4(")B)(

.<)%(.$2B#'(

.$2B#'(

.$2B#(J@273H(

.$2B#(J@273I(

.$2B#(@273H(

.$2B#(@273I(

.$2B#H(

.$2B#(J@273('#&H(

.$2B#I(

.$2B#J(

.$2B#K(

.$2B#L(

.$2B#M(

.$2B#N(

.$2B#(@273I(

.$2B#(@273J(

.$2B#(@273K(

.$2B#(@273L(

.$2B#(@273M(

.$2B#O(

5)%&(>2<#(

5)%&('&4"#(

5)%&('7P#(

5)%&(<)")3(

After the study , of the AIR components and all its elements and attributes; they were mapped, organized and structured.

The figure on the left shows the top level structuring.

A study of the flex file for the AIR template was also done to find out all the elements and reach this conclusion.

A more detailed version is shown on the following page.The study was done primarily on Midnight , AIR template.

The study gave a basic understanding of how the skinning is done on a template and what all can be changed through the skin editor interface for AIR templates.



Common elements mapping

All elements of different output types which support skins were mapped .

These are the elements which are editable and are common to all output types.

This was done to see the difference in element supported by different skins.

Also, to strengthen the proposal for a common skin editor for Robohelp.

The table shows the mapping of these elements.

71



Need for a common Skin Editor

HTML

HELP!

WEB!

HELP!

FLASH

HELP!

AIR!

HELP!

NO skins are applied!Directly edit HTML!Apply style sheets!

Web Help Skin editor is available also skins can be selected from

the skin gallery!

Have to navigate to SDK template folder and do the needful

also skins can be selected from the skin gallery!

Cannot be edited and can select from 2 skin options!

In RoboHelp currently, for different types of output format, there are different ways of skinning.

This is summarized in the following figure:


Purpose and objectives would be: ‐

• Help determine the information of the output window

• How big the output window should be where should it positioned on the user’s screen

• Settings that are specific to certain kind of output types(i.e. desktop based help or server based help for AIR help , Html help etc )

• Which online help tabs or buttons (e.g. : TOC , index , search) are included in the output and which one should be the default element

• And other settings

Also, there are a number of loose end workflows in RoboHelp, which can be connected as a common workflow to provide all combined functions.

1. There is WebHelp skin editor

2. A skin gallery fro FlashHelp and WebHelp

3. Existing templates for Air Skins

4. Proposal for AIR Skin Editor

5. Generate output Wizard Specifications‐ a wizard allowing publishing the output. Also, having options of allowing to sect the skin at the publishing stage.

Hence, a common skin editor proposal for all output types can combine the different workflows and present everything to do with skins in a unified manner.

Web help skin editor!

AIR skin editor!

Skin !Gallery!

Templates! Generate output wizard Specifications!

For ,!

flash help!

For ,!

Web help!

For ,!

AIR help!

For ,!

Web help!

For ,!

AIR help , to be

introduced!

Existing for All,!

Different for AIR help!

Note: This was a proposal made to Adobe, but due to other criteria’s which were to be taken under consideration, for he next release a separate AIR Skin Editor would be launched.


SECTION F :USER FOCUS This section describes the user study Behavior model User study Scenarios Analysis User Needs Possible approach for skin editor


Behavior model

Power users

These users create skins from scratch almost most of the time. And are usually well acquainted with programming also. Hence, can customize skins to their complete level of satisfaction.

Such users do find the entire process, time consuming but are most the time able to achieve the desired results.

Regular users

Such users most of the time edit an existing skin either from gallery or download or import it from somewhere. They just tweak existing skin and customize it according to their needs and do not bother creating new skins from scratch or programming at the back end for further customization.

Selective users

These users do not create or edit skins but just download or import them. If they need any customization for skins they usually contact someone else to do for them and do not bother in tweaking or editing skins themselves.

Users at a GlanceTarget Personas Brief Description Target Personas Brief Description

Kim Coulter 55 Technical writer Power/selective user

Michela Beca 38 Engineer Power user

Kevin Bear 46 Technical Communicator Selective/regular user

Tammy Paul 26 Senior Technical writer Selective user

Troy Wells 40 Technical writer Power/regular user

Alastair Dent 42 Technical Author Power user

Rick 51 Trainer/Consultant Selective/power user

Rithesh 34 Technical writer Selective/power user

Udit Chaudhuri 54 Technical writer, Design Manager Selective user


User study

!

Sreejith Nair 27 Senior Technical writer Selective user Ram 55 Technical Designer Selective user Garrett Traux 35 Technical writer Regular user

Laura 42 Technical writer and Help Author Power/regular user

Karla Marsh 49 Trainer/Consultant Regular user

Josepha Rood 41 Technical writer/Business Analyst Regular user

Mike Hudnall 56 Technical writer/ Editor Regular user

Imtiaz 25 Technical writer Selective user

Detailed User pro!les

7777


!

Age-55Profession:-Technical Writer

Usage and expectations from Skin Editor

Kim uses skin editor when he needs to use a user de!ned skin and not the default skin.For some projects he need to use customized/embedded Help pane.

For kim , Mostly, someone designs the skin as and when required by himSometimes ,he creates a new skin from scratchRarely, he edits an existing skin.

For Kim , the most important need from a skin editor is the ease of use.

He does not like the “canned skins” offered by Adobe Robohelp.

He has used the web help skin editor in Robohelp

Help authoring tools used (in order of preference)

Adobe Robohelp ‐primaryAuthor It ‐ never usedMadcap Flare ‐ never usedOther ‐ Dreamweaver

Motivations and Goals

Customize skins according to the user.

Pain-Points

n/a

Kim Coulter


Age-38Profession:-Engineer


Michela uses Skin editor to make the help system take on their company’s look and feel.

Michela always Create’s a new skin from scratch.

She has used Robohelp’s web skin editor and thinks it’s too basic and does not have enough options.

She expects the skin editor to be reliable i.e she expects it to work and output what she enters.


Adobe Robohelp‐ first preference using for 10 yearsAuthor It ‐second Flare ‐ Currently


To make the help system take on the desired look and feel.

Pain-Points

Too many choices but once you learn it, it’s pretty easy.

Michela Baca


Age-46Profession:-Technical Communicator


Kevin uses skin editor for customer branding or to make the Help more attractive/interesting

kevin usually , downloads the skin from skin gallery in the Help authoring tools or downloads an appropriate skin from the web.

Otherwise ,he Edits an existing skin.

Kevin has used the web editor in Robohelp and thinks that it needs more out-of-box options. Also , that there are few skins available for download.

For kevin , a skin editor is necessary to match a customers request. He feels the need of easier methods for adding functionality to new buttons, such as out-of-box scripts for a button that prints or runs a multimedia (Flash) !le.


Adobe Robohelp Motivations and Goals

To change the Help's look and feel.

Pain-Points

Need more out-of-box options

Kevin Bear


Age-42Profession:-Senior Technical Writer


Tammy is very comfortable with manual coding, which often seems to be necessary to him to achieve the desired results.

Tammy does not like using the current skin editor. He doesn’t use skins because they don't allow me to do the one thing he really really needs to do - single-frame help in which you are viewing either the TOC or index or a topic - no multiple frames. This is because their software opens next to the program. He has to do manual tweaking to get this affect. Skins don't let him customize enough to do it.

Mostly, someone designs the skin as a when required by him or he downloads the skins from skin gallery in the Help Authoring Tool.Tammy thinks that the skin editor should let you use any number of frames you want in any arrangement, any color you want, and provide button choices as well as letting you use custom images and buttons.

He has used the web help skin editor in Robohelp and wants to be able to control the number of frames as well as the look and feel.


Adobe Robohelp‐the only one they use right now.


To get a custom look and feel for your help..

Pain-Points

I need to be able to control the number of frames and whether the TOC and Index open in a separate frame or the same frame.

Tammy Paul




Troy uses skin editor when the default skin may have too many items. He feels it is best to tailor the skin to the items most likely to be used by your users.

Troy , Mostly, Creates a new skin from scratch and sometimes edits an existing skin

He would use a skin editor whenever he needed to create a skin. It makes it easier. He feels, If he had the skills to create a skin from scratch, he would still probably do as much as he could through a skin editor because it would be quicker.

Troy has only used RoboHelp's skin editor through X5. He thought it was intuitive and easy to use.

He expects the skin editor to be Intuitive, and allow him to adjust any setting of any item, allow preview of the skin he is creating/editing. It would also be nice to be able to add a custom function to a button or other GUI item on the skin.


Madcap Flare ‐ first preferenceAdobe Robohelp second preference


Unless you can code from the back-end, it is a must..

Pain-Points

There may be things you want to include that are not options you can add from the skin-editor.

Troy Wells


Age-42Profession:-Technical Author


Alastair Dent requires a skin editor when he needs to match corporate look and feel of the help system !le. Also, when he needs to Improve the usability of the Help System !le.

Alastair, usually creates a new skin from scratch and otherwise edits an existing skin

He feels the skin editor should allow fast development of bespoke skins and the output should beW3c compliance. Also, it should Output reliable cross-platform code.

He has not used the web help skin editor in Robohelp. T.hough he has used skin editors in other Help Authoring Tool


Adobe Robohelp ‐ thirdAuthor It ‐ FirstMadcap Flare ‐ Second


None.

Pain-Points

Lack of control

Alastair Dent


Age-51Profession:-Trainer/Consultant


Rick uses the skin editor to teach others how to use the feature.

He uses the skin in the following order of preference:

From skin gallery in the HATDownload an appropriate skin from the webImport skins which you have been asked to useCreate a new skin from scratch

He uses the skin editor for Speed and simplicity of changing look and feel of the help system !les and hence, expects it to be speedy and extremely #exible.Help authoring tools used

(in order of preference)

Adobe Robohelp ‐Extensive ‐ Used since 1992Author It ‐ No ExperienceMadcap Flare ‐ Tried it ‐ Hated it


To teach others how to use the skin editor.

Pain-Points

Speed - Slow to open. Slow to update with changes. Doesn't provide total access to skin features. For example, con!guring the layout or setting TOC width. Inability to assign individual icons to TOC nodes.

Rick




Rithesh uses the skin editor , to improve the look and feel. He thinks, Its always better to have a custom hand to build up the user interfaces.

He uses the skins in the following order of preferences:

From skin gallery in the HATImport skins which you have been asked to useCreate a new skin from scratchEdit an existing skin

Rithesh is motivated to use the skin editor,When he feels the entire theme should be change to have a better look for his projectsHe wants the skin editor to be an easy to handle, feature rich and does not lock to limitations and of course yes. Compatibility


Adobe Robohelp ‐version 6.0 Motivations and Goals

For Customization.

Pain-Points

Some times it locks to limitations. Sigh!

Rithesh


Age-54Profession:-Technical Writer,Design Manager


Udit uses the skin editor A) When a project needs an extraordinary user experience in terms of aesthetics, context (e.g. a game or entertainment product) or unusual effect; B) Where a corporate identity spec requires a given color for foreground and background, e.g. company logo and stationery.His usage of the skins are varied in the following order:

From skin gallery in the HATDownload an appropriate skin from the webImport skins which you have been asked to useSomeone designs the skin as and when required for youEdit an existing skin.

He has used the web help skin editor in Robohelp and experiences Browser incompatibility, in case Konqueror, Mozilla etc are used;


Adobe Robohelp ‐ 1Author It ‐ NAMadcap Flare ‐ NAOther ‐ 2


Customize skins according to the user.

Pain-Points

At times, in#exibility.

Udit Chaudhri


Age-27Profession:-Senior Technical Writer


Sreejith has uses a skin for a help system so that it looks readable and inviting. He uses it when making online help.

HE, gets the skin From skin gallery in the HAT.

He uses the skin editor to make the help system look good and readable - Invites the user to the help system.

He has used the Web Help skin editor in Robohelp and feels Robohelp has a good collection of skins.Help authoring tools used (in order of preference)

Adobe Robohelp Motivations and Goals

Better looking help system - Enabling readability - Easy on the eyes.

Pain-Points

Has to be professional - Has to comply with the application color standards

Sreejith Nair


Age-55Profession:-Technical Designer


Ram uses the skin editor when he,s creating online help

He simply,downloads an appropriate skin from the web.

He feels the need of a skin for !eld level help

He has never used the web help skin editor in Robohelp.


Adobe Robohelp ‐primaryAuthor It ‐ never usedMadcap Flare ‐ never usedOther ‐ Dreamweaver


for editing

Pain-Points

Arranging

Ram




Garrett use skins to blend in with the look-and-feel of the application he is creating the Help system for. Lately, to do this he has been creating user-de!ned skins.

He prefers editing an existing skin for the purpose.

Garrett uses the skin editor to customize the look-and-feel of the help system. To add buttons, such as the Print button.

He has used the web help skin editor in Robohelp. And he would love to see a few more templates to choose from. Also, he feels a gallery options of buttons that could be used in skins would be great.


Adobe Robohelp -!rst Motivations and Goals

Customize the color, the toolbar, and the overall look-and-feel.

Pain-Points

Limited in the sizing of the main navigation bar.

Garrett Truax


Age-32Profession:-Technical Writer, Hep Author


Laura’s organization use different skins to distinguish their product from their OEMed products (which are branded with the client's speci!cations)

She either creates a new skin from scratch or edits an existing skin.

She uses the skin editor only once and then import the created skin on all her projects.

She wants the skin editor to be less rigid, more #uid, more options for button and tab placement

Laura has used the Web Help skin editor in RoboHelp and !nds the GUI is horrible. She complains that the preview and !nal result do not coincide and one cannot resize graphics within the editor. Also, there is no free choice of button or tab placement..etcHelp authoring tools used

(in order of preference)

Adobe Robohelp ‐this is the only tool I currently use for helpOther ‐ Air (but hate it due to the skin inflexibility)


If it is easier to use, it can be a very useful addition to the RoboHelp product

Pain-Points

not #exible, the output inthe preview does not always match the end result... it is an awkward GUI as well

Laura




Karla used the skin editor to edit the default skin in RoboHelp to remove the "powered by" nonsense and to blend with our web site's look and feel.

She only edits an existing skin

Karla uses the skin editor when she has clients that needed more customization.

She expects the skin editor Ability to import components; canned Java tags, which you can also edit Yes Some things I want to do cannot be done in their skin editor


Adobe Robohelp ‐ 1Author It ‐ never usedMadcap Flare ‐ never usedOther ‐ Doc‐To‐Help


I use EditPlus or Notepad

Pain-Points

Don't have a skin editor apart from the RH built-in one, which is limited.

Karla Marsh


Age-41Profession:-Technical Writer Business Analyst


Josepha uses a skin editor when the default skin does not match the company's branding.

He uses the skins by editing an existing skin.

Josepha would like to use a skin editor when the default skin does not match the company's branding and to make my help system look more sophisticated.

Josepha would like the skin editor to have Themes, easy to apply colors/styles to more than one area at once; and be able to create templates.

He has never used the web help skin editor in Robohelp.Help authoring tools used (in order of preference)

Adobe Robohelp ‐ yesAuthor It ‐ not usedMadcap Flare ‐ not used


So that I can have a skin that doesn't look "canned" - to give my client something more special, designed just for them.

Pain-PointsI am not very sophisticated with this yet, so for me it's the learning curve.

Josepha Rood


Age-56Profession:-Technical Writer Editor


Mike uses skin editor when he needs to use a user de!ned skin and not the default skin. For some projects he needs to use customized/embedded Help pane.

Mike, uses the skins by editing an existing skin.

When help is for a system that Mikes organization develops for a client, they design the skin to be consistent with that system.

Mike has use the Web Help skin editor in Robohelp. It allows him to do what he needs to do for the most part but requires many trial and error.

Mike uses the skin editor for customization of interface -- for example to display a client logo or the name of the custom app.His expectations include con!gurability and ease of use and requests for more control of #ash skins.


Adobe Robohelp ‐ This is the only one I've used


Branding for the client and for our company.

Pain-Points

Lack of con!gurability in the Flash-based version of help.

Mike Hudnall




Imtiaz uses the skin editor for product speci!c customizations.

He only Imports the skins which he has been asked to use.

He hasnt used the web help skin editor in Robohelp but expects it to be or rather wants it to be self-learning unlike most Help Authoring Tools(features).


Adobe Robohelp ‐primary Motivations and Goals

No idea

Pain-Points

No idea

Imtiaz


Scenarios

Scenario #1 End result of the Help System is not a consistent design (too many options)

An Engineer/ Technical writer is in the process of preparing project files for a product (web application), that he has created.

The authored help system file must be optimized in terms of both usability and overall look and feel.

He opens the skin editor and starts editing /defining every element of the skin for the help system.

He starts exploring all the options and sets a style for every element without realizing the consistency and usage of colors and that it matters overall also; not just at individual element level.

The user gets frustrated editing every element and not be able to design and achieve a consistent and beautiful looking skin overall.


Scenario #2 User has a set color scheme in mind and doesn’t want to apply it at each individual level.

A Help Author is done with writing the content and now wishes to publish the help file in compliance with the look and feel of the organization he’s working for.

He wants to edit the skin and only the limited elements of it. He doesn’t want all the options exposed to him at the same time, as it just leaves him confused.

Also, he doesn’t need to see all the features of the skin editor at the first level itself cause he would not need to use them at all. He has a fixed color scheme in mind and doesn’t wish to play around with other features too much.

Once he would set the organizations scheme for the skin, he’ll not be getting back at it till the time new version of the product is released.

Hence, the skin editor is a one‐time use for him


Scenario #3 Need for complete control over the help

Software user assistance field has most the technical writers working as free lancers, handling multiple projects at the same time.

A help author is working on multiple projects and has to deliver different help systems to different clients abiding by their demands.

Author uses the skin editor to tailor the output’s overall experience and sense of design. For this, he needs to make a lot of cosmetic changes using the skin editor.

He would at this point like access to all the element possible of the skin, to be able to edit them. Knowing and be able to change every aspect of the skin becomes very important to him. Usability and Flexibility of the skin editor hence, becomes really important.


Scenario #4 Easy learning (WSIWYG)

An engineer has been working on a help document himself for the software he has coded.

He uses the skin editor for the first time and is not sure which element falls in what space on the final help system.

He makes certain changes in the skin editor and clicked on the update preview button to figure out what had changed and where.

This task had to be repeated a lot of time by him getting him frustrated, instead he would have rather had a what you see what you get preview window showing changes as they are made.

This also, increases the speed of his work, allowing him to explore and use the skin editor more often.


Scenario #5 Providing Skin comparison

A technical author is ready to publish his output file. He has various options to select the skin from; from skin gallery, from Robohelp Exchange or import any skins he already has.

But he is confused as to which skin to use and which would suit his purpose, hence, he starts trying skins by adding them in his project files. But, for this every time he has to publish a new output (preview).

Comparison of two skins, becomes difficult .The current interface doesn’t even allow so. This leads to making the user frustrated and makes the entire process for him extremely tedious and time consuming.


Analysis

A.

Technical wriTng

community, the users

prefer Adobe Robohelp over the Authoring tools

and is their primary tool for authoring help

systems.

B.

Also, majority users of

Help Authoring tools

have used the current Web help Skin Editor in

Robohelp and hence are accustomed or at least

have tried customizing

skin in Robohelp.


C.

Most of the users prefer

ediTng an exisTng skin to

suit their purpose. This means that they do not

want to waste too much Tme creaTng new skins

from scratch but just edit

an exisTng scheme and make it appropriate for

their purpose.


User Needs

1. Self‐learn abilityUsers require an easy learn editor as most of the help authoring tools are not easy to learn.

2. Easy to applyAll the edits should be easy to apply on the desired help system

3. Each item editableUsers need more control on help systems they publish and feel that everything on the help file system should be editable

4. Template customization Users require the functionality to be allowed to decide number of frames. They should be able to control whether they need single frame or multiple frames. Also, they require the functionality whereby they can adjust the size and width of the frames.

5. Rich and compatibleUsers feel the skin editor should be rich and be compatible with the format they publish the help system in.

6. Riddance of the current awkward GUIMost of the users felt the current skin editor UI in Robohelp is awkward to use and does not allow user to easily use it. Also, it feels like a 10 year old interface hence does not give

the users the feel of modern help system functionality.

7. Out of box optionsUsers feel the need of more out of the box options.

8. FlexibleUsers feel the current skin editor is not very flexible in terms of usability and hence less motivating for them to use the skin editor.

9. ArrangementUsers feel the arrangement of items is not appropriate in the current skin editor.

10. Preview output to matchSome of the users also, felt that what they get in the preview of the current Robohelp skin editor is not the same when they publish the output.

11. Few skins availableMost of the users feel there are not enough skins available to select from and edit or directly use. Hence, would like more options on it.

12. Too many options for someSome of the users even felt that there are too many options on the current skin editor and hence making them confused about the entire editing process for the skin editor. The users would at an initial stage like to have fewer options for them to continue with editing the skin

13. SpeedSpeed is a very important need for the most of the users. As, most of them are not really designers but are writers. Hence, do not want to be stuck editing/designing skins. Hence, they want the process to happen fast.

14. Resizable graphics Some of the users also feel that they should be allowed to define the size of graphics(Icons etc) themselves.

15. WSIWYGThe users do not get an auto preview as they make changes in the current web help editor.

16. Need easy and fluid themesUsers also require easy and fluid themes to play with and edit with.


SELFLEARNABILITY

EASY TO APPLY

RESIZABLE GRAPHICS

RICH AND COMPATIBLE

TEMPLATECUSTOMIZATION

RIDDANCE OF AWKWARD GUI

FLEXIBLE

OUT OF BOX OPTIONS

ARRANGMENT

EACH ITEM EDITABLE

PREVIEW TO MATCH OUTPUT

MORE SKINS

SPEED

EASY AND FLUID THEMES

TOO MANY OPTIONS(for some)

WSIWYG

BASIC USER NEEDS

Needs that were addressed during probleminvestigtion also.

Following were the basic needs ,which were identified after the user study.

Note: these are more on experiential and usabilty level than on functionality level.Functionality needs to be decided by the organization keeping in mind the various constraints they have to consider.


Possible Approach for skin editor

PRESUMPTION SCENARIO: Defining the skin, before generating the output


NOTE: Due to certan industry constraints validation could be done only with the documentation team inside Adobe.

VALIDATING THE APPROACH


Personas

Experience goals

The Skin Editor should be easy to use and flexible.It

should have modern look and feel and be speedy in

terms of the entire editing process.

It should be self‐learning unlike most feature in

help authoring tool.

End goals

She doesn’t need to see all the features of the skin

editor at the first level itself cause he would not

need to use them at all. She has a fixed color

scheme in mind and doesn’t wish to play around

with other features too much.There should be a lot

of options available.

Also, there should be consistent scheme options

and not all options exposed leading to exploration

of these options, resulting in a overall design which

is not consistent and looks bad.

Karla marshage:43profession:technical writer

Working in Organization

Regular user

1 Discern Expert Established proExperience goals

The Skin Editor should be more flexible in terms of

functionality.It should provide more options and

the elements should be easy to arrange.

It should allow everything possible to edit from the

interface itself.

End goals

He needs to have complete control over the all

features of the skin and be able to edit them.

It should be in a structured manner , allowing user

to edit in some sort of a flow.Hence, acting as a

guidance when creating a skin.

There, is a need for more template and themes.Also,

a way to able to compare skins on the same help

sytem.There should be options available to define

the layout scheme and the frames where the open

and how many.

Alastairage:42profession:technical writer

Working as Freelancer

Power user

2

Based on the user study , following two personas were decided.Keeping them in mind the design process was carried further.

VALIDATING THE APPROACH


SECTION F :DESIGN EXPLORATIONS This section describes the design concepts Concept 1 Concept 2 Concept 3 Concept 4 Concept 3, further exploration Common skin editor


Concept 1

!"#"$%&'&(")*+"(&%",-#'%"&

.+/,&%0"&#*)%&1&./+&%0"&0"#-&

)2)%",&

!"#$%#&#'(#)$(#*+&,(#$,-)$%./-$',-$

0#$+1#2/#3#)$"#1#/-$',%#$45$-#3$

%./-$("#$+1#2/#3$+,-#$3/&&$67%($

)/%+&,8$("#$47(&/-#$45$("#$(#*+&,(#$

BASED ON APPROACH 1

In , this concept all the editing is

happening in one screen itself.

There are varied panels on the screen, which displays editable data

i.e contextual in nature.

The figures on the left hand side display the workflow theskin editor.

• Create a skin

• Select a template

• Select elements to be present on

the help system

• Select the area , you wish to edit

• Select the key(icon /color etc)in

that area

1 2

3 4


!"#$%&'()(&*+&,((&*'(&&

(-#*./"(&0+)1+2&#3&

,("($*(-&.)(.4&

! "

#

!

"

#

!

!"#

!$#

%&'()*(+",#-",+).#&/#(0)##"123$+().#&/#

.),)4()5#)53("$,)#6&27&'#83,,#$)#

53.6,"9)5#&'#(0)#23:0(#6"'),.;# !"#$%#&'%'"()%

*+,%-.#$,%*(%

/,)0#1,%-*%

2

2#%

23%

• Select the attributes of that key

• Contextual editable contents are

displayed.Edit accordingly

As each element/key is selected it is

displayed in the preview window.

•

1 2

3 4


Concept 2

BASED ON APPROACH 2

In,this concept one has to select

different tabs to edit.

There is a defined flow in the editing process in this concept.

The figures on the left hand side

display the workflow the skin editor.

• Select a template

• Select a skin

• Select the color scheme

• Select the font scheme

• Select the elements

• Select the icon sets

1 2

3 4


As each element/key is selected it is

diplayed in the preview window.

They are added to the skin one by

one in a defined manner.

1 2

3 4


Concept 3

BASED ON APPROACH 3

In,this concept one has to select

different schemes to edit in place.

There is also a defined flow in the editing process in this concept.

The figures on the left hand side

display the workflow theskin editor

• Select a top level scheme

• Mouse over displays an

icon ,clicking on which takes the

the scheme in edit mode.

• After,selecting the top level

scheme, the dependent schemes

are displayed

• Select the font scheme to edit

1 2

3 4


• Similarly, one can select other

schemes to edit which displays

another dependent scheme to

select from or the user can define

there own scheme.

This design exposes all elements at

the same time allowing the user to

play around and explore.

1 2

3 4


Concept 4

BASED ON APPROACH 3

This concept is also based on approach 3

It allows the user to

• define skin scheme

• font type scheme

• font color scheme

• and icon schemeone by one in a flow without suggesting any other schemes at this stage.

This concept fits best for persona one , Discern Expert

who has a set scheme in mind and just has to apply it,to the skin to get the desired results.

1 2

3 4


The concept can then be taken further in edit in place mode.

Here,each area (pane in the help system) can be selected.

In context to the selected panethe options will be displayed for font color,font type,icon present or overall skin.

1 2

3 4

Concept Selection


After discussion with the product team and validation with the documentation team at Adobe ,approach 3 wastaken further and explorations were done further on it.

Following were some pro’s and cons of this concept which were identified at this stage.

Pros

Greater flexibilityUser has a lot to play around with,auto preview modeon.

Cons

• Scalable(in terms of elements to be edited).

• User doesn’t know on the first glance,what the color schemes are for(showing some sort of Legends would help)

• Visual clutter‐> (though, this can be taken care of)

• All the options are exposed at the same time,user wont know what to choose for the best.

• Even though, dependencies are present;Visual

harmony may be a problem.

This Skin editor will be used primarily for scenario one .Hence, a simpler hierarchical approach may be more appropriate.

Based, on these further exploration on concept 3 was

suggested.


!"#$%&'(&

)*+&

,#(#,#-+&

#$'(&

!"#$%&'(&)""&*+,&

-#(#-#.,&#$'(&

!"#$%#&'()(*#&'"+(

,#&#,#-+(#$.&(/.0"1(

2)3+($".*+1(42)4(

5)67$0")6(*$2+,+(

!"#$%#&'()(*#&'"+(

,#&#,#-+(#$.&(/.0"1(

2)3+($".*+1(42)4(

5)67$0")6(*$2+,+(

To reduce the visual clutter, more

interactions were explored.

Also, to fit in persona 1 i.e where the

user may not want all options visible

to him/her right away.

This, minimizing to sections and

resizeable concept would work.

Concept 3, further exploration

1 2

3 4

SMART DRAWERS concept


!"#$#%&'()#'$%

*(+%,#%

#-.(+/#/0%

1$#'%*(+%/#2+#%3"#4'%

5)+%&'()#'$%)"4*"%

*(+%"(6#%75+3%38.#%9%

,:;5+%$*"#<#%#3*0%

35=#3"#'0%

!"#$%"&

'()*%+&

!%,-%.&

/)%"&

!%,-%.&

01-*&2(3%&

'45%+%&

01-*&6171"&

'45%+%&

89:1-&

'45%+%&

89:1-&

'45%+%&

25%)%&#"%&.%,-%.&;(&*5%&

9)%"&#-.&4#-&41-*#<-&3#7%:%)&

8%71-=<-=&*1&.<>%"%-*&)()*%+&

."#$%")&<-&1-%?&

1

2

A concept of smart drawers were proposed which would be a panel on the right hand side, of drawers of different type. These drawers would be of Font type , Font color etc containing schemes in them which can be opened and used.

There would be two typesof drawers• User defined, these are define by user who would

place schemes according to ther need.These drawers could be of mixed type in nature.

• System defined , these are automatically generated and place the existing schemes in them.

Smart drawer concept


!"#$%"&

'(& ')& '*& '+&

,(&

,)&

,*&

,+&

,-&

,(&

,)&

,*&

,+&

,-&

,(&

,)&

,*&

,+&

,-&

,(&

,)&

,*&

,+&

,-&

.#/0&!"#$%"&

/123#425&6#7%8%5&

.#/0&

'#7%8%&

/123#425&&

94:%"%23&

5/0%;%5&

<3&#&=;%&127>&(&

6#7%8%&$477&?%&

71#9%9&@1"&%#/0A&

B123&3>6%&

B123&/171"&

CD812&53>7%&

E/12&&53>7%&

.#/0&5/0%;%&

/123#425&94:%"%23&

/171"&56#/%5F1"&

4/12&56#/%5G&

?%712H42H&31&

94:%"%23&%7%;%235&

I@&30%&&3%;67#3%&

The drawers , concept is further explained here with the help of the figure.

So, each drawer would contain palettes.Each palette would have different schemes in it.

SKIN COMPARISON concept


!"#$%&&'()(&

*+&+,(-&*'(&.%#-&

.$)((-.'+*&.#/(01)&

!"#$%&'()%*+"+%,"-.%

/"+0(+1%/#)+2%

3-%&#0+%%#%&)#/&*-4%

!"#$%&'($%)*##(%"+,$-'..$)+/#$

"#*#$'($,"#$.'%,0$1*+/$"#*#$+(#$

)2($+3#($$',$'($2$(#-$-'(4+-$0$

%25#$',$+*$4#.#,#$',6$

!"#$%&'(&')*(&&+'&

,#*-&+.*&/%#(&&#(&

0&(*-&-#(1'-&

2'3&$'4)03#/'(&&

1 2

3 4

This concept would allow users to

take a snapshot of the created

skin;darg and drop in to a panel the

skin snapshot panel which opens on

the let hand side.

The user can open skins in the

window (multiple windows can

open) , save them or delete them.

A skin comparison method would

allow them to compare skins and

select the skin which is best suited

to their purpose.


Common skin editor detailed wireframe

This is a proposed concept for the

common skin editor concept.

Figure one shows a dockable panel

which allows the user to opena skin

form gallery of any output type or

create a skin of the particular output

type.

After that,

Select a template .

Then, select and apply a skin to the

template.

One can select the access methods

or add new methods.

1 2

3 4


From the components section all the

editable elements can be viewed.

Once , the elements are clicked it

gets selected in the preview window

also or one can select the

component from their also to edit it

by double clicking on it.

As, the element is selected on right

panel contextual properties to that

element is displayed with various

editable attribute options related to

the selected element.

The figure 2 , 3 and 4 displays this

concept.

1 2

3 4


One can zoom, to view the skin

clearly.

Also, there is a screen picker present

at the end on right hand side.

Allowing the user to select a color

off the screen anytime and note it’s

hex values.

Once can view the parts of the skin

by clicking on the areas(eg top pane,

left pane etc.) and edit in portions.

This concept is completley scalable

and is designed keeping in mind all

Adobe standads of UI patterns and

components .

1 2

3 4


SECTION F :FINAL DESIGN

SCHEME DESIGN


Also, following key points were followed.

• Give user a top level scheme to apply on the help portal

• Further breakdown of schemes so that the user does not need to drill down in each element trying to figure out rather spend too much time on editing the skin.

• Also, schemes help in maintain consistency for the look and feel. As, most of the users may not have a great design sense

The Final design would be expanded in two phases1st phase; basic features 2nd phase; advanced features

At this stage , the work is carried out keeping the basic version in mind. The basic version would have majority users falling as a part of Persona 1 i.e Discern Expert

Keeping the above considerations , the schemes was designed and structured.

Detailed breakdown,SCHEME design


The figures below display the detailed breakdown of skin design.Read from top to bottom and map it to each color space/icon space in the scheme design read from top row left to right then bottom row left to right.Each color space or Icon space maps to a particular element in the skin. Changing these would change the skin design.

Default color On hover color Enabled color Disabled color Button font enabled color Button font disabled color

BUTTON Scheme

Navigation pane of suggestion of hits of suggestion comment pane theme of portlets

Font Color Scheme

Navigation pane Left pane Bookmark pane Comment pane (title bar) Theme of portlets (title bar) Theme of portlets (background bar) Search text input Search suggestion backgrd color

SKIN(Color) Scheme

Navigation pane Comment pane Theme of portlets Other Titles fonts (grey stu! powered by skylark

Font Type Scheme

backward icon->set of 3 forward icon->set of 3 home icon->set of 3

help icon glossary icon

print icon email icon

bookmark icon add

Delete show sort

ICON Scheme


During editing After publishing

Sub tasks Karla, and sees too many options in the skin editor and gets confused.

Karla already a set scheme in mind and need to give the help system my companyʼs look and feel

She will set the skin only once till the time a new version of the product is installed.

To edit certain elements she has to refer to the help manual to figure out certain features.

Karla is not able to see ,Real live preview of the changes made on what she;s editing

After publish the help system using the skin; Karla finds out that the output does not match the preview

Also, since Karla is not really a designer she eneded up editing more elements without realize the consistency of the overall design is effected.

Scenario Karla, comes to office,starts Robohelp and launches the web help skin editor.

Karla has been working in organization with established guidelines regarding the look and feel of their products.

The organization she works in will change its guidleines only if company goes a branding change or a new version of the product is launched.

She has been asked by her organization to make certain changes in the final help system , but sheʼs unable to find all the options.

With the reference to the help manual Karla is making changes but when she goes and clicks on update preview,Sheʼs unable to find the reflected changes.

When the editing of the skin is done. The skin is then applied to the help file which needs to be published.

After, the file is published the output is reviewed for look and feel and content display also.

Considerations/Influencers

Can I see less options on the first screen?(level wise)

Can I just set the scheme somewhere and directly apply it??

Why canʼt I have easy to learn features which I can figure out by just exploring?

Why canʼt I see in context the preview of what portion I am editing?

Can I not get the same output as what I see in the preview of the skin editor?

Could I not have some sort of suggestion the colors I use?

Pain-points Too many options, but once you learn it, itʼs pretty easy

Selecting and applying colors to it. It would be easy just to apply a theme

I am not an expert & editing one time, need an easy and quick method

Its difficult to use for the first time user.

I do not get to know what element I am editing or where am I adding the element?

Output does not match.

End result does not look good.

Functionality Level wise display of option

Themes and schemes available. This are editable.

Saving the skin Easy to learn interface

A WSIWYG preview window

Output to match preview

Consistent themes

Proper structuring and grouping of Information.

User can also define themes

Can be viewed in skin gallery

Good looking skins

Import functionality Dependent sub-themes

TASK ANALYSISDISCERN EXPERT


TASK ANALYSISESTABLISHED PRO During editing

Advanced features

Basic features

Sub tasks Kim wants many options as I am not sure what options would be required by me.

He wants to be able to drill down to each element and be able to edit it.

Kim needs more flexibility.

He feels the need a way to compare two skins.

Real live preview of the changes made on what Kim is editing.

He needs the entire process to be speedy.

He needs more control in terms of editable templates/layout.

Scenario Kim, has many clients and has to make and deliver different help system with different functionality and design to them.

Kim has a lot of functionality changes to make to tailor to the customer needs.

Since , Kim has a lot of changes to make ; the limited options make him restricted.Hence, he has to code from the back end.

While working on the skins Kim creates a new skin from scratch, also heʼs able to find an appropriate skin on the web he has to output to help system files to compare them.

Kim is making changes the skin. But to see the changes every time, he has to every-time update the preview and find that element in the skin template.

Kim has a time limit to deliver and need to spend more time on developing and writing content more than the designing part.

After, the file is published the output most of the published file look the same in terms f layout and there is no flexibility to define them.

Considerations/Influencers

Can I see have access to more editing option through the skin editor interface?

Can I edit some of the codes like JSinline etc right from here?

Can I have out of the box options?

Could I have some sort of interface allowing me to compare two skins at the same time without publishing it?

Could I just not have in the place editable element?

Could I have options grouped together so that I can apply them at once?

Can I have option to change the layout myself through the interface rather than going and coding at the back end

Pain-points Doesnʼt provide access to all features

Lack of control Need more out of the box options

Publishing output a number of times to see how different skins look is tiresome

Has to be professional. Has to comply with applications standards.

Slow to open. Slow to update changes

I need to be able to control the

number of frames . Limited in sizing

the navigation bar

Functionality Proper structuring and grouping of Information.

Allow to select each element and edit it.

Giving a modern look and feel to the interface

Allow skin comparison

A WSIWYG preview window

Using less complicated workflows

Allowing to place different panes as the user wants.

More options available at second level

Making more elements editable through the interface

Building on richer technology, for more interaction possible.

Building on flex. Allowing to move components inside the pane.


Task analysis

Task analysis was done to analyse what a user is required to do in terms of actions and/or cognitive

processes to achieve a task. The functions to be included within the existing skin editor and the new AIR user interface could be specified.

The Processs benefited as it provided knowledge of the tasks that the user wishes to perform. Thus it is a

reference against which the value of the system functions and features can be tested.

Some of the functionalities were identified some for

the basic phase of design (shown in blue), rest for the advanced features(shown in pink).This is shown in the previous two pages.

Paper prototyping , was an on going iterative process to clear out thoughts from my mind and present it to

the team for quick feedback.

After all the design explorations and iterations and

consideration of the organization’s constraints , a detailed wireframe was made.

Wire Frame

A wireframe is a stripped‐down visual representation of a single web page, devoid of any graphic

treatment. As the name suggests, it is a framework made with wires, which define basic layout and placement of content and page elements such as

navigation; header & footer; branding etc.

They are sometimes referred to as “page schematics”,

“page architecture” or even “blueprints” (though the term “blueprint” sometimes refers to a more overall site design).

The application screen was divided into left pane which consists of the dependent second level themes.

A top pane consisting of top level , overall skin scheme.

A preview pane with , certain functions attached to it.

The edit pane or select pane opens in between the left pane and preview pane.

On the top is the application header.

This layout and interaction flow was finalized after exploring and iterating several times both on paper and screen.

After discussion with Design manager, this was this interaction was selected as the best .

WIREFRAME


VISUAL DESIGN


Visual design and aesthetics affect user confidence in and comfort with the application. A polished and professional look without excess or oversimplification is not easy to attain.

Certain areas which were adresseed:

• Use of adobe Scope specification for the UI components

• Strictly optimized Component Styling for Flex

components

• Capitalization of text in interface elements to ensure consistency and readability at places

• Layout and alignment of interface elements to

enhance clarity, ease of use, and aesthetic appeal

• It was made sure that the visual elements are coherent according to the scope color scheme.This is a darker

version.

The visual designers in the UI Design Team are responsible for application icon creation.They produce a family of icons that look good, work as a family, and conform to the generalbranding guidelines for Adobe

products. The visual designers will track all the icons needed and delivered to the product teams. One of the


goals of the application icons is to convey the proper Adobe branding message.

In addition to having a pleasing look, icons also must

look like they belong to two families:

• The cross‐product family of all Adobe applications.

To do this, icons representing similar files have similar designs (for example, all Preferences icons regardless of application use the dial imagery).

• The intra‐product family of the particular application.To do this, icons within a product use the product’s color scheme and include theproduct’s unique symbol (for example, all After Effect

icons include the radio tower image and use the slate‐blue color scheme).

Icons used here are developed by the Visual Designers at Adobe.

Since 1992, Adobe’s primary corporate typeface has been Myriad, an Adobe Originals designwhich was first developed and released in Type 1 multiple master format, and subsequently

in OpenType format. However, since its integration with Adobe’s corporate identity, Myriad

has been adopted for other highly visible corporate identities, such as Apple, Verizon, Macy’sand Wells Fargo.

Font used in this design is Myriad Pro.

Other styling and visual elements for the design are all

used as per Adobe Scope Guidelines.


CONCLUSION


Learning

• Understood the Product Robohelp and the Help Authoring process

• Exposed to new emerging technologies like flex and AIR

• Corporate culture• Communication skills and time management

Adobe Robohelp is a Help Authoring Tool used world wide to publish Help systems.

It is a best‐of‐breed application to create single‐

sourced output for multiple channels:

• Online help for applications

• Knowledge bases Policies and procedures manuals

• An eLearning launch pad

• Adobe AIR help applications

Robohelp allows easy‐to‐generate Adobe AIR help applications to keep information base upto date with a single file that combines the best of the Web with

speed of the desktop.

Intially , a lot of time was spent understanding and

learning the product and it’ domain.Then the focus was shifted towards the enhanccment of the published output and giving user more control

towards it.This was done through user research, which led to domain and user understanding in context to the skin editor. Major tasks were analyzed and work flows were developed. Constant user

feedback on existing application helped to identify their pain points. From this simultaneous process of

repeated user studies and with constant feedback as a reference, the design for new interface was conceptualized.

Initially paper prototypes were made and later mock ups were generated which were validated through user testing in an iterative process.

Visual styling was proposed for frozen mock ups for which development has commenced.

Further work on the project can involve the following:

• The design caters to basic features .The advanced

features could also , be added.

• As the application is being developed in flex, an AIR version of the same can be proposed.

• Concept 3 further exploration ,(smart drawer ,resieable and skin comarison) concept could be takein into consideration and merge into

the current design.

• A common skin edior solution incorporating all above could be designed.

APPENDIX


UNI PANE TEMPLATE

CLASSIC HELP TEMPLATE

MULTIACCORDIAN TEMPLATE

BIBLOGRAPHY

[1]Nielsen Jakob, Usability Engineering, Kaufmann Morgan San Francisco, 1994

[2]Cooper, Alan and Reimann, Robert, About Face 2.0, John Wiley & Sons, 1995

[3]http://designinginterfaces.com

[4]http://www.writersua.com/

[5]http://en.wikipedia.org/wiki/Adobe_RoboHelp

[6]http://www.adobe.com/products/robohelp/

[7]http://notcolin.wordpress.com/2009/03/10/126/

[8]http://groups.google.com/group/macromedia.robohelp.webhelp/topics

[9]http://www.justskins.com/forums/macromedia‐robohelp‐44/

[10]http://themepark.modestspectacle.com/2007/11/21/uxd‐‐user‐experience‐design‐what‐is‐uxd.aspx

[11]http://www.stctoronto.org/newsletters/2007/06/soltys.htm


http://designinginterfaces.com/Closable_Panels

http://designinginterfaces.com/Closable_Panels

http://www.writersua.com

http://www.writersua.com

http://en.wikipedia.org/wiki/Adobe_RoboHelp

http://en.wikipedia.org/wiki/Adobe_RoboHelp

http://www.adobe.com/products/robohelp/

http://www.adobe.com/products/robohelp/

http://notcolin.wordpress.com/2009/03/10/126/

http://notcolin.wordpress.com/2009/03/10/126/

http://groups.google.com/group/macromedia.robohelp.webhelp/topics

http://groups.google.com/group/macromedia.robohelp.webhelp/topics

http://www.justskins.com/forums/macromedia-robohelp-44/

http://www.justskins.com/forums/macromedia-robohelp-44/

http://themepark.modestspectacle.com/2007/11/21/uxd--user-experience-design-what-is-uxd.aspx

http://themepark.modestspectacle.com/2007/11/21/uxd--user-experience-design-what-is-uxd.aspx

http://www.stctoronto.org/newsletters/2007/06/soltys.htm

http://www.stctoronto.org/newsletters/2007/06/soltys.htm

Date post:	10-Mar-2016
Category:	Documents
Upload:	shuchita-baranwal
View:	226 times
Download:	2 times

Skin editor _Adobe

Documents