How To: Design Tips
How to Make your vUWS Site an
Engaging Experience for your
Students
By Jorge Reyna
E-Learning Technical Officer
School of Education, University of Western Sydney
July 2009
Introduction
It has been 6 months since I started at the School of Education as an eLearning Officer and on many occasions academics have asked me how they
can improve their vUWS sites. That is one of the reasons I decided to write
this document, which is basically tips on how to improve the feel and look of
on-line units. The main objective is to enhance the learning experience of your
students.
I believe that e-learning interface design should be a core, integrated
component of the overall design of your vUWS site. The interface design
should be determined by how people learn and the tasks they need to
perform. This should be driven by a pedagogical, not technological, approach
which will identify learning outcomes.
In this regard, design layout has an important role in the look and feel of the
vUWS site and can affect the way students learn and interact on your unit.
This article describes, in a practical manner, good design practices for
creating engaging e-learning sites, covering colour scheme, typography,
navigation, file type and size, and also innovative teaching technologies to
make vUWS an engaging experience. This document will help you to
understand basic design principles to enhance your vUWS sites and can be
used as a guide in conjunction with UWS official e-learning documents like the
Basic Standards.
1. Colour Scheme
Colour creates moods and it is very important the way we combine them.
Especially when we take into account that there are people who are colour
blind and they will not be able to read a website that uses, for example, red
and green colours.
Bad Colour Scheme
Bright backgrounds with colours that “clash” should be avoided as it makes it
hard to read, tires the eyes and can turn many readers off. They can even
cause dizziness, sore eyes, headache and loss of concentration/motivation.
Good Colour Scheme
In all these examples the text is legible as there is a good contrast between
the soft background and the black fonts. It makes reading easy and engaging.
Using graphics/patterns as background can affect legibility, so it is
recommended to avoid them.
The same colour scheme should be used in your units for consistency.
Conclusion
A soft colour background with dark fonts creates good contrast, stimulates
reading and engages students, enhancing the learning experience.
2. Course Banner and Icons
A) Banners
From a design point of view, it is important for units to have their own banner.
A banner will attract the student into the unit he/she is navigating. The banner
can be placed on the homepage and also throughout the rest of the pages.
Here are some excellent examples of artistic banners developed for the Early
Childhood program:
If you need to develop a banner for your unit, please do not hesitate to contact
me.
B) Icons:
It is recommended that you use icons that match the banner design you are
using.
Inconsistent use of icons
Problems in these examples are:
•
•
•
Icons do not match in terms of look and size.
Pictures or logos should not be used in any circumstance.
Links do not have a short description of their content attached.
This creates a chaotic look and causes the user to want to navigate away
from your vUWS site.
Consistent use of icons
This is an excellent e-learning site, clean and professional. Note that every
icon has a description attached.
The Teaching Development Unit has created several sets of icons which will
suit your course. If you need to create a new set of icons, you can contact Le
Hoa Phan or contact me for further assistance.
Conclusion:
Icons represent the items with which they are linked. They need to be of the
same size and design/look in order to create a professional layout. Using a
set of icons throughout your entire vUWS which matches your course banner
will enhance the appearance and navigability of your site. Do not forget to add
a description to the link.
3. Typography
It is very important to use web-safe fonts when we create our vUWS sites.
Web-safe fonts are fonts which are common to all versions of Windows, Mac,
Linux, etc. This guarantees a proper display across platforms.
Examples of web-safe fonts are:
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
Bad use of fonts
The example is hard to read, especially the blue font. Using
different colours causes a clash and affects motivation. Visitors are
likely to navigate out of this site.
Better use of fonts
In this example we used Verdena font and justified alignment to
create balance on the screen.
It is important to take font size into account, as it can be a factor that makes or
breaks a website layout. For headings, sub headings and paragraphs, I would
recommend using the following sizes:
Headings: 16px
Sub Headings: 14px
Paragraphs: 12px.
Golden rules on typography for websites
•
•
•
•
•
•
Avoid using different fonts, different sizes and different colours on the
same page.
For consistency, the same font type, size and colour should be used in
your entire vUWS site
Avoid underlining words unless you want to create a link from them.
Avoid using capitalisation. It means you are shouting in the netiquette
language.
Use bold fonts discreetly, otherwise you are going to lose the attention
you want to attract.
Italics should be used for foreign or Latin words like in situ, ad libitum
and so on.
Conclusion
Font type, size and colour have a crucial role in designing professional web
pages. The golden rules are easy to follow, to achieve a professional looking
vUWS site.
4. Navigation
Navigation is a crucial factor to take into account when we design our vUWS
sites. The opportunity for fluid movement within your site encourages visitors
to explore it in its entirety, whereas poorly designed navigation leaves them
stuck and spinning around in circles. As you can imagine, it does not take
long for someone to hit the ‘back’ button if they have had a healthy dose of
frustration while trying to find something on your website.
The unit homepage should have at least the following links:
Unit Outline (Left corner desirable)
Learning Guide
Learning Modules
Collaboration
IT Tutorials/Resources
Assignment Submission
Additional tips to improve your vUWS homepage are:
•
•
•
Users should only need to click 3 times at maximum to get the
information.
Courses should be organised in a logical format and topics
clearly identified.
The unit outline and learning guide should be easy to find and in
a printer-friendly format like Word or PDF.
•
•
•
Clear directions should be given for each task or assignment.
Each link should be represented by an icon and also have a
short description of the content.
If for some reason you post an external link, make it open in a
new window browser.
Homepage with a bad navigation
This homepage is poorly designed, with inappropriate colour scheme and lack
of icons and descriptions. Information is not well organised.
Homepage with good navigation
This unit is under construction but it is a good example of navigation. Content
descriptions still need to be attached to the icons.
Conclusion:
The navigation bar has an important role in your vUWS site. It will make it
easy for users to interact. It is important to organise your unit in the most
logical way, so that anyone can get around and find the required information.
5. File Type and Size
Moderate file size enables efficient downloads. Large files greater than 20 MB
take longer to download in slow connections and can be frustrating. It is
important to include descriptions of the file type and size so students are
aware.
Common files used in vUWS are:
Documents (.doc, .xls, PDF)
Make sure when you post a .PDF that it is compressed for the web, otherwise
it will be too large. Make sure there is no copyright content, which needs
clearance by Frank Hill
Images (.gif, .jpeg, .png, .tiff, .bmp)
.jpeg is the best compression for photographs, while .gif is best for graphics.
The file types that support transparency are .gif, .tiff and .png only. BMP and
TIFF files are usually large, so avoid using them.
Audio (.wav, .mp3, .wma)
.mp3 files are the best compression for the web, while .wav files are
uncompressed and too large to post inside vUWS. WMA (Windows Media
Audio) is only for PC and will not play on a MAC unless the user has a special
codec or application, so it is better to avoid it.
Video (.mpeg, .flv, .swf, avi, .mov)
Video files tend to be larger than other file extensions. There are ways to
compress them for your vUWS. Bear in mind that you can only post video that
belongs to UWS or where you have written permission from the author to use
it. Otherwise you will be infringing copyright.
If you need any help compressing your files, do not hesitate to contact me.
6. Innovative Teaching Technology
a. vUWS tools
Like announcements, chats, discussions, mail and profiles, calendar, search
inside views. Please enable them if you are going to use them, otherwise it
can make the layout too complex and confusing for our students.
b. Multimedia Elements
Like customised Flash applications, tutorials with screen capture and voice
over, Audio Podcasting, Graphics, Video clips, SlideCast, CD Rom and DVD
and other learning objects.
c. Web 2.0 Tools
On-line applications like blogs, wikis, mind-mapping, Google docs, video
sharing services, slide sharing, or Twitter.
Using these technologies on your vUWS with a pedagogical rationale can
help create an engaging course, making it possible for students to interact,
collaborate and develop additional skills, enhancing the learning experience.
7. Copyright Issues.
Remember that material which is downloaded from the Internet may be
covered by copyright laws. Such material can be photographs, graphics,
articles, audio and video files. You need to contact the owner/creator and ask
for permission if you wish to use it on your unit.
If you need further advice about copyright, please contact Frank Hill.
Finally, if you have any question related with this document, do not hesitate to
contact me.
Further articles coming soon:
“SlideCast in Education”.
“How Instructional Design can Improve the Learning Experience.
“How to Create Engaging PowerPoint Presentations”.
“Creating Video Tutorials using Camtasia”.