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