Skin editor _Adobe by shuchita baranwal

DIPLOMA PROJECT Adobe Robohelp Vers.9 Selected feature work Sponsor : Adobe Systems, Noida

STUDENT : SHUCHITA BARANWAL PROGRAMME : Post-Graduate Diploma Programme

GUIDE : RUPESH VYAS

2009 COMMUNICATION DESIGN FACULTY (SOFTWARE & USER INTERFACE DESIGN)

National Institute of Design Ahmedabad

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

ADOBE ROBOHELP A help authoring tool Selected feature work for version9 Project by : Shuchita Baranwal Software & User Interface Design,09 National Institute of Design

Shuchita Baranwal ~SUID

Pg no.1

INDEX Acknowledgement , Pg no. 4 About NID , Pg no. 5 About 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

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

Users , Pg no. 19 Usability study , Pg no. 20 SECTION C : METHODOLOGY , Pg no. 46

SECTION D : PRELIMINARY STUDY , Pg no. 54

Shuchita Baranwal ~SUID

What is User Experience Design?, Pg no. 46 Product life cycle process, Pg no. 47 Organization Structure , Pg no. 50 Overview of process followed ,Pg no. 51 Rich Internet Applications and Flex ,Pg no. 53

Madcap Flare , pg no. 55

Pg no.2

SECTION E : SKIN , Pg no. 57

Skins , Pg no. 58 Current RoboHelp Skin Editor , Pg no. 60 Problem Investigation , Pg no. 63 Air Help , Pg no. 64 Common elements mapping , Pg no. 70 Need for a common Skin Editor , Pg no. 72

SECTION F : USER FOCUS , Pg no. 74

Air Help Templates 65 Air Help elements mapping 66

Behavior model , Pg no. 75 User study , Pg no. 76 Detailed User profiles 77 Scenarios , Pg no. 94 Analysis , Pg no. 99 User Needs , Pg no. 101 Possible Approach for skin editor ,Pg no. 103 Validating the approach 104 Personas , Pg no. 105

SECTION G : DESIGN EXPLORATIONS , Pg no. 106

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

Concept Selection 115

Concept 3,further exploration , Pg no. 116 Common skin editor wireframe , Pg no. 120 SECTION F : FINAL DESIGN , Pg no. 123

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

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

Shuchita Baranwal ~SUID

Pg no.3

Acknowledgement

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

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 thought provoking 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 opportunity to be a part of their reputed ﬁrm 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 their unwavering support and especially Gaurav, Ruchika, Vivek, and Harish for helping me immensely throughout the duration of this project.

Shuchita Baranwal ~SUID

Pg no.4

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.

Shuchita Baranwal ~SUID

Pg no.5

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

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

Pacific region, to build globally ready, industry‐ leading solutions through highly leveraged innovative frameworks, tools & technologies, and offerings, with high operational efficiency.

Shuchita Baranwal ~SUID

Pg no.6

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

Shuchita Baranwal ~SUID

Pg no.7

Introduction to the project

“Enhancing Adobe RoboHelp publishing

Also, since all users are not very well acquainted with the back –end

environment to allow user to create Rich,

programming of the help system , an interface to allow them change the look

Immersive help systems”

and feel of the published output becomes evitable. The basic task ﬂow of RoboHelp is shown in the ﬁgure.

The focus of the project will be the customization of help systems that are to be published in multiple channels to address diﬀerent 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 diﬀerent 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.

Shuchita Baranwal ~SUID

Pg no.8

Understanding the domain

Allow users to exercise more control over the

help systems a more rich and interactive

published output.

experience.

Understanding the product and synchronizing

Hence, a need to give user more control over

with the goals and objective of the team is essential for healthy development of the project. To bring clarity and deﬁne 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

the published AIR output also arises.

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

on it. So, there is limited control of the user on

products also. A help system shall also fall

the AIR published output especially related to

under the company’s product categories and

the look and feel of the output generated.

will be required to abide by the company’s

Adobe RoboHelp is designed for everyone who

allow them tailor the AIR output published

•

the identity one has to make sure that there is

and apply either midnight black or icy blue skin

Therefore, there is a demand by the users to

Guides

identity and work to make it strong. To protect

Currently, user can select from three templates

user over the published output? needs to create professional Online Help

For these reasons one needs to protect the

The question:

barding strategies in terms of both experience and look and feel. To make it strong one needs to make sure that a uniﬁed look and feel is maintained, and are sending out a uniﬁed message, whether it is in

for Software;

Why would people want to change the look and

an email, a memo, a phone call, a client visit , a

feel of the help ﬁle system?

product or an event. Branding is huge; because it is more than a logo

•

for Equipment;

•

for Business Procedures;

The answer:

•

for Reference Information;

Branding

areas and touches so many parts.

•

for Training Materials.

Branding makes you, you. It separates you from

Companies throw around a lot of words that

With the introduction of AIR output generation

the crowd and makes you stand out. It deﬁnes

they want to be reﬂected in the company;

in Adobe RoboHelp, a seamless online and

the uniqueness of your services and products. It

respect, trust, quality, transparency,

oﬄine web experience could be established in

informs people who you are, quickly. It is how

responsibility, knowledge, experience, insight.

the published help systems making the usage of

you are perceived by others.

Shuchita Baranwal ~SUID

or materials, because it encompasses so many

Pg no.9

Understanding the domain

Ultimately the cornerstone to a strong brand is

Although the default skin looks acceptable, for

that are likely to be aﬀected the design would

consistency.

some people it still may look a bit too default.

be proposed for the Skin editor.

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

RoboHelp allows one to easily locate and import new skins from the RoboHelp Exchange.

SKIN EDITOR is quoted from A RoboHelp

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.

What are we proposing? Robohelp already has a Web Help skin editor to allow editing of Webhelp and Web help pro

Creating online documentation for websites is

output formats. With the introduction of AIR

all about customization. Nobody likes to use a

output format, the demand from the users for

standard interface anymore. Standard interfaces

being able to customize skins for the same also,

are often too bland, particularly website

came in.

interfaces that you automatically generate using

The product manager identiﬁed the major

established software.

decision points and the decision was made to

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 diﬀerent set of colors or graphics. RoboHelp supports downloading diﬀerent color schemes and customized graphics directly from the web, or one can even make their own skins that match the existing site.

An example of a thread of the user need for AIR

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

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

Shuchita Baranwal ~SUID

Pg no.10

Understanding the domain

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.

Shuchita Baranwal ~SUID

Pg no.11

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

Shuchita Baranwal ~SUID

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.

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.

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.

Pg no.12

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

Shuchita Baranwal ~SUID

Pg no.13

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.

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

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.

History Macromedia RoboHelp 5 RoboHelp 5, (or more precisely, RoboHelp X5 Oﬃce), 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

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

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

create computer help ﬁles in various formats,

Adobe RoboHelp 7

including:

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

* Adobe PDF * FlashHelp * Adobe AIR * XHTML

Shuchita Baranwal ~SUID

Pg no.14

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 oﬄine 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 oﬄine and online content Ability to add and access RSS feeds Enhanced search

Shuchita Baranwal ~SUID

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:

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

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

Pg no.15

Market

A. skills The development of user assistance is a blend of

UI design — 45%

a wide variety of skills. Technical

Developmental editing — 43%

communication skills provide the foundation.

Graphics development — 38%

They are supplemented by skills unique to the

Management & supervision — 35%

software development world.

Usability testing — 34%

In a survey, conducted by Writer USA the

Instructional design — 29%

respondents were asked to value the

Translation/localization — 23%

importance of a number of skills commonly employed by user assistance professionals in their daily work. The ﬁgure below shows the top ten skills valued highly with a rating of "4" (Very Valuable) or "5" (Invaluable), the top

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.

two ratings on a ﬁve‐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 Results Here are the percentages of respondents rating the rest of the skills choices as either "Very Valuable" or "Invaluable": Quality assurance — 48%

Shuchita Baranwal ~SUID

Pg no.16

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

Shuchita Baranwal ~SUID

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.

Pg no.17

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,

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

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.

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.

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.

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.

Shuchita Baranwal ~SUID

Pg no.18

Users

Primary users

Robohelp is a program designed to assist the user in writing help ﬁles. 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.

Shuchita Baranwal ~SUID

Pg no.19

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 diﬃcult to ﬁnd 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

Shuchita Baranwal ~SUID

Pg no.20

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.

Shuchita Baranwal ~SUID

Pg no.21

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.

Shuchita Baranwal ~SUID

Pg no.22

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

Shuchita Baranwal ~SUID

Pg no.23

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

In the screen on the right hand side , a user deﬁned variable is selected

Shuchita Baranwal ~SUID

Pg no.24

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

Shuchita Baranwal ~SUID

Pg no.25

Takes time to ﬁnd out the required feature.

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

Shuchita Baranwal ~SUID

Pg no.26

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

Shuchita Baranwal ~SUID

Pg no.27

The toolbars are divided into three levels. On the ﬁrst level it displays the option of adding all four toolbars.

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

Shuchita Baranwal ~SUID

Pg no.28

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.

Shuchita Baranwal ~SUID

Pg no.29

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.

Shuchita Baranwal ~SUID

Pg no.30

From the insert menu , open ﬁled and variables.

It displays a ﬁeld and variables dialogue .

Shuchita Baranwal ~SUID

Pg no.31

Now from the insert menu open user deﬁned variables.

It displays the same ﬁeld and variable dialogue box.

Shuchita Baranwal ~SUID

Pg no.32

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 workﬂow for creating new skin is going to project set up pod and clicking on icon create new skin.

Shuchita Baranwal ~SUID

Pg no.33

Similarly, the workﬂow 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.

Shuchita Baranwal ~SUID

Pg no.34

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 ﬁles folder in the project manager all the sub folders and topic lists are displayed.

Shuchita Baranwal ~SUID

Pg no.35

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 eﬃcient 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.

Shuchita Baranwal ~SUID

Pg no.36

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.

Shuchita Baranwal ~SUID

Pg no.37

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.

Shuchita Baranwal ~SUID

Pg no.38

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.

Shuchita Baranwal ~SUID

Pg no.39

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.

Shuchita Baranwal ~SUID

Pg no.40

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

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

Shuchita Baranwal ~SUID

Pg no.41

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

Borders and shading dialog opens

Shuchita Baranwal ~SUID

Pg no.42

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

The same Borders and shading dialog opens

Shuchita Baranwal ~SUID

Pg no.43

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

A font set dialog opens having a very unusable interface.

Shuchita Baranwal ~SUID

Pg no.44

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 diﬃcult to ﬁnd 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 diﬃcult to know which one is active.

Shuchita Baranwal ~SUID

Pg no.45

SECTION C :METHODOLOGY This section describes the process followed.

Shuchita Baranwal ~SUID

Pg no.46

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.

Then they use any modeling technique available to propose solutions that go beyond code to model the most eﬃcient and pleasing conceptual space that can be created within the constraints of time, budget & resources.

As a starting point they conduct research to ﬁnd: Who are the users? What are their goals? In what context will they use the product?

Shuchita Baranwal ~SUID

Pg no.47

PRODUCT LIFE CYCLE PROCESS The management of the entire Life cycle of the

In order to deliver the best products in this

• Concept Accept (CA):

product cross functionally from its conception

highly competitive market, various Product

This milestone is achieved when the executive

and deﬁnition, through its implementation,

development processes are adopted which

committee reviews and accepts product

production, maintenance and end of life, is

improve the eﬃciency of and collaboration

proposal.

called Product Life Cycle Process.

among teams.

At Adobe, either a concept with a scope for

On receiving consent for development, the

• Project Requirements Deﬁned (PRD):

becoming a new revenue generating product, or

three teams analyze and understand the

This milestone is achieved when the User

information gathered by the marketing team

requirement. After arriving at a common

requirements are reviewed and approved for

from target Users for existing products, is

understanding of the requirement, time

development.

presented to the decision making body. This

estimations are given considering the resources,

panel prioritizes the requirements based on

risks and dependencies, committing on a

• Project Plan Committed (PPC):

some of the aspects like time, resources and

deliverable date.

This milestone is achieved when the cross‐

return on investment ahead of giving consent

Development team prepares an Engineering

functional teams like Development team,

for development.

Speciﬁcation and Design team prepares UI

Quality Engineering team and User Experience

speciﬁcation. Based on these speciﬁcations,

team understand the requirements and give a

Development team, working synchronously

Quality Engineering teams test the product and

shipping date.

with Design team and Quality engineering

in case of discrepancy, bugs‐ errors are logged

teams, translate these requirements into

for rectiﬁcation. This is an ongoing process till

workable applications. This phase is called

the product is good to go to market.

This is core of testing activity where

There are various milestones in the process of

User Experience team based on which Quality

After undergoing multiple quality checks, these

which few related to Quality Engineering are

Engineering team to tests the product. This

applications are marketed. This is a continuous

mentioned here

milestone is similar to Alpha and Beta in

Project Requirements Deﬁned (PRD).

process till the life span of the product.

Shuchita Baranwal ~SUID

• Proceed to Plan (PTP): Development team writes speciﬁcations and

Waterfall development model.

Pg no.48

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

Shuchita Baranwal ~SUID

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

Pg no.49

ORGANIZATION STRUCTURE At Adobe, Core Working Group is the ﬁnal decision making body for product related issues. It comprises of Senior Managers or Product Managers, who are experienced in that corresponding ﬁelds. 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.

Shuchita Baranwal ~SUID

Pg no.50

OVERVIEW OF PROCESS FOLLOWED Firstly, interviews were conducted to

With a basic understanding of processes, and

gave a deeper understanding about Flex and

understand the users. Simultaneously a study

study of the existing skin editor, concept

also some design ﬂaws. All these were

was done to identify limitations and potential of

explorations were done for the new skin editor.

considered.

Flex‐ a collection of technologies released by

Users (people using the application), Process

Adobe Systems for the development and

(how exactly users skin the output),

deployment of cross platform rich Internet

Conﬁgurations (the elements users would like

applications based on the proprietary Adobe

to edit) are few of the inﬂuential factors.

Flash platform. These target teams were short

Another outcome of this study was a list of

listed by the Core working group, which

Users, pain‐points and expectations

comprises of Senior Quality Engineering Managers. As a skin editor was already in place, most of it was a feedback about the existing

Story boarding techniques and paper

application rather than information about their

prototypes were used to arrive at initial screens,

previous working methods. Though this study

which were later validated with Users (limited

has given a new insight into the way the users

access). This phase was an iterative process till

perceived Adobe RoboHelp, it did not serve the

the mock‐ups were accepted. During creation/

objective. The study was then divided into

iteration of Paper prototypes/low‐ﬁdelity mock

smaller parts with focus on major tasks in a

ups, though important feedback was gathered

linear step‐by‐step process. This time, the focus

about the usability of prototypes and interface

was on understanding the skinning process of

details, the users nevertheless wanted more

the help system ﬁles.

information about the functionality.

Since, there was limited access to the user

Meanwhile, Surveys and feedback sessions were

group most of the studies were conducted

conducted on the existing application, which

through blogs and user group forums online.

Shuchita Baranwal ~SUID

Pg no.51

OVERVIEW OF PROCESS FOLLOWED &( +" 5 "0 ( )6 5& 5+47 *

( ( ( ,& 0,4 47 ( 2 + 5 47 ( & * ( 5 1 &' 5( +: (*5+ &A( #4 ** G% 7( % !" #:& #,*@ 5+4 " * ( #$ 0"/& /(3 %):0. +:5 " ( , 4 . 3 3 5 ) # ' &4 (F3 (3" ( & ),( &5 -& % )&; " ( 9= 5&", .. $ :5( , 3& #$ +&( #,( " E(B #' #H& : " ) : ! D (3 ,4 )** /0. *50 . &" ( 4 % 0 ( &* 8, /# *( :5( *&" 47 & , H ) # &5(+ + " 5 (3 / ,4 50" "(* *50 ;7( & &" &,. ( * 4 8, B4 8 ),/ ,( " ( ' 5& ( :5+ 0.# 7* *= + &(* 4(50 E " , (5 ,4 "*(0 95 #"' *50 *& &" 4(+ 4 , ),; 8, "*50

@ ?( (( # =(> )#* #" ,0" < :& 9

Shuchita Baranwal ~SUID

( ( )/, #,* * 1& "0. 3%# &A

57( ) % ( & 24 73&* ( ? 5 6# #5# B( !" (8 ( &* ( 3 3 57 ,5* %# 5# "# ,& -& "(3 '3# & & 3 # 1 !0 :&(: /( ;0 ,), ,( 0%( ( &" 5 , # 0 + % 0. &( (), 3 * & ( +5 -)/ "05 :)4 C) *)/, 7# I0 (B5& 1& 60 4 0, ( 5 1& ( &* &* ' *( E& +3 (*: #:= & 5 &0 (' K" *)/, 4& ( % ),0

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

D&*&0":E(0,4( 8,4&"*50,4),/(

(

JM 8F F6 MC

( #, 7( 0. 7( +)" 3%): 5+4 L * 3 ( B, 0%( /(F #? A5+ ., => 5& &A)* ?#" , ( ( K# +47 )*& ( 95 *=(? ")#* J0 &,0 *:

K#,:&35+0%)N0.#,( 0,4(1&*)/,(

!DOJOJP!M(QJM9J( 0,4(DMGBIM(

Pg no.52

Rich Internet Applications and Flex Rich Internet applications (RIA) are web

consistently on all major browsers, desktops,

applications that have the features and

and operating systems.

functionality of traditional desktop applications.

While Flex applications can be built using only

RIAs typically provide a “no‐refresh” look to the

the free Flex SDK, developers can use Adobe(R)

user interface and provide what is now being

Flex(R) Builder™ 3 software to dramatically

known as HDuX ‐ High Deﬁnition User

accelerate development.

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

In the RIA concept the 5

highly customized output with a CSS

layers software

(Cascading Style Sheet) based model.

architecture is always

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

Shuchita Baranwal ~SUID

aware but have to evolve to take care of rich client features.

Pg no.53

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

Shuchita Baranwal ~SUID

Pg no.54

Madcap Flare For many years, the dominant tools in the help authoring

MadCap‐developed format designed to work with Visual

Flare's interface is similar to RoboHelp's and to a lesser

market were RoboHelp and WebWorks Publisher, but in

Studio 2005 applications), HTML and PDF.

degree, WebWorks ePublisher's. At the top of the

2004 there was a major shakeup. Macromedia

window, there are the usual menus and toolbars. In a left

Corporation bought eHelp, and then in turn was

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

pane, there are tree views of either your content or your

acquired by Adobe. Along the way, the original

updated to support both import and export of Word

project's resources. In the right pane, you can display

RoboHelp developers were laid oﬀ. A core group of

2007 ﬁles and to run under Microsoft Vista, something

your content or the resources you're working with. At

developers founded a new company, MAd Cap Software

that Adobe couldn't manage in its recent release of

ﬁrst, the interface a bit daunting and somewhat gaudy,

with the goal of building a new help authoring tool that

RoboHelp 6. If you have Oﬃce 2007 and have installed

being used to the rather more spartan interface of

RoboHelp users would feel comfortable using, but one

Microsoft's PDF add‐in, you can also export to PDF and

WebWorks ePublisher, but it does not take long to learn

built with modern and standards‐compliant

the new Microsoft XPS ﬁle format.

it. Toolbars and menus are fully customizable as well.

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.

Figure 1: Flare's Target editor

Unlike WebWorks Publisher, which is essentially a sophisticated ﬁlter 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 ﬁles. 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

Shuchita Baranwal ~SUID

Pg no.55

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 ﬁles). 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.

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 diﬀerent elements of your projects, not just text. Flare supports several methods for making your help projects context sensitive.

Flare uses Cascading Style Sheets to control its Output files are a mix of XML, CSS, and HTML, formatting. For more control over formatting, you can depending on your chosen target. 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.

It's pretty clear that MadCap Software is now one of the dominant players, if not the dominant player, in the help authoring ﬁeld. 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.

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.

Shuchita Baranwal ~SUID

Pg no.56

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

Shuchita Baranwal ~SUID

Pg no.57

What is skin?

Skins

presented to the user within the WebHelp browser window. Within your control are

Skins represent one of the most glamorous and high‐proﬁle 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 oﬀ as a purely cosmetic feature that has little real value

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:

in improving the experience of either Help author or user. However, based on the experience of technical writers working with a number of diﬀerent 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 ﬂexible 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

Shuchita Baranwal ~SUID

Pg no.58

You can select from a range of Skins that RoboHelp supplies "oﬀ 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.

Shuchita Baranwal ~SUID

Pg no.59

Current RoboHelp Skin Editor

Edit skins

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

Dependencies list. An image in the custom toolbar cannot be removed. Files are removed only from the RoboHelp software, not from the hard disk.

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

Inline JavaScript Write function deﬁnitions for custom button functions in the project. External JavaScript File Browse for and select the ﬁle. Remove custom toolbar item

Note: Some options aren’t available, depending on the output type.

the pointer is over the button. OnClick Specify the function to call when the button is clicked.

Click to delete a selected custom toolbar item.

Main Lists items that appear on the main toolbar.

Under Advanced,

Edits to skin properties take eﬀect 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:

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, deﬁne 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, deﬁne a link or a script for the button: Link Link the button to a URL.

Shuchita Baranwal ~SUID

Contents, Index, Search, Glossary Select the button to change and click the Edit button to edit the button text or

add or remove dependent ﬁles for the custom toolbar item when using the multi‐author feature. Dependencies Lists the dependent ﬁles already added.

to place an image on the button.

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

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.

automatically.

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

Remove Remove a dependent ﬁle from the

Search Input Double‐click to edit the ﬁeld that appears in the toolbar and the Search pane.

Pg no.60

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

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

the About box. Company Enter the company name, which is displayed below the logo. This text is a hypertext link to a URL speciﬁed

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

under URL. Copyright Enter a copyright notice. URL Enter a web address for the company website. Title Image

Click the Navigation tab. Click the browse buttons to select images, and specify other settings as needed: . Topic/Page

Specify an image to display at the top of the About box. Keep the image smaller than 211 by 60 pixels.

Select an image for TOC topics. Remote URL Select an image for links not in the project.

Author

Background Image

Identify the system or give more information to users.

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

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

Hover Color

Navigation Bar Modify the items directly under the main toolbar.

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

Shuchita Baranwal ~SUID

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

Pg no.61

You can select this skin the next time you generate output. Export skins Exporting a skin saves it as a compressed ﬁle that contains the skin and its associated ﬁles. 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

Shuchita Baranwal ~SUID

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 projects The custom skin is saved as an SKN ﬁle 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.

Pg no.62

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

Problem Investigation

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.

Technical writers Help Authors Knowledge based writers

Interactions within the interface should be minimized.

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

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.

USERS:

GOALS:

Workﬂow of reaching the skin editor should be looked into.

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.

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 deﬁned by the user. Edit in place,option. Real time preview should be available.

Shuchita Baranwal ~SUID

Pg no.63

Air Help

Air Help Components 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

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

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

Shuchita Baranwal ~SUID

Pg no.64

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 diﬀerent appearance and navigation options.(See Appendix A)

The following table shows the diﬀerences among three types of templates:

Features

Classic Help

Multi Tab Accordion

Uni Pane

How do I

Yes

Search results that show context

Yes

Showing/ Hiding the left pane

Yes

Viewing status bar

Yes

Common features among the three types of templates: Support for TOC, index, glossary, search, print, and the Content pane.

Shuchita Baranwal ~SUID

Pg no.65

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

Shuchita Baranwal ~SUID

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 â&#x20AC;&#x153;How do I?â&#x20AC;? 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. Pg no.66

Contents pane This example uses the Classic Help template with the Ocean Blue skin. Note the branding icon in the upper left.

How do I? pane A custom‐made list of steps in a task can be created for the user who has a certain process they want to work through. The author creates these “How do I?” lists in the Adobe RoboHelp 8 Browse Sequence Editor. These sequences can use the order found in the TOC or specially organized in a very speciﬁc sequence the author deﬁnes.

Favorites pane In this view, the end user can add and organize many internal and external links to resources such as Blogs, Wikis, Websites and message forums and RSS feeds.

Shuchita Baranwal ~SUID

Pg no.67

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.

Shuchita Baranwal ~SUID

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

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

-)%&#%&( .%/#0( 1")''234( 526)37&#'( ( 87%9'( ( :;;(5##/'( ;#23<+(( =3#>#3#%<#'( -)$$#%&'(=)/( =37%&(?@A)%(

C)@(@2%#( D267B2A)%(*23 ( =3#67)E'( ( D#0&( 526)37&#'(7<)%( ;#23<+(( -)$$#%&'(=)/( =37%&(?@A)%(

5)%&'( 5)%&H( 5)%&I( 5)%&J( 5)%&K( 5)%&L( 5)%&M( 5)%&N(

-)%&#%&'( .%/#0( 1")''234( 526)37&#'( 5)%&(>2<#( 5)%&('&4"#( 5)%&('7P#( 5)%&(<)")3(

-)")3( F2<9B3)E%/(<)")3( G7B+"7B+&H( G7B+"7B+&I( G7B+"7B+&J( G7B+"7B+&K( G7B+"7B+&L( G7B+"7B+&M(

.$2B#'(

F)3/#3'(

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

F)3/#3H( F)3/#3I( F)3/#3J( F)3/#3K( F)3/#3L(

F32%/7%B()@A)%'( -)$@2%4(")B)( .<)%(.$2B#'(

Pg no.68

Shuchita Baranwal ~SUID

Pg no.69

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.

Shuchita Baranwal ~SUID

Pg no.70

Shuchita Baranwal ~SUID

Pg no.71

Need for a common Skin Editor

HTML HELP! WEB! HELP!

FLASH HELP! AIR! HELP!

Shuchita Baranwal ~SUID

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!

Pg no.72

In RoboHelp currently, for different types of output format, there are different ways of skinning. This is summarized in the following figure: AIR skin editor!

Also, there are a number of loose end workﬂows in RoboHelp, which can be connected as a common workﬂow to provide all combined functions. 1.

There is WebHelp skin editor

A skin gallery fro FlashHelp and WebHelp

Existing templates for Air Skins

Skin ! Gallery!

Web help skin editor! For ,! AIR help , to be introduced! For ,! flash help!

For ,! Web help!

4. Proposal for AIR Skin Editor Templates!

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

Generate output wizard Specifications!

For ,! AIR help!

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.

For ,! Web help!

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.

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 speciﬁc 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

Shuchita Baranwal ~SUID

Pg no.73

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

Shuchita Baranwal ~SUID

Pg no.74

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

Shuchita Baranwal ~SUID

Pg no.75

User study Users at a Glance Target Personas

Brief Description

Target Personas

Brief Description

Kim Coulter 55 Technical writer

Power/selective user

Sreejith Nair 27

Michela Beca 38

Engineer

Power user

Kevin Bear 46 Technical Communicator

Power user

Rick 51 Trainer/Consultant

Selective/power user

Rithesh 34 Technical writer

Shuchita Baranwal ~SUID

Technical writer

Regular user

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 Selective/power user

Udit Chaudhuri 54 Technical writer, Design Manager

Selective user

Laura 42 Power/regular user

Alastair Dent 42 Technical Author

Technical Designer

Garrett Traux 35 Selective user

Troy Wells 40 Technical writer

Selective user

Ram 55 Selective/regular user

Tammy Paul 26 Senior Technical writer

Senior Technical writer

Selective user

Technical writer/ Editor

Regular user

Imtiaz 25 Technical writer

Selective user

Pg no.76

Detailed User profiles Usage and expectations from Skin Editor

Kim Coulter Age-55 Profession:Technical Writer Help authoring tools used (in order of preference)

Kim uses skin editor when he needs to use a user defined 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 him Sometimes ,he creates a new skin from scratch Rarely, 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” oﬀered by Adobe Robohelp. He has used the web help skin editor in Robohelp

Adobe Robohelp ‐ primary Author It ‐ never used Madcap Flare ‐ never used Other ‐

7777

Dreamweaver

Shuchita Baranwal ~SUID

Motivations and Goals Customize skins according to the user. Pain-Points n/a

Pg no.77

Usage and expectations from Skin Editor

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

Michela Baca Age-38 Profession:-

Engineer

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.

Help authoring tools used (in order of preference) Adobe Robohelp‐ ﬁrst preference using for 10 years Author It ‐ second Flare ‐ Currently

Motivations and Goals 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.

Shuchita Baranwal ~SUID

Pg no.78

Usage and expectations from Skin Editor

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

Kevin Bear Age-46 Profession:Technical Communicator Help authoring tools used (in order of preference)

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

AdobeÂ RobohelpÂ Motivations and Goals To change the Help's look and feel. Pain-Points Need more out-of-box options

Shuchita Baranwal ~SUID

Pg no.79

Usage and expectations from Skin Editor Tammy is very comfortable with manual coding, which often seems to be necessary to him to achieve the desired results.

Tammy Paul Age-42 Profession:Senior Technical Writer Help authoring tools used (in order of preference) Adobe Robohelp‐ the only one they use right now.

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 aﬀect. 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. Motivations and Goals 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.

Shuchita Baranwal ~SUID

Pg no.80

Usage and expectations from Skin Editor

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 Wells Age-40 Profession:Technical Writer

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.

Help authoring tools used (in order of preference)

Madcap Flare ‐ ﬁrst preference Adobe Robohelp second preference

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. Motivations and Goals 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.

Shuchita Baranwal ~SUID

Pg no.81

Usage and expectations from Skin Editor

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

Alastair Dent Alastair, usually creates a new skin from scratch and otherwise edits an existing skin Age-42 Profession:Technical Author Help authoring tools used (in order of preference) Adobe Robohelp ‐ third Author It ‐ First Madcap Flare ‐ Second

He feels the skin editor should allow fast development of bespoke skins and the output should be W3c 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 Motivations and Goals None. Pain-Points Lack of control

Shuchita Baranwal ~SUID

Pg no.82

Usage and expectations from Skin Editor

Rick uses the skin editor to teach others how to use the feature. He uses the skin in the following order of preference:

Rick Age-51 Profession:Trainer/Consultant Help authoring tools used (in order of preference) Adobe Robohelp ‐ Extensive ‐ Used since 1992 Author It ‐ No Experience Madcap Flare ‐ Tried it ‐ Hated it

Shuchita Baranwal ~SUID

From skin gallery in the HAT Download an appropriate skin from the web Import skins which you have been asked to use Create a new skin from scratch He uses the skin editor for Speed and simplicity of changing look and feel of the help system files and hence, expects it to be speedy and extremely flexible. Motivations and Goals 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, configuring the layout or setting TOC width. Inability to assign individual icons to TOC nodes.

Pg no.83

Usage and expectations from Skin Editor

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.

Rithesh

He uses the skins in the following order of preferences:

Age-34 Profession:Technical Writer

From skin gallery in the HAT Import skins which you have been asked to use Create a new skin from scratch Edit an existing skin

Help authoring tools used (in order of preference) Adobe Robohelp ‐ version 6.0

Rithesh is motivated to use the skin editor,When he feels the entire theme should be change to have a better look for his projects He wants the skin editor to be an easy to handle, feature rich and does not lock to limitations and of course yes. Compatibility Motivations and Goals For Customization. Pain-Points Some times it locks to limitations. Sigh!

Shuchita Baranwal ~SUID

Pg no.84

Usage and expectations from Skin Editor

Udit Chaudhri Age-54 Profession:Technical Writer, Design Manager Help authoring tools used (in order of preference) Adobe Robohelp ‐ 1 Author It ‐ NA Madcap Flare ‐ NA Other ‐ 2

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 eﬀect; 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 HAT Download an appropriate skin from the web Import skins which you have been asked to use Someone designs the skin as and when required for you Edit an existing skin. He has used the web help skin editor in Robohelp and experiences Browser incompatibility, in case Konqueror, Mozilla etc are used; Motivations and Goals Customize skins according to the user. Pain-Points At times, inflexibility.

Shuchita Baranwal ~SUID

Pg no.85

Usage and expectations from Skin Editor

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

Sreejith Nair

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

Age-27 Profession:Senior Technical Writer

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

Help authoring tools used (in order of preference)

He has used the Web Help skin editor in Robohelp and feels Robohelp has a good collection of skins.

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

Shuchita Baranwal ~SUID

Pg no.86

Usage and expectations from Skin Editor Ram uses the skin editor when he,s creating online help He simply,downloads an appropriate skin from the web.

Ram He feels the need of a skin for field level help Age-55 Profession:Technical Designer

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

Help authoring tools used (in order of preference) Adobe Robohelp ‐ primary Author It ‐ never used Madcap Flare ‐ never used Other ‐

Dreamweaver

Shuchita Baranwal ~SUID

Motivations and Goals for editing Pain-Points Arranging

Pg no.87

Usage and expectations from Skin Editor 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-defined skins.

Garrett Truax Age-35 Profession:Technical Writer Help authoring tools used (in order of preference) Adobe Robohelp first

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.

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.

Shuchita Baranwal ~SUID

Pg no.88

Usage and expectations from Skin Editor Laura’s organization use diﬀerent skins to distinguish their product from their OEMed products (which are branded with the client's specifications) She either creates a new skin from scratch or edits an existing skin.

Laura She uses the skin editor only once and then import the created skin on all her projects. Age-32 Profession:Technical Writer, Hep Author Help authoring tools used (in order of preference) Adobe Robohelp ‐ this is the only tool I currently use for help Other ‐ Air (but hate it due to the skin inﬂexibility)

She wants the skin editor to be less rigid, more fluid, more options for button and tab placement Laura has used the Web Help skin editor in RoboHelp and finds the GUI is horrible. She complains that the preview and final result do not coincide and one cannot resize graphics within the editor. Also, there is no free choice of button or tab placement..etc

Motivations and Goals If it is easier to use, it can be a very useful addition to the RoboHelp product Pain-Points not flexible, the output inthe preview does not always match the end result... it is an awkward GUI as well

Shuchita Baranwal ~SUID

Pg no.89

Usage and expectations from Skin Editor

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.

Karla Marsh Age-49 Profession:Technical Writer

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

Help authoring tools used (in order of preference) Adobe Robohelp ‐ 1 Author It ‐ never used Madcap Flare ‐ never used Other ‐ Doc‐To‐ Help

Shuchita Baranwal ~SUID

Motivations and Goals I use EditPlus or Notepad Pain-Points Don't have a skin editor apart from the RH built-in one, which is limited.

Pg no.90

Usage and expectations from Skin Editor

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 Rood Age-41 Profession:Technical Writer Business Analyst Help authoring tools used (in order of preference) Adobe Robohelp ‐ yes Author It ‐ not used Madcap Flare ‐ not used

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.

Motivations and Goals So that I can have a skin that doesn't look "canned" - to give my client something more special, designed just for them. Pain-Points I am not very sophisticated with this yet, so for me it's the learning curve.

Shuchita Baranwal ~SUID

Pg no.91

Usage and expectations from Skin Editor

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

Mike Hudnall

Mike, uses the skins by editing an existing skin.

Age-56 Profession:Technical Writer Editor

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

Help authoring tools used (in order of preference) Adobe Robohelp ‐ This is the only one I've used

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 configurability and ease of use and requests for more control of flash skins. Motivations and Goals Branding for the client and for our company. Pain-Points Lack of configurability in the Flash-based version of help.

Shuchita Baranwal ~SUID

Pg no.92

Usage and expectations from Skin Editor Imtiaz uses the skin editor for product specific customizations. He only Imports the skins which he has been asked to use.

Imtiaz Age-25 Profession:Technical Writer

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

Help authoring tools used (in order of preference) Adobe Robohelp ‐ primary

Motivations and Goals No idea Pain-Points No idea

Shuchita Baranwal ~SUID

Pg no.93

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.

Shuchita Baranwal ~SUID

Pg no.94

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

Shuchita Baranwal ~SUID

Pg no.95

Scenario #3 Need for complete control over the help

Software user assistance ﬁeld 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 diﬀerent help systems to diﬀerent 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.

Shuchita Baranwal ~SUID

Pg no.96

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.

Shuchita Baranwal ~SUID

Pg no.97

Scenario #5 Providing Skin comparison

A technical author is ready to publish his output ﬁle. 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 ﬁles. But, for this every time he has to publish a new output (preview).

Comparison of two skins, becomes diﬃcult .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.

Shuchita Baranwal ~SUID

Pg no.98

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.

Shuchita Baranwal ~SUID

Pg no.99

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.

Shuchita Baranwal ~SUID

Pg no.100

Self‐learn ability Users require an easy learn editor as most of the help authoring tools are not easy to learn. 2. Easy to apply All the edits should be easy to apply on the desired help system 3. Each item editable Users need more control on help systems they publish and feel that everything on the help ﬁle 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 compatible Users 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 GUI Most 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

Shuchita Baranwal ~SUID

10.

11.

12.

User Needs

the users the feel of modern help system functionality. Out of box options Users feel the need of more out of the box options. Flexible Users feel the current skin editor is not very ﬂexible in terms of usability and hence less motivating for them to use the skin editor. Arrangement Users feel the arrangement of items is not appropriate in the current skin editor. Preview output to match Some 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. Few skins available Most 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. Too many options for some Some 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. Speed Speed 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. WSIWYG The users do not get an auto preview as they make changes in the current web help editor. 16. Need easy and fluid themes Users also require easy and fluid themes to play with and edit with.

Pg no.101

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.

EASY TO APPLY RESIZABLE GRAPHICS

ARRANGMENT EACH ITEM EDITABLE

SELF LEARNABILITY

BASIC USER NEEDS

PREVIEW TO MATCH OUTPUT TEMPLATE CUSTOMIZATION

RICH AND COMPATIBLE

MORE SKINS OUT OF BOX OPTIONS

RIDDANCE OF AWKWARD GUI

SPEED FLEXIBLE

EASY AND FLUID THEMES Needs that were addressed during problem investigtion also.

Shuchita Baranwal ~SUID

TOO MANY OPTIONS(for some) WSIWYG

Pg no.102

Possible Approach for skin editor

PRESUMPTION SCENARIO: Deﬁning the skin, before generating the output

Shuchita Baranwal ~SUID

Pg no.103

VALIDATING THE APPROACH

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

Shuchita Baranwal ~SUID

Pg no.104

Personas

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

Discern Expert

Karla marsh age:43 profession: technical writer Working in Organization Regular user

Experience goals The Skin Editor should be easy to use and ﬂexible.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

Established pro

Alastair age:42 profession: technical writer Working as Freelancer Power user

Experience goals The Skin Editor should be more ﬂexible 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

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

He needs to have complete control over the all

editor at the ﬁrst level itself cause he would not

features of the skin and be able to edit them.

need to use them at all. She has a ﬁxed color scheme in mind and doesn’t wish to play around

It should be in a structured manner , allowing user

with other features too much.There should be a lot

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

of options available.

guidance when creating a skin.

Also, there should be consistent scheme options

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

and not all options exposed leading to exploration

a way to able to compare skins on the same help

of these options, resulting in a overall design which

sytem.There should be options available to deﬁne

is not consistent and looks bad.

the layout scheme and the frames where the open and how many.

Shuchita Baranwal ~SUID

Pg no.105

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

Shuchita Baranwal ~SUID

Pg no.106

Concept 1

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

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.

4 !"#$%#&#'(#)$(#*+&,(#$,-)$%./-$',-$ 0#$+1#2/#3#)$"#1#/-$',%#$45$-#3$ %./-$("#$+1#2/#3$+,-#$3/&&$67%($ )/%+&,8$("#$47(&/-#$45$("#$(#*+&,(#$

The ﬁgures on the left hand side display the workﬂow the skin 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

Shuchita Baranwal ~SUID

Pg no.107

• Select the attributes of that key !

• Contextual editable contents are displayed.Edit accordingly

! "

!"#$%&'()(&*+&,((&*'(&& (-#*./"(&0+)1+2&#3& ,("($*(-&.)(.4&

As each element/key is selected it is displayed in the preview window. •

4 !"#

2#%

!$#

23% 2

! %&'()*(+",#-",+).#&/#(0)##"123$+().#&/# .),)4()5#)53("$,)#6&27&'#83,,#$)# 53.6,"9)5#&'#(0)#23:0(#6"'),.;#

Shuchita Baranwal ~SUID

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

Pg no.108

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 ﬁgures on the left hand side

display the workﬂow the skin editor.

• Select a template • Select a skin • Select the color scheme • Select the font scheme • Select the elements • Select the icon sets

Shuchita Baranwal ~SUID

Pg no.109

As each element/key is selected it is diplayed in the preview window. They are added to the skin one by one in a deﬁned manner.

Shuchita Baranwal ~SUID

Pg no.110

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 ﬁgures on the left hand side

display the workﬂow the skin 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

Shuchita Baranwal ~SUID

Pg no.111

• Similarly, one can select other schemes to edit which displays another dependent scheme to select from or the user can deﬁne there own scheme.

This design exposes all elements at the same time allowing the user to play around and explore.

Shuchita Baranwal ~SUID

Pg no.112

Concept 4

BASED ON APPROACH 3

This concept is also based on approach 3

It allows the user to • deﬁne skin scheme • font type scheme • font color scheme

• and icon scheme one by one in a ﬂow without suggesting any other schemes at this stage. This concept ﬁts 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.

Shuchita Baranwal ~SUID

Pg no.113

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 pane the options will be displayed for font color,font type,icon present or overall skin.

Shuchita Baranwal ~SUID

Pg no.114

Concept Selection After discussion with the product team and validation

This Skin editor will be used primarily for scenario

with the documentation team at Adobe ,approach 3 was

one .Hence, a simpler hierarchical approach may be

taken further and explorations were done further on it.

more appropriate.

Following were some pro’s and cons of this concept which were identified at this stage. Based, on these further exploration on concept 3 was suggested. Pros Greater flexibility User has a lot to play around with,auto preview mode on. 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.

Shuchita Baranwal ~SUID

Pg no.115

Concept 3, further exploration

To reduce the visual clutter, more interactions were explored.

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

Also, to ﬁt 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.

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

!"#$%#&'()(*#&'"+( ,#&#,#-+(#$.&(/.0"1( 2)3+($".*+1(42)4( 5)67$0")6(*$2+,+(

Shuchita Baranwal ~SUID

Pg no.116

SMART DRAWERS concept 1

!"#$%"&

'()*%+& !%,-%.&

01-*&2(3%& '45%+%& 01-*&6171"& '45%+%&

1$#'%*(+%/#2+#%3"#4'% 5)+%&'()#'$%)"4*"% *(+%"(6#%75+3%38.#%9% ,:;5+%$*"#<#%#3*0% 35=#3"#'0%

Shuchita Baranwal ~SUID

25%)%&#"%&.%,-%.&;(&*5%& 9)%"&#-.&4#-&41-*#<-&3#7%:%)& 8%71-=<-=&*1&.<>%"%-*&)()*%+& ."#$%")&<-&1-%?&

89:1-& '45%+%& 89:1-& '45%+%&

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

/)%"& !%,-%.&

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 â&#x20AC;˘ User defined, these are define by user who would place schemes according to ther need.These drawers could be of mixed type in nature. â&#x20AC;˘ System defined , these are automatically generated and place the existing schemes in them. Pg no.117

Smart drawer concept !"#$%"&

.#/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%&

Shuchita Baranwal ~SUID

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

.#/0&!"#$%"& /123#425&6#7%8%5& '(&

')&

'*&

'+&

,(&

,)&

,*&

,+&

,-&

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

.#/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%&

Pg no.118

SKIN COMPARISON concept 1

This concept would allow users to

!"#$%&&'()(& *+&+,(-&*'(&.%#-& .$)((-.'+*&.#/(01)& !"#$%&'()%*+"+%,"-.% /"+0(+1%/#)+2% 3-%&#0+%%#%&)#/&*-4%

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.

!"#$%&'($%)*##(%"+,$-'..$)+/#$ "#*#$'($,"#$.'%,0$1*+/$"#*#$+(#$ )2($+3#($$',$'($2$(#-$-'(4+-$0$ %25#$',$+*$4#.#,#$',6$

Shuchita Baranwal ~SUID

!"#$%&'(&')*(&&+'& ,#*-&+.*&/%#(&&#(& 0&(*-&-#(1'-& 2'3&$'4)03#/'(&&

Pg no.119

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.

Shuchita Baranwal ~SUID

Pg no.120

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 ﬁgure 2 , 3 and 4 displays this concept.

Shuchita Baranwal ~SUID

Pg no.121

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

Shuchita Baranwal ~SUID

Pg no.122

SECTION F :FINAL DESIGN

Shuchita Baranwal ~SUID

Pg no.123

SCHEME DESIGN The Final design would be expanded in two phases 1st 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.

Shuchita Baranwal ~SUID

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 ﬁgure 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

Pg no.124

Detailed breakdown,SCHEME design The ﬁgures 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.

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

Navigation pane Comment pane Font Type Scheme Theme of portlets Other Titles fonts (grey stuff powered by skylark Navigation pane of suggestion

Font Color Scheme of hits of suggestion comment pane theme of portlets

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

Shuchita Baranwal ~SUID

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

Pg no.125

TASK ANALYSIS During editing

DISCERN EXPERT

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 subthemes Pg no.126

Shuchita Baranwal ~SUID

TASK ANALYSIS Advanced features

ESTABLISHED PRO

During editing

Basic features

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.

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

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.

Sub tasks

Scenario

Functionality

Shuchita Baranwal ~SUID

Pg no.127

Task analysis

Wire Frame

Task analysis was done to analyse what a user is

A wireframe is a stripped‐down visual representation

required to do in terms of actions and/or cognitive

of a single web page, devoid of any graphic

processes to achieve a task. The functions to be

treatment. As the name suggests, it is a framework

included within the existing skin editor and the new

made with wires, which deﬁne basic layout and

AIR user interface could be speciﬁed.

placement of content and page elements such as navigation; header & footer; branding etc.

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 .

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

They are sometimes referred to as “page schematics”,

reference against which the value of the system

“page architecture” or even “blueprints” (though the

functions and features can be tested.

term “blueprint” sometimes refers to a more overall site design).

Some of the functionalities were identiﬁed some for the basic phase of design (shown in blue), rest for the

The application screen was divided into left pane

advanced features(shown in pink).

which consists of the dependent second level themes.

This is shown in the previous two pages. Paper prototyping , was an on going iterative process

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

to clear out thoughts from my mind and present it to the team for quick feedback.

A preview pane with , certain functions attached to it.

After all the design explorations and iterations and

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

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

On the top is the application header.

Shuchita Baranwal ~SUID

Pg no.128

WIREFRAME

Shuchita Baranwal ~SUID

Pg no.129

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

Shuchita Baranwal ~SUID

Pg no.130

goals of the application icons is to convey the proper

has been adopted for other highly visible corporate

Adobe branding message.

identities, such as Apple, Verizon, Macy’s and Wells Fargo.

In addition to having a pleasing look, icons also must look like they belong to two families:

Font used in this design is Myriad Pro.

• The cross‐product family of all Adobe applications.

Other styling and visual elements for the design are all

To do this, icons representing similar ﬁles have similar

used as per Adobe Scope Guidelines.

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 the product’s unique symbol (for example, all After Eﬀect 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 design which was ﬁrst developed and released in Type 1 multiple master format, and subsequently in OpenType format. However, since its integration with Adobe’s corporate identity, Myriad

Shuchita Baranwal ~SUID

Pg no.131

CONCLUSION

Shuchita Baranwal ~SUID

Pg no.132

Adobe Robohelp is a Help Authoring Tool used

repeated user studies and with constant feedback as

world wide to publish Help systems.

a reference, the design for new interface was conceptualized.

It is a best‐of‐breed application to create single‐ sourced output for multiple channels:

Initially paper prototypes were made and later mock ups were generated which were validated through

Learning • Understood the Product Robohelp and the Help Authoring process • Exposed to new emerging technologies like ﬂex and AIR • Corporate culture • Communication skills and time management

• Online help for applications

user testing in an iterative process.

• Knowledge bases Policies and procedures manuals • An eLearning launch pad

Visual styling was proposed for frozen mock ups for

• Adobe AIR help applications

which development has commenced.

Robohelp allows easy‐to‐generate Adobe AIR help

Further work on the project can involve the

applications to keep information base upto date with

following:

a single ﬁle that combines the best of the Web with

• The design caters to basic features .The advanced

speed of the desktop.

features could also , be added.

Intially , a lot of time was spent understanding and

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

learning the product and it’ domain.Then the focus was shifted towards the enhanccment of the

• Concept 3 further exploration ,(smart drawer ,resieable and skin comarison) concept

published output and giving user more control

could be takein into consideration and merge into

towards it.This was done through user research,

the current design.

which led to domain and user understanding in context to the skin editor. Major tasks were analyzed

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

and work ﬂows were developed. Constant user feedback on existing application helped to identify their pain points. From this simultaneous process of

Shuchita Baranwal ~SUID

Pg no.133

APPENDIX UNI PANE TEMPLATE

MULTIACCORDIAN TEMPLATE

CLASSIC HELP TEMPLATE

Shuchita Baranwal ~SUID

Pg no.134

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

Shuchita Baranwal ~SUID

Pg no.135