Week 6 / Fifth Lecture: User Centred Design [Amirali]

What is UCD?

ucd is user centred design is a user interface design process that focuses on usability goals, user characteristics, environment, tasks, and workflow in the design of an interface. 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.

- Chunking

Chunking is the elements of perception plus memory. That mean is a part of memorizing. Presentation of information is simplified by dividing up. However, the bite size is for easy to storage. Forming chunks in working memory depends on how information is presented. For example, categorized them in a shape and group to memorise.

Visual variables are used for communication by encoding data and drawing distinctions between visual elements. There are 2 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. Associativity is the opposite of selectivity. t is easy to ignore the variable and let it all blend in to one another.

Week 6 / Fifth Lecture: User Centred Design [Weiting]

What is User-centred Design?

UCD shifts focus from the designers of the application/system/web site to the user of that application/system/web site. UCD us also a participatory design.

According to Usability Professionals' Association [http://www.upassoc.org/usability_resources/about_usability/

what_is_ucd.html ], 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. It is also an international standard.

User-centred Design is 

• Developers working with target users
• help define what the system will do & how
• lots of iterative exploration & feedback
• Think of the world in users terms
• user & customer not the same person 
• don’t design for manager’s work process
• Understanding work process
• points where humans and computers intersect
• Not technology-centered/ feature driven

--- User-Centered Design, CS 160, Fall ‘99, Professor James Landay (August 25, 1999)

http://dub.washington.edu:2007/courses/bmrc-courseware/cs160/fall99/lectures/user-centered-design/user-centered-design.pdf

**PS :  The difference between "user" and "customer" is that user are those who will use and buy the product of yours while customer is those who are from any company that the nature of business is highly related  or relevant to your design project [derived from Human Factor and Universal Usability class].

In a meanwhile, from my own understanding, User-centred Design can be defined as :

• Design for human fit-ness / design in the priority to fit for human use.
• A ergonomics design.
• A design that fulfill the human's need.
• Design in the centered of users priority.

Difficulties of UCD : 

• Good design not always = a satisfied customer.
• Design is a collaboration between designers + customers.
• Design evolves.
• If the input from user is wrong, then the system will suffer.

Week 6 / Fifth Lecture: User Centred Design [Wenyong]

From this week lecture class, we knew that Simplicity is not simple.

Simplicity . Chunking . Contrast . Visual Varibles

Designing for simplicity is a process of elimination.
Simplicity forces you to have a good reason for everyday. In film, it's called Foreshadowing. Yet, if you can't explain it simply, you don't understand it well enough which is i agreed with it. Because if you don't know how to express and explain the simplicity, how do other people know it is simply?

Chunking
-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 are used for communication by encoding data and drawing distinctions between visual elements. There are 2 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. Associativity is the opposite of selectivity. t is easy to ignore the variable and let it all blend in to one another.


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 the user:
- the easiest way is.... TALK TO THEM.

as well as:
- interview
- focus groups
- prototyping
- direct observations
- indirect observations
- studying documentation
- contextual interviews + site visits.

References :
http://en.wikipedia.org/wiki/Contrast_(vision)
http://en.wikipedia.org/wiki/User-centered_design

Week 6 | 5th Lecture: User Centered Design. [Wong Mann Ee]

Lecturer : Miss Edina
Date : 22 Nov 2011

User-Centered Design

User-Centered Design process (UCD) is also called Human-centered design process.

"User-Centered Design (UCD) is a user interface design process that focuses on usability goals, user characteristics, environment, tasks, and workflow in the design of an interface. UCD follows a series of well-defined methods and techniques for analysis, design, and evaluation of mainstream hardware, software, and web interfaces. The UCD process is an iterative process, where design and evaluation steps are built in from the first stage of projects, through implementation." (Shawn Lawton Henry and Mary Martinson, Accessibility in User-Centered Design)



In UCD, all "development proceeds with the user as the center of focus." (Jeffrey Rubin, Handbook of Usability Testing: How to Plan, Design, and Conduct Effective Tests, John Wiley and Sons, Inc., 1984) Rubin depicts the User-Centered Design Process as follows:

• The users are in the center of a double circle.
• The inner ring contains: Context; Objectives; Environment and Goals.
• The outer ring contains: Task Detail; Task Content; Task Organization and Task Flow.

UCD Process Steps

While the basic principles and techniques are the same, different variations of user-centered design processes exist. The following example is typical of a UCD process for designing Web applications.


1. Analysis
-Vision, goals, objectives
        Image (feeling)
        Challenges and constraints
-User/Audience analysis
User Categories List
User Categories Matrix with knowledge, experience, and skill (KES) in www, accessibility, html, etc.; connection, environment; hardware, software; AT; frequency of use
Profiles (details, facts, figures)
Personas/Characterizations (made up "person" with name, etc.)
Technique: Field studies, contextual inquiry
-Task/Purpose analysis
Task List
User-Task Matrix
-Information architecture analysis
Content list
Content-User Matrix
Hierarchy, Web relationships
-Workflow analysis
Workflow
Scenarios
2. Design
 - add the usability iceberg image 10% presentation, 30% interaction, 60% conceptual model.
- Conceptual/Mental model, metaphors, design concepts
- Navigation design
- Storyboards, wireframes
- Detailed design
- Paper prototypes
- Online mockups
- Functional online prototypes
3. Evaluation (iterate back to Design)
- Design walkthoughs ("cognitive walkthroughs")
- Heuristic evaluation
- Guidelines reviews
- Usability testing - paper, low fidelity - high fidelity; informal - formal
4. Implementation
5. Deployment

Week 6 / Fifth Lecture: User Centred Design [WeeFong]

User Centred 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 the users through the planning, design and development of a product.       SOURCE: http://www.upassoc.org/usability_resources/about_usability/what_is_ucd.html

User Centred Design Principles

1. Designed for the user and their tasks 

A successful system meets business objectives through being user-centred and task-oriented. Throughout  development, always bear in mind the characteristics of the user population, their real-world tasks, and their working environment.

2. Be consistent

To minimize the learning requirements for users, make the behaviour of common interface elements and dialogue boxes as consistent as possible.

3. Use simple and natural dialogue

The dialogue between user and system should follow the natural sequence implied by the task. All messages and instructions should be in plain English and should use the vocabulary of the intended audience. 

4. Present information early

Don’t overwhelm the user by providing more information or coding than is necessary to perform the task. Where appropriate, present information in a consistent manner and location across different windows to  enhance learn ability.

5. Reduce errors

Reduce errors by guiding the user down the correct path to accomplish their goal. Where appropriate to the task, users' responses should be constrained to avoid error. Similarly, the system should validate data entry as near to the point of input as possible.

 SOURCE: http://www.usabilitynet.org/management/b_design.htm

Simplicity

Simplicity is a process of elimination. That mean simplicity force to have a good reason for everything. There is a film called FORESHADOWING mean that simplicity is not simple. A quot from Albert Eisntein, " if you can't explain it simply, you don't understand well enough ". 

Human Perception

- Chunking

Chunking is the elements of perception plus memory. That mean is a part of memorizing. Presentation of information is simplified by dividing up. However, the bite size is for easy to storage. Forming chunks in working memory depends on how information is presented. For example, categorized them in a shape and group to memorize. 

- Visual Variable

Visual Variable is a form of communication by encoding drawing and date. There are 2 ways that visual variable work on perception. 

1. Selectivity - Make it more attractive and stand out by the position, size, orientation, hue, value and texture. 

2. Associativity - There usually blended together and hard to differentiate the images which is attractive and the main. 

Week 5 / Fourth Lecture: Layout design, screen assets, graphic design basics. [Amirali]

this week we had mr.radzi bedu as our lecture, and he was talking about graphic design through the session.

as he said graphic design is the first element of everything. so every single thing we want to do is with graphic design. we may not be able to answer the question about the definition of graphic design but it's a useful term through our work.

the most common usage of graphic design is through designing the logos, magazine, books.

that was the lesson that we learnt last week.

wikipedia defines is as most often involving a client and a designer and usually completed in conduction with producers of form.

Week 5 / Fourth Lecture: Layout design, screen assets, graphic design basics. [Wenyong]

For this week class, we are lucky to have Mr Radzi Bedu as our guest lecture. His topic today is all about Graphic Design. It is very interesting topic and I'm really attracted with it.

For design student, graphic design is the basic of everything they do.
They will use it anytime, even in assignments or in their career in the future but sometimes as a design student they might not be able to explain What is graphic design. This is because they do not have certain understanding towards graphic design. Today, we are very lucky to listen about the introduction of graphic design before we proceed to our assignment. After the class, I believe that everyone can produce a good graphic design with the knowledge or tips that given by our lecturer, Mr Radzi Bedu.

When we talk about Graphic Design, people will automatically related it into advertisement, logo, poster etc. Yes, I can say mostly graphic design are applied in ads but it does not means that only the advertisement majoring need to learn about it. Actually all the design majoring is starting from the main domain which is Art and the graphic design is one of the basic in art. As time passed by, there are various of design majoring such as interface design, website design, virtual reality and so on. That means all of the design student should learn about graphic design.

For your information,
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!

Week 5 / Fourth Lecture: Layout design, screen assets, graphic design basics. [Wong Mann Ee]

Lecturer : Mr Radzi.Bedu 
Date : 15 Nov 2011

Graphic design is a creative process, most often involving a client and a designer and usually completed in conjunction with producers of form undertaken in order to convey a specific message(s) 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.

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

Week 5 / Fourth Lecture: Graphic Design [Weiting]

" A brochure that makes watching water boil seem exciting or a business card that entices the recipient to call instead of toss owe at least part of their success to good graphic design -- it doesn't matter if they were created with the latest hot software or an old ink pen."

 [ Source of Reference : http://desktoppub.about.com/cs/basic/g/graphicdesign.htm ]

Several Definition of Graphic Design : 

According to Design Libraries.com, graphic design is the process and art of combining text and graphics and communicating an effective message in the design of logos, graphics, brochures, newsletters, posters, signs, and any other type of visual communication.

A bit differ from above, Wikipedia defined graphic design as a creative process – most often involving a client and a designer and usually completed in conjunction with producers of form (i.e., printers, programmers, sign-makers, 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.

[ Source of Reference : http://en.wikipedia.org/wiki/Graphic_design ]

• Graphic design is a visual communication by a skillful combination of text and pictures in advertisements, magazines, books, etc.

[Source of Reference : wordnetweb.princeton.edu/perl/webwn ]

Graphic Design is an arrangement of type and visual elements along with specifications for paper, ink colors and printing processes that, when combined, convey a visual message.

[ Source of Reference : http://entireimaging.com/index.php?id=13 ]

• Graphic Design is the use of graphic elements and text to communicate an idea or concept.

[ Source of Reference : www.graphicsquote.com/glossaryofterms.html ]

• Graphics design is the use of visual elements to express a message.

[ Source of Reference : www.genteelprint.com/glossary.html ]

• Graphic design also known as visual design, graphic design refers to the visual communication of information using elements such as color, images, typography and layout.

[ Source of Reference : www.ultra-high-speed-mn.org/CM/Custom/Glossary.asp ]

Basic Elements of Graphic Design : 

There are five basic elements of graphic design, there is : 

1. Lines
2. Shapes
3. Mass
4. Texture
5. Color

[ Source of Reference : http://www.design-lib.com/graphic-design-basic-elements-gd.php ]

Last but not least, here is a website that I want to share with you all, it is an interesting and useful post that I found while doing some research about graphic design :

How to Make Your Clients Say 'YES' to Your Designs!!!

http://www.graphicdesignblog.org/clients-say-yes-your-designs/

Week 5 / Fourth Lecture: Layout design, screen assets, graphic design basics. [WeeFong]

Graphic design with the definition refers to artistic and professional, in order to "visual" as a communication and presentation. Through a variety of way to create and combine symbols, images and text that can be convey ideas or messages as a visual performance. Graphic designer may use typography, visual arts, layout and other aspects of professional skills, to create plans to achieve the purpose. Usually refers to the production of graphic design process, and finally complete the artwork. Basically, graphic design will include magazines, product packaging, web design and advertisements. For example, the packaging of a product may contain trademarks. 

Composition is the most important graphic design element of full composition allows different visual materials in harmony. Graphic design is to giving a visual beauty to enjoy, but more importance is to convey a message and a concept to the consumers. Graphic design not just focus on the surface of the visual appearance, also should think about the information and communication of a design. The title, text, artwork, slogan, company names, trademarks, color, contours and others are the mainly basic elements.

Graphic design is a combination of technology and art, is a product of the business community, in the business and creative needs of art and design the ideal balance requires objectivity and restraint, the need for the client through the mouth of the author speak. Graphic design and artist different, because the design is to meet the aesthetic but also practical, to help people imagine, people-oriented design is a need, not just in decoration. Graphic designer needs excellence, continuous improvement, the need to challenge themselves, to their own declaration of war. The key lies in the design and found that only continued through the depth of feeling and experience to do so, to impress others is a challenge for designers. 

In conclusion, graphic design is the process and art of combining text and graphics and communicating an effective message in the design of logos, graphics, brochures, newsletters, posters, signs, and any other type of visual communication. Graphic design is a very exciting career to enter into. You'll often be working with cutting edge technology, using your creativity, and having fun doing it. If you pay attention to detail, are patient, creative, and like solving problems, then you are well on your way.

Week 4 / Third Lecture: Understanding and conceptualizing interaction [Amirali]

this week topic is affordance, which I find it quiet interesting. Affordance is defined in Wikipedia as a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling. The term is used in a variety of fields: perceptual psychology, cognitive psychology, environmental psychology, industrial design, human–computer interaction (HCI), interaction design, instructional design and artificial intelligence.

The word "affordance" was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). To Gibson, affordances are a relationship. They are a part of nature: they do not have to be visible, known, or desirable. Some affordances are yet to be discovered. Some are dangerous. I suspect that none of us know all the affordances of even everyday objects.

A graphical user interface allows a user to interact with a computer without entering code. The combination of an input device (such as a mouse or stylus) and visual representations of the workspace and tasks, the user is able to interact with the computer in a manner similar to the physical manipulations available in the real world Source: http://www.motive.co.nz/glossary/gui.php

Week 4 / Third Lecture: Understanding and conceptualizing interaction [Wenyong]

The lecture's topic for this week is Affordances. [week 4] I really found that this topic was simply interesting. Affordances, is also known as one of the principles of User Interface Design which included seven principles, they are Tolerance, Simplicity, Visibility, Affordance, Consistency, Structure and Feedback.

Affordance is defined in Wikipedia as a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling. The term is used in a variety of fields: perceptual psychology, cognitive psychology, environmental psychology, industrial design, human–computer interaction (HCI), interaction design, instructional design and artificial intelligence.


In other words, Affordance is the
Ability to create something that the user can't avoid of using it. For example, we must use a mouse in order to control a computer.

The word "affordance" was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). He explored it more fully in his book The Ecological Approach to Visual Perception in 1979. Imagine one of your friends living in Village 1 was nice enough to let you spend hours downloading mp3s onto his computer. Now imagine what it would be like if you had to copy all your mp3s to a CD using a textual user interface. Of course, our life was made much easier with the adoption of graphical user interfaces such as Windows Explorer.

How do Affordance apply to robot?
Affordance is applied on robots through how it is applied to our daily basis. it must be designed and made so that it can benefit our life, and in the same time it must be user friendly.

In conclusion, all design regarding Affordance must be persuasive and able to function as expected. If the object produced is in line with Affordance, then it will benefit the user and profit for the client.

References:

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

Week 4 / Third Lecture: Understanding and conceptualizing interaction [Weiting]

..Affordance..

"...the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. [...] Affordances provide strong clues to the operations of things. Plates 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." (Norman 1988, p.9)

[ Source : http://www.interaction-design.org/encyclopedia/affordances.html ] 

 An affordance is a quality of an object, or an environment, which allows an individual to perform an action. For example, a knob affords twisting, and perhaps pushing, while a cord affords pulling. The term is used in a variety of fields: perceptual psychology, cognitive psychology,environmental psychology, industrial design, human–computer interaction (HCI), interaction design, instructional design and artificial intelligence. (From : Wikipedia)

The word "affordance" was originally invented by the perceptual psychologist J. J. Gibson (1977, 1979) to refer to the actionable properties between the world and an actor (a person or animal). To Gibson, affordances are a relationship. They are a part of nature: they do not have to be visible, known, or desirable. Some affordances are yet to be discovered. Some are dangerous. I suspect that none of us know all the affordances of even everyday objects.  

[Source : http://www.jnd.org/dn.mss/affordances_and_design.html ]

Affordance in GUI's (Graphical User Interfaces)

A graphical user interface or GUI (pronounced GOO-EE) can be defined as a connection between users and the underlying system through physical aspects of the system such as buttons, icons, scroll bars, pop-up or pull-down menus, messages, colours, and pictures (Preece, 1993; Newman and Lamming, 1995). GUIs save us a lot of time and effort in performing actions that would otherwise be a hassle to execute.

[Source : http://ahsmail.uwaterloo.ca/kin356/afford/gui.htm]

• Important Concept
• Buttons drawn as 3D shapes appear to "stick out" and afford pushing.

Summary : 

• All design is persuasive.
• Profitable to the client = profitable to the user.
• The customer is the King. Customer is always right.

Further study recommend :

1. The Concept of Affordance in Usability. 

[ http://research.cs.vt.edu/usability/projects/uaf%20and%20tools/affordance.htm ]

2. The Use and Evaluation of Affordance in HCI 

[ http://www.irma-international.org/viewtitle/13191/ ]