Samen met RTL Nieuws tekende UNITiD voor de klus.

Opdracht

• Breng met een paar kleine, welgemikte design ingrepen een nieuw online uiterlijk tot stand voor RTL Nieuws.

• Beter passend bij de merkwaardes van RTL Nieuws. Maak het ook meer hedendaags.
• Creëer meer ruimte voor het rijke aanbod van RTL Nieuws.

Randvoorwaarde:

Verzin een list. Aan de technische achterkant zal vooralsnog niets gewijzigd worden.

Gemaakte keuzes

• De creatie van een nieuw kleuren pallet dat herkenbaar en onderscheidend is.
• Overzichtelijke lay-out die ruimte biedt aan urgentie, zonder schreeuwerig te zijn.
• Ruimtelijke en gecentreerde kolom layout.
• Verbeterde visuele hiërarchie helpt de lezer bij het maken van keuzes.

Resultaat

Before

After

Voor Sanoma Media hebben we onlangs de Kieskeurig app herontworpen. De in 2010 gelanceerde app was alweer toe aan een fikse update. Met name de hoofdnavigatie en zoekfunctie hebben we fiks onder handen mogen nemen. Vanwege het snel toenemende aantal Android-toestellen wilde Sanoma de app ook voor dit mobiele platform aanbieden.

De belangrijkste functionaliteit die een metamorfose moest krijgen binnen de app was het vinden van producten. Het scannen van de barcode, om bijvoorbeeld snel reviews en prijzen van het product te checken, werkt vooralsnog prima. Het vinden van producten via het zoekveld is in de oude versie echter een stuk lastiger. Gebruikers hadden daarnaast een grote behoefte om producten met elkaar te kunnen vergelijken. Iets wat op de website vaak wordt gebruikt, en dus ook voor mobiel beschikbaar zou moeten zijn.

Ontwerpproces

We zijn direct aan de slag gegaan met het schetsen van de verschillende schermen voor, ten eerste, de iPhone applicatie. Een juiste vertaling naar Android volgde later. Deze schermen zijn vertaald naar digitale wireframes en met TAP razendsnel in een clickable prototype verwerkt. Met nog wat wijzigingen hier en daar werd het tijd voor een vertaling naar Android. Android gebruikers zijn een andere interface, een andere vormgeving en een andere flow gewend. De ontworpen iPhone app kon dus niet zomaar klakkeloos worden overgenomen in een Android app. Met hulp van onze Android kenners zijn we elk scherm van het her-ontwerp voor de iPhone app langsgelopen en hebben we gekeken hoe we dit het meest gebruiksvriendelijk konden weergeven.

Schetsen werden weer digitaal gemaakt, wireframes weer tot een clickable prototype gebouwd. Ook de vormgeving voor Android kreeg speciale aandacht. Uiteindelijk werd er een apart Interaction Design geschreven voor de iPhone applicatie en voor de Android applicatie.

Eerste recensies

So what’s next? Een op maat gemaakte tablet versie wellicht?

Achter de schermen zijn we er al even mee bezig, maar nu is het zo ver. We hebben Windows Phone Patterns, het zusje van het succesvolle Android Patterns, gelanceerd! De site is met name bestemd voor collega interactie ontwerpers, maar ook developers zijn natuurlijk helemaal welkom.

Op Windows Phone Patterns vind je een selectie aan ‘interaction patterns’. Dat zijn beproefde oplossingen voor veel voorkomende ontwerp-problemen. Zo hoef je niet ieder wiel opnieuw uit te vinden en houd je energie over voor de grotere ontwerp-problemen.

Windows Phone
Ontwerpen voor het nieuwe besturingssysteem van Microsoft is redelijk anders dan ontwerpen voor Android of iOS. Zo is de interface gebaseerd op Metro, de nieuwe design-taal van Microsoft, die zich sterk onderscheid van andere interface-stijlen door zijn ruimtelijke stijl en typografie.

Verder staat op de Windows Phone het sociale netwerk van de gebruiker centraal. Facebook,Twitter en LinkedIn zijn bijvoorbeeld geïntegreerd in de contactenlijst. Iets anders dat sterk afwijkt is het startscherm met de zogenaamde Live tiles. In tegenstelling tot icons kunnen ‘Live tiles’ ook content bevatten, bijvoorbeeld de bustijden van de dichtstbijzijnde halte. Of de stand van de thermostaat bij je thuis.

Tenslotte is ook de navigatie anders dan bij andere smartphone-interfaces. De gebruiker navigeert namelijk horizontaal door de content, door middel van panorama’s en pivots. Er zijn nog veel meer verschillen, maar die zal ik hier niet allemaal opnoemen.

Aan de slag
We denken dat Microsoft met met Windows Phone een fijn alternatief biedt voor Android van Google en iOS van Apple. Dat is goed nieuws voor de consumenten want door de onderlinge strijd worden de besturingssystemen immers in hoog tempo beter en gebruikersvriendelijker. Tijd om ook mooie interactie-ontwerpen te maken voor het nieuwe platform.

We hebben inmiddels twintig patterns online staan die we graag met je delen. De komende maanden zullen we de website regelmatig aanvullen. Maar mocht je nu al patterns tegen komen, die nog niet op de website staan – en die kans is groot – voel je dan vrij om ze te beschrijven en ze voor te dragen. Je kunt daarvoor de Windows Phone Pattern toolkit gebruiken die we zelf ook gebruiken.

Vanaf vanochtend is hij te downloaden: de eerste echte digitale krant van Nederland: RTL Nieuws 365. Deze gloednieuwe iPad app van RTL brengt je, in woord en beeld, het laatste nieuws uit binnen- en buitenland en alles over sport, showbizz en lifestyle.

We vinden het een pareltje, maar dat is niet zo vreemd, want vanaf het eerste begin hebben we met UNITiD keihard meegewerkt aan concept- en interactie-ontwerp.

Ruim een jaar geleden trokken we ons met de redactie van RTL Nieuws terug in een heuse Hilversumse war room  om in een paar weken tijd visie en ideeën te ontwikkelen. En vooral om de eerste schetsen op de muur te krijgen.

Drie van die schetsen zie je hier. Ze gaan al aardig in de goede richting.

Intussen is er door heel veel mensen heel veel werk verzet en na vele meetings, review-sessies, wireframes, designsessies, usability tests, naamswijzigingen, visuals, slices, sound-effects en prototypes staat er een eindresultaat om trots op te zijn.

In onderstaand filmpje geeft hoofdredacteur Harm Taselaar een uitgebreide demonstratie van de mogelijkheden van de app.

Probeer hem zelf uit en vergeet niet om je waardering achter te laten. Onze suggestie (het zal je niet verbazen): 5 sterren

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.

Tegenwoordig wordt er online erg veel geschreven, verspreid en gedeeld. Daarnaast kan nieuws op vele verschillende sites en platforms gelezen worden. Hierdoor is erg veel informatie beschikbaar en toegankelijk voor allerlei soorten mensen op allerlei soorten manieren. Soms komt er zoveel informatie op je af dat je niet weet waar je moet beginnen. Het zou natuurlijk ideaal zijn als al deze online beschikbaar nieuws verzameld werd op een plek, en dat je nieuws kunt verzamelen geselecteerd op jouw persoonlijke interesses.

Er zijn veel sites die zich bezighouden met het verzamelen van nieuws en aggregeren van feeds. Nine connections (www.nineconnections.com) is daarentegen niet alleen een netwerk dat nieuws sneller bij je brengt, maar gebruikers ook de mogelijkheid biedt om te exploreren en verrassend nieuws te ontdekken.

Het idee 

Via nine connections voeg je zoals de naam al zegt een negen maximaal aantal connecties toe aan je “grid”. Het idee is dat via deze negen connecties eigenlijk al het nieuws via de sociale netwerken naar je toekomt. Op dit moment is het alleen nog gekoppeld aan Twitter, later zal dit worden uitgebreid naar meerdere netwerken. Je kunt een grid maken waar je alleen maar connecties in hebt die bijvoorbeeld iets te maken heb met interaction design of met Egypte. Doordat je als gebruiker maar een beperkt aantal aan mensen mag toevoegen, kies je zorgvuldig je connecties.  Het nieuws dat je binnenkrijgt via nine connections is ook gebaseerd op hoe jij je gedraagt t.o.v. dat nieuws. Dus naarmate je het verder gebruikt zal het nieuws dat binnenkomt steeds meer verder worden gefilterd op je gedrag en dus op je interesses. Bij nine connections ligt de focus op het toevoegen van connecties. Wanneer je een connectie toevoegt, voeg je daarmee niet alleen het nieuws toe dat die ene connectie heeft gedeeld, maar krijg je dus ook automatisch het nieuws binnen dat via zijn/ haar twittervrienden is binnengekomen. Nine connections graaft drie lagen diep in het (Twitter)netwerk naar nieuws. Je connecties vormen gezamenlijk via een grid een nieuwskanaal waar doorheen nieuws naar je toe stroomt. Op die manier kun je als gebruiker artikelen ontdekken die jou anders niet zou hebben bereikt. Daarnaast hoef je zelf niet actief te delen want je voorziet de connecties die jou toevoegen altijd van nieuws door de connecties die jij hebt toegevoegd aan je grids. Je geeft als het ware passief het nieuws van je netwerk door.

Het ontwerp 

Qua interactie was het een uitdaging om met zoveel content een simpele en overzichtelijke tool te maken. Er is veel te exploreren in nine connections. De ontdekking moet soepel blijven en gebruikers moeten makkelijk terug kunnen naar waar ze waren begonnen.

Voor het ontwerp van nieuws lezen hebben we gebruikt gemaakt van panelen. De uitdaging van het gebruik van de panelen zit hem in het feit dat er via verschillende paden nieuws kan worden gelezen. De eerste manier om nieuws te lezen is vanuit de newsfeed van een van de grids. De tweede manier is om nieuws te lezen vanuit de newsfeed in het profiel van een van je connecties. In beide gevallen selecteer je een headline uit de newsfeed en ernaast opent het volledige artikel in een tweede panel. Samen vormen de panelen een booklet.

Onder de headline van elk artikel kun je zien via welke connecties van je grid het artikel is binnengekomen. Wanneer er op een connectie wordt geklikt opent zijn/ haar profiel in een nieuw panel waarin korte informatie en de newsfeed van de desbetreffende connectie in staat. Als de connectie ook een account heeft in nine connections kun je ook zijn/ haar grids bekijken. Je kunt weer op een van de connecties in een grid klikken en de newsfeed van de nieuwe connectie bekijken. Door de verschillende connecties die je tegenkomt, kun je dus blijven graven in het nieuws.

Terwijl je nieuwe connecties tegenkomt tijdens het nieuwslezen bestaat er natuurlijk ook de mogelijkheid om deze connecties aan je grid toe te voegen. Dit kun je doen door op het knopje “add” te klikken of door de connecties naar het gewenste grid te slepen.

In nine connections bestaat er ook de mogelijkheid om je connecties te “managen”. Vanuit deze functie kun je connecties zoeken en toevoegen aan je grids. Ook kun je in manage connections nieuwe grids aanmaken of grids verwijderen. Tegelijkertijd kun je zien wat voor invloed de nieuwe connectie heeft op je newsfeed.

Het visuele ontwerp is gerealiseerd door Resoluut.

Beta

Op dit moment is NineConnections voorlopig alleen nog te gebruiken via een invite- only Beta. Binnenkort wordt de site officieel gelanceerd.

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

De QRcode op de Jodenbreestraat (de QRcode werkt ook vanaf het scherm)

De verborgen culturele schatten van de IJdijken

Enkele eeuwen geleden is er begonnen met de aanleg van een serie dijken die het gebied rond de rivier ‘t IJ moest beschermen tegen het water. In de loop der jaren is er in het gebied veel gebeurd, deze verhalen zijn recentelijk digitaal verzameld en een selectie van deze verhalen is ondergebracht in een route die langs een deel van de IJdijken loopt.

De Opdracht

Recentelijk kregen wij via Sparked de opdracht een mobiele website te ontwerpen om deze verhalen te ontsluiten. Het interessante aan deze opdracht was dat de website locatie specifiek moet zijn en twee dingen goed moet kunnen. Enerzijds moet de website mensen langs de route kunnen leiden en daarnaast moest deze de op detail niveau de verhalen ontsluiten. Onderdeel van de opdracht was dat het moet werken op Android en iPhone en een beperkte ondersteuning geeft aan overige toestellen.

Langs de route zijn op de fysieke locaties borden uitgezet, die de gebruiker naar de website verwijzen. Door het invoeren van een korte URL of het scannen van de QRcode komt men direct op de website van de specifieke locatie.

Eerste conceptuele schetsen

Het ontwerpproces

In het ontwerp kreeg iedere locatie op de route een eigen website waar vanuit de gebruiker de bijbehorende verhalen kan ontdekken. We hebben gekozen de locaties in een simpele kaart weer te geven zodat de gebruiker inzicht heeft in de plaats waar hij of zij zich bevind. Op deze kaart worden de verhalen als locatie markers weergegeven.

Scan de code om de demo op je mobiel te zien.

Vanwege het visuele karakter van de verhalen, hebben we ze als korte sideshows ontworpen waar de gebruiker doorheen kan swipen. Na het maken van een demoversie, konden we verder met het visuele ontwerp (in samenwerking met Resoluut) en het maken van het uiteindelijke product (door MediaBunker).

Het resultaat

De IJdijkenroute die nu staat uitgezet loopt van het Pontplein in Velsen naar de Jodenbreestraat in Amsterdam en is ongeveer 40 km lang. De route kan in beide richtingen gelopen/gefietst worden, zie de ijdijkenroute website voor aanvullende informatie.

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

• Fireworks voor wireframes en visueel ontwerp
• TAP voor prototyping
• InDesign voor documentatie

Na de succesvolle en zeer goed gewaardeerde Ziggo TV iPad app vroeg Ziggo ons ook te buigen over het interactie ontwerp van de  iPhone versie.

Uiteraard zijn de verwachtingen hoog. Onze ambities ook. Deze versie zal beter moeten worden dan de iPad app. Zeker geen één op één kopie. Een iPhone gebruikt men immers anders dan een iPad. Toch biedt de iPhone app, ondanks het veel kleinere scherm, evenveel functionaliteiten als de iPad app. De verschillen zitten onder andere in de menustructuur, layout, transities en gestures.

Hieronder licht ik kort de achterliggende gedachte van enkele wijzigingen toe.

• De iPhone app is geschikter om even snel te kijken wat er op TV is. Een openingsscherm (in de iPad app “home” tab) ontbreekt. De app opent direct in de TV gids met de tips van vandaag. Zit er niks voor je tussen, dan geeft de app een aantal aanbevelingen voor On Demand films.
• Binnen 1 klik zit je in de TV gids waar je direct ziet wat er nu op TV is. Een andere dag of tijd kiezen kan snel en precies. Standaard worden alleen de 30 meest populaire zenders getoond, zodat de app sneller laadt bij een langzamere internetverbinding.
• In het zenderoverzicht kan je nu ook snel een zender vinden door de eerste letters van de zender in te voeren.
• Alle detailpagina’s openen in een eigen scherm en krijgen hier de volledige ruimte. De tab bar ontbreekt om extra aandacht te geven aan de content en de mogelijke acties zoals het toevoegen van een programma aan je favorieten en een alarm in te stellen. Het beheer van je favorieten is trouwens erg eenvoudig geworden.
• De On Demand sectie heeft net als bij iPad een carousel met een selectie van de beste films. Door te scrollen door de lijst verdwijnt de carousel naar boven. Zo staat deze nooit in de weg, maar is ook eenvoudig weer terug te vinden.

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

• Fireworks voor wireframes en visueel ontwerp
• TAP voor prototyping
• InDesign voor documentatie

Neem voor een uitgebreider verhaal vooral contact met ons op. Nu weer even verder met het ontwerpen van nog een flink aantal niet nader te noemen mooie diensten.

Zie ook het bericht op iPhone Club.

Het eerste scherm met TV tips

De TV gids met in het blauw de programma's die nu op TV zijn

Openingsscherm van de On Demand tab

Standaard zijn de 30 meest populaire zenders geselecteerd, maar dit is eenvoudig te wijzigen