Neues aus dem Intuity BlogTake me there!
- Intuity’s notabene – Rapid HTML5 Prototyping on the iPad
19.05.2010 
Last week it finally arrived at the office: Our long awaited iPad. No question that we took the chance to play with this cute device …
The goal: Learn about rapid prototyping on the iPad with HTML5
Our goal was to explore the possibilities of the new device, especially its browser as Objective-C is really a painful environment (at least for me) when it comes to fast prototyping. So we wanted to know: Can we use HTML as prototyping platform for future projects? How far can we push the boundaries of the browser? Can we make a webapp behave just like a native app?
The result: notabene – An infinite workbench for ideas
Click here to view the embedded video.
Music: “One Shot” by Luc Bartoli (Powered by Jamendo)
The result of our trial is a little prototype that hopefully makes you forget that your using a browser. It utilizes jQuery library to add the behaviour but takes full adavantage of CSS transitions to speed up performance. We also use new CSS features like gradients, a new box model (to center the breadcrumbs) plus animation and transform capabilities. And of course just like our previous experiment it is possible to install it as a full screen app on your home screen to make it feel more native. If you own an iPad or got the Simulator installed you can give it a test drive. (Keep in mind: This is just an experiment, things won’t get stored and the menu in portrait mode is just a mockup)
What did we learn?
Some of this stuff wasn’t that easy. We came across several problems but also faced new possibilities that we’d like to share:
- It proved to be a valid approach for building simple touch prototypes
- It’s a look to the future
If performance of Javascript and Browser engines will continue to speed up this approach will become even more valid and might soon be seen as a real competition to native apps. - Development with CSS transitions can be random
Sometimes a little tweak in your CSS will just blow up your app for no reason. So if Apple really wants to embrace HTML5 as a mobile UI technology it needs to tackle this issue and make Mobile Safari even more rock solid. - Performance, performance, perfomance
We did several iterations until we got to the current performance, especially for dragging the little notes. You really have to reach the speed of a native app. Otherwise the interaction just doesn’t feel right. In order to do so use CSS transitions and iPhone OS touch events (touchstart, touchmove) instead of the traditional events (click, mousedown). This will speed up the performance of your interface significantly. - You can even do multitouch in the browser now
- Not for sissies: multitouch on bigger screens is a smeary thing. After using the screen for some 10 minutes you definitely long for a cleaning tissue.
Standing on the shoulders of giants
In order to get this experiment done we used some great Open Source components. So we’d like to give some shout outs and credits to the projects that luckily did a lot of hard work to create the building blocks of notabene:
- jQTouch by David Kaneda as an inspiration
We used the transition approach of this great library as a base for the slide transition. - Swipe Plugin by Ryan Scherf
We used the plugin as a basis to build a swipe gesture detection plugin for jQuery - Delicious Font by Jos Buivenga
We’ve used the extraordinary Delicous font in combination with the @font-tag to add a little extra spice to the UI.
Sources available – Feel free to remix
The source code of this project is available under the MIT License. So feel free to remix! Drop us a line if you feel inspired …
Next steps
What to do next? Well, at the current state the project is a rough experiment but we’re thinking about taking it a step further. Any help, contribution and ideas are deeply appreciated. Just a few thoughts on improvement:
- Building a backend
Cloud syncing is really the thing that would make these notes superior to paper notes. Also the offline database capabilities of Webkit could serve as temporary database. - Additional input techniques
Currently the software keyboard for adding new notes is not really satisfying. Voice input would be great but could be hard to implement. - Improving the UI & adding true multitouch support
In any way we’re quite happy with the result and curious to get some feedback. To be continued…
- LAB Talks | Kurt Weidemann visiting Intuity
25.03.2010 
Kurt Weidemann @ intuity
It was a honor and pleasure to have Kurt Weidemann visiting us in December. Even more this year, as he came back bringing an interesting speech about the role of design in our society and the attitude of designers to create an positive impact. His plea for receiver-oriented communication (instead of sender oriented) is a current issue. Transferred to our field (designing innovative products and services with a great UX) it’s a guideline for focus and simplicity.
- New project online: Navitainment for Daimler Benz
04.03.2010 
We’re very lucky being able to work on strategic research projects together with our customers. However these circumstances often put us in a position where it’s not possible to share our designs, outcomes and findings with the rest of the world. But sometimes we can. That’s exactly what happened to a project we did back in 2007 for Mercedes Benz.
A new Navigation Experience for Daimler AG
Inspired by the concept of flight shows we set out to design a new navigation and entertainment experience especially for Mercedes Benz passengers sitting on the backseat. The concept integrates online and offline content in a smart way as an ambient flow of information you can choose to follow or just ignore. You are also able to interact with the system to find out more about your journey and points of interest along your route. Thus, the concept is merging navigation and (rear)seat entertainment.
During concept development, we have been documenting parts of our vision as a short video, created in collaboration with our motion design partners at Studio Soi.Enough of words! More on the project can be found on our corporate website. We’re curious to get some feedback.
- Generative Gestaltung – Book Release
04.02.2010 I am very proud to announce the latest book of our two Intuity fellows Benedikt Groß and Hartmut Bohnacker. Besides of the great approach to generative design and step by step instructions for coding – This is one of the most beautiful books I have seen for a long time.
– Markus
––––––––––––––––––snip––––––––––––––––––
The term Generative Design describes a design method which is implemented in various design fields (Art, Architecture, Communication Design, Product Design). Thereby the most essential is that the output – image, sound, architectural models, animation – is generated by a set of rules or an algorithm.
A book focused on the designer’s point of view
About 2,5 years ago Julia Laub and me got together as we were thrilled by the possibilities of this domain. We decided to use our Diploma (Generative Systems) to dive into its essentials and its underlying algorithms. A year later Hartmut Bohnacker and Claudius Lazzeroni teamed up and with the help of Verlag Hermann Schmidt we were finally able to share our thoughts and findings with the rest of the world in form of a book. »Generative Gestaltung« tries to focus especially on the designer’s point of view: the creation of images and visualisations by using code.
Visualizing ideas by using code
Image are no longer created manually but through a visual idea which is translated into rules and then implemented in a programming language in the form of source code. The result is a piece of software which hopefully creates the desired images or even permutations. To cut a long story short: design is created by coding software instead of using software. Sounds a bit abstract, hu? So what can actually be done with? Here a few possible fields of application and a related best practice examples.
- Information Visualisations: Eigenfactor
Eigenfactor is a interactive visualizations to explore citation patterns between scientific journals. The goal is “to map the structure of science”. - Corporate Design: COP15
Generative identity for COP15 the United Nations Climate Change Conference held in Copenhagen in 2009. The logo Consists of 192 lines, one pr. member of the United Nations, conceiving the concept of “a world in continuous dynamic chaos unifying to the ideal constellation – a state of perfect balance”. - Art & Photography: extracts of local distance
Existing architectural photography are merged into multilayered shapes. The resulting collages introduce a third abstract point of view next to the original ones of architect and photographer. - Rapid Prototyping / Fabbing / Fabrication: Reflection
Reflection is a CNC-milled sound data sculpture, inspired by a musical piece by Frans de Waard.
… etc, there are a lot more, but i hope you see the potential.
Transforming signals and noise into information and knowledge
My motivation (as one of the authors of »Generative Gestaltung«) was to provide a solid foundation for others on how this modified design process can be used. Or in other words to empower people to do projects like the ones above.
Because still a lot of designers think that coding is geeky and complicated stuff. But in my opinion it’s a powerful tool that fuels creative solutions and will help us to solve future problems. Generative Design will become more and more important in order to turn the growing numbers of signals and noise into useful information and knowledge.
A foundation to build upon
Last but not least you can get the complete source code as we’ve made it available under an Open Source License. You can grab them from the website that supports the book. We would be glad if you let us know of your experiments, ideas and explorations that might arise from our little seeds.
Generative Gestaltung
Designing, Programming, Visualizing with processing
Hartmut Bohnacker, Benedikt Groß, Julia Laub, Claudius Lazzeroni (Ed.)
publishes by Verlag Hermann Schmidt Mainz
ISBN 978-3-87439-759-9
www.generative-gestaltung.deClick here to view the embedded video.
- Information Visualisations: Eigenfactor
- Intuity Tech Research: Remixing voice recognition with face detection – or how to talk to white rabbits
21.12.2009 Language based interfaces are hip right now. Both iPhone and Android OS recently have been equipped with the ability to listen to your talk. So the technology seems to have reached a level where it’s ready to hit the consumer making it easier to communicate with certain devices and services. But the technology alone won’t do the job. It needs an appropriate interface in order for us to understand. Otherwise we won’t realise that a specific device is able to understand our commands.
For instance the Nokia N Series (N73, N80, N95 etc) has “voice recognition” included since several years but only a very few people know about that particular feature (or even use it). So we asked ourself some questions: What are the drawbacks of current voice interfaces? How can we get the human touch in language based technology? And how do we prototype these kinds of interactions in order to come up with new solutions?
1. How can we augment language based interfaces?
You talkin to me? Using a visual recipient for voice commands
One problem that we identified is the “recipient problem”: Who am I talking to? In which direction do I need to talk? Talking to a screen seems weird to us. The solution we came up with is using a metaphor. In our case a white rabbit.Schau mir in die Augen, Kleines! Activating devices by looking at them
“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” 10 Heuristics of UsabilityAnother problem we identified: the feedback! Is the device actually listening to me right now? Will the device listen to my commands all the time? Is it active? So we came up with two modes (quiet and listening) and a simple way of switching between them: Using your eyes.
- Quiet Mode: The device is “sleeping”. Nobody is looking at it so it won’t accept voice commands
- Listening Mode: Somebody is looking at it. It’s got the attention of somebody so it will actually listen to voice commands.
2. How can we prototype language based interactions?
Our setup: a microphone, a webcam, Macspeech Dictate, Nabaztag and a bit of hacking mindset. The quick solution for our rough prototyp: use a rabbit that knows your face! We’ve ‘augmented’ our nabaztag bunny with a webcam and used a face detection algorithm trough Processing to find out when somebody is looking straight into the eyes of our little bunny.
3. The result
We captured a video in order to document the setup and two simple example implementations for voice commands.Click here to view the embedded video.
4. What did we learn?
- Constant feedback. After the conversation was started a constant feedback from the machine is needed like: “listening”, “understanding”, “misunderstanding”, “command was done” etc.
- Language is a fascinating additional layer to interaction design but it’s certainly not the ultimate tool for interacting with devices. A lot of contexts exist where language might not be the appropriate weapon of choice
- On the other hand some things can be expressed in language very easily (see our expample in the video)
- The technology is still not that smart like the one in Star Trek, damn. But it’s definitely a big space for innovation.
- Do we need communication patterns and standards?
- Is there a need for a set of standard vocabulary which can be used when interacting with devices? For example is there a need for some kind of standard “ping”, “help” or “Hey I’m talkin to you” command? We could use it to wake up specific devices around us?
All these findings and questions seem are certainly worth to explore. We’ll keep our ears on the ground in order to check for signals and innvations that will support these kind of interactions.
- Shaping lasting experiences: The peak-end rule
25.11.2009 
Graphic taken from the awesome Book Generative Gestaltung
Having recently talked about the importance of the first impression during a product experience, I’d like to share another insight on shaping experiences. A while ago I stumbled accross the work of Daniel Kahneman, a psychologist and nobel-prize winner focusing on judgement and positive phsychology. It was his peak-end rule that really got my attention. So let’s not waste time and talk about what this guideline can teach us.
What is the peak-end rule?
“According to this rule, we judge our past experiences almost entirely on how they were at their peak (pleasant or unpleasant) and how they ended. Other information is not lost, but it is not used. This includes net pleasantness or unpleasantness and how long the experience lasted.”
- WikipediaMichael Johnston also created a visual representation of the rule:
When to use?
After initially using this method for doing interaction design here at Intuity, I figured out that these patterns could be applied to all kinds of other experiences. Keeping my eyes open I’ve been discovering the same design patterns in all kinds of contexts from movies to a customer experience inside a coffee shop. In your day-to-day business it could be useful for…
- Shaping the experience of a digital service or product
- Shaping a customer experience in a store
- Creating workshops with customers
- Giving a presentation
- Doing a party for friends
How can we apply this rule?
- First things first – Get the overall experience right
Sure peak and the end are important, but first of all it’s crucial to get the overal experience right. After that you can focus on setting highlights. - Set peaks – And define a place to collect those ‘Sahnehäubchen’
While creating an experience you should consider the peaks from time to time. Don’t force it, just try to ask yourself: How could this feature stand up/out? How could I include this joke in my presentation? Gather these little gems on a project wall in order not to forget them. Ideas of that kind tend to pop up in your mind while doing something different and they tend to be very fragile. It’s most important to catch these little butterflies and put them on a piece of paper. (Give this place a name – in our team we call this the “Sahnehäubchen” wall). - Restrict yourself – Don’t overdo
Trying to set peaks all the time will not result in a good product experience but rather in a product that tries to “impress” and scream at customers all the time. Nobody likes posers. The same goes for digital products. What’s more: if you try to create too many peaks the chance that you don’t get any of them right is pretty high. So focus! - Shape a strong ending
When designing an interface or doing a workshop, try to have the end in mind. Just try to ask yourself from time to time: How could the workshop end? How will the app look like when I shut it down? Try to design this ending as positive as possible.
The web is your friend – Inspiriations and further readings
The ‘peak-end’ rule: Can it transform your customer experience?
- Intuity LocalBuzz – A twitter mashup focused on augmented, local news
15.10.2009 
Watching the keynote presentation of the last Google I/O conference two things sticked in my mind: The sentence “Never underestimate the web” and the fact that geolocation features are already available in modern browers. LocalBuzz is an Intuity lab project inspired by these two thoughts. It’s focused on mashing up geolocation features and the twitter API in order to create a new local news experience. (A little playground for testing and playing with emerging technologies).
You can test-drive it on our shiny and new Intuity Apps page. Just fire up the LocalBuzz address in your iPhone Safari, Android Browser, Firefox 3.5 etc.
Let’s talk a little bit about the thoughts and ideas that led to sketching the application.
The story of LocalBuzz – From local news to augmented buzz
In ancient times local news were shared at places like markets etc. This way people stayed up to date with topics that were important to them in a hyperlocal context.
LocalBuzz is an approach to mimic this behaviour and augment it with modern technology. Just like the markets in ancient times it’s giving you access to local news (in this case twitter messages) that might be relevant as they’re related to your city, to your block.
Goals and ideas behind the app
- Play with the twitter API and its geolocation features
- Push the limits of web apps and show the potential of modern browsers in combination with HTML5 features
- Explore geolocation features of modern browsers (Firefox, Mobile Safari, Webkit)
- Experiment with seamless mobile integration of webapps (especially for iphone)
- Create a webapp that integrates seamlessly in different contexts (iPhone, Android, Desktop)
Seamless Mobile Integration – LocalBuzz on iPhone and Android
After adding to home screen the web-app appears just like a normal app without the safari URL bar
One important aspect of the lab project was to create a mobile application which behaves like a native app on smart phones like the iPhone. The latest version of Mobile Safari provides some great new features to support this. It uses the new meta tag “apple-mobile-web-app-capable” (see Safari HTML Reference or the LocalBuzz source code for details) so you can install LocalBuzz on your iPhone home screen to access local news with just one touch and without showing the Safari framework. On Android Phones you could install the bookmark to the app on your home screen as well.
What did we learn?
I’d like to share some insights that came to my mind while crafting the app and thinking about the future possibilities of the mobile web platform.
- Never underestimate the web
The web platform is aldready capable of geo enabled services. A lot more interesting ideas and services will evolve around this functionality. - The browser as a perfect RIA platform
As more and more mobile devices (smart phone, netbooks, etc) arise and their browsers become powerful, modern web standars are a good starting point for creating a seamless user experience across multiple platforms. - Build once, add device specific UX layer
With the help of modern web standards you can style the core of your app in HTML and CSS. You can then add the Javascript User Experience which is specific to every plattform.
Standing on the shoulders of giants
To accomplish this project we used some great Open Source components in order to get the work done. So we’d like to give some shout outs and credits to the projects that luckily did all the hard work to create the building blocks of LocalBuzz:
- geo-location-javascript
Simple platform agnostic Javascript API for location based services. Wraps geolocation APIs for iPhone, Android, Palm Pre etc. - Mootools
Great Javascript framework for building reusable webapps based on object-oriented principles. Mootools adds the interactivity to LocalBuzz and establishes the connection to twitter via JSON. - Mootools Dotter by David Walsh
We used this little handy component to build the progress indicator while loading search results.
Source available – Feel free to remix
Full source code of LocalBuzz is available under the GPL. So feel free to remix! Drop us a line if you feel inspired …
- Intuity UX Research: Love at first encounter – Shaping the start-up of apps and services
09.10.2009 
Photo by Matt Day (Licensed under Creative Commons)
On behalf of Deutsche Telekom Laboratories we had the chance to work on a fascinating research project that lead to a paper titled “Love at First Encounter – Start-up of new Applications” [1] which has recently been presented at HCI 2009. It has also been published in the respective publication “Human-Computer Interaction. Ambient, Ubiquitous and Intelligent Interaction” by Springer Verlag. You can check our corporate website for more details about the project.
The project dealt with a very significant phase of a product experience: the first impression. This first encounter with an interactive product/service is of crucial importance. Within this phase people decide whether they will accept a product or dump it. Whether they will customize it and explore new features. In other words: Whether they will integrate it into their everyday life and habits.
Guidelines for designing an engaging start-up experience
Together with Telekom Laboratories we collected and documented a set of insights and recommendations that can be used to create a positive first encounter experience leading to lasting relationships. Here‘s just a quick preview:
- First impressions are polaroids that stick in your mind
Like a first meeting between strangers, the consumer forms an opinion of the product based on first impressions. Just like polaroids in our mind. If this initial experience is positive, the user will be motivated to further engage with the application. - Tell engaging stories
The consistent and well-orchestrated flow of experience – the “story” – should lead through all phases of the Start-up process. Good stories are not only consistent and memorable (learnable), but also stir the users curiosity. - Use the mystery box
As in great stories, mystery is sometimes more important than knowledge. Holding back information intentionally can be more engaging than informing the user. (Inspired by J.J. Abrams’ Ted Talk about his mystery box) - Find the low-hanging fruits – challenge, reward and grow
Easy initial goals reward customers with instant success and positive feedback. These low hanging fruits help them to grow and build up motivation. - Lower the first hurdle
A frictionless initial dialogue makes it much more rewarding to interact with a system as goals (e.g. making a first transaction, connecting to friends, …) will be reached faster. - Specify the effort and overall process
Provide a clear picture of the first hurdle. How long will it take me? - Break the daily routines
This is especially important when rolling out business software or services within larger companies. Getting people off their desk can help them to focus on getting to know a new service or application. - Make it Yours – Customizing
Addressing individual needs and habits can greatly increase the efficiency of the start-up process for different users. As users customize and hack, they explore and make a product their own. - Engage innovators as evangelists
Empower users to serve as evangelists in public or within their immediate environment. Many of these advanced users may take pride in their position and can help other people to get started.
[1] Breuer, H., Kettner, M., Wagler, M., Preuschen, N., Steinhoff, F. (2009). Love at First Encounter –Start-Up of New Applications. In: J.A. Jacko (Ed.): Human-Computer Interaction, Part III, HCII 2009, LNCS 5612, pp. 585–594, 2009. Springer-Verlag: Berlin.
- First impressions are polaroids that stick in your mind
- New Space for Creative Thinking – Intuity gets a 2nd Floor
01.10.2009 Click here to view the embedded video.
In times of crisis intuity is thinking forward. So after three weeks of refurbishing and moving stuff around we finally got our laboratory floor ready to be filled with passionate people, fun projects and creative thinking.
Designers! There’s plenty of space and challenging projects for new creative heads. So if you’re a passionate interaction designer we’d love to meet you. You can reach us via twitter or our website.
- INTUTY LAB SESSION: MAKING THINGS TALK 02 – How to read out an electricity meter
10.09.2009 Click here to view the embedded video.
I am happy to publish the second episode of “Making things talk”. Our interns Fabian and Jonas beared the challenge and responded to Matthias prototype MAKING THINGS TALK 01 – CONTROLLING LIGHTS WITH YOUR MOBILE VIA XMPP. This time we took care about the energy consumption. But I want to be brief –here comes their lab report:
The goal: Get access to metering data
More and more energy providers start introducing “intelligent” electric meters in order to read consumption data over the web. However the real value for customers lies in analyzing this data intelligently and visualizing the outcome in a language people understand.
So our goal for this session was to create a quick prototype to read the meter in order to see how we can use it, remix and combine it with other intelligent objects later on. And and maybe prototype a little smart grid…
How do we get an intelligent meter?
As EnBW is among our clients and we recently had the chance to design an iPhone interface monitoring and visualizing electric energy consumption. So we found such a device in our laboratory …
Readout through the back door. We didn’t succeed when trying to get the data natively thus we don’t know the protocol the electric meter uses to send the data. Luckily the Smart Meter provides a web interface which allowed us to parse out recent power consumption data.
The result
We hacked a small Adobe Flex application that requests the data twice per second using in order to draw a graph. So for example every latptop which is up to wlan now could use the app to monitor its energy consumption in our lab setup and calculate the amout of money or CO2 that is consumed by this device on a normal working day.
To be continued…
We are not sure what the next step will be. It might bring a small prototype visualizing consumption in a more human way. We think about asking our Nabaztag to meter energy with its ears …