Download to read offline
![UX Importance [ external ref : Joy Of UX]
• How did Apple become the most valuable company ever seen on the face of
the planet? By turning out great UX, for which its customers pay premium prices.
That's how important UX has become.
• UX is critical to the enterprise sector as well. In December of 2014, Avon had to kill
a new version of its order management software. The Wall Street Journal reported
that the company’s sales force of independent reps “found the new system so
burdensome and disruptive to their daily routine that many left Avon.”
• IBM recently announced that it was spending $100 million on its UX consulting
business, opening ten new labs worldwide and hiring 1,000 new workers.](https://image.slidesharecdn.com/4daswlbjqned20yidqxr-signature-d74541c2928a9d9454b6975e4f68dd4b7acedf826e18e1c7d7c8d1bf0333514d-poli-180629131327/85/Ux-prototyping-4-320.jpg)
![UX Importance [ external ref : Joy Of UX]
• How did Apple become the most valuable company ever seen on the face of
the planet? By turning out great UX, for which its customers pay premium prices.
That's how important UX has become.
• UX is critical to the enterprise sector as well. In December of 2014, Avon had to kill
a new version of its order management software. The Wall Street Journal reported
that the company’s sales force of independent reps “found the new system so
burdensome and disruptive to their daily routine that many left Avon.”
• IBM recently announced that it was spending $100 million on its UX consulting
business, opening ten new labs worldwide and hiring 1,000 new workers.](https://image.slidesharecdn.com/4daswlbjqned20yidqxr-signature-d74541c2928a9d9454b6975e4f68dd4b7acedf826e18e1c7d7c8d1bf0333514d-poli-180629131327/75/Ux-prototyping-4-2048.jpg)
Uploaded byMohammed Abdallah
Ux prototyping
This literature review discusses the importance of user experience (UX) in design, highlighting its role in both consumer and enterprise sectors, with examples like Apple's success and Avon’s software failure. It emphasizes various prototyping methods and their significance in the design process, noting classifications such as low-fidelity, high-fidelity, and mixed-fidelity prototypes. The review concludes that iterative design and user involvement are essential for effective human-centered design, as prototyping fosters a better understanding of user needs and aids in decision-making.
Ux prototyping
- 1. USER EXPERIENCE PROTOTYPING – ALITERATURE REVIEW Based on :Tuomas Nissinen ,Bachelor’s Thesis 15.4.2015 University of Oulu Department of Information Processing Science
- 2. What is UX? •The notion of UX has been commonly accepted in the field of HCI, although an established definition has been lacking (Law, Roto, Hassenzahl, Vermeeren & Kort, 2009). Law et al. (2009) propose the scope of UX to cover ’products, systems, services, and objects that a person interacts with through a user interface’. • The International Organization for Standardization (2010) defines UX in a similar style, stating it as ’person's perceptions and responses resulting from the use and/or anticipated use of a product, system or service’.
- 4. UX Importance [external ref : Joy Of UX] • How did Apple become the most valuable company ever seen on the face of the planet? By turning out great UX, for which its customers pay premium prices. That's how important UX has become. • UX is critical to the enterprise sector as well. In December of 2014, Avon had to kill a new version of its order management software. The Wall Street Journal reported that the company’s sales force of independent reps “found the new system so burdensome and disruptive to their daily routine that many left Avon.” • IBM recently announced that it was spending $100 million on its UX consulting business, opening ten new labs worldwide and hiring 1,000 new workers.
- 5. User experience design •Most of the interaction that contributes to user experience is conducted via user interface (UI) (Law et al., 2009). • Nonetheless the design of user experience involves more than just the UI design. The complexity of how user experience takes shape creates various possibilities for the product design. • Rather than actually design a user experience it is possible to influence the experiences users have (Cooper, Reimann & Cronin, 2007) or take experiential aspects into account that contribute to a positive user experience (Hassenzahl & Tractinsky, 2006).
- 6. Human-centered design • ISO(2010) states that use of the human-centered design approach improves user experience. ISO (2010) framework for human centered design and it’s six key principles: • The design is based upon an explicit understanding of users, tasks and environments • Users are involved throughout design and development • The design is driven and refined by user-centered evaluation • The process is iterative The design addresses the whole user experience • The design team includes multidisciplinary skills and perspectives
- 7. Prototypes and Prototyping •The rationale for prototyping :The role and importance of prototypes is broadly studied in the field of HCI. ISO (2010) defines a prototype in interactive systems as ’representation of all or part of an interactive system, that, although limited in some way, can be used for analysis, design and evaluation’.
- 8. Con... • Previous literaturenotes prototyping to bring benefits especially in certain design activities: 1) revealing and understanding user needs and context, 2) exploration and evaluation of design ideas and 3) communicating design decisions. (Buchenau & Suri, 2000), (ISO, 2010), (Lim, Stolterman & Tenenberg, 2008), (McCurdy, Connors, Pyrzak, Kanefsky & Vera, 2006) and (Rudd, Stern & Isensee, 1996).
- 9. Con... • Lim etal. (2008) propose a framework for conceptualizing prototypes.They argue that prototypes have two fundamental aspects: 1) filters for exploring a design space to support final design decisions and 2) manifestations of design ideas. • Prototype’s strength lies in its incompleteness. An incomplete prototype reveals certain qualities of the design idea and at the same time acts as a filter. • It filters the qualities the designer is interested in at that certain point of the design process. • The use of the filtering qualities of prototypes helps designers to explore complex design spaces one aspect at a time.
- 10. Con... • Manifesting acertain aspect of a design requires the designer to consider the prototype’s material, the resolution of detail and the scope of the prototype. • A designer can determine the manifestation dimensions by what Lim et al. call the economic principle of prototyping: "the best prototype is the one that, in the simplest and most efficient way, makes the possibilities and limitations of a design idea visible and measurable". A set of filtering dimensions is presented inTable 1. The manifestation dimensions and variables are presented inTable 2.
- 11. Table 1. Examplevariables of filtering dimensions (Lim et al., 2008, p. 7). Filtering Dimension ExampleVariables Appearance Size, color, shape, margin, form, weight, texture, proportion, hardness, transparency, gradation, haptic, sound Data Data size, data type, data use, privacy type, hierarchy, organization Functionality System function, users’ functionality need Interactivity Input behavior, feedback behavior, information behavior Spatial structure Arrangement of interface or information elements, relationships among interface or information elements – which can be either two- or three-dimensional, intangible or tangible, or mixed
- 12. Table 2.The definitionand variables of manifestation dimensions (Lim et al., 2008, p. 7). Manifestation Dimension Definition ExampleVariables Material Medium (either visible or invisible) used to form a prototype Physical media, e.g., paper, wood, and plastic; tools for manipulating physical matters, e.g., knife, scissors, pen, and sandpaper; computational prototyping tools, e.g., Macromedia Flash andVisual Basic; physical computing tools, available existing artifacts, e.g., a beeper to simulate an heart attack Resolution Level of detail or sophistication of what is manifested (corresponding to fidelity)Accuracy of
- 13. Table 2. (Continued). ManifestationDimension Definition ExampleVariables Resolution Level of detail or sophistication of what is manifested (corresponding to fidelity) Accuracy of performance, e.g., feedback time responding to an input by a user—giving user feedback in a paper prototype is slower than in a computer based one); appearance details; interactivity details; realistic versus faked data Scope Range of what is covered to be manifested Level of contextualization, e.g., website color scheme testing with only color scheme charts or color schemes placed in a website layout structure; book search navigation usability testing with only the book search related interface or the whole navigation interface
- 14. Prototype fidelity • Theconcept of fidelity denotes the similarity of a prototype and the final product. • Based on refinement, prototypes are usually classified as low-fidelity or high- fidelity. (Rudd et al., 1996). • To extend this duality and better describe more recent prototyping approaches, classifications of mixed-fidelity (McCurdy et al., 2006) and a multi-fidelity (Coyette, Kieffer &Vanderdonckt, 2007) are proposed.
- 15. Low-fidelity prototypes • Low-fidelityprototypes portray design alternatives, concepts and screen layouts rather than describing a systems functionality in detail. • Lo-fi prototyping is supposed to be rapid and occur early in the design process. A low-fidelity prototype implementation usually consists of a series of static layouts representing scenarios and flows. (Rudd et al., 1996). • The implementation can be either computer-based or paper-based (Sefelin, Tscheligi & Giller, 2003).
- 16. Con... • A commonlow-fidelity prototyping method is paper prototyping. Paper prototypes are usually hand-drawn sketches or simple wireframes of the user interface. User then interacts with the prototype with the help of a human facilitator (Rettig, 1994) • Low-fidelity prototyping methods have gained a great deal of positive attention for validating designs and uncovering requirements with extremely low cost early in the design process (McCurdy et al., 2006).
- 17. Table 3. Advantagesand disadvantages of low-fidelity prototypes (Rudd et al., 1996, p. 80) Advantages Disadvantages Low-Fidelity Prototypes Lower development cost. Evaluate multiple design concepts. Useful communication device. Address screen layout issues. Useful for identifying market requirements. Proof-of- concept Limited error checking. Poor detailed specification to code to. Facilitator-driven. Limited utility after requirements established. Limited usefulness for usability tests. Navigational and flow limitations.
- 18. High-fidelity prototypes • High-fidelityprototypes carry the complete functionality and interactive features of a service or a product. Users may not tell the difference between a high-fidelity prototype and a finished product. • On one hand, implementing a high-fidelity prototype is notably more expensive and time consuming compared to low-fidelity prototypes. • On the other hand, high-fidelity prototype can act as a living specification. • High-fidelity prototypes don’t necessarily reveal more usability problems in usability tests. Users are able to imagine how the final product would appear based on the lower fidelity prototypes. (Sauer, Seibel & Rüttinger, 2010).
- 19. Table 4. Advantagesand disadvantages of high-fidelity prototypes (Rudd et al., 1996, p. 80). Advantages Disadvantages High-Fidelity Prototypes Complete functionality. Fully interactive. User-driven. Clearly defines navigational scheme. Use for exploration and test Look and feel of final product. Serves as a living specification. Marketing and sales tool. More expensive to develop. Time-consuming to create. Inefficient for proof-of-concept designs. Not effective for requirements gathering.
- 20. Mixed-fidelity prototypes • Floyd(as cited in Rudd et al., 1996) recognized the need to develop vertical and horizontal prototypes.A vertical prototype has high-fidelity functionality but only to a limited extent. A horizontal prototype includes more extensive high-level functionality, but only a narrow lower-level implementation. • McCurdy et al. (2006) extend this thinking by proposing five independent dimensions for characterizing prototypes. Each dimension of a prototype can be implemented either low-fidelity or high-fidelity, y, which results in a mixed-fidelity prototype.The five dimensions are 1) level of visual refinement, 2) breadth of functionality, 3) depth of functionality, 4) richness of interactivity and 5) richness of data model.
- 21. Multi-fidelity prototypes &Experience prototyping • In the multi-fidelity prototyping approach a prototype includes elements of different fidelities. • The difference between multi-fidelity and mixed-fidelity is that in mixed fidelity only one fidelity is acted upon at a time and the fidelity level for an element can be always switched. (Coyette et al., 2007). • Experience prototyping highlights the experiential aspect of prototyping by allowing the users to directly and actively experience the prototype and thereby understand the existing or desired experience. • Rather than a methodology, experience prototyping is an attitude that highlights direct experience via low-fidelity approach. (Buchenau & Suri, 2000).
- 22. Prototyping tools • Therationale for prototyping tools : Grigoreanu, Fernandez, Inkpen & Robertson (2009) identify three main problems interactive application designers need tool support for: 1) creating the first version of the design, 2) iterating on it and 3) communicating it. • As prototypes in general, also the tools used to create them are categorized depending on their fidelity: low-fidelity, medium-fidelity and high-fidelity tools (Coyette et al., 2007).
- 23. Con... • Carter &Hundhausen (2010) present six classes for different types of prototyping tools: 1) art supplies, 2) graphics editing software, 3) presentation software, 4) HTML software, 5) programming language and 6) prototyping software. • Carter & Hundhausen (2010) noticed, that most of the designers use more than one prototyping tool within a project. Different tools are used for prototype creation and usability testing. Usually a this a case of using pen-and-paper to create the first designs 16 and then continue the prototyping in a computer- based tool to support usability testing with a more realistic user interface.
- 24. Table 5. Perceivedstrengths and weaknesses of prototyping tools for creating and evaluating prototypes (Carter & Hundhausen, 2010, p. 210-211). Tool Strengths Weaknesses Art supplies Quick to create Easy to create Easy to use Promotes creativity Facilitates discussionCan make quick changes Obtains good feedback Can’t model/test complex interactions Doesn’t look like end result Difficult to share/digitize Difficult to alter Users do not take prototypes seriously Doesn’t accurately represent product Graphics Editing Software Can create/test realistic interfaces Availability of premade widgets Easier to demonstrate to nontechnical staff Time consumingCan’t model/test complex interactions
- 25. Table 5 con... ToolsStrengths Weaknesses Presentation Software Easy to create Can create/test realistic interfaces Quick to create Allows for user interactions Can test user interaction Can’t model/test complex interactionsTime consuming Limited by toolset Cannot handle novel user input HTML Software Accurately models final product Can evolve into final product Obtains good feedback Time consuming Limited by toolset Cannot handle novel user input Programming Language Complete control over prototype Availability of premade widgets Can test realistic interfaces Can test complex interactions Time consuming High learning curve Difficult to create novel interfaces Generated code isn’t perfect Raises users’ expectations
- 26. Table 5 con... ToolsStrengths Weaknesses Prototyping Software Can create/test realistic interfaces Generates code automatically Generated code often needs to be modified to accommodate study
- 27. Examples of prototypingsoftware • In the last over 20 years there has been a good amount of academic research in the field of prototyping tools to provide custom tools that address designers’ needs. • However only a few practitioners seem to use these tools and continue using art supplies or software not intended for prototyping. • Still there is hope that custom computer-based prototyping tools will become the first choice for user experience designers (Carter & 17 Hundhausen, 2010). In this section three different prototyping software tools are briefly introduced.
- 28. SILK SILK (Sketching InterfacesLike Krazy) is an early computer-based sketching tool, which is based on the benefits on paper-based sketching and academic research. SILK allows designers to create interactive sketches and transform them into operational UI’s with a realistic look and feel (Figure 7). (Landay & Myers, 2001).
- 29. Balsamiq Mockups Balsamiq Mockupsis a tool with a low learning curve that promotes low-fidelity approach through sketching and a limited set of interactions. The tool enables designers 18 and other stakeholder to sketch simple wireframes and link them together.
- 30. Axure RP Axure RPis one of the most commonly used prototyping software (Carter & Hundhausen, 2010). The first version of Axure RP was released in 2003 and it is now considered a de facto tool among UX practitioners. It supports low and high-fidelity prototyping in terms of appearance and interactive behavior. There are also documentation and collaboration features to aid specification and teamwork . (Axure.com, 2015).
- 31. Conclusion • Iterative designand evaluation combined with user involvement seem to be fundamental in the human-centered design process. • Previous literature studied in this review points out prototyping to benefit UX design in many ways. • Prototyping provides a better understanding of user needs and context, allows designers to explore and evaluate design ideas and also communicate design decisions. • This validates the use of prototypes in UX design activities.