Making Toast For Beginners, Part 3 of 3

Developing Mood Boards:
“Mood boards are a very basic but highly effective tool. They work as an extension of personas, creating an immediate, understandable, visual reference for each one. In this capacity they allow people who have not been involved in the persona development process to get a flavour of them without having to read through all the details.” (BBC, 23)

Prepare a mood board for the following user persona:

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.

Mood Board:

Works Cited
BBC. "The Glass Wall, The Homepage Redesign 2002"
Figure 1. http://img.dailymail.co.uk/i/pix/2007/06_03/grandparentsREX_468x708.jpg
Figure 2. http://upload.wikimedia.org/wikipedia/en/e/ee/How_The_West_Was_Won_screenshot.png
Figure 3. http://www.caribbeanschool.org/FlagoftheRedCross.png
Figure 4. http://www.ibspro.net/wp-content/uploads/2008/06/caravan.jpg
Figure 5. http://nicolespag.com/wp-content/uploads/2007/11/jetblue.JPG
Figure 6. http://www.casinosonline.co.uk/images/bingo-pic2.gif
Figure 7. http://www.bnnrc.net/images/pagemaster/CommunityRadioCartoon.gif
Figure 8. http://www.audiodescription.com.au/~audiod/images/stories/Radio.jpg
Figure 9. http://motorcycleinsight.com/wp-content/plugins/hot-linked-image-cacher/upload/harley-charity-tour.at/presseinfo/Harley-Davidson.jpg
Figure 10. http://www.uncrate.com/men/images/Harley-Davidson-VRSCD.jpg
Figure 11. http://www.aclibrary.org/eventkeeper/Graphics/SLZ/computer.jpg
Figure 12. http://www.verst.com.au/images/articles/20050501_exitsigns.gif
Figure 13. http://www.ricesigns.com/real_pictures/school_crossing_signs.jpg
Figure 14. http://www.atlasautomobility.com/uploads/grandparents.jpg
Figure 15. http://www.lumink.com/products/images/exit_signs.gif
Figure 16. http://www.world-guides.com/images/hobart/hobart_map_city.jpg

Making Toast For Beginners, Part 2 of 3

Storyboard:
Prepare a storyboard for a section, highlighting inactived and actived interaction/navigation from a section of your 'making toast' flowchart.

Making Toast For Beginners, Part 1 of 3

Step by Step Text Description:

1. Plug toaster into power point at wall.
2. Switch power point on. (Is it safe?)
3. Put bread in toaster.
4. Adjust toasting settings to liking.
5. Push toaster leveler down. (Does it work?)
6. Observe so it doesn’t burn too much.
7. Toast ready. (Is it to liking?)
8. Remove from toaster. (Is it too hot?)
9. Put on desired toppings.
10. Eat toast.

Flowchart:

Information/Instructional Design, Examples

Almost any graph, map or visual instruction could be used as an example of information and instructional design, the category broad yet its content simple enough. Such example can include:

Maps
Maps, however detailed or simplistic, offer the audience with a view (most often a bird’s eye view) of their desired subject, designed to reflect the most important information the viewer may be after. An example, CityRail’s railway routes provide a mapped out design as to what line, indicated by colour, travels to where and what stations consist on that line.

Signs
Signs provide important information at, most of the time, quick analysis. For example, road signs must be direct and provide the most vital information to ensure a driver’s understanding of the road and its conditions, the area and their own safety. Another example would be building signs, such as exits and toilets, such categories usually depicted through symbolic graphics and colours, e.g. exit signs are usually a bright green, toilet signs are often distinguished between a male, female and wheelchair icon.

Graphs
Graphs are used as visual representation of a common collection of data, proving more effective for an audience’s understanding then simply providing them with a dense paragraph of complicated numbers and information. In a design sense, a graph can be as simplistic as sectioned off into colours with simple shapes, or become more creative as a symbol of what it is representing, for example, a tobacco company may provide their annual report graphs as bar graphs, with each bar instead a cigarette.

Works Cited
Figure 1. http://www.cityrail.info/out_about_sydney/images/daytripper_map.gif
Figure 2. http://www.taronga.org.au/taronga-zoo/plan-your-visit/zoo-map.aspx
Figure 3. http://www.queenslandholidays.com.au/fms/images/maps/brisbane_region.gif
Figure 4. http://www.atem.org.au/images/feature-map.gif
Figure 5. http://server11.sitewizard.co.uk/sites/orbitalsigns/images/pic1_fire.gif
Figure 6. http://www.caravanning-oz.com/Road%20sign.jpeg
Figure 7. http://karnal.nic.in/Road-Sign-complete.jpg
Figure 8. http://www.lawrence-najjar.com/images/Pie_chart.jpg
Figure 9. http://vectortuts.s3.amazonaws.com/tuts/69_Quality_Bar/Picture-26.jpg
Figure 10. http://pro.corbis.com/images/81023-99.jpg?size=67&uid=%7B41AC4F5F-ADA8-4046-988F-2D931CE417C1%7D
Figure 11. http://pro.corbis.com/images/CSM002838.jpg?size=67&uid=%7B8C1D8FFA-BEEC-42E2-B9FA-EB0061CEF37B%7D

Information/Instructional Design, Definition

Information and instructional design outline the process of designing visual needs for information and instructions. For example, a pie chart provides the audience with visual understanding of statistics, making it easier and quicker to understand the information being delivered, rather then just a paragraph of digits and values.
The usage of design in instructions, such as how to put something together or mapping out escape routes, allow again for quicker understanding and guidance as to what needs to be done. Also, providing graphics to instructional information bridges the gap of language differences as most graphic depictions can be understood universally.

Interactive Design, Examples

A category in interactive design can include website layouts, as a designer can choose to what extent a viewer may be able to participate and contribute to the site. Such an example of Web 2.0, where the information is not static on the page yet delivered in an interesting and interactive approach.
Examples of web interactive design:

Animal Logic
Animal Logic’s company site provides interaction by forcing the viewer into participating with the site in order to uncover the studio’s information, such as contact details and project works.
The main links are provided to the top, set up as categories to guide the audience as to what they are looking for. Yet it is not until such links are clicked on, does further information begin to unravel, for example when viewing Animal Logic’s works archive, their titles are spread across the page with accompanied thumbnails recognizable to the viewer. Once clicked on, the site opens up specific information regarding that project, with a scroll through gallery of screenshots, etc.
Link: http://www.animallogic.com/

StripGenerator
StripGenerator.com provides an example of interactive web design through it main purpose of generating web comics for personal and blog use. The site allows visitors and members to develop their own comic strips through the provided clip art of the site while given free range to drag and drop desired content onto the project and manipulate it one’s preference.
StripGenerator also reflects interactivity by encouraging users to upload their finished comics and contribute to the development of the overall site.
Link: http://stripgenerator.com/

PoseManiacs
Encouraged to participate with the site’s content, PoseManiacs.com approaches their information delivery by an interactive means. The site acts as an archive of varied poses for art references, to the right are categorized themes, such as male, female, walking and angled. When the viewer selects a specific pose the page loads afresh to display it, interactively allowing the user to then click and drag on the image to adjust angle and focus, providing a single pose reference with multiple usages.
Link: http://www.posemaniacs.com/

RateMyDrawings.com
RateMyDrawings.com displays interactive design by its main purpose, allowing members to draw on the site, upload such drawing and allow community feedback. A user is able to draw a image using the site interactive means, then once finished, the complete image is available to the online community through a playback function which has recorded what the artist has done through the process leading up to the finished image. In short, the site allows an audience to view the in progress version of the design, from start to finish. Users are then able to comment, rate and give feedback on the drawing and artist, hence an interactive community.
Link: http://www.ratemydrawings.com/

Online Chat Rooms and Games
Many online chat rooms, such as IMVU or Habbo which achieves interactivity through a visual interface can be deemed as a web interactive design, taking upon the characteristics of Web 2.0’s chat sites and communities and applying pixilated avatars. The interactivity is continued and carried through the continuous options of customization and socializing of other community members.
Online games can be suggested an example, much like the visual chat rooms with personalized avatars and participation within the community. Many games now are developing themselves without the hassle of downloads, such as children sites of Disney and Neopets where the games are available through web browsers with a simple mouse click and automatically produce interactive material to keep the audience entertained.

Interactive Design, Definition

Interactive Design is the process of developing for society functions in which we may interact with everyday. Its process can be broken down and include: interactivity, information architecture, time & motion, narrative and interface, across an array of media such as computers, telecommunications, mobile phones and so on.
In order to be effective, interactive design must constantly consider the context in which the final designed product will be in, as to what affects the future user and under what circumstances such a product will be used.

Works Cited
Crampton Smith, Gillian . "Foreword". Designing Interaction.