Hello, my name is Gil Dekel. This video shows a draft for an online Articulate Storyline tutorial that helps students use University catalogue to search for books.

I’m going to share with you the process of making this tutorial, and some tips and advice for consolidating information and making navigation easier.  When you receive your brief (the text that you need to convert into the online design) you want to make sure you consolidate information, make things easier by reducing the amount of clutter of words and images.

I want to start by showing you this small thing here, at the top left, where the title says ‘Library Catalogue (WebCat).’ Initially, the brief had it written like so: ‘WebCat’ and below that it said ‘library catalogue’. I’m going to pull the brief over and show it to you … so we have ‘WebCat’, then ‘the library catalogue’ and so forth.

Click to

Because the brief is starting with the word ‘WebCat’ (where students don’t know what it means), we have to use words to explain it. Whereas if I turn the words the other way around, starting with ‘library catalogue’ – assuming that everybody knows what a catalogue is – and putting ‘WebCat’ in brackets below it, then  I don’t need to explain it. What I’m saying here is that this is about a library catalogue, which we called ‘WebCat.’  So, I’ve reduced a lot of words in the slide. I don’t need to explain it anymore, simply because I placed the words, the phrases, the other way around.


The other thing is consolidating the amount of images, words and buttons. Here you see we’re saying ‘find’ and below it we say: books, book by topic, e-journal, e-book and so forth. If I show you the original brief, initially we’ve written ‘find specific book, find a book by subject, find eBook, find a journal’…

So looking at our initial brief, we looked at the buttons’ text and thought how to reduce them? We looked at the key words. What are the repeating key words in these buttons? Well, the key word is not ‘book’ but ‘find’. So we took the word ‘find’ and placed it here at the top, and in that way we could reduce the amount of words. So instead of students having to read ‘find a specific book, find a book by subject, find an e-journal, find an e-book’, we’re saying only once ‘find’ and under find you have its subchapters, the categories.

So reducing the amount of visual clutter and verbal clutter by consolidating information.


The project is colour coded as you can see here, and the colours run through the whole presentation. Let me show you an example. The green colour code remains here.

I chose red bold colour to represent the message that I want to convey, on top of the screen grabs images. This is the screen grab from the actual online website system and this is explaining how to use it.

I chose the colour red because it is strong and it is a colour that calls for an action. However, it may be too strong; I may need to reduce its intensity. Also what I would suggest in future is when you use screen grabs, turn then black and white so that your text on top of them will stand out much better.


At any point, there is a ‘home’ button. This is crucial. I’ve seen presentations where there is no home button and you cannot go home. Always make sure that from any slide your user can go home.

There is ‘back’, ‘next’’ and there is ‘pause’ buttons. Once you click pause, it changes to say ‘click to play’. This is also important. I didn’t just put the word ‘play’, I put ‘click to play’ because when you are in pause mode, as we are now, you may not realise it. A student may click on pause by accident and they will be standing there, waiting for the presentation to continue, not realising they are on pause – so I have made it clear, with a button saying that you have to ‘click to play’. I’ve noticed this problem when I watched BBC iPlayer on Xbox. When I look at the button that says HD, I never know if I have to click on it to turn it to HD or whether the button is telling me ‘you’re already on HD’ (this is because there is no consistency in BBC iPlayer buttons in Xbox).


In addition to this navigation, I did include the timeline slider here because I think that some users will click it and go…like that. It will go useful for the quicker learners. If you don’t want to, you just wait for the presentation to run on its own speed; but if you want to, you can just hold the slider and move it quickly back and forth.


I want to show you these slides and how I’m using graphics and text to save on time while still delivering the message. We deliver messages without providing answers. For example, this is a slide about how to find a book in a library. I’m not telling the student the actual answers, I’m not telling them where the book is. I’m keeping the question (where is my book?) – that is the question the users will have when they’re looking for books. And instead of giving them the final answer, instead of telling them “you will have to look at the area where it says ‘location’ and in the location look for which library it’s in” – I simply give them tools to find the answer by themselves.

The way to do it is to use this graphic with this arrow and with this borderline here, which denotes/tells the students where his book is. To find the answer just look right here; here you will find the answer by yourself… I don’t give the answer; rather I give them the visual graphic clues for them to find the answer by themselves.

‘How do I find a book on the shelves?’ This is a bit more complex. You have to note own the call number; this is the call number. Once again, I don’t explain what a call number is. I might need to do so in a different project, but here I don’t have time explain it. I don’t tell them, “Listen, this is your call number” but I tell them to note down the call number. When the user is reading this sentence ‘note down the call number’ and the graphics are directing to this, they say, “Ok, this is something that the library is calling ‘a call number’. I may not know what a call number is, but I understand that this is a call number which I need to write down then using this call number I need to find the book.”

This is a graphical way to create clues, empower the students, acknowledge their intelligence, and communicate messages through your graphics without wasting time on explaining everything. You cannot explain everything because you don’t have time to (in short presentations like this one) and also because things do change. The locations of books may change (as there are constant changes in libraries) so we need to give students the tools for them to find books, to identify that this is a call number, this is something they need in order to find a book. Even if we change in the call numbers, or move shelves in future, sill the student can know “Ok, there’s this thing called ‘call number’ which I need to identify.”

We want to credit the user for their intelligence. We don’t want to spoon-feed them everything. We talk with words but also with graphics. When you talk with graphics, it is quicker to communicate, and can take less space on the page. You don’t need to use words so you can save on a lot of space and reduce the amount of slides.


The last thing I want to show you: this is the last slide in this scene. But how would a user know that it is the last slide? I know it, because I designed it. But how would the user know it?  The slide stops at the end. It’s not pause. It has reached the end. The user may look at it and wait, “What’s next? I’m stuck.”

In order for users to understand that this is the end of this scene, what I’ve done is to create this flashing home button here. It’s flashing, pulsing. When something is pulsing, it’s a graphical symbol that says, “Look at me; notice me…” It’s like a heart-beat, saying, “I’m alive…look here.” When the student looks here, it will draw their attention, and they will realize that they need to click the ‘home’ button. I’m speaking to the user without using words; I’m speaking to the user using graphics.

Also I‘ve deleted the ‘next’ button here so you cannot go next anymore. There’s no ‘next’; and the home button is pulsating, drawing my attention. Therefore, I have no other choice but to click and go back to the home page…


At the home page, once you’ve visited a scene, you see v tick (check) denoting that this was visited, so you don’t need to do it again.


These are some tips about developing graphic strategy for your online Articulate Storyline presentations. The advice here is good for any type of design: from online courses, to web design, print design, or moving image projects. There is no much difference. The basics of graphic design are the same for print, online, and interactive presentations.

My name is Gil Dekel. Thank you very much.


before and after design of a storyline

Improved design of content and graphics. Before (left) and After (right).

16 May 2016. © Gil Dekel.

Creative Commons Licence
Design tips for developing effective online Courses by Dr. Gil Dekel is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Based on a work at http://www.designtoolbox.co.uk/strategies/design-tips-for-developing-effective-online-courses/.