While working as a Multimedia Specialist at HTI I was tasked with developing a single web template that could be used by all of the stakeholders in the Development and Education department. Different users had significantly different needs, but the template had to be simple and straightforward so the end user, any end user, could use it effectively. My end users might be engineers, assemblers (some with very little English), department managers, janitors, or top executives (some of whom had trouble even loading CDs themselves). Ideally, this template could be used also by our Instructional Designers, who had no coding or graphics background. The navigation needed to be reasonably intuitive, and static, regardless of the learning situation. Additional information had to be available when needed. The "Look" had to be elegant but not distracting.
I began by ascertaining what our minimums were at each of our facilities. Each workstation had a Dell computer running Windows XP. The minimum monitor resolution was 1024 x 768 but above this there was a range of resolutions. All CPUs came with the current version of Internet Explorer, but I coded for an older version since I couldn’t be sure what users would be running on their own laptops. I set up a series of possible layouts with color schemes and got universal approval for one. It has the logo in the top left corner, a block for the course title, a notation that the content is confidential, and basic navigation at the bottom of the page (buttons only appear when relevant, for example, there is no "back" button on page 1).
I built a cascading style sheet for the layout, the object placement, and various graphical elements. The CSS file was heavily commented allowing for our internal Instructional Designers to figure out what went where. Over the course of development I added various objects, a popup menu (site map), a course specific glossary (the decision not to use a single, universal glossary was made by the committee), breadcrumbs to track user progress, etc.
This is the "How to Use this Course" popup (which wasn’t a dirty word yet*) from this example.
Introduction page: Note both BreadCrumbs ("Section 1.1 - Introduction to Lesson 1") in Title Box and "Page 1 of 12" at bottom to tell the user where they are.
This is the always available Menu. Each item is a link that allows the user jump to any topic and thereby to use this elearning tool as a reference as well as a lesson.
This is one type of embedded quiz. A response is triggered by the user clicking on an answer. Each answer has its own relevant response.
A multiple choice style of quiz. I placed quizzes every six to ten pages in order to help the learner retain what they have read.
I used a lot of rollover functions, allowing users to "try out" answers without risk of getting a "wrong" answer on a quiz.
The "Show Me" button was always used to initiate a Captivate sequence where the user understood that they would see a hands-off step-by-step simulation of the process they were learning about.
Captivate animations use word balloons to explain what is being done.
I also used a lot of in-page simulations where the user is prompted to take the correct action, but has to actually perform the action to get a reaction. Many, but not all, also used an "incorrect" response if the user did not perform the correct action.
Each unit had a summary.
And some actions, completion of an over-unit, passing a unit end quiz, etc. garnered a Congratulations popup.