prototyping physical & immersive environments for ux designers
TRANSCRIPT
PrototyPing Physical & immersive Environmentsfor UX Designerstools for Making Lo-Fi Prototypes to Stimulate the Design ProcessSeattle Prototyping for Designers Meetup | 10.19.2015 | Susan oldham
1. About me2. Why lo-fi for 3D?3. Physical & Immersive environments
a. Descriptionsb. Design challenges
4. Prototyping Toolsa. Modelsb. Projectionsc. Sensorsd. Tracking engagement
5. Virtual Worldsa. Second Life demo with Valerie Hill
6. Questions & contributions
agenda
about me
UX & Visual Designer
University of WashingtonMS Human Centered Design & Engineering, 2015
Capstone : UX in Public SpacesBS informatics, Human Computer interaction, 2012
Certificate of Virtual Worlds, 2009
University of CincinnatiDAAP, graphic/industrial Design, 1980s
education
Apparel DesignerSportswear : Heet, Unionbay Sportswear
Activewear : Jantzen, Burton Snowboard, nK Sport
Handknits : Vogue Knitting, Knitter’s, Creative Knits
Visual DesignerRetail & Merchandising : t-Mobile, Starbucks, Macys
Packaging : Starbucks, Costco, Econobox, girvin
Architectural : J. Miller & Associates; Kr Studios, t-Mobile
UX, Web & Information Design : Costco, Engine interactive, City of redmond, Win Home inspection, UW. + others
experience
PrototyPEA representation that can be tested in some wayproto- : combining form meaning “first,” “foremost,” “earliest form of,” used in the formation of compound words (protomartyr; protoplasm).
MoCKUPA model for presentation & communicationmock : to mimic, imitate, or counterfeit; an imitation; counterfeit; fake; feigned; not real.
my definitions
“Prototype is an action—something we do in order to solve a particular business, design, or technical problem.”—Anthony Franco
MoCKtyPE?Proto-UP?
1. External memory reduces cognitive load [Simon & newell, 1972]
2. Sketching/doodling aids concentration & recall [Andrade, 2009]
3. Sketching improves ability to restructure ideas [Verstijnen, 1998]
4. Serendipity and happy accidents [Fish & Stephen, 1990]
5. Sketching facilitates team collaboration [van der Lugt, 2004]
6. Better design outcomes [yang, 2009]
7. Better communication with clients, stakeholders & users [Buxton, 2007]
“Sketches are social things”—Bill Buxton
making, sketching & the design brain
From Smashing Magazine article by Laura Busche
SmartWheelsCommunication Kit
SmartWheels Kit installed on chair Includes Sensors,
Microcontroller and Wi-Fi
SmartWheels App
OpenStreetMaps
Secure User Database
BluetoothHeadset
User
physical design patternsPhysical technology that users can interact with in an interior or exterior physical space, either in an overt or ubiquitous manner
• Engagement is key to interaction in public or private spaces
• Climate & traffic patterns are factors in designing physical interfaces• How people move within
the space will inform design solutions
• Conditions can vary inside or outside: consider heat, cold, wind, rain, light & sound
iot patternsThe Internet of Things is a network of physical objects embedded with electronics, software, sensors and network connectivity, which enables these objects to collect and exchange data
• Look and feel is of utmost importance, product must fit into environment and give pleasure to user because of the intimacy of everyday devices
• Small size of components requires : • Power efficiency• Heat dispersal• Elegant interface
immersive design patterns | Ar, Mr
Augmented reality is the overlay of information onto a physical environmentMixed reality allows generated information to merge with physical
• Immersion is moderate, sense of the physical must be strong
• Distraction is a concern : • Minimal information for job at hand• Effortless way to turn on/off• Light source is critical• Safety protocols
Carrier 12:34 AM 100%
Rate the enteRtainmentRate the enteRtainment
Make your Mark on a Seattle Park
Put youR name on the wall
Donate to a BuskeR oR a PaRk
You’re in Westlake Park, Downtown Seattle
watching band Blue Trees Wailiers
on April 19, 2015
Give voice to youR iDea
Carrier 12:34 AM 100%
Do you want to see this band in the park again?
You’re in Westlake Park, Downtown Seattle
watching band Blue Trees Wailiers
on April 19, 2015
nopenot again
yes, loved it
suBmitRate!
Carrier 12:34 AM 100%
Sign your name and hometown.
You’re in Westlake Park, Downtown Seattle
on April 19, 2015
name
Place
suBmit
Manuel
Salt Lake City
Carrier 12:34 AM 100%
How would you change the world? Please record your thoughts for Seattle.
You’re in Westlake Park, Downtown Seattle
60 sec
suBmitlisten
Carrier 12:34 AM 100%
Sunday,
Today Tomorrow all
Seattle Parks & Rec Calendar
Pac NW Skateboard TournamentSetup Main Stage
Buskers Play Noon to 2pm
10
Noon
Pac NW Skateboard TournamentEvents begin
Sonic Kittens ConcertPac NW Skateboard Tournament
1
5
Carrier 12:34 AM 100%
June 30th
Westlake Park
AUgMenteD event CAlenDAr for Westlake Park with projected info. real-time data from Seattle Park & recreation online calendar.
rAte tHe PArK1. SCAle 1 qUeStIOn2. rAte It
SIgn tHe PArK1. tyPe/SPeAK nAMe2. CHOOSe PlACe
MArK tHe PArK1. CHOOSe A WAy tO
IMPACt tHe PArK
leArn tHe PArK SHAre yOUr vISIOn1. SPeAK2. SHAre
immersive design patterns | Vr
Virtual reality is a total immersion into another environment
• Freedom to break from physical norms, defy conventions
• Psychology of being immersed in unfamiliar situation : • Physical cues to combat dizziness• Empathy for user’s experience
3d models | Physical, iot, Ar, Mr
• 3d representations of products that can be tested• Design exploration—test for shape, size, weight, viability, etc• Team communication & collaboration• Work with stakeholders to refine before time-consuming user tests• User testing can be amazing with a well-executed 3D model• Triangulation of methods = deeper understanding
PLAy-DoH ILLUSTRAToR EXTRUSIon
SEConD LIFE
PAPER
models
SkETCHIng USER EXPERIEnCESQUEEnSLAnD UnIVERSITy LIbRARy
InTERnATIonAL USER EXPERIEnCE CoURSE, UW
projections | Ar, Mr, iot
• Combine an old-fashioned transparency overhead projector with a regular projector to emulate augmented & mixed reality apps• Layer transparencies of sketches, diagrams, info overlays into room• Add objects for shadows, outlines• Team can make notes & sketch on projected prototypes• Conduct usability testing, users can add sketches and comments
on transparencies
• Multiple projectors can emulate room immersion• Standard projectors mounted on ceiling can be angled
down on surfaces• Used overheads are inexpensive, $20-50 each on craigslist
projections
projections | Physical, Ar, Mr, iot
• Wizard of oz interactivity for users by projecting onto wall• Similar to paper prototype, but projected on wall or screen while
researcher controls action from computer
• Project concept onto body for wearable and mobile concepts• Projector can be angled toward body area • Can be combined with light activated stickers or glow-in-dark paint
• Reverse images on smartphone to reflect on glass or clear plastic simulate augmented reality information overlay
SkETCHIng USER EXPERIEnCES
projections
tracking engagement | Physical, Ar, Mr, iot
• glow sticks and bracelets body for wearable and mobile concepts• Track users more easily, differentiate between users on camera
• UV beads and UV flashlight are physical breadcrumbs
• Light, heat or touch sensitive paper that changes state, i.e. color
Find these science tools and more at www.teachersource.com.
TEACHERSoURCE.CoM
sensors | Ar, Mr, iot, Physical
• ibeacons• Pros : Easy to install and use, about $100 for 3; waterproof• Cons : Smartphones need to be bluetooth enabled to track
• Dash button• Pros : Can track users button push with script; inexpensive, $5 each• Cons : Users have to press button, can disrupt flow• Script created by Edward benson, medium.com/@edwardbenson
• TILE squares, or other trackers with mobile apps
AMAzon DASH bUTTon ESTIMoTES IbEACon DEV kIT TILE
microcontrollers | Ar, Mr, iot, Physical
• Arduino• Pros : customizable and scriptable • Cons : learning curve; bulky appearance; one script
• Raspberry Pi• Pros : High-level computing possible• Cons : learning curve, bulky
• Sensors for prototyping physical spaces• Proximity : track user patterns in local area• Accelerometer or gPS : track broad user patterns
evaluate & refin
e
lear
n &
a
nalyze envision &
design
PER
SONAS SCENARIOS
SK
ETCHING REQUIR
EMEN
TS
The roof that protects a home is one of the most expensive house systems. Customer avatars can safely learn how the inspector looks for potential issues.
The thorough home inspector is aware that the crawl space under the porch or house may have clues to the home’s condition. Customers can join him in this tight space.
It’s important that an inspector not harm the seller’s home in any way, so a careful inspector comes prepared with coveralls and shoe protection, and parks offsite.
The home inspector looks at the entire site as a system. Water is the biggest enemy to a home and a good inspector starts by assessing all possible exterior entry points.
Jenna & Josh | Avatars•Firsttimehomebuyers•Nurse&MarketingManager•Newlyweds,nochildren•Avidgamers
Joanna | Avatar•RealEstateAgent,5yrs•Marriedwithonechild•Createsvirtualhometours•LearningPhotoshop
Jim | Avatar•Movingfromapttocondo•HighSchoolteacher•Divorced,2grownsons•Enjoysgames,motorcycles
Jason | Avatar•RealEstateAgent,10yrs•Single,ownscondo•Lookingfornewsocial
marketingtechniques
AWINHomeInspectioninspector’smainroleistocommunicatewithhomebuyersabouttheirnewhome,andhowitssystemswork.Accurateinformationisanimportantfactorinthesuccessoftheinspection.
Client ProblemProspective homebuyers are often confused about the home inspection process, and problems found in the home can seem overwhelming. The client, WIN Home Inspection, wanted to educate and reassure homebuyers about the process.
User Centered Design• Conducted qualitative interviews with stakeholders• Defined user personas to understand user needs• Designed scenarios based on use case analysis• Generated sketches & prototype• Refined business & design requirements
Solution = ExperienceInteractiveinformationsysteminSecondLife®:Second Life® is an immersive virtual world that’s free and accessible. WIN can effectively educate & talk to homebuyers in a simulated environment. Customers can learn about home systems and experience inspections from the inspector’s point-of-view.
Feature goals• Interactive views of home systems including roof,
crawlspace, plumbing, furnace, windows, etc.• Educational displays and videos• Metric-gathering scripts to learn about the virtual
home visitors and prospective customers• Games and prizes to encourage repeat visits
Social networking goals• 3D Twitter feed to permit external communication• Staging in-world events to engage visitors
• Real-time open house to network with agents • Annual WIN Conference conducted virtually
Evaluation • User testing and surveys • Virtual world heuristic guidelines• Analysis of data gathered on site with scripts
THESEEMOREVIRTUALHOUSEHomeInspectionasImmersiveUserExperience
ThePersonasTheDesignProcess
InspectorIdentity
Thepersonasexercisewasparticularlyimportantforavirtualworldprojectwheretrustcanbeanissue.It’scriticaltogainthetrustofpotentialusersviagooddesign,andtohelptheclientassesshowSecondLifeuserstranslatetorealcustomers.
Second Life demo
Second Life is a social virtual world, free to users unless they want to purchase space for building or services and goods.
Second Life | Ar, Mr, Vr, iot, Physical
Virtual world features of Second life• Multi-modal : many ways to collaborate with others.
• own it : keep what you create, sell or barter services.
• Free : unless users want to purchase space for building or services and events.
• Unique : design and create elaborate worlds & individual identities.
• Linden currency : users can sell licenses to what they create.
• Changes in terms of service : has made selling in SL less attractive.
• Similar to World of Warcraft : but without the gaming aspect.
prototyping in SL | Ar, Mr, Vr, iot, Physicalprototyping in SL | Ar, Mr, Vr, iot, Physical
SL is a valuable rapid prototyping area for 3d tech.• Upload images and textures to emulate your environment..
• you can buy assets very cheaply, no need to build everything.
• Test scenarios and use cases.
• Users & stakeholders are aware that it’s a rough prototype.
• Create scripts (similar to ActionScript) to :
• Run parts of simulation• greet your users• Emulate interactions
• Easy to create different personas
Valerie Hill, MLS, PhD
information Literacy Consultant & MachinimatorValerie Hill is a professional librarian, adjunct instructor of library science, and information literacy consultant. Dr. Hill received her MLS in Library and Information Science from Texas Woman’s University in 2007 and a PhD in Library and Information Science in 2012.
She is currently an information literacy consultant and machinimator with a research focus on the intersection of information literacy and libraries with virtual worlds and digital culture.
As president of Community Virtual Library, Val invites you to visit this virtual space to learn more about how to get started in Second Life.
http://maps.secondlife.com/secondlife/bradley%20University/57/114/27
@valibrarian blog: vhill.edublogs.org
pros & cons
ConS1. Cartoony appearance
2. Learning curve for new users who need time to learn how to navigate and communicate
3. Substantial cost for personal space
4. Public access allows “griefers” to harass users
5. Lag time for many users with slower computers or connections
6. Limited exchange of prims and property
7. Users can no longer make a lot of money in SL, so many vendors and users have moved on
PRoS1. Free entry, can invite friends
2. Collaboration among remote team members is easy because of multiple modes of communication
3. Excellent for large group events like graduations & conferences
4. Users can emulate many different real world and virtual reality scenarios
5. Users can sell and share what they create
6. Practice for Project Sansar, the new VR platform from Linden Labs
7. Linden Labs is a reputable company
alternative worlds
openSim• open source and compatible with Second Life,
can exchange some items among worlds• Users have more control• Users have to create more infrastructure
http://opensimulator.org
inWorldzhttp://inworldz.com
Kitely • built in openSim
http://www.kitely.com
free spaces to build in SL
Edtech island Sandbox & Campus http://maps.secondlife.com/secondlife/Edtech/148/88/24
techLab oldest and Largest Sandbox http://maps.secondlife.com/secondlife/techinvestLab/125/193/26
College of north West London Sandbox http://maps.secondlife.com/secondlife/CnWL/48/175/26
Check out new sandbox locations at http://secondlife.com/destinations/howto/sandbox
booksCreating your World: the official guide to Advanced Content Creation for Second Life by Aimee Weber, Kimberly Rufer-Bach & Richard Platel
Prototyping and Modelmaking for Product Design by Bjarki Hallgrimsson
Scripting your World: the official guide to Second Life Scripting Paperback by Dana Moore, Michael Thome & Dr. Karen Haigh
Sketching for User Experiences by Bill Buxton
Sketching for User Experiences Workbook by Saul Greenberg & Bill Buxton
linksScience project supplies: www.teachersource.comDash button sniffer hack: https://medium.com/@edwardbenson/how-i-hacked-amazon-s-5-wifi-button-to-track-baby-data-794214b0bdd8 Dash button: www.amazon.com/dashtiLE finder: www.thetileapp.com
references & links
Please share your own tips for prototyping
emerging technologies.
thanks!
question & contribution time