What materials define an environment? When do you feel immersed in an environment? What is it like to switch between “physical,” “digital,” and “hybrid” environments? What are the transitions between environments?
agenda
8:30-9:30am First, lets look at your wireframes assignment from Tuesday.
https://environmentstrack.wordpress.com/people-2/
9:30-9:45am Design Patterns, Human Interface Guidelines, etc understanding form and context in apps, interfaces, and architecture.
9:50-10am Break
10:00am-11:45am Storyboarding workshop, and storyboarding homework with Tracy Potter and Lia Tamanini
1) Learn about storyboarding for Environments and UX,
2) make first iteration of storyboards. As homework, you will be going out to photograph your storyboard sites, and then make another version of the storyboard working on top of the pictures)
11:50am-12:20pm IFTTT workshop with Peter
Discussion We’ve discussed how to document online environments through wireframing. The next question: How do you know if what you’ve wireframed is a high-quality solution or something that creates new problems?
“Introducing Design Patterns”
https://environmentstrack.wordpress.com/a-pattern-language/
CFA –> SCS bridge reference “Gang of Four book on object-oriented design patterns”
CFA –> HCI bridge references for Interface, Website, Mobile, Interactive Exhibit, etc Design Patterns.
https://developer.yahoo.com/ypatterns/everything.html
These are just a small sample of books, websites, repositories. If you need to get up to speed quickly on known problems and known high quality solutions check out design patterns on the issue.
OK so now that you know about design patterns lets mention Apple’s Human Interface Guidelines, Android Interface Guidelines, and Microsoft Interface guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
https://developer.android.com/design/get-started/principles.html
https://en.wikipedia.org/wiki/Human_interface_guidelines
How do you know when you are in an environment? What is the threshold that defines entering into an environment? What is the threshold that defines exiting the environment?
Zip Crit: Triggering events with IFTTT.
d2d :: update blog –> tweet?
p2p :: presence locator –> lights on?
p2d :: motion sensor –> text?
Clearly, entering into an Environment might trigger events elsewhere. How might we capture such experiences in environments that bridge the digital and the physical? What kind of wireframes can capture hybrid experiences?
Being there. What does it mean to be mentally present but physically absent or vice versa? And how about physically and mentally present in an environment? How immersive is an environment? There is a whole journal that deals with such questions: http://www.mitpressjournals.org/loi/pres
What is the role of human experience in engaging with environments? What is an experience? reference: https://en.wikipedia.org/wiki/Art_as_Experience#Having_an_Experience
For example, how might music (or a soundscape) help to shape an environment? (e.g., exercising with a music player, white noise)
Scenario: Imagine that you’re visiting Verona, Italy with your lover. You’ve just seen Juliet’s balcony where Romeo allegedly called her (according to Shakespeare’s famous play Romeo and Juliet). It is a small courtyard. The noises of the narrow coblestone street are far away.
image credit: http://www.dailymail.co.uk
You’ve turned the corner and walked through an open air market in Piazza delle Erbe. The sounds and smells of the open air market feel very different from the courtyard. The air is warm. You clutch your bags concerned about pickpockets.
image credit: https://margieinitaly.wordpress.com/
image credit: https://armidatrentino.wordpress.com
You reach a fountain and decide to sit down on it to look at the market. Now you are sitting next to your love and the sound of fountain water completely blocks out the market that is just a few meters away. You look into the eyes of your sweetheart...
Another way of thinking of an experience in an environment is to think of the environment as a stage set to support experiences unfolding.
Making storyboards as a way to describe an experience in an environment.
Here are some resources for you to think through Story-boarding experiences in environments:
What is the story you want to tell? What happens between each frame? Practical storyboard tips from movie directors. How do interaction designers make storyboards that show interactions? Storyboards from Sketching User Experience
Story-boarding homework :: Bring in Storyboards of the physical components of the environment you are documenting. Make sure to note where and when the physical and digital components intersect. What materials are the environments shaped by? What are the thresholds? Upload your work to your process blog. | storyboarding activity & assignment
Additional References | Ben Hooker
Exodus, or the Voluntary Prisoners of Architecture, The Allotments, Collage, 1972. MoMA Collection © 2013 Rem Koolhaas
Exodus, or the Voluntary Prisoners of Architecture, The Reception Area, project, 1972. MoMA Collection © 2013 Rem Koolhaas
Superstudio, 1970. Image from: http://wineandbowties.com/art/design-by-superstudio/
Superstudio image credit: http://www.teladoiofirenze.it/arte-cultura/superstudiobackstage-l%E2%80%99architettura-incontra-l%E2%80%99arte/
Archigram,Instant City.
http://www.remixtheschoolhouse.com/sites/default/files/archigram%20instant%20city%201.jpg
http://www.archigram.net/projects_pages/instant_city_3.html
IFTTT experiments: Link your Blog posts to Phillips Hue.
login information for Smartthings & Phillips Hue
1) create an account for IFTTT
2) select applications to connect
3) if(this) then (that) –> e.g. if (rains tomorrow) then (email me)
IFTTT hands-on
if (i < 35) { // When 'i' is less than 35... stroke(0); //...set the color to black } //--the following is an example of IFTTT event using if statement--// if(rain tomorrow){ send "it will rain tomorrow" to a****@cmu.edu; }
4) Connect Phillips Hue to apps via IFTTT https://ifttt.com/hue
5) Link blogs to Phillips Hue using IFTTT
_additional experiment
6) Connect SmartThings to apps via IFTTT https://ifttt.com/smartthings
7) Make things responsive – demo