Principles of interactive art and design

Visual cues
A visual cue is a change in appearance of an application’s element. Visual cues allow a user to see the results of any interaction they are making on an interface. There are two types of visual cues:

Graphical cues- a graphical change is when the interface element changes in a way that does not involve text e.g. a box changes colour in a sign-up page to show that the information inputted is incorrect. Graphical cues include pointers, cursors and emphasis.

Textual cues- a textual cue is when a message alert or notice appears to alert the user of anything that is happening due to their interaction with the interface. For example, when a programme is taking a long time to close the user is informed by a textual cue asking whether they would like to ‘end now’. Textual cues include messages and help.

Colour is used as a visual cue to show the user that there is a change on the interface that they may be able to interact with. An example of this is on a DVD menu interface where a button will usually change colour when the pointer is over the button to show the user that they are able to press that button to make an interaction occur.

Metaphors can be used as a visual indication, these are items or symbols on screen that can be used to represent an action or interacton e.g. the trash can on a computer screen usually represents 'delete'.

Prioritising the information on the page so that the interactive parts of the interface are clear is important to allow the user to see the uses of each part of the interface. For example the buttons on a console menu are usually clear, and in a bigger bold to any grey space that only offers to give information.

Accessibility
Accessibility covers whether the interface can be accessed and understood by everyone who has visual/audio impairments. This is important to understand as a designer as when I create an interface I need to make sure that everyone will be able to use it. A good way of helping visually impaired people is to make sure that the writing on the interface is in a colour that contrasts against the background to make it easier to understand. Another way would to have audio accompaniment for any blocks of text. A good example of a way to help people with hearing would also to have an audio accompaniment to any text.
Another disability I have to take into account is dyslexia and that not everyone will be able to read the texts. As well as having audio accompaniment I could use words that are less complicated and use terminology that the user will understand. This means that I must be able to understand my target audience so that I know their terminology.

Screen design
Screen design covers the way the information is presented on screen and the way it is prioritised. In order to show the screen design the designer needs to decide upon three basic design structures;
Information design- the content that is to be presented and how they want that content to be structured and organised.
Navigation design- How will the users interact with the information and what buttons/hyperlinks will be used on the interface.
Screen design- How the page will look.
The designer needs to make sure that when a user uses the interface they are not bombarded with information and have just enough information so that they know how to interact with the interface. A good example of an interface that overloads the user with information is http://www.havenworks.com/. On this website’s homepage there are too many different buttons that are not clearly labelled followed by large amounts of writing. One way of creating a easily usable interface is to prioritise the information on the screen. Information is usually prioritised through a series of filters to decide which pieces of information are more important. For instance, a title is always at the top of a screen to show the user exactly what it is they are looking at. Another example of prioritizing information is the news, in the news they always prioritize the different stories and always tell the most important ones first. This shows how they prioritise the information they show so that their viewers get the most important information first.

Balance
Balance is based upon how the space on the screen is used and how images, text and blank areas are spaced out around the page. Two examples of how balance is used well and badly are the websites www.bbc.co.uk/news (used well) and http://www.havenworks.com/ (used not so well). On the havenworks.com website the balance between black, white and grey space is incredibly uneven as there is too much grey space through out the page due to the long columns of text. In fact there is hardly any white space on the website that is easily picked out. Also the black space on this website the black space is spread all over and there is no layout technique. In contrast to this, the BBC news website has a much more even spread of black, white and grey space. An example of this is that there are fewer images which allow more white space to be visible in the bottom left corner of the main news page. The grey areas are well laid out also and do not over crowd the page which makes the look of the page a lot more pleasant to look at.

Use of images and composition
Images and composition play an important role when designing an interface as how they are laid out and what rules you follow can affect whether an interface looks tidy and well composed or just a mess. The compositions of these two websites show a complete contrast to each other as the havenworks website has a normal justified layout which follows no rules of composition e.g. the rule of thirds. However, the BBC news website does have a more pleasant composition that is easy to follow and understand. For example, the main story on the page is exactly one third of the screen length across on the page which follows the rule of three. This is also complimented by the side menu being consistently formal down the left hand side of the page. Another example of consistent layouts is on DVD menu systems where a common layout consists of a large image/movie clip taking up most of the screen with the buttons spread evenly either around or below the image. An example of this is on the Menu for the film 'Clerks 2'.


Colour theory
The primary colours are blue, red and green. These colours are used to create the secondary colours which can be used to create the tertiary colours etc. Colours can be used to represent different things e.g. red is associated danger, stop, heat, fire and blood whereas, black is used to represent power, elegance, formality and death. A common use of colour is to show temperature. Reds and its common colours show heat where as Blues and greens give any image a cooler feel. Contrasting and complementing colours are decided upon the colour wheel which shows that colours opposite to each other on the wheel contrast and complement each other.

FOR THE NEXT SET OF PRINCIPLES I FOUND TWO POORLY DESIGNED WEBSITES TO EXPLAIN EACH PRINCIPLE

Usability

Havenworks.com is unrealistically complicated to use. The information portrayed on the page is all trying to grab your attention at the same time and it’s very difficult to discover what buttons will lead you to wear. In contrast to this, Fabricland.co.uk does have a side menu, although it each button is of a different colour and almost all have different fonts it is still easier to use than Havenworks.com. Havenworks.com does have a search menu but this is located at the bottom of the home page which is inconsistent to other websites, which usually have a search bar either on the side menu or on the upper right of the window. Also due to the page being a large amount of information screens long it can take a long time to scroll down to the bottom of the home page. Fabricland.co.uk however, does not have any search engine and relies on the user being able to find what they want in the side menu. This is not very helpful as the side menu is very hard to understand due to the variety of colour and fonts. The rapid change of colour as each piece of text is separated in different colour boxes causes a little confusion to which bit links to the part you are searching for.

Language and Terminology

On the opening screen of Havenwork.com most of the works you see are either single title links or just consist of a few words which make it hard to understand what links or pieces of information link to what. This is due to the information being all squashed together and not in any sort of order. In contrast to this fabricland.co.uk does not have a problem with its screen being filled with text, but the text that is on the screen is not always easy to understand as the text and links are all in different fonts and colours. An example of this is in the text that accompanies the first image on the home page in which the writing changes from blue to red with each line and the font changes from Lucida handwriting to Ariel Black. The terminology on Havenworks.com does not flow easily and the text keeps changing to links and is full of comma’s which is not helped by the fact that the texts are in narrow columns. This example of text clearly shows how the text on this website is constantly throwing distraction into the content of the piece such as links and bracketed pieces of text. Although there is less text on fabricland.com the terminology is based a lot more around the subject of the sight and would be very difficult to understand if the user knew nothing about fabrics.

Colour

There is not any form of colour scheme on either of the two sites I have chosen to analyse. On havenwork.com there is a lot of the same shade of blue which mimics the colour of links which makes it very difficult to separate which pieces of writing are actually links and which ones aren’t. In complete contrast to this fabricland.co.uk has too many colours that make sorting out the correct links very difficult. This is also evident in the fact that there are many different boxes on the main page that are all different colours. They do however, have a strong contrast against the yellow background which makes them all stand out, but this also means that all the information is given at once so that means the user is overloaded with information.

Images

The images given on Havenworks.com are too small and are widespread all over the screen and so it is difficult at time to work out which pictures belong to what text. This is contrasted on fabricland.co.uk as the images are clearly next to the text to which they belong and this makes it easier for the user to understand.

Consistency

There is little consistency in either of the web pages as the only consistency in havenworks.com is that the columns are pretty consistent to about half way down the page but even then it changes and becomes even more complex. Fabricland.co.uk does have a little more consistency as it has a yellow background and does have a side menu which is common on webpage’s.

Layout

The layout of havenworks.com is pretty complex and shows no uniform appearance what so ever where as fabricland.co.uk does have a common use of layout that shows consistency and allows the user to easily navigate their way around the site. In contrast to this, havenworks.com does not have any easily recognisable navigation techniques in the layout and make it very hard for the user to get around the site.



Bibliography:

http://docs.hp.com/en/B1171-90148/ch04s02.html

http://cis2.cuyamaca.net/jreedFP/cis212/presentations/screen_design/big_picture.htm