Design for Non Designers – Repetition

Design_Repetition

Repetition is a principle we use in our lives for all sorts of reasons. By repeating things we remember them.  Do you recall learning your times tables as a kid? What did you do? If you were anything like me it was the first order of day in infants then primary school to recite the times tables over and over again (…three sixes are eighteen, 4 sixes are twenty four, five sixes are thirty…go on admit it, you can hear yourself saying them in that deadpan tune of recitation). But it was via repetition that we learnt them and ingrained them into our brains, to be recalled in times of need (like in high school when we suddenly had to do these bizarre formulaic things called calculus and integration).

We also use repetition to stay organised. Do you have a daily checklist you go through to achieve all that you need during a typical day? By repeating things they become easier to remember not only as facts but as things you need to get done during a day or other period of time.

Repetition is important for us to function during a day. Depending on your job you may have a series of key tasks you have to do every day. In some occupations if you don’t repeat those key tasks it could mean people get hurt, or might even be killed (anyone work in a nuclear reactor?).

Repetition in designing your e-learning is just as important. (Ok so it’s very unlikely that anyone will be killed by horrible repetition, still you will have learners wanting to ‘neck themselves’ if your use of repetition is horrible)

Repetition simply means reusing graphics and elements, to give a sense of unity to the information you are communicating. Good repetition is when you use consistent colouring, typefaces, image styles and (to a degree) layouts.  If you use a template or style guide to design a course then you have repetition already built in. Repetition shows that the slides belong together.  An example of poor repetition is when every slide in your course uses different styles, fonts, or colours. Another example is when you mix photos, clipart and line drawings, all in the same course with no sense of unity between them.

Learners don’t want to relearn how to use your module on every slide, or process lots of extraneous information over and above the key items they are taking your course to learn. That’s one of the key reasons we have a ‘How to use this course’ slide in a majority of modules. They do the user interface (UI) learning upfront, so when they get into the module proper, they don’t need to spend time working out how to use/interact with the module on every slide they are presented.

By exposing them to the UI upfront, and then repeating it across the entire module the UI becomes ‘invisible’, and takes no effort to navigate. They know how to make the module work by rote, the same way they can recite the answer to “what’s eight times eleven?” They don’t waste processing time on answering “eighty-eight” or, in the case of the e-learning where they need to click/hover/drag next.

However, if you change the location of, for example, the NEXT and PREVIOUS buttons on every slide, you are going to cause some major frustration for your learner as they need to play ‘find the NEXT button’ on every slide they are exposed to. This is going to fatigue them, and does nothing to assist them in having a good online learning experience. If you need to change a location (and again I stress you don’t unless it is absolutely necessary), make sure you provide clear instructions on the slide to enable the learner to find what they need to do easily.

UI assets are also important when you are doing a series of modules for a client. Don’t continually change the location of any buttons, or the menu, resource or closed caption tabs. Repeat their location across all of the modules for consistency. The learner doesn’t want to be re-learning how to use each module as they move through the series, and you want to be minimising any reasons for them to have an unpleasant experience.

Here are some other examples of repetition that should be integrated within your e-learning:

Fonts

Did you notice something above? Of course you did! The above paragraph changed font for no apparent reason. Why would I do that? Was it a mistake? Was there a reason I did that? What did I miss?

All good questions, and it’s exactly the same one your learners are going to ask themselves when you hit them with a sudden font change in the middle of your module. The biggest contributor to stress in a human being’s life is the ‘unknown’. The minute you change something, humans subconsciously go “Hang on something has changed here. Why has it changed? Do I need to engage a fight or flight response to survive here? What just happened?”

As a learner they are going to have exactly the same questions, and where we have questions we create our own answers to determine what needs to be done. Remember we don’t like the unknown, so we strain to make an answer.

For example, you change to a different font because you liked it, here’s what the learner is thinking:

“That’s a different font. It’s been the same up to this point, now it’s different. Hang on let me work out what has changed before I keep going with the reactor meltdown safety procedures I am reviewing. Content is the same. Pictures are the same. I definitely haven’t jumped to a different module. Why is the font different? Did they make a mistake? Have I missed something? Far out! They probably made a mistake and didn’t bother proofing the module. What a bunch of idiots! No attention to detail. Well if I didn’t need another reason to think this module is stupid I just got one. If they couldn’t be bothered to check their work, why should I?”

Ok so a little exaggerated, but you get my point.

When choosing fonts. Choose two fonts. One for your headings and one for your content. If you need a third font for say captions, do so, but try and restrict yourself to two primary fonts. Three or more is when things start to lose their repetition and consistency, and start to look like a mess, getting learners asking “what’s going on?”

Another big ‘no no’ is changing your font sizes from screen to screen 12pt here, 24pt there, 17pt over there and 10.5pt in the back. Choose a size for your headings e.g. 18pt and a size for your body e.g. 12pt, and stick to them, resist the urge to adjust for any reason. If slide number 20 must have a heading of 20pt, it’s worthwhile going back and changing all of your other headings to match. The repetition gives unity and makes your module more visually pleasing.

Colour Schemes

The same response to the font change above, may also be generated from suddenly changing your colour scheme

“Wait. The course has been all red white and black up until now. Why is it suddenly green, orange and purple? Am I still in the same e-learning module? Have I jumped to another module in error? Is my computer monitor faulty?”

Pick three colours.  Your main, secondary and tertiary, and use ONLY those three colours. Again think carefully before introducing a fourth colour. Can you archive the same effect with your top three? If you can, do so. Visually your module will look much better, and give the sense of unity of design.

If your client has a style guide, the hard work has been done for you. They will have a listing of their brand’s colours. Only use their colours, and again, try and reduce the number of colours you use to three. If you’re not sure which three to pick, have a look at their logo and any marketing products they have produced. You’ll be able to pick their three main colours fairly easily, and know which ones to use.

Images

You have a number of options when it comes to images for your module. Photographs, clip art, line drawings, icons, cartoons or illustrations. For good repetition of design choose one type and use it consistently.

If you choose photographs, stick with photographs, don’t throw in a piece of clipart here and a line drawing there. If images aren’t mixed with an obvious reason as to why, your module will look unprofessional and tacky.

With illustrations, if you use gradient fills, repeat that. If you use solid fills, repeat those. Again swapping and changing for no apparent reason will cause cognitive overload as the learner tries to work out why you keep changing it.

Audio/Video

You could write books about the use of repetition when it comes to audio and video in design. But as an e-learning developer there are some basics we can follow.

Voiceover talent should be consistent, and generally one voice should play the ‘narrator/coach/guide’, unless there is a good reason (branding, style, teacher and learner discussing the content etc.) for two voices to play off each other for the purpose of narration.

The repetition of the same voice sets up for the learner who the narrator is, and that it’s the voice that is important to listen carefully to, for the understanding of content, and any instructions that may be forthcoming.

Pull additional voices in for the purposes of case studies or scenario examples – that’s where you can run wild with a bit more variety and creativity.

Same with video, use a consistent talent as the narrator, and bring in additional talent for the case studies etc. Also mirror all of your colour schemes, typefaces, and style within the video, so when you import it into your module, it looks consistent with the design of the module, and that it feels it ‘belongs’ to the greater design.

Style

All of these items contribute to the style of your module. By repeating them the style becomes stronger and easier to determine. It feels ‘right’ and the learner doesn’t have to try and determine why something is presented a particular way. They can save that brain power for learning the skills the module is communicating (Ahhh! So that’s how to do an emergency shutdown during a reactor meltdown. Good to know.)

It will also inspire you into the style of assets to use across your images, typography, content and audio.

If you would like to review some further resources around repetition and style, as well as what not to do, check out the following links:

The Rapid E-learning Blog

5 Common Visual Design mistakes

https://blogs.articulate.com/rapid-elearning/5-common-visual-design-mistakes/

E-Learning Heroes

ELH Challenge of the week “Death, Taxes, and E-Learning Mistakes #32” (scroll down the bottom on challenge #33 to the last weeks challenge heading.)

https://community.articulate.com/series/e-learning-challenges/articles/fix-elearning-mistakes

Repetition in design links

Great inspiring images showing the power of repetition in this google image’s search link

https://www.google.com.au/search?q=repetition+in+design&biw=1920&bih=1008&tbm=isch&tbo=u&source=univ&sa=X&sqi=2&ved=0ahUKEwjr_LeG_JPLAhUBQ5QKHZMODv0QsAQILQ

The use of repetition in design

https://www.peachpit.com/articles/article.aspx?p=2268752

Get in Touch

We would love to hear from you. Give us a call or fill in the form and we will contact you soon.







    What product or service are you interested in?