Week 10 - by Alice Low Soo Ying

Physical Design
Design is a process about making choices and decisions. We need to made decision in using suitable design element and apply design principal that we know in the design. Design is about balance. In visual, it about the balance of the element of design. In the term of interactive, it about the balance between Environmental, User, Data, Usability requirement and Functional requirement.

Designing for a different culture
Some guidelines when designing for a different culture for international design:
• Be careful about using images that depict hand gestures or people.
   - "thumb-up", "moutza",  "A-OK", the "Corna"
• 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 number formats, currencies, weights and measurement systems.
• 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.

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 overall design.
  - For technical implementation.
  - As a means of cooperation within design teams.
  - As a means of cooperation across professional boundaries.
• Use for the notion of plus and minus of scenarios
   - Attempt to capture the most possitive and the most negative consequences of a particular proposed design solution.
   - Helping designers to gain a more comprehensive view of the proposal.

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

How to use 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
Generate Card-based Prototype from Use Cases

References:
Lecture notes
http://en.wikipedia.org/wiki/Prototype

Week 9 - by Alice Low Soo Ying

What is a prototype? A prototype is:

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

• 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

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

Low-fidelity Prototyping

• is one that does not look very much like the final product.

• Ex: uses materials that are very different from the intended final version such as paper, cardboard rather than electronic screen and metal.

• tend to be simple, cheap and quick to produce for support the exploration of alternative designs and ideas.

• important during conceptual design and are never intended to be kept and integrated into the final product. They are for exploration only.

Type of low-fidelity

• Storyboard
- consist of a series of sketches showing how a user might progress through a task using the product under development
• Sketches
- relies on sketching but often people find it difficult to engage in this activity
• Index cards
- use index cards (small pieces of the cardboard about 3x5 inches), each card represents 1 screen or one element of a task, in user evaluation, the user can step through the card
• Wizard of Oz

High-fidelity prototyping
• Uses materials expected to be in the final product and looks very much like the real thing
• Ex: prototype of a software system developed in Visual Basic vs paper based mock up
• It is useful for selling ideas and testing out technical issues

Problems with high-fidelity prototyping
• 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

Compromises in prototyping
• by their very nature, prototypes involve compromises: the intention is to produce something quickly to test an aspect of the product
• thus the prototype must be designed and built with the key issues in mind
• there are 2 common compromises:
- horizontal prototyping
- vertical prototyping

Conceptual Design
• it concerned with transforming needs and requirements into a conceptual model (an outline of what people can do with a product and what concepts are needed to understand how to interact it)
• key guiding principles :
- keep an open mind but never forget the users and their content
- discuss idea with stakeholders
- use low-fidelity prototyping to get rapid feedback

Developing an initial conceptual model
• some elements is a conceptual model with derived from the requirements for the product
• some consideration to create initial conceptual model
- which interface metaphor would be suitable to help users understand the product?
- which interaction type(s) would best support the user's activities?

Interface metaphors
• Combine familiar knowledge with new knowledge in a way that will help the user understand the system.
• Choosing suitable metaphors and combining new and familiar concepts requires a careful balance between utility and fun and based on a sound understanding of the users and their context.
• 3 step in choosing good interface metaphors:
- Understand what the system will do
- Understand which bits of the system are likely to cause users problem
- Generate metaphors

Interaction Types
• Different interface types prompt and support different perspectives on the product under development and suggest different possible behaviours.
• WIMP/GUI interface
• sharable interface
• tangible interface
• advance graphical interface

Week 8 - by Alice Low Soo Ying

Requirement
This week lecturer talks about requirement. What is requirement?
- statement about an intended product that specifies what it should do or how it should perform.
- should be specify,unambiguos and clear as possible
- 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 Requirement
- Functional (what the system should do)
- Non-functional (constraints and development)

Interaction Design
- Functional Requirement
- Data Requirement
- Environmental Requirement
- User Characteristics Requirement
- Usability goals and user experience goal

Functional Requirement
Capture what the product should do.

Data Requirement
- capture the type
- volatility
- size or amount
- persistence
- accuracy
- value of the required data.

Environmental Requirement
The circumstances in which the interactive product will be expected to operate.

There are 4 characteristics of environmental requirements.
- Physical Environmental
- Social Environmental
- Organisational Environmental
- Technical Environmental

Usability goals
- effectiveness
- efficiency
- safety
- utility
- learn ability
- tracking which is the user's performance.

User experience goal
- fun, enjoyable, pleasurable, aesthetically pleasing and motivating which is the user's perception.

Data Gathering for Requirements
There are difference type of data requirements
- Interviews
- Focus Groups
- Questionnaires
- Direct observation
- Indirect observation
- Studying documentation
- Researching similar products

Contextual Inquiry
Contextual inquiry is an approach that follows an apprenticeship model: the designer works as an apprentice to the user. There are 4 main principles of contextual inquiry.

Context-Emphasize on going to workplace and seeing what happens.
Partnership-Developer and user should collaborate in understanding the work.
Interpretation-Observations must be interpreted in order to be used in the design and the interpretation should be in cooperation between user and developer.
Focus-Keeping the data gathering focused on your goals.

Data Gathering Guidelines for Requirements
- Focus on identifying the stakeholder's needs.
- Involve all the stakeholder groups.
- Have more than one representative from each stakeholder group involve.-Support data gathering sessions with suitable props
- task descriptions, prototypes.

Data Analysis, Interpretation and Presentation
- Requirement activity is iterated a number of times before a set of stable requirements evolves, the description will expand and clarify.
- 4 techniques that have a user-centered focus and are used to understand user's goals and tasks:
a] Scenarios
b] Uses cases
c] Essential use cases
d] Task analysis

Week 6 - by Alice Low Soo Ying

Simplicity

Simplicity is not simple. Designing for simplicity is a process of elimination and simplicity forces you to have a good reason for everything. In film it's called Foreshadowing.

"If you can't explain it simply, you don't understand it well enough."

Albert Einstein

Chunking

The elements of perception + memory = chunking. The presentation of information is simplified by dividing it up. Bite size for easy storage. Forming chunks in working memory depends on how information in presented.

Contrast 

Contrast, differences along a visual dimension either in size or color. Contrast is irregularities in design that communicates information and makes element stand out. For example, designer will use contrast color for design typo poster because it can grab people attention.

Visual Variables 

Visual variables are used for communication by encoding data and drawing distinctions between visual  elements. There are two ways of visual variables which are selectivity & associativity. Most variables are selective but shape is not selective in general because it is hard to pick out triangles a midst a sea of rectangle.

User-centered design (UCD) is an approach to design that grounds the process in information about the people who will use the product. UCD processes focus on users through the planning, design and development of a product.

Problems
• Misunderstandings.
• Interviews are not precise.
• Never know what happen in the future.

Solutions (REMEMBER)
• users are 1st class members in the design process
- active collaborators vs passive participants
• users considered to know best about the subject matter
- know all about the work content
• Iterative process
- all design stages subject to revision

Methods of Involving the User
The easiest way is to TALK TO THEM.

Problems of Users
• hard to get a good pool of end users to test your product. (expensive, reluctance)
• users are not expert designers. (don't accept them to come up with design idea from scratch)
• user are not always right. (don't expect them to know what they want)

Methods of involving the user
• Prototype
• Direct Observations
• Indirect Observations
• Interview
• Focus group
• Studying Documentary
• Contextual interviews + site visits


References:
http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html
http://www.webcredible.co.uk/user-friendly-resources/web-usability/user-centered-design.shtml

Week 5 - by Alice Low Soo Ying

What is Graphic Design?

Good design makes a difference in our world. Whether it’s communicating a social ideal, helping a business attract clients, motivating people to join an organization, enabling citizens to vote for the candidate of their choice, or simply helping travelers find their way through a busy airport, good design means connection.

Graphic design is a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form (i.e., printers, programmers, signmakers, etc.) – undertaken in order to convey a specific message (or messages) to a targeted audience. The term "graphic design" can also refer to a number of artistic and professional disciplines that focus on visual communication and presentation. The field as a whole is also often referred to as Visual Communication or Communication Design. Various methods are used to create and combine words, symbols, and images to create a visual representation of ideas and messages. A graphic designer may use typography, visual arts and page layout techniques to produce the final result. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.

Common uses of graphic design include identity (logos and branding), web sites, publications (magazines, newspapers, and books), advertisements and product packaging. For example, a product package might include a logo or other artwork, organized text and pure design elements such as shapes and color which unify the piece. Composition is one of the most important features of graphic design, especially when using pre-existing materials or diverse elements.

Image-based design

Designers develop images to represent the ideas their clients want to communicate. Images can be incredibly powerful and compelling tools of communication, conveying not only information but also moods and emotions. People respond to images instinctively based on their personalities, associations, and previous experience. For example, you know that a chili pepper is hot, and this knowledge in combination with the image creates a visual pun.

Type-based design

In some cases, designers rely on words to convey a message, but they use words differently from the ways writers do. To designers, what the words look like is as important as their meaning. The visual forms, whether typography (communication designed by means of the printed word) or handmade lettering, perform many communication functions. They can arrest your attention on a poster, identify the product name on a package or a truck, and present running text as the typography in a book does. Designers are experts at presenting information in a visual form in print or on film, packaging, or signs.

Image and type

Designers often combine images and typography to communicate a client's message to an audience. They explore the creative possibilities presented by words (typography) and images (photography, illustration, and fine art). It is up to the designer not only to find or create appropriate letterforms and images but also to establish the best balance between them.

Symbols, logos and logotypes

Symbols and logos are special, highly condensed information forms or identifiers. Symbols are abstract representation of a particular idea or identity. The CBS “eye” and the active “television” are symbolic forms, which we learn to recognize as representing a particular concept or company. Logotypes are corporate identifications based on a special typographical word treatment. Some identifiers are hybrid, or combinations of symbol and logotype. In order to create these identifiers, the designer must have a clear vision of the corporation or idea to be represented and of the audience to which the message is directed.

Graphic design have the ability to publish anything that is written and there is a difference in layout, compared to that of the printed paper. Not only that, it also can help people to connect with their audience and reach their business goals.

Week 4 - by Alice Low Soo Ying

Lecture for this week is about affordance. Affordance is a term created by the perceptual psychologist J. J. Gibson to refer to the qualities of the physical world that suggest the possibility of interaction relative to the ability of an actor (person or animal) to interact. 

McGrenere and Ho presented three fundamental properties of an affordance as defined by Gibson:

• An affordance exists relative to the action capabilities of a particular actor.

• The existence of an affordance is independent of the actor’s ability to perceive it (emphasis added).

• An affordance does not change as the needs and goals of the actor change.

For example, the affordance of a branch as ‘a nice place to sit’ are dependent on:

• the qualities of the branch: how much weight it supports, how high of the ground it is.

• the capabilities of the actor: how much they weigh, ability to climb.

Based on the original definition and fundamental properties, affordance, in relation to interface design, relates more to (physical) input devices: mouse, keyboard, and stylus. When discussing the qualities of a graphical user interface, the preferred term is perceived affordance.

Perceived Affordance

• context: [where] the environment or process in which the element is displayed;

• culture: [society] the influence of societal ‘norms’ on the individual’s understanding and use of a object;

• instinct: [unconscious] an unconscious association, often linked to physical characteristics, for example, the size of an object in relation to the human form;

• mental model: [expectations] the user’s understanding and expectations of interaction with the object.

Forcing Functions

• Lock in: User cannot exit an operation until a certain condition is met.

• Lock out: Makes starting some operations difficult.

• Interlock: Combines elements of lock-ins and lock-outs.

In conclusion, affordances reflect the possible relationships among actors and objects: they are properties of the world. Designers can invent new real and perceived affordances, but they cannot so readily change established social conventions.

References:
http://www.motive.co.nz/glossary/perceived-affordance.php
http://architectures.danlockton.co.uk/category/forcing-functions/

Week 3 - by Alice Low Soo Ying

For the previous week, HCI is introduced to us and for this week, we continue discuss about HCI but focus more on the problem of HCI. The most common problem occurs between the interaction of human and computer is the output of the machine is not always what the user wants. Computer use input and output devices to process information that are upload into it while human process information through language, communication, and interaction. Why is it important to achieve FIT?

Expressive Interfaces

• Colour, icons, sounds, graphical elements and animations are used to make the ‘look and feel’ of an interface appealing

– Conveys an emotional state

• In turn this can affect the usability of an interface

– People are prepared to put up with certain aspects of an interface (e.g. slow download rate) if the end result is very appealing and aesthetic.

User frustration

Causes:

•When an application doesn’t work properly or crashes

•When a system doesn’t do what the user wants it to do

•When a user’s expectations are not met

•When a system does not provide sufficient information to enable the user to know what to do 

•When error messages pop up that are vague, obtuse or condemning

•When the appearance of an interface is garish, noisy, gimmicky or patronizing

Anthropomorphism

• Attributing human-like qualities to inanimate objects

- Cars and computers.

• Well known phenomenon in advertising 

– Dancing butter, drinks, breakfast cereals

• Much exploited in human-computer interaction

– Make user experience more enjoyable, more motivating, make people feel at ease, reduce anxiety

Criticism of Anthropomorphism

•Deceptive, make people feel anxious, inferior or stupid.

•People tend not to like screen characters that point out mistakes.

•Many prefer the more impersonal.

•Studies have shown that personalized feedback is considered to be less honest + makes users feel less responsible for their actions.

What will human react when they see this? What will they feel? Definitely, human will be unhappy and will start stressed out with it. It might take times and sometimes still could not solve it. With the technology we have nowadays, people keep trying their best to create computers which are user friendly. In my opinion, humans are the most unpredictable part of any system and therefore the most difficult to model for HCI design. No matter how good the design is in the future, it will still end with human own preferences. 

References:

http://www.interaction-design.org/encyclopedia/human_computer_interaction_hci.html

http://www.ece.cmu.edu/~koopman/des_s99/human/

Week 2 - by Alice Low Soo Ying

The first lecture in Interaction Studies class was about HCI. So, what is HCI? 

HCI actually is the short for Human-Computer Interaction, a discipline concerned with the study, design, construction and implementation of human-centric interactive computer systems. A user interface, such as a GUI, is how a human interacts with a computer, and HCI goes beyond designing screens and menus that are easier to use and studies the reasoning behind building specific functionality into computers and the long-term effects that systems will have on humans.

Although many other disciplines are concerned with HCI, it is important in computer science and systems design, because it involves the design, implementation and evaluation of interactive computer systems in the context of the users task and work. The ideal designer of an interactive system would have expertise in such diverse fields.

• Psychology and cognitive science for knowledge of the users.
• Ergonomics for the users physical capabilities.
• Sociology to understand the wider context of the interaction.
• Computer science and engineering to be able to build the necessary technology.
• Graphic design to produce a pleasing visual interface.
• Technical writing to produce the manuals.
• Business to be able to market the product.

Because human-computer interaction studies human aspects as well as machine side and it is often regarded as the intersection of computer science and behavioral sciences.

1) Behavioral Science:
Studies the human factors of computers. Focus on the evaluation of interactive computing systems for human use in terms of perceptions, beliefs, usabilities, and staisfactions which includes both software (characters or objects displayed by software on a personal computer's monitor) and hardware (input received from users via hardware peripherals such as keyboards and mice, and other devices).

2) Computer Science:
Studies the new interfaces and interaction techniques within given constraints. Focus in developing new design methodologies, experimenting with new hardware devices, prototyping new software systems, exploring new paradigms for interaction, and developing models and theories of interaction.

References:
http://www.webopedia.com/TERM/H/HCI.html
http://searchcio-midmarket.techtarget.com/definition/HCI
http://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction