• Individualized Instruction
• Goal Analysis
• Task Analysis
• Classified Instructional Outcomes
• Test Items & Feedback
• Frame-based Instruction
• Storyboards
• Usability Report
• Final Tutorial
• Informal Learning
• Casing an Informal Learning Experience Reflection
• Proposal
• Learning Opportunities Grant (LOG): Outcomes Logic Model
• Design Specifications, Part I
• Design Specifications, Part II (Objects and detailed specifications)
• Technical Specifications (Technologies)
• Visual Representation
• The Treatment: Final Proposal Presentation

---

The learners are students enrolled in San Diego State University’s department of educational technology course, “EDTEC 541: Web-based Multimedia Development.” Students are expected to have only basic prerequisite knowledge of web design and development. The tutorial will concentrate on design guidelines, but refer to basic website and development concepts and terms. The focus of the tutorial is on the four basic website design principles: 1) contrast, 2) repetition, 3) alignment, and 4) proximity.

Upon completion of the web design tutorial, the 541 students will be able to:

• Recall the basic elements of a website,
• Identify appropriate and inappropriate examples of the four design principles (contrast, repetition, alignment, proximity) within several websites,
• Differentiate between the four design principles, and
• Apply the principles and follow common guidelines to design a blank website.

[back to top]

• Web Basics: Terms referred to within modules
• HTML
• Website
• Web page
• Typeface, typography, font
• Rules
• Illustrations, graphics, pictures
• .jpeg
• .gif
• Banner
• Heading, headline
• Sub head
• Background
• Content, container
• Logo
• Links, buttons, navigational buttons
• Navigation system
• Graphic signposts
• Spatial arrangements
• Introduction
• If used in coordination, these design principles will enable you to:
• create a clean, neat, professional, and easy-to-use website and
• communicate more efficiently and effectively via your website.
• General Rule: No elements should be placed on a page arbitrarily; everything should have a reason for being where it is. 
• Module 1: Contrast
• Definition:
• Grabs your attention and draws your eyes into the page;
• “Guide your eye around the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need”;
• Examples: different typeface (bolder, bigger, style), colors, graphic signposts, or spatial arrangements
• Rules:
• “If two elements such as type, rules, graphics, color, texture, etc., are not the same, make them very different – don’t make the m almost the same!”
• “Let the words communicate”;
• “Create a focal point”;
• Focal point = “something must be the dominating force, and the other elements follow a hierarchy from that point down”
• Activity:
• Click on the focal point used in the website shown. 
• Module 2: Repetition
• Definition:
• “Repeat certain elements that tie all the disparate parts together”;
• Each page within a site should look like it belongs to the same site;
• Rules:
• Unify the entire website by using repetitive elements, such as: colors, style, illustrations, format, layout, typography, navigation buttons;
• Use a consistent and repetitive navigation system to enable users an easy way to get around and get the most out of the site;
• Activity:
• Click on the elements that make these pages look like they belong together.
• Module 3: Alignment
• Definition:
• Line up elements on the page;
• “Alignment doesn’t mean that everything is aligned along the same edge. It just means that everything has the same alignment – either all flush left, all flush right, or all centered”;
• Results in clearer communication for websites that contain lots of information;
• Right justified
• Left justified
• Centered 
• Rules:
• Best to choose one alignment and use consistently throughout the page;
• Don’t mix alignments;
• Don’t use a centered heading with a left justified;
• Avoid using center alignment (it can look unprofessional);
• Be aware of both horizontal & vertical alignment; specifically, watch horizontal alignment on buttons and links; 
• Activity:
• Draw lines to show the alignment apparent in each website.
• Module 4: Proximity
• Definition:
• The relationships that elements develop when they are close together, or close in proximity;
• Two items that are close in proximity appear to have a relationship or belong together;
• Information grouped appropriately is organized, easy to read, delivers a clear message, and maintains a unified structure/layout; 
• Rules:
• Be conscious of the space between elements;
• Group elements together that belong to each other, i.e. display appropriate relationships;
• Activity:
• Count how many times your eyes jump from one element to another on the page or
• Circle the items that are group appropriately/inappropriately.

[back to top]

Given a blank website (HTML file), the 541 student will be able to design and arrange graphic elements to show proper contrast, repetition, alignment, and proximity (apply principles). The student will be able to recognize commonly used website design and development terms (remember fact).

The student will be able to identify appropriate uses of contrast when given a well designed website (remember principle).

The student will be able to identify appropriate uses of repetition when given a well designed website(remember principle).

The student will be able to identify appropriate uses of alignment when given a well designed website(remember principle).

The student will be able to identify appropriate uses of proximity when given a well designed website (remember principle).

The student will be able to recall universal website elements (remember concepts) and appropriately place them on a blank website (or HTML file) (apply concepts).

[back to top]

PDF Version

Stem	Distractors	Feedback
Which element of the website represents the navigation system? (Click item)	1. Buttons 2. Secondary link system	1. Correct answer. These buttons represent the navigation system that enables you to visit the website’s main pages. 2. Incorrect. These links represent the secondary link system, which enables you to link to different spots within this page. The navigation system is located on top of the page (highlight buttons) and allows you to visit each of the site’s main pages.
Which element of the website represents the heading? (Click item)	1. Heading 2. Subheading	1. Correct answer. 2. Incorrect. The heading is the main header used on each page within the site. You chose the subheading, the secondary heading shown on this website.
What is the focal point of this web page? (Click item)	1. Focal point 2. Navigation system	1. Correct answer. 2. Incorrect, this is the website’s navigation system. The focal point is here (highlight area); it grabs your attention and draws your eyes into the page.
What elements in this website make these web pages look like they belong together? (Click item)	1. Background color, typeface, logo, and navigation system 2. Page graphics	1. Correct answer. 2. Incorrect, these graphics are used only on this page. The elements that make each page look like it belongs to the same site can be the color scheme, typeface, logo, layout, and navigation system.
What set of lines represent the appropriate alignment applied to this web page? (Click item)	1. Red lines (show left justified alignment throughout the page) 2. Blue lines (show center alignment throughout the page)	1. Correct answer. These lines show the left justified elements of this web page. Left alignment provides the users’ eyes to clearly navigate the page and ultimately results in clearer communication throughout the website. 2. Incorrect, these lines display the center alignment used within the page. Center alignment should be avoided when designing a website because it can look unprofessional.
What type of alignment is typically violated in button design?	1. Left & right 2. Horizontal & vertical	1. Incorrect, left and right justifications are usually applied in the button design. 2. Correct answer. Horizontal and vertical alignments are typically violated by the text used within the buttons.
Which type of alignment should be avoided in your website design?	1. Left 2. Center	1. Nope, left alignment used in the website result in clearer communication. 2. Correct answer. Using center alignment can make the website look unprofessional and novice.
Which elements are grouped appropriately on this web page? (Click item)	1. Logo and slogan; header, logo and buttons 2. Subheading and text body	1. Correct answer. The logo and slogan look like one group. The header, logo and buttons also look like one group because they are place within close proximity. 2. Incorrect, the subheading and the body text are placed too far apart to make them appear as a one group.
When the proximity principle is appropriately applied, how many times, on average, should your eyes jump from one element to another on a web page?	1. 2-3 2. 9-10	1. Correct answer. Web pages that display proper use of proximity have elements grouped appropriately, requiring few eye movements. Your eyes should be attracted to areas of importance and not distracted by less important information. 2. Incorrect. lack of proximity results in yours eyes being attracted to several areas of the page, and your attention being distracted from the areas of high importance.
What is the typical effect of the proximity principle, when correctly applied?	1. Information is organized and easy-to-read 2. Elements are repeated and lined up	1. Correct answer. The application of the proximity principle results in elements grouped appropriately, which unifies them and organizes the page. 2. Incorrect. elements that are repeated and lined up follow the repetition and alignment design principles.

Stem	Distractors	Feedback
What is the number one rule in web design?	1. Never place elements on the page arbitrarily. 2. Never place items lacking a clear relationship together on the page.	1. Correct answer. 2. Incorrect, this rule describes the proximity principle. The number one rule in web design is something more general, which applies to each of the four design principles.
What are the primary benefits of using the four design principles in coordination?	1. Professional look and effective communication 2. Eccentric look and communication targeted at one audience	1. Correct answer. 2. Incorrect. The four design principles used in coordination will not result in any eccentric websites, as they tend to be difficult to read and use. Communicating to only one audience is limiting and doesn’t take advantage of the Internet’s main asset, the ability to communicate to the masses.
What is commonly referred to as the dominating force created by applying the contrast principle?	1. Focal point 2. Element relationships	1. Correct answer. The focal point refers to the contrast principle, which results in your eye being guided around the page, creating a hierarchy of information, and enabling you to skim through the vast array of information and pick out what you need. 2. Incorrect. Relationships refer to the proximity principle: “the relationships that elements develop when they are close together, or close in proximity.”
What is the main advantage for applying the repetition principle in the design of your website?	1. Unifying the whole website 2. Grabbing the users’ attention	1. Correct answer. 2. Incorrect. Applying the contrast principle results in grabbing the user’s attention. The repetition principle calls for repeating elements throughout the website to create a unified look.

[back to top]

Click here for the PDF version of the frame-based instruction.

[back to top]

Click here for the PDF version of the storyboards.

[back to top]

Click here for a PDF version of my usability report.

The usability testing conducted for the web design tutorial included an alpha and beta test. The alpha test consisted of observing and interviewing classmates while they interacted with the prototype. The prototype was comprised of the first two modules of the tutorial, the overview and web basics, and included the template and button design, content and one practice item. The beta test consisted of sending the tutorial via email to potential users, interviewing them upon completion of the tutorial for reactions, and requesting final quiz scores.

The feedback collected from the alpha test showed that the layout and design of the tutorial was logical and navigable. Some testers commented how they liked that the lessons had page number navigation because it allowed them the freedom to jump around the lesson as needed. The learnability testing indicated that learners would benefit from pictures of examples and non-examples for each design principle. Some testers stated they would like to see more graphics and expressed the potential for animation. When testers were asked if one practice activity per module would be sufficient, they expressed the desire to have at least two. Although the final quiz was not developed for usability testing, the testers and I discussed the assessment plan. All testers intrigued by the idea of a two part end-of-lesson quiz (one part is to test application and the other to test recognition) and only expressed the need to keep everything pithy.

The feedback collected from the beta test indicated that the tutorial is user-friendly and easy-to-understand, and that there is the need for few small changes. The testers comments signified that the tutorial is straightforward; one specifically stated, “This was easy to follow and understand for someone who doesn’t know anything about web design.” The learnability test showed that the graphics added value during the lessons and that users were able to apply their knowledge during the practice. Most testers liked the practices; however, one stated that the feedback for wrong answers needed to include the correct answer. (The assumption made was that users would continue to try to find the right answer after they got it wrong.) The part two quiz has seven multiple-choice questions, which all have three answer choices. The results were positive and indicated a high acquisition of knowledge after completing the tutorial. Two testers answers all seven questions right and two answered six of the seven correct. Other general feedback I received was that there was no title page to the tutorial.

Several revisions were made throughout the process to reflect the information gathered during the usability tests, including:

• providing three practices rather than one or two,
• revising practice feedbacks,
• adding simple objects, such as lines, to graphics to effectively communicate a concept and/or principle, and
• creating a title slide and linking it to the main modules within the tutorial.

The initial proposal for this tutorial included many other potential opportunities to enhance learning interactivity. Some revision ideas for future versions of my tutorial include:

• adding more example and non-example graphics to each module’s lesson,
• incorporating more advanced learning interactions, such as drag and drop, to part one and two of final assessment,
• changing the template used in the part two quiz to match the rest of the tutorial,
• adding animation to the lessons or creating movie clips to replace lessons and incorporate an audio component, and
• providing a virtual coach who would offer audio-based instructions, feedback and help on-demand.

The process used to complete this tutorial was slightly different than that I have experienced in traditional instructional design projects, but quite appropriate for individualized instruction. Writing the test questions and feedback directly after generating learning outcomes and before writing the instruction was extremely useful, and required me to avoid including irrelevant content in the instruction. However, I did experience scope creep throughout the development process, which naturally occurred when adding practice activities and creating authentic graphics. The most important lesson learned was that some instruction should or can be created and delivered without flashy and distracting animations or movies. Keeping this in mind saved me an immense amount of time and enabled me to deliver a clear message without technological constraints. [back to top]

Click here to view the final tutorial.

[back to top]

---

I visited the Getty Center and spent my time experiencing three main attractions: 1) Tim Hawkinson’s Zoopsia, 2) John Humble’s A Place in the Sun: Photographs of Los Angeles and 3) the architecture and gardens. This informal learning case study focuses specifically on the Zoopsia exhibit, which featured four new works by Tim Hawkinson: 1) Dragon, 2) Leviathon, 3) Octopus, and 4) Bat. Zoopsia, defined as “visual hallucination of animals,” uses an innovative mix of media for each piece of work to grab visitors’ attention. Hawkinson used the following media to create his new works:

• ink and paper for the dragon,
• Sculpey, Crayola model magic and steel for the Leviathon,
• photographs of human body details (fingers, hands, lips) reshuffled for the Octopus, and
• plastic bags and twist ties for the Bat.

Upon entering Hawkinson’s exhibit, you were provided with a brochure with an in-depth look at the artist and his work, as well as a short description displayed on the wall next to each of the four pieces. The exhibit was engaging because it felt interactive, requiring you to interpret and understand the artwork for yourself. The exhibit educated you not only to self-interpret, but recognize alternative perspectives of the natural world. Both the brochure and the wall descriptions serve as guides to help you learn the messages Hawkinson conveys through his art.

When observing other visitors, it was obvious they were also engaged in the exhibit, taking it in individually and discussing it with each other. There were many advertisements and signs that attracted and pointed visitors to the Zoopsia exhibit. I think visitors also found the innovative and unique art techniques showcased in the exhibit to be appealing; that especially attracted and maintained their attention. Most visitors were reading the wall descriptions to better understand the artwork; however, few people took the brochures. Moreover, many visitors overlooked the Bat piece at first, and when they discovered it they were compelled to point it out to those accompanying them. It was difficult to determine if the other visitors were learning from the exhibit, but I heard comments regarding their recognition of the animals and the unique art methods applied. Those with the brochure in-hand seemed to quickly understand the meaning of the artwork.

Some aspects of the exhibit that were particularly well-designed include:

• the location and layout of the artwork,
• wall descriptions,
• brochure, and
• placement of a gallery employee if visitors had questions on-the-spot.

The location and layout of the artwork was particularly interesting to me because it was apparent that each piece was placed with meaning and care. When I walked into the exhibit room, the dragon ink painting was the first thing I noticed, located kiddy-corner on the wall opposite the doorway (putting it straight ahead in your eye line). The next piece I noticed was the Leviathon, located to the left of the doorway, then the Octopus on the wall to the right of the doorway. After quickly glancing around the room, my attention was drawn to the Dragon, and as I turned my head to examine the Octopus, I noticed the Bat, which was strategically placed between the two largest elements in the room.

Some improvements that the exhibit designer might want to consider are providing more background information on the artist (including past work that relates to the current subject matter) and relating the exhibit to relevant historical and international artwork with an additional brochure.

The overall Getty Center experience offered several informal learning opportunities, including:

• brochures, guides, maps, paper-based job aids,
• an audio tour,
• interactive TVs in some exhibits, press button for audio and additional visuals, and
• informational guides provided next to the seating located in the middle of exhibit rooms.

The brochures and informational guides were an exceptionally effective method for communicating and educating because they enable visitors to contextualize the information while viewing an exhibit. Furthermore, the maps were a necessity for navigating around the park and designed to enhance usability by including “you are here” labels and clearly displaying the buildings graphically.

[back to top]

Title: A Car Trip through the Painted Desert & Petrified Forest

Type of museum: Painted Desert & Petrified Forest

Audience: Tourists driving through the Painted Desert & Petrified Forest

Goals: This informal learning experience will provide tourists with an audio track informing them of basic and interesting facts about the Painted Desert and Petrified Forest. The audio track will be recorded to CD for easy car use and would be timed appropriately. Additionally, roadside signposts used in coordination with a user’s guide will enable tourists to track progress throughout the trip.

Technology/Media: Audio track (CD, tape, podcast), roadside signposts and user’s guide

[back to top]

MS Word Version

[back to top]

PDF Version

1. How will you attract museum visitors to want to use your learning activity?
• Advertisements at the entrance point to the 26-mile path, as well as in the Painted Desert Visitor Center, Rainbow Forest Museum, Painted Desert Inn Museum, and the official website
• Park employees working entrance will promote the CDs, tapes, and podcasts and encourage visitors to purchase them for “edutainment” and a small prize if completed
• Variety of audio tracks from which to choose (appeal to a wide range of learners)
• From the perspective of: historian, paleontologist, scientists, dinosaur (for kids), and park ranger (for general information)
• Provide complementary journals to use throughout the drive in coordination with audio track
2. Once they have it, what will keep them engaged with it? Will you offer a "reward" for completing it?
• Stopping Points where they can get out of the car and interact with nature (i.e. touch, feel, smell, hear natural habitat)
• Scavenger hunt where they collect commercial pieces of petrified wood, fossils, or other relevant materials (depending on audio track) located near the stopping points
• Learners will have to discern between different types of petrified wood, fossils, etc.
• Note: Real petrified wood is not allowed to be taken from property
• At end of drive, learners will show collected items to park ranger/employee and receive a real piece of petrified wood if requirements are met
3. What will enliven prior knowledge or experiences relevant to the learning activity?
• Storytelling from various perspectives
• Reflective questioning throughout audio tour
4. How will the learning materials add value to the exhibit?
• Enable tourists to learn while they drive through the Desert and Forest
• Encourage visitors to stop at important points to receive relevant information and take photographs
• Increase attitudes and excitement about the history and nature of the Desert and Forest
• Promote further visitation at Visitor Center and museums
5. Will visitors have an opportunity to apply their new feelings or understanding? Draw a sketch? Make a choice? Try a solution?
• Collect petrified wood
• Identify where dinosaurs existed
• Recognize petrified wood, fossils, etc.
• Encourage writing down thoughts, inspirations, reflections, etc. after each stopping point
6. What will prompt visitors to reflect on what they see or experience?
• Complementary journals and stopping points will enable visitors to reflect on what they are hearing, learning and feeling.
• Audio track will encourage car passengers to discuss concepts, facts, etc. together during the drive and on the ride home.
7. What physical interaction might stimulate thought and/or discussion?
• Getting out of the car and exploring
• Collecting petrified wood, fossils, etc. (scavenger hunt pieces)
8. How will you facilitate further exploration?
• Encouraging travelers to stop at spots in addition to those planned along the drive
• Ask visitors to stop on the return drive at important spots, ask them to identify concepts, objects, etc. they learned about on the drive up

[back to top]

PDF Version

The Petrified Forest and Painted Desert informal learning experience will occur in the actual environment, a 26-mile drive, with planned, strategic stops that will differ depending on the perspective of the chosen audio track.

The informal learning context will include an audio-guided tour from the perspectives of a scientist, park ranger, paleontologist, dinosaur, or historian. Each of the audio track perspectives will provide authentic interactions and experiences, and visitors will be offered the choice of perspective in which they are most interested before entering the park. The audio tracks will encourage participants to stop at significant spots along the 26-mile drive and collect artifacts relevant to their chosen audio track. This scavenger hunt will provide a hands-on experience of collecting artifact replicas (petrified wood, fossils, etc.) and photographs within the real-world setting.

The interpretive aids I plan to include in my informal learning environment are:

• user’s guide and map,
• journal (used during car-ride by children in particular),
• signposts, and
• scavenger hunt artifacts (realistic commercial petrified wood, fossils, digital/cell phone pictures, etc.).

The learning outcomes for this learning experience are:

1. participants will value the historical and cultural heritage of the Painted Desert and Petrified Forest; and,
2. participants will appreciate the natural and scientific foundation on which the Painted Desert and Petrified Forest are built.

The environmental and contextual factors accompanied by the interpretive aids will enable learners to accomplish the specified learning outcomes by:

• providing a choice in audio track based on personal interests,
• encouraging them to interact with and reflect on the real-world environment, and
• offering incentives (in relation to the scavenger hunt) to motivate them to listen to the audio track in its entirety.

[back to top]

The Petrified Forest and Painted Desert informal learning experience will offer multiple technologies for visitors to access the recorded audio-guided tour, including: CD, cassette, podcast, and car GPS. Presenting these different technology outlets will eliminate participant frustration by ensuring they can use the tools with which they are most familiar. As the preceding design specifications describe, visitors will be provided the choice between audio track technologies upon entrance to the park. Both individual and group learning activities are used throughout the audio tour and encourage reflective thinking.

The other technologies necessary for the execution of this informal learning experience are a paper-based user’s guide, a blank journal and commercial artifact replicas (including petrified wood, fossils, etc.). The user’s guide will include a map of the park with stopping points and important information highlighted. The audio track will encourage visitors to write their feelings, thoughts, opinions, and attitudes in the journal when proceeding through the park. The journal will be offered in a variety of designs to appeal to multiple audiences and ensure participation. This activity will also provide tourists with a take-away artifact/asset they can keep and review in the future. The scavenger hunt, detailed in the above design specifications, will require realistic artifact replicas for participants to collect along the car ride. The collecting artifacts and photographs (using digital cameras, phone cameras, or even Polaroid pictures) activity will encourage visitors to learn about and discern between objects introduced by the audio track.

[back to top]

PDF Version: User's Guide Front & Back
PDF Version: User's Guide Inside





[back to top]

PPT without Audio Narration
PPT with Audio Narration

[back to top]