Empirical Study Pattern Based UI Design Adding Rigor wit

Table 2. Task Types Task Type Description Function_Selection The user selects one of the functionalities offered and made available by the system. Data_Selection The user is selecting and submitting a subset of the provided data. Data_input The user enters and submits data. Access The user requests access to a restricted area. The system provides the corresponding means. Search The user is searching for information. This step includes the system task of providing the means for entering the search criteria and the display of the search results. Browse The user is browsing through a list of information.

2.3 Pattern-Oriented Design

When designers have a set of patterns, they tend to build a mental model representing the use of each pattern, its relationship with other patterns and its applicability in a given domain. For web application design, it is possible to follow four steps [8]: 1 choosing architectural patterns to describe the structure of the entire web site, 2 applying page manager patterns to establish a consistent physical and logical screen layout for each page, 3 employing information container patterns to “plug in” an information segment for each page, and 4 applying navigation support patterns to facilitate navigation in information spaces. Landay and Myers [17] and Welie [12] also propose to organize their Web pattern languages according to both the design process and UI structuring elements such as navigation, page layout and basic dialog style. In addition, to exploit relationships between patterns at a finer level of granularity , Zimmer [18] divided the relations between the patterns proposed in Gamma et al. [10] into 3 types: “X is similar to Y”, “X uses Y”, and “Variants of X uses Y”. Based on [18, 19, 20], we define five types of relationships for composing UI design patterns: Similar, superordinate, subordinate, competitor, and neighboring. These will be discussed further in the next section.

3. Empirical Study

We applied our pattern-based development process during a three- year study which aimed to redesign an existing Bioinformatics web portal 1 . We wanted to evaluate whether the output of our process resulted in workable patterns, which could be used by 1 National Center for Biotechnology Information at http:www.ncbi.nlm.nih.gov. designers to build a usable UI prototype, complying with the original requirements and context of use information. We first conducted ethnographic studies and user interviews with an initial set of users of the site. We used these observations to understand the users, the bioinformatics problem domain, and user goals and preferences for the related tools. Based on this information, we carried out usability evaluations with a larger set of users. Participants included 16 bioinformatics users and five UI experts. Both psychometric and heuristic evaluations were used to collect relevant user, task and platform data. A brief summary of relevant findings will be presented here; further details about the study can be found in [21]. Our users were represented by two personas, with significantly different combinations of user and context variables Table 3. Due to space constraints, the table only displays a subset of the variables used in our process. Differences were based predominantly on psychological profile, application experience, and task behavior. The platform variable was consistent, since none of our respondents indicated using the site on any other device other than a standard desktop or laptop, with a web browser. Table 3. Subset of User and Context Variables User Variables Application Exp., Usage Frequency… Context Variables Task Name, Type, Frequency, Importance Pubmed Search, Search, High, High Info. Gathering, Browse, High, High BLAST query, Complex Data_Input, Search, Low, Medium Persona 1 Novice, Medium … Advanced Tool Use, Function_Selection, Low, Low BLAST query, Complex Data_Input, Search, High, High Advanced Tool Use, Function_Selection, Med, Med Database Search, Search, Medium, High Persona 2 Expert, High… MyNCBI Access, Complex Access, Function_Selection, Low, Medium Based on these variables, a number of patterns were suggested to UI designers. Table 4 illustrates examples of applicable patterns suggested by our process, which were then selected by UI designers. It is important to note that in our case study, due to both the nature of the application and the project requirements, UI designers focused heavily on the user variable “Application Experience”, which had an impact on their pattern selection. The “Rationale for Mapper Logic” depicts the machine reasoning behind the choice. Note that this rationale is domain-independent. The column “UI Expert Design Decisions” explains why, from a domain-dependent point of view, the UI designer has deemed the suggested pattern as appropriate. Table 4. Pattern Selection based on Persona Persona Design Pattern Rationale for Mapper Logic UI Expert Design Decision On-Fly Description Novice user is still unfamiliar with all menu options Navigation menu on left has important site links with associated descriptions; these are useful for users that are less familiar with the site, but a hindrance for expert users more scrolling. A solution is use of rollovers on-fly descriptions to help new users. P1 Novice Executive Summary Novice user is still learning about application General information about NCBI what they do and their mandate is interesting for novice users. For expert users, this clutters the site. An executive summary could solve this problem. Advanced Search Expert user likes to limit searches Simple search may be sufficient for novice users, but expert users often search against different parameters such as “limiting searches to specific species”. An advanced search option could be useful for these users. P2 Expert Teaser Menu Expert user likes to know recent updates NCBI news is a good idea for expert users but will add additional content and scroll down for novice users. A good compromise is to replace it with a teaser menu, and place the content on another page. Finally, in order to construct the UI prototype, we used the POD approach to select and combine appropriate web patterns based on the desired task and user behavior. Patterns were combined based on the relationships introduced in the previous section:

1. Similar X, Y if and only if X and Y can be replaced by each