View
223
Download
0
Category
Preview:
Citation preview
8/13/2019 Its Not Just About Using HTML5
1/4
Its not just aboutusing HTML5
Meghna Amonkar outlines how the advent of mobile-learning has changed the design philosophy for TataInteractive Systems
The six Centres of Excellence at TIS foster thoughtleadership and core expertise for differentiated products & service offerings. Videos from theseCentres of Excellence are available athttp://www.youtube.com/tatainteractivesys
Products(LMS, Participant
Tracking &Assessment)
Mobile/TabletApplications
3D Animation
Portal &Custom
Applications
Simulations &Topsim
Centres ofExcellence
Serious Games
8/13/2019 Its Not Just About Using HTML5
2/4
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
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 desktopsto 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.
8/13/2019 Its Not Just About Using HTML5
3/4
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 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 illustrateshow 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 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
8/13/2019 Its Not Just About Using HTML5
4/4
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 LEARNow TM 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 proongSo 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:
Tata Interactive Systems | 18, Grosvenor Place | London SW1X 7HS | Office +44 (0)207 235 8281www.tatainteractive.com
Recommended