Monday, December 26, 2011

design and protoyping - week 10

Designing for different culture

- product supports international paper sizes, envelope sizes & address format.
- avoid integrating text in graphics
- Allow for text expansion when translated from english


- Scenarios can be used to expressing or imagined a situations to help in conceptual design


4 roles for scenarios

- A basis for overall design.
- For technical implementation.
- for cooperation within design teams.
- for cooperation across professional boundaries.

Used in plus and minus scenarios meaning which is to capture most positive or most negative consequences of a prototype design

Azura Binti Abd.Mokmin
1102700146

Sunday, December 25, 2011

week 10

Designing for different culture

Guidelines:
- Ensure that the product supports international paper sizes, envelope sizes & address format.
- Allow for text expansion when translated from english


 scenarios 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
- 4 roles for scenarios:
                                    *A basis for the overall design
                                    *For technical implementation
                                    *As a means of cooperation with the  design teams
                                    *As a means of cooperation across professional boundaries 

Generating prototypes in design: 


- Steps in the travel organizer scenario
*Focus solely on the screen
*Focus solely in the environment
- Generating storyboards from use cases
- Generating card-based prototype from use cases

How to Using prototypes in design
Prototyping physical design
- Expand the cards to generate a more detailed software or paper-based pro type.
Tool support:
- To support sketching tools, environments to support icon and menu design to widget libraries and so on

Tuesday, December 20, 2011

Week 10- Physical Design: Getting Concrete

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


When we are designing for a different culture like for international design, we should:
- Be careful about using images that depict hand gestures or people.
- Use generic icon.
- Choose colour that are not associated with national flags or political movements.
- Ensure that the product supports different calenders, date formats and time formats.
- Ensure that the product supports different formats, currencies, weights and measurement system.
- Ensure that the product supports international paper sizes, envelope sizes and address format.
- Avoid integrating text in graphics as they cannot be translated easily.
- Allow for text expansion when translated from English.

Using Scenarios in Design
Four roles for scenarios
a) A basis for overall design.
b) For technical implementation.
c) As a means of cooperation within design teams.
d) As a means of cooperation across professional boundaries.

* Used for the notion of plus and minus scenarios
- Attempt to capture most positive or most negative consequences of a particular proposed design solution.
- Help designers gain more comprehensive view of the proposal.

Generate Storyboards from Scenarios
How?
- Break into steps.
- Focus solely on screen.
- Focus solely on environment.
Designers are forced to think on the screen and also environment part seperately.

Generate Card-based Prototype from Use Cases

Paper prototype is a fast and easy way to change and re-design your interface.

Four important people are involved in Paper Prototyping which are:
- user
- person who acts as a computer
- someone who becomes the facilitator
- observer

Other ways of prototyping involves animatics and rapid sketch prototyping which uses a program to make it interactive.

Tool Support- support prototyping through sketching tools, environment to support widget and icons.

Design and Prototyping - Week 10

Designing for different culture

Guidelines:
- Ensure that the product supports international paper sizes, envelope sizes & address format.
avoid integrating text in graphics as they cannot be translated easily
- Allow for text expansion when translated from english

Company can decide whether-produce 1 site that appeal across all cultures OR tailor to each country's website to the local culture.

example: coke vs. pepsi

Using scenarios 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
- 4 roles for scenarios:
  *A basis for the overall design
  *For technical implementation
  *As a means of cooperation within design teams
  *As a means of cooperation across professional boundaries i.e. in a multidisciplinary team

Generating prototypes in design

Generating storyboards from scenarios:
- Steps in the travel organizer scenario
  *Focus solely on the screen
  *Focus solely in the environment
- Generating storyboards from use cases
- Generating card-based prototype from use cases

Using prototypes in design

Prototyping physical design:
- Expand the cards to generate a more detailed software or paper-based pro type.
Tool support:
- To support sketching tools, environments to support icon and menu design to widget libraries and so on


Amirah Farhanah Binti Daud Ahmad
1102700149

Monday, December 19, 2011

Week 9- Design and Prototyping

What is Prototype?
- paper-based outline of  a screen or a set of screen
- 3D paper or cardboards mockup
- stacks of hyperlink screenshot
- electronic "picture"

To me, prototype is the first sample of your product.which is use for testing purposes before the real product is made.
It allows stakeholders to interact with the envision product, gain experience in realistic setting and explore the imagined users.

Prototype:
- limited representation of a design that allows users to interact and explore it's usability.
- aid where discussing ideas with stakeholders.
- communication device among team members.
- effective ways to test ideas.

Example:
It clarify vague requirements.
To do user testing and evaluation.
Check the design direction is compatible with the rest of the system.

Types of Prototyping
1. Low-fidelity Prototype
2. High-fidelity Prototype

Low-fidelity Prototype
- Does not look very much like final product.
- Use material like paper or cardboard rather than electronic screens or metals.
- Simple, cheap and quick to produce => support ideation exploration.

Types of low-fidelity prototype includes:

Storyboard
- consist of a series of sketches showing how user might progress through a task when the product is under development.

Sketching
- relies on sketching but often find people difficult to engage in this activity.
- uses symbol or icon.

Prototyping with index cards
- use index cards (small pieces of cardboard about 3x5 inches).
- each card 1 screen.

Wizard of Oz
- uses a software based prototype
- user sits at a computer screen and interacts with the software as though interacting product.

High-fidelity Prototype
- Uses material that you would expect to be in final product and produces a prototype that looks much mire like the final thing.
- Example: Prototype of a software system developed in Visual Basic versus Paper-based Mockup.
- Common prototyping tools: Flash, Visual Basic and Smalltalk.
- Issues with high-fidelity prototype:
   = take too long to build
   = reviewers and testers tend to comment on superficial aspects rather than content
   = developers are reluctent to change something that have created for hours
   = can set high expectations
   = one bug can bring test to a halt
   = useful for selling ideas.

Advantages of low-fidelity prototypes:
- lower development costs
- evaluate multiple design concepts
- useful communication device
- address screen layout issue
- useful for identifying market
- proof-of-concept

Compromises (intention to produce something quickly to test an aspect of the product)
Prototype design built with key issue.

Two common compromises
- Horizontal prototyping
- Vertical prototyping

Conceptual design: moving from requirements to first design
- Concept model: an outline of what people can do with a product and what concepts are needed to understand how to interact with it.
- Discuss ideas with stakeholders.
- Use low-fidelity.
- Iteration.

Developing Initial Conceptual Model
- Interface metaphor = help user understand
- Interface types = support user activity
- Interface types = suggest alterative design option

3 steps in choosing a good interface metaphor
- understand what the system do
- generate the metaphor
- understand bits

Evaluating metaphor
Four types of Interaction
- Instructing
- Conversing
- Manipulating
- Exploring

Example: Computer games implied these interaction. Instructing (tutorial), Conversing (talking to players and NPC; non-player characters), Manipulating (changing costume, face expression or style) and Exploring (new places in the game).


Interface types- different interface types prompt and support perspective on product under development
- WIMP or GUI interface
- Sharable interface
- Tangible interface
- Advanced graphical interface

Tuesday, December 13, 2011

Design and Prototyping - Week 9

What is a prototype?

- Paper-based outline of a screen/sets of screens
- Electronic "picture"
- 3 dimensional paper/cardboard mockup
- Stack of hyperlinked screen shots

Allows stakeholders to:
- Interact with an envisiones product
- Gain experience in realistic setting
- Explore imagines uses

A prototype is a limited presentation that allows users to interacts and explore its usability.

- Aids when discussing ideas with stakeholders
- Communication device among team members
- Effective ways to test ideas

Example:
*Clarify vague requirements
*To do user testing and evaluation
*Check a certain design

Types of prototyping:
- Low-fidelity (does not look very much like the final product; simple)
- High-fidelity (uses material that you would expect to be in the final product)

Low-fidelity:
-Storyboard
  *Ex: Screens of GUI-based software, scene sketches
-Sketches
  *Device own symbol and icons
- Index cards
  *Step through cards
-Wizard of Oz


Compromises in Prototyping:
- Two common compromises:
   *Horizontal prototyping
   *Vertical prototyping

The prototype must be designed and built with the key issues in mind.

Conceptual designs: moving from requirements to first design
- Is concern with transforming needs and requirements into a conceptual model

Key guiding principles:
- Keep an open mind
- Discuss ideas with other stakeholders
- Use low-fidelity prototyping
- Iterate, iterate, iterate

Developing an initial Conceptual Model:
- Some elements in a conceptual model will derive from the requirements of the product

Interaction types:
- Instructing
- Conversing
- Manipulating
- Exploring

Interface types:
- WIMP?GUI interface
- Sharable interface
- Tangible interface
- Advanced graphical interface

Amirah Farhanah Binti Daud Ahmad
1102700149

Monday, December 12, 2011

Design and Prototyping (week 9)

Interaction studies

Design and prototyping

What is prototype?
-start in small scale, full of bugs, not properly functioning

Example ;
• Paper based-outline
• Electronic outline
• 3d paper/cardboard mock-up
• Stack of hyperlinked screen shots

Meant for stakeholder to ;
-interact with envisioned product
- Gain experience in realistic setting
- Explore imagined uses

A prototype is a limited presentation that allows users to interacts and explore its usability.
It is an helpful aid when discussing with stakeholders.
It also can be use as a communication device among team members.
It is an effective way to test an idea

Ex : clarify vague requirements, to do user testing and evaluation, check the design compability

2 types of prototyping
- Low-fidelity and high fidelity

LOW FIDELITY

= one dies not look very much like the final product

Ex ; uses material that are very different from the intended final version such as paper,cardboard
(Storyboard to be exact)
# tend to be simple,cheap and quick to produce (support exploration of alternative designs and ideas)
# important during conceptual design but are not meant to be included in final project

High-fidelity

= uses material that you would expect in to be in the final product.
Issues?

- 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 bug in a high-fidelity prototype can bring the testing to halt

= Useful for selling ideas and for testing out technical issues.

Compromises in prototyping

= intention to produce something to give the users an input.

#must be designed and built with the key issues in mind.

2 common compromises ( Horizontal and vertical prototyping)

Concept model is an outline of what people can do with the produc and what concepts are needed to understand how to interact with it.
Some elements in a conceptual model will derive from the requirements for the product.

In simple words : TRY AND ERROR !

Azura Binti Abd.Mokmin
1102700146

week 8

what are requirements?
-statement about an intended product that specifies what it should do or how it should perform.
-should be specify,unambiguos and clear as possible
-ex : time to download any complete web page is less than 5seconds vs teenage girl should find the site appealing.
- must know how to tell when they have been fulfilled.
 
types of requirements :
functional requirement
    -what the system should do
    -ex : word processor should support a variety

interaction design :
-functional requirement
-data requirement
-environmental requirement
-user characteristic

fucntional requirement:
-capture what the product should do.

data requirement:
-capture the type,volating,size/amount,persistance,accuracy,and value of requirred data.
ex: share-dealing application.

environmental requirement/context of use :
the circumstance in which interactive product will be expected to operate.

-four characteristic of environmental requirement :
=physical environment
=social environement
=organisational environment
=techinical environment

user characteristic :
-capture the key attributes of the intended user group.
   =user abilities and skills,users nationality,educational background,preference,personal circumstances.physical or mental disabilties
  =the collection of attributes for a typical user is called a user profilee.
  =any one product may have a number of different user profiles.
  =to bring user profiles to life,they are turned into a number of personas
  =personas are richn description of typical users of the product under development that the designer can focus on design the product for. they dont describe real people but are synthesized a number of real user sho have been involved in data gathering exercised.

usability goals
-effectiveness.efficiency,safety,utilit -> user preferences

user experienced goals
-fun,enjoyable,pleasurable..aesthetically,pleasing and motivating -> user's perception

Requirements - Week 8

Requirements are:
- Statement about intended product that is specific. Specifies what it should do and how it should perform.
- Should be specific, unambigous and clear as possible.
- Must know how to tell when they have been fulfilled.

Types of requirements
- Functional (what the system should do)
- Non-functional (constraints and development)

Interaction Design
- Functional requirements
- Data requirements
- Environmental requirements/context of use
   *Physical
   *Social
   *Organisational
   *Technical

User Characteristics:

Usability goal ==> Effectiveness, efficiency, safety ==> User's performance

User experience goals ==> Fun, enjoyable, pleasurable ==> User's perceptions

4 techniques that have a user-centered focus and are used to understand user's goal and tasks:
- Scenarios (informal narrative description)
- Use cases (emphasis on user-system interaction/ its from the user’s perspective, not the system’s)
- Task analysis (used mainly to investigate an existing situation, not to envision new products)
- Essential use cases (developed to combat the limitations of scenarios and use cases)

What to achieve?

Understand user + Produce a set of stable requirements  = DESIGN

Amirah Farhanah Binti Daud Ahmad
1102700149

Week 8- Requirements

What are requirements?
- Statements of an intended product which specifies what it should do or how it should perform.
- Must be specific, unambiguous (not open to more than 1 interpretations) and clear.
- Must know how to tell when they have been fulfilled.

Example:- Having to fulfill a requirement of loading time within 3 seconds and teenage children should find the site appealing.

3 second loading requirement to log in the game Pockie Ninja.
Pockie Ninja Game site.

In Software Engineering, there are 2 types of requirements:-
1) Functional requirements (what does the system do)
2) Non-functional requirements (what are the constraints there are on the system and its development)

Generally, there are many like:-
1) Functional requirement (capture what the product should do)
2) Data requirement (capture the type, votality, size/amount and persistence of the product)
3) Environmental requirement (context of use)
4) User characteristics (capture the key attributes of an intended user group)
5) Usability and user experience goals (how well the user perform to achieve applications goals and
their perceptions)

Environmental requirements has 4 characteristics:-

a. Physical environment - Lighting, noise and dust.
b. Social environment - Social aspects of interaction design collaboration and coordination (how many user interact with the design)
c. Organizational environment - How good is the user support
d. Technical environment - The different technologies the product will work on (constraints)


User characteristics is to gather samples on:-
- user's ability, skills, nationality, educational background, preferences, personal circumstances, physical or mental disabilities.
- collection of attributes "a typical user" is called a User Profile.
- a product may have different user profiles.
- to bring user profile to life, they turned it into a number of personas.
- Personas are rich descriptions of typical users.

Samples (gathered in large amount) --change to--> Personas (and also given names) like: 
Persona A: Joe Persona B: Amy

User Goals (also known as user performance)- effectiveness, efficiency, safety, utility, learnability and tracking.
User Experience Goals (also known as user perceptions)- fun, enjoyable, pleasurable and aesthetically.

Data Gathering

Interviews:
Semi-structured- preset questions
Unstructured- can ask more questions than the given preset questions.
Focus group
Questionnaires- gather initial responses.
Direct observation- looking at the user using old platform as we make a new application but might be  influence by the old platform
Indirect observation
Studying documentation- existing documentations
Researching similar products- compare different product with the same function

Data Gathering Method must have more than one technique. Triangulation is the best way to obtain a better results of data.

Contextual Inquiry- an approach that follows apprentice model: designer works as an apprentice to user
1) Context:- Emphasize on going to workplace and see what happen.
2) Partnership:- Developer and user collaborate in understanding the work
3) Interpretation:- Observations must be interpreted.
4) Focus:- Data gather focus on user.

Stockholders: Everyone who is involved in building the application.

From prototypes, task and descriptions all of it is an Iterative process (repeating process)
Four techniques that have a user-centered focus.
a. Scenarios
- help users to describe
- like storytelling method from the user
- extract what they like and dislike
b. Use Cases
- user-system interaction
- users are called an "actor"
- form of text or graphical
c. Essential use care
- to combat limitations by scenarios and use cases.
- does not restrict to technology
d. Task analysis
- to investigate an existing situation, not to envision new products
- based on existing system rather than new ones


What are we trying to achieve in requirement activity?

Understand User + Produce a set of stable requirements = Design

A design and it's processes is mostly based on the "Users".

User requirements ====> Lots of Research ====> Analyze ====> Categorize ===> Design

Monday, December 5, 2011

Week 8 - Identifying Needs and Establishing requirements

What are REQUIREMENT?

# a statement about what it should do or how it should perform
# should be specific, unambiguous and clear as possible
#Must know how to tell when they have been fulfilled

Example : I want a completed web page to be loaded in less than 5 seconds.

Types of requirement

Divided in 2 :
- Functional requirement (what the system should do) EX : word processor
- non-functional requirement (constraints and development)

Types of requirement

Interaction design
*Functional requirement = Capture what the product should do
*data requirement
*environmental requirement = circumstances in which interactive product will be expected to operate
*visual characteristic

USABILITY GOALS - how well the users can perform
USER EXPERIENCE GOALS - the perception of the users

Data gathering will need to expand and clarify and confirm initial requirement

Data gathering are influenced by several factors ;

-nature of the task
- the participants
-the analyst
- the resources available

*more than one method used to triangulate things,

CONTEXTUAL INQUIRY
*an approach that follows an apprenticeship model : the designer works as an apprentice to the user

4 main principle;
-context
-partnership
-Interpretation
-focus

4 techniques that have user centred focus= are used to understand user’s goal and tasks ;

-scenario (informal narrative description)
-use cases ( emphasis on user-system interaction/ its from the user’s perspective, not the system’s)

# can be shown using text or graphical information
-essential use cases (developed to combat the limitations of scenarios and use cases)

-task analysis (used mainly to investigate an existing situation, not to envision new products)

What are we trying to achieve?

-Understand the user
-Produce a set of stable requirements

WHY those two essential? It is to DESIGN.

Azura binti abd.mokmin
1102700146

Monday, November 28, 2011

week 6





What is simplicity?


-Designing in simplicity is a process of elimination
-simplicity forces you to have a good reason for everything
-in film's its called foreshadowing.

CHUNKING


-The elements of perception + memory = chunks
-presentation of information is simplified by dividing it up
-bite size for easy storage
-forming chunks in forming memory depends on how information is presented.


Visual Variables are used for communication by encoding data + drawing disticntion between visual element.
There are two ways that visual variables works on perception. First is selectivity and second one is associativity.

Selectivity : Degree to which a single value can be selected from the entire visual field and using position,size,orientation,hue,texture,value.



THE GESTALT PRINCIPLE
-proximity
-similarity
-continuity
-closure
-area
-symmetry


USER CENTRED SYSTEM DESIGN

UCD shifts focused from the designer of the applications/system/web site to the user of that application.

DIFFICULTIES OF UCD
-good design not always = satisfy customer
-design is collaboration betweeen designer + customer
-design evolves
-if the inputs from user is wrong, then the system will suffer.


UCD is participatory Design,
PROBLEMS:
-misunderstandings
-interviews are not precise
-we never know what problems may crop up in the future.

METHOD OF INVOLVING THE USER

easiest way, TALK TO THEM

-contextual interview+site visits.
-interviews
-prototyping
-focus group
-direct observation
-indirect observation
-studying documentation

THE PROBLEM OF USER
-hard to get good pool of end user to test you product
  >expensive,reluctant etc
-users are not expert designers
  >dont expect them to come up with ideas design from scratch
-users not always right
  >dont expect them to know what they want






Sunday, November 27, 2011

User Centred Design- week 6

User Centred Design

Human Perception
-Chunking
-visual variables
-Gestalt principles of grouping

What is Simplicity?
# Designing simplicity is a process of eliminiation / delete whatever that is unnecessary
# Should HAVE a good reason for everything
# In film, its called FORESHADOWING =
“Simplicity is NOT simple”

-If you can’t explain things in a simple manner then you don’t understand well enough.

CHUNKING
- Elements of perception+memory = chunks
- Bite size of easy storage
- Forming chunks in working memory depends on how information is presented
CONTRAST
- Shows the differences along a visual dimension
- Make information stands out
VISUAL VARIABLES
- Used for communication
- Encoding data + drawing

2 ways – selectivity and associativity
#Selectivity
- Degree to which a single value can be selected from the entire visual field.
- Most variables are selective
- Shape however is not selective
#Associativity
- Associativity is the OPPOSITE of selectivity
- Easy to ignore the variable / blends in the environment

Gestalt principles
-proximity
-similarity
-continuity
-closure
-Area
-symmetry

+System centred design >> System attributes first

User Centred System Design

What is UCD?
- Shift the focus from the designer to the user of application

Difficulties of UCD
Good design not always = a satisfied customer

Why?

Design always evolves along the time, thus the satisfaction is always goes higher up.

UCD is a participatory design

Problems with UCD? – misunderstandings,interviews

Users are the first member in designing process = know all the work context


Methods of involving the user
- Hard to get a good pool from the users to test the product.
- Users are not designers = Users are not always right actually.

Azura Binti Abd.Mokmin
1102700146

User-Centered Design - Week 6

3 main principles of Human Perception:
- Chunking
- Visual variables
- Gestalt

What is simplicity?
Designing for simplicity is a process of elimination. Simplicity forces you to have a good reason for everything. In film, it is called foreshadowing.

Simplicity is not simple.

Make sure your design has a purpose!

"If you can't explain it simply, you don't understand it well enough" -Albert Einstein

Chunking:
The elements of perception + memory = chunks (take information and put it into categories to remember better. Chunk into big category.)

Visual variables:
Used for communication by encoding data and drawing distinctions
There are two types of visual variables: Selectivity and Associativity

Selectivity: 
- Degree to which a single value can be selected from the entire visual field.
- Most variables are selectivity.
- Locate objects at a glance.
- Shapes are not selective.

Associativity:
- Opposite of selectivity
- Something blends into one another.

Gestalt Principles:
- Proximity
- Similarity
- Continuity
- Closure
- Area
- Symmetry

User-centered design (UCD)
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. 

Designers need to analyze and foresee how users are likely to use a product and test the validity of their assumptions with regards to user behaviour 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.

Methods of Involving User:
- TALK TO THEM!
- Contextual interviews + site visits
- Interview
- Prototype
- Focus group
- Direct Observations
- Indirect Observations
- Studying Documentary


Reference:
http://en.wikipedia.org/wiki/User_centered_design

Amirah Farhanah Binti Daud Ahmad
1102700149

Week 6 - User-Centered Design

Human Perception
Chunking
Visual variable
Gestalt Principle of Grouping


Graphic Design Guideliness
Simplicity
Contrast
White Space
Balance
Alignment


Simplicity
-the process of elimination
-it is not simple.
-have a good reason for everything.
-In film, it is called foreshadowing.

Chunking (categorizing)
-Elements of Perception + Memory = Chunks
-simplify by dividing informations.
-bite size for easy storage.

Contrast
-difference along a visual dimension.
-communicates information.
-elements stand out.

Visual variables-by encoding data + drawing distinctions
There are two types of visual variables: Selectivity and Associativity

Selectivity-degree of a single value selected from the entire visual field.
-most variables are selectivity.
-locate objects at a glance.
-shape are not selective.
-it's hard to pick out triangles.

Associativity-opposite of selectivity
-something blends into one another.

Gestalt Principles
1. Proximity
2. Similarity
3. Continuity
4. Closure
5. Area
6.Symmetry

White Space (also known as negative space)- A space between 2 or more elements like text, graphics or other elements which helps separate them from one another.

Balance- act 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:-
a. Symmetrical balance
b. Asymmetrical balance
c. Radial balance

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

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


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

Difficulties
1) Good design is not equals to a satisfied customer.
2) Collaboration between designer and customers is needed.
3) Evolves by time.
4) If input from the user is wrong, the system will suffer.

UCD - Participatory Design

Problems:
1. Misunderstandings.
2. Interviews are not precise.
3. Never know what happen to the future.

Therefore, solutions... Remember,

1) User are 1st class members in design process.
 - active collaborators vs passive participants
2) User consider knows best about the subject.
 - know all about work context
3) Iterative process (process of repeating)
 - design subjects to revision

Methods of Involving User
Easiest way :- TALK TO THEM
Contextual interviews + site visits
Interview
Prototype
Focus group
Direct Observations
Indirect Observations
Studying Documentary

Problems of Users
- Hard to get a good pool of users to test your products.
- User are not expert designers.
- User is not always right.


References:
http://www.usask.ca/education/coursework/skaalid/theory/cgdt/balance.htm
http://en.wikipedia.org/wiki/White_space_(visual_arts)
http://www.design-lib.com/alignment-in-graphic-design-gd.php

Sunday, November 20, 2011

week 5 : graphic design

Do you know what is graphic design? 

this is what graphic design look like

normally, you can find graphic design in magazines,typography,books and other medium.

Graphic design is used to convey some meaning to the audience. This is why there are a lot of advertisement nowadays are using graphical design like this to send the message to buyers. The graphics must related to the real intention so that it can persuade and attract people to know more about the product before buy it. 

failed to send the true message through graphic design is what we call as communication breakdown.

graphic design in advertising:


graphic designs is a combination of images, text, and a bit of decoration.  it also includes illiustration, painting and drawing.  they must make sure that the message can be noticed by audience then only their works is considered success.





Saturday, November 19, 2011

Week 5- What is Graphic Design?

What is Graphic Design?
Graphic Design is an interface for an application. Its function is to obtain communication with each other.
From sign language to body language. Then comes in the print press introduced by Johann Guternberg. Now, the internet has become the main form of mass communication throughout the world through graphic design.

Sender --------"through a medium"------> Receiver

Messages send though all types of medium deals with graphic design. From T-shirt, fashion, logo, magazine, prinout, photographs, computer-generated images, letter forms, typefaces, movie credits, TV ads, books, magazines, menus, computer screens, gum wrappers, billboards and many more are involved in the category of graphic design.

It is the art of combining an image, picture and decoration  that would gives out a good design.

Rule 1: Dialogue
There is no monolog in Graphic Design. Monolog is something from your own keeping which has only been seen by yourself, close friends or family members without exposing to public. This leads to no communication (globally). Graphic Design is same as having a dialogue with another person but in this case, we are not there and the artwork (graphic design) becomes the form of dialogue.

Graphic Designer works with drawing, painting and illustrations. People involve in these works are named as:
Draftman, Painter and Illustrator.

The important thing about graphic design is;
-Messages are sent out and understand or remembered by others.
-Complex yet simple design which communicate the idea or meaning.
-Carry the "soul". Example, movie poster. It shows the personality of the character.
-Express the content.

In graphic design, you must know and understand the rules before you break the rules.

Graphic design is also to inform, persuade, organize, locate, identify, attract attention and provides pleasure.

In graphic design, to sell your products you must:
1. Create attention. (By using different images / Use vibrant, dull or light colours as contrast with the background.)
2. Interest.
3. Desire.
4. Action.
5. Condition. (for selling a product)

Elements of a Graphic Design:
-Slice of Life.
-Use metaphor.
-Put things in contrast.
-Use abstract images.
-Elements and Principle of Design.

Create different types of characters which are unique but is still recognizable by people helps contribute to a good graphic design. Apply the Unique Selling Proportions (USP) to help sell your products.
Everyone knows that, 'A picture worth a thousand words' this is where the importance of graphic design is apply in order for better communication.

Good designers are:
-Good in arrangements
-Solutionist
-Creative visionaries

Tuesday, November 15, 2011

Graphic Design - Week 5

Graphic design is a form of communication. It is more than just a pretty design. A great graphic design is capable of sending out specific messages to a targeted audience. Because a voice is not enough to reach a bigger audience, a tool/medium such as screens, posters, etc is used to display graphic designs which are created cleverly by designers to convey a specific message.

Graphic design that fails to send out a message is what we call communication breakdown.

So what is graphic design?

Graphic design is a mixture of text, image, picture and decoration. A graphic design must not be monologue. It must be able to create a dialogue - create interaction. Must be able for it to speak to us and make us understand! A picture at your home is a monologue. It does not send any message, its just a picture. But when you introduce it to the world through magazines, etc, it becomes a dialogue - sends out a message - communicate ideas!

Graphic designers work closely with drawing, painting, illustration, etc. If a graphic designer can make you understand the graphic design, then his/her work is done! If you can understand and communicate, then that is a good graphic designer!

We may have not realise it, but we are all graphic designers. When we sign our names - create our own signatures- we become graphic designers!

Before we can create our own graphic design, we need to learn and understand everything. The number one rule is to not break the rule!

We can find graphic design in:
-Books
-Typography
-Magazines
-Menus
-Even on computer screens

Graphic design is part of our daily lives!

"Graphic design informs, persuades, organizes, stimulates, locates, identifies, and attracts attention"

Graphic design masters put things into context. Sometimes using text, sometimes using images. These people are solutionists and creative visionaries.

Amirah Farhanah Binti Daud Ahmad
1102700149

Monday, November 14, 2011

Graphic Designs (Week 5)

Graphic Design is about communication

#The idea of images are to communicate

#One way of communication

As time passes by, communication become so important that the graphic design is needed.

What is Graphic design?

- Some kind of typography. A message to send.

- An art of combining image,picture n decoration in the process doing fashion design,magazines, etc.......

In graphic design, we must have ;

-message

-medium

-sender

-receiver

-feedback

In graphic design, there is NO monologue. UNDERSTAND THE MATERIAL!

Purpose = To inform/sell idea ... not self satisfaction.

Graphic Designer work with?

#Drawing, painting,illustrations

#Photographs

# Computer generated images

# Also designed the letterforms that make up various interfaces

TASK for Graphic design is SIMPLE but ABLE to communicate. It carries an IDEA.

Usually found in movie credits and TV ads.

In order to make a good design, we must have a good composition.

Where to find?

# Graphic design is a part in our daily life.

Example?

From simple things like gum wrappers, huge things like billboards, t-shirts you wearing

Graphic design informs, persuades,organizes,stimulates,locates,identifies,attract attentions and provide pleasure. MUST have element = creating things that can grab ATTENTION, INTEREST ,DESIRE ,SENSUALITY and in the end, ACTION. Once you have all of these, then BOOM! Your product can be sold just fine =D

We make use of other experience in our work as the content to show/recall situation and sparks the interest of buying the products.

Its not just for advertisers, but for every media.

#Keep your own style, develop it!

To be the designer, you have to be the MASTER of the content.

Summary?

Graphic design deals with text and images. IMAGES tell thousands of words without it being spoken.


Azura Binti Abd.Mokmin

1102700146

Affordance - Week 4

Affordance is a quality of an object which allows an individual to perform a certain action.

When we automatically know how to turn on/off switches, open doors using doorknobs.. this is what we call good affordance.

How do we know what actions to perform without even reading the instructions? Through experience of course! We have engaged in such things as switches, doorknobs, etc. Through our experiences, we automatically know how to operate these things/what actions to perform. We have been twisting, pulling doorknobs since we can remember. The actions become automated when we see these familiar things.

What is the point of affordance? The point is for the user to know what to do just by looking at it.

In a nutshell, all design is persuasive and what is profitable to the client is also profitable to the user.

Amirah Farhanah Binti Daud Ahmad
1102700149

Sunday, November 13, 2011

Affordances - Week 4

In Business , the customer/client always right. So we have to work according to their preferences. But, as a designer, we usually knows what the customer actually really wanted and since there are many choices, we have to decide the affordances.

-affordance : Created by psychologist J.J Gibson

#suggest possibility of interaction relative to the ability of an actor(person or animal) to interact

# is a quality of an object, or an environment, which allows an individual to perform an action.

Examples; (Good affordances – Door knobs)

The affordance of a branch as ‘a nice place to sit’ depend on :

*What the qualities of the branch can do. THE CAPABILITIES.

* The users capabilities/ what the users can do

Properties of affordance

* exists relative to the action capabilities of a particular actor

*its existence is independent of the actor’s ability to perceive it

*does not change as the needs/goals

The Point of affordances # users know what to do by looking at it

-perceived affordance :

-forcing functions

Think about this

#how does a robot do know what to with a ball?

#Perceived affordance = perceived properties of the object that suggest u/user could use it

Elements of perceived affordance

- Context =where

- Culture = Society

- Instinct = unconscious

- Mental models= expectations

Design to GUIDE the user.Can be either way , give ways/minimizes options

In conclusion and to keep it simple

-All design is persuasive

-Profitable to the client = profitable to the user


Azura Binti Abd.Mokmin

1102700146

Week 4- Affordance

Affordance is the actual properties of an object that we perceived in many possible ways which determine how it could be used. Properties of affordance relies on the object itself.
It is all a persuasive technology where people are being persuade to decide something without being able to really decide totally for themselves. What we want is not really as what is being descibe upon.

Consider Affordances (Object) = Consider Us (Humans)

Good affordances is where people would automatically know what to do without even reading the instructions. Example, like switching on lights. How do we know how to turn on the lights with these switches?

Push to on and off.
Push down to on and up to off.
Pull to on and off.
Turn to on and off.
Of course the design of the switch or the object helps in the process of affordance.
It is how an object communicates the way it is used.

How do robots like the AIBO, the robot dog detect something and react to it?

AIBO-robot dog.
It is equipped with an artificial intelligence (AI) system which allows it to react with things around it. Affordance is a applied in this interface as what we perceived in the robot dog is same as a real dog. Almost all traits are included to it to maximise the percentage of the likeliness with a real dog. It is also equipped with sensors which helps detect its surroundings.

Perceived affordance (the user) is where the properties of the object we perceived that suggests how you could use it.

Elements of Perceived Affordance
Context-Where
Culture- Society
Instinct- Unconsciousness
Mental Models- Expectations

It could guide the user or even giving or minimizing options for the user.

Using forcing function focuses attention before doing something.
3 types of force functions which are Interlock, Lock in and Lock out.

Interlock is the combination of both Lock in and Lock out. It is to fulfill one function in order to fulfill another.
Lock in gives out a confirmation status with a "yes" or "no" choice.
Lock out gives out only 1 choice.

Summary:
1. All design is persuasive.
2. Profitable to client = Profitable to user.
3. It all goes back to us, Humans.

References:
http://www.robotbooks.com/sony_aibo.htm
*All images are taken from Google Images.

Saturday, November 12, 2011

week 4 lecture [Affordance]

The user

-the customer is king
-king is always right
-king never bargain

"but there are so many choices"

sometimes why you have to decide?
-affordance


affordance : - created by psychologist J.J Gibson. it refers to quality of the physical world that suggest the possibility of interaction relative to the ability of an actor(person or animal) to intearact.

or in simpler definition,

an affordance is a quality of an object or an environment , which allows an individual to perform an action

example of affordances
- the affordances of a branch as 'a nice' place to sits depends on :

1. the qualities of the branch
2. the capabalities of the perosn.actor?
3. the affordance does not change as the needs/goals of the actor change.

e.g: doorknobs are for the open the door,slots are for inserting things. etc

summary
1. all design is persuasive
2. profitable to the client = profitable to the users.


Monday, November 7, 2011

Achieving FIT - Week 3

Computers are machines. They do not have emotions. Therefore, when they alert us with errors or anything else, its almost like they're speaking alien to us. People normally dont understand these confusing computer terms.

Do we prefer to have the computer sweet talking to us?

Hmm.. that depends. For instance, when you are doing an online quiz and the computer responses as "That's correct! Good job!", it feels like the computer is cheering you on. But if the computer responses just "Correct", its simple and plain and is just.. mehh.

When Google Chrome cannot find a certain website, it responses "Oops! Google Chrome could not find ......". Other browsers would just say "Error 404. Page not found". Not everyone knows what an Error 404 is. In this case, its nice to have the computer talking directly to the point.

But there are sometimes when we just dont want to read all the details on the alert window. When we are stressed out and the computer starts sweet talking. That turns into annoying!

I think that the computer should stay as formal as it can when it comes to prompting alerts and messages. It doesn't have to start sweet talking, it could do better than talking in alien computer terms that most of us dont understand. It should just get straight to the point.

With the technology we have nowadays, people start to create more and more computers which are user friendly. But it depends on how people react to it.

Amirah Farhanah Binti Daud Ahmad
1102700149

Week 3

Problem: The context of the Human versus the context of the Computer.

Brain vs. Processor

How do humans react with computers with different processing language? Humans languages are many but in computers they use their own language which is 0s and 1s.
Humans are different in sense of emotions. Computers do not have them.

To fulfill our users needs, interactivity system has to be applied to these electronics which makes it respond nearly emotionally to us.
For example, this interface would be used in educational softwares where after you give the correct or wrong answer it will respond to you immediately. This method act as an encouragement to us (users) because we need the encouragement help us move on. It is a way to overcome user frustration.
Who would not want some encouragement in life? It would be boring is something would not respond to us.

Nowadays, people would want something that have expressive interface, does not make the user frustrated, persuasive technology, anthropomorphism and conceptual models in a certain software application.

Without these elements, human would less likely be in front of the computer. Expressive interface is involve in multiple applications. It is a way where the computers react by giving a reply. Not the normal answer but a more expressive answer. Other than that, expressive in a form of facial is also implied depending on the software.

User frustration is where the computer gives out a certain error and we tend to get mad because it is not performing well. Again we go back to the Humans. Eventhough the computer is right, it is still being blame by humans. Therefore, to avoid user frustration to the computers. The computer is made to apologise to the user. This is a part where it is built into it. It will prompt you the brief problem of what had happened. This will cool down the user a bit and prevent any further anger towards the computer.
Would you get an error sounded like "ERROR 303" or There is a plugin problem type 303.?
Surely the second one is more preferable since it has a bit more information then the first one.

Persuasive technology like I said above, is a form of encouragement to the user. Anthropomorphism is a certain character which have human-like attributes:- the hands, legs, eyes and many more. These are mostly seen in cartoons like Mickey Mouse.



Mickey Mouse. (Image taken from Google images)
Conceptual models like avatars and virtual characters in multiplayer games is also one of the need in applying into this computer software applications for the sake of human satisfaction giving it a model of emotions. Games online have been applying facial expressions to make it more interesting and believable.

Building a relationship with the user and the machine is an important component.
"Gimmicks" also affects the usability of an interface. It acts as a method of persuasion for the users.

However, humans want more and more from the computers especially in interactivity part. Maybe in the next couple of years there are more and more interesting things which are build to fulfill most of the human needs.

achieving fit (week 3)

computers is a machine that human use to get information, to produce something, or to interact with others. Computer usually use a formal alerts to user(human) to notify the humans what's happening to the computer or whatnot. is it a good thing or a bad thing when computer use a very formal language when interact with users? 

what will the users feel when they see an alert like this?
will they be happy to read something technical stuff like this? normal people will just skip it and clicked ok but if they get this a few times, users might feel annoyed and stressed out. 

however,  will they be happy if got something like this?

Not really right? someone might as well feel annoyed when they actually in serious mode then suddenly this alert appeared, it will irritate the user's feeling. 

in my opinion, i prefer computer to interact as formal as they can with users because what's the big deal about computers interact informally with humans when it just a machine after all. 


in conclusion, with technology developing now, they tend to create computers that is friendly to user and make them able to interact with each other. either it is a good or a bad things to do, that is all depends on people to judge them. 

FIT ? (week 3)

The main problem in achieving FIT in applications is the interaction between the human and the computer itself.

The question here, Why is it achieving FIT is important?

- In simple words, it is to avoid user frustation

Good Computer design are thought to have anthropomorphism (human like qualities in an object) because humans tend to like using things that similar to their nature.

With interactive system, humans like to respond with emotion rather than static statement. but, due to each human have their own preferences, surveys & research has been conducted to get the positive feedbacks so that the designers can generate a good design that all can accept.

There are other ways in achieving FIT, it all depends on the targeted users. But bottomline, no matter how good the design is, it will end with own preferences =)

Azura binti Abd.Mokmin
1102700146


Monday, October 31, 2011

Human-Computer Interaction (HCI) - Week 2

Human-Computer Interaction (HCI), is the study of how people interact with computer.

HCI improves the interactions between users and computers. Making computers more usable to the users which concerns designing and developing new interfaces, methods and processes of designing interfaces to name a few.

The goal of HCI is designing systems that minimize the barrier between the human's cognitive model of what they want to accomplish and the computer's understanding of the user's task. (Wikipedia)

Why do we like to reinvent things?

We keep reinventing things to add more features, functions, usability, to keep up with the current technology and simply making it even better than before.

Amirah Farhanah Binti Daud Ahmad
1102700149

Week 2- HCI

Human-Computer Interaction or known as HCI is the communication between a person and a computer. It may sound weird as one would make communication with a device or a tool.
Well, communication usually involves between two people. To me, it is important for the message we are trying to say or communicate is understandable by the second party.
Maybe it is another concept to be discuss.
However, in this case, it involves an object.

HCI is all about human.

The main purpose of it is to invent and reinvent. In particular, mostly are products.
Human use this purpose to obtain a better life.

Everything starts with a "Design" which involves the user, creativity and business.
The important thing is to make the idea into the real thing. For example products, like handphones. They keep on inventing and reinventing new ones and the design is for the users. Creativity is applied in the phone as an application like unique icons which is still familiar to users are implimented in the product. In business sake, this helps them gain profit at the same time benefits the users as they obtain what they wanted.

IDEA (design) ==> REAL

Products are design to target human behaviour are mostly nowadays products which are long-lasting and durable. They are design the way we wanted them to be. It is for our sake too.


Designing for Interaction: Designing for People

Positive user experience is another important criteria is designing for an interaction. We should at least gives the user an experience especially a new one or something they might remember and benefit them in an educational way of course. It is more to giving satisfastion to the user which is then given to them as a memory.


Experience is something you can obtain by doing it. Simple example is when you work for a company, you gain experience from it. In terms or learning process.

When the knowledge gain from your working time, happy times with co-workers or even the time you get scolded by your boss, it is all kept in your memory bank in your brain. These is where the memories are formed.

However, in a different sitution, when you experienced something like being bitten by a dog, it saves in your mind and becomes a memory.
Memories are something you would cherish no matter the good or the bad times.

Experience (something you do) => Memory


You may not know it but even you microwave oven or even yout toaster is a computer but not as powerful as the computer itself.

As a conclusion, HCI plays an important role for the sake of making a better life for human. Everything we do it leads back to the humans as humans started it all and wanting more from it.

Friday, October 28, 2011

What is HCI ? - week 2

Definition of HCI?
= Human Computer Interaction.

Formal definition?
= is the study,planning and design of the interaction between people and computers

When talking about interaction , the most important thing about it is How the information is delivered because in the end, its all about how humans received the information.

Still don't quite understand? okay~

To be simple, HCI basic goal is to improve the interaction between users and computers by making the computers more usable and receptive to the user's need.

Besides, HCI is quite important as poorly designed human-machine interfaces can lead to many unexpected problems.

So, to make a good human-machine interfaces, what we need is a good design. Good design is 'making things better for people'.

As human always find a way to defy the designs so the HCI is needed to help invent and reinvent the computer interfaces.

Azura Binti Abd.Mokmin
1102700146

Tuesday, October 25, 2011

interaction studies : week 2

This is the second week for the interaction studies class and this week miss Edina is the one who giving the lecture. This week topic is mainly about what is the interaction and how does it interact wth human itself. We are also learnt about HCL which stand for Human Computer Interaction.

There is various of definitions for HCL, 

interaction between people and computer

a discipline with the design, evaluation and implementation.

its about human in the end 

the purpose to invent and reinventing 
 from the last point (above), why do you think people keep reinventing the product that were already invented by other people? . For me, people keep reinventing to keep the product up to date and follow the trends. besides, when people reinventing something, most of the times the product will come out with a better function,features, and make things more easier.

design : making things better for people
design and user: make people feel idiot when see your design when that wasnt from their ideas and they start thinking why can'tthey ever think about that.