AHO Interactive products 2015

An undergraduate interaction design course at the Oslo School of Architecture and Design.

[odaheier-deactivated20170714]

Wasting time.

[ahointeractiveproducts2015]

Oda’s compositions

[helenemeeyun-blog]

Tanken er at den skal aktiveres ved at man klemmer på den ene flaten og deaktiveres i det man slipper taket. Vibrasjons pulseringen vil da kun aktiveres når man selv ønsker det.  

[totoxdinteraction]

Me and @instatrym testing out the latest prototype of my project.

[ahointeractiveproducts2015]

Tord’s hugging-machine

[odaheier-deactivated20170714]

Tues 24 nov 15

“Just building something” is the motto. I just tested out different concepts with my servo today

[ahointeractiveproducts2015]

Glimpses of Oda’s process of inventing an interactive product

[ahointeractiveproducts2015]

Final project calendar

This is the calendar for the rest of the semester.

9.11: Going over the brief again. Having a look at a box full of stuff.

10.11: 10:00 Idea generation and idea processes. We use forced association as a method to generate lots of ideas based on combinations of sensors and actuators. We later reflect on ideas to figure out what their core bits are, and work towards turning initial ideas into directions for concepts.

11.11: Storyboard a set of ideas and figure out how to make fast non-technical mock-ups. Using paper, cardboard and glue. Work on your own and document on the blog.

12.11: 10:00 Histories and theories of interaction design lecture.

12.11: 15:00 First batch of decisions: Where does the process go? What technologies does the product potentially use (one in/one out). Whoever makes interesting claims for materials first gets the components they want. When we run out of specific components, we run out. Mentoring all day.

14.11-16.11: London / Oslo. Use your sketchbooks well. Develop ideas through drawing and thinking.

17.11: PhD defence of Anthony Rowe. Trial lecture at 10:00: https://aho.no/no/events/view/1287/2

18.11: Mentoring from 13:00. Get the first mock-up/prototype done today.

19.11: 10:00 Histories and theories of interaction design lecture.

20.11: 13:00: Work in progress presentations and online documentation.

23.11 - 27.11: Book mentoring sessions with Einar throughout the week.

26.11: 10:00 Histories and theories of interaction design lecture.

27.11: Mid project presentations. Your prototypes should be near their final iteration by this date.

30.11-4.12: Book mentoring sessions with Einar throughout the week.

9.12: Final presentations

10.12: Collaboratively set up exhibition in the studio.

11.12: Demonstrations and exhibition at the opening of AHO WORKS (we will only participate on the opening day)

11-16.12: AHO WORKS

[ahointeractiveproducts2015]

Inventing interactive products

New technologies, or new combinations of technologies, offer new possibilities for interaction design. This brief is to re-imagine these technological possibilities and invent new interactive products.

For your final brief this year is to invent an interactive product using the skills and methods you have acquired this semester - create methods, prototyping techniques, code, sketching behaviour over time, communication, electronics etc. The focus is on interactive products that can only exist in the intersection of between the physical and the digital. You will be using electronics and code alongside physical form and materials to design interesting interactions. You can make any kind of product. Your products doesn’t have to be useful or spectacular, but could also be about refining delightful or beautiful interactions. Work across aesthetics, functionality, expression and communication.

On of the major challenges with this brief is that it is very open. This means that you have to find ways of being structured in your creative process. I will be helping you with this through tutorials and mentoring about process and methods. It is very important that you are present in the studio to benefit from the teaching and from observing each other’s progress.

Constraints

This brief is thematically very open, but you will be working within the following constraints:

The product has to belong in a context. You have to make a product that somehow relates to human activities and environments.

Your starting-point is to use one kind of input and one kind of output. By limiting your idea process to only one sensor and one actuator, you limit the scope of your product. You might also find that this sharpens your concepts.

Your product has to be communicated.

Your product has to be experienced.

You develop your product iteratively through prototyping the experience of interacting with it. The product doesn’t have to work technically all the way back, but it has to make sense as an interaction.

Remember what we have discussed about the relationships between interaction, activities and experience. Interaction design happens in contexts as a part of, or alongside our activities and experiences.

Deliverables

This is an individual task and these are the deliverables:

An experience prototype.

A demo and presentation.

An exhibition.

An online presentation of the product that communicates your project in detail towards a broad online audience.

This project is both about the result and the process. You all have to document you process online and book mentoring sessions with Einar.

[ahointeractiveproducts2015]

Material exploration

This brief is about looking at technologies as materials for interaction design. Interaction design is not about applying high-technology solutions to simple issues, we don’t need to sense everything to make interaction happen. It is often about small interventions using simple technology in appropriate ways. In order to do interaction design we must build an understanding of the opportunities and constraints of our technical materials, much like product designers have an understanding of wood, metal and plastics.

The things below have been chosen as examples of relatively simple and common technologies used to build interfaces. Your task is to present, in 10 minutes, two things:

How does it work?

What kind of interaction does it allow for?

For example, if I asked you how a computer mouse worked, you would come back and talk about optical sensing of movement, how that optical sensor actually works, and about how it produces data about movement in two dimensions, and two different states of buttons.

Research methods

In this research, Google is your best friend! Search, explore, refine, search is a routine you’ll need to do to find these things out. You should be able to find an engineer, designer or hacker who has explored and documented these things.

You may find information on howstuffworks.com, ifixit.com, adafruit.com and sparkfun.com. Also try searching on ebay.com and alibaba.com. Look for and present images, descriptions, diagrams and movies. Don’t just read Wikipedia aloud, we can all find that information for ourselves, look at least one level deeper.

Deliverables:

Your deliverables for this brief is:

An A1 poster that shows us how the technology your given works. Should focus on creating diagrams, drawings and visual explanations.

A detailed website-post that documents your explorations.

Dates:

Wednesday (28.11). 

13:00 Presentation of posters

Thursday (29.11):

10:00 Lecture on histories and theories of interaction design

13:00 Next brief: Electronics

Assigned electronics for exploration:

Vilde - Photocell. Look for resistance, photo resistor, photoconductive cell.

Raoul - Heat element. Look for heat pad, warm-up profile,

Henriette - Microphone. Look for amplification, Analog-to-Digital converter.

Marie - Speaker element. Look for impedance, watts, amplifier.

Truc - Variable resistor. Look for potentiometer, slider.

Oda - Infrared proximity sensor. Look for infrared light, range, accuracy.

Torgeir - Solenoid. Look for linear motion, throw, force.

Nora - Button. Look for ‘the history of the button’, travel, pressure

Jonas - Flex sensor. Look for resistance, range, bend.

Andrea - Servo. Look for degrees, force, angles, robotics.

Stian - Pressure sensor. Look for piezoresistive force, force sensitive resistor.

Rakel - RGB LED. Look for inputs, lumens, controller.

Thea - Reed switch. Look for magnetic field, proximity.

Julie - Vibration motor. Look for haptics, pager-motor, dual-shock.

Anne - EL-wire. Look for electroluminescent, inverters.

Suzanne - Piezo element. Look for contact microphone, knock/vibration sensor.

Tord - Joystick. Look for axis, arcade-games, industrial applications.

Trym - Microcontroller. Look for Arduino, Atmel, inputs/outputs.

Tale - Accelerometer. Look for sensor, sensitivity, axis

Martin - Electric paint. Look for BARE Conductive

Morten - Servo. Look for rotation, angles, torque.

Helene F. - Piezo Vibration Sensor. Look for mass, vibration, sensitivity.

Helene S. - Conductive fabric. Look fir conductivity, e-textiles, knit/thread.

Frida - Membrane Potentiometer. Look for variable potentiometer, touch slider, resolution.

[ahointeractiveproducts2015]

Electronics shopping

Next week we will start to work towards the final major brief of the semester. This brief will be about inventing interactive products. We will be using micro-controllers and electronics as an important part of this process.

Today I showed you the online shop/resource-centre Sparkfun.com and the brilliant platform/tool/shop Arduino.cc. These are great online resources, but ordering from them could mean import-tax and mva-issues.

What you need is an Arduino kit of some sort. We recommend the Arduino Starter Kit. You can get this through a number of different shops both in Oslo and online. Including:

- RS Components. RS has a norwegian distributer so you won’t have to pay any import-mva.

- Kjell & Company. This DIY electronics shop have just opened in Oslo. And makes everything much easier for us all. They have everything you need for the rest of the semester. They have kits in stock on Storo. But go soon and make sure you have the kits before next Friday.

- Digital Impuls. They have also just started selling Arduino in their shops in Oslo.

Other nice kits from abroad are these two from Sparkfun: Sparkfun Inventor Kit  and the cheaper Starter Kit for RedBoard. Currency rates means that it is not a good deal to order from the USA at the moment.

You will also need to by tools, a simple soldering iron, some cables etc. These might be things that you can share among each other. We will look at tools etc next Thursday.

Have a good look at the different kits and shops and familiarise yourself with what the parts are before you order.

If you have any questions, please email me (Einar).

[ahointeractiveproducts2015]

Some prototyping tools

There’s a plethora of various mobile prototyping tools available, here’s a small selection, each with their pros and cons, and useful in different stages of the process.

Pop Good for making quick paper-based clickable prototypes.

Marvel Export screens from Photoshop, Sketch, Illustrator etc and make them clickable.

Proto IO A tools that allows you to build functional interfaces based on their modular preset. Similar to Webflow, but for mobile applications.

Webflow You know.

[ahointeractiveproducts2015]

Brief 9 - Urban Delighters

The whine of a tram, glances of strangers, the warm subway wind, litter and dogs, the dull beeps of an ATM machine, strollers and cars, the morning sun on wet  pavements, the blue glow of a smartphone screen. The city is a feast of sights, sounds and interactions. Over the last decade digital technology have become another layer in the already dense and complex context of the city, and urban life have become an important new site for interaction design. The city have become interwoven with networked technologies, and every more sophisticated mobil phones are shaping how we understand and experience our urban environments.

Task

_“we often use a term we learnt from someone in the Hotel  industry - “Delighters” e.g. the rubber ducky that he might put in  a guest’s room on the 3rd day of their stay or the Beach Ball he  might put on their bed if it was forecast to sunny. We’re always  trying to create ‘Delighters’ that can punctuate the experience of using Dopplr with joy” _– Matt Jones

Over the last weeks we have introduced you to the basic tools for designing with screens and the web. Over the next weeks you will be working on a creative task where you are going to apply these tools to design and communicate a single-purpose application for mobile phones. The theme for the application is the city of Oslo, meaning it’s functionality, content and context of use is related to Oslo and it’s inhabitants or visitors. The application should have just one core function, and it should do that one thing really well.  Your task is to create an application that is delightful, that can punctuate the urban experience with joy (playful, useful, clever, interesting), intended to make you smile or think, make you experience or see your environment in a new way.

Contexts

When inventing an app you should think about what a mobile phone is, what it can do technically and what it can do socially and culturally. A modern smartphone have incredible technical possibilities; it is connected to the web (and thereby other services), it has sensors, it has a high resolution screen and it is a powerful computer. But a smartphone also has possibilities because it is a part of everyday life. It is part of how we relate to culture, how we discover and produce media and how we take part in social contexts.

You also need to think about the city and Oslo specifically. The urban environment is full of activities and events, people and cars, places and buildings. It has a rhythm it to it; days, weeks, months, seasons. What themes, contexts, situations and locations are potent and interesting? What information is available elsewhere that you can make use of?

Process

Build on the process and methods you did in the previous projects. First you need to start investigating ideas for your project and develop a basic concept that will be refined through the process.  Methods such as observing people and situations, in-context sketching and ideation workshops are useful here. You need to quickly decide on a concept and move onto thinking about and defining users, use situations, user flows and further to sketching and prototyping both by hand / paper and digitally. Iterate. Iterate! We want to see bunches of sketches, variations and testing. The emphasis of this module is design through making and we expect a hands-on approach to all aspects of your process.  Overall we expect you to progress from ideas, through research, concept and prototyping quickly and to iterate.  We hope to see you working efficiently and evidence and prototype early so that you get the chance to evaluate and  re-design.

You will present the your product / service / app in the form of a website. This should convey show how it the application works and what is great about it. Why is the app useful, fun, delightful or interesting? The site needs to contain one or more films that present and communicate your app. The website and film(s) should highlight the core functionality and concept of the app and why others should care and eventually buy or download your app. So, you have to make three things, an app,  video(s) and a website. That means you will have to think about these thing interconnected and related to each other. You work in teams of four.

Deliverables

There are three deliverables for this brief:

An experience prototype of an app. This means that you have to design interactions that can be experienced. You do not have to make a functional app or make a technically sophisticated prototype, most importantly it must clearly and convincingly convey how it may be used and experienced. There are several prototyping tools available for this.

One or more short films that presents the app’s functionality and use. Think about what you learnt from the filmmaking brief and apply this to the app. The video(s) should both present and explain the core functionality of the application in an engaging and delightful way. You should also keep the video in mind when you design and prototype the app itself. What are the interactions that you want to show in the video, and how do you communicate these well? Please: no intricate stories or acting and no music (use contextual sound). Focus on communicating what the application does and why that’s interesting / useful / fun.

Make a functional single page website that presents the app and service. This should be focused around the video(s).

You should plan your process early and delegate tasks within the team. Try to map out all that needs to be done, and figure out how long you have on each part of the project. Part of the challenge of this project is to put together the skills and approaches you have worked on so far in the semester and run a design process using these.

Reading

Dan Hill - Street As Platform

Slides

[ahointeractiveproducts2015]

Brief 8 - Sorting Vegetables

One of the most common and basic tasks we do when designing interactive systems is to structure and present information in various ways, to make it understandable, accessible and readable. The object of information in this task is vegetables.

In this task you will work from the information outward. You will explore the properties of vegetables in order to generate, design and develop a unique, relevant and interesting web product.  You will pay close attention to the users and uses of your product, and  explore various ways of structuring, organising, labelling and displaying information in response to their needs. Through iterations of sketching and prototyping you will design engaging, accessible and dazzling web products that have vegetables at its core.

Your task for the next week is to design an experience prototype of only the front page of a website that deals with vegetables. You decide what the product / service is.

Work in groups of two

Process

Step 1. Material exploration & concept development

Start with a material exploration workshop.

Get to together in larger groups. Say 2-3 groups.

Use post-its and/or whiteboards.

Call out and list as many properties that fruits and vegetables can have.

Also think about relevant relational information (country of origin, location, recipes, etc).

These should be in the 100s of properties.

Now, start sorting, grouping and labelling the attributes you have come up with.

What are the common themes that arise, what is interesting information, what is relevant information at what time?

Based on this, brainstorm ideas for products based in this material. (E.g. what would be a product where country is the most important property?)

Give the products names and urls. Roughly sketch out some of the more potent ones.

What is its primary offering? Why does it exist? Who owns or runs it?

By the end of the day you must have decided on a product to work with.

Document the workshop with photos.

Step 2. Research and users

When you have decided on a product/service you need to start thinking about your users.

Who are the primary users of your product? Why do they use it and in what kind of context?

Develop 2-3 key personas for your product. Who are they? What goals and needs to they have? When, why, where and how do they use your product?

Ideally you will have talked to someone external about your product to inform your personas.

These personas will guide how you structure and present the content in your product.

Resources

http://www.uxbooth.com/articles/creating-personas/

Step 3. Information architecture

Now there are several relevant methods for driving your process further. These include drawing diagrams and hierarchies, card sorting, flowcharts, paper prototypes, ui sketches, wireframing, the list goes on. You need to pick the methods that are most pertinent and relevant for your product and process. Be creative about your use of methods, nothing is sacred and you need to do what drives your process forward.

Ask yourself: How is the information presented back to the user? How do you navigate the

information? What are the actions that the users should be able to perform in order to reach their goals? Think about grouping, labelling, visual hierarchies, navigation, symbols, imagery and how all of this is presented in the browser.  

LATCH http://thevisualcommunicationguy.com/2013/07/20/the-five-and-only-five-ways-to-orgaize-information/

List of User experience design methods http://uxdesign.cc/ux-methods-deliverables/

Step 3. Papers sketches

To further explore and discuss your concept and start materialising your product you will need to begin sketching.

Paper sketching is useful for quickly investigating different layouts, structures, navigation and the overall visual approach of your product.

Use grid paper, pens with different thicknesses, experiement with colour if needed.

Work in different scales from details to overall structure.

Photograph your sketches to document them.

Discuss your sketches with people outside your group!

Resources

http://www.smashingmagazine.com/2011/12/the-messy-art-of-ux-sketching/

Step 4. Digital mockups

Based on your paper sketches start mocking up your UIs digitally.

Use your software of choice Sketch, Illustrator or Photoshop.

Use existing UI frameworks at will.

Use some sort of grid system (12 column system is standard).

Remember to preview in a browser every now and then.

And again: Discuss your sketches with people outside your group!

Resources

Apple Keynote prototyping: https://developer.apple.com/videos/wwdc/2014/#223

Wireframing tool https://wireframe.cc/

Invision http://www.invisionapp.com/

Delivery on Mon. 28/9 1300 in G4-G5

Summary and insights of concept development.

Summary and insights from research phase.

2-3 personas.

Summary and insights from IA work (card sorting, structuring, site maps, flow charts etc).

Highlights and insights from sketching phase.

Hi-res digital mockup of front page of your product.

Delivery on Mon. 5/10 1300 in G4-G5

Working clickable prototype in Webflow with sub-pages if needed.

Summary and insight from your process, what did you learn from the first prototype and how did you solve that in the new version?

Bonus points for a responsive site.

[rkoreman-blog]

[juliesandvoll-blog1]

Hack things better with Sugru

[trucdesigns]

The result of my sugru video.

[ahointeractiveproducts2015]

Brief 7: Sugru to the rescue

Take your pack of Sugru and use it to fix a problem or hack something better. (See www.sugru.com for inspiration).

Break your film into two: !. Identify a problem 2. Solve it with Sugru

Make use of as little text as possible, show us the process…

Do not smack a song on top of your film, use real sound and sound effects to enhance the story.

Video resources: www.archive.org (watch this one: https://archive.org/details/DuckandC1951

Sound resources: http://freesound.org http://ccmixter.org https://vimeo.com/musicstore

Duration: max 1 min

Upload to vimeo, share to tumblr

Due monday 21.09, 09.30, grupperom 3

[marieinteractiondesign-blog]

Task 4: short film

Product/service: photography

Time given: 1 week

Teacher: Hans Gerhard Meier

[ahointeractiveproducts2015]

Brief 6: Favourite product…

Show us by using visuals and moving images what your favorite product is. (Minimal use of text and voice)

Delivery Vimeo, 30-40 sec

• Storyboarding, upload to tumblr • Filming, your choice (smartphone/SLR) • Editing, Adobe Premiere