P.T.I- Moodboard

Johnny Smith's Moodboard

User Persona: John is a 75-year-old retired carpenter who still enjoys hikes in national parks and riding 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 the 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 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.
• Compter Skill: Novice user. Finds things too complicated on the computer to use. Has an email but doesn't know how to use it properly.

P.T.I-Storyboard for Making Toast

Active: 

• When Mouse Rolls Over Menu item such as "How to make toast", text enlarges.
  
• When Mouse Hovers over underlined text, it changes colour notifying user of a link.

Inactive: 

• Toast icons bounce freely.
• When in a menu link, text is a different colour to inactive menu links.

Active: 

• User needs to click on RED toaster to begin.
• User has the opportunity to move back or forward within the website.
•  Also able to skip steps through the navigation numbers on the bottom.

Inactive: 

• Toaster is automatically placed on table.
• Navigation Toasts above "Back" and "Next" get darker and darker as steps progress.

Active: 

• User needs to click on the red spot to read step. 
• User is also able to skip a number of pages through the arrows next to the number navigation.

P.T.I-"How to Make Toast": Method & Flowchart

Flow Chart

Step-by-step instructions of how to make toast:

1. Wash hands.

2. Place toaster on sturdy kitchen bench near a power 

outlet.

3. Plug in electric cord to power outlet.

4. Insert two slices of bread in toaster, one in each slot.

5. Check if toasting level is to desired setting- If not change.

6. Turn on power switch.

7. Push down lever till mechanism locks.

8. Wait till bread cooks, toast will pop up when cooked.

9. Wait till toast is cool to touch.

10. Remove toast from toaster and place on plate- Is it toasted to satisfaction?

11. Put on favourite spread and enjoy!

Information/Instructional Design examples

Information Design Examples

CityRail network map

CityRail's Network map uses colour to clearly define the different types of railway lines that make up the network. The user is able to quickly navigate what stations they are near and how many till their destination.

Female/Male Bathroom Signs

These bathroom signs of a femaile and a male are universal. The symbol is known to represent restrooms located in shopping malls, airports etc.

Instructional Design Example

How to make a paper plane

This image uses diagrams to allow users to follow the steps. Although there is no physical text to back up the images, the use of line, arrows and different shades allows the user to effectively follow the steps to make a paper plane.

Information/Instructional Design Definition

Information Design- A field and approach which is concerned with clarity and understanding. It gives data (unorganised facts) value by organising, transforming and presenting it in a way that gives it meaning. Information designers seek to exchange ideas and enlighten the recipient by giving them increased understanding. 

"The values that distinguish information design from other kinds of designs are efficiency and effectiveness at accomplishing the communicative purpose".

Robert E. Horn

Instructional Design- Involves the analysis of learning needs and goals and the development of a delivery system to meet those needs, and help facilitate learning most effectively. These instructional tools and content typically specify a method, that if followed will ease the transmission of knowledge, skills and attitude to the recipient. 

Instructional designers often use technology and multimedia as tools to enhance instruction.

Robert E. Horn, Information Design: The Emergence of a New Profession, Information Design edited by Robert Jacobson. Page 16.

Great Web examples

http://www.rulethestars.com

This website allows the user to align the stars into any shape they like and draw magical constellations of their own

http://www.churaumi-hakken.jp/p3/

In this website you can view the Okinawa Churaumi Aquarium via a video wall in the shape of a shark.

Interactive Design Definition

Interactive Design is built on story telling and creating. It is about creating experiences for others in order for them to respond. The bottom line is that interactive design is powered by people; it needs user input in order for it to function.

The term interaction can be referred to as a for

m of communication, either one-on-one (telephone call), one-to-many (YouTube) or many-to-many (the Internet). Interactive experiences can be in any medium such as live performances and services, but primarily centres around technology. The discipline aims to define the behaviour of these complex systems which enable user interaction.

"Interactive design is concerned with a user, customer, audience or participant's experience flow through time... Interactivity is concerned with being part of the action of a system or performance..."

Nathan Shedroff

Related Links:

Nathan Shedroff- Information Interaction Design: A Unified Field Theory of Design

http://www.nathan.com/thoughts/unified/3.html

Bill Verplank Interview from Bill Morridge's "Designing Interactions"

http://www.youtube.com/watch>v=C3rxCLhzmXY

Gillian Crampton Smith Interview from Bill Morridge's 

"Designing Interactions"

http://designinginteractions.com/interviews/GillianCramptonSmith

Web 1.0 Vs Web 2.0

To understand the Web 2.0 phenomenon, we must first look at  Web 1.0 and how it has transitioned in order for Web 2.0 to  become the frontier of design innovation.

Web 1.0 refers to the state of the World Wide Web before Web 2.0. Web 2.0 has evolved from a "static" state to a more dynamic approach. This dynamic characteristic means that it is continually changing in response to user input. Static webpages contains content that displays the same way each time the page is requested from a browser. 

Web 1.0 and the transition to Web 2.0- 

OLD Vs NEW

Reading->Writing

The shift from read-only material encourages users to participate, contribute and produce information.

Companies-> Communities

Client Server->Peer-to-peer

Homepages->Blogs

HTML->XML

Taxonomy->Tags

Wires->Wireless

Dial-up->Broadband       

Portals->RSS

Netscape->Google

Web 2.0 Examples

Some examples of Web 2.0 include:

• Social networking sites: Facebook, Myspace, Twitter and Skype.

• Video sharing sites: YouTube and iFilm.

• Image/ video hosting and photo management sites: Flickr and Photobucket.

• Wikis: Wikipedia and Blogger.

 

 

Web 2.0 Definition

Web 2.0 is a term coined by Dell Dottery who mentioned it in a web conference brain-storming session. As Web 2.0 does not have a meaning that is agreed upon, it is more of a concept of the evolution of the web, with it's development focusing on end-users.

It's name, which includes a version number, alludes to an "upgrade" of software and indicates a new and improved era in application development for the world wide web.

This "second phase" in web architecture allows social networking, provides new modes of delivering information and encourages user participation and interaction, making them content generators.