Summary slides of the workshop done for NID, Bangalore introducing the students to various aspects of designing an engaging and effect Augmented Reality experience.
2. I am Kumar
Passion for immersive design and technologies
Avid sketchnoter
Product Design at Cisco
Entrepreneur - OoBI, InfiVR
Interaction Designer
www.kumarahir.com
twitter.com/@kernel_kumar
Letsketchin.substack.com
www.atomicsketches.com
Twitter.com/@letsketchin
Letsketchin.gumroad.com
3. About the session
Specific nuances of interaction design tools and methods
Sketch to prototype
Hands on - less of theory more of practical
Demoable Prototype - 3:30PM
4. Setup the environment
Meta Spark AR on laptop
Meta Spark AR player on smartphone
Download FaceAssets (search spark ar face assets)
8. AR Tools
Meta Spark AR
Snap Lens Studio
Adobe Aero
Unity
Banuba
Spark AR
● Ecosystem - social media
● Quick - Drag and Drop - No Fuss
● Extensible
● Possible future integrations with Meta
10. AR Interaction Design process
Sketching
Storyboarding
Prototyping
Designing and
Building Assets
Setting up
Spatial Layout
Adding Animation
and Interaction
Testing
Information
Architecture
Information and
Content Layout
11. AR Design Principles
Permission - Camera, Mic, Location
Tracker recognition - face, image, plane, world/geo
Onboarding - cues to get started - affordances
Ergonomics - prolonged usage, Gorilla hand
Space - private, shared
Number of Users - single, two, multiple
Space sharing - colocated, cross geo
15. Today’s project
Social creatures
Physical connection
Intimacy via Proximity
How might we enhance
the communication and
interaction between
strangers within the
power of Augmented
Reality?
16. Today’s Project
Tell Your Story
Year 2050
Technological advancement
AR Glasses/Contact Lens
Social Media
Access to person’s information
Privacy
17. Design statement
Design an AR based
personal information access
experience based on
physical proximity
● Viewing others
information
● Setting permissions
21. Elements of the design
Spatially located information
Combine visuals and text
Simple and Basic Interactions
Sound
Use only 2d planes, bold border
Placed in 3d space
Can try different shapes
Don’t go too fancy
Focus primarily on AR
23. Information - Activity
Levels
1. Public - access to all
2. Personal - friends, professional
3. Private
For each level keep # of information limited to 3
Types
● Photos
● Name, address
● Hobbies
● Profession
● Current location
● and so on….
30. Sketching demo
Use Sketching as a way to
communicate and create new ideas
It’s the beginning of prototype
Early concepts
Sketching is about an activity not the end result
- Bill Buxton
31. Sketching demo
Hand holding phone
Hand holding ipad/tablet
Person in Room/space
Composition to have half human
figure
—-----
Quick Sketch
Template from internet
Figma - Hand Illustrations
32. Storyboard - activity
Plan the Concept
Create Story arc
Capture user flow
Capture interactions
—------------------------
Show Context
Show different postures and gestures
Show hand positions
Show body positions
Show how’s the mobile pointed and
to what
36. Assets in Figma
Dimensions to be of power of 2
128, 256, 512, 1024, 2048.
Add bold dark borders 16 px
Any shape. Start simple
Avoid transparency
Black Translucent 70%
Think Air Signboards
42. Interaction pattern
Camera view
Interaction Transition
AR view
Tracking element
Face
Hand
Body
Image
Space
Geolocation
Screen Tap
Proximity
Object Tap
—--------------
Camera tilt
Screen Pinch
Screen Pan
Screen Rotate
Visual
Auditory
Haptic
45. Closing Notes
Do not make assumptions
AR has no boundaries
AR’s going to be used in many different areas
ASK - WHY AR?
Can this be done in other medium?
