animals in mythology : an app for kids
DESCRIPTION
ExpTRANSCRIPT
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 2
Proposed information architecture 3
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)
App screens with interactions
pinch & zoomis used here tosymanticallyzoom into more details about thevahanas of gods.
App screens with interactions
slide to drag touch interaction is usedhere to go to the next page.
App screens with interactions
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
How did mouse becomeGanesha’s Vehicle!
frame1
How did mouse becomeGanesha’s Vehicle!
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.
How did mouse becomeGanesha’s Vehicle!
frame1
How did mouse becomeGanesha’s Vehicle!
frame2
How did mouse becomeGanesha’s Vehicle!
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
How did mouse becomeGanesha’s Vehicle!
frame1 frame2
frame3 frame4
How did mouse becomeGanesha’s Vehicle!
frame2
How did mouse becomeGanesha’s Vehicle!
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