in een oogopslag
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
ontwerpen voor het sociale web
In deze Oogopslag reeks van de Interaction Design Foundation Course, geven we beknopte overzichten van belangrijke resources, waaronder boeken en online publicaties. In ‘Ontwerpen voor het sociale web’ geven we een opsomming van ontwerprichtlijnen uit het boek ‘Designing for the social web’ van Joshua Porter. Porter legt uit hoe je sites en applicaties ontwerpt op zo’n manier dat ze onder bezoekers sociale interactie tot stand brengen.
James Boekbinder en Jantien Slob, docenten vakgroep Interaction Design Hogeschool Rotterdam, CMI Instituut
2
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
ontwerpen voor het sociale web
hoe ontwerp je interfaces die sociale interactie ondersteunen?
delen, zorgen, eten, liefhebben, vechten, praten, vriendschap, nijd, schreeuwen, bestrijden, verraden, roddelen, lachen, huilen, steunen, zeuren, actievoeren, aanbevelen…
3
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
sociale omgeving
De software interface ervaren we als een sociale omgeving… … die interface kan ontworpen worden op zo’n manier dat het mensen aanzet tot sociale interactie.
4
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
niet alleen community sites
Een doorsnee pagina op de Amazon site heeft 18 sociale features:
product ratings share your own product images people who bought this also bought add to/share: wish/shopping/wedding/baby list tell a friend amazon sales rank popular in these categories update product info give feedback on images what do customers ultimately buy after viewing this item? tag this item help others find this item sell yours here rate this item to improve your recommendations customer reviews was this review helpful to you?
5
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
de AOF methode van Joshua Porter De aanpak van Joshua Porter om sociale applicaties te ontwerpen bestaat uit 3 stappen:
activity
bepaal de primaire activiteit
objecten
identificeer de sociale objecten
features
bepaal de ‘feature set’
(de handelingen die erbij horen)
6
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
activity
activity
bepaal de primaire activiteit
Wat doet je doelgroep? Wat is de hoofdactiviteit van de community? De activiteit die de site ondersteunt?
7
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
activity
activity
bepaal de primaire activiteit
Mensen die elkaar helpen om een taal te leren
www.livemocha.com
8
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
activity
activity
bepaal de primaire activiteit
Mensen die elkaar helpen om een sport te spelen
www.athlinks.com
9
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
sociale objecten
activity
bepaal de primaire activiteit
objecten
identificeer de sociale objecten
Rondom welke objecten hebben mensen interacties? Mensen zijn meestal sociaal bezig rondom iets. Dit noemen we een ‘sociaal object’. Dit kan een speelveld of een video of een vacature zijn - het punt is dat ten opzicht van het object, mensen verschillende handelingen ondernemen. Voor mensen die elkaar helpen een taal te leren kunnen sociale objecten zijn: - docenten - lessen - boeken - programma’s - opleidingen en niveaus
Voor mensen die het mogelijk maken om een sport te spelen, kunnen sociale objecten zijn: - apparatuur - het speelveld - teams - coaches
10
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
features
activity
bepaal de primaire activiteit
objecten
identificeer de sociale objecten
features
bepaal de ‘feature set’
(de handelingen die erbij horen)
Welke ‘werkwoorden’ horen bij de objecten? Welke handelingen zijn belangrijk genoeg om in de site op te nemen als features? Een taaldocent kan worden: - beoordeeld - gevraagd over zijn/haar methode - gevonden - gekoppeld aan een taal of type leerling Een speelveld kan worden: - gevonden - gesponsord - gecreëerd - onderhouden
11
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
YouTube vanuit AOF bekeken
persoon object - abonneren - bekijken
video object - afspelen - delen met anderen - aan ‘favorieten’ toevoegen - aan lijst toevoegen - markeren - beoordelen - videoboodschap sturen - reactie - embed
gerelateerde objecten - bekijken - voeg toe aan afspeellijst
12
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
levenscyclus bezoeker
De manier waarop bezoekers een website gebruiken verandert gedurende de tijd:
van 1. onwetend tot 2. geïnteresseerd tot 3. eerst gebruik tot 4. regelmatig gebruik tot 5. gepassioneerd gebruik
13
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
van geïnteresseerd tot gepassioneerd
Maar… hoe ontwerp je een site op zo’n manier dat mensen door alle fases van gebruik gaan? Van ‘geïnteresseerd’ tot ‘gepassioneerd gebruik’?
14
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
1. ontwerp voor registratie
Van ‘geïnteresseerd’ tot ‘eerst gebruik’: hoe trek je mensen over de streep?
Laten we er vanuit gaan dat iemand al weet heeft van de applicatie en potentieel geïnteresseerd is. Hij of zij heeft bijvoorbeeld op een banner geklikt, of een link van een vriend ontvangen. Je hebt ongeveer acht seconden om zo iemand die onwetend, sceptisch en ongeduldig is, te laten ontdekken waarom hij of zij lid zou moeten worden van een site. De gebruiker waar je voor ontwerpt: - is één en al vragen, en zoekt antwoorden - zal waarschijnlijk nooit terugkomen als deze eerste interactie niet lukt
15
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
creëer een ‘sign-up framework’ Een sign-up framework bestaat uit: - een ‘elevator pitch’, ‘tagline’ of andere uitleg van het aanbod van de site - grafieken of illustraties die laten zien hoe het werkt - goede teksten die de applicatie beschrijven - een ‘tour’ of voorbeeldpagina’s - video of andere demo waarin je kunt zien hoe leden bezig zijn - de kans om zonder registratie de applicatie uit te proberen - bewijs van het succes van anderen die het gebruiken (‘social proof’) En dit alles moet voor het grootste deel op je homepage zichtbaar zijn en er eenvoudig uitzien - een gecompliceerde interface impliceert dat gebruik ook gecompliceerd zal worden. Dat schrikt af.
Elevator pitch en uitleg van het voordeel in een regel Aandacht voor de copywriting - heel veel info, heel weinig tekst Uitgebreide demo (‘Have a look around’) Bewijs van succes van anderen (Testimonials) Antwoorden aan belangrijke vragen (‘See plans and pricing’) De kans om te beginnen (Start now) - dit kan sterker zijn ontworpen
www.blinksale.com
16
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
‘sign-up framework’
De kans om zonder registratie alles uit te proberen (Start here, Free, ziet er uit alsof je meteen kan klikken en een stamboom bouwen)
www.geni.com
17
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
‘sign-up framework’
Taglines en goede copywriting (ook op de menu tabs: niet ‘How it works’ maar: ‘Understand your money’) De kans om meteen te beginnen (Free! Start here) Testimonials (Why our users love mint; What the press is saying); social proof Gebruik van graphics die de benefits helder uitleggen (pie chart)
Het formulier is uiterst eenvoudig – je hoeft niet eerst een hele profiel in te vullen. Dat kan later.
www.mint.com
18
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
2. ontwerp voor regelmatig gebruik
Hoe zorg je dat mensen na een ‘eerste gebruik’ overgaan tot ‘regelmatig gebruik’? Wat maakt mensen tot regelmatige gebruikers van sociale apps en sites en features?
- ze kunnen hun identiteit beheren - ze kunnen een unieke bijdrage leveren - ze kunnen iets terug doen - ze kunnen een reputatie en relaties bouwen - ze kunnen effect sorteren - ze verkrijgen een gevoel van eigendom over hun deel van de site - ze hebben een hoge mate van ‘beheersing’ (control) - ze ontwikkelen een hechte band met een groep - plezier - het is leuk
19
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren Laat mensen hun identiteit nauwkeurig weergeven en beheren Zorg voor een geschikte en makkelijk aanpasbare profielpagina. Een profiel moet: - bij het domein en de hoofdactiviteit passen - ruimte bieden voor de belangrijkste kenmerken Profielen bieden vaak: - een unieke avatar / afbeelding - ruimte voor een korte biografie - relevante demografische info (locatie, leeftijd, etc.) - ruimte om activiteiten en prestaties te beschrijven
20
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren LinkedIn is een sociaal netwerk applicatie die gericht is op zakelijke en vakmatige uitwisselingen. Het profiel bevat: - ondernemingen waar iemand gewerkt heeft - huidige en voormalige collega’s - opleidingen Niet: - geloofsovertuiging - medische info
www.linkedin.com
21
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren
‘Patients like me’ is een community van chronisch zieke mensen die uitgebreide profielen bijhouden online: - belangrijke mijlpalen in de geschiedenis van de ziekte - grafische weergaves van ontwikkeling Het is gericht op hun ervaring met de ziekte en bevat daarom weinig of geen informatie over hun beroep, geloof, etc. Let op de ‘signup framework’ op de homepage.
www.patientslikeme.com
22
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren
De community pagina. Let op: - spotlight - je kan meteen kennis maken met een lid - profiel info objecten bevatten vooral ziekte- gerelateerde info en maken gebruik van een verfijnd grafisch systeem om heel veel informatie in weinig ruimte weer te geven
23
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren
Een van de grafische profielen, opengeklapt: - stemming - niveau en type onrust - externe stressbronnen - rating (kwaliteit van de gegevens die hij verschaft heeft) Een prachtig voorbeeld van de kracht van goed visueel ontwerp, in dit geval visualisatie van data, om snel een overzicht te geven van gecompliceerde situaties.
24
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren
Individuele profielpagina. Vooral gericht op het traceren van alle symptomen, verschijnselen, verloop van ziektebeeld.
25
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
identiteit weergeven en beheren
Een ‘symptoom’ zou je hier een ‘sociaal object’ kunnen noemen. De handelingen of features zijn: - vind therapieën die anderen voor dat symptoom gebruiken - zie andere symptomen die patiënten vergelijkbaar met jou delen - zie profielen van anderen met dit symptoom - zie commentaar van andere patienten over dit symptoom
26
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
uniekheid bezoeker
Benadruk in alles de uniekheid van de bezoeker
- nodig ze uit om een reactie te geven (rating, commentaar, recensie) - laat meest recente activiteit zien (onderscheidt bezoeker van anderen) - ‘status’ bericht - spreek ze op een persoonlijke manier aan (‘got something to say?’; ‘movies for you’; ‘James, you haven’t written any reviews yet…’) - dit geeft ook het gevoel van ‘eigendom’ van de site
27
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
uniekheid bezoeker
Benadruk de uniekheid van de bezoeker - de beelden van mensen wisselen af, maar de boodschap is duidelijk.
28
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
doeltreffendheid
Creëer een gevoel van doeltreffendheid
Laat resultaten zien - wat heeft de bezoeker bereikt? - complimenten van leden (‘Ik vond de recensie heel nuttig…’) - resultaten (‘We hebben 10.000 handtekeningen verzameld.’)
29
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
doeltreffendheid
Na de campagne, werd de community een organisatie die de initiatieven van de president ondersteunt. Let op het gevoel van doeltreffendheid: succesverhaal van 344,850 telefoontjes naar congresleden.
30
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
reputatie
Maak opgebouwde reputaties zichtbaar
Bepaal criteria waarmee de opgebouwde reputatie van een lid zichtbaar wordt: - aantal liefhebbers van een lid van de community - aantal recensies geschreven door een lid - duur van deelname (sinds wanneer) - reacties door anderen op de bijdrage van leden - specifieke recommendaties gebaseerd op relevante criteria (hoe origineel is een chef, hoe snel is een assistant-chef)
31
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
reputatie
Profielpagina. Let op de categorieën waaruit het publiek profiel is opgesteld: - waarom ik de president steun - issues - een persoonlijk motto Zo maken leden zich zichtbaar aan de rest van de community. Maak reputatie zichtbaar: de ‘activity index’.
32
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
3. ontwerp voor het delen met anderen
Wat willen we delen?
- ideeën die onze bestaande opvattingen staven - verrassende ideeën - ideeën die uitleg bieden - dingen waarvan we weten dat een ander ze waardevol zal vinden - instrumenten die taken gemakkelijker maken - leuke dingen zoals plaatjes en video’s - dingen die ons imago opvijzelen ‘Sharers’ - mensen die over je site vertellen - zijn de meest belangrijke gebruikers: die zorgen dat anderen beginnen, en dat regelmatige gebruikers gepassioneerd raken wanneer ze nieuwe manieren horen om nog meer effect te sorteren in hun gebruik van de site.
33
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
delen met anderen
Geef ‘sharers’ een oproep tot actie en functionaliteiten
- sociale netwerk functionaliteiten (DIGG, facebook, etc.) - geef de oproep en tools een prominente plek in het visueel ontwerp - hou online sharing formulieren kort - geef vervolgopties nadat iets gedeeld is (abonneer je op nieuwsbrief, ga terug naar artikel, ontvang alerts als andere artikelen over dit onderwerp gepubliceerd worden) - bied ruimte voor een persoonlijk bericht - anders lijkt het doorgestuurde bericht op spam
34
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
bron
Designing for the Social Web door Joshua Porter Uitgegeven 24 april 2008 door New Riders. Onderdeel van ‘the Voices That Matter’ series. ISBN-10: 0-321-53492-1 ISBN-13: 978-0-321-53492-7 eBook ISBN-10: 0-321-53519-7 ISBN-13: 978-0-321-53519-1
35
in een oogopslag: ontwerpen voor het sociale web november 2009 versie 05
vragen?
Neem contact op met:
[email protected] [email protected] [email protected]
© Copyright 2009 Alleen voor intern gebruik. Alle rechten voorbehouden. Niets uit deze uitgave mag worden gereproduceerd, bewaard in een database of worden gepubliceerd in welke vorm dan ook, electronisch, mechanisch, gedrukt, geprint, op microfilm of andere middelen, zonder vooraf gegeven schriftelijke toestemming van de auteur en de Rotterdam University of Applied Sciences (Hogeschool Rotterdam, CMI Institute.)
