Tuesday, May 26, 2009

Adaptable GIMP Mockups: May 26, 2009

The ingimp dataset indicates that people only use about 12 different commands when they use GIMP. Given that there are over 300 commands in the interface, this finding suggests that we can significantly simplify the interface to only show those commands necessary to complete a task.

The HCI Lab at the University of Waterloo is designing a new version of GIMP, Adaptable GIMP, that incorporates an adaptable interface, or an interface that can modify its presentation depending on a user’s needs and tasks.

This blog contains a set of mock-ups of this potential redesign. We welcome comments, questions, and suggestions for improvements! (Please see http://www.ingimp.org/adaptable/study for specific information on how we will use comments posted to this blog.)

Simplification Through Task Sets

To simplify the interface, we introduce task sets, or collections of tools and commands typically used to accomplish a given task. For example, when painting, one typically uses the paintbrush, pencil, and eraser tools, but is less likely to employ Unsharp Mask. Thus, a painting task set would include tools common to painting, and only show these tools in the interface. The notion of a task set is somewhat akin to perspectives in Eclipse -- a way to organize one's workspace to cater to a specific task.

Note: It is important to distinguish between tools and commands. Tools are instruments used to directly interact with an image, and include things like the paintbrush or smudge tool. Commands, on the other hand, operate on regions of pixels at once. We sometimes use these terms interchangeably, though at times it is important to distinguish between the two when considering the interaction design for Adaptable GIMP. To reiterate, a task set includes a select set of both commands and tools.

Creating and Sharing Task Sets

In our current design, task sets are manually created by users. Any task set a user creates is uploaded to our server where it is instantly made available to the entire community. Thus, this adaptable interface is open, making it extremely easy for people to share adaptations, customizations, and even tutorials (more on that later).

Given this overview, let’s jump right into the mock-ups.

Mock-Ups

Note: The mock-ups are intentionally rough in their appearance and layout. We are primarily concerned with functionality, features, and workflow at this point, that is, ensuring we have all the functionality required for an initial release. That said, we welcome specific suggestions on how to best present the functionality described.

Toolbox: Grid View


In Adaptable GIMP, the GIMP toolbox is modified to include:
  • a drop-down menu of task sets,
  • a set of additional tool views, and
  • a button to edit the current task set.
The task set drop-down menu contains the following items:
  • the application defaults (i.e., all tools)
  • --
  • the user’s installed task sets
  • --
  • the task sets used most frequently by the entire community
  • --
  • an option to create a new task set
The additional tool views toggle presentation of the contents of the Toolbox between:
  • Icons with no text
  • Icons with text
  • Icons with text and additional information

Toolbox Contents

In Adaptable GIMP, we allow menu commands to be shown in the Toolbox. Thus, all commands and tools in a task set are visible in one place, namely, the Toolbox. We believe this will significantly simplify the interface by providing the user a single place to search for tools and commands. Given the low number of operations performed by a user in any given session, this should be feasible.

The “Edit Task Set...” button opens up a modal dialog box (described below) for editing the task set.

Toolbox: List View


The List View of the Toolbox shows each tool/command with its natural language name. We believe this will help novice users of the application.

Toolbox: Information View


The informational view allows the user to view notes for a given tool/command or the current task set. Users select the “i” icon next to the tool they wish to get more information about, or the “i” icon next to the task set name (top-right) to obtain information about the task set. The current design is a bit busy; we may remove the color around the "i" icons to make it a bit cleaner.

In the current design, the user has to click an "i" icon. Some may ask why this is (e.g., why not just click the tool/command of interest to get more info?). The reason for this design is that both tools and commands may appear in the toolbox: Since commands are invoked immediately when clicked, we need to provide a way for users to receive information about a command without invoking the command itself.

Information for a tool can be edited by clicking the “Edit Tool Info...” button. Any changes made to the text will be uploaded to the server and made available instantly to all Adaptable GIMP users. In this way, the tool info is somewhat like a wiki page. Because changes will be made available to everyone, the user will be given a reminder that any changes are global in effect.

If the user clicks the “i” icon next to the task set, the task set’s information is displayed and the edit button’s text is changed to read “Edit Task Info...” Editing the task set’s info is done in the task set editor window, discussed below.

The task set info can be used to communicate information to assist in using the task set. For example, the content may comprise a tutorial instructing users how to use the chosen tools to accomplish a specific task.

Task Set Manager


Clicking the wrench icon in the Toolbox (next to the task set drop-down menu in the Toolbox) invokes the Task Set Manager (click the image above to get a larger version of the screenshot). This manager allows the user to install/uninstall task sets in the drop-down menu.

By default, the Task Set Manager opens to the screen above. Users can toggle between showing available task sets and those which are already installed. Users can search for task sets and sort via the following options:
  • Most popular
  • Recently used by the community
  • Recently added
  • Alphabetical
Selecting a task set in the list of task sets displays more information about the task set as well as a preview of the commands. Users can install selected task sets via the install button and immediately switch to the last selected task set via the “Use This Task Set Now” button.


Toggling the “Installed” button shows the task sets currently installed. Users can uninstall selected task sets, reorder the order in which they are presented in the drop-down menu in the Toolbox (by using the arrow buttons), and can edit the task set by clicking the “Edit...” button.

Task Set Editor


Clicking the “Edit Task Set” button on the Toolbox brings up the Task Set Editor. There are two copies of any task set: The user’s personal copy and the community copy. When installing a task set, a copy of the community copy is made on the user’s machine. This copy does not change unless the user manually makes modifications to it. This behavior is to prevent the task set changing unexpectedly on the user should someone edit the community copy of the task set.

Any changes made to the personal copy are only made locally. Users can only add/remove commands from the personal copy; no edits can be made to the local description of the task set or its name. The order of the commands/tools (as they appear in the Toolbox) can be modified using the arrow buttons.

Users can add commands to a task set by selecting them in the list on the right. Users can filter the set of possible commands to add by choosing:
  • All commands
  • Menu items
  • Toolbox items
  • Frequently used with this Task Set
  • Frequently used by community
  • Frequently used by you


Choosing the “Community Copy” tab allows a user to edit the “master” copy of a task set. This is the copy of the task set users receive when installing a task set (any changes are not retroactively applied after the task set has been installed). Anyone can edit this version of the task set.

Users can edit the tags describing this task set, its description, and the set of commands included with the task set. Users can also change the locale for the task set to localize text. Finally, users can view past versions of a task set, reverting to a prior version, if desired.

Version Control


Past versions of the task set can be accessed in the dialog box shown above. Versions are listed on the left, the tags, description, and commands in that version are shown on the right. Users can synchronize either their personal copy or community copy to a selected version.

Next Steps

If you made it this far, congrats, that was a lot of text :)

From here, please post any feedback, comments, or suggestions below in the Comments section.

2 comments:

  1. As an Eclipse user, I like the idea of changing visible options based on the task you are trying to accomplish. I would like to see this extended beyond the toolbox to panels. When painting, the layers panel and color choose panels are important, but when adjusting hue/saturation, or resizing, they are not. It would be nice to see these as customizable parts of the task set as well.

    ReplyDelete
  2. Also, Eclipse calls them "Perspectives" instead of "Task Sets". Obviously I'm biased towards their terminology, but I thought I'd throw it out there anyway.

    Also, it would be nice to see the Color Tools dialogs as dockable components, so they can be added/removes based on task set as well.

    ReplyDelete