week 3

Understand the fundamental principles of interface design

In the following sections we will be covering the following areas within this learning outcome,

Perception;
Behaviour models;
Information Processing;
specialist design;

These areas are fundamental in the understanding of potential approaches to design and user consideration.

Perception:

What is perception?
consider the following image

Are the horizontal lines straight?

What do you see here?

Perception can be broken down in to the following sub catagtagorys colour eg trichromatic system, luminance, 'pop out' effect;

Trichromatic systems

According to the trichromatic theory of colour vision, also known as the Young-Helmholtz theory of colour vision, there are three receptors in the retina that are responsible for the perception of colour. This is broken in to three (TRI - Chormatic). One receptor is sensitive to the colour green, another to the colour blue and a third to the colour red. https://www.verywell.com/what-is-the-trichromatic-theory-of-color-vision-2795831

The eye�s retina contains three receptors called "cones" which recognising certain phases in the colour spectrum most often blue, green and red. Blue is the short wavelength, green is the medium wavelength and red is the long wavelength The brain will combine the different information from each of the cones and it will "blend" these to perceive any colour in the visible spectrum.

Using the colours provided, in your groups, have one person sitting in a chair facing forwards, this person must only look forwards and NOT move their head. Others in the group will slowly move the cards on each side of the person in the chair until they come in to view. Record this and then swap between each person in the group to record the data. Evaluate in your groups which colours were more prominent and issues that could be considered.

Popout Effect

The popout effect in the design of a system is one that can grab users to the key area that may require action, or attention.

Which is the best out of these and why?

luminance

Luminance measures how bright something is such as a how bright a computer screen also referred to as photometric brightness. Luminance is connect to the trichromatic system where the eye will use a hierarchy of luminance to see the spectrum of colour, such as red-green-yellow-blue-black-white.

create a simple leaflet on colour and luminance, provide using images good and bad examples.

Create a screen background of graduated shades of one colour, from lightest at the top to darkest at the bottom. Now type a piece of text in a different colour from top to bottom of the screen. Where do you get most detail and the sharpest image? Why is that? Try this with different colour combinations.

Patterns

Gestalt

The area of patterns can be broken down in to the following areas,

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 continuity,

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.

similarity,- The principle of similarity states that things which share visual characteristics such as shape, size, colour, texture, value or orientation will be seen as belonging together.

1. The two filled lines gives the impression of two horizontal lines, even though all the circles are equidistant from each other
2. The larger circles appear to belong together because of the similarity in size.

common groupings,
connectedness;
The pattern or design of an interface is an area that when linked to colour can be a problem if time is not taken in researching/critiquing designs an issue. Patterns could look at the proximity of an object to another, for example, an image and a corresponding button. Issues to consider would be the location of elements on an interface, is it cluttered or sparse?
The continuity of design is key to the success of any interface. When going from screen to screen within a system, or, set of software (Microsoft) the should be some level of autonomy and symmetry. This will aid recognition of key aspects of a system. One such example, software independent is the location of the below image

As with the images above grouping of actions or features will benefit all users, experienced and novice.

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.

Surroundedness also is also related to figure-ground

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.

Open and review the software that is installed on your college PC, find an example of each pattern type found within Microsoft Office � (toolbars, menus, dialogue boxes etc.) Take a screenshot and write a one-line explanation of what makes it a good example note features that cover the above-discussed areas.
ensure that you have notes that are meaningful as these may provide additional reference materials for assessment work.

Schneiderman's 8 Golden Rules

P.h.D. from Stony Brook University Computer Science Dept. in 1973.

CS Professor at the HCI Lab at Univ. of Maryland, College Park.

Introduced the term “Direct Manipulation Interface” in 1983.

Developed Eight Golden Rules of Interface Design.

Recipient of the ACM CHI Lifetime Achievement Award 2001.

1. Consistency

Consistent actions should be required in similar situations.
Identical terminology should be used in prompts, menus, and help screens.
Consistent colour, layout, capitalization, and fonts should be employed throughout

2 Enables frequent users to use shortcuts.

To increase the pace of interaction use abbreviations, special keys, and macros.

3 Offers informative feedback. i.e. Your booking is complete/confirmation printing etc

For every user action, the system should respond in some way.
Report on the state of the system.

4 Design dialogue to yield closure. i.e. exit, home buttons

Sequences of actions should be organized into groups with a beginning, middle, and end. Feedback at the completion of a group of actions shows the user their activity has completed successfully.

5 Offer simple error handling. i.e. error messages/help button /undo buttons

Design forms so that users cannot make a serious error; for example, prefer menu selection to form fill-in, and do not allow alphabetic characters in numeric entry fields.
If users make an error, instructions should be written to detect the error and offer simple, constructive, and specific instructions for recovery.

6 Permit easy reversal of actions. i.e. undo button/back button

7 Support internal locus of control - A feeling that the user is in charge NOT the system, ease of use

Surprising system actions, tedious sequences of data entries, inability or difficulty in obtaining necessary information, and inability to produce the action desired all build anxiety and dissatisfaction.

8 Reduce short-term memory load - Don’t make the user have to guess what to do next, ensure navigation clear i.e. drop down boxes, menu choices etc

Reduce short-term memory load by designing screens where options are clearly visible, or using pull-down menus and icons.

Provide a variety of examples that explain and illustrate the 8 rules

Objects (GEONS)

What are GEONS?
According to Biederman's theory of structured object perception, it is suggested that our brain breaks down complex objects into simple geometric shapes in order to recognise them. These shapes are simple and when combined build a single image.
Consider the below examples

Consider this image, how many shapes can you see?

EXTENTION:
Design a very simple image that could feature in a dialogue box/GUI as an icon to represent an action or instruction.
STRETCH & CHALLENGE:

Behaviour models:

predictive models

Reaction time,

Keystroke-Level Model (KLM)

The Keystroke-Level Model was proposed by Card and Moran (1980) as a method for predicting user performance such as how long it will take an expert user to accomplish a routine task without errors using an interactive computer system.
The keystroke-level model consists of six operators:

K (keystroke or button press)
P (pointing to a target on a display with a mouse)
H (homing the hand(s) on the keyboard or other devices)
D (drawing (manually) straight-line segments with a total length)
M (mentally preparing for executing physical actions)

Other models of interest to the KLM are the TLM or Touch Level Model (TLM).

How to use the Keystroke-Level Model to compare the efficiency of user interfaces from World Usability Day - Wrocław

1.Write down how long you predict it will take to power up your computer, log in and access one application.
2 Carry out the activity while timing. Write down the results and compare with your peers.
3 Try the same activity using all mouse actions and then again, using all keyboard actions where possible.
4 Identify how long it takes for the system to respond.

Download fileKLM Activity sheet

ThroughPut (TP)

Throughput is used to show the overall productivity of a computer and how well a computer performs. This model looks at the response time of a computer when a command is set to it, this is the computer's processing speed and allows users to determine if it needs to be upgraded. This is the "response time" over time the computers response time will increase, this will be because of extra items using the resources of the PC. This is the same as when starting a computer over time it will take longer to boot up which in turn decrease the productivity of a user.

Fitts Law

What is Fitts Law?

Fitts Law is used to predict how quickly a user will be able to move to a specific area based on how far away it is and how large the object you are trying to reach is.

Descriptive models

Key-Action Model (KAM)

KAM identifies the need to evaluate how the user will expect the computer to behave or react and how this may be different from how the computer actually reacts to commands.
A new user may find it difficult to log on using a password and username (they don't understand that the computer is visiting a database to verify, hence it has to be 100% accurate.
A user may get frustrated when they think they have selected "Shift F" but the file menu appears because they have accidentally hit "Alt F"

Buxton's three state model

This model is an expression of the operation of a selection pointer in relation to the stages that a user experiences. "It is described simply as a vocabulary to recognise and explore the relationship between pointing devices and the interaction techniques they afford" (Buxton).
The three states are shown in the image below which is for mouse interaction.

This model is concerned with the pressure and dexterity with which users make movements using mice and touchpads.
The interface will need to be responsive whether the command is via the mouse, a touchpad on a laptop or a button in the keyboard.
A user will have their own preference as to what they are used to using so the system but be equally responsive to ensure usability.

Guiard's Model

Guiard's model of bimanual skill is the preferred method of interacting with computers and input devices. When creating or designing an interface for a system or product there must be a consideration to the ease of use, and more importantly, developers must not rely on the user always inputting data or using mouse actions using a preferred hand. The positioning on the interface must also be accessible and logically laid out if used by a left-handed person. Guiard's model identifies that users with two hands are unlikely to be able to carry out similar actions to the same degree of effectiveness with either hand. Try using your other hand to operate your mouse.
Consider when designing your interface you must consider the ease of use and you must not rely on the user always inputting data or mouse actions using a preferred hand. The positioning of the interface must also be accessible and logically laid out for use by a left-handed person

Refer to Guiard's model and produce a risk assessment based on the following question:
What happens if the user gives an instruction to the interface with the mouse in the left hand and uses the right-hand mouse button instead of the left?

Information processing:

HIP

Human Information Processing or HIP is a model that was developed in the late 1960s. This model attempts to mirror the processing elements within a computer system and the cognitive processes of the human brain. This is an attempt to describe a biological system (the human brain) as an information processing system.
consider the below image

The interface may require the user to make a decision and some decisions take longer than others to make.
1 Identify an interface, perhaps one you use regularly.
2 Make a list of the adaptations that you think would improve the way it currently processes information and/or the speed with which it does this.
3 Be prepared to discuss your results.

for further information go to http://www.billbuxton.com/3state.html

GOMS

goals, operators, methods and selection (GOMS) is a model that was created in the 1980's which suggested that there are four basic elements of interaction with computers:

Goals - what the user wants to achieve/accomplish - it is typically described in an action-object pair in the form, a goal can be defined at any level of abstraction, examples are:
- delete a word
- move-left cursor
- insert database-entry
- compose text
- delete a file
Operators - small steps the user performs to achieve the goal - the actual, basic actions the user executes
Methods - collections of operators that achieve the goal - a sequence of steps that accomplishes a goal
Selection - a set of rules that determine the best method for achieving the goal if there are many different methods available.

The GOM's model in its simplest is best used to represent the simple process of knowledge, following these 4 areas it takes a user through steps that allows them to achieve a task or goal within a set situation.

Specialist:

The creation of designs for specialist systems covers those that have issues with elements such as input or output for the visually impaired this can relate to providing additional opportunities to enable access to the displayed content, in some web browsers feature to enable the user to enlarge text, the use of alternative CSS style sheets can provide options to change contrasts of colour and size of text for any user with a visual impairment. The addition of verbal input to a system where a user cannot see a keyboard would allow access to information. A user who is deaf or hard of hearing may require Loop systems to be integrated to allow them to receive verbal direction, or, the user of and inclusion of subtitles.physical improvements to system can provide access to systems resources such as users that are limited by wheelchair usage not being able to access inputs and or outputs.
remote control devices are often used in situations where users may not be able to access physically, this can be to review a potential situation such as an unexploded world war two bomb, and the team that hopes to defuse it.

head up displays are used in fighter pilot visors to provide them with information where ever they look

Now that you have covered the areas of specialist software discuss the advantages that a concept keyboard can offer.
Create a list of 5 areas where output devices do not require a PC.

STRETCH & CHALLENGE
Create a leaflet that identifies 5 methods of providing a set of instructions to a computer.

Last Updated
2018-04-16 13:27:00

Links to Learning Outcomes		Links to Assessment criteria
LO2 Understand the fundamental principles of interface design Perception: colour eg trichromatic system, luminance, pop out effect; pattern eg proximity, continuity, symmetry, similarity, common groupings, connectedness; objects eg geons, use of gross 3D shapes Behaviour models: predictive models eg reaction time, Keystroke Level Model (KLM), ThroughPut (TP), Fitts Law; descriptive models eg Key-Action Model (KAM), Buxton's three state model, Guiard's Model Information processing: humans as a component; overview of human information processing (HIP); overview of goals, operators, methods and selection (GOMS) Specialist: design for specialist uses eg input or output for the visually, orally, aurally or physically challenged, remote control devices, head up displays		Analysis of information: Interpreting Results, Drawing conclusions from data, Comparing data Organising and Representing data: Drawing tables, charts and graphs P2 explain the fundamental principles of HCI design M1 explain how an HCI could be adjusted for specialist needs D1 evaluate the impact of a potential future development in HCI

Links to Learning Outcomes

Links to Assessment criteria

LO2 Understand the fundamental principles of interface design

Perception: colour eg trichromatic system, luminance, pop out effect; pattern eg proximity, continuity, symmetry, similarity, common groupings, connectedness; objects eg geons, use of gross 3D shapes Behaviour models: predictive models eg reaction time, Keystroke Level Model (KLM), ThroughPut (TP), Fitts Law; descriptive models eg Key-Action Model (KAM), Buxton's three state model, Guiard's Model Information processing: humans as a component; overview of human information processing (HIP); overview of goals, operators, methods and selection (GOMS) Specialist: design for specialist uses eg input or output for the visually, orally, aurally or physically challenged, remote control devices, head up displays

Analysis of information: Interpreting Results, Drawing conclusions from data, Comparing data Organising and Representing data: Drawing tables, charts and graphs

P2 explain the fundamental principles of HCI design

M1 explain how an HCI could be adjusted for specialist needs

D1 evaluate the impact of a potential future development in HCI

English

Reading, Writing, Comprhension, Problems Solving, Nouns, PDA- stands for personal digital assistant it is a hand-held computer. RSI- stands for repetitive strain injury. This common complaint can result from overuse of a computer mouse. Predictive model - an equation or calculation used to forecast an event.

Maths

Area, perimeter, volume: Calculating, applying calculations to real situations

How 2's Coverage

Learning Capture - Teachers allocate time at the end of the session for the group to write down what they think they have learned. The information shared helps the teacher to see which content he may need to revisit and so shapes future planning.

Verbal Discussion - What is perception?Are the horizontal lines straight?

Product Evidence - Learners to create product evidence to demonstrate understanding Using the colours provided, groups, have one person sitting in a chair facing forwards, this person must only look forwards and NOT move their head. Others in the group will slowly move the cards on each side of the person in the chair until they come in to view. Record this and then swap between each person in the group to record the data. Evaluate in groups which colours were more prominent and issues that could be considered.

Product Evidence - Learners to create product evidence to demonstrate an understanding of colour and luminance, provide using images good and bad examples.