Week 10 / Eighth Lecture : System prototyping, types and methods. [Wong Mann Ee]

Lecturer : Madam Mastura
Date : 20 Dec 2011

Prototyping

Prototyping is the process of building a model of a system. In terms of an information system, prototypes are employed to help system designers build an information system that intuitive and easy to manipulate for end users. Prototyping is an iterative process that is part of the analysis phase of the systems development life cycle.


During the requirements determination portion of the systems analysis phase, system analysts gather information about the organization's current procedures and business processes related the proposed information system. In addition, they study the current information system, if there is one, and conduct user interviews and collect documentation. This helps the analysts develop an initial set of system requirements.


Prototyping can augment this process because it converts these basic, yet sometimes intangible, specifications into a tangible but limited working model of the desired information system. The user feedback gained from developing a physical system that the users can touch and see facilitates an evaluative response that the analyst can employ to modify existing requirements as well as developing new ones.


Prototyping comes in many forms - from low tech sketches or paper screens(Pictive) from which users and developers can paste controls and objects, to high tech operational systems using CASE (computer-aided software engineering) or fourth generation languages and everywhere in between. Many organizations use multiple prototyping tools. For example, some will use paper in the initial analysis to facilitate concrete user feedback and then later develop an operational prototype using fourth generation languages, such as Visual Basic, during the design stage.



Some Advantages of Prototyping:

-Reduces development time.
-Reduces development costs.
-Requires user involvement.
-Developers receive quantifiable user feedback.
-Facilitates system implementation since users know what to expect.
-Results in higher user satisfaction.
-Exposes developers to potential future system enhancements.

Some Disadvantages of Prototyping:

-Can lead to insufficient analysis.
-Users expect the performance of the ultimate system to be the same as the prototype.
-Developers can become too attached to their prototypes
-Can cause systems to be left unfinished and/or implemented before they are ready.
-Sometimes leads to incomplete documentation.
-If sophisticated software prototypes (4th GL or CASE Tools) are employed, the time saving benefit of prototyping can be lost.

Reference: http://www.umsl.edu/~sauter/analysis/prototyping/intro.html a

Week 10 / Eighth Lecture : Physical Design : Getting Concrete [Weiting]

Design is about making choices and decisions. It have to take the balance of factor of environmental, user, data and usability requirement with functional requirement. Physical interface of interactive product should not conflict with the user's cognitive processes involved in achieving the task.


Physical Design : 

• Considers more concrete, detailed issues of designing the interface.
• Iteration between physical and conceptual design.
• Guidelines for physical design :
• Nielsen’s heuristics.
• Shneiderman’s eight golden rules.
• Different kinds of widget (dialog boxes, tool-bars, icons, menus and etc).

Use Scenario in Design : 

Scenarios can be used to explicate existing work situation but are more commonly used for expressing proposed or imagined situations to help in conceptual design. 

Four roles for scenarios :

• A basic for the overall design.
• For technical implementation.
• As a means of cooperation within design teams.
• As a means of cooperation across professional boundaries such as in a multidisciplinary team.

Used for the notion of plus and minus scenarios : 

• Attempt to capture the most positive and the most negative consequences of a particular proposed design solution. 
• Helping designers to gain a more comprehensive view of the proposal.

Using Prototype in Design : 

Paper prototyping is a method for designing, evaluating and improving user interfaces for software, web and handheld device applications. The term is sometimes used to describe the production of page comps, wireframes and storyboards that facilitate communication within design teams and with clients, allowing the exploration of a range of design ideas (Snyder 2003:9). Here, paper prototyping is used to refer to screen mock-ups on which representative users attempt a series of realistic tasks while a second person acts as the computer, manipulating the mock-ups in response to the user's actions. This form of paper prototyping enhances user involvement in the design process (Beyer and Holzblatt 1998: 371, Hackos & Redish 1998: 380) and is an effective means of identifying potential usability problems (Virzi et al 1996, Catani & Beers 1998).

Paper prototyping can also be used in the design of a range of interactive devices such as ticketing machines and photocopiers. It is also used in the design of intelligent agents. In these circumstances it is commonly referred to as "Wizard of Oz", where a human "wizard" simulates the system's intelligence and interaction. This kind of prototyping is used for systems that are costly to build or which require new technology (Maulsby, Greenberg & Mander, 1993).

Paper prototyping has been used as a design tool for over 10 years, and while companies such as IBM, Digital, Honeywell and Microsoft have integrated the method into their development processes, its use in mainstream web design and development is still not commonplace (Snyder 2003:3). There are undoubtedly several reasons for this. Web development is relatively straightforward and a variety of tools now support the rapid development of web pages. This creates pressure to deliver web projects quickly. Added to this is a tendency for developers to be focused on technology and forget about the needs of end users (Grady 2000: 39).

Some example of Paper Prototyping : 

Paper prototype for phone.

Paper prototype for phone GUI. 

Paper prototype for tablet.

Paper prototype for iPad.

Paper prototype for iPad.

Tool Support :

Brad Myers (1995) suggests nine facilities that user interface software tools might provide :

1. Help design the interface given a specification of the end users' tasks
2. Help implement the interface given a specification of the design
3. Create easy-to-use interfaces
4. Allow the designer to rapidly investigate different designs
5. Allow non programmers to design and implement user interfaces
6. Automatically evaluate the interface and propose improvements
7. Allow the end user to customize the interface
8. Provide portability
9. Be easy to use

Reference :

Preece, J., Rogers, Y., & Sharp, H. (2002). Interaction Design: Beyond Human-Computer Interaction. United State of America: Wiley Publisher.

Snyder, C. (2003) Paper Prototyping, San Francisco: Morgan Kaufmann

Beyer, H. and Holzblatt, K. (1998) Contextual Design, San Francisco: Morgan Kaufmann

Hackos, J.T and Redish, J.C. (1998) User and Task Analysis for Interface Design, New York: Wiley.

Virzi, R.A., Sokolov, J. L. and Karis, D. (1996) "Usability problem identification using both low- and high-fidelity prototypes", Proceedings of CHI 96, pp. 236-243.

Catani, M.B and Biers, D.W. (1998) "Usability evaluation and prototype fidelity: users and usability professionals, Proceedings of the Human Factors and Ergonomics Society 42nd Annual Meeting, pp. 1331-5.

Maulsby, D., Greenberg, S. and Mander, R. (1993) "Prototyping an intelligent agent through Wizard of Oz", Proceedings of the SIGCHI Conference on Human Factors in Computing Systems, pp. 277 - 284.

Grady, H.M. (2000) "Approaches to prototyping: web site design: a case study in usability testing using paper prototypes", Proceedings of IEEE Professional Communication Society International Professional Communication Conference.

Week 10 / Eighth Lecture : Physical Design : Getting Concrete. [Wenyong]

As we know, design is everywhere, but there is question people always asked : What is design?? Design is about making choices and decisions. Physical interface of interactive product should not conflict with the user's cognitive processes invloved in achieving the task. For example, to help avoid memory overload, interface should list options instead of making user remember a long lost of possibilities.

Example : Designing for different culture

On the other hand, lecturer had share about some guidelines to help with international design to us. We have advised to be careful about using images that depict hand gestures or people, such as "thumbs-up", "moutza", "A-OK", and the "Corna". In other way, we can use a generic icon, choose color that are not associated with national flags or political movements. As secure, we have to ensure that the products support different calendars, date formats and time formats, number formats, currencies, weights and measurement systems. Besides, we also have to ensure the size of international paper, envelope sizes and address format. As an information, we have to avoid integrating text in graphics as they cannot be translated easily and allow for text expansion when translated from English.

Using Scenarios in Design

As knowledge, Scenarios can be used to explicate existing work situation but are more commonly used for expressing proposed or imagined situations to help in conceptual design. There are four roles for scenarios:

- A basic for the overall design

- For technical implementation

- As a means of cooperation within design teams

- As a means of cooperation across professional boundaries such as in a multidisciplinary team

Furthermore, scenarios used for the notion of plus and minus scenarios. It attempt to capture the most positive and the most negative consequences of a particular proposed design solution. Besides, it helping designers to gain a more comprehensive view of the proposal.

Using Prototypes in Design

What is Prototype?

"According to Wikipedia, paper prototyping is a widely used method in the user-centred design process, a process that helps developers to create software that meets the user's expectations and needs especially for designing and testing user interface. It is throwaway prototyping and involves creating rough, even hand-sketched, drawings of an interface to use as prototypes, or models, of a design. Other than that, paper prototype is faster and easy to create and it is also easy to change when need any improvement."

For an example: A cell-phone is a good example of prototype. Generating storyboards from scenarios is storyboard represents a sequence of actions or events that the user and the system go through to achieve a task. A scenario is one story about how a product may be used to achieve a task. But how? We have to break the scenario into a series of steps which focus on interaction. Then, create one scene in the storyboard for each every step.

- Generating card-based prototype from use cases

Value of card-based prototype is a screen or screen elements can be manipulated and moved around in order to stimulate interaction. Storyboard which focusing on screen is the card based prototype or can be generate directly from use case output. A prototyping physical design expand the cards to generate a more detailed software or paper-based prototype. There is a tool to support prototyping which is sketching tools, environments to support icon and menu design to widget libraries and so on. The user interface software tools support developers by reducing the amount of code that has be written to implement elements of the user interface such as windows, widgets, and to tie all of them together.

Week 10 / Eighth Lecture : Physical Design : Getting Concrete. [WeeFong]

Physical design is the mapping logic to physical implementation. Implementation is the component, component locations, component writing and geometric shapes. It is the process of producing a detailed data model of a database and functional requirement to reach a balance.

There are few type of using prototypes in design:

• Generating Storyboards from Scenario
• Generating Card-based Prototype from Use Cases
• Prototyping Physical Design
• Tool Support

Generating Storyboards from Scenario is a storyboard represents a sequence of actions or events that user and the system go through a achieve a task. A scenario is one story how a product may be used to achieve a task. Break the scenario into a series of steps which focus on interaction and then create one scene in the storyboard for each step are the way of generating storyboards from scenario.

Generating Card-based Prototype from Use Cases is the value of card-based prototype - screen of screen elements can be manipulated and moved around in order to stimulate interaction. Besides, storyboard focus on screen, so that card-based prototype or can generate directly from use case output.

Prototyping Physical Design is to expands the cards to generate a more detailed software or paper-based prototype. The steps of that is paper prototype to sketch and final work.

Tool Support is to support prototyping through sketching tools, environments to support icon and menu design to widget libraries and so on. User interface software tools support developers by reducing the amount of code that has be written to implement elements of the user interface such as windows, widgets and to tie all of them together.

Week 9 / Seventh Lecture : Design, Prototyping and Construction. [Weiting]

According to SearchCIO-Midmarket website, the definition of prototype are as follow : 

1) In software development, a prototype is a rudimentary working model of a product or information system, usually built for demonstration purposes or as part of the development process. In the systems development life cycle (SDLC) Prototyping Model, a basic version of the system is built, tested, and then reworked as necessary until an acceptable prototype is finally achieved from which the complete system or product can now be developed.

2) In prototype-based programming, a prototype is an original object; new objects are created by copying the prototype.

3) In hardware design, a prototype is a "hand-built" model that represents a manufactured (easily replicable) product sufficiently for designers to visualize and test the design.

The word prototype comes from the Latin words proto, meaning original, and typus, meaning form or model. In a non-technical context, a prototype is an especially representative example of a given category.

Source : http://searchcio-midmarket.techtarget.com/definition/prototype

Prototype also defined by Merriam-Webster encyclopedia website as : 

1. an original model on which something is patterned : archetype
2. an individual that exhibits the essential features of a later type
3. a standard or typical example
4. a first full-scale and usually functional form of a new type or design of a construction (as an airplane)

Source : http://www.merriam-webster.com/dictionary/prototype

In Interaction Studies / Interaction Design, Prototype is :

• Paper-based outline of a screen/ sets of screen.
• Electronic ' picture '.
• 3-dimensional paper / cardboard mock-up.
• Stack of hyper-linked screen shots.

that allow stakeholders to : 

1. Interact with an envisioned product.
2. Gain experience in realistic setting.
3. Explore imagined uses.

A PROTOTYPE is a limited representation of a design that allows users to interacts and explore its usability.

Why We Use Prototype ?

• Aids when discussing ideas with stakeholders.
• Communication device among team members.
• Effective way to test ideas.
• Examples :
• Clarify vague requirements
• To do user testing and evaluation
• Check a certain design direction is compatible with the rest of the system development.

Types of Prototyping :

• Low-fidelity prototyping ( A set of drawings (e.g., storyboard) that provide a static, non-computerized, non-working mock-up of user interface for the planned system )

• High-fidelity prototyping ( A set of screens that provide a dynamic, computerized, working model of the planned system )

Advantages and Disadvantages of Low and High-fidelity Prototyping :

Picture taken by our classmate - Tai Qiu Xian.

Recommended further studies for low-fidelity and high-fidelity prototyping :  

http://social.cs.uiuc.edu/class/cs465/lectures/lofidelity.pdf