Wednesday, March 18, 2009

Instructive Design Planning IV: User Persona and Mood Board

A user persona is a fictional character made up to represent the intended demographic (or audience) of the final design. The mood board is a visual representation of that persona - things they like, do for a living, what this fictional character would do in their spare time if he or she were real. This gives designers a face and a personality to whom they can match their design.


Johnny Smith
John is a 75-year-old retired carpenter who still enjoys hikes in national parks and ridding his Harley-Davidson. He looks forward to the local club raffle and a catch up with the boys on a Thursday evening. He also enjoys playing bingo, listening to local radio and watching old western movies with his wife Jill. As he gets older and has to visit the hospital more often, he prefers quick and efficient healthcare with simple, bold instructions and hospital signs. He aims to enjoy the rest of his life traveling a little and spending time with family, especially his grandchildren.
• Location: Hobart
• Toaster Usage: Unfortunately Johnny has never used a fancy new electric toaster
• Computer/Internet Usage: PC, Occasionally browses the Internet with the help of his grandchildren.
• Computer Skill: Novice user. Finds things too complicated on the computer to use. Has an email but doesn’t know how to use it properly



Moodboard for Johnny Smith, 75:

Instructive Design Planning III: Storyboard

















A storyboard showing the basic frames of the intended interactive/instructive design.

Each arrow represents a 'click and drag' motion intended for the user to perform (user could also click on the arrow to move to the next frame/scene)

Instructive Design Planning II: Flowchart

A flow chart showing the different steps in using a toaster.
Click on the image to enlarge it.

Instructive Design Planning: How to use a toaster

A step-by-step guide of how to use a toaster:

1. Position the toaster on a bench near a power-point

2. Plug the toaster into the power point and turn the power point on


3. Turn the ‘cooking time’ dial to adjust how much the bread will toast (about 4-6 is best)


4. Slide the bread into the toaster vertically (crust facing up and down). Does the bread fit?


5. Push the toaster handle down (on the side of the toaster). Does the handle push all the way down?


6. Wait until the toast pops up. Is the toast cooked properly?

7. Remove from toaster and prepare

Informational/Instructional Design

Informational/Instructional Design Definition:

Information design is embedded in every part of the world we live in; from simple road signs to complex data sets about global warming, information graphics help us to understand the world.

What is information design? A way of interpreting (or assisting in the interpretation of) information visually: think of simple graphics such as exit signs – these are a form of information design.

The purpose of these graphics is to convey complex information quickly and easily to a viewer or user.

For example, road signs are used across the world to ensure order on public roads. These graphics must effectively communicate a specific message in a very short amount of time – the mark of a successful informational design is whether or not any user can interpret it quickly and easily.

Other forms of informational design are not so simple – though all informational designs are made with the same intent – to make information simpler and more accessible or understandable. There are many examples of information design which depict complicated and numerical information visually (the most common depiction being charts, graphs, etc).


Informational design also ties into instructional design. Instructional design conveys more complex information to a user, usually in a step-by-step format. This allows complex and often confusing information to be simplified and more easily understood.
An example of this would be a DIY instruction manual – a step-by-step process in which a difficult and confusing process is broken down into illustrated steps, allowing the user to easily understand and use the information.

Examples:

Informational Design:

New York Times – Statistics on Murder in NYC
http://www.nytimes.com/imagepages/2006/04/28/nyregion/20060428_HOMICIDE_CHART.html
An example of complex information being compressed into a visual and more simplified form

Instructional Design:
An everyday instructional design:
Annotations are used to create a clear and concise step-by-step process in which the information is communicated. In some instances, such as below, both annotations and visual media is used to create the most effective graphic.











Interactive Design

Design is all about you

Interactive Design: Definition

Interactive design is a fundamental aspect that we must consider when looking at today’s standard of design. It is no longer enough for design to be a simple, one-way experience. The audience must now be considered as an active user of the design.

Once, design was a way of communicating a message – such as a street sign. It would convey information in a concise and interesting way… but that was all it did. Now, with the introduction of interactive design, design is a way of creating an experience.

A prime example is the Internet – web 2.0 as I discussed in the last blog. Web 2.0 is a form of interactive design. The Internet is no longer used simply as a database for information; it is used to entertain, to socialize, to contact, and to inform among countless other things. Web 2.0 has created a virtual world or experience with which we, as users, can control (or at least have the illusion of control) what happens around us.

Perhaps, then, interactive design is rooted in control. We, as a modern society and people feel like we need to have a certain amount of control over our lives. Interactive design allows users to have some control over the function of the design.
For example, if I were to use Facebook to talk to my friends, I would be able to control how much information I uploaded onto the site, who my friends are and what sort of information Facebook disclosed to my friends or the general public.

Or, for a more everyday example in interactive design in practice; an ATM. This is not only a part of everyday life, it is an example of interactive design. The user responds to the machine prompts and is able to input information (such as your PIN number and how much money you would like to withdraw) which the machine then responds to.

So we can conclude, interactive design is about the relationship between the design and the user and the experience that this relationship creates.

Awesome Web Design (interactive design) Examples:

Vince Frost: Frost Design

http://www.frostdesign.com.au/

Vince Frost is a graphic designer, and his company website is a prime example of interactive web design. The user can scroll through the images of his works, guided by symbols such as arrows (for direction) and a cross (to close an image). The site responds to movements and clicks of the mouse, giving the user a degree of control over the design.

Semi-Permanent: Sydney
http://www.semipermanent.com/sydney.shtml

Semi-Permanent is a design showcase staged in Sydney and Melbourne during April. The website (for information on the Sydney showcase) is another interactive web design example. Like Frost Design, this website reacts to movements and clicks of the mouse - for example hovering over an image may show the user more information about that link or that image.

Beci Orpin: (homepage)
http://www.beciorpin.com/

This is a beautifully designed site as it uses movement as well as interaction to create an experience. Instead of just conveying information in a graphic or interactive way this website also creates a mood and immediate experience. The website also reacts to movements and clicks of the mouse - hovering over the arrow in the top left lowers the menu for the user to browse through.
This is my favourite of the examples above as this site establishes a mood and has a childlike simplicity and quality to it which emphasizes the importance of user experience and feeling rather than just an interesting and interactive way of showing information.

Tuesday, March 3, 2009

web///2.0

The Internet, as we know it, is changing.

Web 2.0: Definition
Web 2.0 is the newest 'version' of the Internet in which users and consumers can interact with, change and add to the content of the Internet. The Internet, then, has become a personal (or user) experience based on participation and interaction.

The Internet, originally, was a one-way experience: the Internet gave information to the user.
Allow me to explain that in a little more detail. The original Internet (web 1.0) was very limited in what it could do. Everyday users were unable to upload information to the Internet as we do today. Building a website was a slow and often confusing process and as a result many users just avoided the hassle all together. Because of this, a web 1.0 user would simply log on and take information from the Internet without interacting with it in any other way. The information was presented, and the user read it.

More recently, the Internet has started to evolve.
Users today can also add to the Internet. Websites such as Facebook, MySpace and Bebo allow all types of people to make their personal mark on the Internet. Anyone can now upload photos, thoughts, experiences or simply how they're feeling. Users can now interact with the Internet, making the online experience a personal ordeal rather than a factual one.

Think of it this way, 5 years ago you could log on to the internet, research a topic then take that information away to use in the real world. Today, you can log on to the internet, research a topic and using that information create a blog (such as this one) in which you can share this information and your personal views on the topic with other researches. You may also like to add to the information you are finding. Websites such as Wikipedia allow you, as a user, to not only access any information but also add to and change it. This is the essence of Web 2.0 and the difference between its 1.0 counter-part: user interaction.



Web 2.0: Examples
(as mentioned above)

Wikipedia, the free encyclopedia.
http://en.wikipedia.org/

Users can publish information and contribute to the whole. This creates an online community of shared knowledge, which is constantly changing and being updated or corrected.

Facebook
http://www.facebook.com/
A social networking website: users can publish information, communicate with and comment on other users. This creates a personal experience for each user.