The Practical Guidelines for Designing User Interface in Virtual Learning Environment.
ABSTRACT Designing User Interface (UI) has an important role in user satisfaction. Students working in Virtual Learning Environment (VLE), experience great difficulties and encounter consumes most of their time attempting to learn an incomplete system design by inexperienced UI designers. The VLE system may contain analytical function and features with poor UI facility, Hence the effective use of the system is hampered causing interaction frustration. These are due to the lack of familiarity of the designing with the basic principles of UI designs in VLE environment. Because of that, identification and categorization of these principles play an important role in promoting VLE system with UI domain. In this paper, identifying and categorizing UI design principles in VLE are investigated and comparison is made between various commonly used virtual learning systems on the web. The outcome of the conducted comparison studies provides a suitable guideline for designers of such systems.
- [Show abstract] [Hide abstract]
ABSTRACT: This article was published in the journal, Human Technology. It is also available at: http://www.humantechnology.jyu.fi/. The European Social Fund-supported Portland Partnership project developed a computer-based virtual learning environment (VLE) to benefit students with cognitive and physical disabilities. This system provided students with access to a suite of software programs to teach them basic/essential skills needed for everyday life and to use information and communications technology (ICT). The VLE can be customized to meet individual students’ needs by selecting an input device, adjusting its setting, or choosing a symbol set to support on-screen text. The learning programs within the VLE required careful design to make them stimulating and beneficial to students who have diverse health conditions and disabilities. The VLE and learning programs were evaluated within four partner Colleges of Further Education. Observations showed that students enjoyed the learning tools and the tutor comments indicated that students also benefited from them. A series of guidelines were identified for the design of future VLEs and learning software for students with special needs.
The Practical Guidelines for Designing User Interface in
Virtual Learning Environment
Mohammad Shojafar1, Siamak Barzegar1, Faraein Aeini1, Hassan Rashidi2,Aidin Haqparst1
1Computer Dept.QIAU(Qazvin Islamic Azad University), Qazvin, Iran
2 Statistics, Mathematics and Computer Science Dept. Allameh Tabataba’i University, Tehran, Iran
Abstract - Designing User Interface (UI) has an important
role in user satisfaction. Students working in Virtual Learning
Environment (VLE), experience great difficulties and
encounter consumes most of their time attempting to learn an
incomplete system design by inexperienced UI designers. The
VLE system may contain analytical function and features with
poor UI facility, Hence the effective use of the system is
hampered causing interaction frustration. These are due to the
lack of familiarity of the designing with the basic principles of
UI designs in VLE environment. Because of that, identification
and categorization of these principles play an important role
in promoting VLE system with UI domain. In this paper,
identifying and categorizing UI design principles in VLE are
investigated and comparison is made between various
commonly used virtual learning systems on the web. The
outcome of the conducted comparison studies provides a
suitable guideline for designers of such systems.
Keywords: User Interface, Virtual Learning Environment, E-
Learning, Human Cognition.
Nowadays Design of User interface is important. UI must
adopt user’s mentions. User satisfaction is the main purpose
of UI design. This is why design principles are so important.
Computer users should have successful experiences that allow
them to build confidence in themselves and establish self-
assurance about how they work with computers. Their
interactions with computer software should be “success
begets success.” Each positive experience with a software
program allows users to explore outside their area of
familiarity and encourages them to expand their knowledge of
Well-designed software interfaces, like good educators and
instructional materials, should build a “Teacher-Student”
relationship that guides users to learn and enjoy what they are
doing. Good interfaces can even challenge users to explore
beyond their normal boundaries
understanding of the user interface and the computer. When
you see this happen, it is a beautiful experience. UI Designer
Should understand and aware of the user’s mental model and
the physical, physiological, and psychological abilities of
Designing the user interfaces for Virtual learning
Environment must be in a way that users do not sense the lack
and stretch their
of physical Attending of the Teacher. Designing an
appropriate use interface will make it possible for virtual
learning to be just the same as learning with other users in a
class and with the presence of a Teacher and the expected
efficiency will be just as same as what is expected in a real
educational class. In order to make it possible for the users to
achieve a more complete understanding of the designed
system, For VLE Design, Designer should consider the
physical conditions of the environment and spiritual
conditions and the user’s capabilities.
In the second section of this paper, we study the general
aspect of virtual learning and representing them in different
websites. The purpose of virtual learning is creating a virtual
environment which is completely based on a real educational
environment for interactive learning and education. In fact,
virtual environments provide a way to combine the best
specifications achieved from the obtained information from
the real environment in different places by real conditions and
best specification for controlling environments, quicker
searches, organizing and fast access to the resources. By
using the help of virtual environment we would be able to use
the data in one single and common direction and also to
overshadow all the objects and opinions in the real world. We
can spend more time on making and recognizing the objects
and also less time on determining their functions which is
discussed in the following sections. In the following sections
a series of fundamental principles and regulations will be
represented for a good user interface in virtual environment
and virtual learning. These regulations are generally
surveyed in different systems and are represented in detail in
the third section of this paper and it will give the readers this
instinct to benefit from more applicable and required
principles in designing their appropriate system. In the fourth
section we will compare few famous websites which
represent virtual learning services to the users and in the fifth
section a general conclusion is given.
2 Virtual Learning
information technologies, business methods and daily
activities, relations, accessing the information and generally
all parts of the human life have experienced a great evolution
and learning and gaining knowledge is also not an exception.
Although, human being has applied technology and its related
tools in the service of education and its comprehensiveness
from the past ,but, education and comprehensiveness may
Today, by expansion of new communication and
have been never conformed to great evolutions related to
appliance of new communication
technologies such as internet, compact disks and multimedia
systems [1,2]. These technologies are mostly aimed to
improve the quality of educational services and increasing the
number of viewers, so that, they have made Teachers and
educational institutes (and even companies and business
centers) able to transfer the information and contents to
students, customers or generally viewers, economically and in
the least possible time .
Virtual learning is represented and performed in two
independent environments which are complementary .
• Learning Management System is a system in which the
teacher is the main actor of it. He can do all actions the
same in real teaching class such as providing contents,
designing tests, observing and responding different
• Virtual Environment that students are the main actors of it.
They do their actions in this environment. Some of these
actions are listening lessons, asking questions and
presenting the parts the lesson that they should do.
User interface in VLE shall be designed in a way that students
and Teachers do not sense the virtualization of the
environment and it should be really close to the real world.
Nowadays, this realization can be done in different ways such
as using three-dimensional glasses in a way that the presence
of all the students in the class would be visualized, Dolby
sound, and three-dimensional in a way that the movement of
the Teacher can be sensed .
3 Fundamental Practical Guidelines and
Regulations in UI Design
interface. For designing an appropriate user interface we
should consider a series of tested patterns, regulations and
Good software will be viewed with an appropriate user
Here, we will represent some fundamental principles which
have been studied and classified by skilled and professional
software designers. Benefiting from these Practical principles
is a selective matter for designers according to their
requirements which depend on the specifications of the
designing software. So, we will represent three Practical
Rules in designing software [6, 7, and 8].
3.1 First Rule: Place User as a Controller
users in control of the interface. In fact, the user who uses the
software will control it and he controls the operation of the
software considering its own requirements from the software.
Users control designing principles and determine the
conditions and limitations of the software considering their
The first set of Practical principles addresses placing
According to the represented descriptions, the principles
extracted from the first rule can be considered as follows:
Use modes judiciously
In designing the user interface, we should act in a way that we
use recognized special modes and shapes in special places
positions. For example, the user interface which is used for
playing music or audios instead of writing the word PLAY
uses a recognized shape such as ►. This will make easier
readability for the users and will decrease the period of time
required for thinking on the process of the operation. The
reason is that; this shape has been used repetitively in
software and tools as a symbol for PLAY and it has been to
stamp on the User’s memory.
Display Descriptive Messages and Text
Some of the users are interested to only use mouse for
moving and working with the user interface and some of the
other users are interested in both working with the keyboard
and mouse. For giving more control to the users it is
sufficient to make the possibility of special use of mouse and
keyboard in the designed user interface to make it possible for
the user to switch between these two types of accesses
(Mouse and Keyboard). Thus, this possibility will make use it
Provide Immediate and Reversible Actions, and
Software should provide undo actions for users, and
hopefully, also redo actions. Inform users if an action cannot
be undone and allow them to choose alternative actions, if
possible. Provide users with some indication that an action
has been performed, either by showing them the results of the
action, or acknowledging that the action has taken place
The lack of feedback in most software products forces users
to double-check to see if their actions have been performed.
In a command-line interface, whenever someone deletes a file
using DEL, he/she usually uses the DIR command
immediately afterward to list the directory to ensure the file
was actually deleted. There is no feedback after he/she types
the DEL command! This forces users to perform superstitious
behaviors to comfort them since there is little or no feedback
from the system interface.
Make the User Interface Transparent
The user interface is the mystical, mythical part of a software
product. If done well, users don’t even feel that it is there. If
done poorly, users can’t get past it to effectively use the
product. A goal of the interface is to help users feel like they
are reaching right through the computer and directly
manipulating the objects they are working with. Now, that’s a
The secret of a transparent interface is synching up with the
user’s mental model. Users should be free to focus on the
work they are trying to perform, rather than translating their
tasks into the functions that the software program provides.
Allow Users to Customize the Interface (making
Allow users to customize information presentation (colors,
fonts, location, arrangement, view types), interface behavior
(default actions, macros, buttons), and interaction techniques
(keystrokes, shortcut keys, mnemonics, mouse button
mappings). The rich visual and sensory environment of
graphical and multimedia user interfaces requires users to be
able to customize the interface. Users feel more comfortable
and in control of the interface if they can personalize it with
their favorite colors, patterns, fonts, and background graphics
for their desktop.
According to our discussions an example of the site which
Has these specifications is represented in Figure 1. This site is
OXFORD. By inspecting and observing this site more
carefully we will discover that by entering this site the user
will feel that he has this ability to specify the site according to
his interests and this is exactly the first rule in designing the
Figure 1: www.ox.ac.uk
3.2 Second Rule: Reduce User’s Memory
the user interface is Variant in different people with different
decisions and cognition levels. In the user interface Design,
we attempt to make the user think less for recognizing the
user interface and working with it. Based on what we know
about how people store and remember information, the power
of the computer interface should help users from having to
remember information while using the computer. We aren’t
good at remembering things, so programs should be designed
The ability of the users in recognizing the operation of
with this in mind. For this purpose some significant and
effective principles have been studied in the following parts
for decreasing the user’s cognition load. This rule includes a
series of principles which are:
Relieve Short-Term Memory
Short-Term Memory helps keep information available so you
can retrieve it in a very short period of time. Users usually do
many things at once, so computer interfaces shouldn’t force
them to try to keep information in their own short-term
memory while they are switching tasks. Program elements
such as undo and redo, and clipboard actions like cut, copy,
and paste, allow users to manipulate pieces of information
needed in multiple places and within a particular task. Even
better, programs should automatically save and transfer data
when needed at different times and in different places during
Rely on Recognition, Not Recall
User interfaces support long-term memory retrieval by
providing users with items for them to recognize rather than
having to recall information. It is easier to browse a list to
select an item rather than trying to remember the correct item
to type into a blank entry field.
So, Online aids such as messages, tooltips, and context-
sensitive help are interface elements that support users in
recognizing information, rather than trying to remember
information they may or may not know or have learned.
Provide Visual Cues
A necessary aspect of any graphical user interface (and of
course, an object-oriented user interface) is that users must
know where they are, what they are doing, and what they can
Whenever users are in a mode, or are performing actions with
the mouse, there should be some visual indication somewhere
on the screen that they are in that mode. The mouse pointer
may change to show the mode or the current action, or an
indicator might toggle on or off. Test a product’s visual
cues—walk away from the computer in the middle of a task
and come back sometime later. Look for cues in the interface
that tell you what you are working with, where you are, and
what you are doing.
Provide User Interface Shortcut Key
In addition to defining both keyboard and mouse techniques
for interface actions, determine ways to shorten the number of
keystrokes or mouse actions users need to perform common
actions. Shortcut key sequences reduce users’ memory load
and quickly become automatic. There are two basic ways to
provide keyboard shortcuts—mnemonics and accelerator
keys. A mnemonic (also called an access key) is a single,
easy-to-remember alphanumeric character that moves the
cursor to a choice and selects the choice. Mnemonics are used
in menus (menu bars, pull-down menus, pop-up menus) and
in lists to navigate and select an item in the list. Mnemonics
speed up navigation and selection using menus and lists. To
close the current window, users can key Alt (an accelerator
key to navigate to the menu bar), then F (File pull-down), and
C (Close action). An accelerator (also called a shortcut key) is
a key or combination of keys that users can press to perform
an action. In the above example, Alt is a keyboard accelerator
to move from within a window to the menu bar. Other
common actions have standard accelerators, for example
Ctrl+P for Print.
Using real simulation
Real simulation will enable the users to transfer the
knowledge among different objects and works.
Promote Visual Clarity
Apply visual design principles of human perception, such as
grouping items on a menu or list, numbering items, and by
using headings and prompt text. Think of information on the
screen in the same way as information you would present in
any other medium. The general principles of organization,
continuity, gestalt, and so on should be followed. Most
programs present too much information at one time on the
screen. This results in visual clutter and users don’t know
where on the screen to look for information. Information
should be presented with some priority and order so users can
understand how information is organized on the screen.
Thus, it is better to increase special facilities for the user by
considering his profile and the type of his request. New
interface technologies use wizards to help the users and
increasing their facilities by representing them their required
According to the discussed issues an example of the sites with
these specifications is represented in Figure 2. This site is
IBM. Simple designing is clearly obvious in this site. The
user who faces this site for the first time doesn’t spend a lot of
time on thinking on menus and links. So, in fact this site has
observed the second rule represented in designing the user
Figure 2: www.Ibm.com
3.3 Third Rule: Make the Interface Consistent
User interface consistency is a key aspect of usable interfaces.
It’s also a major area of debate. However, just like all
principles, consistency might be a lower priority than other
factors, so don’t follow consistency principles and guidelines
if they don’t make sense in your environment. One of the
major benefits of consistency is that users can transfer their
knowledge and learning to à new program if it is consistent
with other programs they already use. One of the best
advantages of compatibility is that users can transfer their
knowledge and educations of a new program in case that they
are compatible with the current software. This rule includes a
series of principles which are:
Sustain the Context of Users’ Tasks
Users should be provided points of reference as they navigate
through a product interface. Window titles, navigation maps
and trees, and other visual aids give users an immediate,
dynamic view of where they are and where they’ve been.
Users should also be able to complete tasks without having to
change context or switch between input styles. If users start a
task using the keyboard, they should be able to complete the
task using the keyboard as the main interaction style.
Context-specific aids such as help and tips on individual
fields, menu items, and buttons, also help users maintain the
flow of the tasks they are performing. They shouldn’t have to
leave a window to find supplemental information needed to
complete a task.
Keep Interaction Results the Same
If by design, different results might happen than users expect,
inform users before the action is performed. Give them a
choice to perform the action, cancel the operation, or perhaps
choose another action to perform. So, Consistency in
interface behaviour is very important. If users experience
different results from the same action, they tend to question
their own behaviour rather than the product’s behaviour. This
leads to users developing superstitious behaviour, that is, they
think they must do things in just exactly a certain way for the
desired result to happen; otherwise they are not sure of the
Provide Aesthetic Appeal and Integrity
A pretty interface can’t cover up for a lack of product
functionality. Users question the integrity of a product if
inconsistent colors, fonts, icons, and window layouts are
present throughout the product. Just as a printed book has a
predefined page layout, font, title, and color scheme, users
should be able to quickly learn how product interfaces
visually fit together. Again, utilize the skills of graphic
designers on the design team effort.
4 Comparative Evaluation of Virtual
Learning Systems for UI Design
previous section, here, three different virtual learning systems
will be studied. These systems are Moodle, Claroline and
ATutor which will be discussed in the following section .
Considering the discussed principles and rules in the
Its official name is Modular Object-Oriented Dynamic
Learning Environment (Moodle) which will be useful for the
designers and programmers. This site is a Virtual Learning
Environment which has
Devaygsemnas, PhD student. The purpose of this site is to
create an educational environment in the framework of social
growth in web systems. This site has software which will
enable the user to be virtually educated in different respects
by downloading and installing it in his system. Installation
process of this software is very simple. The required files will
be transferred to the server via this software and it is possible
to make some specified adjustments in its facilities ad
capabilities. Also the initiating files and appropriate structure
for education will be transferred between the user and site. In
fact, Moodle contains a software package which is used for
representing and organizing the subjects in the original
website. Moodle is open source software. This software can
be used in any computer that supports PHP. It also supports
different types of databases such as MySql.
been written by Martin
Moodle specifications are as follows:
Site layout can be specified completely by different
The ability to adjust the number of students’ requests on
The ability to create a survey from the discussions of the
Primitive security specifications for limiting the
customers’ access to special subjects.
Moodle enables the Teachers to specify places and
calculation scaling of the subjects even if this
information is determined and symbolized by hand.
Makes the students able to upload the educational files
in the site and share them with other users.
Existing of themes which enable the students and
Teachers to specify the show type of t he virtual
environment without any need to new layouts.
A sample of the first page of this site is represented in Figure
Claroline is a Virtual Learning site which has been prepared
and edited in the University of France. This site contains
software named Claroline which works in PHP environment
and with MYSQL database. This is an educational tool that
enables the Teachers to prepare and edit the related subjects
The specifications of this software are as follows:
There are different ideas in this respect and educational
subjects in the Virtual Environment will be divided into
special sections and then they are placed in different parts
of the site (informative sections, exercises, chats and
Classifying the specifications of the links both for the
students and educational managers for managing URLs.
The ability to chat for the students who use a simple
This software let the students to upload their private
pages in the system to be viewed repetitively by different
A choice for the system to automatically process the
registration and manual management.
The subjects start with a few sources but there is no
growth in the level of the complexity of the lessons.
The ability to manage the subjects for assigning
homework and specifying the maximum number of the
subjects and their specifications.
Figure 3: www. moodle.org
The ability to upload video files for using in educational
A sample of the front page of this site is represented in Figure
Figure 4. Www. Claroline.net
Atutor is designed as Open Source educational environment
in the University of Toronto in Canada and has been used in
most of the universities around the world. This site contains
software which makes it possible to move in the body of the
user interface easily. Atutor specifications are as follows:
Having a simple management interface
Output specifications for the created subjects in the
system environment (N.B system is the only system
which has this specification which has been applied in
Using the HELP option in the body of the text which
enables the subject’s managers to work easier and better
with the subjects.
Contains complete documentations and complementary
regulations for guiding the users in movements and
Video conferences in the site for online discussions and
conferences between the users
Contains tools for specifying subjects the users.
A sample of the front page of this site is represented in Figure
Figure 5. Www. ATutor.ca
In comparing these three sites considering the mentioned
specifications from each of the virtual learning sites there are
different advantages and defects which are as follows [10,11]:
Atutor site is attempting to obtain standards which
enable the users to have a better interaction with the
In Atutor and Moodle there is no need for additional
information to access the contents and the duration of
user cognition load will be declined considerably!
Atutor is the only system which has the E-Mail system
option which helps the users in choosing their lessons
which is really pleasant for the users.
Moodle works clearly on the interface section in its form
entrance for creating the contents of the lessons. (The
minimum human cognition load which is the same as the
second law) and this will decline the data entrance time
in this software’s form and the site.
Atutor is more accepted by legal companies.
Atutor software installation process in much easier in
comparison with other software of the site.
The beautifulness of the appearance of the Moodle and
Atutor sites is better and much more readable in
comparison with the Moodle site (the first rule).
Atutor contains a complete and comprehensive editing
window for determining the lessons, notes and additional
information and this is much easier for the designers in
entrance of the data and it also decease the need for
Generally, comparison of the three sites is tested in Qazvin
Azad University between 40 UI Designers (Web-Application)
and 40 Teachers and Students that Review these sites in the
University. We ask them to give Point (0-100) in each part of
rules. Each Cell Shows average Points of all 80 People that
gave points to each part of Rules.
This Experiment have been tested and registered on late
September 2009.the period of this experiment is 3 month and
accrued in the summer of 2009. The results are represented in
According to the above comparisons and the last Row of
above Table, Atutor is much more accepted by the users in
comparison with the other two educational environments and
Claroline satisfied users less than the other two from the
users’ point of view.
In this paper, the main principles and frameworks in
designing the interface of a visual learning environment was
described. Considering the results on comparisons between
several famous systems, we can conclude that the issue of the
user’s acceptance and easy working process of the software
create a condition that the efficiency of the software and it’s
selling rate will be increased.
Thus, those principles must be considered in designing the
software in Virtual Learning System by taking into account
the priorities and fundamental purposes of designing and
representing the system to be a witness to the process of
development, enthusiasm and expansion of the site in the
internet world among the users with different interests.
 Internet Timed Group, e-Learning Jump Page. Web Site
 International Forum of Educational Technology &
Society. Web Site at http://ifets.ieee.org.
 Reinecke, K., Bernstein, A. 2008. Predicting User
Interface Preferences of Culturally Ambiguous Users,
ACM 978-1-60558-012-8/08/04. Florence, Italy.
 Barfield, L. 2004. The User Interface: Concepts and
Design, Publisher in Bosko Books, USA.
 Maguire, M., et al, 2006. Design of a Virtual Learning
Environment for students with special needs, An
Interdisciplinary Journal on Humans in ICT
Environments, ISSN: 1795-6889, Vol. 2 (1), pp.119-153.
 Lauesen, S., 2004. User Interface Design, A Software
Engineering Perspective, Published By Addison-Wesley.
 Bouras Ch., Philopoulos Al. 2000. Distributed Virtual
Learning Environment: a Web-based Approach,
Department of Computer Engineering and Informatics,
University of Patras.
 Mandel, Theo, 1997. The Elements of User Interface
Design, Chapter 5, the Golden Rules of User Interface
Design, Book, John Wiley & Sons.
 Clements, I., 2003. Virtual Learning Environment
Comparison, Progress Training.
 Dillenbourg, P., 2000. Virtual Learning Environment,
Workshop on Virtual Learning Environments EUN
 Baumgartner, S., et al, 2007. 2D Meets 3D: A Human-
Centered Interface for Visual Data Exploration,
Proceedings of San Jose, CA, USA.
Table 1. Comparing Moodle, Claroline, Atutor
in Practical Principles Rules in Detail
Rules/Sites Moodle Claroline Atutor
First Rule 73.452 68.424
First Rule 88.624 61.623
First Rule 77.670 82.354
Make the User
First Rule 86.32 62.235
First Rule 69.240 42.432