Week 10 - by Lee Chen Yau

Physical Design : Getting Concentrate
Design is about making choices and decisions. Physical interface of interactive product should not conflict with the user's cognitive process which involved in achieving the task.

Example : Designing for different culture
Some guidelines to help with international design
- Be careful about using images that depict hand gestures or people, such as "thumbs-up", "moutza", "A-OK", the "Corna".
- Use a generic icon.
- Choose color that are not associated with national flags or political movements.
- Ensure that the products support different calendars, date formats and time formats, number formats, currencies, weights and measurement systems.
- Ensure the size of international paper, envelope sizes and address format.
- Avoid integrating text in graphics as they cannot be translated easily and allow for text expansion when translated from English.

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. There are four roles for scenarios:
- A basic for the overall design
- For technical implementation
- As a means of cooperation within design teams
- As a means of cooperation across professional boundaries such as in a multidisciplinary team.

Using Prototypes in Design
Generating storyboards from scenarios:
- A storyboard  represents a sequence of actions or events that the user and the system go through to achieve a task
-  A scenario is one story about how a product may be used to achieve a task.
- How?
   * Break the scenario into a series of steps which focus on interaction
   * Then create one scene in the storyboard for each step

Tool support
- Tools to support prototyping through sketching tools, environments to support icon and menu design, widget libraries and so on.
- User interface software tools support developers by reducing the amount of code that has to be written to implement elements of the user interface such as windows, widgets, and to tie them all together.

Week 9 - by Lee Chen Yau

In week 9, lecturer teach us about Prototype. What is a prototype?
- paper-based outline of a screen/ sets of screen
- Electronic "picture"
- 3 dimensional paper/ cardboard mockup
- stacked of hyperlinked screen shots

Prototype allows stakeholders to:
- interact with an envisioned product
- gain experience in realistic setting
- explore imagined uses

Prototype aid when discussing ideas with stackholders, communication device among team members, effective way to test ideas. For example, clarify vague requirements; To do user testing and evaluation; Check a certain design direction is compatible with the rest of the system development.

There are two types of prototyping, which are low-fidelity prototyping and high-fidelity prototyping.


Low-fidelity prototyping:
- does not look like the final product (eg. uses materials very different from final product such as paper/cardboard)
- simple, cheap, easy to produce
- for exploration only; important for conceptual design but not intended to be kept and integrated into final product
- Storyboard
* series of sketches to show how a user can interact with the product
* for example, screens of a GUI-based software, scene sketches showing how a user can perform tasks using an interactive device.


High-fidelity prototyping:
- uses materials expected to be in the final product and looks very much like the real thing (eg. using Visual Basic)
- useful for selling ideas and testing out technical issues
- users may be faced with the following problems:
* a long time is needed to build a high-fidelity prototype
* reviewers and critics may focus too much on the superficial aspects of the prototype rather than the content
* developers would be less willing to do any alterations when they have spent a lot of time and energy on the prototype
* software prototypes are prone to setting high expectations
* a high-fidelity prototype of great scales can bring the entire testing and development stage to a halt


The Advantages
Low- fidelity prototype
- lower development cost
- evaluate multiple design concepts
- useful communication device
- address screen layout issues
- useful for identifying market requirements
- proof-of-concept

High- fidelity prototype
- complete functionality
- fully interactive
- user driven
-clearly defines navigational scheme
- use for exploration and test
- look and feel of final product
- serves as a living specification
- marketing and sales tool

The Disadvantages
Low- fidelity prototype
- limited error checking
- poor detailed specification to code to
- facilitator-driven
- limited utility after requirement established
- limited usefulness for usability tests
- navigational and flow limitation

High- fidelity prototype
- more expensive to develop
- time-consuming to create
- inefficient for proof-of-concept designs
- not effective for requirements gathering


Conceptual Design: moving from requirements to first design
- is concerned with transforming needs and requirements into a conceptual model
- concept model: an outline of what people can do with a product and what concepts are needed to understand how to interact with it.
- key guiding principles of conceptual design are:
   * keep an open mind but never forget the users and their context
   * discuss ideas with other stakeholders as much as possible
   * use low-fidelity prototyping to get rapid feedback
   * iterate, iterate and iterate


Developing an initial Conceptual Model
- some elements in a conceptual model will derive from the requirements for the product.
- some consideration to create initial conceptual model:
* which interface metaphors 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.
- Ex: Teaching math to 6 year-old children.
- 3 steps in choosing a good interface metaphors:
   * understand what the system will do
   * understand which bits of the system are likely to cause users problems
   * generate metaphors


Interaction Types:
- 4 types of interaction: instructing, conversing, manipulating and exploring.
- Which is best suited to your current design depends on the application domain and the kind of product being developed.
- Ex: Computer game: manipulating, Drawing packages: instructing, conversing.
- Different interface types prompt and support different perspective on the product under development and suggest different possible behaviours.
- WIMP/ GUI interface
- Sharable interface
- Tangible interface
- Advanced graphical interface

Week 8 - by Lee Chen Yau

In week 8, lecturer teach us about requirement. Requirements is a statement about an intended product that specifies what it should do and how should it perform. It should be as specific, unambiguous, as clear as possible. For instances, some people will think that teenager girl is around 17-20 and some people might not. Of course, we will get various of answer based on different people. Thus, requirements must know how to tell when they have been fulfilled.

Types of Requirements

Functional requirements, Data requirements, Environmental requirements, User characteristics, User goals and user experience goals are the requirements of Interaction Design.

Functional Requirements:

Capture what the product should do.

Data Requirements:

Capture the type, volatility, size or amount, persistence, accuracy and value of the required data.

Environmental Requirement:

The circumstances in which the interactive product will be expected to operate. Besides, there are 4 characteristics of environmental requirements.

- Physical Environmental

- Social Environmental

- Organisational Environmental

- Technical Environmental

User characteristics:

Capture the key attributes of the intended user group

- User's ability, skills, nationality, educational background, preferences, personal circumstances, physical or 

  mental disabilities.

- The collection of attributes for a 'typical user' is called a user profile.

- Anyone product may have a number of difference user profiles.

- To bring user profiles to life, they are turned into a number of Personas.

- Personas are rich description of typical users of the product under development that the designers can focus on and design the product for. They don't describe real people, but are synthesized from a number of real users who have been involved in data gathering exercised.

Usability goals:

- effectiveness, efficiency, safety, utility, learnability, and 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.

(i) Context: Emphasize on going to workplace and seeing what happens.

(ii) Partnership: Developer and user should collaborate in understanding  the work.

(iii) Interpretation: Observations must be interpreted in order to be used in the design and the interpretation should be in cooperation between user and developer.

(iv) 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

Reference:

Lecturer's notes

Week 6 - by Lee Chen Yau

According week 6 lecturer class, 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

The elements of perception + memory = chunking.

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.

Tell me about contrast?

Contrast, differences along a visual dimension either in size or color. Contrast is irregularities in design that communicates information and makes elements stand out.

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.

The Gestalt Principles

1. Proximity

2. Similarity

3. Continuity

4. Closure

5. Area

6. Symmetry

What is UCD (User Centered Design)?

UCD shifts focus from the designer of the application to the user of that application. From Wikipedia, user centered design (UCD) is a design philosophy and a process in which the needs, wants, and limitations of end users of a product are given extensive attention at each stage of the design process. The difficulties of UCD is good design is not means that is has satisfied the customer. Design is the collaboration between designers and customers. In a word, UCD is participatory design. Remember users are set class members in the design process. It actives collaborators versus passive participants. Users considered to know best about the subject matter included the work context. Methods of involving the user, the easiest way is TALK TO THEM. The problem of users are hard to get a good pool of end users to test the product. We have to know that uses are not expert designers. Don't expect they would come out with the design ideas from scratch. User is not always right. Don't expect them to know what they want.

Reference:

Lecturer's notes

http://en.wikipedia.org/wiki/User-centered_design

Week 5 - by Lee Chen Yau

In week 5, Mr. Radzi Bedu was our lecturer and the topic was Graphic Design. Many people hear about graphic design but don’t really know what it entails. People look at things all day every day that have been designed by a graphic designer. What is Graphic Design? 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. Graphic Design is a creative process that involves using shapes, colors, symbols, letters and images for an expression or to communicate a message.  Graphic design is the process in which many things are artistically designed to relay a message.

Graphic Design is an interdisciplinary, problem-solving activity which combines visual sensitivity with skill and knowledge in areas of communications, technology and business. Graphic design practitioners specialise in the structuring and organizing of visual information to aid communication and orientation. The graphic design process is a problem solving process, one that requires substantial creativity, innovation and technical expertise. An understanding of a client's product or service and goals, their competitors and the target audience is translated into a visual solution created from the manipulation, combination and utilisation of shape, color, imagery, typography and space.

Graphics Design informs, persuades, stimulates, locates, identifies, attracts attention, provides pleasure.

Images of Graphic Design:

Reference:

http://en.wikipedia.org/wiki/Graphic_design

http://www.agda.com

Week 4 - by Lee Chen Yau

In week 4, lecturer teach us about affordance. From Wikipedia, an affordance is a quality of an object, or an environment, which allows an individual to perform an action. According to Norman (1988) an affordance is the design aspect of an object which suggest how the object should be used; a visual clue to its function and use.

Affordance Examples from Norman:
- Plates (on doors) are for pushing.
- Knobs are for turning.
- Slots are for inserting things into.
- Balls are for throwing or bouncing.
“When affordances are taken advantage of, the user knows what to do just by looking; no picture, label, or instruction needed.”


Nowadays there are a lot of design with intent means designing specific affordances and constraints to guide users. For example using forcing function- design a system so that the right behaviour must occur before the user can take the next step.

There are three types of forcing function: lock in, lock out and interlock.
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.

Reference:
Lecturer's notes
http://en.wikipedia.org/wiki/Affordance
http://www.cs.cmu.edu/afs/cs/academic/class/15494-s08/lectures/affordances.pdf

Week 3 - by Lee Chen Yau

In week 3, our lecturer still continue the HCI for us. Generally, poorly designed human-machine interfaces can lead to many unexpected problems. The problem is HUMAN + COMPUTER and context of human / context of computers.

Context of humans have the information processing (memory, perception, motor skills, problem solving), language, communication and interaction (syntax, pragmatics, body language) & ergonomics (relationship to environment: health, furniture, lighting, design for disabled).
Context of computers have the input and output devices (hardware, software).

Achieving Fit?
1. Expressive interfaces : Color, icons, sound, graphical elements + animations to make Interface
    appealing.
2. User frustration.
3. Persuasive technologies.
4. Anthropomorphism.
5. Conceptual models : between a ect + user experience.

Error Messages:

“The application Word has unexpectedly quit due to a type 2

error.”

Why not instead:

“the application has expectedly quit due to poor coding in the

operating system”

Shneiderman’s 5 guidelines for error messages :
- Avoid using terms like FATAL, INVALID, BAD.
- Audio warnings.
- Avoid UPPERCASE and long code numbers.
- Messages should be precise rather than vague.
- Provide context + sensitive help.

Reference:
Lecturer's notes

Week 2 - by Lee Chen Yau

In week 2, our lecturer was talking about Human Computer Interaction (HCI). HCI is the study of interaction between people (users) and computers. The basic goal of HCI is to make systems user-friendly and receptive to the user’s needs so that people can achieve their results faster, with lesser mistakes and greater satisfaction.

The terms user and computer engulfs a wider meaning with users may be an individual user, a group, an organization or temporally or spatially separated peoples. Similarly computers may be any technology ranging from desktop PCs, to large scale distributed systems or any embedded system. The study of HCI focuses its attention to the "user" being the central part and systems and interaction to be designed and developed that satisfies the user goals in an efficient and cost-effective manner.

So, HCI has its roots in various disciplines like computers, psychology, cognitive sciences, social sciences and ethnography. In HCI we learn to apply these user centered fields of study to develop systems that are highly interactive, efficient, cost-effective and have high degree of usability.

HCI is a multi-disciplinary field

Goals of the HCI research field are

- improving interaction between human and computer

- improving communication and cooperation between humans

Reference:

https://sites.google.com/a/nu.edu.pk/hci-classroom/what-is-hci
http://www.deepamehta.de/docs/hci.html