DAVID KROFELHCI 598X | IOWA STATE UNIVERSITY

SPRING 2013M4M I L E S T O N E F O U R

bikeBUILDER

2

CONTENTS

1. PROTOTYPING STRATEGY .................................................................................................................................... 3

1.1 High-Fidelity or Low-Fidelity .............................................................................................................................3

1.2 Prototype Fidelity Justification .........................................................................................................................3

2. PROTOTYPE DESCRIPTION................................................................................................................................... 4

2.1 Color Usage........................................................................................................................................................4

2.2 Supported Tasks ................................................................................................................................................42.2.1 Build Baseline & Management Center..................................................................................................52.2.2 Build Configuration & Information Center............................................................................................5

2.3 Unsupported Tasks ............................................................................................................................................52.3.1 Build Baseline & Management Center..................................................................................................52.3.2 Build Configuration & Information Center............................................................................................6

2.4 Prototype Screens .............................................................................................................................................62.4.1 Build Baseline & Management Center..................................................................................................62.4.2 Build Configuration & Information Center............................................................................................8

2.5 Prototype Web Link ..........................................................................................................................................9

2.5 Prototype Demonstration Video ....................................................................................................................10

3. REFLECTION ........................................................................................................................................................... 10

4. REFERENCES .......................................................................................................................................................... 11

3

1. PROTOTYPING STRATEGY

1.1 High-Fidelity or Low-FidelityPrototypes are a valuable tool that user interface designers rely on to identify usability problems in their designs. HCI researchers have conducted numerous studies in an effort to end the debate over which level of fidelity is best at revealing usability issues, however results from these studies have been mixed (Sauer & Sonderegger, 2009). For example, Nielsen’s (1990) study compared low-fidelity paper prototypes versus high-fidelity digital prototypes and concluded that prototype fidelity correlated to the severity of usability problems identified during user testing sessions (i.e. low fidelity prototypes exposed minor problems, whereas high-fidelity prototypes exposed major problems). In contrast to Nielsen’s findings, Walker et al (2002), amongst others, found that both low-fidelity prototypes and high-fidelity prototypes were equally effective at identifying usability problems.

The mixed results from these studies did no favor in helping me decide which level of prototyping fidelity would best suite my needs - a clear definition of each prototype fidelity was desperately needed. According to usabilitynow.com, a low-fidelity prototype is “sketchy and incomplete, has some characteristics of the target product but is otherwise simple” and a high-fidelity prototype is “quite close to the final product, with lots of detail and functionality. From a user testing point of view, a high-fidelity prototype is close enough to a final product to be able to examine usability questions in detail and make strong conclusions about how behavior will relate to use of the final product”. These definitions provided clarity in regards to the advantages and disadvantages of each level of fidelity and helped me decide which approach would be more beneficial in effectively evaluating BikeBuilder. As such, I decided to move forward with a high-fidelity prototype.

1.2 Prototype Fidelity JustificationEven before understanding the differences between low and high fidelity prototypes, I never considered creating a paper prototype. I didn’t feel that a paper prototype would allow for the level of interaction that is attainable using a digital high-fidelity prototype, at least not in a user-driven sense. Also, it is my understanding that paper prototypes are more useful earlier in the design process when trying to gather feedback on initial design concepts. At this stage of the project, I’ve settled on a design that addresses the needs of user-gathered requirements and needed a prototype that would help assess whether the interaction within the system is user-friendly and if any functionality has been mistakenly left out. In addition, since I had already worked with pencil and paper during the design phase (M3) of this project, I wanted to focus my efforts on a digital-based entity. This was especially important since a working digital prototype is required by the end of this project.

I had no desire to create a prototype that would entail the use of a facilitator to “act” as the system, as is seen in prototypes that rely on the wizard of oz technique to simulate system interaction/behavior. Instead, I chose to create a high-fidelity prototype because it could more closely resemble the final product and allow for a higher level of realism, interactivity, and responsiveness than a low-fidelity prototype could provide (Hartson & Pyla, 2012). In an April 4, 2012 blog post, Stephen Anderson, a UX thought leader and speaker, commented that there’s a concern within the UX community about those who have decided to forego creating wireframes altogether and have instead decided to create high-fidelity prototypes in their place. While Anderson admits that this sentiment may be seen as ignoring good UX practices, he believes that skipping wireframing and moving on to a fully-interactive prototype provides an opportunity for much better feedback and allows stakeholders to experience the design in a manner that more closely resembles the final product (Anderson, 2012). Although I have limited experience in the UX arena and don’t want to adopt bad practices early on, I find Anderson’s take on wireframing and prototyping fascinating. In fact, I’ve read elsewhere that wireframing is “dead” and is being replaced by rapid prototyping (“Wireframes are dead”, 2010).

4

2. PROTOTYPE DESCRIPTIONThe BikeBuilder prototype was built using Axure.

2.1 Color UsageThe BikeBuilder prototype is faithful to design sketches from M3 and contains a high level of interactivity. The visual design aspect of the prototype (namely color schemes) was given little attention during prototype development since I’m not interested in receiving feedback on color schemes from users during testing sessions. Although perceptions of system usability have been shown to be influenced by aesthetics (Tractinsky et al, 2000), I’m fairly confident that the predominantly grayscale color scheme used in my prototype shouldn’t negatively impact perceived usability. It should be noted however that the prototype is not completely devoid of color.

I felt it was important for buttons within the system to “do something” when the mouse cursor entered/hovered over a button. A rollover effect that shifted the button color from grayscale to color was used as a means to indicate to system evaluators that these buttons would perform a function when clicked on in the final product.

Several photographic elements in the prototype were also shown in color. Image placeholders were initially utilized wherever photographs would normally be seen in BikeBuilder, namely the Manufacturer’s Product Gallery and the Selected-Product Information Guide. Since BikeBuilder relies on heavy use of photographs within these segments of the system, the large blocks of placeholder images seemed to blur the content in these areas. In order to rectify this problem, full-color photographs were used instead in these two areas of the prototype to provide a more distinct separation of the products and the supporting content.

2.2 Supported TasksPlease see the demonstration video in section 2.6 for a full walk-through of the BikeBuilder prototype.

2.2.1 Build Baseline & Management CenterThis area of the prototype provides the following functionality:

• start a new build/name build

□ new build is transferred to Saved Builds list - choices from each baselining step are updated in the Saved Builds list as they are made

• choose type of bike

• choose type of suspension system

• choose wheel size

• option to step backward through all steps in the baseline choice process to revise previous decision(s) - Saved Builds list reflects changes

• user is provided the ability proceed to the next portion of the bike building process - choosing components in the Build Configuration & Information Center

2.2.2 Build Configuration & Information CenterThis area of the prototype provides the following functionality:

• expand the “FRAME” component category via mouse click to reveal available manufacturers

5

• select/deselect available frame manufacturers via checkboxes

□ ability to select/deselect all frame manufacturers with a single mouse click (via “select all” checkbox)

• Current product offerings from Niner are available in the Manufacturer’s Product Gallery

• browse product offerings based on selection of manufacturers’ checkboxes

• select a frame product to explore in depth in the Selected-Product Information Guide

□ browse three areas of detailed frame information - Overview, Detailed Specifications, and Reviews

□ browse the frame’s photo gallery - two options provided

▪ standard-sized images located within the Selected-Product Information Guide

▪ enlarged images via a screen overlay

• choose frame size

• choose frame color

• add frame with options to the Current Build Summary in the Build Information Panel

• Build progress indicator reactive to choices

• ability to remove a chosen component from the Current Build Summary

• “FORKS” component category expandable via mouse click

□ choices are non-functional within the expanded category

□ category only expands to exhibit how the user would proceed after completing their frame choice

2.3 Unsupported TasksSeveral tasks are unsupported in the prototype as many of them are features that are not core functions of the system. These include the searchable Knowledge Base, the Fit System, the Ask Question form, and the Saved Builds management system. These features were requested by users and were considered to be “nice to have”, but not absolutely vital. In fact, one could successfully complete a bike build in BikeBuilder and never even use these features.

2.3.1 Build Baseline & Management CenterUnsupported tasks include:

• Fit System link is inactive

• Knowledge Base searching is unavailable

• Ask Question link is inactive

• Saved Builds management is non-functioning - no previously saved builds are listed

• CANCEL and START OVER buttons are inactive

6

2.3.2 Build Configuration & Information CenterUnsupported tasks include:

• Fit System link is inactive

• Knowledge Base searching is unavailable

• Ask Question link is inactive

• START OVER link is inactive

• choosing single frame manufacturers other than Niner is not functional

• only the Niner RIP 9 frame can be chosen to reveal detailed information in the Selected-Product Information Guide

• full-review links are inactive (located within Reviews area)

• FORKS category doesn’t provide any real-world information

□ checkboxes do not function properly

• remaining component categories cannot be expanded to reveal manufacturers

• ADD BUILD TO SHOPPING CART button is inactive

• BROWSE SAVED BUILDS button is inactive

2.4 Prototype Screens

2.4.1 Build Baseline & Management CenterThe following screens are from the Build Baseline & Management Center found within BikeBuilder. They highlight the various stages of the baselining process.

Figure 1. Step 1 of the new build process requires the user to provide a name for their new build before the system will allow the user to proceed. After clicking on SUBMIT or hitting ENTER, a new entry containing the entered name appears in the Saved Builds list.

Figure 2. Step 2 of the new build process requires the user to choose the type of bike they wish to build. In the prototype, only the MOUNTAIN BIKE option is functional. After clicking on their bike choice, the “Type” description is updated in the new bike entry in the Saved Builds list.

7

Figure 3. Step 3 of the new build process requires the user to choose the type of suspension system for a

mountain bike - this option is only available when the STEP 2 choice was MOUNTAIN. After clicking on their

suspension system choice, the “Suspension” description is updated in the new bike entry in the Saved Builds list. If the user chose ROAD as their STEP 2 option, this step

would be their final step where they choose whether to CONTINUE, CANCEL, or START OVER. If they choose to continue, they will proceed to the Build Configuration

& Information Center of BikeBuilder.

Figure 4. Step 4 of the new build process requires the user to choose the wheel size for their mountain bike. After clicking on their wheel size choice, the “Wheel Size” description is updated in the new bike entry in the Saved Builds list.

Figure 5. Step 5 of the new build process is the final baselining step where the user must choose whether to CONTINUE, CANCEL, or START OVER. If the user chooses

to continue, they will proceed to the Build Configuration & Information Center of BikeBuilder.

8

2.4.2 Build Configuration & Information CenterThe following screens are from the Build Configuration & Information Center found within BikeBuilder. They highlight the process of choosing a bike frame and exhibit various other screens within this segment of BikeBuilder.

Figure 6. Initial state of the Build Configuration & Information Center after continuing from the Build Baseline & Management Center.

Figure 8. All frame manufacturers chosen. Correspond-ing products are displayed in the Manufacturer’s Prod-uct Gallery in the upper-center portion of the screen.

Figure 7. FRAMES category expanded to reveal frame manufacturers.

Figure 9. “Niner” selected in FRAMES component cat-egory list. Niner’s product offerings listed as full-color photos in the Manufacturer’s Product Gallery.

9

2.5 Prototype Web LinkThe BikeBuilder prototype is available for viewing online at the following link: http://share.axure.com/PAY9HO

Figure 10. Niner RIP 9 frame selected in the Manufacturer’s Product Gallery reveals additional product details in the Selected-Product Information Guide. The user may browse a photo gallery, a product overview section, detailed specifications, reviews, or choose their frame size and color.

Figure 11. Frame size and color have been selected in the pulldown menus. The user has chosen a Medi-um-sized Niner RIP 9 frame with the Hot Tamale color. This choice is seen in the Current Build Summary in the Build Information Panel (see red circle).

Figure 12. Large photo gallery overlay. Clicking on the “X” in the upper right corner or clicking outside the photo closes the gallery overlay.

Figure 13. After the user has chosen their frame, they will move on to choosing their bike’s fork. All compo-nent categories behave in the same manner - expand-ing them reveals available manufacturers.

10

2.6 Demonstration VideoThe demonstration video below provides a walk-through of the BikeBuilder prototype.

3. REFLECTION

My first experience creating a working prototype was in my HCI596 class during the spring of 2012. It was an exercise in frustration since I had no prior experience using prototyping software and had no access to any industry-standard prototyping tools. The HCI596 instructor suggested that we (the students) use a free prototyping tool called JustinMind to create our prototypes. I was aware of a few prototyping tools that were popular in the UX community, but had never heard of JustinMInd. My project partner and I forged ahead with JustinMind and quickly learned that the free version of this tool was severely lacking some vital features - no surprise here given that it was free.

Shortly after the spring 2012 semester ended I found out that Axure offered a free license for their protoyping tool to any student enrolled in an HCI program, provided they were in good academic standing. In all honesty, I feel my

11

HCI596 instructor should have known about this freebie from Axure before we entered the prototyping phase of our project, especially knowing that the entire class needed access to a full-featured protoyping tool. Although I had no immediate need for a protoyping tool, I applied for the free Axure license anyways. A few days later I received my license, but never got around to installing it until I needed it the most - for Milestone 4.

I thoroughly enjoyed creating my prototype using Axure. The software really impressed me and was surprisingly easy to learn. Axure provides a great set of tutorials on their website and even includes downloadable working files of their tutorials. This proved invaluable several times when I couldn’t figure out how to create an interaction that my prototype needed.

The prototyping process itself required me to examine the system in a deep manner which resulted in a higher level of understanding of the intricate details and interactions that had to be implemented in my prototype. After adding a new interactive element or function, I frequently generated the prototype to test the new feature. This process not only helped to identify implementation errors but more importantly identified areas where the user may run into trouble. For instance, if the user chose a frame and its options and added it to the Current Build Summary only to realize that they made an error, how would the system react when they removed the chosen frame from the Current Build Summary? I have to admit that I didn’t foresee every event like this. In fact, it wasn’t until I actually used the prototype while I was building it that these issues were brought to light. It’s easy to think forward through a system, but in the case of BikeBuilder a user needs to be able to step backwards if they change their mind regarding a previous choice - this was something that I thought I had addressed completely before I began prototyping.

In the end, I couldn’t imagine tackling any system design project in the future without involving prototyping. The process has made me gain a deeper understanding of my own product in a way that I didn’t think was possible. At times I’m in awe of the level of interaction that Axure has allowed me to inject into my prototype. I really enjoyed creating the interactive elements, so much so that I believe I may have overdeveloped an area or two in my prototype, particularly the photo gallery - it functions much more than is necessary to evaluate the system. Also, I feel that I’ve only scratched the surface of Axure’s capabilities and plan to explore the application much more. I knew all along that I would use Axure for this portion of the project, but without any “real” work to perform, it’s difficult to sit down and learn a new application - at least that’s the case for me.

4. REFERENCES

Anderson, S. (2012, April 4). The Pastry Box Project | 4 April 2012, by Stephen Anderson. The Pastry Box Project. Retrieved March 15, 2013, from http://the-pastry-box-project.net/stephen-anderson/2012-april-4/

Hartson, H. R., & Pyla, P. S. (2012). The UX book: Process and guidelines for ensuring a quality user experience. Waltham, MA: Morgan Kaufmann.

Nielsen, J., (1990). Paper versus computer implementations as mockup scenarios for heuristic evaluation. Proceedings of the IFIP TC13 Third International Conference on Human–Computer Interaction, August 27–31, 1990. North-Holland, Cambridge, UK. Amsterdam, pp. 315–320.

Sauer, J., Sonderegger, A., (2009). The influence of prototype fidelity and aesthetics of design in usability tests: effects on user behaviour, subjective evaluation and emotion. Applied Ergonomics (40), pp. 670–677.

12

Tractinsky, N., Shoval-Katz A. and Ikar, D. (2000). What is Beautiful is Usable, Interacting with Computers, 13(2), pp. 127-145.

Walker, M., L. Takayama, L., Landay, J.A. (2002). High-fidelity or low-fidelity, paper or computer? Choosing attributes when testing web prototypes, Proceedings of the Human Factors and Ergonomics Society 46th Annual Meeting, September 29–October 4, 2002, Baltimore, USA, HFES, Santa Monica (2002), pp. 661–665.

Wireframes are dead, long live rapid prototyping – UX for the masses. (2010, November 18). UX for the masses – UX and usability articles. Retrieved March 15, 2013, from http://www.uxforthemasses.com/rapid-prototyping/

CONTENTS1. PROTOTYPING STRATEGY1.1 High-Fidelity or Low-Fidelity1.2 Prototype Fidelity Justification

2. PROTOTYPE DESCRIPTION2.1 Color Usage2.2 Supported Tasks2.2.1 Build Baseline & Management Center2.2.2 Build Configuration & Information Center

2.3 Unsupported Tasks2.3.1 Build Baseline & Management Center2.3.2 Build Configuration & Information Center

2.4 Prototype Screens2.4.1 Build Baseline & Management Center2.4.2 Build Configuration & Information Center

2.5 Prototype Web Link2.6 Demonstration Video3. REFLECTION4. REFERENCES