We have been working on it for a while, and it will be ‘work in progress’ for a while longer, but it does deserve a blog post by now: our Interaction Pattern Library for Android on androidpatterns.com. Designers and developers have already noticed the website. We are receiving over 40,000 visitors monthly from 137 countries and that number is steadily growing. Why did we start this project? And what can the world do with it? A short history…

Interaction designers and pattern libraries

Pattern libraries are websites with collections of interaction patterns, which we, as interaction designers, often use in our daily design practices. They show how certain design problems can be solved using examples. Commonly used libraries are Yahoo, Welie, UI-patterns, Patternry and Pattern Tap. These are made for web, and are not very applicable to mobile devices.

Apple’s guidelines and Google’s source code

Designers for iPhone or iPad applications can turn to Apple’s iOS design guidelines. These will give a detailed description on how to properly use the Apple User Interface elements. It is not a pattern library, like the examples mentioned earlier, but it is a very useful document in which Apple explains how to use certain elements. It is extensive and detailed. It will give you all information needed to design for iPhone and iPad, and studying these guidelines is essential if you’re designing for this platform.

Apple’s competitor Google takes a different approach with their open source Android OS. On the Android developers site developers of software and hardware can find the necessary tools, documents and source code with which they can get started. In the source code all elements created by Google’s developers, are defined. The code can be used and adapted by developers themselves. There are no rules before or after. Applications don’t need to be approved, they way they do at Apple’s App Store. The result is that applications on Android devices can look and interact very differently.

There are UI guidelines on the Android developers site that can help designers, but they only deal with the basics of Android, for example how various menus work. All other elements are only discussed in terms of code. Not something of much use for us interaction designers.

A pattern library is born

We started to bump into questions like: “How does that work on Android?”, “Is this a common solution?” and “Can I solve this differently?”. When designing for web we can find these answers in existing pattern libraries. But for mobile applications, we couldn’t find anything online yet. Because of the lack of tools for interaction design for Android applications, the idea was born to create a pattern library ourselves. We registered the URL, made a plan for the library with a group of Android users at UNITiD, and made a plan to get started.

Wireframes at the basis

During the months that followed we took hundreds of screenshots from which we gathered the patterns. Only when proven to work more then once, we regarded a interaction design solution to be a real pattern. The basic principle of this pattern library is that it should help designers like us. This is why we approach patterns from questions we could run into during the design process. These questions have been grouped in categories and the answers on these questions each led to a pattern.

As interaction designers we are used to tell our story using wireframes. A good method to also explain how the Android patterns work, we thought. Every pattern page opens with a wireframe which explains how it works. Then we talk about its context: when to use the pattern, when not to use it, and which other patterns could be considered in the same situation. We have also added The Good and The Bad of every pattern, to conclude with examples of the patterns being used in various applications.

Participate?

It would of course be great if this pattern library, just like the libraries mentioned before, will continue to draw a steady and growing amount of visitors. Until now 50 patterns have been published, divided over 6 categories, and we have collected many more that will be added to the website soon. And as Android is continually developing, including an OS for tablets, we will have plenty of work cut out for us!

Did you also discover a pattern that you would like to share with us? On Android Patterns you can read how to do this. Of course, you will receive all the credits and a link to your own website.

For all interaction designers who will be designing apps for the BlackBerry platform, we’d like to share our Fireworks template. The template is made for BlackBerry devices with resolution 640×480 but as all UI elements are vector images they can easily be resized.

Download the Fireworks BlackBerry mockup template
Additionally, you can use the – fairly limited – BlackBerry UI Guidelines for extra information.

Natural User Interfaces, de nieuwe ontwikkeling in de wereld van interaction design. Touchscreen producten zoals iPhone en de Microsoft Surface zijn voorbeelden van een meer natuurlijke interactie; met de vingers, met beide handen. Natural User Interfaces was ook het onderwerp van de Design by Fire editie 2010, afgelopen woensdag in Pakhuis De Zwijger in Amsterdam. Hier verzamelden zich vele interaction designers voor een dag van nieuwe inzichten en inspiratie.

Bill Buxton bij Design by Fire

Bill Buxton van Microsoft Research startte de dag voor een wakker en fris publiek en vertelde over de eerste smartphone, the long nose, de auto van nu en het huis van de toekomst. Zijn ontwikkelingen zoals touchscreen technologie echt zo nieuw als ze lijken? En hoe kunnen we leren van onderzoek en productontwep uit het verleden? Bill Buxton deelde zijn visie hierover.

The long nose of innovation

De meeste technologische innovaties die zich nu in sneltreinvaart lijken te ontwikkelen, hebben eigenlijk een aanloop gehad van soms tientallen jaren. Na onderzoek, verfijning en uitbreiding volgt pas in de laatste jaren van de ‘nose’ de vertaling in mainstream producten. Het zijn alleen die meest recente ontwikkelingen die zichtbaar zijn voor het grote publiek. Oftewel de long nose of innovation. Denk aan de muis en touchscreen technologie. Een paar voorbeelden laten zien dat de eerste touchscreen producten al behoorlijk oud zijn:

Als ontwerper is het dus belangrijk om je te laten inspireren door de geschiedenis. Met een flinke dosis ontwerptalent erbij kan dat tot bijzondere resultaten leiden: Jonathan Ive doet combineert beide als geen ander. Jonathan Ive is senior vice president of industrial design bij Apple en voornaamste ontwerper van iMac, iPod, iPhone en iPad. Ongetwijfeld was IBMs ‘Simon’ een bron van inspiratie. De invloeden van Dieter Rams (40 jaar hoofd design bij Braun) zijn ook makkelijk te herkennen.

Braun T3 versus Apple’s iPhone

Menselijke vaardigheden

Natuurlijke user interfaces van de toekomst zullen nog veel beter inspelen op de sociale, cognitieve en motor-sensorische vaardigheden van de mens. We hoeven ons al niet meer te beperken tot input met een muis. Denk aan hoe de auto van nu die naadloos aansluit met je mobiele telefoon. En ook onze huizen zullen straks een veilige, persoonlijke, en naadloze aansluiting op onze persoon zijn, reagerend op touch, gestures, speech, etcetera. Met ook een gezonde dosis kennis van de menselijke vaardigheden, kunnen we ons werk als interactie ontwerper nog beter uitvoeren.

WIRED’s digitale magazine

In februari presenteerden WIRED en Adobe hun tablet versie van WIRED magazine. Een prachtige werkende applicatie voor tablets met Adobe AIR. Video, animatie en slimme interacties laten zien wat digitale magazines ons binnenkort gaan brengen.

Sports Illustrated

De visie van Time Inc op tablet magazines.

Sports Illustrated – Tablet Demo 1.5

Bonnier Mag+ prototype

Al in december 2009 liet Bonnier haar visie op de toekomst van digitale magazines zien in deze indrukwekkende video.

Mag+ from Bonnier.

Binnenkort meer nieuws van UNITiD!

• Waar is hier een Volkswagen dealer te vinden?
• In welke tent treedt mijn favoriete festival artiest op?
• Waar vind ik het voordeligste product?
• Is er een zwembad op loopafstand?

Voor MIMOA werkt UNITiD nu aan een iPhone app met MAPPS, zodat gebruikers overal en altijd toegang hebben tot de allernieuwste architectuurprojecten.

Bij MIMOA, de online gids voor moderne architectuur, kun je nu al zoeken in een paar duizend projecten die continu worden aangevuld door gebruikers van de website. Deze informatie is straks ook beschikbaar op de iPhone.

Voor SpecialBite werkt UNITiD ook aan een locatiegebaseerde iPhone app. Vinden van bijvoorbeeld het dichtsbijzijnde Thaise restaurant, en een omschrijving en waardering van bezoekers, is daarmee mogelijk.

MAPPS versies

Wil jij ook een iPhone app waarmee je klanten of bezoekers op elk moment en vanaf elke plek toegang hebben tot jouw gegevens, dan kan dat met één van de 3 versies van MAPPS; Basic, Extended of Premium.

Van een simpele lijst- en kaartweergave, en een detailpagina met koppelingen naar Maps (route), Safari (website) en Phone (bellen). Tot naadloze navigatie tussen de lijst- en kaartweergaves en zoeken op trefwoord en bladeren door categorieen.

Om MAPPS te realiseren werkt UNITiD samen met Elements Interactive, verantwoordelijk voor development, en HBMEO voor advertising en PR. Deze samenwerking heeft geleid tot een unieke en flexibele iPhone app. Meer informatie over de mogelijkheden van MAPPS vind je op mapps.nl.

Mail of bel ons gerust als je wilt weten hoe we je kunnen helpen met MAPPS!

On Graffletopia we found an Omnigraffle stencil with various hand movements for touchscreen interfaces by Dan Saffer. Which comes in handy for everyone who isn’t great at drawing hands, like me! The only downside: the images weren’t entirely transparant and the colors not editable. This is why we made a vector version of the stencil in which you can adjust colors, line weight, etc exactly to your own wishes. You can also make the hands partly transparant so they don’t cover up too much of your designs.

iPhone kent duidelijke ontwerprichtlijnen, wat heel handig is, maar Android nog niet. Wat voor invloed heeft dat op de user experience van applicaties in Market vs de Apple App Store? Het is belangrijk om te kijken naar de high level ontwerprichtlijnen, zowel richtlijnen over ontwerpen voor touchscreen (bijvoorbeeld van Dan Saffer) als die voor ontwerpen voor mobiel kunnen ons al een eind op weg helpen. Wat de verschillen ook gaan betekenen, Android is in ieder geval een groeiend platform met veel potentie. Hierbij ook de presentatie.

Wat vind jij? Biedt de openheid van het Android platform mogelijkheden voor het ontstaan van betere UX oplossingen?

Het kan heel interessant zijn om op een andere manier naar je sociale netwerken te kijken. Slimme programmeurs experimenteren met visualisaties van vrienden op bijvoorbeeld Facebook, Last FM en LiveJournal met soms schitterende resultaten. In ieder geval bieden ze weer eens een nieuw perspectief. Zo ontwikkelde Sebastian van Sande de Facebook Visualiser.

Als een organisch geheel vormen zich sociale netwerken om een geselecteerde vriend. Je ziet meteen welke vrienden bij elkaar horen, welke subgroepen van vrienden zijn ontstaan om een bepaalde vriend of vriendin, en er kunnen filters toegepast worden op je netwerk. Een andere visualisatie is die van Daniel Claren, hij ontwikkelde de Mutual Friend Network Visualisation.

Toegevoegde waarde

Wanneer voegt zo’n interactieve netwerkvisualisatie echt iets toe? Gaat het vooral om een ontdekkend navigeren, het kijken naar data vanuit een nieuw perspectief? Bij een bestaand netwerk waarbij je zelf vrienden hebt toegevoegd, biedt het een nieuwe blik op je bestaande connecties. Je weet al grotendeels welke gezamenlijke vrienden er zijn en welke gedeelde interesses je hebt. Het is een leuke speelse manier om naar je vriendengroep te kijken.

Bij een netwerk waar je bij hoort vanuit interesse of professie, biedt een dergelijke visualisatie meer voordelen. Zoek je iemand met bepaalde kennis of vaardigheden binnen je bedrijf? Dan kan je snel zien wie de meest relevante kennis heeft, wie dichtbij je staan in je netwerk, wie je kan introduceren aan die persoon. Dit kan handig zijn voor grote bedrijven en overheidsinstellingen waar werknemers nog al eens langs elkaar heen werken. Helemaal als je kan filteren bepaalde interesses en kennis. Persoonlijk gebruik ik nooit ‘friend suggestions’ op Facebook of andere sociale netwerksites. Maar in een context van werk of hobby kan ik me voorstellen dat netwerksuggesties interessant zijn.

Een mooi voorbeeld is een visualisatie van ED-MEDIA die ontwikkeld is voor de World Conference on Educational Multimedia, Hypermedia & Telecommunications. De visualisatie laat auteurs zien die verbonden zijn met elkaar door citaten in wetenschappelijke publicaties. En wil je jouw favoriete muziek ontdekken op een andere manier dan Last.fm je biedt, kijk dan eens op Tuneglue.

Platenmaatschappij EMI lanceerde in 2006 een website genaamd Tuneglue waar muziekliefhebbers nieuwe artiesten kunnen ontdekken die aansluiten bij hun smaak. In plaats van een lijstje ‘similar artists’ kan je per artiest gerelateerde artiesten zien in een netwerk. Helaas doet de link naar releases het niet (je zou hiermee direct naar Amazon verwezen moeten worden) en is er ook geen link met Last.fm om aanvullende informatie over de artiest te lezen. De app werkt verder erg mooi, leuk om doorheen te klikken en nieuwe artiesten te ontdekken.

Persoonlijk lijkt een interactieve visualisatie me interessant als extra view op een bepaald netwerk. Worden ze nu nog vaak als aparte applicaties ontwikkeld voor bestaande netwerken, ik zou graag in LinkedIn willen kunnen wisselen naar een netwerk visualisatie, of bij Last.fm een artiest direct kunnen zien in de Tuneglue omgeving. Ik ben benieuwd of dit soort applicaties in de toekomst aan bestaande netwerksites toegevoegd gaan worden.

Meer inspiratie voor netwerk visualisaties is te vinden op de website Visual Complexity.

Download the Fireworks Android template (version 2, Fri december 4 2009)

Are you looking for other templates, here’s a few we found that might be helpful:

Google Android Omnigraffle stencil (BinarySheep)
Android GUI PSD Vector Kit (Pavel Maček for Smashing Magazine)
Android GUI prototyping stencil for Visio (ArtfulBits)

For visual design Android offers the Android icon template pack

Even though the design guidelines for icons are very specific, interaction design guidelines are limited. Android offers User Interface Guidelines that give some information on various menu options for example, but it is far from the extensive design guidelines Apple has published for iPhone. This means there is a lot of room for interpretation by Android application designers and developers. It will be interesting to see what best practices in interaction design for Android will emerge in the near future.

We hope you find the template useful!

Reviews

Momenteel is de Hippas website in bèta, de reviews zijn positief:

“Mede dankzij de toegankelijke overzichtelijke structuur van Hippas, is dit de ideale plek om online te shoppen.”

Op: Toostylish

“De basis van Hippas is volgens Toorenaar (Commercieel directeur Marktplaats) niet anders dan die van Marktplaats. ‘Vraag en aanbod samen brengen op een duidelijke manier. De vormgeving is natuurlijk wel anders, modieuzer, hipper. Daarnaast zie je een aantal social componenten, zoals reviews en tips.”

Op: Mol/blog – Tijdschrift voor Marketing

“Hippas, is meer dan een doorsnee shoppingsite, het is een uniek modeplatform. Shop originele stuks bij andere modeliefhebbers, zoek naar unieke vintage items en laat je verleiden door fijne accessoires.”

Op: Style today