Interaction Designsemantic zoom + linear structurein narrative story tellingAn app on animalsin hindu mythology![project by]swadha jaiswalDDE
Design BriefThe objective is to build an app elaborating the role of animals in the hindu my-thology. An eﬀort to build on the project done earlier under edutainment. Introduc-ing the role of augmented reality and exploring interaction patterns like semanticzoom to see its role in narrative story telling. Story telling experience may notnecessarily be linear. Introducing a slight diﬀerent paradigm towards the comicreading experience.Target UsersThe app on the role of animals in hindu mythology, is aimed at the following targetusers: • Kids aged 4years and above. Whose parents may own a smart device/tablet.
Case studies on interaction patternsTo know more about various interaction patterns used i reﬀerred to the followingwebsites:• 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 eﬀectively 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 semanticzoom. Where the website that helped a lot in explaining me the function of sematiczoom 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 usethe interaction pattern of semantic zoom.ConceptIts an attempt to make hindu mythology fun! An idea to communicate the stories ofmythology in the physical + digital world! (relating them using augmented reality).The idea is to convey the role of animals in hindu mythology!Problem StatementKid 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 mythology1. Greek Gods & Mythology Pocket Reference By Rocket Splash Games (i phone app) Description: Greek Gods & Mythology Pocket Reference App oﬀers a detailed pocket refer ence app covering the Ancient Greek Gods, Titans, and other Mythological ﬁgures. Have the information covering all of greek mythology right in your hands.Screenshotszoomed 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 scan1. 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 tozoom.Hence i considered exploring semantic zoom to create a new paradigm in storyreading experience. It helps breaking away from the monotony of a linearstructure.
ResearchUnderstanding semantic zoom:Semantic Zoom is a touch-optimized technique for presenting and navigating largesets 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 classiﬁcation (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 ﬂat, all-up structure and another, high-level (orzoomed out) mode that displays items in groups and enables a user to quicklynavigate and browse through the content.The Semantic Zoom interaction is performed with the pinch and stretch gestures(moving the ﬁngers farther apart zooms in and moving them closer together zoomsout)Examples of Semantic Zoom : zoomed out
zoomed in zoomed outNoteSemantic 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 theadjustment of magniﬁcation for a content area or object such as a photograph.
Navigating with Semantic ZoomWhile navigating content is possible through panning and scrolling alone (seeGuidelines for panning), powerful navigational and organizational capabilities arepossible 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. SemanticZoom greatly reduces the perception of traveling long distances when navigatingthrough large amounts of content and provides quick and easy access to locationswithin the content.Scroll jumpTapping the content in zoomed-out mode will zoom the view and pan to the tappedpoint, 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.TransitionsA 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 cannotbe customized.
Following touch interactionshave been used. tap for primary action pinch & zoom slide to drag
App screens with interactionspinch & zoomis used here tosymanticallyzoom into moredetails about thevahanas of gods. the categories are located in boxes of diﬀerent sizes according to their magnitute. (inspired from the tree map structure)
App screens with interactionspinch & zoomis used here tosymanticallyzoom into moredetails about thevahanas of gods.
App screens with interactions slide to drag touch interaction is used here to go to the next page.
App screens with interactionstap to zoom ina particular frame.
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.
How did mouse become How did mouse becomeGanesha’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
How did mouse become How did mouse becomeGanesha’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