We zijn er al een tijdje mee bezig, en het zal voorlopig een work in progress-project blijven, maar het verdient inmiddels wel een blog post: onze Interaction Pattern Library voor Android op androidpatterns.com. Designers en ontwikkelaars hebben deze site inmiddels al opgepikt. We tellen ruim 3000 bezoekers maandelijks vanuit uit 77 landen en dat aantal neemt gestaag toe. Waarom zijn we aan dit project begonnen? En wat heeft de wereld er aan? Een kleine geschiedenis…

Interactie ontwerpers en pattern libraries
Pattern libraries zijn websites met verzamelingen interactiepatronen, waar wij als interactie ontwerpers vaak gebruik van maken in onze dagelijkse ontwerppraktijk. Ze laten zien hoe bepaalde ontwerpproblemen opgelost kunnen worden aan de hand van voorbeelden. Veel geraadpleegde libraries zijn onder andere Yahoo, Welie, UI-patterns, Patternry en Pattern Tap. Deze zijn gemaakt voor het web, en gelden dus niet voor mobiele apparaten.

Apple’s richtlijnen en Google’s broncode
Ontwerpers voor iPhone- of iPad-applicaties kunnen voor hulp bij Apple’s eigen iOs ontwerprichtlijnen terecht. Hierin wordt nauwgezet uitgelegd hoe de door Apple bedachte User Interface (UI) elementen moeten worden toegepast. Het is geen pattern verzameling zoals eerder genoemde voorbeelden, maar wel een heel nuttig document, waarin Apple laat zien hoe onderdelen moeten werken. Het is uitgebreid en compleet. Alles staat er in om te kunnen ontwerpen voor iPhone of iPad, en bestudering van deze richtlijnen kan je als ontwerper voor dit platform niet achterwege laten.

Apple’s tegenhanger Google gaat met Android, hun open source project, anders te werk. Op de Android developers site kunnen ontwikkelaars van software en hardware de nodige tools, documenten en broncode vinden waarmee ze helemaal hun gang kunnen gaan. In deze broncode staan alle elementen gedefinieerd, die door de ontwikkelaars van Google zijn gemaakt. De code kan worden gebruikt en aangepast door de ontwikkelaars zelf. Er zijn geen regels vooraf of achteraf. Applicaties hoeven niet te worden goedgekeurd zoals bij Apple’s App Store, met als resultaat dat de UI’s van verschillende door Android bestuurde apparaten er op onderdelen behoorlijk anders uit kunnen zien.

Er bestaan wel UI richtlijnen op de Android developers site die designers kunnen helpen bij het ontwerpen van applicaties, maar die behandelen slechts de basis van het Android systeem, hoe menu’s werken en hoe ze worden opgeroepen. Alle andere elementen worden alleen vanuit de code behandeld. Daar kunnen wij als interactie ontwerpers niet veel mee.

Een pattern library is geboren
We liepen zelf inmiddels tegen veel vragen op: “Hoe werkt dat op Android?”, “Is dit een gangbare oplossing?” en “Kan ik dit ook anders oplossen?” Waar we bij ontwerpen voor het web konden teruggrijpen op bovengenoemde libraries, was er nog niks online te vinden. Door het ontbreken van hulpmiddelen voor UI designers van Android applicaties ontstond het idee om zelf een pattern library samen te stellen. De url was snel geregistreerd. Daarna hebben we met een groep vaste Android gebruikers binnen UNITiD een plan gemaakt voor de opzet van de site en zijn we aan de slag gegaan.

Wireframe als basis
In de loop van de maanden verzamelden we honderden screenshots waaruit we de patterns konden destilleren. Hierbij hanteerden we de definitie dat een pattern pas daadwerkelijk een pattern is, als het meer dan één keer heeft bewezen dat het werkt. Het uitgangspunt van deze pattern library is dat ontwerpers zoals wij moeten worden bediend. Daarom gaan we op de site uit van ontwerpvragen die we tegen kunnen komen tijdens het ontwerpproces. Deze vragen zijn ingedeeld in categorieën en de antwoorden op de vragen vormen ieder een pattern.

Als interaction designers zijn we gewend om met behulp van wireframes ons verhaal over te brengen. Een mooie manier om ook de werking van Android patronen uit te leggen, vonden we. Elke pattern-pagina opent daarom met een wireframe waarin wordt uitgelegd hoe het werkt. Daarna wordt de context behandelt: wanneer wordt het interactiepatroon toegepast, wanneer niet en aan welke patronen zou je in deze context nog meer kunnen denken. Hierna sommen we voor- en nadelen op en als laatste zijn het de voorbeelden die het harde bewijs leveren dat het daadwerkelijk om een pattern gaat.

Meedoen?
Het zou natuurlijk super zijn als deze library, net als de genoemde voorbeelden boven, een (groeiende) vaste schare bezoekers zal blijven trekken in de toekomst. Tot nu toe zijn er 50 patterns gepubliceerd verdeeld over 6 categorieën, en we hebben er nog veel meer verzameld die allemaal een plekje op de site zullen krijgen. Bovendien blijft Android zich razendsnel ontwikkelen, met dit jaar zelfs een eigen besturingssysteem voor tablets. We hebben dus nog genoeg te doen!

Heb jij ook een pattern ontdekt die je graag zou willen delen met ons? Op de site lees je hoe je dit kan doen. Je krijgt uiteraard alle credits en een link naar je eigen website.

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?

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!