It’s not just about using HTML5

Meghna Amonkar outlines how the advent of mobile-learning has changed the design philosophy for Tata Interactive Systems

The six ‘Centres of Excellence’ at TIS foster thought leadership and core expertise for differentiated products & service offerings. Videos from these Centres of Excellence are available at http://www.youtube.com/tatainteractivesys

Products (LMS, Participant

Tracking & Assessment)

Mobile/Tablet Applications

3D Animation

Portal & Custom

Applications

Simulations & Topsim

Centres of Excellence

Serious Games

It’s not just about using HTML5

As an Interface designer today, one is faced with multiple challenges. The learner of today is fluid in

seamlessly switching from one gadget to another and expects the content experience to be just as seamless.

Expectations are high and constantly growing. So how does one fast forward the evolution process in

designing elearning interfaces to keep learners interested?

The visual design team at Tata Interactive Systems has a commitment to the 6 different Centres of Excellence

to provide guidance on current (and future) trends and make sure all programmes, whether a Serious Game,

a Simulation, a Graphic Novel or Learning Nugget, are fresh and contemporary for our clients.

The ‘Wow’ FactorThe compatibility issues with Flash on mobile devices have been a catalyst to look beyond just making

objects fly from one corner of the screen to another. The ‘wow’ factor is no longer restricted to animation.

It has become necessary to think carefully before adding excessive images simply because they look nice

and there is space on the screen to add them. Communication is more direct with a focus on delivering the

message quickly.

The minimalistic design approach brought in by Apple is

now adopted universally. Interfaces have finally lost the

heavy boxed-up look that has subliminally influenced us

through different versions of Windows. The launch of the

iPhone and the iPad has broken all conventions in interface

and interaction design. Users expect the slick and stylish

look achieved through lots of white space, fine lines and

good use of typography.

User interfaces designed exclusively for the iPad show

quite a dichotomy in the design approach. Layouts are

quite complex with complex grids used to divide screen

real estate. This is possible due to the advantage of a large

display area and the ability to view the smallest of images in

amazing clarity thanks to the retina display. However these

seemingly busy layouts are balanced by using clean and

simple lines to enclose pictures and layout graphics.

Tap replaces ClickThe biggest shift in user

experience from desktops

to mobile devices is the

switch from clicking

to tapping. Traditional

eLearning User interfaces

(UIs) relied heavily on

different variations of

the click to direct users

to intended pieces of

learning.

Clean interfaces and much cleaner, crisp white background now shown on the

Apple website.

Interfaces earlier shown on the BBC website from 2008.

It’s not just about using HTML5

The hover state for example is a mouse state that allows a person the ability to sort of lift a flap take a peek

inside and decide whether to open the box or not. This feature is naturally absent in touch screen devices

since your finger can either touch a surface or not. A simple way of managing this is to provide small captions

or descriptions along with images to give users a clue about what the link contains, allowing them a choice.

Visually it is possible to show small thumbnail images and relatively small font sizes on mobile devices

without compromising on details, because the display is much sharper and richer.

There is also the choice of other common gestures like the tap and hold, swipe, pinch zoom in and zoom

out, tap and drag, etc. While each of these have their advantages and can be used very effectively as

individual items, it is important to take into consideration the impact of two or more of these gestures used

in combination. It is a good idea to leave a good amount of space around every interactive object on a screen.

This helps avoid gesture overlaps and ensures that other content on screen does not get hidden with fingers

or hands while tapping.

Chunk it upWe all know that attention spans are reduced on mobile devices so dividing content in smaller manageable

and easily retrievable ‘chunks’ is now a given and the interface should support this.

A typical home screen interface can show a break-up of content not only in terms of topics but also based

on media type. So if a topic contains videos, audio clips, photographs and interactivities, besides textual

information, the home screen interface can include these as tappable items within the topic or as a collated

list based on media type.

Small non-intrusive media

icons could be used to

visually differentiate these,

at the same time ensuring

that the interface does not

look crowded.

National Geographic

magazine has always been

a trend-setter in this area

(being famous for images

rather than text) and the

example below illustrates

how articles are displayed

in their digital magazine,

when viewed on an iPad.

The ever changing dimensionsInterchanging gadgets quite literally means that every device, operating system and browser opens up a

new way of doing things, making it necessary to find some common ground to place the primary navigation

of the training being designed. With the increasing number of smartphones and tablets, notebooks and

desktop monitors entering the market, screen sizes will always keep changing. The traditional method

of designing different style sheets for different screen sizes may not always work as style sheet support

varies across different devices. This continuing trend of growing numbers of screen sizes will soon make it

It’s not just about using HTML5

impossible not to switch to responsive design. Responsive design takes away the hassle of having to design

separately for every screen size and orientation.

Tata Interactive has overcome this challenge by introducing new FRUN technology (Fluid Resolution,

Universal Navigation) in the LEARNowTM platform. The authoring templates (see diagram below) offer a

consistent navigation experience whether clicking, tapping or swiping. The publishing tool means the

authoring user can view in advance what the end product will look like on any device which should save a

huge amount of time and costly errors for users of the platform. Content can then be published either as an

app or as a Scorm 1.2 object making this the most flexible platform on the market.

Future proofingSo what does the future hold for a designer or developer of elearning? One thing is for certain, learners’ needs

are inversely proportional to their tolerance levels in terms of UI mistakes. We’ve watched the mixed reviews

(i.e. some people hate it!) of Windows 8 to illustrate that if you get it wrong your audience is increasingly

sophisticated enough to spot why you got it wrong. And quickly reject the content.

Learners are very sure of what they want to learn and how they want to do it. This applies to learning rolled

out on an LMS or a Personal Learning Environment and the navigation, content, when to view it, how to place

it on the start-up screen etc all has to be aligned to these new design features.

’Controlled freedom’ is the new mantra for accessing training on any device whilst us Visual Designers make

sure the learning experience is also a liberated one.

Meghna Amonkar is Head & Principal Communications Designer for Key Accounts at Tata Interactive Systems.

Follow us at:

Tata Interactive Systems | 18, Grosvenor Place | London SW1X 7HS | Office +44 (0)207 235 8281

www.tatainteractive.com