User Experience Design

Design principles

When designing an e-learning course, no matter how good the content of the course it, a poorly designed course can lose it’s effectiveness. Shift outlined these 10 design principles to enhance the user experience. I looked into each of these and analyised each one.

1) Visual hierarchy

This shows the learner in which order to complete tasks. It uses formatting such as headers, change of font colour, coloured blocks and alignment to highlight the important information.

Analysis –

2) Simplicity

Avoiding clutter in design can help keep a user engaged and prevent them from losing interest and retain information. This might mean omitting less important pieces of information and keeping it to the bare essentials. Breaking information up into lists (such as this list) can help.

Analysis –

3) Legibility

Would you keep reading this if all of the page was written in this size font?

I didn’t think so. And neither would your learners. The best font size for use on the web is 16px. Make sure the font size and style is readable on web as well as mobile. To create emphasis, avoid using more than 3 font styles or sizes. Try using bold text or colours instead, however, make sure they are readable on all devices your learners are likely to use.

4) Colour

Using different colours should enhance learner engagement, not be a distraction. For that reason, limit the use of too many colours on one page. Use contrasting colours that compliment each other and a mix of dark and light colours. Use blocks of colour to draw attention to important information.

5) White space

Too much stimulus can hinder retention of learners. Keep plenty of white space on each page to prevent the page from looking cluttered. White space should be placed between content blocks to allow users to flow through the learning material. White space is also helpful for those with dyslexia or attention disorders, as it hightlights important parts and helps them keep focus.

6) Consistency

Stick to a colour scheme throughout the course and use similar images throughout. Humans are creatures of habit, so using similar themes throughout will help to maintain attention. Use consistent fonts styles and sizes.

7) Alignment

Shift likens alignment to the layout of a supermarket. Related elements should be aligned together in isles (or rows and columns), so that learners can see their relevance. This also helps the learner know which order to consume information and complete tasks.

8) Focal point

A focal point is what should attract the learners attention straight away. Shift says the focal point is the “primary area of interest that attracts learners as soon as they arrive on the page and then draws them gradually into the content presented on the screen”. It should emphasis one learning concept per page. It could be an image, a video, a piece of text or statistics.

9) Familiarity

As I mentioned before, humans are creatures of habit. They like what they know and they know what they like. Whilst it would be nice to be able to create an all signing all dancing design, the majority of the time, this will hinder learning. You can add bits of creative flair, but for engaging learners in content and enhancing retention, you would be wise to stick with standard design principles.

10) Accessibility

Following on from familiarity, there’s nothing worse than finishing a task or reading a piece of content and wondering ‘what do I do next?’. Throughout your designs, keep your navigation buttons in the same place and keep the same design. We all hate a pop up with a hard to find ‘x’ button, so don’t make it that hard for your learners.

Science research


Using images in communication

Using images in communication is becoming more and more popular. Social networks have been built solely around it (Instagram and Pinterest) and people even use them in place of words (emojis and gifs). But why?

Images often enhance user experience (UX). On a website, or a book or anything for that matter, a page full  of text can look very boring. For those who aren’t strong readers, those with Dyslexia or those who need lots of stimulus, lots of text can be very daunting. Using images to break up chunks of text will improve the UX of a site or piece of content and make it more accessible. As well as being aesthetically pleasing, they can apply more context to information. They can set the mood by using certain colours or include elements like people with certain facial expressions.

When using images be mindful of those who have difficulty seeing. On websites, use effective descriptions and alternative tags to explain what is in the image. Those with sight difficulties may use software that reads out loud what is in the image based on the alternative tags.With that in mind, don’t rely solely on the image to provide information or context. Use the text before and after to compliment the image and the image to compliment the text.

When producing an online layout you should consider these five steps:

Audience – Who is your target audience? Who will be looking at the content? What difficulties might they have in accessing or consuming this content (i.e. learning difficulties, physical disabilities)? Do you need to provide the content in a larger font for those with visual impairment or give an option for a cleaner page for those with Dyslexia?

Access – How is your audience likely to access it? Will they be likely to use desktop computers, smart phones or tablets? Make sure your design is responsive and where people are likely to be using smart phones or tablets adopt a ‘mobile first’ strategy. Will they have access to high speed internet or will they be using free public Wi-Fi? Avoid using large file sizes and compress your website to allow for faster loading times on slower internet connections.

Needs – What information are they visiting the site for?  Make sure you have all the information they might be searching for and make sure it’s up to date.

Navigation – How easy is it to find that information? Clearly identify links and place menus in accessible positions. If necessary, include a search box for them to search the site by keywords.

Content – Gather your content including images and text ready to be uploaded. Abide by copyright law and organisational guidelines.

Technical Factors in Design

When designing graphics and images for e-learning it’s important to think about several factors. First, consider the client’s needs and target audience. From here, you should think about file size, format and page size.

File size

Depending on where your design is going to appear alters what file size you’re likely to want. When designing graphics for online resources where you need the internet to access them, it’s recommended to use a smaller file size than for print. This is because having large files in online resources increases the time and data it uses to download and may hurt the performance of the site.


To create high quality images and designs, whilst maintaining a low file size, you can use different file formats.

Common image file formats
Common image file formats

The most popular file formats for web are JPEG and GIFs due to their low file size. For print, PNG images work well due to the lossless compression and there is no need to be cautious of file size.

If you need a high quality image on an e-learning resource you can add a smaller resolution thumbnail of the image and link it to the full size image. This reduces load time on the resource, but whilst still being able to provide the high quality image.

Page Size

When using images and graphics, the page size is very important to take into account. If your audience is likely to be consuming content on a smaller screen, such as a mobile phone, then avoid use images with lots of fine detail that is needed to be picked out.

You should also consider page orientation. When designing graphics, it would be wise to make them responsive so that they can be seen on a small portrait screen or a wide, landscape screen. To do this online, you can use HTML to make the image take up 100%, 80%, 50% or whatever size you need the image to be.

Using images in e-learning


When preparing images or designs for e-learning it’s important to think about the context that they will be used it. By thinking about the context you should consider how this affects the way you portray images or designs. For example, think about what device the learner will be viewing the images on. If they are using mobile devices, a long horizontal image may not work best. A square of portrait image might work better. Also consider what information the image needs to get across. If there is a lot of information to convey, using a short video or interactive slideshow might enable the learner to take on the information better than a still image with text overlay or text accompanying it.


An important thing to remember when using images is copyright law. It is illegal to use other people’s images without permission. Always check the usage rights of images before you use them. Some images may have a creative commons license meaning that you can use them freely as long as you give attribution to the owner. Note that I said the owner and not where you found the image. Make sure you find out who owns the rights before using others’ imagery.

Copyright is automatically given to anything that has been created. Using all or parts of other people’s work in your designs can breach copyright.

File Formats

There are five common file formats for images and designs: JPEG, PNG, SVG, GIF, BMP.

JPEG compresses files to save space but loses some of it’s quality.
PNG provides lossless compression meaning a higher file size but high quality.
SVG is used for vector images and saves shapes rather than pixels. Provides good quality with small file size.
GIF is often used for animation. They are low quality and low file size, depending on the number of colours used.
BMP provides a high quality image but is accompanied by large file sizes.

Each file type has it’s uses. For example, when uploading images to Moodle it is often best to use JPEG due to their small file size to help pages load quicker. For print BMP or PNG files are good because of their high quality. Their high file size isn’t an issue for print.


Collaborative Technologies

Over the last two years, with the increased power of mobile technology, more work has been done on the go. This has brought a shift in the learning styles and allowed people to do more remote learning. I’m going to discuss some of the benefits and limitations to using collaborative technology within an educational environment.

Collaborative Technologies

Text and calls– The most common collaboration tools is likely to be the mobile phone. Using voice calls and text messaging it is easy to communicate one to one with others. In addition, recent advances have enabled group messaging on certain devices to include more people.

Video calls – An alternative to voice calls is video calls. Using tools like Skype you can host video conferences. This gives the added benefit of being able to speak face to face as well as share documents in real time. This can also be a cheaper alternative for long distance communication.

Collaboration apps – Recently, apps such as Trello, Slack and Asana have taken collaboration to a new level. It combines the instant messaging of mobile phones and file sharing of email. It has also began to include features like voice and video calls. These apps can be used as forums, as well as for task management.

Social media – Many of the collaboration apps have derived from social media trends and use similar features. By using social media as a collaborative you limit the learning curve needed to use a new platform. You can also bring the learning experience to where the learner is already spending their time.

Collaborative technology tools

All of these can be accessed on one of or all of these three platforms:

  • Mobile phones
  • Tablets
  • Laptops and desktops

Enhancing Communication

Video calls – If learners live far away from the class room, they can telecommute via tools like Skype. If all learners live far away or need to reduce time, the tutor can complete whole sessions on via Skype or webinar tools. Learners can interact with each other with the tutor throughout the session. The tutor can record the session and distribute it to those who wish to re-watch or those who weren’t available at the time.

Collaboration apps – These apps use similar layouts to popular social media platforms where most learners are already active. Tutors can use these apps to engage with learners. They can hold group discussions on specific topics or learners can ask questions to the whole group. These tools are available across smartphones, tablets and laptops/desktop computers so are accessible almost anytime, anywhere.

Social media  – As mentioned above, some tutors may prefer to use social media platforms to communicate with students. This can be done to help engage with students who might not have access to or be able to pick up a new platform as easily.

Setting guidelines for collaboration

When using collaborative technologies you need to ensure there are guidelines. This is important to ensure they are not misused and so that everyone knows how to use them so they are being used to their full potential. Guidelines will also help to keep on track with deadlines and could improve work-flow.

Risks of using collaborative technology

When implementing collaborative technologies into your organisation it’s important to be aware of the risks and how to reduce the likelihood of issues arising.

One of the reasons for using collaborative technologies may be that multiple people need access to the same files. A risk could be that these files are being stored incorrectly and the master file not being updated. This can lead to incorrect information being passed on to people. To prevent this, staff and learners should be given training on the how to use collaborative technologies and provided with guidelines on how to store and update documents correctly.

Another risk associated with document storage is that of data loss. Files stored for collaboration are at risk of being deleted, moved or compromised. It is important to reduce this risk that documents are regularly backed up and stored in multiple locations.


Quality and Standards


ADDIE is an acronym for Analysis, Design, Development, Implementation and Evaluation. This model is used to create e-learning resources effectively and ensure quality.

addie model

Analysis – Find the answer to questions relating to the project including who are your target audience, what outcome is expected of the learners, what are the delivery options and what is the timescale.

Design – This phase includes looking at the learning objectives, lesson planning and content creation. You should work through tasks systematically and execute plans with attention to details.

Development – During this phase, create the storyboard and graphics. Assemble all content together and follow the storyboard to completion.

Implementation – This phase includes training facilitators and learners on any new systems or processes. This includes training on new tools and student registration. Testing should be done to ensure the learning material works from beginning to end.

Evaluation – Gain feedback from facilitators and students on the usefulness of the learning material.

Capability Maturity Model

The Capability Maturity Model (CMM) is designed to help develop and refine processes. It was originally designed for software creation but has been adopted by many industries.

It is made of 5 stages: Initial, Repeatable, Defined, Quantitatively Managed and Optimising.

Capability Maturity Model

Initial – Processes unlikely to have been developed and unlikely to be repeated. Success is based on individual efforts.

Repeatable – At this level, basic project management processes are established. Repeated success is made possible by defined and documented processes.

Defined – The processes documented in the ‘repeatable’ stage have been given greater attention and additional documentation, standardisation and integration has been applied.

Quantitatively Managed – Processes are now monitored and data is collected to analyse them.

Optimising – Improvements are being made to processes by analysing data and optimising and introducing new processes.

Accessibility issues

When designing e-learning resources it’s important to bear in mind those who may have various barriers to learning. For example, blind/impaired vision, deaf/hard of hearing or those with learning difficulties, such as autism.

Blind/impaired vision – Where lots of text is needed, include an option to listen to the text being read out using a text-to-voice option. In general, ensure that your text is a suitable size for all to read easily.

Deaf/hard of hearing – If videos include audio is included in your e-learning design, include subtitles or a transcript of the video that can be read.

Learning difficulties – In all of your designs, ensure that it is laid out in an easy to follow format and that pages aren’t over loaded with information. Consider using hover-over actions to display one piece of information at a time. This will help those with learning difficulties focus and process the information more effectively.


It’s very important to have set standards across the e-learning industry. One of the technical standards is Sharable Content Object Reference Model (SCORM) files. These are used by LMS’ to upload learning resources. It is a standard across software to save learning resources as SCORM packages. It is a standard with LMS, such as Moodle, to allow the upload of SCORM packages.

Standards are important to ensure that learning resources from various tools can work seamlessly with muliple LMS’. For example, when you buy a DVD, you expect the DVD to work in any DVD player, regardless of brand.

E-learning packages should follow set standards so that they can integrate fully with multiple LMS platforms.

When creating e-learning packages, consider how well the package can integrate with LMS platforms and any compatibility issues you may face. For example, using flash.

This is really important for learners because these standards can help determine how well the content displays and how they participate and engage with the learning resources. Having set standards help to improve the quality of e-learning materials.

Working in a Digital Learning Lifecycle

When starting a digital learning project you should first establish the purpose, timescale, resource requirements, aims and objectives. Doing so will ensure that the project has a clear end goal and all of the content can be as effective as possible. It also helps to manage your time and resources appropriately and meet the clients and learners needs.


Speak to the project manager determine why they want this material creating. Under the reason for creating the material.


When does the material need to be ready by? Make sure this is realistic in terms of design, testing and getting signed off. Create a details plan including milestones. Setting milestones will enable you to track the progress of project.

Resource Requirements

Decide what software or skills you need to complete this project. Take into account time and costs for purchasing software of bringing in contractors to make up for a lack of skill in a certain area.


Working with the project manager find out what they want the material to achieve. What are the learners expected to take away after they have completed the course.


Create a plan to outline how the aims are going to be achieved.

Issues and Risks

When creating a digital learning project you will likely come across multiple issues to navigate. To identify these meet with the project manager to discuss their target audience and any special requirements they might need, for example, partially sighted or hard of hearing.

By understanding the aims and purpose and your target audience you will be better able to identify any issues and risks early on in the project and find solutions.

Project Life Cycle


Discuss the purpose and aims of the project with those involved. Check that the project aims are possible, i.e. correct skills, enough time to commit. Create a project scope to outline what will be done, how it will be done, why it will be done and critical success factors. Finally, if necessary, delegate a project manager to lead the project.


First of all, review the scope and make sure it is reasonable, specific and measurable. Next deconstruct the project down to milestones and individual tasks. Assign these tasks and plan the necessary resources to complete the project. Create a project schedule and have it approved by the project manager.


This is when the work actually begins. During this stage it’s important to manage the following: time, cost, quality, change and issues.

Make sure the project is on schedule, on budget and to the desired quality. If any of the initial plans need to be changed or if any issues arise, these should be tracked and reported to the project manager. Any major changes should be ran through the client again.


Reviewing the project, final quality checks and getting the project signed off. Check the project off against the project scope.

Benefits of using a Digital Learning Environment compared to traditional methods



In traditional learning environments, communication is done face to face. Teams also work together face to face to complete group work. In a digital learning environment communication can be done over many digital platforms. One to one communication between teacher and the learner can take place over instant messaging within a DLE or via email. Group discussions between groups of learners, with or without the teacher, can take part in forums and group chats.


Traditional learning environments involve the teacher and all students gathering in one location at one time to try and suit everyone. Using a DLE can enable teachers and students to access resources, communicate and take part in lessons remotely. This means that each student can work at their own speed at a time and place that suits each individual.

Increased participation

Learners who have low confidence may not feel comfortable participating in class discussions. Using a DLE, these learners may become more involved. This increased participation could lead to each learner performing better. Using a DLE in connection with traditional learning could be very productive, as there are the benefits of face to face participation and participation in their own time.


Some traditional learning environments may prove difficult for people who have certain learning or physical disabilities. DLEs can provide an environment where these people have access to additional learning opportunities. It could also be argued that traditional learning methods provide inclusions to those who do not have access to the internet or regular access to a computer or smart device.

Limitations with implementing a Digital Learning Environment

Implementing a digital learning environment within an organisation can have many positive impacts. However, some organisations may face some limitations. I’ll look at highlighting them now.


Whilst many digital learning environments offer free services, such as Moodle, there are some costs attributed to these. Some of the costs involved may be hiring a someone to manage the DLE, the cost of hosting the DLE on a server and if hosting on your own server, the cost of hiring a technician to maintain it. Some smaller or government funded organisations may not be able to maintain the ongoing costs of managing a VLE or not have the funds to execute the VLE properly.


Teachers would have to make time to maintain their work on the DLE. There would have to be additional time set aside for managing the site, performing updates and setting/managing targets. Teachers may feel like this is an unnecessary strain on their time. Additionally, they will have to teach students how to use it, which may take up other teaching time.

Change of behavior

Encouraging students and teachers to change from conventional teaching/learning methods may be difficult. This can be due to people being stuck in old methods of thinking, alternatively, it could be through lack of time to research new methods or learn new skills.

Website downtime

There are many technical problems that can arise and cause the website to suffer from downtime. This can leave teachers and students missing work and unable to access new information. The ongoing repercussions of this downtime could be that students and teachers have a lack of trust in the site and therefore do not want to rely too heavily on it for learning resources. It could also result in a loss of data, meaning work that was completed or resources that were uploaded could have been lost.

Barriers to Effective Communication

One of the biggest failures within a learning or business environment is miscommunication. Instances of miscommunication can cause serious problems when trying to convey important information and especially in a learning environment. In this post I will be looking at barriers to effective communication in a learning setting.

The use of jargon – Using and not explaining complicated jargon. Technical terms or acronyms can cause confusion for learners.

Distractions – Other learners, talking, music or focusing on other objects i.e. staring out of a window.

Physical disabilities – Hearing problems, speech difficulties or poor/no sight (see non-verbal communication).

Non-verbal communication – Not being able to see body language, hand gestures or eye contact.

Language – Either a learner or a tutor communicating in a language that isn’t their first language can create a barrier to understanding and possibly create misunderstandings.

With the increased use of digital media within a learning environment this has introduced more barriers to effective communication.

Expensive equipment – To access additional resources learners may be encouraged to use technology. Some learners may not have the money to buy the necessary equipment.

Internet access – Increased use of cloud storage means access to the internet is vital. Some people may not be able to find a quality internet connection and access the resources necessary for learning.