Cross-Cultural Human-Computer Interaction and User Experience Design

P1: RAZI

December 18, 2014 12:47 K24618 K24618˙Book

4

Case Study: Expert

Evaluations of Complex

UIs

4.1 UI ANNOTATION AND ANALYSIS

We present our analysis results from the SA and HE of both of the compared UIs

following the extracted UI corpus. We annotated the UIs using a transcript of inter-

action sentences from actions. The following subsections present our analysis of five

selected functions from two image-processing applications.

4.1.1 RED-EYE REMOVAL

Adobe Photoshop steps

(0) Open the picture to adjust.

(1) Find the proper function in the menu bar or toolbox (Figure 4.1).

(a) The subtask involved was to look through the menu items (especially

in what seemed as most related: Image -> Adjustments and Filter)

for a relative command, but it was not found.

(b) The subtask involved was to look in the toolbox for a button resem-

bling the intended action. Because many of the buttons with a similar

function are grouped together (this fact is represented by a black tri-

angle in the bottom-right corner of the button, however, only the first

icon is shown as representing the group), the user needs to click and

hold on every such group button to find out the group members.

(2) Click and hold the group button and select “Red Eye Tool” (Figure 4.2).

(The cursor changes to a crosshair.)

(3) Click on the center of the red eye and repeat the same for other red eyes in

the picture. (The eye color turns to a natural one.)

(4) Save the result in the file.

FIGURE 4.1 Adobe Photoshop menu bar. Source: Adobe Photoshop CS2. Adobe product

screenshot(s) reprinted with permission from Adobe Systems Incorporated.

45

P1: RAZI

December 18, 2014 12:47 K24618 K24618˙Book

46 Cross-Cultural Human-Computer Interaction and User Experience Design

FIGURE 4.2 Adobe Photoshop red eye tool. Source: Adobe Photoshop CS2. Adobe product

screenshot(s) reprinted with permission from Adobe Systems Incorporated.

HE analysis

Fitt’s Law.

The buttons on the toolbar are quite small, even if they represent often-used functions.

The toolbar layout supports rather advanced users familiar with accelerators.

Help and documentation.

The task 1b was not even described in the help documentation, so the user had to

explore different possibilities by himself or herself.

Recognition rather than recall; perceived stability.

The button icon for the group comprising the “Red Eye Tool” changes every time

a tool from that group is selected. Although the tools are semantically connected,

their function and position on the menu has to be learned. This continual change of

location could also affect the perceived stability of the UI.

SA analysis

Actors, audience, paradigm.

All of the objects involved in the interaction pertain to the leading paradigm of

“window, icon, menu, pointing device” (WIMP). The paradigm is constituted by the

menu bar, toolbars, main window containing the image, dialog windows, icons, and

pointer. The paradigm is bound to the GUI metaphor. Adobe Photoshop is meant for

professionals. This distinction of audience is manifested implicitly by the channel

of distribution (commercial software) and explicitly in the marketing documentation

(Adobe Photoshop’s slogan reads: “The professional standard in desktop digital imag-

ing” (Adobe, 2005)). The menu paradigm is constructed by combining noun-verb or

verb-noun items, which seems deliberate (only one model should be chosen). A more

specific audience for this function consists of photographers and home users.

Symbols.

The users are addressed by symbols pertaining to the user domain. In this case, the

application icon and splash screen of Adobe Photoshop features a colorful feather.

The connotations are elegance, simplicity, and naturalness which one would expect

from a professional tool. What might break the expectation, however, is the historical

usage of the image that symbolizes a writing pen. The other screens (and toolbars)

are very compact and gray. The button activating the “Red Eye Tool” is found in