This document summarizes the process of prototyping a mobile augmented reality application for navigation at Bunratty Folk Park. It discusses conducting user research through observations and interviews to understand visitor needs. Low-fidelity paper and PowerPoint prototypes were created and tested with users to identify issues. A high-fidelity Wikitude prototype was also tested. An iterative design process involved refining the design based on user feedback and developing a final video prototype to demonstrate the intended user experience. The goal was to create an easy-to-use navigational aid that provides useful information to visitors at their own pace through their mobile devices.

1. LECTURE 3:
RAPID PROTOTYPING
FOR MOBILE AR
Mark Billinghurst
mark.billinghurst@unisa.edu.au
Zi Siang See
zisiang@reina.com.my
November 29th-30th 2015
Mobile-Based Augmented Reality Development

2. How can we quickly
prototype Mobile AR
experiences with little
or no coding?

3. Why Prototype?
▪ Quick visual design
▪ Capture key interactions
▪ Focus on user experience
▪ Communicate design ideas
▪ “Learn by doing/experiencing”

4. Google Glass Prototyping

5. Design/PrototypingTools

6. Prototyping Tools
▪ Static/Low fidelity
▪ Sketching
▪ User interface templates
▪ Storyboards/Application flows
▪ Screen sharing
▪ Interactive/High fidelity
▪ Wireframing tools
▪ Mobile prototyping
▪ Native Coding

7. Typical Development Steps
▪ Sketching
▪ Storyboards
▪ UI Mockups
▪ Interaction Flows
▪ Video Prototypes
▪ Interactive Prototypes
▪ Final Native Application
Increased
Fidelity &
Interactivity

8. • Low Fidelity Prototyping

9. Low Fidelity Tools
• Sketching
• GlassSim
• UI Templates
• Storyboards
• GlassWare flow designer
• Android Design Preview
• Video sketches

10. High Fidelity Tools
• UXPin/Proto.io
• JustinMind
• Processing
• WearScript
• AR browsers
• Unity3D
• Native Coding

11. Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator

12. Paper Prototyping

13. Paper Prototyping w/Hardware

14. GlassSim – http://glasssim.com/
▪ Simulate the view through Google Glass
▪ Multiple card templates

15. Storyboarding
Sequence of sketches showing use of system in
everyday use context
Concrete example
Easier (faster) to grasp than text based stories
Means of communication with users and system
developers
Sketches, not drawings...
Use to test interaction and make sure design works

16. Storyboarding

17. Example Storyboard

18. Example Storyboard p.2

19. Wireframes & Mock Ups
Roughly sketched sequences exploring and
validating interaction design.
Focus is on navigation and functionality.
Usually explores one interaction but can also be
used as the foundation for development of
testing prototypes.

21. Google Glass Application Flow

22. • High Fidelity Prototyping

23. Transitions

25. ▪ Series of still photos in a movie format.
▪ Demonstrates the experience of the product
▪ Discover where concept needs fleshing out.
▪ Communicate experience and interface
▪ You can use whatever tools, from Flash to
iMovie.
Video Sketching

26. See https://vine.co/v/bgIaLHIpFTB
Example: Video Sketch of Vine UI

27. UI Concept Movies

28. Limitations
▪ Positives
▪ Good for documenting screens
▪ Can show application flow
▪ Negatives
▪ No interactivity/transitions
▪ Can’t be used for testing
▪ Can’t deploy on wearable
▪ Can be time consuming to create

29. Interactive Wireframing
▪ Developing interactive interfaces/wireframes
▪ Transitions, user feedback, interface design
▪ Web based tools
▪ UXpin - http://www.uxpin.com/
▪ proto.io - http://www.proto.io/
▪ Native tools
▪ Justinmind - http://www.justinmind.com/
▪ Axure - http://www.axure.com/

30. Pop - https://popapp.in/
• Combining sketching and
interactivity on mobiles
• Take pictures of sketches, link
pictures together

31. Using Pop

32. Proto.io - http://www.proto.io/
▪ Web based mobile prototyping tool
▪ Features
▪ Prototype for multiple devices
▪ Gesture input, touch events, animations
▪ Share with collaborators
▪ Test on device

33. Proto.io - Interface

34. Android Design Preview
• Mirror portion of desktop to Android devices
• Works with Google Glass and other Android wearables
• Using any desktop application for prototyping
https://github.com/romannurik/AndroidDesignPreview

35. Interactive Wireframe Limitations
• Can’t deploy on Device
• No access to sensor data
• Camera, orientation sensor
• No multimedia playback
• Audio, video
• Simple transitions
• No conditional logic
• No networking

36. Advanced Prototyping Tools
• Existing applications
• Show examples
• AR Browser applications
• Wikitude, Layar, Aurasma, etc
• Rapid development platforms
• Processing – www.processing.org
• PhoneGap - http://phonegap.com/

37. Mobile AR Design Case Study

38. ITERATIVE DESIGN PROCESS
Design
(redesign)
Prototype
Test
Design
with
Users
(Note
problems)
Evaluate
(Fix
Issues)

39. MOBILE AUGMENTED REALITY FOR
SPATIAL NAVIGATION
Sharon Brosnan
0651869
Bachelor of Science in Digital Media Design

40. BUNRATTY FOLK PARK
Sharon Brosnan
0651869
Bachelor of Science in Digital Media Design

41. BUNRATTY FOLK PARK
• Irish visitor attraction run by Shannon Heritage
• 19th century life is recreated
• Buildings from the mid-west have been relocated
to the 26-land surrounding Bunratty Castle
• 30 buildings are set in a rural or village setting
there.

42. AUGMENTED REALITY
In Bunratty Folk Park:
• Allows the visitor to point a camera at an exhibit, the
device recognises it by it’s location and layers digital
information on to the display
• 3-dimensional virtual objects can be positioned with
real ones on display
• Leads to dynamic combination of a live camera view
and information

43. NAVIGATIONAL AID
Smartphone Platform
Most people carry mobile phones and are
comfortable with them
Ideal Augmented Reality Technology
• Global tracking tools
• Wireless communication capabilities
• Location based computing
• Large display for interaction

44. DESIGNING
FOR THEVISITOR

45. HUMAN CENTRED DESIGN
Goal of the Navigational Aid
• Easy to use, clear and understandable
• Useful to visitors
• Creating interaction between the visitor and the aid
through the user interface
Engage the visitor
• It is necessary to understand the visitor to Bunratty
• Identify visitor motives and goals while going through
the Folk Park.

46. HUMAN CENTRED DESIGN
Understanding the technology and Related Works
! Literature
! Similar Technologies
! Electronic Tours in Museum Settings
! Interactions design in Outdoor Museums
Understanding the User over time
! Observations
! Interviews

47. HUMAN CENTRED DESIGN
Findings
• Most visitors do not use the map
• Most visitors have mobile phones
• Visitors want more information
• View the Folk Park at their own pace
• Information should be straight to the point
• Large social interaction within groups

48. NEXT STEPS FROM RESEARCH
• DefineVisitors Goals
• Define Functionalities of the Aid
• Develop Personas – visitors who use the Aid
• Develop Scenarios – how the persona uses the
navigational aid in the Folk Park
• Draw up Storyboards on scenarios

49. FUNCTIONALITY
• View Options
• CameraView
• MapView
• ListView
• Sub-Options
• Places
• Events
• Restaurants
• AR Features
• Text Information
• 3D Objects
• 3D Tour Guide
• 3D Placement of Buildings

50. STORYBOARD

53. ITERATIVE DESIGN PROCESS

54. ITERATIVE DESIGN PROCESS
Prototyping and User Testing
• Low Fidelity Prototyping
• Sketches
• Paper Prototyping
• Post-It Prototyping
• PowerPoint Prototyping
• High Fidelity Prototyping
• Wikitude

55. INITIAL SKETCHES - Photoshop
Pros:
• Good for idea generation
• Cheap
• Concepts seem feasible
Cons:
• Not great feedback gained
• Photoshop not fast enough
for making changes

56. POST IT PROTOTYPING
First
Dra@
Camera
View
with
3D
Second
Dra@
Third
Dra@
•
SelecFon
highlighted
in
blue
•
Home
buHon
added
for
easy
navigaFon
to
main
menu

57. POWERPOINT PROTOTYPING
Benefits
• Used for User Testing
• Interactive
• Functionalities work
• Quick
• Easy arrangement of slides
User Testing
• Participants found
• 15 minute sessions screen captured
• ‘Talk Allowed’ technique used
• Notes taken
• Post-Interview

58. WIKITUDE
• Popular AR browser
• Mapping
• Point of Interest abilities
• Multiplatform
• Shows points of interest
• Markers can be selected in and
information pop-up appears

59. WIKITUDE
User Testing
• Application well received
• Understandable
• Participants playful with the technology

60. FINAL CONCEPT
DESIGN

61. FINAL DESIGN CONCEPT
Key Issues
• Fix issues found in previous sessions
• Design with guidelines in mind
• Appealing to the Mental Model
• Icon Design
• Aesthetic Design
• Colour/Font
• Buttons
• Look

62. VIDEO PROTOTYPE
" Flexible
tool
for
capturing
the
use
of
an
interface
" Elaborate
simulaFon
of
how
the
navigaFonal
aid
will
work
" Does
not
need
to
be
realisFc
in
every
detail
" Gives
a
good
idea
of
how
the
finished
system
will
work