Human Computer Interaction Unit 23 Week 3 Human Computer Interaction

Principles of HCI Design Perception Last week Impact of HCI on: Culture & The Economy This Week Principles of HCI Design Perception How does this relate to last week?

Appetiser Get your brain working James May Though Control Appetiser: 5-7 mins

LO1 Investigate how HCI has developed and its impact on society, the economy & culture

Assignment 1 Purpose of this assignment On completion of this assignment, you will have shown that you can explain the impact of HCI on society, the economy and culture Evaluate what impact 2 future developments may have on society, the economy and/or culture. They can be in development now or an idea. Learning: Week 1 – Society – slides + ATM / car parking research Week 2 – Culture & Economy – research + MacBook wheel evaluation

Activity Future developments Watch BBC Click 4th October 2014 http://www.bbc.co.uk/programmes/n3csw97b What is the HCI device being developed? (what is it’s purpose, what does it do?) How does the user interact with it – what is the interface between man and machine? What are the benefits? Why is it being developed?

Outcome 2-Next

LO 2 Understand the fundamental principles of interface design Today’s LOs

How does colour effect a users perception? Activity Using colour when designing interfaces Read the theory sections 1-6 on the following link then answer the questions on the task sheet. http://www.teach- ict.com/as_a2_ict_new/ocr/A2_G063/332_designing_systems/desig n_hci/miniweb/index.htm

Learning Outcome Understand the fundamental principles in designing user interfaces.

• What do you think this could mean? Last lesson you looked at the importance of perception and in particular colour selection, luminance, pop outs.  • We now look at Pattern.  • What do you think this could mean? Does pattern refer to pictures on the GUI or its layout? To a designer it might mean a template. A user interface, using a specific pattern helps to enrich the user experience. You might think that pattern refers to pictures on the GUI or its layout. But to a designer it might mean a template. A user interface, using a specific pattern helps to enrich the user experience.

Capabilities of Human Beings - Perception Cognitive psychology tells us a great deal about how we interpret information from our senses We use five principles to organise what we see into a meaningful whole: Gestalt Psychology – http://homepages.ius.edu/rallman/gestalt.html Proximity Similarity Symmetry Continuity Closure Activity: Click on the link and investigate. Be prepared to tell the rest of the class what you have found out Gestalt’s theory ???

Capabilities of Human Beings - Perception Cognitive psychology tells us a great deal about how we interpret information from our senses We use five principles to organise what we see into a meaningful whole: Gestalt Psychology – http://homepages.ius.edu/rallman/gestalt.html Proximity Similarity Symmetry Continuity Closure

Law of Proximity The brain more readily associates objects that are close to each other than those that are farther apart. Two friends standing next to each other will be viewed as more closely related than someone else twenty yards away. Elements grouped close together will be perceived as belonging to the same group.

Law of Similarity The principle of similarity states that things which share visual characteristics such as shape, size, color, texture, value or orientation will be seen as belonging together. The two filled lines gives the impression of two horizontal lines, even though all the circles are equidistant from each other the larger circles appear to belong together because of the similarity in size.

Law of Symmetry The principle of symmetry describes the instance where the whole of a figure is perceived rather than the individual parts which make up the figure.  What do you see? Two overlapping diamonds, or three objects, a small diamond and two irregular objects above and below it? If you are perceiving according to the principle of symmetry, you will probably see two diamonds overlapping.

Law of Continuation (Closure) The brain does not prefer sudden or unusual changes in the movement of a line. The line can be a continuous line in the traditional sense, or can be a series of objects placed together to form a line. Objects not in that line will be mentally separated.

In 1915, Danish Gestalt psychologist Edgar Rubin experimented with reversible figure-ground patterns (known in painting and photography as positive and negative space). He designed this image to show that the object could be interpreted as either two faces or a vase. However, the brain cannot see both images at once—you must make a conscious decision whether to see a face or a vase in the drawing.

We tend to perceive some visual elements as the figure with a definite shape and border while other elements appear as the ground, further away and behind the main focus of the image.

This question is directly related to the important need of the brain to label objects as near or far in order to judge their relative importance (or danger). Rubin also outlined the principle of camouflage in which there is little or no separation between the foreground and background.

Surroundedness also is also related to figure-ground.

Design implications from Gestalt Psychology Proximity – group related items close together and separate unrelated ones Alignment – place related items along an imaginary line. Align items of equal importance and indent subordinate ones Consistency – make related items look the same Contrast – make unrelated items look different

Activity Gestalt’s Theory Define Gestalt’s theory in your own words in a sentence or two Find an example of each pattern type found within Microsoft Office – (tool bars, menus, dialogue boxes etc.) Take a screen shot and write a one line explanation of what makes it a good example. Activity

Using Excel to create UIs Use Excel functions: Combo Box, VLOOKUP, INDEX Use the developer function in Excel to create a Form to book a course Activity