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

Waarom video prototypen?

Interactie ontwerpen wordt steeds leuker. Vroeger ontwierp je het gebruiksgemak voor één apparaat. Tegenwoordig gaat het steeds meer om combinaties van apparaten. Want werkelijk ieder apparaat gaat tegenwoordig online. Lantaarnpalen, weegschalen, stoeptegels… Als je apparaten met internet verbindt, kun je er opeens veel meer mee. Wat gebeurt er als je magnetron met je praat via je TV? Hoe bijzonder is het als de stoeptegels voor je huis verschillend kleuren, afhankelijk van de stand bij de voetbalwedstrijd Nederland – Duitsland?

Interactie ontwerpen gaat steeds meer in de richting van het ontwerpen van diensten en het ontwerpen van ervaringen. Video prototyping is een mooie manier om de visie op zo’n ervaring vorm te geven.

We gaan de komende maanden meer filmpjes maken. Hebben we zin in!

En wel in de categorie Broadcasters/Publishers. Vorige week werd de app genomineerd voor deze categorie, samen met The Voice Kids Game, gemaakt door LBi Mobile, en de Veronica Magazine TV app naar ontwerp van Mobtzu.

De Ziggo apps blonken vooral uit door de goed gewaardeerde user interface. Dat horen wij natuurlijk graag. We werken namelijk samen met Xaton inmiddels alweer bijna anderhalf jaar aan de verschillende releases van de app, die bij elke update uitgebreider, sneller en fijner te gebruiken is.

Wij willen Ziggo bij deze feliciteren met de prijs en nu we het er toch over hebben, heel erg bedanken voor fantastisch opdrachtgeverschap en grote aandacht voor goed ontwerp.

Wat mij verder opviel was dat er maar liefst vier TV gidsen genomineerd waren. Naast de Ziggo en de Veronica apps waren de apps tvgids.nl en tvgids.tv genomineerd voor de publieksprijs waar tvgids.tv uiteindelijk mee naar huis ging. Volgens mij geeft dit aan dat TV en mobiel dikke vrienden zijn en dat nog lang zullen blijven.

Foto’s volgen!

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.

Dit stukje verscheen eerder in Dzone, vakblad voor designers. Dzone publiceert 6x per jaar over ontwerpen in de breedste zin van het woord. Mooi magazine! Meer over Dzone

Als Frank Sinatra nog leefde, zou hij één van de beste interaction designers ter wereld zijn. De Voice stond namelijk bekend om zijn timing. En timing bepaalt steeds vaker of een ding, dienst, spel of apparaat lekker werkt. Frank Sinatra had de ontwerper van Cut the Rope kunnen zijn. Want Cut the Rope is dope. Hulp en instructies komen geen tiende tel te vroeg. En ook niet te laat.

Ken je Cut the Rope? De laatste versie ‘Experiments’ is net een paar maanden uit. Het spel laat zich in zo’n 20 woorden omschrijven. Je moet met je vinger touwtjes doorsnijden zodat een lekkere lolly in de bek valt van iets wat op een kikvors lijkt. Meer is het niet. Is dat genoeg om een topper in de App Store te worden? Zeker! Een dikke 83% van alle reviews telt 5 sterren. En nog eens 14% doet 4 sterren. Hier is sprake van: Respect! Waar kan dat aan liggen?

Flow en timing
Duizend dingen zijn goed aan Cut the Rope. Vijf dingen lees je hier. Een: het is lachwekkend op een intelligente manier. Twee: het lukt om je in de flow van Csíkszentmihályi te brengen. Je kent het. De flow waarin je hyper-gefocust raakt, je alles onder controle hebt en je jezelf niet meer bewust bent van zaken als: tijd, slaap, honger of dorst. En tenslotte drie, vier en vijf: timing!

Het hele spel is natuurlijk een kwestie van goede timing. Maar het gaat me nu om de momenten waarop instructies en navigatiehulp wordt geboden. Die momenten zijn exact goed gekozen. Dat lijkt even voor de hand liggend als een rond wiel. Maar dat is het niet. Vergelijk het met de homepage van de eerste de beste commerciële website die je te binnen schiet.

Alles in je gezicht
In 90% van de gevallen worden daar geen keuzes gemaakt en staat alle hulp en alle vervolginstructies direct in je gezicht. Direct in beeld. En natuurlijk: boven the fold, want anders zien de klanten het niet, is de gangbare opvatting. Dus zie je al die hulp in de vorm van meerdere navigatiebalken, aanvullende menu’s en een paar extra weblinks op iedere pagina van een site terug. Want je weet maar nooit.

4 dimensies
Het is vermoedelijk een nawee van het papieren tijdperk dat we zo tweedimensionaal denken. Lengte. Hoogte. Dat is het. Niks diepte. Niks ruimte. Niks tijd. Webpagina’s vormen nog de bulk van het digitale ontwerpen. En de beperking van twee dimensies is dan al in de naam ‘webpage’ meegebakken.

Topspellen als Cut the Rope laten nu zien dat op apparaten zoals de iPad, waar de schermruimte even overvloedig is als op het web, toch gekozen kan worden voor focus op de inhoud. Eén knop in het algemeen en soms een goed getimede, heldere regel tekst… dat is het. Die kant moeten we op. Tijd om het touwtje met het tweedimensionale denken door te snijden. Tijd voor meer Frank Sinatra. Ook aan klantzijde.

Dit stukje verscheen eerder in Dzone, vakblad voor designers. Dzone publiceert 6x per jaar over ontwerpen in de breedste zin van het woord. Mooi magazine! Meer over Dzone

Dit stukje verscheen eerder in Dzone, vakblad voor designers. Dzone publiceert 6x per jaar over ontwerpen in de breedste zin van het woord. Mooi magazine! Meer over Dzone

Ontwerpen is een eenvoudig vak. Het gaat zelden om de dingen die je uitvoert, maar veel vaker om de dingen die je niet doet. De dingen die je schrapt. Het afgelopen jaar hebben we met UNITiD menig app voor de iPad ontworpen. En nu mag ik ook nog eens iPad-apps met je delen in Dzone. Terwijl anderen ze hebben ontworpen. Deze eerste keer: Zite. Dat is een iPad-app die je vertelt wat je wilt weten, voordat je zelf wist dat je het wilde weten. Bij het ontwerpen van Zite zijn vast veel goede ideeën geschrapt, want Zite werkt buitengewoon eenvoudig.

Overtreffende trap
Zite is de overtreffende trap van Google. Het is een aanbevelingen machine; geen doodgewone zoekmachine. Als je resultaten wilt, hoef je geen trefwoord in te typen. Het enige wat je moet doen, is: Zite starten. Een tapje op het petroleumgroene icoon en daar is de magie. Zite presenteert je een paar berichten. Je leest een eerste bericht en je denkt: hoe is het mogelijk? En dat denk je vervolgens steeds weer opnieuw. Hoe doen ze dat?

Het concept
Zite doet drie dingen goed. Ze – Zite is een vrouw geloof ik – brengt 24 uur per dag ruim 500.000 van de beste internetbronnen in kaart. Telkens als een bericht verschijnt, gaat bij Zite een lampje branden. Vervolgens kijkt Zite hoe vaak er online over dat bericht gepraat wordt. Hoe vaker, hoe groter de kans dat jij het krijgt te zien. Het tweede is, dat ze van ieder bericht een karakteristiek maakt om te zien hoe goed het bij je past. Het derde is, dat ze een profiel van jou maakt, zonder dat je daar uitgebreide vragenlijsten hoeft te beantwoorden. Als je toestemming geeft, kijkt ze wat je in sociale media als Twitter of Facebook hebt gedaan en herleidt daaruit je interesses. Maar je kunt ook anoniem van start gaan.

Steeds beter
Hoe vaker je Zite gebruikt, hoe beter Zite gaat werken. Dat is een afwijkende ontwerp-strategie! Vergelijk het bijvoorbeeld met een zaag. De meeste zagen worden botter als je veel zaagt. Zo niet Zite. Zite gaat je steeds beter snappen. Ze houdt bij welk soort berichten je leest. En als je een bericht achteraf goed of waardeloos vond, kun je dat ook laten weten, zodat je er meer of minder van te zien krijgt.

Schrappen is goed
Zite doet drie dingen heel erg goed en laat veel andere dingen achterwege. Die focus bij het ontwerpen en bouwen is de reden dat Zite zo ongelooflijk goed werkt. Je kunt veel dingen niet met Zite. Je kunt niet zoeken. Je kunt niet door een archief bladeren. Je kunt niet op berichten reageren. Je kunt niet zien wie over een artikel getwitterd heeft. En je kunt nog veel meer niet. Voor een aantal van die functies zijn op een slimme manier de bestaande diensten van anderen geïntegreerd (Read Later, bijvoorbeeld). Maar de meeste ideeën zijn gewoon geschrapt. Die lef om keuzes te maken, maakt Zite tot de beste aanbevelingenmachine die er is.

Dit stukje verscheen eerder in Dzone, vakblad voor designers. Dzone publiceert 6x per jaar over ontwerpen in de breedste zin van het woord. Mooi magazine! Meer over Dzone

Als je dit blog zo leest lijkt het alsof we alleen maar achter het toetsenbord zitten om sites en applicaties te ontwerpen en af en toe wat gereedschap te produceren. De laatste tijd zijn we echter offline ook behoorlijk actief.

We geven gastcolleges. We praten op conferenties. We faciliteren workshops en sessies bij klanten en partners. We schrijven in magazines. De onderwerpen zijn divers, maar hebben altijd wat te maken met ons ontwerpvak. Iets met digitaal en interactief. Over hoe we werken en wat ons bezighoudt.

Topics

Die onderwerpen heten bij ons “topics”. Iedereen bij ons is eigenaar van één of meerdere topics. Binnenkort publiceren we een complete lijst met alle topics en de bijbehorende “topic owners”. Ben je bijvoorbeeld docent op een CMD opleiding, manage je een UX afdeling of organiseer je een event rondom apps? Bel ons dan eens om iets te komen vertellen over het ontwerpen voor Android, het prototypen van iPhone apps of de verschillende vormen van responsive webdesign, bijvoorbeeld…

Waar je ons had kunnen treffen:

Workshop prototyping for iOS devices using TAP.

Spreker: Matthijs
Waar: Appsterdam Guru sessions, BNO, Amsterdam
Na een 4 uur durende sessie hadden alle deelnemers een klikbaar prototype op hun iPhone of iPad. Het publiek bestond uit marketeers, product ontwerpers, UX ontwerpers en developers.

Concept testing

Spreker: Jaap
Waar: Gastcollega HvA, opleiding CMD
Jaap vertelde over verschillende manieren hoe je een conceptontwerp bij gebruikers kunt testen.

Interaction Design basics.

Spreker: Bart
Waar: Gastcollege, ROC Amsterdam
Bart vertelt over ons vak, het ontwerpproces en de uitdagingen waar een interactie ontwerper voor staat.

User Experience. Wat is het en hoe ga ik ermee aan de slag

Spreker: Pascalle en Sara
Waar: Gastcollege en workshop, Haagse Hogeschool
Na een korte theoretische inleiding over wat User Experience inhoudt en uit welke elementen het bestaat werden er een aantal concepten ontwikkelt door de studenten.

UNITiD Design Process en workflow

Spreker: Matthijs
Waar: Gastcollege HvA, Workshop bij Ziggo.
Wij zijn eigenlijk constant bezig met het verbeteren van ons ontwerpproces. Inmiddels hebben we een aantal slimme methodes en tools die efficient zijn en tegelijkertijd producten van hoge kwaliteit opleveren.

Design guidelines for iPad

Spreker: Pascalle
Waar: Diverse hogescholen
Pascalle vertelt over haar ervaringen bij het ontwerpen van iPad applicaties zoals Viva Magazine, VI en Autoweek.

Using Fireworks for designing digital products

Spreker: Matthijs
Waar: Op de ontwerpstudios van onze klanten, bijvoorbeeld bij TomTom en Rabobank
Als je hier geïnteresseerd in bent lees dan ook het interview met Matthijs over Fireworks.

Koele apps

Schrijver: Rick
Waar: Dzone magazine
Eens in de twee maanden schrijft Rick een artikel in Dzone waar hij een koele app bespreekt vanuit het perspectief van een interactie ontwerper.

Het ontwerpen effectieve infographics

Schrijver: Fenna
Waar: Frankwatching
Fenna schreef een artikel voor Frankwatching over waar je allemaal aan moet denken als je een (interactieve en educatieve) infographic wilt maken.

Opvallende apps

Schrijver: Roland
Waar: Dutch Cowboys
Roland blogt regelmatig op Dutch Cowboys als er weer een opvallende of innovatieve app in de store verschijnt.

Ervaringen bij het ontwerpen van iPad apps

Spreker: Rick
Waar: Crossmedia Cafe Hilversum (video en de slides)
Rick vertelde bij het Crossmedia cafe over onze ervaringen bij het ontwerpen van apps als NU HD, VI Tablet en de Ziggo TV Gids.

Three design methods plus a bonus

Spreker: Rick
Waar: Mobile Mondays (video)
Op één van de laatste Mobile Mondays sprak Rick le Roy over drie belangrijke methodes die we voor Sanoma Digital toepasten: Envision, Scope en Prototype.

Trends in Mobile sites

Spreker: Matthijs
Waar: Bij verschillende klanten waaronder Greenpeace International
Het gaat hard in de wereld van het mobiele web. Deze presentatie moet eigenlijk elke twee maanden geupgrade worden. Wij zijn in ieder geval aardig op de hoogte.

UNITiD, het bureau

Sprekers: Ieder van ons
Waar: Bij een klant, een partner of bij ons in Amsterdam of Den Haag
We hebben best een interessante bureaupresentatie, al zeggen we het zelf. We komen hem graag eens laten zien.

Het voordeel van Responsive web design is dat de klant niet meer perse voor ieder apparaat een aparte app of website hoeft te laten maken en het dus kosten kan besparen. Voor bezoekers van websites is het fijn omdat de website op ieder apparaat dat ze in handen hebben goed te bekijken is.

Tijd voor een paar goede ontwerptools voor responsive design. Zoals je gewend bent (zie hier eerdere tools) willen we graag ons steentje bijdragen. Eerder al heeft Matt Stow een goede tool voor Fireworks ontwikkeld.

Onze oplossing is iets eenvoudiger en ideaal voor als je snel een ontwerp met de klant wilt delen of een hele simpele oplossing wilt, of niet met Fireworks werkt (!?)

We willen ook niet beginnen met een lijst met voorbeelden, maar delen we een simpele “tool” waarmee je eenvoudig en snel je ontwerpen kunt presenteren op verschillende formaten en apparaten, zodat je direct je (responsive) design kunt demonstreren aan je klant of aan wie het maar zien wil.

Met de bestanden in het bijgevoegde zip archief is het heel eenvoudig één pagina in 3 verschillende formaten te presenteren.

Bekijk de demo op je mobiel

Hoe werkt het?

Je maakt je design in 3 verschillende afmetingen( 320px breed, 768px breed en 1024px breed).

Open het zip archief, hierin vind  je een HTML pagina, een css bestand en een viertal afbeeldingen. Vervang de afbeeldingen in de map ‘images’ met jouw eigen afbeeldingen (maar laat de spacer.png staan)

De HTML pagina is klaar voor gebruik, hier hoef je niets aan te veranderen. Het is misschien wel zo aardig en zo volledig om de naam van de klant of het project in de titel van het document te zetten.

De stylesheet is nu op 3 formaten ingesteld, 1024px (desktop en iPad in landscape ), 768px (iPad in portrait) en 320px breed (iPhone in portrait en landscape).

Het enige wat je in de stylesheet hoeft aan te passen zijn de bestandsnamen van de afbeeldingen zodat deze overeenkomen met de bestandsnamen van jouw afbeeldingen en het geheel online te zetten.

Dat is alles, het enige wat je nu nog hoeft te doen is je klant verbaasd doen staan van je ontwerp!

 Ok, vooruit een paar voorbeelden dan van responsive websites:

• Designmadeingermany.de magazin 5
• Hicks design
• Foodsense

Voor een volledige lijst kun je deze geweldige website er op naslaan:

• Mediaqueries

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