Environments: thresholds, enter, engage, exit

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”

Front Cover

https://environmentstrack.wordpress.com/a-pattern-language/

https://books.google.com/books?id=hwAHmktpk5IC&printsec=frontcover&dq=design+patterns+alexander&hl=en&sa=X&ved=0CB0Q6AEwAGoVChMI3PbwhtHaxwIVwlU-Ch0WJwUu#v=onepage&q&f=false

CFA –> SCS bridge reference “Gang of Four book on object-oriented design patterns”

Front Cover

https://books.google.com/books?id=6oHuKQe3TjQC&printsec=frontcover&dq=design+patterns&hl=en&sa=X&ved=0CC0Q6AEwAWoVChMI-ov_gNHaxwIVDDk-Ch2uNQIN#v=onepage&q=design%20patterns&f=false

CFA –> HCI bridge references for Interface, Website, Mobile, Interactive Exhibit, etc Design Patterns.

https://developer.yahoo.com/ypatterns/everything.html

Front Cover

https://books.google.com/books?id=eE2TxLtDsL8C&printsec=frontcover&dq=the+design+of+sites&hl=en&sa=X&ved=0CCcQ6AEwAGoVChMI__Tz24LKxwIVkICSCh3wSQZK#v=onepage&q=the%20design%20of%20sites&f=false

https://books.google.com/books/content?id=5gvOU9X0fu0C&printsec=frontcover&img=1&zoom=5&edge=curl&imgtk=AFLRE71FcJXdQk12ERrkIJiL6rYRIQM_9WvLMP2EgKx7Od26wHgKYXCmq1m70HtQkz0eb0BArIlQ_icBSYEawZr5Oc4bGfRsKyL7F6HKBV4Mqt9wNF3egDMG1WDZN8Vt4odRkJPf7KQK

https://books.google.com/books?id=5gvOU9X0fu0C&printsec=frontcover&dq=Designing+Interfaces&hl=en&sa=X&ved=0CCwQ6AEwAGoVChMIjP_Bt__IxwIVS1Y-Ch1J1wsY#v=onepage&q=Designing%20Interfaces&f=false

Front Cover

https://books.google.com/books?id=1qyJdxba6qgC&printsec=frontcover&dq=Designing+Interfaces&hl=en&sa=X&ved=0CDIQ6AEwAWoVChMIjP_Bt__IxwIVS1Y-Ch1J1wsY#v=onepage&q=Designing%20Interfaces&f=false

Front Cover

https://books.google.com/books?id=VSBoWNVPy00C&printsec=frontcover&dq=Designing+Interfaces&hl=en&sa=X&ved=0CEkQ6AEwBWoVChMIjP_Bt__IxwIVS1Y-Ch1J1wsY#v=onepage&q=Designing%20Interfaces&f=false

Front Cover

https://books.google.com/books?id=iTsZ5cg7gegC&printsec=frontcover&dq=designing+gestural+interfaces&hl=en&sa=X&ved=0CB4Q6AEwAGoVChMI1OvMqoLKxwIVEAOSCh3BAgsG#v=onepage&q=designing%20gestural%20interfaces&f=false

Front Cover

https://books.google.com/books?id=zd9QAAAAMAAJ&q=design+patterns+jan+borchers&dq=design+patterns+jan+borchers&hl=en&sa=X&ved=0CB4Q6AEwAGoVChMI2Lbws9LaxwIVgWk-Ch3MWQl6

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 result for romeo and juliet verona

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

Exodus5-800x561
Exodus, or the Voluntary Prisoners of Architecture, The Allotments, Collage, 1972. MoMA Collection © 2013 Rem Koolhaas

Exodus2-800x588_o
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/

https://i0.wp.com/www.remixtheschoolhouse.com/sites/default/files/archigram%20instant%20city%201.jpg

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

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s