More Related Content
Similar to Designing Effective AR Experiences
Similar to Designing Effective AR Experiences (20)
Recently uploaded
Recently uploaded (20)
Designing Effective AR Experiences
- 1. Designing an effective AR Experience NID, Bangalore Kumar Ahir Oct-2023
- 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)
- 5. XR Ecosystem AR, VR, MR, XR XR Hardware
- 6. AR playground Face AR Image Anchor AR Spatial AR Dirty your hands with Spark AR Let’s create something quickly
- 7. Types of AR Face Image World Space Body Hand
- 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
- 9. Design Process UX Design Process Focus only on a specific phase Ideation to Prototype
- 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
- 13. AR Storytelling Connect Real and Physical worlds Scale and Proximity Spatial Movement Virtual Content tied to Body/Face
- 14. Project
- 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
- 18. Proximity Physical Proximity to a person a person as fundamental human behavior to allow access to information
- 19. Black Mirror
- 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….
- 25. Bodystorming Take your phone Turn on the camera Move around Start pasting post its
- 27. Spatial Mapping - Activity Map the information spatially Around Front Left Right Behind
- 28. Spatial Mapping - Activity Map the information spatially Height
- 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
- 34. Prototyping Create images in Figma Import in Spark AR Position in Spark AR Test
- 35. Building Assets
- 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
- 37. Typography High Contrast Legible fonts Avoid 3d text unless ornamental Avoid long text - 3 lines max
- 41. Interaction principles Affordances Comfort and Safety Engaging Fun Proximity Screen Tap Object Tap
- 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
- 43. UX Flow
- 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?
- 46. Demo 3:15 PM In open ground Showcase project groupwise