Week 10 | Card-base Prototype

Generating card-based prototype from user cases


Expand the cards to generate a more detailed software or paper-based prototype


This video shows an example of brilliant prototype!

Anis Afiqah Mohd Farid
1102701839

Week 10 | Using Prototype in Design

Using Prototype in Design

When we design an application for desktop, Web, or mobile, an important consideration to make is the user experience (UX). 

To achieve better UX, we need to design the user interface (UI) very carefully. 

UI is not only the way we layout and paint the widgets of our application, but also includes the interaction design (IxD).

There are some principles to designing a good UI; we can find books and learn them. But in practice, especially on a big project, we will find it difficult to reach every aspect of a matter. The UI becomes complex and we just can't easily figure out which design is more user-friendly. So what to do? The straightforward solution may be asking our users. We make applications for them and care about their experience, so why not listen to them?

Collecting feedback from users is a good way to improve design. The problem is when and how to gather feedback. The earlier we do, the less costly any modifications will be. The alpha version may be the first version that users can try, but it is always too late for collecting feedback to change the design.

Muhammad Syafiq Bin Ridzuan
1102701969

WEEK 10 | PHYSICAL DESIGN : GETTING CONCRETE

Physical design is a design process that will makes sure the products work successfully when the products will be sold to global and international. It's a process of producing a database and functional requirement to reach the balance before it has been sold to the users. This is because some of the design might be not suitable to other countries. It happens because of different races, culture and tradition all around the world.

The same design may have the different meaning of it. For example, the thumbs up sign. For some people, the meaning of the thumbs up sign is a good sign but we don't know what is the meaning of it for some people in different countries. So, we must know how to design a good work that it will works on every countries all around the world. Moreover, try to use an image without putting any text on it because it could not be translated by the translator. 

example of reaction on thumbs up

Generic icons are recommended for the designer because it is simple but easy to understand and colors that being used must not associated with political movements or national flags. We don't want to related any design to those sensitive issues. To make it easier, ensure that the products support different date and time formats, support international paper sizes, envelope and address format and allow text expansion when translated to English. 

 generic icons

Scenario in design is to help the existing work situation that works totally the same with the actual product. There are four rules in scenario in design. There are basis for overall design, technical implementation, cooperation within design themes, and cooperation across professional boundaries. Generating storyboard from scenario is to break the scenario in step by step. It also will focus on the screen and the environment. Card-based prototyping is most of the process is using paper and card to prototyped the product. It is widely used to generate the ideas. It is a very easy and simple way and not use a lot of time doing it. It helps the designer to test their product before producing it. 

example of storyboard template

 card-based prototype

card-based prototype

AISYAH ALWANI

1102702359

Week 10 | Physical Design: Getting Concrete

Design is a process about making choices and decisions. It is where we balance out between Environmental, User, Data, Usability requirement and Functional requirement. 

Guidelines to help with international design : 

+ Be careful about using images that depict hand gestures of people.

+Use generic icon which is common icon.

+ Choose colour that are not associated with national flags or political movements.

+ make sure the product supports different calenders, date formats and time formats.

+ Make sure the product support different number formats, currencies, weights and measurement systems.

+ The product supports international paper size, envelope size and address format.

+ Not to integrating text in graphics as they cannot be translated easily.

+ Allow for text expansion when translated from English.

Using Scenarios in Design

- Scenarios can be sued to explicate existing work situation.

Four roles for scenarios :

+ A basis for overall design.

+ For technical implementation.

+ As a means of cooperation within design teams.

+ As a means of cooperation across professional boundaries.

Used for the notion of plus and minus scenarios

+ 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.

How to generate storyboards from scenarios?

+ scenario - one story including surrounding environment about how the product may be used.

+ storyboard - a sequence of sketches illustrating a scenario.

First, break into steps. Then, focus solely on screen and focus solely on environment. Designers are forced to think on the screen and also environment part separately.

A scenario that happens with surrounding environment

An example of a storyboard template

AZANISA

1102702292

Week 9 | Advantages & Disadvantages of Prototype

Advantages & Disadvantages of Prototype

Advantages 
-Lower development cost
-Evaluate multiple design concepts
-Useful communication device
-Address screen layout issues
-Useful for identifying market requirements
-Proof-of-concept


Disadvantages
-Limited error checking



Conceptual Design : moving from requirements to first design
-is concerned with transforming needs and requirements into a conceptual model
-concept model-an outline of what people can do with a product and what concepts are needed to understand how to interact with it
-key guiding principles of conceptual design are: 
Keep an open mind but never forget the users and their context
Discuss ideas with other stakeholders as much as possible

Developing an initial Conceptual Model
-some elements in a conceptual model will derive from the requirements for the product
-some consideration to create initial conceptual model:
Which interface metaphors

Anis Afiqah Mohd Farid
1102701839

Week 9 | What is a Prototype?

What is a Prototype? 


It could be..
-Paper-based outline of a screen/sets of screens
-Electronic 'picture'
-3 dimensional paper/cardboard mockup
-Stack of hyperlinked screen shots


Allows stakeholders to :
i) Interact with an envisioned product
ii) Gain experience in realistic setting
iii) Explore imagined uses


? Prototype


Aid when discussing ideas with stakeholders
Communication device among team members
Effective way to test ideas
Ex: Clarify vague requirements, To do user tetsing & evaluation, 
Check a certain design direction is compatible with the rest of the system development


Types of Prototyping


Low-fidelity Prototyping
Is one that does not look very much like the final product
ex: uses materials that are very different from the intended final version such as paper, cardboard rather than electronic screens & metal
Tend to be simple, cheap and quick to produce -> support the exploration of alternative design & ideas
Important during conceptual design 


storyboard
-consist of a series of skectches showing how a user might progress through a task using the product under development
-ex: screens of a GUI 


sketching
-relies on sketching but often people find it difficult to engage in this activity
-device own symbols and icons you want to sketch


prototyping with index card
-use index cards(small pieces of cardboard about 3x5 inches)
-each card represents one screen or one element of a task


wizard of Oz
-uses a software-based-prototype - user sits at a computer screen and interacts with the software as though interacting the product
-in fact, the computer is connected to another..


High-fidelity Prototyping
Uses materials that you would expect to be in the final product and produces a prototype that looks much more like the final thing.
ex: Prototype of a software system developed in Visual Basic vs paper-based mockup
Common prototyping tools: Flash, Visual Basic and Smalltalk
Issues with High-fidelity prototyping :
-They take too long to build
-Reviewers and testers tend to comment on superficial aspects rather than content
-Developers are reluctant to change something they have crafted for hours
-A software prototype can set expectations to high 
-Just one buck in a high-fidelity prototype can be bring the testing to halt
-Useful for selling ideas and for testing out technical issues


Compromises in Prototyping
-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.
-Two common compromises : 
Horizontal Prototyping
Vertical Prototyping

This week video concludes last week lecture ( Requirements) and this week (Prototyping) 


Muhammad Syafiq Bin Ridzuan
1102701969

WEEK 9 | DESIGN AND PROTOTYPING

Interaction-design.org said that prototyping is a method used by designers to acquire feedback from users about future designs. Prototype are similar to mock-ups, but are usually not as low-fidelity as mock-ups and appear slightly later in the design process. Based on searchcio-midmarket.techtarget.com, the word prototype comes from the latin words proto means original, and typos, meaning form or model. In a non-technical context, a prototype is an especially representative example of a given category. 

There are two types of prototype:

• Low fidelity prototype is a rough cut of your interface design likes sketches, index cards, something that are not the final outcomes. It is the easiest way to build the prototype. For example, sketch storyboards is to show overal design concept and the design structure. In the other hand, it will save the budgets and costs to use the actual material that would be used in the final outcome. 

• High-fidelity prototype is the closely resemble the end of the product. It will uses the actual materials, details and functionality that would be used for the final product. It should be able to interact with them and other people will be able to understand it. Moreover, it will costly than the low fidelity prototype but it can help us in finding out the problems that can be fixed before producing the actual product. 

Advantages on low fidelity prototype are its quick and cheap to build a prototype, facilities brainstorming and invites discussion, it also can enables early evaluation and save a lot of time. On the other hand, the advantages of high-fidelity prototype are the prototype will look the same with the final product, fully interactive and it is in complete functionality.

AISYAH ALWANI

1102702359