Aangeboden: Android Patterns

This page is also available in English

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.