Week 5 – Interface Design Review

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.

Interactive Design

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

Summary

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

Reflection

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.     

Week 3 – Design Process & Developing Personas

Summary

An interactive design process has many steps in order to produce a working interactive tool or design piece. These include:
– The pre-project stage which covers the briefing of what the client wants out of this design process and the resources and time the designer has to do it in.
– The concept and Planning stage aims at the client telling the designer what their goals are, what message they want to give to the consumer and who their audience are. This gives the designer a basis to what his/her strategy will be allowing them to research necessary topics.
– The design, prototype and specification stage starts with the question of how they are going to meet the client’s brief. An idea is developed through rough drawings and computer testing then develops into complex diagrams and prototypes for the actual working design product or interface.
– The production stage focuses on the design going through a series of ‘builds’ (temporarily working instances) whilst it is being designed ready for the beta build.
– The testing stage requires every element of a designed object to be checked it is working effectively and efficiently. This stage can also work with the previous stage.
– The launch and maintenance stage may not be the end of the project but may the start as the website will need to be updated and managed as long as it’s up.

A user persona is a hypothetical user of the future designed product or interface which will guide the designer’s choices and thought process when designing the product. A user scenario is a made up narrative of a consumer who would be using the product in their everyday life. It aims to gather information about the users’ goals, expectations, motivations, actions and reactions in order it to be designed appropriate for the user. For example someone who would be in a hurry, they would want a designed map to be simple and to the point. A persona is the fictional user of your product and the scenario is the context in which they use it.

An artifact persona is the product’s personality. This relates directly to who will be using the product. For example something that is designed for elderly people  to manage their health will not be confronting or use bright colours but will be mellow and it would use soft colours. Developing key words about the product’s personality can help the design process making sure the designer is not steering away from the overall feel of the design.

Reflection

Developing a persona for an interactive design project is very important as it allows the designer to know who they’re dealing with. It ensures the functional and visual design of the product appeals to the user hence making the interface react the way the consumer wants and expects it to.

Week 2 – Interaction & Interactive Design

Summary

According to Winograd interaction design is “the design of spaces for human communication and interaction.” Bill Verplank says an interaction designer has three questions they need to ask. The first is how do you do? – or in other words how you will get the user to affect the world i.e. pushing buttons or the ability to grab things to manipulate it. The second is how do you feel? This refers to the look of the design. Do you want it intense or soft etc. The third is how do you know? This is aimed at the audience you are designing for deciding how you will let them know what to do next – or will you just assume they know.

You interact with a number of things everyday and each thing has a different level of engagement and reactivity e.g. a good book is more engaging than reactive because it is interacting with your brain and an online shopping website is more reactive because it allows you to actually do something physically.  When designing the interactivity of something it is important that you design the quality of the navigation. A fire alarm system needs to be very simple and clear although a computer game can be very intense and over the top, two different things relating to two different ways of interaction.  

Reflection

When designing the interactivity of something whether it is a product or website I think it is important we know who we are designing for and what the user expects the interactive thing to do. We need to consider whether it should be engaging or complicated to get the user to use their brain or whether it should be simple and easily navigated so anyone could use it.