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

Week 9 | Design and Prototyping

What is Prototype?
Prototyping is the process of building a model of a system. It was the first example that you do similar to the product but it is used for testing before the real one being publish. 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. It can be in many ways but usually it was a paper-based outline of a screen or a set of screen, 3D paper or cardboards mock-up, stacks of hyperlink screenshot or electronic picture.

There two types of prototype:
- Low fidelity prototype is a prototype that is sketchy and incomplete, that has some characteristics of the target product but is otherwise simple, usually in order to quickly produce the prototype and test broad concepts. For example, storyboard, sketching and prototyping with index cards.

- High fidelity prototype is a prototype that is quite close to the final product, with lots of detail and functionality. From a user testing point of view, a high-fidelity prototype is close enough to a final product to be able to examine usability questions in detail and make strong conclusions about how behavior will relate to use of the final product. For example, prototype of a software system developed in Visual Basic.

Advantages of Prototyping :
-Developers receive quantifiable user feedback.

-Reduces development time.
-Results in higher user satisfaction.

-Reduces development costs.
-Requires user involvement.

Disadvantages of Prototyping :
-Sometimes leads to incomplete documentation.

-Developers can become too attached to their prototypes

-Can lead to insufficient analysis.

-Users expect the performance of the ultimate system to be the same as the prototype.
-Can cause systems to be left unfinished and/or implemented before they are ready.

Prototype model vs real model

AZANISA 

1102702292

Week 8 | Functional Requirements

Functional requirements

Some of the things need requirements as well as we in some cases. I will talk about the Functional Requirement. In order to achieve functional requirement, we need to follow above steps.


Goal > Use case > Functional Requirement > Design > Implementation


Data Gathering
-We should do data gathering to get the best result!
-These are the steps for data gathering :

• Classroom Assessment Techniques
• Document analysis
• Experiment
• Focus group
• Interview
• Observation
• Portfolio
• Product analysis
• Survey
• Usability

Muhammad Syafiq Bin Ridzuan
1102701969

Week 8 | Non-functional Requirements

Non-functional Requirements


Non-functional Requirements have also been called the 'ilities' because they are most simply expressed like this:

•  usability
• reliability
• interoperability
• scalability
• security

A simple way to define non functional requirements is to match answer with question and define as non functional any requirement with no direct impact on individual user experience.

Non functional requirements have no direct impact on individual user experience (R. Doisneau)

There are other ones:

• Time to market
• Cost
• Speed
• [RAM]
• [secondary storage]

Anis Afiqah Mohd Farid
1102701839

Week 8 | Requirement

A requirement is an objective that must be met. Planners cast most requirements in functional terms, leaving design and implementation details to the developers. They may specify price, performance, and reliability objectives in fine detail, along with some aspects of the user interface. Sometimes, they describe their objectives more precisely than realistically.There is two types of requirement where functional and non-functional. 

Functional specifications 

describe the necessary functions at the level of units and components; these specifications are typically used to build the system exclusive of the user interface.

Non functional

Functional specifications describe the necessary functions at the level of units and components; these specifications are typically used to build the system exclusive of the user interface.

ABDUL HADI BIN ABDUL HARIS

1102702580

Week 8 | Identifying Needs and Establishing Requirement

What is requirements?
It is specifies what it should do or how it should perform. It should be specific, unambiguous and clear as possible and we must know how to tell when they have been fulfilled.

Establishing Requirement

What do users want and need? Requirements need clarification, refinement, completion, re-scoping. Input which is requirements document and output which is stable requirements. Why establish? Requirements arise from understanding users needs and it can be justified & related to data.

Two types of requirements
- Functional
- Non-functional

Characteristic of Requirements
- Physical Environment
- Social Environment
- Organizational Environment
- Technical Environment

User Characteristics
- When you createa application, you must know who are the user
- User’s abilities and skills, user’s nationality, user’s education background and etc.
- Any one product may have a number of different user profiles

Usability Goals => Effectiveness, Efficiency, Safety, Utility => How well the users can perform

User Experience Goals => Fun, Enjoyable, Pleasurable, Aesthetically, Pleasing => The perception of the users

In the nutshell,
- Scenarios  can be used to articulate existing and envisioned work practices.
- Use cases can emphasis on user-system interaction. Its from the user’s perspective, not the system’s.
- Task analysis techniques such as HTA help to investigate existing systems and practices
- Essential use cases

- Getting requirements right is crucial

- There are different kinds of requirement, each is significant for interaction design

AZANISA

1102702292

WEEK 8 | IDENTIFYING NEEDS AND ESTABLISHING REQUIREMENTS

According to wikipedia, a requirements means a singular documented physical and functional need that a particular product or service must be or perform. There is two types of requirement where functional and non-functional. Functional requirement means that it shows what the system should do. For example, word processor. When we want to write an article, it must say that we should support a variety of formatting style. Non-functional requirement means it will run on a variety of platform and functioning on 64M of RAM. 

IN interaction design, there is several requirement such as functional requirement, date requirement, environmental requirement, user characteristic, and usability goal and user experience goals. 

Functional requirement

• what the product should do

Date requirement 

• state the size, accuracy, value, and other information of the required data. 

Environmental requirement

• circumstances in which interactive product will be operated.

User characteristic 

• user characteristics is to see users ability and skills, nationality, preferences, educational background, physical or mental disabilities. 

Usability goals and user experience goals

• Usability goals - safety, effectiveness, efficiency, utility
• User experience - fun, enjoyable, excitement, pleasing

AISYAH ALWANI

1102702359

Week 7

There's no post on week 7 due to the assignment briefing in class :)

Thank you!

WEEK 6 | USER CENTRED DESIGN

Simplicity  

• designing simplicity is the process of elimination. Means that to remove unnecessary complexity, make it simple and can easily understand by the audience and simplicity is not simple. 

Chunking

• According to about.com, chunking is a term to the process of taking individual units of information (chunks) and grouping them into larger units. Probably the most common example of chunking occurs in phone numbers. For example, a phone number sequence of 4-7-1-1-3-2-4 would be chunk into 471-1324. Chunking is often a useful tool when memorizing large amounts of information. By separating disparate individual elements into larger blocks, information becomes easier to retain and recall. 

Contrast

• Contrast can be defined by the difference in color and brightness of some object. It depends on how people see the object whether it is contrast to them or not. Contrast in object can makes the object more stands out than the plain ones. Usually people are tends to look forward to objects that  is interesting and attractive. The pictures below show the contrast in color. 

Visual Variables

• Visual variables can be classified as cartographic symbolization. It has images, icon, symbols that used for translating an information. It don't use word to send the message but only used symbolization to give the message to people when they look at it. For example, symbol on the public toilet. Some of the public toilet does not have a text written as 'male' or 'female' but only have an icon but still people know the meaning of the symbol. Same as the signage on the road. It doesn't have words but it gives a strength message and people understand it well. 

 

User Centred Design

• Usability.gov said that user centred design (USD) is an approach for employing usability. It is a structured product development methodology that involves users throughout all stages of web site development, in order to create a web site that meets users needs. This approach considers an organization's business objectives and the user's needs, limitations, and preferences. 

The goal of UCD is to produce products that have a high degree of usability. A good design is based on the customer because only customer knows what they want the design looks like. A design is a work among the designer and the customer. A designer should listen to customer's idea and tries to understand what they want. Communication is the important part because if the designer misunderstood the information gave by the customer, the outcome might be worse. To avoid that, the designer should do some research regarding to the information that be given from the customer so that the final outcome will be much better and might be a good design. 

AISYAH ALWANI
1102702359

Week 6 | How To Create User-Centred Design

My friends have posted some of the definition of User-Centred Design, the characteristics of it and the example.


So I would like to discuss about how to create User-Centred Design?

These are some of the crucial aspects that need some concentration :
-Communication

Designer should have do some survey, observation and analysis of how the particular design should be. They should ask people's opinion, put them at the real situation and ask them and take necessary information that will contributes in making a good design. 


-Process

Follow the process!


-Discussion

Discuss among researches and designers, make a conclusion.

Conclusions-

Now you got the answer. Your design might be the User-Centred Design after you follow these process. You are few steps from SUCCESS!


Anis Afiqah Mohd Farid
1102701839

Week 6 | User-centred Design

User is many people. Every person has their own preferences, personal reason of how they define beauty and how they see things aesthetically.


So as the designer, who designs for people, target market and for the people who need it, has to create designs that are user-centred.



Above is the user-centred design life cycle


So what is user-centred design? why user-centred design?
User-centred design means design that meets major peoples need. People can accept it, like it, adore it, and go crazy about it just like what Steve Jobs did for an iPhone. The reason is everybody will like it and use it and can stand to look at it for hours and days. It is a pleasure to them. Why? because iPhone suits users need. iPhone is the best example of user-centred design!





Muhammad Syafiq Bin Ridzuan
1102701969

Week 6 | User Centered Design

User-centered design (UCD) or pervasive usability is a design philosophy and a process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process. User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyze and foresee how users are likely to use a product, but also to test the validity of their assumptions with regards to user interaction in real world tests with actual users. Such testing is necessary as it is often very difficult for the designers of a product to understand intuitively what a first-time user of their design experiences, and what each user's learning curve may look like.

UCD seeks to answer questions about users and their tasks and goals, then use the findings to drive development and design.

UCD seeks to answer questions such as:

Who are the users of this 'thing'?

What are the users’ tasks and goals?

What are the users’ experience levels with this thing, and things like it?

What functions do the users need from this thing?

What information might the users need, and in what form do they need it?

How do users think this 'thing' should work?

How can the design of this ‘thing’ facilitate users' cognitive processes?

UCD can improve the usability and usefulness of everything from "everyday things" (D. Norman) to software to information systems to processes. . . anything with which people interact. As such, User-Centered Design concerns itself with both usefulness and usability.

*User-Centered Design has cuts costs and increases user satisfaction and productivity.

ABDUL HADI BIN ABDUL HARIS

1102702580

Week 6 | USER-CENTERED DESIGN

The 3 main principle of human perception were Chunking, Visual variables and Gestalt

Graphic Design Guidelines are balance, simplicity, contrast, alignment and white space.

So what is simplicity?

Simplicity is not simple as you were lazy. To design something simplicity needs a process of elimination and delete whatever that is unnecessary. Everything that we eliminated should have a good reason and all the remain things also should have reasons. 'Foreshadowing' is what they called it in film.

What is chunking?

Chunking ia bite size of easy storage. The elements of PERCEPTION plus MEMORY equal to CHUNKS. Forming chunks in working memory depends on how information is presented.

What is contrast?

Make information stands out and shows the differences along a visual dimension.

What is visual variables?

Encoding DATA plus DRAWING. It was used for communication. There are two types of visual variables which is :

1. Selectivity

+ degree of a single value selected from the entire visual field

+ most variables are selectivity

+ it's hard to pick out triangles

+ shape are not selective

+ locate objects at a glance

2. Associativity

+ opposite of selectivity

+ something that blends into one another

What is white space (negative space)? 

A space between 2 or more elements like text, graphics or other elements which helps separate them from one another.

What is balance?

It acts as a gravity of the whole design making the design visually balance by putting certain form of elements in the correct position.

Three types of balance in design :

+ Symmetrical balance

+ Asymmetrical balance

+ Radial balance

What is alignment?

Positioning of the images and text so that they are in line with each other to group items, to create visual connections or to organize page elements and to create order.

What are Gestalt Principles?

+ Proximity

+ Similarity

+ Continuity

+ Closure

+ Area

+ Symmetry

UCD 

System-Centered Design - User-Centered Design (UCD)

It shifts focus from the designer of the application to the user of the application.

In Wikipedia, UCD is a design philosophy and a process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process. User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyze and foresee how users are likely to use a product, but also to test the validity of their assumptions with regards to user behaviour in real world tests with actual users. For example, the user-centered design process can help software designers to fulfill the goal of a product engineered for their users. User requirements are considered right from the beginning and included into the whole product cycle. These requirements are noted and refined through investigative methods including: ethnographic study, contextual inquiry, prototype testing, usability testing and other methods. Generative methods may also be used including: card sorting, affinity diagramming and participatory design sessions. In addition, user requirements can be inferred by careful analysis of usable products similar to the product being designed.

AZANISA 

1102702292

Week 5 | The importance of graphic design

Graphic design is a creative process that combines art and technology to communicate ideas. The designer works with a variety of communication tools in order to convey a message from a client to a particular audience. The main tools are image and typography.

Graphics are required in our everyday’s life. The strong meaning of graphic stimulates a person to reach at the same moment. All over the world, graphic are being designed by the millions of graphic designers to attract people and increase the sales of a business activity.

To make a graphic really attractive and adorable, proper arrangement of graphics needs to be done. A graphic becomes meaningful when it defines the text given below properly and images to produce a coherent and interesting piece of work, according to the end goal. The purpose of graphic designing is not limited to that only but it plays a special role in improving sales of a company.

Also, the web graphic designs help in improving the look of the layout of a website, attract the viewers, convey the message of the company and stimulate their senses effectively.

As a conclusion, graphic design plays an important role in art and design worlds nowadays.

ABDUL HADI BIN ABDUL HARIS

11027002580