G-Cube Blog

I have been playing with a 7” inch Android based tablet for few weeks now, and as I had mentioned in one of my earlier posts, I see tremendous applications for this kind of device (if rightly priced) in productivity enhancement, and in learning and development in India like scenario, where workforce is highly distributed, and access to laptops and fast Internet connectivity is limited.

I have had a touch screen phone with me for some time now but had never really bothered about taking it seriously for any kind of learning etc (I know, coming from an e-learning solutions provider, this can sound blasphemous to some, but that’s how it was for me personally). But, these 7” inch tablets seem to be of just the right size – it’s easy to hold them in one hand and use the other to scroll, or use both hands to use the virtual keyboard.

While going through various ‘current world’ web portals and applications, and then some which have been optimized for mobile and touch screen interfaces, I found some UI design related aspects that I found worth jotting down. Here are some of my observations, which you may like to use if you are also starting on your journey to create content and applications for touch interfaces (some of the items described below may be specific to Android OS) –

Always use white or bright colored background – Fingerprints and other marks on the screen become much more prominent on black or dark backgrounds. A white or a bright background solves this to quite an extent.

Keep it Clean and Simple – Don’t clutter your application/course screen with too many Icons, Buttons etc. Just keep the most important functionalities on screen and move rest of them to ‘Options’ or ‘Context’ menus. Here is one such good example of how to keep application design clean (This is ‘Documents To Go’ from Dataviz – an MS Office & PDF reader and editor) -

Application Home Page – Large Icons With Ample Space Between Them

Application Launch Screen: Only ‘The’ Most Important Functionalities Placed Here

Options Menu: Again only most used functionalities should be placed here, with rest placed under ‘More’

Context Menu – Keep All Options Relevant to Selected Item in ‘Context Menu’

In e-learning context, it can mean keeping all the global course functionalities, such as Glossary, FAQ, Notes, Ask Mentor etc in the ‘Options’ menu, and any specific item related information (e.g. clicking on an object may reveal option to view it, download it, mail it etc.) in ‘Context’ menus.

Touch is Different Than Mobile Interface – While creating content for mobiles one focuses on designing the content for small screen sizes and links etc are organized with an assumption that they will be navigated using track-ball or something similar. However, in touch screen devices where screen size ranges from 5 to 10 inches, one should focus more on size and prominence of click-able objects as finger sizes can vary quite a bit between users of the application. Of the limited ‘touchabled’ (new word?) sites that I have browsed, I have particularly liked the way Facebook has organized its mobile and touch interfaces (notice how links are presented differently in both the interfaces) –

Provide Undo Option – It’s easy to make mistakes in touch screen based applications – one may touch the wrong button, or fill in wrong data due to keyboard size limitations. Instead of making user re-enter data or perform steps all over again, provide option to return to last state with ‘Undo’ or ‘Back’ option.

Give Visual Indication of Action Being Taken – On desktops we see a busy mouse icon and we know computer is doing something. We don’t have any mouse icon in touch screens – so give some visual indication as soon as anything touchable is touched, so that the users don’t panic and start feeling that something went wrong.

Use Multi-Touch to Add Pizzazz – Multi-touch capability in touch screen devices adds a new dimension to how we can add interactivities in our courses and apps, e.g. an interactivity where user has to work on a machine simulation with both hands at same time, or take quick actions in different parts of the screen using both hands etc will now be possible with multi-touch capability.

Provide Scroll Options – Now the experience shared below may be specific to the tablet I am using, but whenever I find lot of icons or hyperlinks on the screen and I have to flick the screen to move to next section I invariably end up clicking some icon or hyperlink by mistake (I have not faced this in iPhone so I think it has something to do with the screen quality of my test tablet). But this raises a point – that many users may have these kind of tablets where screens may not be of the best quality (and I think that may be more true for low end tablets), or user clicks on something by mistake while flicking on the screen. I think it will be a good idea to provide scroll buttons ‘<’, ‘>’ (horizontal or vertical depending upon screen orientation) at screen edges to factor in all type of devices and users.

Will keep on sharing more as I dive deeper into the touch world, and as we get more feedback from users using our courses and apps designed for touch screens.

Images and graphics have always been a part of learning and e-learning is also no exception. More than just jazzing up the ‘look and feel’ aspect, graphics can enhance learning as a whole. A common view that including graphics in a learning module is a sure-shot way of relieving tedium and doing away with ‘white space’ is outdated. It is sometimes the norm for some e-learning courses to have minimalistic graphical elements. For others, however, it can build the very essence of learning and rise above being just a sidekick to content or textual matter!

So, when sitting with the important task of thinking up the graphical angle of a course – along with a lot of creative thought and imagination, one needs to also keep in mind some of these points -

• Audience profile: Graphics do not follow the ‘one-size-fits-all’ criteria. Age, education, cultural background – the list of factors affecting the learner sensibilities is long and exhaustive. But it is, in the same time the window to what the learner expects and appreciates. Understanding the learner and learner needs is thus crucial to designing graphics for instruction. Not only does it help to anticipate the learner appreciation, it also helps to steer clear of what the learner might NOT like or understand.
• The learning platform: The kind of training – web based or computer based, or available internet bandwidth also influences the kind of graphics to be included in the training course. Graphics of web based trainings (WBTs ) are often lighter and can be viewed well, keeping in mind available bandwidth. Graphics used are often vector graphics, which can be adjusted as per screen size and are also lighter than bitmaps. On the other hand, Computer based trainings (CBTs) can support heavy graphics, with the availability of compact discs and CD-ROMs. To use the right kind of graphics as per the kind of platform available to the learner is again, imperative for the success of learning
• Limits and Constraints: While it is indeed necessary to unleash creativity, it is also important to keep practical constraints like budget, time-lines or corporate standards in mind and work around them. Most graphics professionals agree that it is better to use simple but well-made graphics rather than shabby ones for the excuse of low budgets or time constraints. The world of graphics is huge and there’s a lot one can choose from. 2D or 3D, animated or still – the choice has to be made keeping all constraints in mind. And working around them is possible. Treatment of graphics can be creative and an image does not have to literally ‘talk’ to be able to get its message across.

And while keeping the above points in mind, some of these essentials should also be taken into consideration -

• Relevance: Every aspect of design – be it the color scheme or a particular image – has to have relevance as per the learning objectives of the course. Visual appeal of the screen should communicate in accordance with the tone of the entire content and discordance in the tone of the content and graphics will be jarring.

• Placement: Some standardized norms in graphical treatment have become familiar to most learners. For instance, the logo placement in the top-left or interactive phrases like ‘next’ or ‘click to continue’ on the bottom-right. Many such norms are formed during the course of a learning module. For example, names of people or characters introduced in a certain pattern can lend them hierarchy or relevance, which the learner perceives and expects throughout the duration of the course. A deviation from this structure can confuse or distract the learner.

• Aesthetics: While we agree that graphics have to be relevant to the entire theme and objective of the learning module, at the end of the day, it DOES need to look good. Every graphical element needs to find uniformity throughout the structure of the course. This helps to build the course as a whole, where none of its visual elements stick out as the oddity.

• Fonts, size, style, color scheme: Some fonts suit the formal courses while some are suited to more informal ones. Size and styles too add to the necessary zing. Colors are also instrumental in setting the ‘tone’ of the training. Once this tone is set, it is necessary to maintain it through the course of the training. Tweaking with the elements of fonts, size, style or color can bring about the necessary changes in tone. However, this can be a ‘no-trespassing’ area! Some of the aspects like fonts and colors are pre-decided by the client and have to be worked with accordingly.

• De-Clutter: Using images, charts, graphs or interactive elements in graphics can certainly help the learner. At the same time, it is important to find a balance so that it does not become the case of ‘too much of a good thing’! Too many visuals on a single slide or page can confuse the learner. If a hard-hitting image or an informative graph is included in a page or slide, it is important that there is ample space for contemplation or assimilation of its effect. In this matter, empty space is of foremost relevance.

A world of creativity and unfathomable possibilities is the world of graphics. In e-learning, it lends its relevance best when creativity is meshed with understanding client needs, learning objectives and the learner.

Graphics are an integral part of learning, be it standard classroom or online trainings. It is often seen that e-learning fails to leverage the potential of graphics as a strong medium of teaching visually. Maybe it is because we have spent lifetimes writing text-based training material that we produce lot of trainings without much or any use of graphics. At the other extreme, we sometimes create elaborate visuals for training, so much so that learner ends up mesmerized by the jazz and plays little attention to the content.

All graphics are not effective! A research conducted by Journal of Educational Psychology shows that if not used properly, graphics can depress learners and bring down interest level. The effectiveness of visual treatment requires a clear:

• Instructional goal  
• Learning landscape 
• Standard characteristic of the graphic 

If you ensure that graphic meets the goal of the instructions it is supporting, the landscape is designed keeping the audience in mind, and all the graphics are designed and developed on the same standards, the graphic will definitely add to the learning. You can vary the above three to design one of the following graphics:

Decorative: Adds aesthetic appeal and humor (Usually part of a bigger graphical representation)

Representational: Depicts objects in the real-world manner (Simulations)

Relational: Depicts quantitative relationship among variables (line graphs and charts)

Mnemonic: Provides cues to retain facts and information (Graphical aids but not literal representation)

Transformational: Shows changes in object over time (Animation)

Each category of graphics mentioned serve a different purpose and need to be carefully chosen and aligned with specific instructional content. Therefore, to design the best graphic for a given instruction, you must first understand the instructional goal and then, map your strategy to it.

(Mr. Sachin Pandey is Project Manager at G-Cube)