Develop Online Courses
Archives > Develop Online Courses > Instructional Design

How to Develop an Online Course
By Priya Williams

Lesson 3
Interface Design

3.1. Interface Design
3.2. Usability Testing
3.3. Template Design

Download PDF Version here

3.1. Interface Design
The interface is what the student will see on the screen. It includes:

• Navigation features - like buttons and links giving easy access to important and relevant information.
  
• Orientation - This tells the student where he or she is within the course.
  
• Metaphors - Choose a look and feel or theme for the entire course. This includes colors, background graphics, names of key elements etc. Eg. If using a classroom metaphor, you might like to design the buttons as written on a chalk board with names like 'syllabus' for 'main menu', 'locker', 'classmates', 'scores', 'student profile', 'discuss' or ' message board'. While converting a seminar you would probably chose very different titles for the same elements. Alternatively if it is a practical course on how to use a certain piece of machinery, you might like to design the buttons as those on the machine.

This is one of the most critical phases of the development process. Careful thought is required while designing the interface. Every attempt should be made to give the Web pages a consistent "look-and-feel".

A dynamic prototype interface of a typical course page should be created ready for testing.

Back to top

3.2. Usability testing
The dynamic prototype interface should be tested on the end users. Their reactions noted and suitable changes made. You may realize that the interface is not as intuitive as you thought or that the student expected something else entirely when he or she clicked on a certain button. Any frustration in getting to a certain required piece of information should also be noted and action taken accordingly. It is best to finalize the interface design at this stage, since this forms the basis for the template, which will be used throughout the course. Changes at a later stage may involve a lot of rework.

Finalize this as early as possible in order to avoid rework at a later stage. Remember that rework sometimes involves more time and effort than starting from the beginning again! This will also help you design the navigation for the course.

Back to top

3.3. Template design
Once the interface prototype is tested and finalized, a template can be created. Using the flowchart (course map) for reference all the pages can be created with a blank space for the content. All these pages can be linked and the navigation tested for functionality.

Back to top

Next Lesson

Lessons: Contents | 1 | 2 | 3 | 4 | 5 | 6 | 7