User Experience Re-Mastered: Your Guide to Getting the Right Design 236 ITERATION 5: FROM PAPER PROTOTYPE TO CODED PROTOTYPE In the last stages of prototyping, many open design and technical questions can be answered. The required functionality, the audience, and the business case are already fi rm (see Fig. 7.10 ) and no longer the source of focus. Now, a high- fi delity prototype like the one shown in Fig. 7.11 is used to fi rm up the remain- ing requirements and design details. Paper Prototype Business Functional Audience User needs User needs Design Technical Development Assumptions Coded Prototype Business Functional Audience User needs Design Technical Development Requirements Assumptions Requirements 5 FIGURE 7.10 Late high-fi delity prototypes come closer to resembling a software product as well as the requirements. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 237 Verify Prototype Assumptions and Requirements CHAPTER 7 FIGURE 7.11 Late prototypes resemble the real software as the requirements become fi rmer, and more advanced prototype development can take place with greater confi dence. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. User Experience Re-Mastered: Your Guide to Getting the Right Design 238 ITERATION 6: FROM CODED PROTOTYPE TO SOFTWARE REQUIREMENTS In the last step, specifying the requirements from a late high-fi delity user-facing prototype (here in the form of a coded prototype) enables us to, fi nally, say that we have validated all the software requirements (see Fig. 7.12 ). The worksheet that was the basis for evaluating the prototype requirements could now almost double for a table of contents or central reference point for the software require- ments. So the journey from the interplay of assumptions and requirements is now complete with the fi nal product shown in Fig. 7.13 ready to ship; prototyp- ing has been the primary aid in validating assumptions and transforming them into requirements. Although, it is important to note that prototyping has been an aid, not the sole source of requirements validation, such as focus groups, usability testing, market research, and competitive analysis. Assumptions Coded Prototype Business Functional Audience User needs Design Technical Development Software Prototype Business Functional Audience User needs Design Technical Development Requirements Assumptions Requirements 6 FIGURE 7.12 Only at the end of the prototyping process do the assumptions fi nally give way to concrete data to base the software creation and development. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 239 Verify Prototype Assumptions and Requirements CHAPTER 7 SUMMARY We reviewed requirements setting for prototyping as the fi rst step toward collecting prototype content. We have seen that prototyping requirements try to come as close as necessary to the actual business, functional, technical, and usability requirements. However, a prototype also has the fl exibility to be based on assumptions. In fact, prototyping can be used to play with assumptions while being gradually turned into concrete validated requirements. For this validation, a worksheet template supports the three-step process: FIGURE 7.13 The fi nal end product for time entry at the end of the project. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. User Experience Re-Mastered: Your Guide to Getting the Right Design 240 Following this validation process and using the worksheet template, you can be assured that your prototype will address exactly the right assumptions and requirements your team judges to be important. The worksheet, with the priori- tization of requirements and assumptions, also helps others understand what they should and should not be looking for when reviewing your prototype. 3 STEP 2 STEP 1 STEP Gather • Requirements Inventory • Requirements • Assumptions Prioritize • Worksheet 3.1 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. PART 3 PART 3 Designing Your Site Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 243 C C HAPTER HAPTER 8 8 Designing for the Web Debbie Stone, Caroline Jarrett, Mark Woodroffe, and Shailey Minocha EDITOR’S COMMENTS In the user experience world, design guidelines are recommendations about the look and feel of Web sites and applications that product teams are asked to follow. Guidelines are often combined with standards to create a style guide. One of the most common requests of user experience designers is to develop a set of guidelines and create a style guide for the following purposes: Improve consistency within and across products or services. A common assump- ■ tion is that improved consistency will lead to better usability because users will learn an interaction style in one Web site and then leverage that learning across the other sites. Promote good design across the different product groups. A common scenario is ■ that senior managers at companies get complaints that different sites or applica- tions “look like they were built by different companies.” Then there is a mandate to improve consistency through a style guide. Capture design knowledge to help new designers learn about prior design deci- ■ sions when they join a group. Provide a common user interface language. Guidelines and style guides often ■ defi ne common labels and names for objects (for example, “radio button” versus “option button”). Improve reuse within the design and development groups. A common goal for style ■ guides is to reduce the cost of development by recommending common compo- nents and reducing the number of ways that teams do the same thing differently. Guidelines and style guides are not effective unless they are accompanied by a process for publicizing and ensuring compliance, a diffi cult process that requires support by all levels of management. Copyright © 2010 Elsevier, Inc. All rights Reserved. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. User Experience Re-Mastered: Your Guide to Getting the Right Design 244 This chapter provides core design principles and guidelines for the creation of Web site and detailed tips and examples on how to apply these principles and guidelines. INTRODUCTION Organizations and individuals around the world are developing Web sites. The good design of a Web site is essential for its success, as a user only needs to select the back button on the browser to leave the site – possibly never to return. Thus, as a designer, you need to create a site that is usable and useful, providing con- tent and functionality that are of value to your users. In this chapter, we look at fi ve aspects of Web design. Design principles for Web sites: These are based around the mnemonic ■ HOME-RUN, which stands for H igh-quality content, O ften updated, M inimal download time, E ase of use, R elevant to the user’s needs, U nique to the online medium, and N et-centric corporate culture. Designing Web sites: We consider how to structure a site so that it is easy ■ to navigate; users need to know where they are, where they have been, and where they can go. Designing home pages and interior pages: We consider the differing ■ requirements of the home page and interior pages. Design issues for Web pages: We look in more detail at a variety of issues, ■ including the layout of Web pages and designing for different screens and platforms. Writing the content of Web pages: In particular, we consider the inverted ■ pyramid writing method that is used by journalists. At the time of the dot-com boom around the end of the 1990s/early 2000s, the Web was changing so fast that it seemed almost impossible to offer advice to people who were designing Web sites because it might be out of date in a day or two. Now we see a slightly slower pace of change. On e-commerce sites in the United States in 1998, there was little consis- tency: for example, you would have had to click on “order list” ( http:// www.qvc.com ) or “shopping cart” ( http://www.amazon.com ) or hunt to a lower page ( http://www.gateway.com ) to see your purchases. Today, all these sites have a “shopping cart” linked directly from the home page – and most users expect to fi nd a shopping cart or shopping basket when they are buying things online. Now that the pace of change is less rapid, we hope that the advice in this chapter will be helpful for some time to come. In this chapter we include a progressive example based around the Web site for a hotel booking service. This only represents a single pass through the design process. In reality, you would iterate a number of times, involving the users throughout, using prototypes to check the developing design. We also include TIP For more details of HOME-RUN, see Nielsen (2000). Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 245 Designing for the Web CHAPTER 8 screen dumps from a variety of Web sites. These sites may have been redesigned if you visit them. This does not matter, as it is the design issues that count. THE LOVELY ROOMS HOTEL BOOKING SERVICE The Lovely Rooms hotel booking service is the example we have created for this chapter. You will fi nd some gaps in the specifi cation and you will need to make assumptions to fi ll the gaps. Domain The Lovely Rooms hotel booking service specializes in fi nding rooms in small, privately owned hotels in the East of England (Essex, Suffolk, Norfolk, Cambridge, Hertfordshire, and Bedfordshire). The hotel may be described as a bed and breakfast, an inn, or may be part of a pub, but we will call them all hotels for the moment. This is a semirural, somewhat old-fashioned part of England and the hotels are mostly in traditional buildings. Most of them only have two to fi ve rooms to let, and the hotel owners do all the work in the hotel themselves includ- ing all the cleaning and cooking as well as the fi nancial aspects and publicity. Users Lovely Rooms has identifi ed three target groups of users: Vacationers planning to visit the East of England from overseas who ■ want to fi nd a uniquely British experience that they cannot get through a standard chain hotel UK residents who are visiting the area for an occasion such as a wedding ■ or class reunion and want to take advantage of the lower rates offered by small hotels UK business travelers who are bored with the sameness of the big hotels ■ and want the more personal experience offered by a small, privately owned hotel All users will have a reasonable degree of computer literacy, otherwise they would not be surfi ng the Internet. However, they may be using the Internet in a relatively unsophisticated way, perhaps simply to fi nd the telephone number of a hotel in the right area. Tasks Lovely Rooms would like the Web site to provide various services for customers, including the following: Recommend a choice of three hotels geographically nearest to a location ■ specifi ed by the user that have availability for the nights required (“Find a lovely room”) Offer special rates and discount packages if the hotel chosen has one ■ available (“Special offers”) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]...246 User Experience Re-Mastered: Your Guide to Getting the Right Design ■ Allow the user to book the room online either through Lovely Rooms or by contacting the hotel’s own Web site directly (“Online booking”) Environment Because Lovely Rooms wants to appeal to busy business travelers, the booking service has specified that the site must be easy to use, even if the user is interrupted... Re-Mastered: Your Guide to Getting the Right Design Designing the Home Page Because it sets the scene for the whole site, the most challenging Web page to design is the home page The home page has two main functions: ■ ■ It tells the users where they are It tells the users what the site does How you achieve these functions varies greatly from site to site However, most sites include some, or all, of the following... connections or trying to connect from mobile devices Ease of Use Users need to be able to find the information or services they need quickly and easily Relevant to User s Needs In addition to having good content, your site must allow the users to carry out the tasks they want to perform For example, if a user is choosing a car, it should be easy to compare the features of different cars on the same screen... in general, tend to scan and skip when they are on the hunt for the material that interests them One reason for this is that users are often very busy, and there may be other sites that will meet their needs just as well Thus, users want to establish if your site is the right one for them as quickly as possible If it takes too long, then they may give up and move on The following guidelines will help... disclaimer near to any external links Some, especially blogs, make no mention of the move to another site but rely on branding of the target site to inform the user about the change Table 8.1 lists techniques for informing users that they are leaving your site and some of the advantages and disadvantages of each technique Helping the Users Navigate around the Site Three types of link allow the user to navigate... cannot use the Back button to return to the originating site Preserves the user s location in the originating site Putting a disclaimer near the external link Relying on branding of the destination site ■ ■ May disorient users who are using accessibility options such as screen readers or enlargers Doesn’t mess up the use of the Back button Some users may fail to see the disclaimer Warns users that they are... going to the external site but does not force them to locate a new window Text of the disclaimer takes up space Minimizes the disturbance to the user: the Back button continues to work and users do not have to locate a new window Users may not notice that the destination site has new branding or is from a different organization, so they may be confused about where they are Negative wording of the disclaimer... How the Web pages are structured in relation to the tasks the users want to carry out and the natural organization of the information How to tell users where they are How to help users navigate around the site Designing the Web Site Structure You are probably studying this book in a linear manner An alternative approach would be to study the book in a nonlinear manner, jumping around the text The concept... the user can opt to switch on the speakers If you need to include media that may take some time to download, it is courteous to warn your users, preferably telling them how long the download might take Your visitor can then make an informed decision about whether to select the link As Web site managers hope to get repeat visitors, it makes sense to ensure that pages are built up on the screen so that... about the acceptable cards earlier in the interaction Helping the Users Know Where They Are It is quite common for users to jump directly to a page within a Web site without passing through the home page How are they supposed to know where they are? The answer is that you have to tell them by clearly labeling each page The most common way of doing this is by including the organization’s logo in the top-left . User Experience Re-Mastered: Your Guide to Getting the Right Design 236 ITERATION 5: FROM PAPER PROTOTYPE TO CODED PROTOTYPE In the last. Re-Mastered: Your Guide to Getting the Right Design 246 Allow the user to book the room online either through Lovely Rooms or ■ by contacting the hotel’s