Products (LMS, Participant Tracking & Assessment)

Mobile/Tablet Applications

Centres of Excellence Portal & Custom Applications Simulations & Topsim

Its not just about using HTML5

3D Animation

Serious Games

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

Meghna Amonkar outlines how the advent of mobilelearning has changed the design philosophy for Tata Interactive Systems

Its not just about using HTML5

As an Interface designer today, one is faced with multiple challenges. The learner of today is uid 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 Factor

The compatibility issues with Flash on mobile devices have been a catalyst to look beyond just making objects y 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 nally lost the heavy boxed-up look that has subliminally inuenced 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, ne 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 Interfaces earlier shown on the BBC website from 2008. seemingly busy layouts are balanced by using clean and simple lines to enclose pictures and layout graphics.

Tap replaces Click

The biggest shift in user experience from desktops to mobile devices is the switch to from clicking Traditional tapping.

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.

Its 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 ap take a peek inside and decide whether to open the box or not. This feature is naturally absent in touch screen devices since your nger 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 ngers or hands while tapping.

Chunk it up
We 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 dimensions

Interchanging gadgets quite literally means that every device, operating system and browser opens up a new way of doing things, making it necessary to nd 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

Its 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 exible platform on the market.

Future proong
So 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. Weve 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:

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