Usability Engineering Dreamweaver Interface Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

Testing: In Usability Testing approach, representative users work on typical tasks using the system (or the prototype) and the evaluators use the results to see how the user interface supports the users to do their tasks.

Inspection: In Usability Inspection approach, usability specialists -- and sometimes software developers, users and other professionals -- examine usability-related aspects of a user interface.

Inquiry: Here, usability evaluators obtain information about users' likes, dislikes, needs, and understanding of the system by talking to them, observing them using the system in real work (not for the purpose of usability testing), or letting them answer questions verbally or in written form.

What is Dreamweaver

WYSIWYG (What You See Is What You Get) Web page editor

Writes code for web pages

You select images, text, colors

Dreamweaver writes underlying code

Code is called HTML

Dreamweaver is a good way to learn HTML (split view between WYSIWYG and HTML)

Dreamweaver Interface

Very easy and user friendly interface.

Allows you to quickly and efficiently develop simple and complex websites.

Easy to use panel (elements can be dragged directly in to the document)

Developers can work directly with the page's code, making use of the various tools Dreamweaver provides for ensuring correct syntax.

Directly import images and graphics created using different applications.

Feature inspection approach

Five important features of Dreamweaver are:

The Code Inspector: 3 different modes: the code view, design view and design and code view. Press F10 on the keyboard to access the code inspector.

Results Window: Have several extra features like the validation checker, a target browser check, link checker (for external links), a workflow and HTML reports, FTP Log (where you can type in FTP commands) and a server debugger.

Templates and Nested Templates: This allows you to create a template of the site, and make pages from those templates. Also include in Dreamweaver MX is the Nested Templates feature, which is handy when you're creating a pretty good sized site breadcrumbs and unique navigation for each section.

Snippets: Do you have a commonly used script that you have to go searching for every few moments? Do you think you created a cool trick that you would like to repeat again? Use a snippet. To access the snippets window, press Shift+F9 on your keyboard.

Commands: By using commands you can make complicated tasks easier. Take for example the creation of a Web Photo Album. Go to the Commands menu (at the top of the page) and select Web Photo Album. It will ask you some information and it will proceed to complete the job for you.

Three main elements:

Document window

What the page looks like (and/or underlying code)

Insert panel above

Used to insert objects and properties

Property inspector below

PI inspects and changes properties of selected objects

The PI is your best friend!

Insert Bar

You can use the insert bar to create and insert objects such as tables, layers and images. It includes images, hyperlinks, tables, forms, and multimedia objects. When the mouse is rolled over a button, its tooltip comes up with the name of the command button. These command buttons are organized into categories. These categories can be switched on the left side of the bar. In addition to this the categories also appear when the current document contains server code such as ASP or ColdFusion documents.

The Style Rendering Toolbar

The Style Rendering toolbar is hidden by default. It contains buttons that lets you preview your design for different media types if you are using media-dependent style sheets.

The Style Rendering Toolbar contains a button that lets you enable or disable CSS styles.

To display the toolbar, select View > Toolbars > Style Rendering.

Document Toolbar

The Document Toolbar can be used to toggle between different view modes i.e., Code, Design and Split View mode. In addition, there are some common commands related to viewing the document and transferring it between the local and remote sites. There are commands for naming, previewing, and publishing the current document:

Panel Group

The Dreamweaver Panel Groups are displayed vertically on the right side of the Dreamweaver window. Panel groups are collection of related panels and commands you will use to design your pages and build and publish your web site.

A Panel group can be collapsed or expanded and docked or undocked along with the other panel groups. A panel appears as a tab in the panel group when selected.

The commands available in the panel groups are far more extensive than the ones you'll find on the Insert bar, which contains the most common Dreamweaver commands.

Testing Method and approaches

Performance Measurement

Define the Goals

Define the goals for the usability testing in terms of usability attribute easy to learn, efficietn to use, easy to remember, few errors, subjectively pleasing.

Balance the various components of the goals and decide on their relative importance.

Quantify these usability issues which i measured.

The time users take to complete a specific task.

The number of task of various kinds that can be completed within a give time limit.

The Ratio between successful interactions and errors.

The time spent recovering from errors.

The number of user errors.

The number of commands or other features that were never used by the user.

The number of syste features the user can remember during a debriefing after the test.

The frequency of use of the manuals and/or the help system, and the time spent using them.

The proportion of users who say that they would prefer using the system over some specified competitor.

The proportion of users using efficient efficient working strategies in case there are multiple ways of performing the tasks.

Conduct the Test

Make sure that there won't be unexpected interruption during the test. Conduct pilot test to make sure that the tools and the techniques for data collection work well. We have taken, the test screen shot to support our data collection, so that some data can be collected or verified after the test by reviewing the screen shot files.

Even though this technique is aimed to collect quantitative data, it should be noticed that it's very important to collect qualitative data to uncover the user's mental process and other information behind the quantitative data and take them into account while drawing the conclusions.

Question-asking Protocol

Providing the test users with the product to be tested as prototype of its interface and a set of tasks to perform.

We asked the participants to perform the tasks using the product, and explain what they're thinking about while working with the product's interface.

We collect pointed, direct questions about the product; for example, "How would you create wesite using dreamweaver tools" Their response, either in terms of the product being tested or in other products from their past experience, will provide insights into their mental model of the product.

Analyze the Data to Draw the Conclusions

To compare with a benchmark value (for ordinal, interval, or ratio data), mean or median can be calculated, together with standard deviation, standard error of the mean, and the confidence intervals .


I would like to recomedation to dreamweaver to make coding for developing matic coding for us.

I suggest for and cotrasting

Should I use Dreamweaver to code websites?" my short answer is, no. You should learn to use an editor that was made with coders as the main focus.

"But doesn't Dreamweaver have a code editor build into it?"

But doesn't Dreamweaver have a code editor build into it?

Yes, Dreamweaver contains a code editor. But my answer to why a coder should not use it goes back to the original intent of the application. The intent of Dreamweaver was to give people who don't know how to code websites the power to build websites.


Dreamweaver is a great WYSIWYG editor, easily the best on the market and the only editor I would ever choose over hand coding in an ASCII editor. There are too many features to explain them all, and that's what makes Dreamweaver a professional application. For the serious web designer this is the editor to use. It takes a lot of getting used to, mainly because of all the features to be discovered, but it produces pages that are as good - if not better - than hand coding.