Chapter 7. Digital Interactive Prototypes
• Use digital interactive prototypes
• Create a digital interactive prototype with Excel
• Create a digital interactive prototype
About Digital Interactive Prototypes
A digital interactive prototype is an interactive wireframe that is quickly created and iterated using low-tech tools such as Excel, PowerPoint, or Visio. This chapter does not cover the form of digital interactive prototype that is coded or scripted and fully interactive, such as those created in Director, Flash, and so on. Digital interactive prototypes share a good deal in common with paper prototypes in that they can be very rapidly generated, allowing them to be used early in the software creation process. Like paper prototypes, interactive prototypes can be employed for early formative usability testing and stakeholder evaluations. Unlike paper prototypes, these interactive prototypes can range from a series of low-fidelity click-through screens for quick visualization of a design concept to a high-fidelity interactive prototype. Paper prototypes, in contrast, are generally lower fidelity.
An interactive prototype can have the look and feel of the final product. A user can click on a button or menu, and it can appear as though the button or menu is working. The perception of interaction is created by linking to another worksheet in Excel; the change is almost completely transparent to the user. This simulation of interactivity makes interactive prototyping uniquely useful for
• Understanding task flow and context of use by asking a user to directly interact with the prototype as though it were functioning software
• Validating assumptions in scenarios, requirements, and user profiles through its higher interaction fidelity
• Getting more detailed product feedback in usability testing than from paper prototyping, because the prototype has a more natural look and feel
• Getting feedback from remote stakeholders who cannot attend a face-to-face meeting
How Does an Interactive Prototype Work?
An interactive prototype is created from a storyboard scenario, task flow mappings, and a collection of roughed-out window or Web page designs. To simulate navigation and interaction as specified in a scenario and task flow, these designs are linked in sequence with hyperlinks to mimic a working system. In Excel you can apply interaction to text or graphics via hyperlinks and other techniques. You can also simply switch between worksheets using the worksheet tabs.
In Excel, the content of a digital prototype can be easily arranged, rearranged, and modified to allow rapid exploration and validation of design ideas. Because of this flexibility and malleability, interactive prototypes are especially useful during the early to middle stages of design, which are generally more exploratory in nature. Because these prototypes are rendered in interactive format, they are especially helpful for remote usability testing [2] [3], where test moderators and test participants are in separate geographic locations.
Welcome to Acme Ceramics, the online retail case study that will help you continue the journey to discovering the value and applicability of effective prototyping. Acme Ceramics is a case study we'll use to guide you through the steps of creating an Excel interactive prototype. Acme Ceramics is a company that's been around for four years. Its core business is selling ceramic dishware products on the Web. The company now wants to expand its market and customer reach by branching out into other household goods. A project team has been put together, including a product manager, a domain specialist, a creative writer, two designers, and three developers. In addition, Acme has external stakeholders in the form of venture capital investors.
Creating Interactive Prototypes with Excel
Excel's strong design layout support and precise grid alignment features make it useful for laying out the screens of an interactive prototype. After you have set up a prototyping template in Excel that meets your needs, you can quickly and easily create interactive prototypes with any mix of fidelities. Why would you choose Excel for interactive prototyping instead of another tool? Let's explore the reasons by using the Acme Ceramics redesign scenario as an example.
As described in the sidebar, the Acme Ceramics business model, branding, and Website are known quantities that need a “facelift and body tucks” to regain some of the customer base lost to competitors. Acme Ceramics has plans to add new products and expand its existing customer base. The team decided to develop digital interactive prototypes in Excel because it offers a complete prototyping environment that already exists and that can be reused and updated.
To begin the prototyping process, the team must update the graphics library with the new look, and introduce new controls and behaviors to the prototyping environment. Because the Excel prototyping environment is reusable, the team does not have to start from scratch.
Gathering and Verifying Requirements for the Prototype
Before starting any design and prototyping activity on the Acme Ceramics Website redesign, the design team must articulate its assumptions about the overall design concept before gathering requirements. The requirements can include business, functional, technical, and user requirements. Not all the requirements can be gathered at the beginning of the redesign project. The design team begins by gathering the ones that are readily available and then continues over time to gather more requirements as they become available and as their design evolves and progresses through iterations.
In the Acme Ceramics redesign, a substantial set of business requirements is available from the product management team in the form of a business requirements document (BRD). The BRD describes in detail these key requirements:
• A new branding scheme, including renaming Acme Ceramics to Arnosoft
• A new overall visual look based on the new branding scheme
• A new look and feel catering to the emerging Gen-X customer base
• A utility to collect marketing data about customers navigating to the site
The product marketing group also provides an updated functional requirements document (FRD) that articulates a new use case that requires the following functions:
• Site hit tracking data aggregation, tabulation (per market segment, geographic location, and navigation origin), and reporting
• Related products configurator
Meanwhile, the Website architecture team provides a technical requirements document (TRD) with the following requirements:
• Technical integration to support a third-party tool for hit tracking
• Business logic that supports the related products configurator
The user requirements are
• The new branding scheme and the new resulting look
• Improvements resulting from recent usability testing
• Other details of the user requirements will be articulated during iterations of design, prototyping, and prototype validation
Creating a Screen Flow Diagram
Before becoming too immersed in screen designs, create a screen flow diagram. The screen flow depicts the flow of tasks required for a user to successfully find and select a desired product or set of products, place them in a virtual shopping cart, and complete the transaction of placing an order (Figure 7.1).
Screen flow diagrams comprise miniature representations of screens, commonly called thumbnails, and interconnecting lines that illustrate the interaction flow paths. A screen flow diagram is useful when you're setting up the interaction and navigation schemes in your prototype. This screen flow will help you decide which parts of navigation and interaction should actually function in your prototype and which can remain static.
To create a screen flow diagram, begin by creating the thumbnail screen images using one of three methods:
• Hand-draw the screens on paper, scan them, and then reduce them digitally to a desired thumbnail size in a graphics editing tool.
• Create graphic representations of the different screens to a desired fidelity using a graphics editing tool; then reduce them to a thumbnail size.
• Create simple thumbnails in Excel using the drawing and text tools.
To Import Scanned Drawings or Graphics Created in Another Application:
1 From the Drawing toolbar, choose Insert Picture From File.
2 Browse to the location of the image file.
3 Click Insert.
The picture is then inserted into the prototype.
A drawback to using imported images is that you cannot easily modify them after they are imported into Excel. As described in Appendix A, you can scale, crop, and alter the look of imported images. To actually edit the image, you must use a graphics editing tool and then reimport. If you create thumbnail images in Excel, you can change them anytime you need to without having to use another application.
Create a thumbnail of an application window or Web page by adding shapes to a rectangle that represents a page or screen. If you have any pencil sketches or printouts from other apps, keep them on hand for reference. In this case, refer back to Figure 7.1.
To Create the Thumbnails in Excel:
1 Our first step is to draw the rectangle that will be the basis for the thumbnail. From the Drawing toolbar, choose AutoShapes > Basic Shapes.
From the Basic Shapes menu, you can choose from a number of shapes that should cover most of your needs for a simple design. Other menus, such as the Flowchart menu or Stars and Banners, offer more shapes. Choose More AutoShapes for a gallery of clip art images that you can use.
2 Select the Rectangle, as shown in Figure 7.2 (page 126).
3 Draw a rectangle that is 10 rows tall and about 20 columns wide, as shown in Figure 7.3.
4 To create the header of the thumbnail, choose AutoShapes > Basic Shapes > Rectangle again. Click and drag to draw a small narrow rectangle, as pictured in Figure 7.4.
5 To add text to the header, right-click the header rectangle and choose Edit Text (Figure 7.5).
6 Type in the text logo / navigation (Figure 7.6).
7 To create the product image placeholders (circles) choose AutoShapes > Basic Shapes > Circle. Holding down the Shift key, click and drag a small circle, as shown in Figure 7.7.
8 Repeat step 7 until you have six circles, as shown in Figure 7.8.
9 To add the squares that represent an area of descriptive text, choose AutoShapes > Basic Shapes > Rectangle. Holding down the Shift key, click and drag a small rectangle, as shown in Figure 7.9.
10 To shade the square to suggest that it is filled with text, right-click the box and choose Format AutoShape (Figure 7.10, page 130).
11 In the Format AutoShape dialog box, select a gray color for the Fill Color (Figure 7.11).
12 Repeat steps 9–11, or copy and paste, or duplicate the square so that two identical squares are added to the thumbnail.
13 To add the lighter text elements at the bottom of the screen, choose AutoShapes > Basic Shapes > Rectangle. Click and drag a small rectangle, as shown in Figure 7.12 (page 132).
14 To make this rectangle, which is a smaller piece of text, appear less heavy than the other elements, use Format AutoShapes to set the gray fill color, as you did in step 11.
15 Remove the line border by selecting No Line in the Line Color drop-down, as shown in Figure 7.13 (page 132).
16 Copy and paste the small rectangle at the bottom so that the final image is identical to Figure 7.14, (page 133).
In the example shown in Figure 7.1, all the boxes and graphics are AutoShapes that are positioned on the worksheet. The flow lines can be created using the Connectors, as shown in Chapter 6. In this case the lines are made by using the Arrow tool in the Drawing menu.
After you have finished the thumbnail, group together all the different elements within the thumbnail. Excel has a sophisticated grouping feature that makes it easy to work with groups. As you create this scenario, you might find yourself repositioning the thumbnails or copying and pasting them into other worksheets.
In this exercise you will learn how to group, ungroup, and regroup the graphic elements of a thumbnail using AutoShapes.
To Group Shapes:
2 With all the shapes highlighted, as shown in Figure 7.15, right-click the selection and choose Grouping > Group.
All the selected graphics will now act as one graphic.
Use grouping to ensure that all elements are scaled together and that no elements are left behind. You can use the Ungroup command to ungroup the graphics; each shape becomes an individual object again. This is particularly helpful when you need to edit an individual item in a group. Then you can use another useful feature, the Regroup command, to regroup the individual objects, as shown in Figure 7.16.
If you have ungrouped the graphics, you do not need to select the entire group again to regroup it. You can select one graphic from the original group, right-click it, and select Regroup. Excel remembers the prior grouping of graphics and will let you regroup everything again as before. This feature can be very helpful to keep your grouped shapes organized.
As you position the thumbnails for your screen flow, add text descriptions beneath them. How you add text depends on how long the descriptions are:
• If the descriptions are short, type the text into the cells below the thumbnails.
• If you find that you have a substantial amount of text, enter the text into graphics boxes by right-clicking and choosing Add Text.
An advantage to using the graphics shapes is that you can group them with the thumbnails, making it easier to keep the thumbnails and their descriptions connected.
Another way to use grouping is to make groups out of groups. After you have grouped the graphics and while the group is selected, highlight the text box and make a group of both. Now the text is grouped with the graphics and can easily be separated out for editing without having to ungroup the entire graphic.
A screen flow diagram built within an Excel template can be easily shared with others and can be modified or added to by others. The thumbnails can also be ultimately linked to the corresponding full-size screens of the prototype from which it is derived.
Creating an Interactive Prototype
Excel offers a level of interaction that is easy to implement and can be very powerful if used creatively. The two Excel features that enable the interaction are
• Hyperlinking of text and graphics
• Using the workbook tabs
Using these two features together, you can use Excel to mimic a level of interaction that illustrates user interaction from worksheet to worksheet as well as through a complex transaction process. You can show how a button might function or even enable entering text into an input box. You can use Excel to demonstrate interaction functionality to development teams and to test interactive features with users.
In the scenario for this chapter, the designer who is building the interface for Acme Ceramics wants to portray how a feature in the flow of Web pages will work. The feature, which appeals to Gen-X users, allows the user to view a product in different colors. The designer wants to demonstrate the use of the interactive color palette in the interface. The designer has mapped out the process in a screen flow diagram, but to really demonstrate to the team how this will look and feel, the designer will create a simple interaction in Excel. This requires only two worksheets in Excel.
A user requirement carried over from the existing Website is for the system to automatically present different accessories depending on the color and style of a product chosen by a user.
The two worksheets illustrated in Figure 7.17 and Figure 7.18 are identical in size and layout of the content, except
• The products are displayed in a different color.
• The color highlighted in the color selector palette is different.
• The accessories for each are different.
The designer can use graphics from the existing Website, but the designer could just as easily have used simple graphics created in Excel or found graphics from the Web to use for demonstration purposes. The two Web pages are in different worksheets in the same Excel workbook.
In this exercise you will create an interactive digital prototype using graphics and hyperlinked images.
To Create the Interactive Digital Prototype:
2 Select the Worksheet tab maroon plate.
3 Select the color selector graphic, which has the maroon color highlighted.
4 Right-click the color selector graphic and choose Hyperlink (Figure 7.19, page 138).
5 Click Place in This Document; then select ‘mustard plate.’
6 Click OK to create the link.
The mustard color on the color selector graphic of the maroon dishware worksheet is now a hyperlink to the mustard dishware worksheet. When hovering over the graphic, the cursor becomes a hand to indicate it is an active hyperlink. Clicking it instantly navigates the user to the mustard dishware worksheet from the maroon dishware worksheet. By adding a link on the mustard dishware worksheet that links the color selector graphic back to the maroon worksheet, you create an interaction that vividly demonstrates the functionality to the audience (Figure 7.20, page 138).
The Insert Hyperlink dialog box gives you a number of choices that highlight some more important features in Excel. For example, you can link to a different file if you want to link to a different Excel document or to any document that could be part of the design, such as a requirements document.
Linking to a Web page offers many opportunities. If your design is part of an existing site, being able to link to that site can show how the prototype might interact with existing Web pages. You can also make links to Web pages that contain support material or examples of similar functionality that you want to show to help bolster your ideas.
Creating a Drop-Down Menu in Excel
In this exercise you will mimic interface widget interaction and functionality by using hyperlinks together with graphic shapes.
The product manager feels that although it is nice to show two or three accessories, there are whole categories of accessories that need to be displayed in the finished coded site. In your next iteration you can try another approach to introducing the accessories by building a drop-down menu.
To implement a drop-down menu, you will create a series of interactive worksheets. The first worksheet will include the hyperlinked widget, which links to the second worksheet. The second worksheet will be a duplicate of the first, except with the drop-down menu added. Clicking the drop-down list on the first worksheet moves to the second worksheet, appearing to the user as though the menu opened when in reality the user simply moved from one worksheet to another. The third worksheet is a destination for one of the links in the drop-down menu, which is the Mustard Accessory worksheet mentioned at the beginning of the chapter. This interactive relationship among the worksheets will determine the way the links in the drop-down list should be created.
To Create a Drop-Down Menu:
1 Starting with the mustard dishware worksheet, copy it to create a duplicate worksheet and name it mustard dropdown1.
2 Copy the three accessories and their header, Accessories, to a new position to the right of the descriptive text and change the header font to bold.
4 Copy a down-arrow graphic from your image library worksheet and paste it into the header on the far right of See All Accessories, to serve as the widget that will reveal the drop-down menu when it's clicked (Figure 7.21).
5 Copy the worksheet mustard dropdown1 to create another mustard drop-down worksheet, which you will name mustard dropdown2 (Figure 7.22).
6 On this newly created worksheet, create a drop-down menu that will display the accessory list.
All the elements of this new worksheet, mustard dropdown2, must exactly align with all the elements of the worksheet mustard dropdown1 so that the added drop-down menu will be the only thing that will appear differently between the two. It is this single difference that makes it seem as though an actual coded drop-down menu has opened.
7 On the mustard dropdown2 worksheet, choose a rectangle AutoShape; then draw a rectangle that extends from the drop-down widget to the width of the header to look like the rectangle shown in Figure 7.22.
8 Right-click the newly created rectangle, choose Format AutoShape from the pop-up menu, and then select the desired line color, style, and weight to give the box a gray 1.75 point border.
9 Right-click the rectangle and add text, as shown in Figure 7.23 (page 142).
While typing in the product list items, you might notice that the box you created appears too wide and too deep for the list.
10 Reduce the size of the menu border rectangle by clicking it and then resizing it to the size of the drop-down menu, as shown in Figure 7.24 (page 142).
Because the menu box no longer covers the accessories, it makes sense to add a drop shadow to offset it from the surface of the worksheet.
11 To create a drop shadow, draw another rectangle over the box, but offset it by a few pixels equally to the right and down (Figure 7.25).
12 Right-click the drop-shadow rectangle that you just created and choose Format AutoShape from the pop-up menu. From the Format AutoShape dialog box, remove the rectangle's outline; then give the box a light gray fill tone (Figure 7.26).
13 With the drop-shadow rectangle still highlighted, right-click it again and choose Order > Send Backward (Figure 7.27, page 144).
This will place the drop-shadow rectangle behind the menu box rectangle. Do not use Send to Back, because the drop-shadow rectangle would be positioned too far behind other elements on the worksheet.
14 To ensure that the menu and drop-shadow rectangles stay together, select both boxes, right-click them, and select Group (Figure 7.28, page 144).
Now you can create the hyperlinks that will bring the interaction to life.
15 Right-click the down-arrow graphic in the worksheet mustard dropdown1 and choose Hyperlink. In the Insert Hyperlink dialog box, click Place in This Document; then select the Cell Reference ‘mustard dropdown2’ See Figure 7.29 (page 145).
16 On the mustard dropdown2 worksheet, highlight the drop-down box rectangle. Right-click, select Hyperlink, and click Place in This Document, but this time select the Cell Reference ‘mustard accessories,’ which is the destination. See Figure 7.30.
With these worksheets you created not only a sequential visualization of actions but an interactive experience that simulates the interaction behaviors that would occur if these worksheets were actually coded (Figure 7.31, page 146).
Conclusion
We cannot demonstrate in the static paper pages of this book the power of interaction, navigation, and their accompanying behaviors. When an audience first observes hyperlinking and the resulting interaction behavior in an Excel-based interactive prototype, they experience an epiphanical “Aha!” moment. We've observed them suddenly sitting up attentively in their seats. You can have your own “Aha!” moment by downloading this sample prototype from our complementary Website: http://www.effectiveprototyping.com/excel/interaction. On this Website you can also find other examples of interactive prototypes that demonstrate such interactions as
• Navigation menus opening and closing
• Interactive drop-down menus
• Interactive submenus
• Alphanumeric text entry boxes in a form
• Interactive graphical buttons
References
1. Jonathan, Arnowitz; Michael, Arent; Nevin, Berger, Effective Prototyping for Software Makers. (2007) Morgan Kaufmann, San Francisco.
2. Dabney, Gough; Holly, Phillips, Remote Online Usability Testing: Why, How, and When to Use It, http://www.boxesandarrows.com/view/remote_online_usability_testing_why_how_and_when_to_use_it#comments (April 26, 2008); accessed.
3. Nate, Bolt, Guide to Remote Usability Testing, http://www.ok-cancel.com/archives/article/2006/07/guide-to-remote-usability-testing.html (April 26, 2008); accessed.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.