Animals in mythology : an app for kids

semantic zoom + linear structurein narrative story telling

An app on animalsin hindu mythology!

[project by]swadha jaiswalDDE

Interaction Design

Design Brief

The objective is to build an app elaborating the role of animals in the hindu my-thology. An effort to build on the project done earlier under edutainment. Introduc-ing the role of augmented reality and exploring interaction patterns like semantic zoom to see its role in narrative story telling. Story telling experience may not necessarily be linear. Introducing a slight different paradigm towards the comic reading experience.

Target Users

The app on the role of animals in hindu mythology, is aimed at the following target users:

• Kids aged 4years and above. Whose parents may own a smart device/tablet.

Case studies on interaction patterns

To know more about various interaction patterns used i refferred to the following websites:

• Welie.com – A Pattern Library for Interaction Design This site contains a lot of best practices in Interaction Design.

• Quince interaction patterns – Quince is an interesting library of Interaction Design patterns that helps developers lookup, learn and effectively create more user-friendly user experiences

• Yahoo design pattern library – This website has divided the patterns category wise. The categories being : layout, navigation, selection, rich interaction & social.

Whereas for this project i wanted to explore the interaction pattern of semantic zoom. Where the website that helped a lot in explaining me the function of sematic zoom is http://blog.jerrynixon.com/2012/03/windows-8-semantic-zoom-versus-optical.htmlIt made me understand what is semantic zoom and the kind of examples that use the interaction pattern of semantic zoom.

Concept

Its an attempt to make hindu mythology fun! An idea to communicate the stories of mythology in the physical + digital world! (relating them using augmented reality).The idea is to convey the role of animals in hindu mythology!

Problem Statement

Kid these days are losing touch in their roots.They are unaware of the stories of mythology and the sagas of the deities!

Environment scan of existing apps on mythology

1. Greek Gods & Mythology Pocket Reference By Rocket Splash Games (i phone app)

Description: Greek Gods & Mythology Pocket Reference App offers a detailed pocket refer ence app covering the Ancient Greek Gods, Titans, and other Mythological figures. Have the information covering all of greek mythology right in your hands.

Screenshots

zoomed in

2. Greek Mythological By William Habdas Description: It is a one stop shop for basic data and images as well as a springboard to continuing your research. Better yet, your experience is not limited to what we provide, as the application ties directly into web services to provide addi tional images and other resources so you can continue to explore and learn. Search for keywords, bookmark your favorites, browse images, and have a ton of fun. You might even learn something!

Screenshots

3. Hindu Gods By AppCore Description: India is one of the most religiously diverse nations in the world, with religion playing a central role in the lives of most Indians.

There are as many Hindu gods as there are devotees to suit the feelings, moods and social background of the devotee. This iPhone and iPad app contains the most important Hindu Gods and God desses.

Screenshots

Finding after environment scan

1. There are not many apps on hindu mythology.

2. Mythology apps that cater to kids are fewer in number.

3. The story narration in most of the apps is a linear structure.

4. There are no apps to be found which uses the QR code on a physical object.

5. The interaction patterns in most of the apps are tap, slide, pinch & stretch to zoom.

Hence i considered exploring semantic zoom to create a new paradigm in story reading experience. It helps breaking away from the monotony of a linearstructure.

Research

Understanding semantic zoom:

Semantic Zoom is a touch-optimized technique for presenting and navigating large sets of related data or content within a single view (such as a photo album, app list, or address book)

Semantic Zoom uses two distinct modes of classification (or zoom levels) for organ-izing and presenting the content: one low-level (or zoomed in) mode that is typi-cally used to display items in a flat, all-up structure and another, high-level (or zoomed out) mode that displays items in groups and enables a user to quickly navigate and browse through the content.

The Semantic Zoom interaction is performed with the pinch and stretch gestures (moving the fingers farther apart zooms in and moving them closer together zooms out)

Examples of Semantic Zoom :

zoomed out

Note

Semantic Zoom should not be confused with optical zoom (see Guidelines for opti-cal zoom and resizing). While they share the same interaction and basic behavior (displaying more or less detail based on a zoom factor), optical zoom refers to the adjustment of magnification for a content area or object such as a photograph.

zoomed in zoomed out

Navigating with Semantic Zoom

While navigating content is possible through panning and scrolling alone (see Guidelines for panning), powerful navigational and organizational capabilities are possible when paired with Semantic Zoom.

Panning and scrolling are useful for small sets of content and short distances. How-ever, navigation quickly becomes cumbersome for large sets of content. Semantic Zoom greatly reduces the perception of traveling long distances when navigating through large amounts of content and provides quick and easy access to locations within the content.

Scroll jump

Tapping the content in zoomed-out mode will zoom the view and pan to the tapped point, as shown in these three diagrams.

Zoomed out, the entire content can be a touch target.

A tap on a section of the content.

Zoomed in and panned to the tapped area.

Zoomed in and panned to the tapped area.

Transitions

A smooth cross-fade and scale animation is used for the transition from one seman-tic zoom level to another. This is the default Windows Touch behavior and cannot be customized.

Proposed information architecture 1

Proposed information architecture 3 (final)

animaldeities

birds inmythology

vahanasof deities

mythicalanimals

glossary/pronounciation

animalgodesses

animalgod

kamdhenu

sarama

aranyani

manasa

hamsa

jarita

sampati

chataka

chakora

mouse

garuda

bull

ram

elephant

deer

makara

airavata

matsya

kurma

sharvara

crocodile

parrot

peacock

buffalo

owl

tiger

lion

ganesha

hanuman

narasimha

pashupati

varaha

naga

animals in mythology

story/description

story/description

story/description

story/description

story/description

list

Wireframe rough sketches

Following touch interactionshave been used.

tap for primary action

pinch & zoom

slide to drag

App screens with interactions

pinch & zoomis used here tosymanticallyzoom into more details about thevahanas of gods.

the categories are located in boxes of different sizes according to their magnitute.(inspired from the tree map structure)


pinch & zoomis used here tosymanticallyzoom into more details about thevahanas of gods.


slide to drag touch interaction is usedhere to go to the next page.


tap to zoom ina particular frame.

To read a particular frame,the interaction to be done is tappingon that particular frame.

Once tapped, the screen zooms into thatparticular frame, as shown here.

How did mouse becomeGanesha’s Vehicle!

frame1 frame2

frame3 frame4


frame1


frame1 frame2

frame3 frame4

Transitions happening at the tap / slide of each frame.

After tapping, slide to draginteraction is used to transit fromone frame to the other.

Transition happens in the order showedin the above diagram.


frame1


frame2


frame1 frame2

frame3 frame4

In the zoomed in mode, Slide to drag touch interaction is usedto transition to the frame 2.Transition happens in the order shown below


frame1 frame2

frame3 frame4


frame2


frame3

Similarly when slide to drag interaction happens in the frame 2,it zooms out and transitions diagonally to left down frame(to show the movement on the page). And ends with a zoomed in frame 3.

Thankyou

Animals in mythology : an app for kids

Education

Transcript of Animals in mythology : an app for kids