Interface prototype design tool use series (V)-cogtool

Cogtool is more rigorous, systematic and engineering than the prototype design tools described earlier, it can evaluate the design based on the human cognitive model, and calculate how long it takes for the average person to browse, which is a very powerful function. The official website provides detailed instructions for use, as well as example, and if there are any problems that cannot be solved, go to its forum for help. First Contact Cogtool feel a certain degree of complexity, need to be familiar with a period of time, this article first make a general use of instructions.

Website address: http://cogtool.hcii.cs.cmu.edu/

Cogtool is generally divided into projects (project), Task (Task), design, picture (frame) level four, strictly speaking, the task is not a level, it will be the design of the classification, there is no separate design interface, here, taking into account the level of the interface on the level of sense, as a level

1. Installation procedure

Download the installation of this tool, the specific process is not introduced.

2, create the project

After you start the program, a dialog box pops up, asking you to open or create a project:

Here you choose to create a project where you first need to create a design for the project (no design, no project, no meaning):

Fill in the design name, select the design of the input device, select the output device.

Here the input device has keyboard, mouse, touch screen, mobile phone, output devices have display, voice, are designed to be applied to the scene, choose the right you can.

3. Designing (Design)

When a project is created, the project interface and design interface are automatically opened:

In the figure above, the window behind the Project window, the front of which is the design window.

A task is generated by default in the Project window, and the design is sorted back from the second column.

If you want to add another design, select "Create" on the menu and choose "New".

If you want to edit a design that has already been created, select the cell where the design is located, right-click and choose Edit.

Here is a concept "task" that I understand as a specific scenario, such as buying items online, setting up ringtones, and so on, and then this task contains some design.

4. Picture (frame)

You can open the Screen design window by double-clicking the frame in the design window:

Select the left side of the Widget, drag it in the middle of the artboard, double-click it to edit the displayed text (this is in support of the Chinese OH).

In an official example, an external image is typically imported as a background, then a micro-piece is painted on top of it, and the original design is modified:

For example, in this example, a link micro is added to compose mail.

A design window for Cogtool can contain multiple screens, and also provides support for jumps between screens (Transition), such as in the design window below:

In the example above, a link is added, you can create a mouse jump for it, jump to another screen.

Put the mouse on the micro, the mouse into a cross shape, and then hold down the mouse to drag onto another screen, you create this jump.

On the right side of the design window, you can edit the property settings for this jump:

5. Cognitive Time Assessment

When you are finished designing, you may want to evaluate how the design will work for the user. Will they be able to use it quickly?

In the Project window, select a design, right-click, and note the two options "Edit script" and "Recompute script".

Why is script. Script has meaning, I think here refers to a picture of a picture (frame) composed of a script meaning it.

If this is the first evaluation, the next option is gray, first click "Edit Script", select the beginning of the screen, click on the lower left corner of the "Start demonstrating":

Then click "Compute" in the lower-right corner of the new window and start counting the time.

Then back to the Project window, you can see the calculated cognitive time.

If you want to recalculate, then execute "recompute Script."

In the Script window do you notice that there is a script step list on the left:

This list describes a cognitive step, and if you want to see a more detailed description of this, click "Show Visualization" in the upper-right corner of the list:

This is a very detailed cognitive assessment report, for each of the time used to have a detailed description, such as eye movement, viewer understanding, mouse movement, mouse clicks and so on.

Based on this report, the layout and operation of the interface can be optimized, which is helpful to solve the system bottleneck problem.

6. Export

You can export design to HTML, export script to CSV.

Exporting CSV is an export of the above cognitive evaluation report, which says, "Export HTML."

The directory of the exported file is as follows:

Each screen generates a page, index.html is the index of all pages, and the build is a few JavaScript scripts.

These files are best viewed in the Firefox browser and I can't test them properly in IE8.

Click "Compose Mail" to try, the page jumps to the next step,

Then enter "Roo" and go to the next step (that is, go to the next screen):

Next step I will not give an example, so we can take this prototype to show others.

As you may notice, the pieces in the screen generate HTML elements, and then you can use them as you would in real Web pages, and generate JavaScript to implement the action.

This software is not very strong, if you want to use it quickly try it.

There's no feeling it's like a college pie thing. It seems to be Edu's domain suffix.

Program and example Download address:
Http://cogtool.hcii.cs.cmu.edu/use-today/download-cogtool-and-its-user-guide
Http://cogtool.hcii.cs.cmu.edu/use-today/examples