Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Animals in mythology : an app for kids
1. Interaction Design
semantic zoom + linear structure
in narrative story telling
An app on animals
in hindu mythology!
[project by]
swadha jaiswal
DDE
2. 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.
3. 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.html
It 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!
4. 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
5. 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
6. 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
7. 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 linear
structure.
8. 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
9. zoomed in 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.
10. 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.
11. 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.
20. App screens with interactions
pinch & zoom
is used here to
symantically
zoom into more
details about the
vahanas of gods.
the categories are located in boxes of different sizes according to their magnitute.
(inspired from the tree map structure)
21. App screens with interactions
pinch & zoom
is used here to
symantically
zoom into more
details about the
vahanas of gods.
22. App screens with interactions
slide to drag touch interaction is used
here to go to the next page.
23. App screens with interactions
tap to zoom in
a particular frame.
24. Transitions happening at the tap / slide of each frame.
How did mouse become
Ganesha’s Vehicle!
frame1 frame2
To read a particular frame,
the interaction to be done is tapping
on that particular frame.
Once tapped, the screen zooms into that
frame3 frame4 particular frame, as shown here.
After tapping, slide to drag
interaction is used to transit from
one frame to the other.
How did mouse become How did mouse become
Ganesha’s Vehicle! Ganesha’s Vehicle!
frame1 frame2
frame1
frame3 frame4
Transition happens in the order showed
in the above diagram.
25. How did mouse become How did mouse become
Ganesha’s Vehicle! Ganesha’s Vehicle!
frame1 frame2
In the zoomed in mode, Slide to drag touch interaction is used
to transition to the frame 2.
Transition happens in the order shown below
How did mouse become
Ganesha’s Vehicle!
frame1 frame2
frame3 frame4
26. How did mouse become How did mouse become
Ganesha’s Vehicle! Ganesha’s Vehicle!
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.
How did mouse become
Ganesha’s Vehicle!
frame1 frame2
frame3 frame4
![Interaction Design
semantic zoom + linear structure
in narrative story telling
An app on animals
in hindu mythology!
[project by]
swadha jaiswal
DDE](https://image.slidesharecdn.com/smallinteractiondesigndoc-121119050541-phpapp02/85/Animals-in-mythology-an-app-for-kids-1-320.jpg)
