professional java user interfaces phần 2 potx

28 Putting GUI Development into Context 12:30 PM 9 March 2006 c01.fm 1.0 We will also highlight the slight difference between realization and dependency relations: • Realization means that a class implements behavior specified by another class. This is the common case when a class implements an interface or an abstract class. • Dependency indicates that the implementing class depends on the other. Whenever the interface Observer in Figure 1.7 changes, the SandboxPanel class may also have to change. The dependency relation is also used to express depen- dencies among different class packages. Sequence diagrams Throughout the book we will use both UML sequence and collaboration diagrams. Such diagrams, which are interchangeable, describe a behavior by means of a number of objects and the messages they exchange in a given temporal sequence. Figure 1.9 shows an example of a sequence diagram that describes the typical behavior of a CustomListener instance that is registered for a JButton ’s ActionEvent s. In the figure, an unspecified instance of the class MainClass creates a new instance of the class JButton and a new instance of the class CustomListener . MainClass CustomListener init() new new AddActionListener() actionPerformed() JButton Figure 1.9 A sample sequence diagram c01.fm Page 28 Thursday, March 9, 2006 12:30 PM UML notation 29 12:30 PM 9 March 2006 c01.fm 1.0 This in turn invokes the method init() on itself asynchronously, then invokes the method addActionListener() to the unspecified instance of JButton . After some time – not related to the previous sequence of method calls – the unspeci- fied JButton instance method init() is invoked onto the unspecified instance of CustomListener . For brevity we usually avoid indicating instance names: Figure 1.9 only specifies class names. This section does not detail all the UML conventions used in the book for reasons of space – we have not mentioned collaboration diagrams, even though we will use them. Given the ubiquity of UML, we leave the interested reader to conssult one of the many sources available in literature or on the Web. State diagrams UML state diagrams are useful for describing the internal state transitions within a GUI. Figure 1.10 shows an example of an UML state transition diagram. As shown in the legends in the diagram, the initial state is indicated with a jagged arrow, while state transitions are indicated by arrows tagged with the event that triggers the transition from one state to the other. States are drawn as circles. Hence the state of the class described by the diagram in Figure 1.10 gets to State B after Event x happens when the class is in its initial state. Other events might change the internal state of the class, either restoring the initial state again or bringing it to a final state. State A Event x indicates the initial state State transition after event “x” occurred state State B the final state State C Figure 1.10 State changes within a class c01.fm Page 29 Thursday, March 9, 2006 12:30 PM 30 Putting GUI Development into Context 12:30 PM 9 March 2006 c01.fm 1.0 1.9 Summary This chapter has presented some introductory discussions about effective soft- ware and GUI design. In particular: • We discussessd the important concept of focusing on end users throughout the whole development process. • We illustrated a general decomposition of GUI implementations based on functional criteria. • Tool selection (the topic of Chapter 11) was presented briefly. • We briefly introduced organizational aspects related to UI development. • We discussed lifecycle issues, showing some design methodologies focused on usability and GUI-centered development. • We introduced UML use case diagrams as a means of documenting systems from an end user's perspective. • We also introduced sequence and state UML diagrams. c01.fm Page 30 Thursday, March 9, 2006 12:30 PM 2 Introduction to User Interface Design 11:26 AM 9 March 2006 c02.fm 1.0 The field of user interface design and human-computer interaction is complex and vast. It has many different contributors and perspectives, and still lacks a uniform descriptive language. It is fragmented into different approaches and practices, a fact that stems directly from the very nature of human-computer inter- action (HCI): the presence of the human component makes it impossible to develop an exact foundational theory. HCI, its derived design guidelines and criteria are thus based mainly on empirical evidence and practical principles. The term ‘HCI’ was adopted in the mid-1980s. HCI is an interdisciplinary practice that aims at improving the utility, usability, effectiveness and efficiency of interac- tive computer systems. SIGCHI, the special interest group in HCI, defined it as ‘a discipline concerned with the design, evaluation and implementation of interac- tive computing systems for human use and with the study of major phenomena surrounding them 1 .’ In this chapter we introduce some HCI concepts that are fundamental to the professional design of user interfaces. The chapter is structured as follows: 2.1, The human factor discusses the role of people in the design process. 2.2, Display organization introduces the esthetics of GUI design, and discusses ways in which an application can interact with its users. 2.3 , Interaction styles goes into more details about human-computer interaction, and presents the five major categories of human-computer interaction. 2.4, Conceptual frameworks for UI design describes a set of coherent concepts that structure the different phases of development of UIs, and which provide a reliable and proven mindset for organizing the design, thus reducing risks and improving quality. 2.5, Assessing the quality of a GUI describes ways in which testing of user interfaces can be conducted and its results collected. 1. Many disciplines contribute to HCI: computer science, cognitive psychology, ergonomics, social and organizational psychology, design, engineering, anthropology, sociology, philosophy and linguistics. Introduction to User Interface Design c02.fm Page 31 Thursday, March 9, 2006 11:27 AM 32 Introduction to User Interface Design 11:26 AM 9 March 2006 c02.fm 1.0 2.1 The human factor We begin our quick tour of HCI with end users and how they perform actions. A model of interactive systems – seven stages and two gulfs One of the simplest approaches to modeling interactive systems is to describe the various actions users go through when faced with the task of using an interactive system (Norman 1998). Users: 1. Form a goal 2. Form an intention 3. Specify an action 4. Execute the action 5. Perceive the system state 6. Interpret the system state 7. Evaluate the outcome The user first forms a conceptual intention from their goal – for example, deleting an item in the application shown in Figure 2.1 – then tries to adapt this intention to the functionality provided by the user interface. From these commands, as perceived by the user, they execute the action – for example by dragging an element in the tree to delete it, as Figure 2.1 shows. The user then tries to under- stand the outcomes of the action. This is particularly important in computer systems, where the inner workings are hidden and users have to guess the internal state from few artificial hints (Norman 1998). The last three stages listed above help the user to evolve their idea of the system. The entire interaction process is performed in such cycles of action and evaluation: by interpreting the outcome of their actions, the user refines their mental model of the system. Action and evaluation are often illustrated by means of the gulf metaphor, after (Hutchins et al. 1986): • The gulf of execution. This phrase describes the mismatch between a user’s intentions and the allowable actions: for example, a user might be used to removing items by dragging them into a wastebasket, but in some applications For simplicity we use the term ‘GUI’ as a general term to refer to any graphical user interface. In this chapter we distinguish between different classes of graphical user interfaces that are gathered under the common name of GUIs when applicable. c02.fm Page 32 Thursday, March 9, 2006 11:27 AM The human factor 33 11:26 AM 9 March 2006 c02.fm 1.0 items may be not draggable. Gulf of execution describes the practical difficulty of performing tasks with a GUI. • The gulf of evaluation . This phrase refers to the difference between a user’s expectations and the system’s representation. Referring to Figure 2.1, the user observes that even if an item can be dragged onto the wastebasket icon, the intended delete operation did not work, because the application displayed the message shown in Figure 2.2. Gulf of evaluation describes the difficulty users experience in evaluating the outcome of an action they perform with a GUI. The cognitive distance between two such worlds – the user’s and the software’s – corresponds to the potential mismatch between the way a person thinks about a task and the way it is represented in the GUI (Preece 1994). This mismatch, and the distance between the two gulfs, can be reduced by designing the user interface in a way that reduces the differences between the users’ goals and the GUI’s state and form. As an aside, messages such as that shown in Figure 2.2 are rather intrusive. A better choice would be to signal the error with a less intrusive form of feedback, such as changing the mouse pointer shape or producing a beep. Figure 2.1 The gulf of execution: execution mismatch c02.fm Page 33 Thursday, March 9, 2006 11:27 AM 34 Introduction to User Interface Design 11:26 AM 9 March 2006 c02.fm 1.0 Developers are part of the design process So far we have only described the user’s perspective of the GUI. We have not yet talked about the designers and the programmers who design the application, including the user interface. Just like end users, designers and programmers also have their own vision of an application. What for the end user might be an incom- prehensible command description, such as clear action stack, may be an ‘obvious’ choice for the programmer that implemented it. A graphical design inspired by some new award-winning product might represent an accolade for the designer, but a nightmare for the developer to implement and an awkward thing for an end user to work with. Many of the problems involved in creating effective user interfaces stem from the differences between the designer’s and the end user’s viewpoints. Designers can sometimes become so absorbed in their work that they lose focus and overlook the importance of the user's needs. Ideally, the designer is the mediator between users and developers. Unfortunately professional GUI designers are thin on the ground and often expensive to hire. Hence developers often fill the role of designers, especially in small and medium sized organizations. This creates a potential problem: such developers-turned- designers often adopt their habitual programmer’s mental model unconsciously, producing less usable GUIs as a result. On the other hand, fortunately, the effect Figure 2.2 The evaluation gulf: evaluation mismatch c02.fm Page 34 Thursday, March 9, 2006 11:27 AM The human factor 35 11:26 AM 9 March 2006 c02.fm 1.0 of good design is contagious. Design guidelines, which are often promoted by organizations that can afford a team of full-time professional designers, are slowly making their way in everyday software, not just that produced by large corporations. The refinement of a user’s model of an application is often distorted by accidental interaction, bad design or software bugs. Even developers themselves, as users of other software, sometimes struggle to understand the internal model of a buggy application. Suppose that a developer uses an application that shuts down unpre- dictably, corrupts data, or causes other serious trouble. They will of course try to bypass the internal states that cause such harmful behavior. To do that in the absence of implementation documentation, they must develop a mental model of the application’s inner workings. Computer programs, contrary to other types of technology, are both complex and inherently abstract. A mechanic can guess from the weird noise a car makes that it probably has a problem with its suspension, but even a seasoned developer cannot determine the actual implementation behind a GUI merely by using it. End users only have the direct experience of the GUI with which they are inter- acting, coupled with their previous knowledge, to work out what is going on inside an application. Humans need semantic models to enable them interact with the world sanely, and always build such models, even unconsciously. Users act like the early philosophers, trying to make sense of an incomprehensible world using only their current and past experience – it is common to hear them explaining how an application works in their own terms. As personal computers have been around for decades, many people are accustomed to concepts such as files, databases and mouse gestures 2 . In some ways this is a problem – ideally we should be able to use a complex device such as a car or a software application without having to be aware of its inner working, although a minimum coupling with the underlying technology is unavoidable. A professional GUI design should therefore start with an abstract model in the designer’s head. In addition, what might seem a natural choice for the designer can later reveal awkward details that are difficult to understand and to employ by users. It is important therefore for designers to adhere to a concep- tual model that is as close as possible to the prior knowledge of the intended end user population. 2. The term gesture in HCI denotes a single basic interaction performed by the user. Usually it refers to mouse-based systems in which sequences of gestures will make the software perform certain operations. Sequences of gestures can be organized in a specific syntax, such as ‘press right button-drag mouse-release right button.’ c02.fm Page 35 Thursday, March 9, 2006 11:27 AM 36 Introduction to User Interface Design 11:26 AM 9 March 2006 c02.fm 1.0 To recap, we have highlighted some important issues: • Software is abstract. Good user interfaces are those that communicate their internal state to users effectively, encouraging the seven-stage cognitive sequence described on page 32. In computer applications, the inner workings are hidden, and human beings have to figure out the internal state from few artificial hints. Such hints should be coherent, otherwise the GUI won’t be successful: it will be difficult to use, producing convoluted mental models that are hard to remember, inducing a negative response from users. Hence it is important to develop a sound conceptual model to stand behind the GUI. The basic concepts, visible items, their interaction, names and everything else should be carefully thought through at the design stage. • People use conceptual representations of reality based on their current and past experience. Consequently, different mental models of the same applica- tion exist in the minds of its designers, its developers and its end users. It is important for designers to be aware of the different mental models involved in the development and subsequent use of a user interface as a social artifact – something that will be used by more than one person. We mentioned that cognitive psychology was a contributing discipline to HCI. The next section discusses some simple cognitive models that underlie well- designed user interfaces. Short term memory and cognitive modeling We will now discuss some basic principles of cognitive modeling, and include some practical advice on their application to HCI design. In particular, we discuss briefly a useful – although rather crude – model of human memory, and some of its implications for interface design. In human beings, short-term memory (STM) is a limited form of memory that acts as a ‘buffer’ for new information, used to process perceptual input. Empirical studies have shown that humans usually have an STM capacity of between five and nine items. Such items can be single objects or coherent chunks of informa- tion. The size of non-atomic pieces of information that can be stored in STM depends on the individual’s familiarity with the subject, but usually the informa- tion survives no longer than 15–30 seconds. You can try this for yourself: it is relatively easy to remember seven random colors, but it is not easy to remember seven Spanish words unless you speak Spanish – not to mention seven Urdu words. STM is very volatile. Distractions, external ‘infor- mation noise’ or other interrupting tasks quickly disrupt its contents. The other type of memory is long-term memory (LTM), more stable and with far greater capacity, but with slower access than STM. A major problem with LTM is c02.fm Page 36 Thursday, March 9, 2006 11:27 AM The human factor 37 11:26 AM 9 March 2006 c02.fm 1.0 the difficulty of the retrieval phase. Many of us use mnemonic aids to access LTM, such as mental associations for remembering a personal code or password. STM influences the efficiency of an HCI interaction. Interactions that can be processed using only STM are easier and faster to accomplish than those that require LTM or some external cognitive help. Complex interactions are made more difficult by the need to maintain a data context throughout the whole process, using working memory and STM. GUIs should be designed as much as possible to let users work with STM, but this kind of memory has its own limits as well. To illustrate these ideas, here is an example of the pitfalls of placing excessive trust in STM. An example of STM misuse Our example GUI here is designed to allow users to reserve a train seat. It is orga- nized as a sequence of dialog in which only partial information is shown at any one time. Such an interaction style is often referred to as a wizard, a term popular- ized by Microsoft’s extensive use of it. Our GUI has been designed only for this example, and is not intended to be an example of good user interface design – see for example our weird use of tabbed panes! In the first dialog we are asked for the basic details for our trip, as shown in Figure 2.3. After some input, such as reserving a window seat, food options and so on, we are presented a reservation code, as shown in Figure 2.4. This is meant to help the user to choose between different reservations. Users can remember this sort of code for varying times. A recap screen is then presented, and the user is asked to choose one reservation, prompting for the data of choice (as shown in Figure 2.5). Figure 2.3 An example of excessive STM burden: entering some data c02.fm Page 37 Thursday, March 9, 2006 11:27 AM [...]... high-quality user interfaces, and we discuss it in Chapter 5 6 The concept of ‘users’ should also include those whose activity is affected by the software, such as system administrators, support staff, customers, etc We refer to these as stakeholders 11 :26 AM 9 March 20 06 c 02. fm 1.0 45 The human factor In the following sections we discuss the two major issues in user- centered design: users and tasks User analysis... detail of available user interface interaction styles in the next section 11 These areas are mapped directly to one or more Java classes to define the implementation criteria of our GUI 11 :26 AM 9 March 20 06 c 02. fm 1.0 57 Interaction styles Figure 2. 17 2. 3 Refinement relationships among areas Interaction styles It is possible to identify several basic interaction styles for user interfaces (Shneiderman... balance of both Interfaces that are either too cluttered, or too uncommunicative, are both hard to 11 :26 AM 9 March 20 06 c 02. fm 1.0 48 Introduction to User Interface Design use Figure 2. 9 shows an example of a design in which the high density strategy is predominant This interface has been designed mainly for expert users The limited information strategy is also used in the GUI in Figure 2. 9 – see the... to a few minutes Graphical user interfaces are all about the visual arrangement of information The next section moves the focus of our discussion from the human user to the computer, discussing the visual organization of graphical user interfaces 2. 2 Display organization The organization of the display is clearly one of the most important aspects of the design of a graphical user interface It can help... • Focus on minimizing end -user input actions 11 :26 AM 9 March 20 06 c 02. fm 1.0 60 Introduction to User Interface Design • Keep memory load on users as low as possible • Ensure compatibility of data entry with data display • Allow user flexibility and control of data entry These criteria closely resemble the general ones discussed previously (see Some general principles for user interface design on page... implementation viewpoint, because it can be implemented easily using Java 2 Standard Edition (J2SE) technology, rather than another client technology such as Web pages Direct manipulation is more difficult to implement on Java 2 Micro Edition (J2ME) devices, due to its limited pointing facilities and graphics display13 13 J2SE is the Java environment designed for desktop computers and laptops (those... approach known as user- centered design, in which users are central to both the early design process and to later testing and evaluation A user- centered technique known as participatory design stresses the active involvement of users throughout the design process, especially in the evaluation phase User- centered design focuses on three concepts: • Users Usually the following general user categories apply:... electronic form as drawings, diagrams, bundles of files, UML 2. 0 diagrams and so on, or in any other convenient way Areas can be visually nested inside other 11 :26 AM 9 March 20 06 c 02. fm 1.0 52 Introduction to User Interface Design areas, can be related to other areas, and documentation attached to them, such as requirements, documents, the implementation’s Java classes, and so on The need is to provide a pictorial... objects just to implement simple user interfaces 11 :26 AM 9 March 20 06 c 02. fm 1.0 41 The human factor independent variables that may cause unforeseen behavior On the other hand, allowing users to have a too much control could create GUIs that are too difficult or even dangerous to use When exposing too much detail that can be manipulated in a GUI, the risk arises that users could modify some valid data... of the tasks users want to achieve using the GUI, together with the information needed and the intermediate steps needed for completing them Task analysis is be performed by interviewing users and by observing the way they complete preset tasks For example, suppose we are designing a music manager applet for J2ME-enabled devices, such as that shown in Figure 2. 8 11 :26 AM 9 March 20 06 c 02. fm 1.0 46 Introduction . linguistics. Introduction to User Interface Design c 02. fm Page 31 Thursday, March 9, 20 06 11 :27 AM 32 Introduction to User Interface Design 11 :26 AM 9 March 20 06 c 02. fm 1.0 2. 1 The human factor We. Figure 2. 5). Figure 2. 3 An example of excessive STM burden: entering some data c 02. fm Page 37 Thursday, March 9, 20 06 11 :27 AM 38 Introduction to User Interface Design 11 :26 AM 9 March 20 06 c 02. fm. fortunately, the effect Figure 2. 2 The evaluation gulf: evaluation mismatch c 02. fm Page 34 Thursday, March 9, 20 06 11 :27 AM The human factor 35 11 :26 AM 9 March 20 06 c 02. fm 1.0 of good design is