Week 5 – Interface Design Review

1 Apr

Interface design is the design in-between the user and the interactive acting as the point of interaction. The quality of the interface directly effects the interaction or experience the user gets out of the design. An interface that is not noticed by the user is the best interface you can have because it lets the user feel like they’re a part of the design like most first person video games. A poor interface design leads users to ask “what do I do now?” resulting in their boredom and frustration.

Old forms of interactivity was with the eyes and ears included things like television, radio and magazines which act as a source of knowledge, heavily restricted to ‘read only’ information. Contemporary forms of interactivity evolved into reading and writing interactivity, breaking off into different types:
Hyper-textual navigation is navigating on the internet by starting with a word in google. The results come up and you have a choice of where to go. These pages have even more links which lead you to even more or additional information. Underlined words on websites act as a link and are called Hyperlinks. This form of navigation lets you ‘choose your own adventure.’
Immersive navigation is a designed space or 3D world embodied by the interface. Rather than taking you somewhere else, it lets you experience something different and exhilarating like first person shooter video games.
registrational interactivity is Web 2.0 like I previously blogged about. It includes things the user can respond to in the form of videos, personal photography, or by commenting. It depends on other users’ in a collaboration and system allowing users to write back.
interactive communications are simply face to face connections achieved by video calling someone on a mobile phone or live chat sites on the internet.
Here are the fundamentals of screen-based interface design:
Visual focus: use contrast to show which element they should view first, animation and roll-overs to indicate clickable items, include visual cues to help user navigate and use style sheets to differentiate between information and keep things consistent.
Problem solving: highlight potential pathways, develop multiple navigation toolbars to give the user a wider choice and consider time in the design i.e. don’t make things take too long.
Contextual: more important information up the top, less important down the bottom and provide no more than 5 links or ‘clicks’ to get to the information.
Conceptual: use familiar imagery for the interface, for example play, stop, pause and use text tags for imagery used in a new context.
Wholeness: group content and relate elements with others by using colour, contrast or shapes. This can help produce a structure for the interactive.
Linear or nonlinear: linear is a site structure that would contain different links on each page where the user would need to go back and forth to fins what they want. A nonlinear structure would act as a circle where all information can be reached from each page.


Information/Instructional Design

25 Mar

Information design is the organization of data to make it easily understood or processed by the viewer. It is achieved by using the basic visual hierarchy methods such as scale, colour, typography and contrast which all lead to the point of interest, or the most important thing on the page – the title or topic. Information design is strongly used in web sites usually to categorize information and to establish a visual hierarchy. Usually the title of the website is at the top of the hierarchy and then often comes the ‘sign up’ button on websites that can be registered to in order to attract new people. Instructional design is ordered information that makes a process easier to complete. A task or process is divided up into single smaller tasks giving the person one thing to do at a time. Each is explained and a relevant image usually accompanies the description. This is often seen with a Lego set or when a house hold object needs assembling.

This website allows the viewer to watch any episode of The Simpsons, South Park, Family Guy, American Dad, Futurama or The Cleveland Show online for free. It uses basic information design to organize its data, strongly relying on colour to distinguish between each cartoon throughout. The website also uses large, bold text in order to pull the eye towards the name of the cartoon and utilizes columns in order to categorize particular episodes of the cartoon including the most recent, most viewed and top rated.

Here is an information design piece I did in my second year at Uni. It shows my recorded sleep and energy consumption over two weeks, the grey bars represent the amount of sleep I had and the white represents the amount of energy I consumed, relative to a required average daily intake of 10350kj and a required eight hours of sleep daily.

Here is an instructional piece I designed in my second year at Uni which shows you how to do a kickflip. The steps taken starting from one and ending in seven are easily seen given they are in red and the eye is able to read the process with no problems due to the use of a traditional reading pattern from left to right. Relating to informational design, the red marks on the skating figure draws attention to detail showing the skater what to remember in each step of the process. The large black heading also lets the viewer know what the topic is before they read further.

Interactive Design

24 Mar

Interactive design is designing something, whether it be an interface or object, that can be manipulated and changed by a person either physically i.e. with their hands, or by using an electronic extension of the design such as a computer mouse or controller.

The internet, or websites, is the main thing I think about when the words ‘interactive design’ come up because there are hundreds of thousands, probably millions anyone with the internet has access to. The user interacts with the internet by generally clicking on buttons to go where they please or typing in words in the search bar to easily find what they are looking for. There are many many websites on the internet although each relating to various categories. There are online shopping websites and websites for only information; there are also websites that do both and also sites that allow the user to interact with another person as discussed previously, referring to Web 2.0. These sites create a different interactive experience to what they would normally do. For example information websites provide the information previously found in a book which changes the interactivity associated with getting the information. Instead of physically opening the book and flicking through pages, one just clicks buttons. Instead of going to the shop, handling the object, handling the money then handing it over, a few clicks on the mouse and the object is delivered to your door.

This is an application called ‘Incredibox’ which allows the user to create their own song using a variety of given beats, melodies, simple voice recordings and other sound effects. The process involves the user selecting a sound from the bottom and dragging and dropping the sound they want on top of the figure in the white screen. Each time a sound is added another figure pops up allowing you to insert another. The song can have a maximum of seven sounds. The sounds are categorized and colour coded and each one has their own symbol helping you to distinguish between the various sounds. The design also allows you to record your song for thirty seconds so all that time you’ve spent perfecting a song hasn’t gone to waste. Click image to go to application.

Source: http://www.thebuzzmedia.com/uncharted-3-ps3-review

Source: http://www.thebuzzmedia.com/uncharted-3-ps3-review/

Every video game is a piece of interactive design. The start-up menu is designed in a similar way to a website allowing you to navigate your way to the ‘start game’ button and of course the game play itself is the user interacting with the character or objects within the game. As seen here I have used Uncharted 3 as an example where game design is starting to evolve into something more like an interactive movie giving the user a much more intense experience (click image to go to game trailer). Various controllers for video games such as the WII controller and the very old idea of a gun controller greatly affect the user’s experience when playing a game as it puts them in the position of the virtual character. Together, movie like graphics and realistic controllers produce an intense and joyous experience through interactive design.

Source: http://wii.mmgn.com/Articles/The-Nintendo-Wii

Week 4 – The Static and Kinetic Screen

23 Mar


Static refers to the motionless aspects on a screen or everything to do with a printed magazine. Kinetic describes motion and change over time which relate to elements on the screen found in interactive design. Focusing on Andy Polaine throughout the lecture, we understand his idea of what interactive design is and how we can use basic design knowledge for interactive projects.

As stated in the first module, his idea of interaction design is how each element of an interaction relates to one another in order to make something thought of as complicated; easier and pleasurable to use. The elements are as follows:
– what they do i.e. does it let you create music or does it make you create a virtual sandwich
– what they look like i.e. is it bright and colourful or does it contain disturbing footage of a crime scene
– what they look like they do i.e. does it look like it should tell you how to light a Barbecue or is it full of shit, blowing you up
– the experience of using them i.e. do they feel like an athlete playing FIFA on Xbox or are they annoyed at a computer voice telling them to turn around

Static graphic compositions reinforce the idea of making something complicated simple. Each element is treated differently and accordingly to help the viewer navigate around a designed page starting with more important to least important information. This is known as Visual Hierarchy as seen in the second module. Eye tracking can help measure the effectiveness of a design by measuring the time and path of someone’s eyes when looking at a static design showing the designer what captures the viewer’s attention and what doesn’t.

Here are some basic visual hierarchy methods:
– point of interest i.e. the starting point or leader of the visual hierarchy, the most important information. This needs to stand out the most achieved by the below examples.
– contrast i.e. the highest level is black and white with no tone
– tone i.e. darkness and lightness of a single colour, darker being the more noticable
– scale i.e. the use of size to symbol importance, the larger the more important. It also relates to things in the foreground/background where the larger things would be in the foreground
– colour i.e. categorizes information with the help of other methods such as tone, colour, scale, etc
– typography i.e. the legibility and readability of text based on scale and colour and the language and sentence structure respectively


All these elements and methods come down to who the audience, which is the first thing that needs to be thought of when designing not only interactive but anything. It allows the designer to use this information to create an interface for a selected target audience making it easier and understandable.     

Web 2.0

17 Mar


Web 2.0 refers to places on the internet that provide the luxury of allowing users to express their ideas through writing, photography, video and in any other way you can think of within a certain social network, the most popular being Facebook and YouTube. This is rather appealing to people as it allows the user to read and write rather than just read what is there.

 This very website we are using now is among the many websites considered as web 2.0 because its main focus allows users to express their ideas and opinions through their writing. It allows anyone to have a blog within the same network allowing people to search for and comment on what they want.

YouTube is a very popular website that allows anyone in the world to put their own video on the Internet. There are hundreds of different kinds of videos that can be uploaded to this website each expressing different opinions, emotions and talents. It allows users to comment on and rate any video they see (or 99.9 percent of them) and recommends videos based on the users’ history with the website. (click picture to go to my channel)

Flickr allows users to upload their photos, illustrations or pictures to the internet very much like YouTube allows users to upload videos to the internet. This site encourages people to upload any photo, design piece or picture they want to share with the world and also comment and rate on others they have seen. Users can also give out awards to express their fondness of the photograph or picture.