‘UX Hacking / Banana Pianos’ deck from Digital Shoreditch 2105

Editor's Notes

• #2: Say HELLO! Welcome everyone and Thank them for coming. Have they had a good day? Nearly done! This slide pretty much sums up The Internet for me. I don’t even like cats, but I do have the Tshirt. What is a CT? How did I get to be one?
• #3: A few years ago, I started to move away from Display Media and screen-based experiences… SESSION:Breaking away from Postit notes, and Browser-based UX, we'll look at disrupting the Digital definition of UX and move it into the Physical; with real world applications, and tactile interactions. Expect examples of bad UX; for instance, taps that need explanation (a pet hate), leading into Physical UX and how agencies and individuals are manipulating these experiences to create their own. We’ll look at some output generated by Hack events, as well as how Capactive Touch and Physical Computing can change environment and perceptions. There might even be time for some Audience Participation.
• #4: What is UX? Well a Google Search will define its as: noun short for user experience. "the UX is absolutely seamless and users prefer that” …but as we probably all know, day-to-day, it translates to a whole heap of Post It notes.
• #5: …to produce: Scamps Diagrams Wireframes
• #6: That will lead us to smooth, and intuitive user flow….
• #7: To Develop this… This is actually Microsoft’s website from about 4 years ago, and I think was one of the first BIG company sites to be Responsive and deliver a cohesive user journey across devices. …but you know what? UX is everywhere. So without furher ado… http://responsivedesign.is/examples/retail/microsoft
• #8: In the Real World, it’s not just screens, it’s objects. In the Real World, I get driven nuts when simple things become overly complicated.
• #9: When UX goes BAD! I just want to quickly touch on an example of when UX hoes bad in the Real World…
• #10: TAPS! It should be simple enough. No? So passionate am I about good UX that a few years ago, I began loitering around public toilets… Here are my findings … It's a tap. If you need massive instructions, you've cocked it up! I’m all for experimentation and a non-linear user journey, but not when I’m trying to wash my hands. And as for this…
• #11: Instructions? My favourite line here is, if the water isn’t running, ask a member of staff to change the batteries! Mark Boulton did a good UX talk a few years ago at Reason To Be Appy – and I wish to God I still had the photo from the bathroom of that venue, ‘cos I stood there for a good minute thinking, “I’m not entirely stupid, but how the fk do I wash my hands?!” We’ve all done it. We stand there. Staring. Thinking ‘it can’t be this hard to wash my hands?’ So yeah, that’s just a quick example of bad physical UX… Rant over.
• #12: Previously, I was Innovations Director for a Events & Experiential agency, and it seemed the answer to every Physical UX problems was Touchscreens.
• #13: Christ. Another, PixelSense/Surface demo? God help me NOOOOO!!!! So let’s Recreate the definition. Because what is User Experience but a method in which we interface with an object, device or activity? Let’s collaborate and Hack stuff! Let’s MAKE our own UX. Which is were ‘Banana Pianos’ come in…
• #14: I’m sure you’re all aware of this but getting it out the way… The elephant in the room: Makey Makey "It's a different way of connecting the physical world with the computer," says Mitchel Resnick. When you touch the object, you complete the circuit, and the circuit board sends a message to your computer, which thinks that MaKey MaKey is a standard keyboard or mouse. The project raised $568,000 (£360,000) on Kickstarter in June 2012 for the project -- 22 times what they asked for. "It makes the world your construction kit," adds Resnick. A few bars of Adagio for banana, anyone? http://www.wired.co.uk/magazine/archive/2012/11/play/the-magic-fruit/viewgallery/291681
• #15: Makey Makey is great if we’re limiting ourselves to keyboard controls – Left, Right, Up, Down. Admittedly, when paired with something like the Java-based IDE ‘Processing’ it get’s infinitely more powerful. …but what if you’re after something more interesting? Well in that case, the long established, Arduino microcontroller is a great and varied place to start. “Who’s all worked with Arduino?” No? Give it a whirl. I think Maplins to a Start Kit for £50 that has a project book, LEDs, servos and everything you need to get started.
• #16: And it’s fun! Here a just a few of my early forays… Sweet Tweet Google Printer Make Me Tea – NFC triggered ‘Tea Beacon’ Dinosaur –Wired- hack buttons RFDuino & BLE
• #17: Okay, so now we have microcontrollers and objects that we can use to manipulate our own User Environment. What are our options? Work alone? Collaborate? Share?
• #18: In 2013, to celebrate the opening of the Converse’s new Google+ page the sneaker brand put their favourite model up for a ‘creative hack’ competition. Agencies from around the world responded with a wide range of ideas: Agency Republic, Reactive, Superheroes, Rehab, Cheil & Ogilvy. Here are examples of just a few: NFC enabled Chucks that unlock and Hire skateboards a la Boris Bikes. Game controllers embedded in the heels A Wah Wah pedal for an electric guitar Search YouTube if you’d like to see the Case Studies. Later that same year, this expanded idea into a Pop Up shop… http://www.adverblog.com/2013/06/24/converse-hack-a-chuck/
• #19: So there we have some examples of manipulating an object to recreate a users experience and hence perceptions. The fact that these examples are pretty Raw, shouldn’t detract from the ingenuity and creativity they represent. If anything, think of them as Scamps! Proofs of Concept. Earlier I poo-poo’d Touchscreens. Honestly they’re not all bad. What they do have is Capactive Touch as an Interface, and I’d to revisit that with ‘Electric Paint’. In this case, ‘Bare Conductive Paint is a multipurpose electrically conductive material’ *Conductive ink conducts electricity. It has many uses from creating circuits to making conductive touch pads.
• #20: In 2013, artist Fabio Antinori & designer Alicja Pytlewska worked with Bare Conductive to explore the relationship between interface, interaction, printing and sound in Vienna's MAK Museum. The output of the interaction was a generative soundscape which will continue to evolve as the piece is interacted with. http://www.bareconductive.com/mak-fashion-lab-2-scientific-skin
• #21: Here are some behind-the-scenes photos, as well as a very early example of their pre-Kickstarter Touchboard. The project was full of technical challenges whether it was pushing the Touch Board to work with 2M high sensors, large scale printing on Tyvek or most importantly, developing a graphical language that could tie the project together. http://www.bareconductive.com/mak-fashion-lab-2-scientific-skin
• #22: Irish designer Patrick Stevenson-Keating made these innovative lamps using Bare Conductive‘s nontoxic electrically conductive Bare Paint suspended in oil for the 2012 Milan Furniture Fair. Tilting the lamps so that the Bare Paint makes contact between the two electrodes extending from the bulb turns the lamp on. To turn the bulb off, you just rotate or tilt the lamps until the paint is no longer making contact. Liquidity is a new set of imaginative, exploratory table lamps marrying the modern material technology of conductive ink with hand blown glassware. Inspired by the potential of BARE conductive ink, and curious to explore an alternative use for this new material, I aimed to exploit its properties in its crude liquid form. The fluid nature of the ink creates a wonderfully playful and subtly charming interaction, whereby tilting the lamps makes/breaks the circuit as the ink flows between the metal contacts. This is a true visual representation of basic electronics at work, as well as being a beautiful piece in its own right. http://www.studiopsk.com/portfolio/liquidity
• #23: Project by Stephanie Souan and Sybille Berger in the FabLab ENSCI. "Potentiality is an audio speaker which the envelope and the volume controller are paper. For this component, we used paper CansonÒ mid black hue because, composed of carbon, it conducts electricity. A wide field of innovations will open for the paper, here it accessible and easy material to work becomes a real sensor. This paper remains conductive when printed, this opens different aesthetic possibilities. This can lead to a new look at traditional crafts around the ornamental work. By our designer look, we wanted to pay attention to the comfort of use of this object, the paper becomes pleasant to the touch by the realization of textures using simple methods like sanding. The manipulation of the object becomes intuitive thanks to its sensitive surface. "
• #24: Novalia were commissioned by New Zealand creative agency Shine in collaboration with Beck’s beer to enable interactivity in their posters for New Zealand Music Month. Beck’s wanted to ramp up their involvement with local music by commissioning emerging artists to create one off tracks and showcasing them on a world first interactive music-street poster. The posters will be displayed in cities around New Zealand, allowing the public to directly interact with them and play the tracks of emerging artists such as Lawrence Arabia and Ghost Wave. Using Novalia’s capacitive touch technology, the interactive touch points on the posters  allow their audience not only to choose and listen to tracks, but to create their own sound effects in time to the music with a selection of inbuilt touch points.
• #25: Novalia worked with DJ Qbert to create the world’s first interactive DJ Decks in an album cover. QBert’s Kickstarter funded Extraterrestria album features a set of working Bluetooth MIDI decks and controls that connect to iOs and OSx. Touching the paper connects to the Algoriddim DJAY app, allowing the user to scratch, mix and fade any songs they load into the software. Complete with two decks, a cross fader and an array of SFX buttons beautifully printed onto paper using printed electronics and artwork designed by Morning Breath for QBert, the decks demonstrate the possibilities for interconnectivity between the physical and digital in a way that can enhance user experience.
• #26: Okay, so now we’ve seen a couple of Real World examples, I’d like to share my own experience at the Moving Brands Hack day Partnering with Bare Conductive we invited illustration, coding, industrial design, animation and graphic design experts to get messy with Bare’s conductive paint and their brand new piece of kit, the Touch Board. The day resulted in seven brilliant, mostly working prototypes, including; a cardboard record player, a safe that opens with a secret gesture, a music roller, a remote control robot game, interactive snakes and ladders with sound effects A symphony of food preparation. #MBinkhack /////////// If you have expertise in any field from print and illustration to programming and electronics, come along on Saturday 16th November to our hackday* about conductive ink**. The potential for conductive ink is boundless - from making posters that play music to huge interactive installations. Join our collaborative brainstorm, share your thoughts about tangible uses of conductive inks - and you’ll be among the first people to try the new hardware.
• #27: Okay that video should give you an idea of the day… It was a short hackday with only a 3 hours to produce a working prototype. Given the shortage of boards, we were in 7 groups of 4. My team consisted of Jude, Lawrence and Reagan, all of whom I met on the day and as it turned out I was the only Arduino coder, so no pressure! After a bit of How-Do-You-Do, we got down to it and kicked around various ideas, mainly inspired by Mattel it seemed: Conductive Jenga, Twister, etc. We settled on a Spy vs Spy inspired idea that used a combination of Touch & Hover over electric painted surface, to give a variety of capacitive values to unlock a ‘dead-drop’. This quickly morphed into a safe, and we even used the box that all our hackday bits came in to build it. The final build of the safe utilised a 3 state lock that required a Hover-Touch-Hover combination, related to a capacitive value, to open each of the servos, and unlock the door. Each successful combination was greeted with the sound of a lock opening, via the onboard MP3 player connected to small speaker, and the LEDs flashing in sequence.
• #28: Okay that video should give you an idea of the day… It was a short hackday with only a 3 hours to produce a working prototype. Given the shortage of boards, we were in 7 groups of 4. My team consisted of Jude, Lawrence and Reagan, all of whom I met on the day and as it turned out I was the only Arduino coder, so no pressure! After a bit of How-Do-You-Do, we got down to it and kicked around various ideas, mainly inspired by Mattel it seemed: Conductive Jenga, Twister, etc. We settled on a Spy vs Spy inspired idea that used a combination of Touch & Hover over electric painted surface, to give a variety of capacitive values to unlock a ‘dead-drop’. This quickly morphed into a safe, and we even used the box that all our hackday bits came in to build it. The final build of the safe utilised a 3 state lock that required a Hover-Touch-Hover combination, related to a capacitive value, to open each of the servos, and unlock the door. Each successful combination was greeted with the sound of a lock opening, via the onboard MP3 player connected to small speaker, and the LEDs flashing in sequence.
• #29: SHARE your knowledge and Enthusiasm. Last week I got the opportunity to speak to a class of 8 year olds. Frightening! It was my son’s class, so how bad could it be? They’d been learning about circuits, and I had a few Electric Paint pens left over from the recent Bare Conductive and Moving Brands ‘InkHack’. I used some simple circuits that lit LEDs, switches that when the paint was touched activated an Iron Man arc reactor toy and a Capacitive shield (USB TouchKey) that changed the colour of an RGB LED depending on the word they touched. The Capacitive part was probably the most fun, as I had one child touch the GND and another choose a colour. Of course nothing happened, until they held hands and completed the circuit! It was a lot of fun. Hope the kids enjoyed it as much as me.
• #30: Touchboard Here the plant stalks are used to change the audio track, as well as fade up and fade down the volume based on touch.
• #31: So we’ve looked at various interaction models, But these are the days of IOT. Internet of Things! What if we could make these new User Experience models ‘talk’ to the internet and ‘share’ these experiences? The very idea can be intimidating, and prompts thoughts of server configuration and Back End Developers. Luckily there are a services out there that allow an almost code-less solution… …because it’s time for the audience participation portion of our show!
• #32: I’d highly recommend investigating the likes of both Temboo & IFTTT (pronouced ‘ift’) Temboo in particular provides step-by-step code examples to integrate Arduino sensors & events with various services like Google, Dropbox, Instagram, GitHub, eBay, Twitter…. In this case, I’m going to give an example of Conductive Ink, Processing, Temboo & Tumblr… …because it’s time for the audience participation portion of our show!
• #33: This was more a bit of fun around disrupting how we interact with space, and moving away from TouchScreens. Inspired by ‘Smooch Booth’ from Art Hack Day, Stockhom 2012 Two hands painted with Bare Conductive paint need to be touched to close the circuit and take a pic which is uploaded to the Smooch Booth Tumblr. The painted hands are just far enough apart such that one person can't touch both at the same time and form a gentle embrace.
• #35: The whole piece was automated, i.e. low barrier. As soon as a circuit was completed, a photo was taken and added to a Tumblr blog. There was also an animated GIF version.
• #38: Cheers! You can stalk me on Twitter and see some of my experiments on the Blog at That Hollywood .com- Where you can see the likes of the: Google Printer Ironman twitter reactor Capactitve Paint & Sensors – Touch Board An Arduino YUN taxidermied dog mashup… Oh it goes on….