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

Week 5 | Graphic Design

Based on arga.org, graphic design is a creative process that combines art and technology to communicate ideas. As my personal opinion, graphic design is a medium which deliver information to an audience. It is to make things simply beautiful. Graphic design uses color, type and composition as well. They are very vital component. It is to create effective visual communication. They also use a wide variety of communication tools. The main tools are image and typography.

Designers nowadays are capable on creating something that people would understand even it is complicated at the first look. They are the examples of good designers. We apply graphic design usually for logos and branding (corporate identity), publication (magazines), advertisement, and product packaging.

Logo

Miscellaneous

Publication

Nike's

Packaging

These are some good examples of graphic design. They are simple and I am sure that everyone knows what those designers are trying to deliver and present. They play the biggest role on inventing something new to the world to see. Graphic design is important so as the designers.

Anis Afiqah Mohd Farid

1102701839

Week 5 | Graphic Design

Week 5 lecture was given by Mr Radzi Bedu emphasized about Graphic Design.

Above is the example of Graphic Design. Okay, what can you see?

• colors
• shapes
• forms
• words
• etc

Above is what happens in globalization era. Do you know back in the day there was no proper language like now? Maybe there was sign language and very basic verbal language.


As time flies by, language and communication exist.


So what language and communication has to do with graphic design? 
What is graphic design actually?
It is a visual communication. It use images, symbols and words to create a visual representation of ideas and messages. Graphic design can be found in corporate identity(logo & branding), web sites, publications such as magazines, newspaper, advertisement and product packaging.


What graphic design work with?

images

 

text 

drawing 

painting

illustration 

The roles of graphic design :

• informs
• persuades
• organizes
• stimulates 
• locates
• identifies
• attracts attention
• provides pleasure

Graphic Design has now be a part of our lives.

Muhammad Syafiq Bin Ridzuan

1102701969

WEEK 5 | GRAPHIC DESIGN

Graphic design is a creative process of thinking. It is how me manipulate and visualising our ideas in the form of designing print or electronic forms of visual information, as for an advertisement, publication, or a website.

For examples, a decoration on a wall

 An advertisement poster -coca cola-

Graphics on a CD

As for Quentin Newark, Graphic design is the most universal of all the arts. It is all around us, explaining, decorating, identifying; imposing meaning on the world... Without graphic design's process and ingredients - structure and organisation, word and image, differentiation - we would have to receive all our information by the spoken word. We would enter another Dark Ages, a thousand years of ignorance, prejudice, superstition and very short lifespans.

So, in the nutshell, graphic design is an important role in nowadays design process.

AZANISA  

1102702292

WEEK 5 | GRAPHIC DESIGN

According to about.com, the process and art of combining text and graphics and communicating an effective message in the design of logos, graphics, brochures, newsletter, posters, signs, and any other type of visual communication. Today's graphic designers often use desktop publishing software and techniques to achieve their goals. 

A good graphic design is when people can understand, feel, and get the message that the designer wanted to show. It must create something that can catch and pleasing people's eye, and grab attention of the viewer. Good design is like connection. It can connect and communicate with the audience through an interesting design. A good design combines creative, technical, and research skill together. 

ads poster

 product packaging

 printed media(book)

typography poster

However, to achieved an outstanding design, it's necessary to know whether the audience will understands the message that the designer wanted to share is delivered or not. A designer that trying to design without it is like trying to communicate without knowing the language of the audience. It's easy to create a design but it's hard to create a good design. Something that we must think outside the box. 

AISYAH ALWANI

1102702359