Case Study: Expert Evaluations of Complex UIs - Cross-Cultural Human-Computer Interaction and User Experience Design - page 45

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 R ED - 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