Multimedia Specification Design and Production

1. Multimedia Specification Design and Production 2012 / Semester 2 / week 6 Lecturer: Dr. Nikos Gazepidis gazepidis@ist.edu.gr

2. Prototyping • Learning outcomes • What is Prototyping • Horizontal prototypes • Vertical prototypes • Low fidelity prototypes • High fidelity prototypes 2

3. Prototyping • Prototypes • Production of an intermediary product to be used as a basis for testing • Aim is to save on time and money • Aim is to have something that can be tested with real users A prototype is:an experimental, incomplete design used to test design ideas; a limited representation of a design which allows users to interact with it and to explore its suitability. 3

4. Prototyping Prototypes Different Features Scenario Horizontal Prototype Functionality Vertical Prototype Full System 4

5. Prototyping Horizontal vs Vertical Prototyping 5

6. Prototyping • Prototypes (cont.)A prototype may be low-fidelity or high-fidelity: • anything from paper-based sketches of a screen or set of screens, • storyboards, • scenarios, • to early software models, computer-based or video simulations, through to a functional implementation. 6

7. Prototyping Low fidelity vs. High fidelity • Low fidelity prototypes • do not look much like the end product – e.g. made from different materials • are simple, inexpensive, quickly modified, and permit exploration of alternative designs and ideas • can’t demonstrate functionality in action, but provide valuable insights into design ideas • may be manually produced (paper-based sketches, cardboard models) or computer-based (built with paint or animation packages) 7

8. Prototyping Low fidelity vs. High fidelity Examples of low-fidelity prototypes • sketches – do not need to be ‘artistic’ or even neat, but can be representational, to convey ideas rather than detail – e.g. simple boxes, stick figures • storyboarding – an illustrated version of scenarios. A series of annotated sketches to show how a user may progress through a task using the prospective system, can be used for role play, allowing simulated interaction 8

9. Prototyping Low fidelity vs. High fidelity Examples of low-fidelity prototypes • index cards/post-it notes – particularly useful for developing websites, with each card/post-it representing a screen or page, or one element of a task. In evaluation, the user can step through the cards, imagining performing the task. In the light of user feedback, the sequence of the cards can easily be rearranged. • Wizard of Oz – a computer-based prototype in which the user interacts with a simulation of the proposed system, and a human operator provides the system’s response 9

10. Prototyping Low fidelity Example Menu Bar ScrollBar Opening Contents Secondary Menu 10

11. Prototyping Low fidelity vs. High fidelity High-fidelity prototypes • are much more similar to the envisaged end product • are useful for selling ideas and for testing technical issues • are most likely to be built in software, using a software tool such as Visual Basic, Macromedia Director • are likely to differ from the final system in terms of size, reliability, robustness, completeness, construction materials 11

12. Prototyping Low fidelity vs. High fidelity High-fidelity prototypes • may be viewed as taking too long to build, with the danger that developers get too attached to them • may encourage evaluators to focus on superficial aspects of the prototype instead of considering the underlying concepts • tend to be ‘hacked’ rather than properly implemented, so hey are bug-prone, leading to delays in testing 12

13. Prototyping High fidelity Examples Nokia kinetic device prototype Samsung Oled flexible screen 13

14. Prototyping High fidelity Examples Samsung paper-thin screen Window phone by Yanko design 14

15. Prototyping • Prototyping • Prototyping – the development of a system or the interaction component via the design, evaluation and redesign of prototypes – is an integral part of iterative user-centred design, which may be used to… • allowdesigners to reflect on their conceptual designs • allow designers to choose between alternatives • test out the technical feasibility of an idea • check that a design idea fits in with the rest of system development • clarifyrequirements, which may have been only vaguely specified • elicit information from users about different aspects of the system, such as functionality, operation sequences, required representations, the look and feel of the interface, user support needs 15

16. Prototyping refine the design on the basis of feedback from users by allowing users to see, test and evaluate designs allow users to convey needs, compare designs, before it’s too late to change as a means of communication between design team members show to the interface software developers to supplement other forms of design representation as a way of involving users in the design process, to help to familiarise users with the prospective system and/or introduce new ways of working test all or only parts of a system, or to test different aspects at different levels of detail 16

17. Prototyping 17