Fundamental principles of HCI design

Behaviour models: These are used to determine how a specific interface will do things or how a user will feel when they are using specific interfaces.

Predictive models: Used to incorporate ways to help incorporate improved means of having good interaction with HCI’s for example Keystroke Level Model (KLM), Fitts’ Law and Throughput (TP). The predictive model compares and evaluates these things in HCI and allows for a designer to help improve their pieces of HCI because of this.

Keystroke Level Model: This is used to predict how long it takes to execute a specific task and this is broken down into three areas

1.       The carrying out of the operation such as pressing key buttons, using your mouse to point in an area or drawing something.

2.       Thinking about doing something, so before you actually get it done you need to think about it and the less time you need to think about something then the quicker you can actually carry out the action.

3.       The final area is how long it takes the actual system to do what you have asked it to do which will happen after the last two steps.

Going into more detail this is exactly what a keystroke model is used to check for and to measure:

·         How long it takes for a key to be pressed and for how long it will take a user to release the key, therefore showing how quick a typist the user is.

·         The time taken to move your mouse to a specified area on the screen.

·         Just like the key press, it also is used to see how long it takes for you to carry out and release a mouse click.

·         How long you need to change hardware devices such as keyboards or to install a portable hard drive.

·         As described in the second area it is used to see how long it will take a human brain will take to think about performing the actual action.

·         How long it takes to type a string of characters, this will be used alongside key presses to get an accurate measurement for how quick you can actually type.

·         Finally it will also measure how long it takes your system to recognise what you are doing and to actually carry out what you have requested.

Throughput (TP): This is used to show the overall productivity of the computer/how well a computer performs.

It’s use it to show how quick a computer responds to a command, therefore showing you the computers processing speed and allowing you to yourself determine if it needs to be upgraded or not. This is therefore known as the response time, and as a computer gets older its response time will gradually get higher, for example when you add more things onto your hard drive and install more things than if you are trying to search for specific documents then it could take a bit longer to carry out the action. This is the same as when you are trying to start your computer up, over time it will take longer to actually turn on and therefore it will decrease your personal productivity.

Fitt’s Law: This is used to predict how quick 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.

This creates a direct correlation between time and size as well as time and distance as the further away you get from an object, the longer it will take to get to the object and the smaller an object it is, the longer that will also take a user to reach the object.

This can be shown in a few different ways; you can do this by pressing a screen using a touch screen option or by using a pointing device such as a mouse.

By sticking to Fitt’s Law I will need to choose my buttons carefully as they will need to be sized properly and likewise positioned properly as well.

Descriptive models: These are used to help understand how a user will interact with the HCI and from this will also help improve upon the designs of the actual HCI themselves. This could be done by Guiard’s model, Buxton’s three state model or by the Key-Action Model (KAM).

Key-Action model: This allows you to look at how users will interact with keyboards and therefore what kind of shortcuts they will use to carry out tasks.

This will show how what the user is expecting the computer to do when you try to use certain shortcuts and what the computer will actually do when you press the shortcut.

An example of this I can think of is when gaming you can used the arrows keys to move around as well as using (W,A,S,D) and if both options were not available then most gamers wouldn’t like how the controls were laid out and therefore it could decrease the enjoyability of the game.

Keys on a keyboard are described as either 1 of 3 different things. They are either a:

 Symbol- These tend to be letters, numbers or punctuation symbols.

Executive key-These tend to carry out specific actions for example the ENTER key or F1.

Modifier key- these don’t actually type anything but they allow you to change what the next keypress will actually type for example the SHIFT key, if you press the shift key and then the number 5 for example it will put this %.

Buxton’s three state model: this is used to determine how easy it is to use a mouse or the wheel and will measure how much pressure a user puts on it and how much dexterity and speed is used during this action. There are three states which are used to check this:

1.       Out of range: Used to show re-positioning and clutching of the mouse.

2.       Tracking: For moving an item around the screen such as a cursor.

3.       Dragging: Checking the time it takes you to drag an object across the screen or to group an amount of items together.

Guiard’s model:  This focuses on how a user will prefer using specific hand during interactions for example when typing a keyboard layout is most suitable for left handed people as the more important keys are on the left side of the keyboard. Guiard’s model looks at the actual position of the keys on the keyboard.

The above diagram shows that the preferred hand is the right one but this is not always the case, it will be the left hand in the case of some people or in my case my preferred hands change depending on which task I am doing (ambidextrous) such as I prefer to play darts and write with my left hand and I prefer to play golf with my right hand.

Information Processing:  

Things which need to be considered if the fact that the actual human could be considered as part of the HCI and the overview of human information processing (HIP) and the overview of goals, operators, methods and selection (GOMS)

Human information processing (HIP): This is the concept that the human is part of the HCI and therefore HCI has been made specifically for the human in mind to help increase productivity. As humans will be in fact using just about all HCI created you need to think about how you will make it easy to use and who is going to actually use it (Advanced computer users may use shortcuts and other may not for example). This goes off the theory that the senses are the inputs and the actions that you carry out are the outputs and the brain will be the processor.

·         Consider what the user is going to actually get from the HCI, once again with shortcuts it will allow you to do certain things quicker or close something, for example Alt F4 closes your browser and allows you to click the thing underneath much quicker which could be either a document of your desktop.

·         Research will need to be done to find out what the human requirements are and therefore from this you will be able to design HCI much more effectively.

·         After they have designed their HCI, they then need to determine whether they have met the requirements that they have researched and if they have not they will be able to try to meet them in any way they deem necessary.

Goms: Goals, Operators, methods and selections rules- This is used to predict how long it will take something to be carried out or how long it will take something to be followed.

Goals:

·         This is what a user will want to actually achieve when carrying something out for example when creating a game you may want to include 3 powerups and you could have a goal for this.

·         Taking the example above to create powerups, this would simply be a small goal, most things have small goals needed to achieve a larger one and in this case the larger goal would be to actually create the game.

Operators:

·         These are the possible actions the system could carry out.

·         Certain levels of things such as keystrokes.

Methods:

·         The way the operators are put together to be able to achieve goals.

Selection Rules:

·         Rules which tell you what method to use and how to use it properly. This allows you to choose between several methods which will do roughly the same thing but you are wanting to do it in the most efficient way

Specialist Interfaces:

Visual Impairment: There are a large range of equipment made for the visually impaired including Braille computers and keyboards. Because of this problem you are able to use on screen narrators as well as allowing you to change the size of text on websites.

Speech problems/Orally challenged: Although I can’t see this affecting the use of computers massively anything which requires voice recognition could cause the problem in this area. For this data will be entered using a keyboard and mouse preferably.

Aurally challenged:  Hearing issues could be a problem if you are trying to listen to audio instructions or you need to phone someone up for help. Most interfaces are designed to be highly visual and therefore eliminate this problem altogether.

Physically Challenged: Some people may not be able to use a keyboard or mouse properly and therefore may rely on other devices to allow them to work such as a specialised monitor to type at what you look at in the case of ALS sufferers or allow speech input on your device to type exactly what you are saying.

Perception in HCI design:

Perception is very essential when you are designing HCI, I will be talking about how colour can be important in HCI as users will react to different colours in different ways for example a combination of colours which you find easy to read may not be the same for other people for example medical conditions such as dyslexia and colour blindness change the way things are seen dramatically.

The way we see colours can be affected in two ways, it can be affected by other colours around it so it could stand out in comparison or it could just be how the mind perceives the colour in front of it. The way the mind shows colours can be seen in the following optical image; although this is an actual image it gives off the feeling that the colours are moving/vibrating.

The way colour is chosen on certain backgrounds also has an effect on it. For example colours on a black background look brighter and larger than when what they would if they were on a white background because on a white one the colour would look smaller and darker.

Luminance: The colour system uses three main colours, Red, Green and blue (RGB). These colours are detected by the receptor cells in the retina of the eye and are displayed to you accordingly. To make colours stand out you need to use contrasting colours when designing and this will create a very nice appeal to the human eye.

The contrasting colours are shown on this colour wheel to find the contrasting colour simply pick a colour on the wheel and choose the one directly diagonally to it.

Pop-out effect: This is the use of a combination of colours to make a symbol stand out but there is a thing as too much colour. If you use far too much colour when designing HCI it runs the risk of looking unprofessional and therefore will not be appealing to anybody wishing to use it. Any colours you use must be used specifically to create professional and useable pieces of HCI.

Designing screens with text: You can use colour coding to help a user navigate through things more easily. When text is set to a certain colour it can mean certain things for example warning colours are always very bright and stand out vividly. A common way to colour text would be:

Green- Neutral

Orange- Warning

Red-Danger/Hot

But even saying that, there is no colour scheme which is used all around the world and therefore the above might be completely different in certain countries. For example the colour black in the west is usually used for mourning whilst in China the colour for mourning is white and therefore literally the complete opposite.

When designing text for HCI you need to make sure you think about a few different things:

·         Emphasise bright colours such as a bright yellow or bright orange, darker colours keep them dark, don’t put any emphasis on them if possible.

·         The colour coding scheme must be relevant and known to the actual user to reduce any confusion caused by it.

·         When somebody is using your product they will notice if you change the scheme at any given time, so you need to make sure to be consistent throughout. There’s no point creating several links on a website and changing the colours on the last link.

·         If colour is irrelevant it can increase search time as the user may be focusing on the actual colour instead of what they are trying to do. For example watch out for red on blue text as it will seem to be moving,  yellow on blue as the edges may pale in comparison to other text and try to prevent using red on green as it will seem to produce a shadow.

Patterns: Patterns are used to keep layouts symmetrical and consistent throughout as you can place thing in specific areas. They are basically used as templates to allow the user to stick to specific areas and therefore make it look rather neat. If things are neat and organised then it allows the user to feel comfortable with the HCI and they will use it much more efficiently. These templates will contain everything from colours to layout to menus.

Gestalt’s Law: This literally means the law of shape or form and we follow some of these laws automatically such as we naturally group together different objects according to size, colour, shape or even style. If things are linked in any way then we naturally want to group them.

This can be used to group elements together even if they are apart by quite a lot.

Proximity-This includes anything which is in proximity to another object as we naturally would assume it was in a group.

Continuity- Smooth lines are much easier to interpret than jagged unorganised lines and therefore if everything is aligned properly then it will be easier to look at.

Symmetry- Like I mentioned a little further up, if things are symmetrical then they are much more pleasing the human eye. A regular square is much nicer than an irregular one to actually look at for example.

Similarity- Similar objects tend to be seen as a group even if they are not intended to be a group in the first place.

Grouped objects could be also seen if they are moving in the same direction for example or objects which are closed off inside of a box will be seen as a group also. The same can be said about objects which are connected together using a line, if we see that something is connected to another object then we will see them as almost one object and not two objects connected together.

How I have applied the principles: I have achieved the fundamental principles of HCI by creating my designs with them specifically in mind. My navigation bar is the best example because it is very simple and the text is designed to stand out instead of looking diminished in comparison to how it could look otherwise. The colours for my text are made relevant because the background for the website I am using is based off of a piggybank website and therefore piggy banks are tended to be associated with the colour pink, and pink and red colours go together quite well. Although the background is white, the text fills up enough space not to look too small on it and stands out enough to counteract that and being a bright colour I think the red is emphasised quite well. Like I mentioned earlier though, red is usually a colour associated with danger but when it is put into the environment I have put it in, then it looks almost soothing and therefore appealing. All the links will be created using exactly the same colour scheme and the rollover links will look exactly the same as well.

For my game navigation, this follows the fundamental principles of HCI because the pattern on it is made to be symmetrical and therefore looks good. The colours on it are meant to be darker so I have tried not to emphasise it at all by making it slightly opaque so the background shows through. With the buttons going onto a red background designed for hell I have tried to make the buttons look dark and seem like they belong in the image whilst still standing out themselves. With the images being rather close together and looking roughly the same they will be associated as being a group of images and they will look good on the background. Like I mentioned with the colours, with the background being dark, as well as the text coloured a dark red then the text blends in quite well.