Designing the User Interface Chapter 08

Chapter 8 – Designing the User Interface Table of Contents  Chapter Overview  Learning Objectives  Notes on Opening Case and EOC Cases  Instructor's Notes (for each section) ◦ Key Terms ◦ Lecture notes ◦ Quick quizzes  Classroom Activities  Troubleshooting Tips  Discussion Questions Chapter Overview Recent advances in user interface design now consider the entire user experience as part of the design activity. It is not enough to simply consider the user interface, but the entire user experience is the important design issue. There are various metaphors of how a user accesses and interacts with an automated system. Considering these metaphors assists analysts to define and describe the user interface more effectively. Such metaphors as direct manipulation metaphor, desktop metaphor, document metaphor, and dialog metaphor all describe the user interface in slightly different terms and help in understanding and specifying an effective user interface. It is important in the detailed design of the user interface to consider good design principles. Such design principles as visibility, affordance, user shortcuts, feedback, closure, error messages, and reversal of actions are all important no matter what type of user interface is being designed. The judicial use of menus and navigation techniques also make the user interface more usable. Often the best way to organize menu items is to group menu items together by actor or user role. A powerful technique in the design of the user interface is to use storyboards. Storyboards are nothing more than a set of layouts that mimic the sequence of steps for a particular use case or user process. Special considerations are required for user interfaces that are accessed via the Web. Additional considerations are also needed for small mobile devices. The chapter concludes by explaining the principles and techniques that are important for the design of reports and other output information. Learning Objectives After reading this chapter, the student should be able to:  Explain the concepts of user experience, user interface, and usability  Describe the metaphors that can be used to assist in user-interface design  Describe important characteristics of human-interface objects that affect usability  Discuss the important principles of navigation through a software application  Explain how a storyboard can be used to help with user-interface design  Describe important guidelines in user-interface design for desktop applications  Describe important guidelines in user-interface design for mobile devices  Design printed and on-screen reports appropriate to users’ needs Notes on Opening Case and EOC Cases Opening Case Interface Design at Aviation Electronics: This case is recap of the development and deployment of a manufacturing support system. The case emphasizes the importance of the user experience and the need to both begin early on the design of the user interface and the importance of continual heavy user involvement. In the case the user/client was powerful enough to get the project manager replaced with one who would work extremely closely with the users to develop a total user experience. EOC Cases Video Rental System: In this case an interchange between a user and the system is presented in dialog format. The student is asked to develop a storyboard that encompasses that dialog. Community Board of Realtors (running case): Community Board of Realtors is a professional organization that supports real estate offices and agents. This case describes some of the requirements of being able to enter information for the use case Create new real estate listing on a mobile device. Constraints on the user input screen are that the mobile device will be small and that the entry of text is somewhat slower than with a keyboard. The student is asked to develop a storyboard of a possible interaction between the system, via a mobile device, and the user. On the Spot Courier Services (running case): On the Spot is a small, but growing, courier service that needs to track customers, package pickups, package deliveries, and delivery routes. There are two assignments for this case. First the student is asked to develop a simple storyboard of a single use case, Request package pickup. The student is also asked to be creative to design a user interface for the use case View scheduled pickups/deliveries using current technology and equipment. Spring Breaks 'R' Us Travel Services (SBRU) (running case): SBRU is an online travel services that books spring break trips to resorts for college students. This case introduces a new ancillary capability that might integrate with the SBRU system, particularly the chatting subsystem. As students activate the social networking subsystem application on their mobile devices, the resorts can use this information to monitor locations and message traffic of the students. This information can be used to increase security at the resort and help keep the student vacationers safe. The student is asked to be creative and develop a storyboard of security type of information that would be helpful to the resorts. Sandia Medical Devices (running case): Sandia Medical Devices is a company that specializes in medical monitoring through remote, mobile telecommunication devices. In this case, there is a need to transmit information between the remote glucose monitoring device and the base server. The students are asked to think about the design of a smartphone app that allows the patients to view their blood level information in a graphical form. It also would allow them to add their own comments to the data. There are a set of questions to help the students think about how various approaches to designing the user interface. The assignment is to sketch out a screen to show the data and which includes appropriate controls. Instructor's Notes Understanding the User Experience and the User Interface Key Terms • user experience (UX) – all aspects of a person’s interaction with a software application, including actions, responses, perceptions, and feelings • user interface (UI) – the set of inputs and outputs that the user interacts with to invoke the functions of an application • user-centered design – design techniques that embody the view that the user interface appears to be the entire system  usability – degree to which a system is easy to learn and use  human-computer interaction (HCI) – a field of study concerned with the efficiency and effectiveness of user interfaces vis-à-vis computer systems, human-oriented input and output technology, and psychological aspects of user interfaces  metaphors – analogies between features of the user interface and aspects of physical reality that users are familiar with  direct manipulation metaphor – metaphor in which objects on a display are manipulated to look like physical objects (pictures) or graphic symbols that represent them (icons)  desktop metaphor – metaphor in which the visual display is organized into distinct regions, with a large empty workspace in the middle and a collection of tool icons around the perimeter  document metaphor – metaphor in which data is visually represented as paper pages or forms  dialog metaphor – metaphor in which user and computer accomplish a task by engaging in a conversation or dialog via text, voice, or tools such as labeled buttons Lecture Notes The discussion on user interface design must include the entire user experience. The user experience is a broad concept that applies to all aspects of a person’s interaction with the system. The user interface, which is the set of inputs and outputs that the user sees and interacts with, must fit within this larger concept of the user experience. User interface design must consider all aspects of the user characteristics as well as the myriad devices that the user will interact with. Figure 8-1 illustrates many of the different elements that impact the user experience and which must be considered. Experienced developers recognize the importance of all aspects of the user interface and recommend using several techniques that place the user at the center of the development process. These techniques are referred to collectively as user-centered design. User-centered design techniques emphasize three principles:  Focus early on users and their work.  Evaluate designs to ensure usability.  Use iterative development. The early focus on users and their work is consistent with the approach to systems analysis in this text. User-oriented analysis and design tasks are performed as early as possible and are often given higher priority than other tasks. The goal of user-centered design is usability, the degree to which a system is easy to learn and use. Ease of learning and ease of use sometimes conflict. For example, a system can be easy to learn but be cumbersome to use all day. Usability is not always easy to achieve. The third principle of user-centered design is iterative development—that is, doing some analysis, then some design, then some implementation, and then repeating the processes. After each iteration, the project team evaluates the work on the system to date. Iterative development keeps the focus on the user by continually returning to the user requirements during each iteration and by evaluating the system after each iteration. User interface design is, in fact, included in a much larger field of Human Computer Interaction. This larger field focuses on all aspects of efficiency and effectiveness as humans utilize technology to perform their business tasks. Metaphors for Human-Computer Interaction (HCI) There are many ways to think about human-computer interaction, including metaphors or analogies. Each metaphor provides an analogy to a different HCI concept. Figure 8-2 is a summary chart. Direct manipulation: A metaphor of HCI in which the user interacts directly with objects on the display screen. The desktop metaphor is a direct manipulation approach in which the display screen includes an arrangement of common objects found on a desk. Document metaphor: A metaphor of HCI in which interaction with the computer involves browsing and entering data on electronic documents. Dialog metaphor: A metaphor of HCI in which interacting with the computer is much like carrying on a conversation or dialog. The user asks the computer for something, and the computer responds. The computer might then ask the user for something, and the user responds. The text provides an example that describes a manager and an assistant carrying on a conversation about messages (see Figure 8-4). This dialog would be basically the same if the manager were interacting with a computer that talked, or if the manager were interacting with a computer with menus and dialog boxes. Therefore, designing a natural sequence of interactions, like a dialog, will help ensure usability in a final physical design. Quick Quiz Q: Why is interface design referred to as dialog design? A: Interface design is often referred to as dialog design because the interaction between user and computer is much like a dialog. Q: Why are the three important principles emphasized by user-centered design? A: Focus early on users and their work; evaluate designs to ensure usability; use iterative development. Q: Why are the three metaphors used to describe human-computer interaction? A: Direct manipulation metaphor, document metaphor, and dialog metaphor. Fundamental Principles of User-Centered Design Key Terms  human-interface objects (HIOs) – icons and other objects on a screen that can be manipulated by the user and cause some action to occur  affordance – when the appearance of a specific control suggests its function visibility when a control is visible so that users know it is available, the control providing immediate feedback to indicate that it is responding to the user  tool tip – brief instructions that pop up when the mouse hovers over a control  visibility – when a control is visible so that users know it is available  feedback – some visual or audio response by the system in response to a user action  radio buttons – a group of selection items that allows only one item to be selected within the group  check boxes – a group of selection items that allows either none or many items to be selected within the group  continuity – maintaining a certain level of consistency over time, across multiple releases discoverability a feature of the user interface that provides clues to help the users uncover hidden features  active discovery – a user-interface feature to lead users to discover hidden features  breadcrumbs (navigation) – the technique of displaying the sequence of pages traversed to allow easy backing out to a previous page Lecture Notes Human Interface Objects Human interface objects are those objects that appear on a screen and that the user can manipulate or use to navigate. The concept of “affordance” means that the developer should use objects that reflect the function that they perform. Tool tips can assist the user as he/she looks for meaningful icons or hotspots on the screen. HIO’s should also provide visual feedback when they are activated. This feedback can be visual, such as a change it color or background color or highlight, or audio, such as a clicking noise. These two principles, affordance and visibility, are critical for all types of devices and user interface objects. Consistency One of the most troublesome approaches to design is a lack of consistency. When difference icons or HIOs are used to do the same operation, or when the same HIOs have unique operations, then users really get confused. There are several levels of consistency that are important. Consistency within a platform is achieved when all the same HIOs are used within the Windows platform or the Apple platform. For general purpose HIOs this is normal because those items, such as buttons, and arrows, etc. are provided by the platform developer. Consistence across platforms, i.e. Windows and Apple, is harder. Some HIOs have consistent use, but not all do. Consistency within a suite of applications means that the set of related programs all have the same look-and-feel, and use the same HIOs. A common example is Microsoft Office Suite. Most general purpose suites have gone this way, but designers should be sure they do the same. Consistency within an application means that the various screens all use the same HIOs to do the same functions. This principle is frequently violated. Continuity is slightly different than consistency. It means that the various versions of the same system that are released to production over time also use the same HIOs. This is not always possible, due to new functionality being added. However, as much as possible is should be an accepted principle. Discoverability Discoverability is the principle that it should be easy for the user to find and figure out the operations and features on a screen. Sometimes we say, is this application “intuitive” – meaning is it easy to figure out what to do. Active Discovery is simply the principle that the designer will include these kinds of clues by design and not simply let the user find the available functions by trial and error. Tool tips can help. Other clues might include change the mouse pointer, or hover actions such as changing color. Or have little pop-up images or textboxes that help the user discover the allowable functions. Visual diagrams are especially powerful. Closure Closure lets the user know that he/she has completed an operation. Visibility and feedback are important aspects of closure. When using a dialogue metaphor it is especially important to provide closure so that the user knows the job is complete. Dialogues often require several steps, which all must be completed. Another part of closure is that the user’s work should be saved or protected both during a dialogue, but especially at the end. That can be done either automatically, or by a specific reminder to the user. Undo capability should be provided so that the user can “back up” when necessary. Those systems that are most useable allow several undo steps so that users can reverse more than one action. Readability and Navigation System users come in all skill levels and ages. It is important to make the text readable by type, size, and color. Some systems allow the user to adjust these properties. Sometimes designers will try to be too fancy and end up with text that is very difficult to read. Navigation through the entire application should be obvious and easily traversed. And reversal of navigation, in addition to reversal of actions, should also be provided. One common technique is called breadcrumbs, which shows the hierarchy of screens that were traversed to arrive at the current location. Making them hotspots allows the user to return to previous locations quickly and easily. Usability and Efficiency Usability and efficiency are overall principles which simply mean that designers should always be thinking about how to make the application easy to use. One powerful technique, particularly for power users, is to provide shortcut keys to the most used functions. Error messages should be written so that they are clear and indicate not only what is in error, but how to fix it. Finally, the KISS (Keep It Simple Stupid) is a good design principle. Designers should always be thinking how to make the interface, the operations, the navigation, the instructions, and so forth easy to find, easy to navigate, easy to understand, and easy to use. Simpler is always better. Quick Quiz Q: What are human interface objects? A: HIOs are all those objects that are viewable on the screen that the user can manipulate or that cause some action to occur. Q: What does affordance mean? Give an example. A: It means an icon on a screen resembles or looks like the function that it performs. For example the media player controls look like the controls on a CD/DVD player. Q: What does visibility mean? Give an example. A: It means that the control on a screen should be easily visible, and it should provide feedback when it is activated. An example is a button the indents or changes color when it is clicked. Q: What does consistency mean? What are some levels of consistency? A: Consistency is using the same HIOs to perform the same actions. Consistency can be across platforms, across all the applications of a suite of apps, and within a single application. Q: List three or four other important considerations in user interface design. A: Discoverability, Closure, Readability, Undo, Navigation reversibility, Error Messages The Transition from Analysis to User-Interface Design Key Terms  storyboarding – sequence of sketches of the display screen during a dialog Lecture Notes Use cases that require direct user interaction (i.e., interactive use cases) are the starting point for a dialog, and the corresponding use case, activity, and system sequence diagrams are the initial dialog documentation. Use Cases and the Menu Hierarchy Menus are a way of grouping large numbers of related use cases or dialogs within a user interface. In all but the smallest systems, menus are needed to present the user with a tractable number of choices per screen, to group related functions together so users can more easily locate them. A designer must decide which use cases and user interfaces to include in which menus, which menus are required, and how many menu levels are required. Menus usually contain five or so choices in order to avoid overloading the user. Multiple levels of menus helps to keep the number of individual menu items at a workable number. Use cases with common actors and event decomposition or that implement CRUD actions for a specific domain class are good candidates to be grouped into a single menu or related group of menus. See Figure 8-15. Analysis Models and Input Forms Some of the models developed during the analysis activities are useful inputs to designing input forms. For example, an SSD shows the flow of information across the system boundary. Every time information flows across the boundary, some type of user interface document is needed. Activity diagrams also can show where interactions occur between the user and the system. All of these points in the diagrams are candidates for an input or output screen or some other type of user interface. Dialogs and Storyboards After identifying all required dialogs, the designers must document the dialogs. One approach is to list the key steps followed for the dialog with a written description of what the user and computer do at each step. Designers can also document dialog designs by writing out how the user and system might interact if they were two people engaged in conversation. There are many possible implementations of a dialog scenario. Before deciding on a specific implementation, an analyst often uses a technique called storyboarding—that is, showing a sequence of sketches of the display screen during a dialog. The sketches don’t have to be very detailed to show the basic design concept. Figure 7-7 shows a detailed storyboard example. Quick Quiz Q: What is the purpose of having menus in a user interface? A: Menus are a way of organizing the functions on the user interface to allow the user to organize his/her work and to more easily find the desired functions. Q: What is storyboarding? A: Storyboarding is a technique used to document dialog designs by showing a sequence of sketches of the display screen. Users (and programmers) can understand the basic idea of a dialog design using a simple sketch, and users are more apt to suggest design changes when looking at a sketch. Storyboards can also be implemented with prototyping tools. User-Interface Design Key Terms  text box – a rectangular box that accepts text typed on a keyboard or recognized from speech input  list box – a text box that contains a list of predefined data values  combo box – a text box that contains a predefined list of acceptable entries but permits the user to enter a new value when the list doesn’t contain the desired value  mobile responsive – designing Web sites so that the pages are responsive to being displayed on small, mobile devices  action bar – a common navigation bar with action controls used for smartphones and usually placed at the bottom of the screen Lecture Notes Three considerations in user design include, first whether the system will use custom screens or will be browser based and utilize html type forms. A second consideration is the types of devices that will be used to interact with the system. Displays range from large-format, flat-panel monitors used with desktop computers to much smaller displays on tablets and cell phones. As the range of user-interface technologies has increased, so has the need to create multiple user interfaces. A third consideration applies to the operating systems and platforms that must be supported. These alternatives include personal computers, tablets, smartphones, and so forth. There are also a wide range of operating systems on each type of device. These decisions affect what types of HIOs are available and how consistent the various displays can be. Desktop and Laptop User Interfaces Usually desktops and even many laptops have large display screen with large areas to place HIOs. In fact, many users have oversized monitors on their desks to facilitate viewing. However, careful consideration should still be given to screen design so that the purpose of the screen is obvious, and related objects are grouped together. One final consideration for all user interface design is to ensure that items are aligned perfectly, that there are no spelling mistakes, that labels are correct and well aligned, and so forth. Special care should be given to create data entry fields and forms that have easy to use controls, that tabbing between fields is correct, that the fonts are readable, and that fields are edited to reduce input errors. Considerations for Web-Based Applications Web-based applications rely on the Internet, so all the forms, as well as the data must transmitted over the Internet. With current bandwidths and speeds, images and even videos are sometimes sent. However, designers should always be aware that the larger the files sent, the longer the load times. Users who are doing productive work can be negatively impacted with long load times. Another important consideration is that browser based screens may be viewed on a variety of browsers. And these browsers have different display defaults that affect the look-and-feel of the screen. It is not uncommon for a screen to look nice in one browser, but be all messed up in a different browser. The layout and formatting of webpages must consider the various devices and platforms. Web based systems are especially subject to being viewed on various devices. One related decision on Web based screen layout is the impact of advertising on the screen. The use of advertising is ubiquitous and must be considered. Smartphones and Small Mobile Devices The industry is still learning how best to design for small mobile devices. Most apps are designed for a particular platform. One principle is that smartphones are used to view Web based applications. A Web application that is sensitive to smartphone use is said to be mobile responsive. Two considerations about smartphone app design are the very limited screen size, and the fact that all screens are touch sensitive (i.e. no mouse). Here are some important considerations: • Each screen should have a single focus or purpose. • Screens need both portrait- and landscape-view capabilities. • When appropriate, screens should be allowed to resize without losing screen controls. • Screen components should be directly touch-manipulated. • Visible navigation controls should be placed at the bottom of the screen. • Due to screen swiping, both horizontal and vertical scrolling is allowed. • Use small pop-up screens when additional information is needed. Data entry is also more difficult on small devices. Two particular issues are • Fat finger problem with the user hitting multiple objects or a nearby, but incorrect object. • Accidental touches. Sometimes the user accidently touches the screen with erroneous results. Navigation is also more difficult on small mobile devices. Some principles include: • Design the landing screen (first loading screen) so that it shows clearly how the app is organized and how to get to all the functions. Include a way to return to this screen on all other screens. • Design the user interface so that there are visual clues for where a task is located in the app. • Consider using an action bar at the bottom (or top) of every screen with common navigation or action controls. If the bar must be hidden, make it easy to find and show. • Remember that there is no mouse over capability, so such techniques as tool tips are not available. • Ensure a Back button capability exists, either on the device or as part of the application. Tablets Tablets are a little larger than small devices, but still require some of the same design principles. For example, tablets have touch screens, but do not have a keyboard or mouse. However, the larger screen can provide more area to add controls and data. Quick Quiz Q: What are three general considerations for designing of user interfaces? A: Whether the system uses custom built screens, or is browser based. What devices will it be used on. And what operating systems will be supported (i.e. what controls are available). Q: What are some issues with mobile devices for navigating through the application? A: Provide visual clues. Include some type of action bar (like a menu bar). There is no mouse over capability. Provide backup capability for accidental touches. Q: What are two data entry issues for mobile devices? A: Fat finger mistakes, and accidental touch mistakes. Q: What additional issues must be addressed when designing for the Web? A: Other issues include performance considerations due to the long transmit paths. The amount of data transmitted to a page, such as video, sound, and program logic affects the performance. Finally, since Web applications are available to everybody, consideration should be given to support for persons with disabilities. Designing Reports, Statements, and Turnaround Documents Key Terms There are four types of output reports commonly provided by an information system:  Detailed reports—These contain specific information on business transactions.  Summary reports—These are often used to recap periodic activity.  Exception reports—These provide details or summary information about transactions or operating results that fall outside of a predefined normal range of values.  Executive reports—These are used by high-level managers to assess overall organizational health and performance.  drill down – user-interface design technique that enables a user to select summary information and view supporting detail Electronic Reports: Organizations use various types of electronic reports, each serving a different purpose and each with its respective strengths and weaknesses. Electronic reports provide great flexibility in the organization and presentation of information. In some instances, screen output is formatted like a printed report but displayed electronically. However, electronic reports can also present information in many other formats. An important benefit of electronic reporting is that it is dynamic; it can change to meet the specific needs of a user in a particular situation. In fact, many systems provide powerful ad hoc reporting capabilities so users can design their own reports on the fly. One technique, called drill down, allows the user to activate a “hot spot hyperlink” on the report, which tells the system to display a lower-level report that provides more detailed information. Graphical and Multimedia Presentation: The graphical presentation of data is one of the greatest benefits of the information age. Tools that permit data to be presented in charts and graphs have made information reporting much more user friendly for printed and electronic formats. Information is being used more and more for strategic decision-making as businesspeople examine their data for trends and changes. Quick Quiz Q: What are four common types of reports? A: Detailed reports, summary reports, exception reports, and executive or management reports. Q: What is drill down? What kind of output utilizes drill down? A: Drill down is only available on electronic reports and provides capability to click on a value in a report and access additional detail or extended information about that value. Q: What is one of the most common uses for graphical information on a report? A: Graphical representation is especially powerful for presenting comparisons or trends. Classroom Activities Classroom activities can be divided into two areas of focus, desktop systems and web based systems. In each of those instances, a more passive type of activity would be to analyze several screens or forms based on the criteria given in the chapter. Most of today's desktop system conform to standards and are quite similar – particularly with regard to menus. However, there are many desktop systems that are deficient in such things as tool bars, shortcut keys, and help pages. Many do not have any contextual level help and other problems. It is an interesting activity to find some of those poor examples and ask class members to either try to do a task that is hard to do, or suggest how the problems might be improved. Web based systems have a much broader range of very bad designs to very good designs. PC World has a list of 25 worst websites. You, the teacher, can also find websites that are very unfriendly. Even some very popular websites are so filled with banner advertisements and “in your face” advertisements that they are offensive to some users. An interesting class activity is to observe and discuss some of these very bad sites. More active classroom activities would be to have student teams design some screens or pages and have them present their solutions to the class. This activity requires more preparation by both the students and the teacher. A short in class exercise, however, could be done in few minutes. Troubleshooting Tips The basic concepts in the chapter are not particularly difficult. The major issue in this chapter is that there is a lot of information and material to cover. User interface design, and system interface design, is not a complex topic, but it is very time consuming. Good interface screens and reports require a tremendous attention to detail and frequently many iterations with the user. The basic concepts taught in this chapter will help the student get started, but working with the user to actually develop screens, reports or Web pages is a demanding job. One area that students sometimes have problems is identifying the user interface based on the information available in system sequence diagrams and/or activity diagrams. A system sequence diagram is more oriented to individual input and output transactions, where the user interface requires many more concepts and considerations. We recommend that you walk through an example of starting with a use case, identify the messages on the system sequence diagram, and then show the final screens or web page layout. The data will be the same, but there will normally be many other items on the screen for beauty, consistency, navigation, and other usability issues. The other area that is new for the students is how to create a storyboard. In fact, that is part of the same problem – to take a single use case or message in a use case and expand it to cover various steps of validating input data, navigating around the screen, and finally submitting the data. Working through an example in class, and then allowing the students to also do an example goes a long way to help them be able to create storyboards. Several of the EOC cases require storyboards, so it would be a good idea to help them work through one in class. Discussion Questions 1. Design Standards and Creativity The definition of interface design standards states that “general principles and rules must be followed….” Do user interface design standards restrict creativity? Does adherence to a standard reduce productivity by causing each developer to change his or her approach to building systems? How easy or difficult is it to adhere to a documented standard? How can an organization’s adherence to standards be improved? 2. Internationalization What is the impact of internationalization on user interface design? If you know that your software will be used in Europe or Japan, what is a source of standards that can be used to support international software development? How can software development kits (SDKs) be used to assist with this effort? 3. Usability Testing Usability testing is a key part of the design process and typically involves a wide range of techniques and investment resources. Using the dialog design for RMO phone-order representatives, how would you recommend that usability testing be conducted? How would you recommend that usability testing be handled for the dialog design for the RMO Web site? Should usability testing for both dialog designs be handled in the same fashion, or are different approaches needed for each dialog design?