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

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

"A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from."

- http://en.wikipedia.org/wiki/Prototype

For this week, we learned about Prototype.

What is a prototype, actually? It can range from being a paper-based outline of a screen/sets of screens, a 3D paper/cardboard mockup, to an electronic 'picture'. Through a prototype, stakeholders will be able to interact with an envisioned product, gain experience with its realistic settings, and explore even more imagined uses. They are a very useful way to express ideas for discussions or communications among team members. At the idea-testing stage of creating a product, users will be able to do user testing and evaluation, check its compatibility with the rest of the system development, and clarify their general requirements.

There are two types of prototyping, which are low-fidelity prototyping and high-fidelity prototyping.

Low-fidelity prototyping:

- does not look like the final product (eg. uses materials very different from final product such as paper/cardboard)

- simple, cheap, easy to produce

- for exploration only; important for conceptual design but not intended to be kept and integrated into final product

- Storyboard

• series of sketches to show how a user can interact with the product
• for example, screens of a GUI-based software, scene sketches showing how a user can perform tasks using an interactive device.

High-fidelity prototyping:

- uses materials expected to be in the final product and looks very much like the real thing (eg. using Visual Basic)

- useful for selling ideas and testing out technical issues

- users may be faced with the following problems:

• a long time is needed to build a high-fidelity prototype
• reviewers and critics may focus too much on the superficial aspects of the prototype rather than the content
• developers would be less willing to do any alterations when they have spent a lot of time and energy on the prototype
• software prototypes are prone to setting high expectations
• a high-fidelity prototype of great scales can bring the entire testing and development stage to a halt

Conceptual design:

- concerns with transforming needs and requirements into a conceptual model

- conceptual model is an outline of what people can do with a product and the concepts needed to understand its functions and abilities

- key guiding principles of a conceptual model:

• keep an open mind but never forget the users and their context
• discuss ideas with other stakeholders as much as possible
• use low-fidelity prototyping to gain rapid feedback
• iterate

- some elements in a conceptual model is based on requirements for the product

- consider these when creating the initial conceptual model:

• Which interface metaphors would be suitable to help users understand the product?
• Which interaction (types) would best support the users' activities?
• Do different interface types suggest alternative design insights or options?

Interface metaphors

- Evaluating metaphors

• A good metaphor will require structure, preferably a familiar one
• One of the difficulties of using metaphors is that the users may think they understand more than they do and start applying inappropriate elements of the metaphors to the system, leading to confusion and false expectations.
• A good metaphor is associated with particular visual and audio elements, as well as words.
• A good metaphor is easily understandable and have extra aspects that are useful.

- Interface types

• Different interface types prompt and support different perspectives on the product under development and suggest different possible behaviours.
• WIMP/GUI interface
• sharable interface
• tangible interface
• advance graphical interface

Reference: lecturer's notes

Week 9 / Seventh Lecture : Design, Prototyping and Construction. [Wong Mann Ee]

Lecturer : Madam Mastura
Date : 13 Dec 2011

What is a prototype?
-A prototype is an early sample or model built to test a concept or process or to act as a thing to be replicated or learned from.

-In Interaction Design it can be (among other things):

• a series of screen sketches
• a storyboard, i.e. a cartoon-like series of scenes 
• a PowerPoint slide show
• a video simulating the use of a system
• a lump of wood (e.g. Palm Pilot)
• a cardboard mock-up
• a piece of software with limited functionality written in the target language or in another language

-In other design fields a prototype is a small-scale model:

• a miniature car
• a miniature building or town

Why prototype?

• Evaluation and feedback are central to interaction design
• Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing
• Team members can communicate effectively
• You can test out ideas for yourself
• It encourages reflection: very important aspect of design
• Prototypes answer questions, and support designers in choosing between alternatives

What to prototype?

• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas

Summary

1. Prototyping may be low fidelity (such as paper-based) or high fidelity (such as software-based)
2. High-fidelity prototypes may be vertical or horizontal.
3. Low-fidelity prototypes are quick and easy to produce and modify and are used in the early stages. There are two aspects to the design activity: conceptual design and physical design.
4. Conceptual design develops a model of what the product will do and how it will behave, while physical design specifies the details of the design such as screen layout and menu structure.
5. We have explored three perspectives to help you develop conceptual models: an interaction paradigm point of view, an interaction mode point of view, and a metaphor point of view.
6. Scenarios and prototypes can be used effectively in conceptual design to explore ideas.
7. We have discussed four areas of physical design: menu design, icon design, screen design and information display.
8. There is a wide variety of support tools available to interaction designers.

Resource: http://twobenches.wordpress.com/2008/06/06/design-prototyping-and-construction/

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

A prototype is a limited representation of a design that allows users to interact it. Prototype is a paper-based outline of a screen or sets of screens, electronic 'picture', 3 dimensional paper or cardboard mockup and stack of hyperlinked screen shots. It allows stakeholders to interact with an envisioned product, gain experience in realistic setting and explore imagined uses. Prototype aid when discussing ideas with stakeholders, communication device among team members and effective way to test ideas. Example, clarify vague requirements, to do user testing and evaluation and check a certain design direction is compatible with the rest of the system development. there are 2 types of prototypes, low-fidelity prototyping and high-fidelity prototyping.

Low-fidelity prototyping is one that does not look very much like the final product. Example, the uses materials that are very different from the intended final version such as paper, cardboard rather than electronic screens and metal. It tend to be simple, cheap and quick to produce and important during conceptual design and are never intended to be kept and integrated into the final product. They are for exploration only. There are few types of low-fidelity prototype like storyboard, sketching, prototyping with index cards and wizard of Oz.

Storyboard consists of a series of sketches showing how a user might progress through a task using the product under under development. Example, screen of a GUI-based software, scene sketches showing how a user can perform a task using and interactive device. Sketching is relies on sketching but often people find it difficult to engage in this activity. Device on symbols and icons you want to sketch. Prototyping with index cards means use a small piece of cardboard about 3x5 inches index card. Each card represents one screen or one element of a task. In user evaluation, the user can step through the cards, pretending to perform the task while interacting with the cards. Wizard of Oz is the uses a software-based prototype. In fact, the computer is connected to another machine where a human operator sits and simulates the software's response to meet the user.

High-fidelity prototyping is the uses materials that you would expect to be in the final product and produces a prototype that looks much more like the final thing. Example, the prototype of a software system developed in Visual Basic vs paper-based mockup. The common prototype tools are Flash, Visual Basic and Smallktalk. There are some issues with high-fidelity prototyping. They are too long to build, reviewers and testers tend to comment on superficial aspects rather than content, a software prototype can set expectations to high and just one bug in a high-fidelity prototype can bring the testing to test. It useful for selling ideas and for testing out technical issues. 

Compromises of prototyping is by their very nature, prototypes involve compromises, the intention is to produce something quickly to test an aspect of the product. Thus, the prototype must be designed and built with the key issues in mind. There are two common compromises, horizontal prototyping and vertical prototyping. Developing an initial conceptual model divided into 3 categories, interface metaphors, interaction types and interface types.

Interface metaphors is combine familiar knowledge with new knowledge with new knowledge in a way that will help the user understand the system. Choosing suitable metaphors and combining new and familiar concepts requires a careful balance between utility and fun and based on a sound understanding of the users and their context. Example is teaching math to 6 year old children. There are 3 step in choosing a good interface metaphors such as understand what the system will do, understand which bits of the system are likely  to cause users problems and generate metaphors. Interaction types are 4 types, there are instructing, conversing, manipulating and exploring. Example, Computer game, manipulating, drawing packages, instructing and conversing. Interface types that are different prompt and support different perspectives on the product under development and suggest different possible behaviours.

Week 8 / Sixth Lecture : Identifying Needs and Establishing Requirements. [Amirali]

in this week class we learnt about all the things that we need for understanding.

What are Requirements?
A requirement is a statement that specifies what an intended product should do, or
how it should perform.

Types of Requirements

• Functional requirements
• Data requirements
• Environmental requirements

1. Physical environment such as how much lighting, noise, and dust is expected in the operational environment.
2. Social environment. The issues raised regarding the social aspects of interaction design, such as collaboration and coordination, need to be explored in the context of the current development.
3. Organizational environment, e.g., how good is user support likely to be and how easily can it be obtained.
4. Technical environment will need to be established: for example, what technologies will the product run on.

• User characteristics
• User goals
• User experience goals

Data gathering

Data gathering is an important part of the requirements activity and also of evaluation.The purpose of data gathering is to collect sufficient, relevant, and appropriate data so that a set of stable requirements can be produced. It does help in determining requirements.

Data-gathering techniques :

1. Questionnaires
2. Interviews
3. Naturalistic observation
4. Studying Documentation

Week 8 / Sixth Lecture : Identifying Needs and Establishing Requirements. [Wong Mann Ee]

Lecturer : Miss Edina
Date : 6 Dec 2011

Requirement

What are Requirements?
A requirement is a statement that specifies what an intended product should do, or 
how it should perform. 

● Specific, unambiguous, clear
– Time to download any page is less than 5
seconds on a DSL line of 20Mbits/second
– The playback bar should always indicate the 
position in the audio stream
● Too vague 
– Appealing to teenage girls (too vague) 
– The buttons should be engaging




Different kinds of requirement
● Functional
– Functional requirements specify what the system should do
– Historically the main focus of requirements 
activities 
– Examples: word processor must support variety of formatting styles, Calculate 
                  total cost of purchases
● Non­-Functional
– Non-Functional requirements specify what constraints there are on the system or its 
development.
– Run on a variety of platforms
– Function on 64M of RAM
– Delivered in 6 months


*Interaction design requires us to understand both the functionality required and the 
constraints for development or operation of the product.*


Different Requirements

● Environment or context of use 
– Physical ( Dusty ? Noisy ? Vibrations ? Light ? Heat ? Humidity ? )
Example:Noisy and busy environment, users maybe talking while using the system
– Social : Sharing of files, displays, privacy, locking
– Organizational: Hierarchy, IT departments, user support,
communications structure, availability of training
– Users
   ● Novice : step-­by-­step, constrained, clear information
   ● Expert  : flexibility, access, power
   ● Frequent: short cuts
   ● Casual/infrequent: clear instructions, menu paths
Example: Majority of users under 25,comfortable dealing 
              with technology. 
● Usability
– Learnability, flexibility, throughput 
Example: Simple for new users, memorable for frequent users, efficient, 
              deal easily with user errors 
●IMPORTANT
– User requirements and usability requirements 
refer to different things.
● Kinds of requirements 
– What factors (enviornmental, user, usability) ?
    ● Self­service cafeteria ­ paying using credit system 
    ● Nuclear plant control room
    ● Distributed car design team

Resource: http://www.id-book.com/