From Paper to Internet

Summary
The article introduces the concept of moving from a paper prototype to web-based instruction. Servers, browsers, and other basic information is explained to first-time users. Individuals have a two main options for creating web-based instruction, since the Internet was not developed to provide feedback.
Designers can:

• Create a player/plug-in (or buy one)
• Include scripts in HTML
• JavaScript
• Java
• Perl
• PHP

Another consideration that Designers must keep in mind, is whether the instruction will be purely between the Learner-computer or if the computer will merely be a mediator between Learner-instructor. The chapter continues to outline the different formats for delivering information to students. The sharing of basic files (through email, course delivery tools, home-brewed delivery), sharing of hyperlinks (website), instructor-learner interactions (discussion boards, chat), or learner-computer interactions (online tests or quizzes).

Creation of templates and rapid prototyping are discussed. Frick & Boling break down usability testing:

• Find (new) authentic subjects
• Determine authentic tasks
• Consider authentic conditions
• Create a test plan and hold a pilot session
• Conduct the session
• Analyze the results
• Decide if another round of usability testing is needed

Thoughts
The majority of the information presented in chapter 5 & 6, was information that I was already aware of. Some of the issues presented, such as deciding what kind of interactions the designer intends, are important to define. However, I feel that most individuals reading this book should be aware of all of the concepts presented at the beginning of the chapter. The process of usability testing is always helpful to have laid out in a nuts and bolts kind of way.

~Mikah

Resources
Frick & Boling (2002). Effective Web Instruction (Chapters 5 & 6)

Reflection

Thoughts
My overall thoughts about the project are positive. I enjoyed the realistic context and approach. In contrast to others, I thought pushing us to develop a mock-up of the Wix site and then switching gears to a Dreamweaver site was incredibly realistic. I do agree that there was a lot of confusion because of this (with deadlines and other such things). How many times are we going to face similar pressures and frustrations in our jobs? Also, I feel the experience was more about the process and challenge, rather than the final project. I did learn to use some new tools (HotPotatoes) but other than that, I relied on my previous knowledge for most of the deliverables. Perhaps providing some relevant tutorials or knowledge before beginning the group projects would be helpful?

Teamwork was an important part of this project. Kevin was wonderful in coming up with the content for both the What If... page as well as the Save the Earth page. Kevin also came up with the assessments. To put it simply, Kevin was the brains of the operation and I suppose I was the brawn! I simply tried to use my knowledge of Dreamweaver and Graphic Design skills to put together a functional and appealing website. Thanks Kevin for critiquing my wording!

I feel slightly disappointed in all of the navigation problems with the site. I put a lot of work into trying to make all of the links work and the overall functionality of the project. I should have been more attentive to the Spry issues and went with some other option. I tend to obsess over these kinds of things, but I suppose I should take this knowledge and apply it to my individual project and move on.

As far as adjustments to the site goes, I would rely heavily on the comments we received from others over our project. I have pulled a few of the pertinent comments out to address.

Adjustments

Navigation

"I think your next image is a great idea (touch the hand with your hand), but it feels strange to be moving my cursor to the left to go next. Perhaps you might place it at the end of the sentence?"

This first comment is a quick fix. Originally I had placed the hand image on right alignment, but I felt that it was at odds with the sidebar being on the left. I'm mainly a graphic design person, so I was sacrificing common sense for alignment and flow of the page I suppose. =)

"Is it just me or is there an issue with the navigation bar across the top? It looks good, but it doesn't seem to work for me. I'm using Chrome."
"My only critique would be that the navigation was a little confusing for me. I expected the words in the top banner to be actual links. I can understand why you chose to keep the course linear but I guess I always prefer to jump around to topics that interest me most. Actually, that brings up a question. Is it necessary to have a linear course in order to implement the First Principles correctly?"

The main feedback we had was confusion over navigation. When I originally altered the template, I wanted a navigation bar with a drop-down for the Basic Concepts. I felt it was important to have them together, but on separate pages. When I went to the Dreamweaver Help menu, it pointed me to the Spry Navigation Bar but cautioned that there were many issues with navigation because the HTML (XML) was not supported by all formats. I went ahead and made the navigation with Spry but added the bottom navigation to offset any problems with moving through the site. I take sole responsibility on this decision, since Kevin left the design mostly up to me. I apologize for any issues this caused!


Assessment

"Your assessment takes an interesting approach, and I like the in-depth questions, but it is unclear to me how this would function. How will you provide feedback to your users?How do they know if their answer is good? Are you reviewing them? If so, how will you get responses back to the user since you don't have their contact info? Also, the scrolling makes it difficult to work with"

I think this comment is regarding the Google document that is embedded on the Lend a Hand page. We went with this format because we had continuous issues with HotPotatoes and wanted a quick fix. I could easily add sections for contact information to be sent along with the individuals answers. However, I assumed that since this was a course for a virtual High School, that some log-in information would be required from each individual before they accessed the course. I should have clarified this beforehand. The document can be embedded without any scroll bars, but it sent the template into whack, so I down-sized it. If I were to continue working on this project, I would fix the sizing on the box as well as the template being off-center on high resolution screens.

~Mikah

References
Sustainable Development

e3 Instruction

Summary
e3 (effective, efficient, engaging) is based primarily on a problem-centered, peer-interactive, and technology-enhanced instruction. Two memory processes exist: assoc

Problem-centered refers to instruction that is taught with the specific intent of allowing the learners to solve a real-world problem. Instruction covers all the skills that are required to solve the task. The  overall sequence of problem-centered instruction is to demonstrate a skill and then apply it to a problem. This demonstrate-apply cycle is repeated until learners gain all knowledge required for solution of problems. A sequence of 3+ cycle (demonstration-apply) problems are recommended.

Peer-interactive refers to activities such as: peer sharing, peer demonstration, peer collaboration, peer critique, and peer-telling. Peer-telling is the least effective of the peer-interactive activities. Each activity relates to a First Principle.

• Activation - Peer Sharing
• Demonstration - Peer Demonstration
• Application - Peer Collaboration
• Integration - Peer Critique

A list of assignments was also included for individuals to follow.

1. Description of problem
2. Resources (papers, videos, animations, power point)
3. Worked problem
4. New problem
5. Individual solutions (posted to assigned group)
6. Group collaboration (discussion board)
7. Group solution
8. Group critiques
9. Group collaboration (revision)

Instructor roles were said to consist of 2 main responsibilities

1. Course development - instructor develops a sequence of the previously listed problems for the course
2. Monitor course
• if a member of a group is inadequately participating - admonish
• if a group solution is inadequate - suggest revisions

Thoughts
Merrill provides a very clear description of the concepts presented in this article. The model of First Principles of Instruction which incorporates Problem Centered approach was extremely helpful. Even more helpful is the provided list of activities. I feel this information would be important to give any instructor of an eLearning course.

However, this kind of approach does seem slightly restrictive in some ways. By providing a list of activities, one almost feels that each step should be followed and additional activities/assignments would be inefficient or unproductive. I do not think this outline would be appropriate for every single course. As always, each topic is unique and should be approached as such. I do believe that this creates a nice guideline for instruction, if there is a question on how it should be compiled.

~Mikah

Resources
Merrill, M. D. (2008). What Makes e3 (effective, efficient, engaging) Instruction?

Paper Prototyping 101

Summary
The summary of this reading is going to be a little different from my previous summaries because the information is more quick facts than explanations.

Prototyping Toolkit

• White poster board 11x14
• Blank paper
• Unlined index cards
• Markers/pens
• Highlighter
• Scissors
• Transparency
• Tape
• Restickable glue
• Removable tape
• White-out

Don't Use

• Sticky notes
• Flip chart paper
• Ruler
• Fine-tip pencils/pens
• Laminator

Elements of the Prototype in action!

• Background - represents the computer screen (draw controls that would appear on every screen)
• software application backgrounds
• browser backgrounds
• include common buttons: Back, Forward, Home, Print, & Search
• omit: Stop & Reload
• small-screen interfaces
• size may or may not be important depending on what you plan to learn from the prototyping session
• Widgets - the screens placed on top of the background
• Buttons & checkboxes - Removable tape placed on the item represents that the user has "clicked" it
• Tabbed dialog boxes - Use a stack of notecards with tabs! Shuffle the cards depending on which tab is "clicked"
• Text fields - Users can write on removable tape
• Drop-down lists - Write the drop-down selections on a separate piece of paper and display it at the appropriate time
• Selection bar/highlight - Use a piece of transparency paper over the "highlighted" selection
• Expandable dialog boxes - Cover expandable options with a piece of paper and remove when it is selected
• Expandable lists - Cut the lists into pieces and shuffle them around, adding the expanded options, when selected
• Disabled controls - highlight with a gray transparency
• Cursors - The user's finger will be the cursor. If the cursor changes based on the action, include a picture of the cursor as a cue for that action.

The user's choices can be represented by highlighting them with transparency along the way. This creates a sequential visual representation tha tall can follow. Hand drawing is preferred, but screen shots may be used when necessary. The chapter goes on to explain simulating interactions such as tooltips/mouseovers, rollover/pop-up menus, beeps, drag & drop, right mouse menus, sliders, animation, links, and scrolling. Overall, the use of common sense and simplicity wins out. Highlighting sections, having the "computer" mimic any sounds, and verbal explanations are typically sufficient in most scenarios. Hardware proprs such as tape backup system, portable MP3, and touch screen control panels are discussed as well. Keyboards are typically not used for paper prototyping. The user will write or draw items on transparencies or paper for keyboard interactions.

"Incredibly Intelligent Help" is when an individual is designated the task of being the "help" section. Any questions the user may have will be directed to this person. The "Incredibly Intelligent Help" will answers questions tersely and must be prompted for more information.

Wizard of Oz Testing is using an actual computer during the paper prototyping when needed, either for graphics or tables, ect.

Thoughts
Where Frick & Boling (2011) focused on the need and process of using a paper prototype, Snyder focused on the down-and-dirty creation of a paper prototype. I appreciated his list of materials to use and not to use, along with the explanation of each. I feel this list may have saved me time when I begin creating my own, because he has already provided the footwork of testing the supplies. I would have initially thought that post-it notes would work very well. However, I can understand that they begin to pop-up, rather than lay flat, after moving them too many times. I also would not have known about restickable glue!

While I feel I would have figured out how to mimick all of the computer interactions with a little thought, the lists of common items and how he represents them was also very helpful. I may do a few things differently in my own presentation, but it is always good to have a starting point. The concept of "Incredibly Intellligent Help" never would have occured to me. In fact, I had not even considered the need for any Help sections. This approach would allow me to analyze if a Help section should be included or not. If the user has questions they can be directed to the "help" and documented. This would allow me to include only relevant information in a Help section.

I must admit that I am beginning to get excited about creating a paper prototype. I am interested to see how mine will turn out and if the techniques I am learning will play out smoothly in action!

~Mikah

Reference
Snyder (2003) Paper Prototyping: Making a Paper Prototype