Matching HCI Design Patterns to Workflow within an Agile Process Glenn A. Osga User-Centered Design Space & Naval Warfare Systems Center San Diego, CA. USA Abstract—HCI Design Patterns have seen increased use with the advent of web-based portals that allow download and use of Human-Computer Interface components. A challenge for developers of patterns is the incorporation of good human factors principles into their designs. Another challenge for designers and developers is the selection of the best pattern for the appropriate user task and application. This paper presents a discussion of pattern use in an agile design process, using a notional toolset to aid in matching patterns to HCI design problems. Keywords: Human-Computer Interface, Agile Design Process.
1
Introduction
Human-Computer Interface (HCI) design patterns are part of a software design method that is becoming increasingly popular in the software development process. High-quality pattern designs can provide practical cost and risk-reduction through re-use of tested and implemented HCIs. Use of HCI patterns in web-site development has increased and available patterns are typically web oriented and widget focused [1], [2]. Patterns need to be incorporated within a design process as building blocks that capture good design qualities. They are also valuable in the Agile Process to incorporate good human factors engineering practices. Basic widget patterns or collections of generic patterns may not support or represent specific work activities except for generic computer process tasks. Well-designed groupings of these basic patterns are needed for complex task domains such as system control, mission monitoring, and other process-oriented domains. This paper describes work-in-progress towards the design and iterative construction of a web-based HCI patterns portal that contains format construction tools and task-centered Human Factors guidelines associated with pattern use. Further integration of agile process design tools with pattern libraries will increase design efficiency and improve quality. As the design process becomes increasingly collaborative within communities of interest, evolution of pattern quality and design quality will depend upon feedback from the design community-of-interest and results regarding what design options work well for each usage context.
2
Designer Cognitive Challenges
A simple goal of a design pattern is to capture good design qualities and allow them to be re-used across multiple design problems. Patterns in web-design and software HCI design have been shown to reduce development time, cost and risk [3], [4]. Pattern designers often want patterns from one domain to be easily generalized to other work domains. Developers want appropriate patterns that can be matched to their immediate design problems. Managers look for process efficiencies and lower costs. Pattern libraries need to evolve over time within work domains as a collaborative effort among designers and developers to address each of these needs. The following list describes design process challenges for pattern use. 1. A high-quality set of useful patterns needs to be created. 2. Patterns need to be available in various formats that are applicable to each stage of the design process, e.g. early concept, low fidelity, medium fidelity, advanced concepts. 3. Patterns need to be accessible by designers. 4. Each patterns purpose and function needs to be understood and matched correctly to the best task or user activity. 5. Pattern use needs to fit within a suitable design and engineering process appropriate for iterative design that allows for efficient integration. 6. Pattern descriptions should be standardized along recognized terms and usage conventions. 7. Designers need to be motivated to use and contribute to pattern libraries. The motives need to lie at the “workbench” level for the designers and programmers and not just at the higher management levels of engineering supervision. 8. Collaboration among designers must be positive and rewarding relative to time and effort applied. 9. Pattern quality must be monitored by the design community through pattern quality feedback, testing and performance-based results that are published and associated with designs. Defining high-quality patterns is paramount, but what is “quality” and “good” design? Product feedback is required with respect to usability testing or performance
testing regarding the patterns’ successful integration and use. Design qualities associated with “work-centered” or “task-centered” design are associated with higher quality usability and performance results [5], [6] and may be captured in pattern collections [7]. Assume the designer wishes to capture the principle of “explicit task representation” in the design. A simple generic task navigation pattern doesn’t accomplish this unless the content is explicitly task relevant. A developer could insert either functional or task-specific labels on the navigation pattern template and the design properties will be significantly altered. Thus, there are at least three levels of designer comprehension and several cognitive challenges during the design conception phase. • First, awareness of navigation need, context and task purpose within the user task domain. • Second, awareness of the types of navigation methods. • Third, awareness of design styles such as functional vs. task-oriented navigation content. The first level of awareness about major HCI design components may be best served by pattern collections at or near the “whole screen” level, along with guidelines for use. This level of design captures principles about visual flow, grouping and arrangement [8]. The second need can be served by grouping “like patterns” into sets of related purposes, similar to the Yahoo Pattern Site [2]. The third need can be supported by content samples and explanations of how the content is used to support human performance. The design concepts can be validated through successful use or corrections that are published by members of the design community of interest. HCI design as shown by pattern collections on a screen must also support work goals. The pattern may contain a representation of a work process, a work activity product that has been created, or information for analysis and decision support. When the quality of the design addresses basic visual and psychomotor requirements the usefulness of the design lies in performance efficiencies in the work accomplished (speed, accuracy) and training (learnability). It is important that the designer avoid errors of mismatching patterns to tasks. This is a difficult challenge without a library of tasks and activities, and can probably be best served by focused task domain collections. Designer errors may be reduced when patterns are grouped by task purpose and then defined in various ways such as by work activity or task, with examples that can be used to guide the designer. Some current pattern portals do provide a basic task context. Yahoo, for example describes “User Needs To:.. Navigate, Explore Data, Organize Data, Give Feedback, Perform Action, Customize.” The designer’s challenge is then to match their problem space taxonomy to the pattern library’s task definitions. Another pattern grouping is presented as “The Application Needs To… Call Attention, Improve Readability, Group Related Items”. This description focuses on the visual feedback and basic interactive properties of the HCI. Here the challenge for the designer remains to interpret the pattern taxonomy, combine the basic visual
elements, and construct a HCI that best supports user performance and satisfaction.
2.1
Combining Patterns with Design Process
A web-based portal can support HCI construction through various phases of analysis and iterations. The portal’s basic content is: Log-On Page (if access is controlled) Home Page Pattern Library (hierarchical, with patterns ranging from simple to complex) Discussions (by designers & developers, on general design topics or pattern-specific content) Designer’s Workbench (tools to aid designers in using patterns based on task and work activity resulting from agile analysis) Site Map (illustration of all pages with links to them)
Assume that users access the Library through the Home Page. The following content sections could be useful in providing initial content awareness to the designer as either first-time or repeat user. Library News – This section can contain the following information: A summary of the latest library contents such as: new pattern arrivals, recent updates, or “popular” patterns based on download frequency; A prompt for review can be shown with a sample pattern that needs a review or test (e.g. no feedback ratings or testing done yet); A link to sign up for email bulletins that inform the user if a new pattern has been added to the library; A count of the number of patterns by type and the last update date/time for any patterns. News and Announcements – A listing of any upcoming conferences, relevant events, new publications. Links to sites with information on meetings and events related to patterns or other pattern sites. My Patterns Workspace – A summary of the users’ current workspace configuration. Allows users to identify, save and retrieve their favorite patterns that they might use more frequently in their projects. Pattern Summary – A summarized view of patterns within tabbed groupings. The summary contains the pattern name, purpose, description of content, designer rating, user rating, applications reported using the pattern, and status of code available to implement the pattern. Figure 1 shows an example pattern selected from the library. This section is tabbed so the user can view different groupings of patterns including: Widget Single Patterns – single patterns that represent most basic elements of HCI. (examples: checklist, slider, control button). Widget Pattern Groups - groups of basic element patterns that support general, non-task domain specific tasks. (e.g. warning popup, save as dialogue window, select item list). Task Domain (Mission) Patterns – patterns that are collections of widget pattern groups combined to support work-specific task activities (mission timeline, situation map, launch process, etc.) User-Defined – any collections of patterns that a user wants to name and save for their purposes. Users can create their collection of “private” patterns not seen by others or share their user-defined patterns on the site under this section.
The premise behind a taxonomy of patterns that ranges from individual widgets to task domain patterns is that designers approach their design problem space from varying
Fig. 1 A sample descriptive summary for an individual pattern
contexts of design understanding and completeness. This design problem complexity varies from a single new window addition within a complete system to a new complex system design. As shown in Fig. 1, the top-level view of the library represents the top-level ontology of pattern types and access to further pattern details. Pattern summary information can include the following elements: Name - a unique identifier for the pattern that is descriptive of its features. Purpose – the type of task applications that the pattern applies to and other pertinent features. Description – a summary of the pattern format & content. Designer Rating – an average of individual designers’ ratings for a specific pattern. User Rating – an average of users ratings for a specific pattern. Applications Using – a list of applications that used the pattern (indicating pattern usefulness and external validity). Code Avail? – the status of downloadable code or low-fidelity paper prototypes. Problems Solved – a short description of the design problems the pattern can be used for and how to best apply the pattern. Generic Templates - a thumbnail view of the generic pattern. Applications - a thumbnail view of the pattern with examples of domain or mission-specific data that can be expanded into a fullscale view.
2.2
Library-User Interaction
The Patterns Library supports designers during various stages of design composition. This approach differs from a library that presents only high-fidelity products. Patterns can present a diverse range in fidelity, from low-fidelity, paper-only formats to high-fidelity, working code. This assumes usefulness to either a designer or developer who may have varying search strategies based upon the current state of their design definition for user tasks, task goals and work processes. A developer may need only high-fidelity patterns available for downloading and immediate use. A designer or researcher in HCI may find low-fidelity format of preliminary or innovative patterns useful. The following features describe possible interactions by library users: Browse/Select Patterns - allows users to look through all the pattern examples and download content.
Create New Single Pattern - displays a blank template for a single pattern that can be populated with the new pattern data. Create New Pattern Group – displays a blank template for a new pattern group to be created. Optimally the designer should be able to have multiple library windows open to compare preexisting patterns to new patterns. Library Suggestions – allows user comments to be included in an on-going discussion group regarding the library content and structure. Set My Library Preferences – allows the user to set a default for which pattern type is displayed when the site is first accessed. The user could also set other preferences such as sorting defaults.
3
Designer’s Workbench
The “designer’s workbench” is a conceptual workspace that supports pattern use within an HCI design process. Given the complexity of this part of the portal, the workbench may need to be a separate application with patterns that are downloaded from the portal library for local use. The following features represent an initial set of capabilities possible within an integrated workbench approach. The design approach is most closely based upon an Agile Process [9] as part of a User-Centered Design (UCD) software engineering approach. However, a flaw in typical UCD is that it doesn’t really accomplish the “doing” of design [10]. Patterns may help bridge the gap between human factors engineering, software engineering and UCD outcome. There is no cookbook method available to create the best design, but there are human factors principles and processes that focus the designer on the user, task and work activities. Patterns that represent a well-formed collection of basic widgets may assist designers in forming a higherlevel design focus supporting the users’ work processes and connecting each process with explicit design features. These patterns can inherently capture principles of task flow, sequence, visual scanning and high-quality feedback. Another challenge in UCD is the interpretation and use of user comments during this design process. During design deliberations a key focus of discussion must be the identified work process, workflow and the task products.
When interpreting user feedback, designer(s) must distinguish between criticism of work process or task products with criticism of HCI format or features. A process critique can occur once the HCI wireframe is created on paper and the process walkthrough is attempted. This occurs because the users can begin to interpret how the process will be enacted in a tangible way, vice looking at an abstract flowchart representation. Thus, for a given design problem, the HCI pattern may be appropriate, but a design correction may be traced back to a need to change the process flow. The Agile approach makes the tracing of process to product to design result easier if done correctly, but it doesn’t give the design team inherent guidance on whether to discuss and repair process, product or format. Perhaps the quality of this discussion is improved by the use of patterns given that they serve as design building blocks reflecting larger groups of user activities with specific goals. For example, assume a designer interprets a process flow with task goals to require an HCI pattern that allows for item checkout and review in a “Shopping Cart” task activity. When the pattern is combined with others to represent a complete shopping experience within a task flow following an essential story, the entire design team can quickly visualize the possible design result. The design team can then review the quality of the process or the selected patterns supporting the process. Valid gaps in either process or pattern support should be apparent by conducting an HCI walkthrough using the essential story. In the following examples the process of capturing and describing work processes is combined with use of a Pattern Library to construct an initial HCI design.
3.1
Essential Story, Workflow, Pattern Selection
To illustrate the use of the Designers’ workbench concept a sample essential story 1 is used to represent a task flow. The story contained in Table 1 supports a user task goal to create an information summary from information items previously stored creating a summarized list of items. Prior to this story the Agile Process defined a Domain Model that describes the work environment and a Role Model that describes the users roles within the domain. Finally the tasks were defined by title and grouped in similar sets relative to user roles. Important tasks were selected through user voting to determine the “Focal Tasks” which are defined as those tasks that have the largest impact on customer, process or end goals for the user in their role and domain. A selected focal task was then used to derive a task flow showing each step in the process was associated with indirect and direct users, system functions, information content, business logic and constraints. Then the workflow was built to represent the process as either done today (descriptive) or how it might be done in the future (formative). A sample task flow is summarized in Table 1 and the patterns selected to support the workflow are 1 The “Essential Story” is part of the Agile Design process. The story describes a particular scenario of a critical or “focal task” that was identified in the Domain and Task Models.
described in Table 2. The work activity goal in this sequence is to view items in a list, be able to drill-down to see details of each item and to transfer selected items to a “product.” The product can then be stored or shared with others. Table 2 presents a Pattern Type name and description to match each step in the task flow in Table 1. The pattern information should contain task and application examples with suggested guidelines such as “use a pick list where the item list doesn’t go away after first item is picked since multiple picks are likely.” Using the task flow with information content and potential patterns defined the designer can now begin to construct a notional wireframe HCI using the designers’ toolkit. TABLE 1 EXAMPLE TASK-FLOW WITH SYSTEM INFORMATION CONTENT System User Info Content Present a list of sees a list of items items by title and/or short selectable items. description Selection device picks an item from Cursor & highlight and pick method a list Present details of sees details of Details associated with the item selected. item, decides not item selected what is wanted Selection device picks an item from Cursor & highlight and pick method a list Present details of sees details of Details associated with the item selected. item, decide item item selected is acceptable A method to Puts results into a A blank task product. Then a transfer contents to task product task product with user product, e.g. drag & selection included. drop A method to store Names, selects A window to name and place the product location and Saves the product on disk. the task product A method to Shares the task transfer the product product to others
Email address, attach product and send control.
TABLE 2 PATTERN TYPE & DESCRIPTION APPLIED TO TASK FLOW System Pattern Type Pattern Description Present a list of Widget Pattern types of lists in different selectable items. Group (WPG) formats Selection device Select an item and Point & select. and pick method selection highlight Pre-select highlighting widget patterns Present details of Widget Pattern General purpose window with item selected. Group (WPG) logic that allows linking of content with item selected in other window. Selection device Select an item and Point & select. and pick method selection highlight Pre-select highlighting widget patterns Present details of Widget Pattern Details associated with the item selected. Group (WPG) item selected A method to Logic Drag & drop manipulation transfer contents to logic to XFR an item product, e.g. drag & drop A method to store Widget Pattern A WPG for naming and the product Group (WPG) storing files A method to Widget Pattern An email message template transfer the product Group (WPG) with attachments to others
3.2
Notional Designer Workbench
This essential story suggests some of the cognitive task challenges faced by the designer and possible support from workbench tools. There are four main designer information needs that should be considered as wireframe content areas within the designers’ workspace including: 1. Depiction of the task and activity workflow, 2. Task information & control needs associated with flow, 3. A display format composition workspace using workflow information content and selected patterns, 4. Patterns available for use in the design. A HCI wireframe format for the Designers’ Workbench is presented in Fig. 2. The Agile Process produces the Workflow Representation (upper left) with Information Content (lower left). The appropriate patterns must be found in the Pattern Library (lower right), selected and included in the design Format Composition (upper right). Each of these workbench sections could be placed on multiple displays. As summarized in Table 2, the designer must apply knowledge of pattern function and task relevance to search
Fig. 2. HCI components of the Designers Workbench
for and recognize a potential match between pattern content and workflow needs. Patterns could be catalogued by type of task, type of task product [7] or can be separated into either work domain or generic Information Technology categories [11]. Other search categories can include pattern characteristics such as type of data, keywords or purpose. A preliminary design concept for a Designers’ Workbench toolset was constructed based on the content in Fig. 2. Fig. 3 depicts a project in-process that uses the toolset. Starting in the upper left portion of the display, the HCI information content is related to the task flow titled “workflow number 1” in this illustration. Information is depicted for the main task product of this workflow (labeled as item 1), as are the task-supporting “information set” components (items 2-5). Some information items may be used more than once in the workflow process. The lower left portion of the display has the wireframe content for the five information items. The next goal facing the designer is to create display format concepts in a wireframe format that matches the essential story workflow. The concepts can be created with the wireframe information items or with pattern formats. Fig. 3 shows an end-user workspace depicted in the format composition panel for a two-display workstation with upper and lower screens. Three items have been placed on the workspace including the task product (item 1) information placeholder, Information Item #4 placeholder and a Control Button pattern selected from the library. An item may be
Fig. 3. Designer’s Workbench with HCI wireframe concept shown under construction in the format worksheet
placed in the peripheral area if the designer is not sure yet where to place it on the screen but wants it visible for consideration. This method allows the use of display components that are in various stages of formality. As shown, there are three pattern types including: Widget Single Patterns, Widget Group, Mission Patterns. Using items selected from the Patterns Library, the designer builds the concept display in the workspace. As the concept matures the designer should be able to replace content placeholders for domain-specific information using specific pattern selections. Multiple concepts may be created to show alternatives to end-users for the same workflow. Next, the designer may search and select patterns to increase the fidelity of the HCI concept. For example, the designer has used the “Widget Single Pattern” group and selected a “Control Button (3LinePlain) Horizontal Strip” as shown in Fig. 3 (lower right). The designer can drag and drop or cut & paste the pattern to the concept format. The workbench software could allow the designer to specify more details about the pattern such as number of buttons, orientation, and also labeling. In the example the
designer has placed the pattern in the concept design along with wireframe information items, to support some type of control function related to those items. Continuing with HCI construction as shown in Fig. 4, the designer adds more components to the format. In this example the designer has added information items 2, 3 and 5 from the Wireframe Content list (lower left). Information item 4 has been replaced by a specific Control Button pattern which includes a specific information pattern from and Air Defense Mission task domain. Three instances of the button pattern were placed in the format design. The designer has also added a few more control button vertical strips but their specific labeling and content has not been added yet.
3.3
Design Quality
Design quality is based upon usefulness and purpose in supporting useful work activities and goals. Basic widget patterns and collections of patterns may be used within varying work activities but their information content and context of use within an activity sequence contributes significantly to their successful use. An important question for the designer during pattern search is the degree of similarity between the current project work activities
Fig. 4. Designer’s Workbench with HCI concept including patterns & content placeholders
and those activities represented by patterns within the library. An initial search by a designer could be done using similar task domain keywords. The designer could also include search criteria related to design quality. Patterns that demonstrate positive influence on human performance, usability and learnability of the task activities should receive increased designer attention. In exploratory design projects innovative patterns may be combined with well-known patterns and further usability testing conducted to evaluate the pattern combinations. Simple user and designer ratings may give a rough estimate of pattern quality but more robust performance metrics such as speed and accuracy of tasks should be collected and associated with the pattern description. Also, a patterns’ projected performance could be obtained using human performance modeling tools to provide a predictive metric of quality [12], [13]. The combination of subjective and objectively measured and predictive performance results could then be added to the pattern description in the library. The following list of quality metrics represents possible types of guidance to aid designers.
5
References
[1]
Google Web Toolkit Widget Gallery http://code.google.com/webtoolkit/documentation/
[2]
Yahoo Design Library http://developer.yahoo.com/ypatterns/index.php
[3]
Borchers, Jan “A Pattern Approach to Interaction Design” (2001) John Wiley & Sons.
a. Work-Centered Design Qualities – how well does the pattern support specific tasks (basic) or activities (task collections).
[4]
Van Duyne, Douglas K., et al. “The Design of Sites: Patterns, Principles, and Processes for Crafting a Customer-Centered Web Experience” (2003) Addison-Wesley.
b. Designer Ratings – designers could rate either the ease of implementation or the success obtained in the application use of the pattern.
[5]
Osga, G. (2003) Building Goal-Explicit Work Interface Systems. Paper presented at the Human-Systems Integration Symposium, Enhancing Human Performance in Naval and Joint Environments, June 2003, Tysons Corner VA.
[6]
Osga, G. Van Orden K. Campbell, N. Kellmeyer, D. Lulue D. (2002) Design and Evaluation of Warfighter Task Support Methods in a Multi-Modal Watchstation. Space & Naval Warfare Center San Diego Tech Report 1874.
[7]
Osga, G. (2004) Building Task-Product-Focused User Interfaces Using Information Sets and Design Patterns. Proceedings of the Human Factors & Ergonomics Society 48th Annual Meeting, pp 2416-2420. New Orleans, LA.
[8]
Tidwell, Jennifer “Designing Interfaces” (2006) pps 93-98. O’Reilly Media Inc.
[9]
Constantine L. (2002) Process Agility and Software Usability: Toward Lightweight Usage-Centered Design. Information Age, August/September.
c. User Ratings – users could rate the mission patterns based upon their perception of utility in practice or projected utility for early concepts. d. Performance Metrics (measured) - results of usability or experiments can be associated with group or individual patterns. e. Performance Metrics (modeled) Human performance metrics of time, error, workload, etc. could be associated with patterns used in designs in simulated task trials.
4
collections of basic patterns that can be tailored to generic task goals or focused to specific work domain tasks and activities. During the design process a designers’ workbench allows storyboarding of HCI content following the workflow and essential story identified in the Agile Process. Designer guidelines, examples and heuristics for best practice can be included with the pattern descriptions to aid designers in the matching of appropriate patterns with task processes. This match may be done through categorizing work domains by type of work task, type of HCI task, type of information, and type of task product. Work is continuing on both portal and workbench applications that can allow constructive combination of HCI patterns and rapid visualization of conceptual displays.
Conclusions
This paper discusses a process of using HCI design patterns within an agile design process. Agile artifacts such as workflows and task information contents are used to guide the creation of conceptual HCI design wireframes with patterns as building components. Patterns have the potential benefit of capturing and reusing good design features while reducing development time and cost. Pattern design can become iterative as communities-of-interest develop and iterate collections of design ideas within an HCI Patterns Portal. A challenge in the HCI design process is the combination of appropriate basic HCI Patterns into collections that support optimum human-computer interaction. One approach to assist the designer in this process may be to form
[10] Constantine L. (2004) Beyond User-Centered Design and User Experience: Designing for User Performance. Cutter IT Journal, 17(2) February 2004. http://www.foruse.com/articles/beyond.htm [11] Stanard, T., Wampler, Conrad, K., Osga, G. (2006) HCI Design Patterns for C2: A Vision for a DoD Design Reference Library. CCRTS Conference, San Diego CA. June. Command and Control Research Program Publications,
[email protected] [12] Kieras, D. E. (1997). A Guide to GOMS Model Usability Evaluation using NGOMSL. In M. Helander, T. Landauer, and P. Prabhu (Eds.), Handbook of human-computer interaction. (Second Edition). Amsterdam: North-Holland. 733-766. [13] Morrison, J.E. (2003) A Review of Computer-Based Human Behavior Representations and Their Relation to Military Simulations. Institute for Defense Analyses, IDA Paper P-3845 Alexandria VA.
