HCI Development
Thursday, 23 May 2013
M2 Explain the Fundamental Principles Which Have Been Implemented Into Your Designs
In my HCI designs I have been careful to try and implement as any different features as I could to try and make the interfaces as user friendly as possible. To do this I looked at the fundamental principles of HCI and looked at what I could include to try and make my interfaces more user friendly than what I had originally intended.
Database Interfaces
On my input interface, which was the Customer Information forms, I chose to use an easy to read font, which was Calibri. I chose this because it is a very easy to read font which is more accessible for people with reading problems and dyslexia. I put the font at a reasonable size so it wasn’t too small but it didn’t take up too much of the screen. The font is white for all of the text, and this is easily distinguishable on the background, which are two different colours. The header colour is tan, and the rest of the form is beige. These colours were chosen because it is easy to see the difference between the colours, so you can clearly understand where the form information should be and where the title is.
The buttons to skip through existing records are clearly visible and have universal labels on them so people of any culture can look at the form and understand what the buttons are for. I also added a label next to the ‘Customer Date of birth’ text box, which tells you how the date of birth should be entered into the form to keep up validity. The label with this information on is orange, so as to show it is an item of importance within the form and the user should take note of it. I have also used a grid system to organise my form, this way I have managed to ensure that the form is easy to understand and there are no problems with things looking too muddled up and users getting lost and missing out any fields.
On my output device…
Website Interfaces
On both of my website interfaces I have used a consistent house style, so by describing one I can also describe most of the properties of the second, other than the body of the page, with relative ease. For the header and navigation of my website I have used opposite colours, the background of the entire website is white, and all of the text is black. This is so it is very easy to read. The title is large and bold, and at 55px and in the font Helvetica it is a good size to understand exactly what the website is for. Just below this is the navigation bar which is in italics so you can see there is a difference between this and the title of the website. These buttons are also much smaller, though they are not too small that you aren’t able to read them. The navigation bar follows the house style of Helvetica and the colour black to differentiate from the background. Below these buttons is a large black line so you can see that this is the end of the header and anything below is the body of the website. On the far left I have added a feature which will allow people to inflate the text in the body if they are having trouble reading it, though it is also in black so there are no problems with it leaking into the background.
On my output page I follow the same house style, though there is a title of this page which says ‘Gallery.’ This is a large block of text which clearly lets the user understand which page they are on, and below it is the interactive gallery. This is a few columns of tiles of images which the tattoo studio has taken of their work. Once the mouse hovers over one of these images the image will blow up to a larger size so it is easier to see by the user. It is quite intuitive because there is a large empty space to the left of the tiles which has a border around it, so the user knows that it is there to have the images projected into it.
M1 Explain How a HCI Could Be Adjusted For a Specialist Need
If I were to remake my website and try and include as many of the principles of HCI as I could I would change several items on my website.
Firstly, I would add more items for accessibility; for example, for the pages with a lot of text I would add a button which allowed people to hear a spoken version of that body of text, meaning people who had poor vision or reading skills would be able to hear the text instead of straining to read it. I would also change the ‘Increase Font Size’ button so when it was clicked it affected all of the text, including the title and navigation bar, which currently do not change in size. I would also look at making the website more touch-friendly, in case anyone chooses to look at the site through a tablet. This would include looking at changing the navigation bar text to blocks and bars, basically looking more towards graphics than text. It would also be worth having a look at transferring the website into a phone-friendly site as well, so the site is available to more of an audience.
Something else I could look into doing is adding more colour to the website. This would make it more aesthetically pleasing, but also if I were to use the right colours, then I could keep the functionality and readability of the text.
Friday, 10 May 2013
The Fundamental Principles of HCI
One of the fundamental principles of HCI is perception. Perception is the process and end product of your brain putting together the objects that you see to make a full, clear picture. Perception is a very unique thing; everyone sees things differently, and this is because people’s minds have been formed and have grown in different ways. Though a property most people have in common is the ability to fill in missing parts of perception with their minds, such as with negative space images.
When working in Human Computer Interaction, perception is a very important part of the design process, and there are several things that have to be addressed when designing. Colour is a very important aspect of design work, because everyone sees colours differently. There is a theory which is that every single person in the world sees colours slightly differently, be it different shades or different levels of light affecting the overall colour, but because of this a colour that I can see very well when placed on the background of a different colour, other people may find harder to read, or maybe easier. There are some people who have visual disabilities, such as dyslexia or colour blindness, and these people have trouble reading due to colour co-ordination as well, though these disabilities influence the way the affected people see things differently.
Colour is one of the ways that the brain differentiates objects within perspective, though colours are subjective to your surroundings and you personally. Colour is affected by surrounding or overlapping colours, as well as light exposure, but it can also be affected by your state of mind. If you are incredibly tired then that can have an effect on what colour you see, as well as any disabilities including colour blindness. Choosing the colour the background should be is a big part of presentation, especially in HCI. For example, a good example of use of colour is yellow writing on a black background, while a poor choice of colour would be yellow writing on a white background. This is due to the contrast of colour allowing the yellow to appear sharper while on the white background it appears as though the yellow bleeds into the background, making the letters and detail harder to see. As you can see in the chart below, background colours can make a lot of difference to how easy the font is to read.
Trichromacy, or trichromaticism, is the condition of having three separate channels independent of each other for conveying colour information. In HCI there is a practice which attempts to combat trichromats, which is using luminance contrasts. The hierarchy of luminance is red and green first; these are the colours which will be seen most prominently over the top of all the others. On the second layer there are blue and yellow, which will sit over the third layer but are covered by the first layer. On the third and last layer are the colours black and white. These are called opponent colour channels because they transmit information about opposite colours.
There are ways of making objects and text stand out and therefore easier to read, which is called pre-attentive processing theory. This could be from using different shapes to wrap around it, or using different colours so you are able to see it more clearly, though it is important to understand that the overuse of colour will make the interface look unprofessional.
If your page has a lot of different uses of colour then you have to make sure that they are colour coded efficiently, which will help the user navigate the interface. Warnings and important information should be highlighted or made to stand out with a bright colour so that they are easily distinguishable as important parts of text. Common colour codes depict green as a calm colour, while orange is a warning and red is a danger colour, though in reality there is no universal colour code, because in some situations red can mean things such as hot. For example, black can mean mourning in Western cultures, while in the East white is the official mourning colour.
When displaying text on an interface it is important to pay attention to how it is being displayed. When using colour codes you must make sure that the audience will be able to understand the code, or it will be lost on them. Using a colour code which is known by the audience can be beneficial as it can allow the audience to perform selective reading, which is where they understand the colour code and can hone in on the important parts and what they want to read.
In HCI when something is being designed it is created along a template called a design pattern. This ensures that everything is kept appropriate and consistent, allowing the user to relax and feel more comfortable with the product. Design patterns log a lot of the detail of the interface, such as colours, grouping manners, format and layout. The Gestalt laws determine a lot of the rules of HCI design patterns.
Gestalt means ‘form’ or ‘shape.’ It is the rule that mentally, we tend to group things that are similar sizes, shapes or colours. This principle can be used to group things even if they are apart, such as;
• Proximity – If things are close together we tend to view these as a group.
• Continuity – Smooth, continuous lines are more easily interpreted than rapidly changing lines.
• Symmetry – We see symmetrical shapes more easily than unsymmetrical shapes.
• Similarity – Similar objects tend to be viewed as a group, while dissimilar objects are viewed as individual items.
These all relate to common groupings;
• Fate – We see objects which stay together as a group.
• Region – We see objects that are enclosed together in some manner as a group.
• Connected – We see objects linked via continuous lines as related to each other.
Subscribe to:
Comments (Atom)