WIRED’s digitale magazine

In februari presenteerden WIRED en Adobe hun tablet versie van WIRED magazine. Een prachtige werkende applicatie voor tablets met Adobe AIR. Video, animatie en slimme interacties laten zien wat digitale magazines ons binnenkort gaan brengen.

Sports Illustrated

De visie van Time Inc op tablet magazines.

Sports Illustrated – Tablet Demo 1.5

Bonnier Mag+ prototype

Al in december 2009 liet Bonnier haar visie op de toekomst van digitale magazines zien in deze indrukwekkende video.

Mag+ from Bonnier.

Binnenkort meer nieuws van UNITiD!

• Waar is hier een Volkswagen dealer te vinden?
• In welke tent treedt mijn favoriete festival artiest op?
• Waar vind ik het voordeligste product?
• Is er een zwembad op loopafstand?

Voor MIMOA werkt UNITiD nu aan een iPhone app met MAPPS, zodat gebruikers overal en altijd toegang hebben tot de allernieuwste architectuurprojecten.

Bij MIMOA, de online gids voor moderne architectuur, kun je nu al zoeken in een paar duizend projecten die continu worden aangevuld door gebruikers van de website. Deze informatie is straks ook beschikbaar op de iPhone.

Voor SpecialBite werkt UNITiD ook aan een locatiegebaseerde iPhone app. Vinden van bijvoorbeeld het dichtsbijzijnde Thaise restaurant, en een omschrijving en waardering van bezoekers, is daarmee mogelijk.

MAPPS versies

Wil jij ook een iPhone app waarmee je klanten of bezoekers op elk moment en vanaf elke plek toegang hebben tot jouw gegevens, dan kan dat met één van de 3 versies van MAPPS; Basic, Extended of Premium.

Van een simpele lijst- en kaartweergave, en een detailpagina met koppelingen naar Maps (route), Safari (website) en Phone (bellen). Tot naadloze navigatie tussen de lijst- en kaartweergaves en zoeken op trefwoord en bladeren door categorieen.

Om MAPPS te realiseren werkt UNITiD samen met Elements Interactive, verantwoordelijk voor development, en HBMEO voor advertising en PR. Deze samenwerking heeft geleid tot een unieke en flexibele iPhone app. Meer informatie over de mogelijkheden van MAPPS vind je op mapps.nl.

Mail of bel ons gerust als je wilt weten hoe we je kunnen helpen met MAPPS!

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?

Het kan heel interessant zijn om op een andere manier naar je sociale netwerken te kijken. Slimme programmeurs experimenteren met visualisaties van vrienden op bijvoorbeeld Facebook, Last FM en LiveJournal met soms schitterende resultaten. In ieder geval bieden ze weer eens een nieuw perspectief. Zo ontwikkelde Sebastian van Sande de Facebook Visualiser.

Als een organisch geheel vormen zich sociale netwerken om een geselecteerde vriend. Je ziet meteen welke vrienden bij elkaar horen, welke subgroepen van vrienden zijn ontstaan om een bepaalde vriend of vriendin, en er kunnen filters toegepast worden op je netwerk. Een andere visualisatie is die van Daniel Claren, hij ontwikkelde de Mutual Friend Network Visualisation.

Toegevoegde waarde

Wanneer voegt zo’n interactieve netwerkvisualisatie echt iets toe? Gaat het vooral om een ontdekkend navigeren, het kijken naar data vanuit een nieuw perspectief? Bij een bestaand netwerk waarbij je zelf vrienden hebt toegevoegd, biedt het een nieuwe blik op je bestaande connecties. Je weet al grotendeels welke gezamenlijke vrienden er zijn en welke gedeelde interesses je hebt. Het is een leuke speelse manier om naar je vriendengroep te kijken.

Bij een netwerk waar je bij hoort vanuit interesse of professie, biedt een dergelijke visualisatie meer voordelen. Zoek je iemand met bepaalde kennis of vaardigheden binnen je bedrijf? Dan kan je snel zien wie de meest relevante kennis heeft, wie dichtbij je staan in je netwerk, wie je kan introduceren aan die persoon. Dit kan handig zijn voor grote bedrijven en overheidsinstellingen waar werknemers nog al eens langs elkaar heen werken. Helemaal als je kan filteren bepaalde interesses en kennis. Persoonlijk gebruik ik nooit ‘friend suggestions’ op Facebook of andere sociale netwerksites. Maar in een context van werk of hobby kan ik me voorstellen dat netwerksuggesties interessant zijn.

Een mooi voorbeeld is een visualisatie van ED-MEDIA die ontwikkeld is voor de World Conference on Educational Multimedia, Hypermedia & Telecommunications. De visualisatie laat auteurs zien die verbonden zijn met elkaar door citaten in wetenschappelijke publicaties. En wil je jouw favoriete muziek ontdekken op een andere manier dan Last.fm je biedt, kijk dan eens op Tuneglue.

Platenmaatschappij EMI lanceerde in 2006 een website genaamd Tuneglue waar muziekliefhebbers nieuwe artiesten kunnen ontdekken die aansluiten bij hun smaak. In plaats van een lijstje ‘similar artists’ kan je per artiest gerelateerde artiesten zien in een netwerk. Helaas doet de link naar releases het niet (je zou hiermee direct naar Amazon verwezen moeten worden) en is er ook geen link met Last.fm om aanvullende informatie over de artiest te lezen. De app werkt verder erg mooi, leuk om doorheen te klikken en nieuwe artiesten te ontdekken.

Persoonlijk lijkt een interactieve visualisatie me interessant als extra view op een bepaald netwerk. Worden ze nu nog vaak als aparte applicaties ontwikkeld voor bestaande netwerken, ik zou graag in LinkedIn willen kunnen wisselen naar een netwerk visualisatie, of bij Last.fm een artiest direct kunnen zien in de Tuneglue omgeving. Ik ben benieuwd of dit soort applicaties in de toekomst aan bestaande netwerksites toegevoegd gaan worden.

Meer inspiratie voor netwerk visualisaties is te vinden op de website Visual Complexity.

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!

Reviews

Momenteel is de Hippas website in bèta, de reviews zijn positief:

“Mede dankzij de toegankelijke overzichtelijke structuur van Hippas, is dit de ideale plek om online te shoppen.”

Op: Toostylish

“De basis van Hippas is volgens Toorenaar (Commercieel directeur Marktplaats) niet anders dan die van Marktplaats. ‘Vraag en aanbod samen brengen op een duidelijke manier. De vormgeving is natuurlijk wel anders, modieuzer, hipper. Daarnaast zie je een aantal social componenten, zoals reviews en tips.”

Op: Mol/blog – Tijdschrift voor Marketing

“Hippas, is meer dan een doorsnee shoppingsite, het is een uniek modeplatform. Shop originele stuks bij andere modeliefhebbers, zoek naar unieke vintage items en laat je verleiden door fijne accessoires.”

Op: Style today

Om een goed beeld te krijgen van wat allemaal kan met Microsoft Surface, kijk even naar deze lijst van Surface killer apps van dit moment, samengesteld door Fast Company. Eén van mijn persoonlijke favorieten is de schitterende DaVinci app van Razorfish, die natuurwettten toepast op de virtuele wereld. De Surface kan gebruikt worden in retail, financiële diensten, gezondheidszorg, onderwijs, de publieke sector en in de horeca. De toepassingen voor de Surface zijn zoals gezegd eindeloos. Niet in de lijst van killer apps, maar wel een goed voorbeeld van een Microsoft Surface is deze wijnbar applicatie:

Wat de Microsoft Surface uniek maakt

• Directe manipulatie: weg met die muis, gebruik je handen om informatie te bewerken.
• Multi-user: Surface is sociaal, meerdere mensen kunnen om de tafel staan en deze gezamenlijk gebruiken.
• Multi-touch: de Surface kan op tientallen aanrakingen tegelijk reageren.
• Objectherkenning: door tags te gebruiken kan de tafel een specifiek object zoals bijvoorbeeld een visitekaartje, boek of telefoon herkennen.

Het interessante voor ons is natuurlijk om alle nieuwe ontwerpoplossingen uit te proberen. Hoe zorg je er bijvoorbeeld voor dat een applicatie vanaf alle kanten gebruikt kan worden? Bijvoorbeeld door alle schermen draaibaar te maken, en iconen te ontwerpen die vanaf alle kanten herkenbaar zijn. En hoe ontwerp je feedback? Audio feedback zoveel mogelijk gebruiken, maar niet als dit verwarrend wordt bij meerdere gebruikers bezig zijn met een applicatie.. want bij welke interactie hoort de feedback?

Dienstverlening krijgt een nieuwe dimensie

De Microsoft Surface kan enorm veel toevoegen aan de ervaring van een klant in een winkel, hotel of museum, want deze kan precies dat bieden waar klanten nu om vragen: online diensten vertaald naar de echte wereld (zie ook onze vorige blogpost). Microsoft zelf verwijst naar de waarde van super realisme: het imiteren van interacties in de echte wereld en dit verrijken met digitale mogelijkheden. Zoals bijvoorbeeld in de wijnbar applicatie.

De Surface zal natuurlijk moeten passen in het totale plaatje van communicatie en dienstverlening – naast bijvoorbeeld print, online en mobiel. Maar gebruik van de Surface zal zeker bijdragen aan de klantervaring, cross sell en up sell van producten, vergelijken van product aanbiedingen, en het verminderen van de kosten van dienstverlening. Op de WPC Wodwide Partner Conference werd al gesproken over de impact van Microsoft Surface op de ROI. We zijn uiteraard erg nieuwsgierig naar de eerste cijfers als die beschikbaar komen. En hopen natuurlijk in de toekomst met een mooie Surface toepassing een plaats te veroveren tussen de nieuwste killer applicaties!

Loyale klanten leiden tot meer omzet

Een goede customer experience leidt tot loyale consumenten, en die zijn waardevol. De Forrester Customer Experience Index meet de customer experience aan de hand van de criteria: bruikbaar, makkelijk en aangenaam. Bruce Temkin, Vice President & Principal Analyst bij Forrester Research analyseerde consumentengegevens om te ontdekken hoe die bruikbare, makkelijke en aangename diensten leiden tot een omzetverhoging. Bevinding: de jaarlijkse inkomensverandering bij een bescheiden wijziging in customer experience bij een bedrijf van $10 miljard omzet resulteerde in de volgende stijgingen: Aanvullende aankopen: $65 miljoen, kostenbesparing door minder verlies van klanten: $116 miljoen, word of mouth: $103 miljoen. Meer resultaten en details van het onderzoek – wat is bijvoorbeeld precies een bescheiden wijziging, en hoe is de invloed van ‘word of mouth’ gemeten – kan ik helaas niet geven. het uitgebreide Forrester rapport Customer Experience Boosts Revenue kan wel (tegen flinke betaling) worden gedownload.

Hoe creëer je een goede customer experience?

Hoe creëer je nu diensten waar consumenten blij van worden? Die bruikbaar en aangenaam zijn? Die diensten moeten in ieder geval passen binnen de verwachtingen van consumenten, en om echt indruk te maken moeten ze deze overstijgen. Over deze verwachtingen spreekt Jen Bove van Kicker Studio in haar presentatie over Service Design. De strekking van haar verhaal: bestaande online services beinvloeden de verwachtingen van diensten in ‘de echte wereld’. We hebben het dus over alle ontwikkelingen onder de welbekende noemer ‘web 2.0’. Waar een goede dienst volgens haar aan moet voldoen is:

Onmiddellijkheid
Consumenten willen direct een reactie, niet binnen een dag maar binnen een seconde. Twitter en Google voorzien ons tenslotte ook direct van informatie.

Een stem
Consumenten willen hun feedback kwijt, ze willen gehoord worden. Op het web kunnen we ook overal onze mening delen, op websites zoals Digg, en Get Satisfaction waar consumenten en bedrijven met elkaar in gesprek komen. Een belangrijke les die bedrijven moeten leren is om te gaan met alle feedback die ze ontvangen, op weblogs, en via bijvoorbeeld Twitter. Geen bedrijf is perfect, diensten en producten kunnen altijd verbeterd worden, in een iteratief proces.

Expertise
Consumenten zijn beter geïnformeerd, en zijn gefrustreerd als ze niet direct alle antwoorden krijgen. Hoe kan een dienst kennis en expertise bieden, die de waarde van online expertise overstijgt?

Customization
Consumenten verwachten een dienst die aangepast is aan hun persoonlijke wensen en situatie. Amazon onthoudt mijn laatste aankopen en wensenlijst, maar de boekenwinkel om de hoek niet. Hoe kan technologie ingezet worden om die situatie te verbeteren?

Co-creatie
Jen Bove noemt ook co-creatie als belangrijk punt. Vanuit het perspectief van de ontwerper is het belangrijk dienstverlenend personeel en de consument zelf te betrekken bij het ontwikkelen van de dienstverlening. Daar zijn wij het als interactie ontwerpers natuurlijk geheel mee eens. Zowel in interaction design als in service design draagt co-creatie bij tot een waardevol product of dienst, die aansluit bij de behoeften van de gebruikers.

Gratis boek van Bruce Tempkin, Forrester Research: The 6 laws of customer experience

Contextmapping

Contextmapping is een methodiek voor het uitvoeren van contextueel onderzoek met gebruikers, waarin kennis wordt verworven over de gebruikerscontext van producten.
Zowel gebruikers als stakeholders nemen actief deel aan het ontwerpproces, zodat het ontwerp en gebruik van een product goed bij elkaar aansluiten. Behalve bij productontwerp is deze methodiek natuurlijk ook erg interessant bij het uitvoeren van service design trajecten. Uitgangspunten bij contextmapping zijn onder andere dat gebruikers de experts van de belevingen zijn, en dat context van productgebruik zo divers is dat een map nodig is.

Liz Sanders illustreerde dit door te vertellen over haar ervaringen bij architectenbureau NBBJ bij het ontwerpen van een ziekenhuiscampus voor veteranen. Sanders benoemde de overgang van ontwerpen voor o.a. communicatie, ruimte, interieur en informatie naar het ontwerpen van o.a. ervaringen, emotie, interactie en transformatie. Ook onderscheidt zij vormen van ontwerpvisualisaties voor verkopen en vertellen aan de klant (3D, fly-throughs), en visualisaties voor maken met als doel stappen nemen in het ontwerpproces (persona’s, experience models). Enkele voorbeelden van co-creatie methodes:

Visioning workshop

Scoping binnen een project van klant en gebruikers door woorden en beelden op een collage-achtige wijze in een grote cirkel te plakken. Ideeën binnen de bullseye zijn het belangrijkste.

Experience timelines

Een chronologische visualisatie van gebeurtenissen. Bijvoorbeeld zusters die de ervaring van een patiënt gedurende een bepaald tijdsverloop in beeld brengen.

2D participatory modeling

Voormalig patiënten bedenken de layout van de patiëntenkamer door gebruik van geschaalde 2D modellen. Met visualisaties van emoties en uitgebreide toolkits voorzien van klittenband.

3D participatory modeling

Hypothetische scenario’s uitspelen of maken van geschaalde 3D ontwerpen. Zo liet men verpleegsters de inrichting van een patiëntenkamer bedenken met poppenmeubels en meer abstracte onderdelen. Verpleegsters richten de kamers binnen 8 minuten in en vertelden hun verhaal aan de hand van de poppen in de kamers.

Lessons learned die Liz Sanders noemde zijn onder andere het belang van een cultuur waarbij ontwerpers open staan voor de inbreng van gebruikers en klant, en een bijpassende mindset. Nodig het ontwerpteam uit bij de co-creatie sessies, en geef ze het liefst een rol zoals aantekeningen maken of video opnemen. Betrek ze ook bij de voorbereiding. Het communiceren van resultaten als ontwerpers niet aanwezig zijn kan door een samenvatting te geven op een manier met impact, bijvoorbeeld video, en alleen met resultaten die op dat moment relevant zijn voor het team.

Na Liz Sanders vertelde Jacob Buur van het SPIRE research centre over ethnografische provocatie, een van de 7 onderzoeksgebieden van SPIRE. Jacob vertelde over de veldstudies die werden uitgevoerd bij het herontwerp van de ‘wastewater treatment plants’. Grootste obstakel bij het herontwerp was het verschil in inzicht hoe het werk verricht moest worden en hoe nieuwe oplossingen binnen bestaande werkculturen kon worden ingepast. Controleurs wilden liever buiten rondlopen dan de controle applicaties binnen in een controlekamer te bedienen.

Froukje Sleeswijk Visser heeft als eerste PhD. in contextmapping kort haar doctoral werk uitgelegd, waarbij in haar thesis 7 best practices worden benoemd. Tenslotte kwamen in de pecha kucha presentaties nog veel interessante voorbeelden van contextmapping voorbij. 10 oud-studenten vertelden over hun afstudeerproject en huidige professie in relatie met contextmapping.

Meer

Wil je meer lezen over context mapping, dan kan dat bij het ID-StudioLab.

Zie ook de doctoraal thesis van Froukje Sleeswijk Visser: ‘Bringing the everyday life of people into design
Aanvullend een impressie van De Waag van het TU symposium met een aantal handige do’s en don’ts bij contextmapping.

Analyse

Voor on site interviews met eindgebruikers was geen tijd binnen dit project. Wat we wel konden doen is het in kaart brengen van de wensen en behoeften van DSM Dyneema. Daarom hebben we wat ‘huiswerk’ toegestuurd. We vroegen naar hun mening over vergelijkbare websites, waarbij ook sprake is van ‘ingredient marketing’. Zoals bijvoorbeeld Intel, en Kevlar handschoenen. Hierdoor kregen we alvast een goed beeld over wensen voor navigatie en presentatie.

Hoe werkt een cardsort sessie?

Om binnen beperkte tijd de grote hoeveelheid content en functionaliteit in de website een goede plaats te geven, hebben we een cardsort sessie gedaan met DSM Dyneema. Hierdoor konden we snel een goede sitemap creëren als startpunt voor het ontwerp.

Stap 1: Consensus over de inhoud

De inhoud van de projectdocumentatie en de huidige website hebben we vertaald naar steekwoorden op kaarten. Deze flinke stapel kaarten namen we eerst door, samen met DSM Dyneema. Eén voor één neemt iemand een kaart, en beschrijft wat volgens hem of haar bedoeld wordt met het steekwoord. Bijvoorbeeld: CONTACT, wordt dit een pagina met contactgegevens, of een contactformulier? Komt er een algemeen emailadres, of verschillende per afdeling een aparte? Misschien moeten klanten contact op kunnen nemen met een representant in hun regio?

Stap 2: Groeperen van kaarten

Nadat overeenstemming is bereikt over de onderdelen die in de website aanwezig moeten zijn, en wat deze betekenen, kunnen de kaarten in groepjes gesorteerd worden in een menustructuur. Aan het einde van de cardsort sessie hadden we een duidelijk beeld gekregen van de inhoud en structuur van zowel de eindgebruiker websites als de licentiehouders community. Resultaten werden door deelnemers in de sessie toegelicht en we legden ze vast op foto zodat we ze konden  vertalen naar een sitemap.

Ontwerp

Dankzij de inbreng van DSM Dyneema konden we nu een sitemap en homepage ontwerp maken, waar iedereen zich betrokken bij voelde.

Sitemap

De sitemap is een visualisatie van de sitestructuur en daarmee een goed middel om te controleren of de inhoud juist en compleet is.

Homepage en navigatie

Tegelijkertijd met de sitemap werd de eerste versie van de homepage voor zowel Dyneema DSM eindgebruikers als voor de licentiehouder community ontworpen. In schetsstijl werd de eerste versie vastgelegd, zodat de feedback zou gaan over navigatie en layout en niet over de details van het ontwerp.

Met de feedback van DSM Dyneema konden we verder met het ontwerp van een finale versie van de sitemap en het ontwerp van de homepage en overige pagina’s.

Prototype

Om iedereen in het projectteam een goede indruk te geven van het ontwerp zijn beide websites vertaald naar een klikbaar prototype. Daarnaast is het ontwerp beschreven in een interactie document met specificaties voor de ontwikkelaars.

Resultaat

Met het visuele concept van Southparc vertaald vertaald door Resoluut, hier dan uiteindelijke resultaat: Gloves with Dyneema