Download HCI Design: Requirements, User & Task Modeling, Interface Selection and more Study notes Human-Computer Interaction Design in PDF only on Docsity!
IT86A-HUMAN COMPUTER INTERACTION
Page | 49 HCI DESIGN Topic:
1. The Overall Design Process
2. Interface Selection Option
a. Hardware Platform
b. Software Interface Components
3. Wire Framing
4. Naïve Design
a. Requirements Analysis
b. User Analysis
c. Making Scenario and Task Modelling
d. Interface Selection and Consolidation
Objectives:
• Describe the design process for interactive
application.
• Discuss requirements analysis, user, and application
task modelling
• Drew up story board for particular user interfaces
based on the relevant principle, guidelines and
theories of HCI
Content
1. The Overall Design Process HCI design is an integral part of a larger software design (and its architectural development) and is defined as the process of establishing the basic framework for user interaction (UI), which includes the following iterative steps and activities. A. Requirements analysis : Any software design starts with a careful analysis of the functional requirements. For interactive software with a focus on the user experience, we take a particular look at functions that are to be activated directly by the user through interaction (functional-task requirements) and functions that are important in realizing certain aspects of the user experience (functional-UI requirements), even though these may not be directly activated by the user.
IT86A-HUMAN COMPUTER INTERACTION
Page | 50 One such example is an automatic functional feature of adjusting the display resolution of a streamed video based on the network traffic. It is not always possible to computationally separate major functions from those of the user interface. That is, certain functions actually have direct UI objectives. Finally, we identify non-functional UI requirements, which are UI features (rather than computational functions) that are not directly related to accomplishing the main application task. For instance, requiring a certain font size or type according to a corporate guideline may not be a critical functional requirement, but a purely HCI requirement feature. B. User analysis : As we have emphasized previously, a user analysis is an essential step in HCI design. The results of the user analysis will be reflected back to the requirements, and this could identify additional UI requirements (functional or nonfunctional). It is simply a process to reinforce the original requirements analysis to further accommodate the potential users in a more complete way. For instance, a particular age group might necessitate certain interaction features such as a large font size and high contrast, or there might be need for a functional UI feature to adjust the scrolling speed.
IT86A-HUMAN COMPUTER INTERACTION
Page | 52
2. Interface Selection Options A. Hardware Platforms The choice of a design configuration for the hardware interaction platform is largely determined by the characteristics of the task/application that necessitates a certain operating environment. Therefore, the different platforms listed here are suited for and reflect various operating environments: ✓ Desktop (stationary) : Monitor (typical size: 17 – 42 in.; resolution: 1280 × 1012 or higher); keyboard, mouse, speakers/ headphones (microphone). Suited for : Office-related tasks, time-consuming/serious tasks, multitasking ✓ Smartphones/handhelds (mobile) : LCD screen (typical size: 3.5– 5 in., resolution: 720 × 1280 or higher, weight ≈ 120 g), buttons, touch screen, speaker/headphones, microphone, camera, sensors (acceleration, tilt, light, gyro, proximity, compass, barometer), vibrators, mini “qwerty” keyboard Suited for : Simple and short tasks, special-purpose tasks ✓ Tablet/pads (mobile) : LCD screen (typical size: 7 – 10 in., resolution: 720 × 1280 or higher, weight ≈ 700 g), buttons, touch screen, speaker/headphones, microphone, camera, vibrators, sensors (acceleration, tilt, light, gyro, proximity, compass, barometer) Suited for : Simple, mobile, and short tasks, but those that require a relatively large screen (e.g., a sales pitch; see Figure 4.3)
IT86A-HUMAN COMPUTER INTERACTION
Page | 53 ✓ Embedded (stationary/mobile) : LCD/LED screen (typical size: less than 3 – 5 in., resolution: low), buttons, special sensors, and output devices (touch screen, speaker, microphone, special sensors); embedded devices may be mobile or stationary and offer only very limited interaction for a few simple functionalities (Figure 4.4) Suited for : Special tasks and situations where interaction and computations are needed on the spot (e.g., printer, rice cooker, mp3 player, personal media player) ✓ TV/consoles (stationary): LCD/LED screen (typical size: > 42 in., resolution: HD), button-based remote control, speaker, microphone, game controller, special sensors, peripherals (camera, wireless keyboard, Wii mote–like
IT86A-HUMAN COMPUTER INTERACTION
Page | 55 ✓ Virtual reality (stationary) : Large-surround and high- resolution projection screen/head-mounted display/stereoscopic display, 3 - D tracking sensors, 3 - D sound system, haptic/tactile display, special sensors, peripherals (microphone, camera, depth sensors, glove) (Figure 4.7) Suited for : Spatial training, tele-experience and tele- presence, immersive entertainment ✓ Free form (stationary and mobile) : Special-purpose hardware platforms consisting of a customized configuration of individual devices best suited for a given task (when cost is not the biggest factor). (There are many such custom-designed interfaces, such as those shown in Figure 4.8.)
IT86A-HUMAN COMPUTER INTERACTION
Page | 56 b. Software Interface Components Most of these software components are quite well known and familiar to most of the readers, so we only highlight important issues to consider in the interface selection. ✓ Windows/layers : Modern desktop computer interfaces are designed around windows, which are visual output channels and abstractions for individual computational processes. For a single application, a number of subtasks may be needed concurrently and thus must be interfaced through multiple windows. One window among the many (or task) would be “active,” and this window becomes “focused” by placing the mouse cursor over it or by an explicit click. For relatively large displays, overlapping windows may be used. However, as the display size decreases (e.g., mobile devices), non-overlapping layers (a full-screen window) may be used in which individual layers are activated in turn by “flipping” through them (e.g., flicking movements on touch screens) (Figure 4.9). ✓ Icons : Inter-actable objects may be visually represented as a compact and small pictogram such as an icon (and similarly as an “earcon” for the aural modality). Clickable icons are simple and intuitive (Figure 4.11).
IT86A-HUMAN COMPUTER INTERACTION
Page | 58 in Figure 4.13: the pull-down, pop-up, toolbars, tabs, scroll menu, 2 - D array of icons, buttons, check boxes, hot keys, etc. Table 4.1 shows how to best use these different types of menus. The menu items are usually subtasks to be invoked or the target interaction objects for certain tasks to be operated upon. In either case, it is clear that the menu must be organized, categorized, and structured (typically hierarchically) according to the task and the associated objects. At each level of the menu, the number of items should be managed to be ideally below the “magic number 8” (the limit of our short-term memory,
IT86A-HUMAN COMPUTER INTERACTION
Page | 59 ✓ Direct interaction : The mouse/touch-based interaction is strongly tied to the concept of direct and visual interaction. Before the mouse era, the HCI was mostly in the form of keyboard inputting of text commands. The mouse made it possible for users to apply a direct metaphoric “touch” upon the target objects (which are visually and metaphorically represented as concrete objects with the icons) rather than “commanding” the operating system (via keyboard input) to indirectly invoke the job. In addition to this virtual “touch” for simple enactment, the direct and visual interaction has further extended to direct manipulation, e.g., moving and gesturing with the cursor against the target interaction objects. “Dragging and dropping,” “cutting and pasting,” and “rubber banding” are typical examples of these extensions. ✓ GUI components : Software interaction objects are mostly visual. We have already discussed the windows, icons, menus, and mouse/pointer-based interactions, which are the essential elements for the graphical user interface (GUI), also sometimes referred to as the WIMP (window, icon, mouse, and pointer).
IT86A-HUMAN COMPUTER INTERACTION
Page | 61 skeletal framework of a website or interface. It depicts the page layout or arrangement of the UI objects and how they respond to each other. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Figure 4.16 shows such a wire- framing tool. Wireframes produced by these tools can be simulated to show interface behavior, and depending on the tools, the interface logic can be exported for actual code implementation (but usually not).
4. “Naïve” Design Example: No Sheets 1. A. Requirements Analysis To illustrate the HCI design process more concretely, we will go through the design of a simple interactive smartphone (Android) application, called No Sheets. The main purpose of this application is to use the smartphone to present sheet music,* thereby eliminating the need to handle paper sheet music (Figure 4.17). An initial requirements list may look something like the one in Table 4.2. Note that this again would be part of any software development process. Here, we focus more on the HCI-related requirements for the sake of brevity.
IT86A-HUMAN COMPUTER INTERACTION
Page | 62 B. User Analysis The typical user for No Sheets is a smartphone owner and novice/ intermediate piano player (perhaps someone who wants to show off their musical skill at a piano bar) (Figure 4.18). Since a smartphone is used, we would have to expect a reasonable power of sight for a typical usage (e.g., a viewing distance of about 50 cm subtending a letter of ±1 cm). There does not seem to be a particular consideration for a particular age group or gender. However, there may be a consensus on how the chord/music information should be displayed (e.g., portrait vs. landscape, information layout and locations of the control buttons, color-coding method, up-down scrolling vs. left-right paging, etc.).
IT86A-HUMAN COMPUTER INTERACTION
Page | 64 o Review: Manually move backward to a particular point in the song ✓ Show instruction: Show the instruction as to how to use the system ✓ Set preferences: Set preferences for information display and others ✓ Show software information: Show version number and developer information The subtasks, as actions to be taken by the user, can be viewed computationally as action events or, reversely, as states that are activated according to the action events. Figure 4.20 shows a possible statetransition diagram for No Sheets. Through such a perspective, one can identify the precedence relationship among the subtasks. From the top main menu (middle of the figure), the user is allowed to set/select/ change/view the preference, tempo, song, and software information. The user is also able to play and view the timed display of the musical information, but only after a song has been chosen (indicated by the dashed arrow). While the timed music information is displayed, the user can concurrently—the four states (or equivalently actions) in the transparent box in the right are concurrent—play/stop, move forward, and move backward. Such a model can serve as a rough starting point for defining the overall software architecture for No Sheets. A storyboard is then drawn based on the task model to further envision its usage and possible interface choices. (A storyboard consists of graphic illustrations organized in sequence and is often used to previsualize motion picture, animation, and interactive experiences.) There is no fixed
IT86A-HUMAN COMPUTER INTERACTION
Page | 65 format, but each illustration usually includes a depiction of the important steps in the interaction, annotated with a description of important aspects (e.g., possible interface choice, operational constraints and any special consideration needed, and usage contexts). Figures 4.21–4.25 show the initial storyboards for No Sheets, illustrating the motivational context, a typical usage scenario and sequences, and rough mobile interface sketches.
IT86A-HUMAN COMPUTER INTERACTION
Page | 67 This will become more apparent as we evaluate the initial prototype and revise our requirements and design for No Sheets 2.0 (presented in Chapter 8). Figure 4.26, based on the use of a commercial wire-framing tool, shows the final interface look and the interaction flow.
IT86A-HUMAN COMPUTER INTERACTION
Page | 68 Summary In this chapter, we have described the design process for interactive applications, focusing on modeling of the interaction and selection of the interface. The discussion started with a requirements analysis and its continued refinement through user research and application-task modeling. Then, we drew up a storyboard and carefully considered different options for particular interfaces by applying any relevant HCI principles, guidelines, and theories. The overall process was illustrated with a specific example design process for a simple application. It roughly followed the aforementioned process, but it did so (purposefully) in a hurried and simplistic fashion, leaving much potential for later improvement. Nevertheless, this exercise emphasizes that the design process is going to be unavoidably iterative, because it is not usually possible to have the provisions for all usage possibilities. This is why an evaluation is another necessary step in a sound HCI design cycle, even if a significant effort is thought to have gone into the initial design and prototyping. Self-Assessment Question: Quiz 1 - 4 The Iterative Steps in the Overall Design Process in HCI.
- The Iterative Steps in the Overall Design Process to reinforce the original requirement analysis to further accommodate the potential users in a more complete way.
- The iterative in the overall design Process that identify application task structure and the sequential relationship between the different elements were detailed scenario and storyboard is envisioned on how the system would be use. - Scenario and Task Modeling.
- It is a software interface components that allow activation of command and task through selection.
