Tijdens deze meeting hebben we de twee voorstellen kritisch bekeken en op- en aanmerkingen besproken. We zijn toen tot de conclusie gekomen dat beide voorstellen sterke punten bevatten. Sterke punten waren onder andere: het werken met tabs, wisselende verhalen in een banner op de homepage en de opleidingenwizard. We hebben de twee voorstellen samengevoegd in één ontwerp en deze tot in detail uitgewerkt in wireframes en hierbij een uitgebreide documentatie geschreven.

Dit najaar introduceerde Ziggo nieuwe TV-abonnementen in Nederland. Ieder abonnement biedt nu de mogelijkheid om een aantal films en series On Demand te bekijken. Bij de nieuwe pakketten hoort ook een nieuwe On Demand gids, waarvoor wij het interactie ontwerp maakten.

Voor de nieuwe On Demand gids werkten we met de bestaande databasestructuur van Ziggo. Het uitgangspunt was de content centraal te zetten, en een catalogusgevoel te creëren. In de nieuwe gids kan je rondneuzen door het volledige aanbod, waarbij een tooltip je meteen vertelt wat de prijs van het item is, en waar het te vinden is op de interactieve ontvanger. Ziggo klanten kunnen met één klik de films en series zien die bij hun abonnement zijn inbegrepen. Daarnaast is het met behulp van uitgebreide zoek en filtermogelijkheden makkelijk om content naar smaak te vinden.

Ook voor dit project hebben we wireframes gemaakt in Adobe Fireworks, waar we vervolgens een protoype mee maakten. Het prototype hebben we gebruikt om een aantal snelle tests te doen, waarvan we de resultaten gelijk in onze ontwerpen konden meenemen.

De nieuwe catalogus vind aansluiting bij de iPad app, door onder andere het gebruik van dezelfde iconenset. Op basis van ons interactieontwerp tekende Resoluut voor het grafisch ontwerp. Ziggo zelf was verantwoordelijk voor de technische realisatie.

dezefolderswel.nl is een nieuwe dienst van PostNL die op het moment nog in de testfase zit. Een selecte groep huishoudens in Nederland is eenmalig benaderd om hier aan deel te nemen. Deze personen kunnen met dezefolderswel.nl zelf bepalen welke reclamefolders zij in hun brievenbus willen ontvangen. Men krijgt dus alleen de reclamefolders die men zelf uitkiest! Bovendien is het erg eenvoudig om het folderpakket te wijzigen, aan te geven dat je geen folders meer wilt ontvangen of tijdelijk de dienst stop te zetten, als je bijvoorbeeld op vakantie bent.

Eerste bezoek
De gebruiker logt, bij het eerste bezoek aan de website, in met een code die hij via de post heeft ontvangen. Daarna worden drie eenvoudige stappen doorlopen om een reclamefolderpakket samen te stellen. Bij een volgend bezoek kan er worden ingelogd met een e-mail adres en wachtwoord om het pakket eenvoudig te wijzigen of eventueel stop te zetten.

Ontwerpproces
Na een voorbereidend onderzoek over de haalbaarheid en wenselijkheid van het concept heeft PostNL UNITiD gevraagd om de website te ontwerpen. Als iemand geïnteresseerd is in de dienst, moet deze persoon natuurlijk niet afhaken doordat men de site niet begrijpt, het te lang duurt of te ingewikkeld is. Ons hele proces was erop gericht de gebruiker zo eenvoudig en zo snel mogelijk een passend folderpakket aan te laten vragen. Samen met PostNL hebben we alle doelen, taken en functionaliteiten benoemd. Vrijwel direct hierna hebben we tijdens een brainstorm een goede eerste flow gecreeërd. Hiermee (en met de andere uitkomsten van de brainstorm sessie) in ons achterhoofd hebben we onze eerste ideeën uitgetekend en hierover gediscussieerd met de klant en drie interactie ontwerpers.

Het beste idee hebben we uitgewerkt in wireframes. Met een eenvoudig prototype hebben we daarna het ontwerp getest met verschillende gebruikers. Na flink wat interviews en het tussentijds aanpassen van het ontwerp zijn we tot een definitief ontwerp gekomen. Het visuele ontwerp is gedaan door Acato. Zij hadden reeds ervaring met de spiksplinternieuwe huisstijl van PostNL.

De volledige website is nu alleen nog toegankelijk voor personen in de pilotgroep. Wij hopen natuurlijk op een goed resultaat van de testfase, zodat iedereen gebruik kan maken van deze nieuwe dienst!

Uiteraard maakten we bij het ontwerpproces gebruik van onze favoriete tools:

• A5 scope cards
• Onze enorme magnetische brainstorm muur
• Fireworks voor wireframes, prototype en visueel ontwerp
• RITE testing
• InDesign voor documentatie
• Basecamp voor communicatie

Op zaterdag 28 mei keerde Achmea, naar aanleiding van haar 200 jarig bestaan, terug naar de wortels van haar bedrijf en organiseerde in het Friese dorpje Achlum de Conventie van Achlum. Maanden van voorbereiding gingen vooraf aan dit evenement en ook wij hebben vanaf oktober gewerkt aan de website en mobiele site.

Aangezien het hier ging om een site voor een evenement, moest de site flexibel zijn en ruimte bieden aan verschillende informatie op verschillende momenten. We zijn daarom begonnen met het in kaart brengen van alle informatie en functionaliteiten die geïntegreerd moesten worden binnen de site en hebben deze ingedeeld in verschillende fases. Vervolgens hebben we de site structuur opgezet, waarbinnen alle informatie en functionaliteiten een plekje kregen. Met deze structuur als uitgangspunt zijn we per fase te werk gegaan.

Zo bestond de eerste fase en hiermee de eerste release van de site uit de vooraankondiging van de conventie en kon men een eerste indruk krijgen van wat deze dag in zou gaan houden. In volgende fases ontwierpen we onder andere de mogelijkheid je aan te melden voor de conventie, een interactief blokkenschema waarmee je je persoonlijke programma kon samenstellen en een brainstorm waarbij je kon reageren op verschillende stellingen omtrent de toekomst van Nederland. Op de dag van de Conventie konden degenen die niet in Achlum aanwezig waren de live stream volgen via de site.

Voor degenen die wel aanwezig waren in Achlum ontwierpen we ook de mobiele site van de Conventie. Hiermee kon je de meest recente tweets met #achlum volgen, snel even je persoonlijke programma bekijken of de plattegrond raadplegen om snel je weg te vinden in Achlum.

Ondanks de kou en regen werd het een succesvolle dag met als onderwerp van gesprek ‘De staat en de toekomst van Nederland’. Een groot aantal sprekers kwam voorbij, waaronder voormalig Amerikaans President Bill Clinton, Hans Wiegel, Femke Halsema en Geert Mak.

Nu de Conventie geweest is, kan je op de site nog terecht voor de laatste nieuwsberichten, conclusies en (video)verslagen.

UNITiD was verantwoordelijk voor het interactie ontwerp voor beide sites, Resoluut voor het grafisch ontwerp en TechTribe voor de technische realisatie.

Sociaal op Stap (SoS) bestaat uit een website en Android applicatie voor jongeren met autisme. De website is erop gericht deze jongeren te helpen met sociale situaties. Iemand begroeten of iemand troosten is namelijk nog niet zo makkelijk als je een vorm van autisme hebt. “Sociaal op Stap” is een gezamelijk initiatief  van de CED-groep en het Landelijk Netwerk Autisme en heeft gisteren een IPON stimuleringsaward gewonnen. Deze award wordt uitgereikt aan ICT producten voor het onderwijs die zich onderscheiden in innovatie, kwaliteit en originaliteit. De genomineerden zijn beoordeelt op gebruik, ontwerp, toegankelijkheid en prijs, waarbij SociaalOpStap als beste uit de bus kwam. Een award om trots op te zijn dus. Bij deze feliciteren wij daarom de CED groep en het Landelijk Netwerk Autisme.

SociaalOpStap bestaat uit stappenplannen die je helpen in sociale situaties. Hoe geef je iemand een compliment bijvoorbeeld? Op de website kunnen jongeren de stappenplannen aanpassen. Omdat sociale situaties zich meestal niet afspelen achter je desktop, is er ook een mobiele website en Android app. UNITiD was verantwoordelijk voor het interactie ontwerp. Het grafisch ontwerp is gemaakt door Resoluut. Elements interactive heeft de technische realisatie voor zijn rekening genomen.

Het ontwerpen voor jongeren met autisme vraagt om inlevingsvermogen en kennis van de doelgroep. Voor mijn afstudeerproject (DfI, TU Delft) heb ik ook een mobiele applicatie ontworpen voor autistische jongeren en had daarom al veel onderzoek gedaan naar de doelgroep. Voor SoS hebben we ook een aantal prototypes getest met jongeren, wat uiteindelijk tot een mooi resultaat heeft geleid. Wij denken dat toepassingen met (mobiele) technologie een enorm verschil kunnen maken voor jongeren met een beperking, mits deze goed aansluiten bij de verwachtingen en specifieke situaties van de gebruikers.

De Vereniging Gehandicaptenzorg Nederland (VGN), gevestigd te Utrecht, is de brancheorganisatie voor de aanbieders van zorg- en dienstverlening aan mensen met een handicap. Sinds 14 oktober heeft VGN een nieuwe website, die door UNITiD, Resoluut en Elements is ontworpen en gebouwd.

Nu heeft de website ook het keurmerk drempelvrij behaald op 8 februari. Drempelvrij is een Nederlands keurmerk voor toegankelijke websites. Websites die drempelvrij zijn, zijn door alle bezoekers goed te gebruiken en de websites zijn ook beter te vinden door zoekmachines. Vanaf het begin van het ontwerptraject is er rekening mee gehouden dat de website drempelvrij moet zijn.

Voor het nieuwe ontwerp is door ons eerst een scope sessie georganiseerd om zo beter in kaart te brengen welke eisen en wensen belangrijk en realiseerbaar zijn. Extra aandacht ging uit naar het besloten gedeelte, zodat medewerkers van VGN-leden meer uitgenodigd worden tot participatie en het delen van kennis.

Met behulp van een sketch board sessie is een concept neergezet dat aan de wensen van VGN voldoet, en het goed mogelijk maakt de website drempelvrij te ontwikkelen. Uiteindelijk  is er een klikbaar prototype opgeleverd, waarmee het interactie-ontwerp kon worden getest.

]]> http://unitid.nl/2011/03/vgn-is-drempelvrij/feed/ 0 http://unitid.nl/2011/01/aangeboden-android-patterns/ http://unitid.nl/2011/01/aangeboden-android-patterns/#comments Mon, 31 Jan 2011 12:32:02 +0000 Matthijs http://unitid.nl/?p=2657 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.

Is Mark Rutte een man van zijn woord? Dankzij RTL Nieuws zullen we dat snel weten. Aan de vooravond van de eerste 100 dagen van het kabinet Rutte lanceert RTL Nieuws namelijk: Ruttes Rapport. En op die website volgt de politieke redactie zestig belangrijke beloftes uit het regeerakkoord op de voet. Het interactie ontwerp voor Rutte’s Rapport is van UNITiD. Het grafische ontwerp is gemaakt door onze partner: Resoluut. Aubergine IT is verantwoordelijk voor de technische realisatie.

De interactieve infographic op de hoofdpagina zorgt ervoor dat je in één oogopslag kan zien of Rutte zijn plannen waar maakt. De politieke redactie van RTL Nieuws houdt van elke belofte de status bij en verzorgt updates over de laatste stand van zaken. Daarnaast houd de redactie bij hoeveel er van een belofte overblijft zodra deze in behandeling wordt genomen. Maandelijks zal politiek verslaggever Frits Wester een online tussenstand op de site verzorgen.

De updates van de redactie kan je ook volgen via twitter, en iedereen kan mee praten op de twitterfeed via #ruttesrapport. Op de site vind je ook een overzicht van populairste beloftes en meest recent bereikte beloftes.

Vorige week ging makkie.nl van Sanoma Digital online. Makkie.nl maakt kiezen en kopen veel gemakkelijker voor je. Nu eerst nog in een beta-versie. En begin volgend jaar definitief. UNITiD tekende voor het interactie ontwerp.

Als gezegd: makkie wil het makkelijker voor je maken. Dat gebeurt op een aantal manieren. Op basis van de mening van consumenten, maakt de site je snel duidelijk wat de 5 beste en 5 meest bekeken producten zijn. Ook vind je op Makkie.nl handige tips die je op weg helpen bij het kiezen van producten. Bovendien worden de specificaties zo veel mogelijk in gewone-mensentaal geschreven. Dat laatste is overigens een proces waaraan tijdens de beta-versie nog volop wordt gewerkt.

Tenslotte helpt makkie.nl je aan inspiratie met hun checkists. Dat zijn handige overzichten met punten die je niet mag vergeten als je gaat verhuizen, kerstcadeas gaat kopen of wanneer je het huis wilt opknappen.

Ontwerp

Vanaf het begin heeft UNITiD Sanoma Digital bijgestaan om het idee van een nieuwe vergelijkingssite uit te werken en vorm te geven. In een aantal gezamenlijke sessies werd het concept bepaald.

Verder tekende UNITiD voor het interactie ontwerp. Het grafische ontwerp werd verzorgd door onze partner: Resoluut. IBuildings nam de technische realisatie voor haar rekening.

.open up is een campagne van NJR die jongeren aan het denken zet over homo-emancipatie. Zo worden jongeren, maar vooral ook professionals, tools geboden om met de .open up methode aan de slag te gaan om zo dit onderwerp bespreekbaar te maken.

De vernieuwde .open up site laat jongeren zien wat .open up doet en wat je zelf zoal kunt ondernemen, variërend van het aanvragen van een cocktailbar voor op school, tot het organiseren van een ludieke actie om anderen te laten nadenken over homo-emancipatie. Daarnaast kun je je aanmelden als vrijwilliger en kun je allerlei materialen downloaden.

Naast het jongeren deel is er een aparte ingang voor professionals, met een eigen, formelere look en feel. Docenten en jongerenwerkers die binnen hun sector met het onderwerp aan de slag willen kunnen hier informatie vinden over wat de .open up methode hen te bieden heeft.

UNITiD is verantwoordelijk voor het interactie ontwerp, Resoluut voor het grafisch ontwerp en Techtribe voor de ontwikkeling.