Monday, December 26, 2011
design and protoyping - week 10
- 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
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
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
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
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
- 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
- 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
- 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
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)
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
-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
- 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
- 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
# 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
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
- 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.
There are two types of visual variables: Selectivity and Associativity
Selectivity:
- Most variables are selectivity.
- Locate objects at a glance.
- Shapes are not selective.
Associativity:
- Something blends into one another.
Gestalt Principles:
- Proximity
- Similarity
- Continuity
- Closure
- Area
- Symmetry
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
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
Saturday, November 19, 2011
Week 5- 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 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!
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
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.
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
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)
![]() |
| Push to on and off. |
![]() |
| Push down to on and up to off. |
![]() |
| Pull to on and off. |
![]() |
| Turn to on and off. |
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. |
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 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
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
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) |
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)
FIT ? (week 3)
1102700146
Monday, October 31, 2011
Human-Computer Interaction (HCI) - Week 2
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
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
Tuesday, October 25, 2011
interaction studies : week 2
interaction between people and computer
a discipline with the design, evaluation and implementation.
its about human in the end
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.the purpose to invent and reinventing
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.
design : making things better for people







