Sxdweek3 by Anouk

ANALYSEDOCUMENT #SxDWeek 3

Yvonne Geraats - 511232 Anouk Freriks - 505873 22-09-14 mmm

Inhoud Inleiding ..................................................................................................................... 3 Organisatorische metafoor............................................................................................... 4 Sociale acties ............................................................................................................ 4 Wireframe .................................................................................................................. 5 Webwinkel ............................................................................................................... 5 Community ............................................................................................................... 5 Wireframe en interface metaforen .................................................................................. 5 Theorie Kuniavsky ......................................................................................................... 8 Feedback .................................................................................................................. 11

Inleiding Het is intussen alweer week drie, dus dat betekent weer een nieuwe opdracht. De opdracht voor deze week is om metaforen toe te passen, zowel organisatorische als interface metaforen. We hebben de bijbehorende literatuur gelezen en daarna een onderwerp voor onze community bedacht. In dit document is te lezen welke metaforen we hebben gebruikt in ons wireframe en de verantwoording.

Organisatorische metafoor De eerste stap was om een organisatorische metafoor te verzinnen voor de community. Eerst hebben wij een sociale activiteit bedacht (shoppen) en zijn hierover gaan brainstormen. In de opdracht stond dat het handig was om een sociale activiteit en community te verzinnen die nog niet bestond, maar na uren te hebben gediscussieerd, kwamen we erachter dat van eigenlijk elke activiteit al een community bestaat. We besloten daarom om een activiteit te kiezen waar wel communityâ&#x20AC;&#x2122;s van zijn, maar onze community totaal anders vorm te geven.

We hebben een mindmap gemaakt zodat we met al onze associaties meer overzicht konden krijgen. Na deze brainstorm hebben we wat associaties bekeken en bedacht of we hier een organisatorische metafoor mee kunnen maken. Al snel besloten we het niet alleen over shoppen te doen, maar voornamelijk ook het besparen van geld. We dachten na over hoe we deze twee dingen konden combineren. Als snel waren we erover uit dat we een community wilde maken die zich voornamelijk richt op de kortingen van kleding. De naam kwam toen al snel: SaveShop. Het heeft twee betekenissen: het is veilig om hier iets te kopen, maar je spaart ook voor punten als je er wat koopt. Aangezien dit meer een webwinkel-idee is, besloten we het concept uit te breiden zodat er een community van gemaakt kan worden.

We besloten dat het een community moest zijn waar men inspiratie met elkaar kan delen, kledingadviezen aan elkaar kan geven en online kunnen shoppen met vrienden en vriendinnen. De site heeft als het ware twee kanten, twee websites: de webwinkel en de community.

Sociale acties We hebben gekozen voor shoppen als sociale activiteit. Daar horen meerdere sociale acties bij. Zo bedachten we dat kleding kopen, adviseren en inspiratie opdoen sociale acties zijn van shoppen.

Sociale activiteit Shoppen Shoppen

Sociale acties Kleding kopen Adviseren

Shoppen

Inspiratie opdoen

Functionaliteiten Webwinkel Kleding delen of op elkaars pagina achterlaten Moodboards creĂŤren

Wireframe Webwinkel In de webwinkel staan alle kortingsaanbiedingen van bekende merken en kledingwinkels. Van H&M tot Tommy Hilfiger. Men kan hier kleding kopen en meteen sparen voor punten. Als je na een tijdje een xaantal punten hebt, krijg je een kortingscode voor geen verzendkosten bij de eerstvolgende aankoop.

Community Aangezien een webwinkel geen community is, besloten we er een community naast te maken. Bij de kleding zit niet alleen een ‘leg in winkelmandje’-knop, maar ook een like-knop en een deelknop. De like-knop betekent dat je het meteen op je eigen pagina kan zetten, zodat vrienden kan zien dat je het leuk vindt. Met de deel-knop kun je de kleding achterlaten op de pagina van vrienden (omdat die op zoek waren naar een goedkoop, zwart rokje), delen via sociale media en toevoegen aan je eigen moodboards. Je vrienden kunnen de kleding in jouw moodboards zien en zo inspiratie opdoen voor outfits. Ook kan je onder de moodboards reacties achterlaten en zo met elkaar in contact komen.

Wireframe en interface metaforen Hieronder staan de wireframes van hoe wij de websites hebben vormgegeven. Er zijn twee wireframes: één van de webwinkel en één van de community.

1. Dit is een interfacemetafoor. Hier kan men meteen zien hoeveel geld hij of zij al heeft bespaard door de kleding met korting te kopen. 2. Hier is te zien dat er mannen-, vrouwen-, kinder- en babykleding op de site wordt aangeboden. 3. De naam van het artikel staat hier. 4. Er staat een foto bij van hoe het kledingstuk eruit ziet met rechtsbovenin een logo van het desbetreffende merk 5. Het plusje staat voor het toevoegen aan een moodboard. Door op het hartje te klikken wordt het kledingstuk meteen geliked, wat vrienden ook kunnen zien. De laatste optie is om het kledingstuk te delen op social media. Dit zijn alle drie interface metaforen. 6. Deze tekens staan voor de klantenservice en zijn interface metaforen. 7. Hier staat wie er is ingelogd. Deze persoon heeft een profiel. 8. Hier is te zien hoeveel punten er al zijn gespaard. 9. Dit zijn opties om de website op social media te delen. 10. Er is precies te zien hoeveel het artikel oorspronkelijk kostte, hoeveel korting er vanaf is en hoeveel het nu kost. Ook is er te zien hoeveel punten je zou sparen als je dit artikel zou kopen. 11. Het artikel is in meerdere kleuren beschikbaar. 12. En in meerdere maten. 13. Ook staat er een omschrijving van het artikel bij. Over bijvoorbeeld de stof, wasvoorschriften, etc. 14. Er staan ook reviews onder van mensen die dit artikel al hebben gekocht/geprobeerd. 15. En tot slot is er onderaan de pagina een winkelmandje te vinden, wat meteen een interface metafoor is.

1. Ook hier is weer het varkentje te zien. 2. En de tabbladen 3. Dit zijn de persoonlijke moodboards van degene die is ingelogd. Men kan elk moodboard een titel geven. 4. Vrienden kunnen per moodboard een reactie achterlaten en zo in gesprek raken. 5. Hier is te zien wie er is ingelogd. 6. Hier staan de gespaarde punten 7. De site is te delen op social media.

Theorie Kuniavsky Kuniavsky geeft aan dat er een aantal richtlijnen zijn voor het gebruiken van metaforen. Ze noemt er 8 op: 1. Metaphors are cultural; 2. Metaphors are contextual; 3. Fit the Metaphores to the functionality; 4. Use metaphores to uncover otherwise hidden aspects of the material; 5. Discard process metaphors when neccessary; 6. Do not let metaphors ruin key features; 7. Choose metaphors that are appropriately scalable; 8. Let your metaphors degrade and die. Per categorie zullen we uitleggen of de metaforen aan de eisen van Kuniavsky voldoen. 1. Onze metaforen zijn cultureel. De metaforen zijn zowel in het Nederlands als in het Engels te snappen. Dit geldt voor zowel de naam (SaveShop) als voor de interface metaforen. De meeste die we hebben gebruikt zijn algemeen bekend (de deel-knop, het hartje als like-knop en klantenservice/retour/bezorgen en het varkentje). Dit zijn allemaal internationale metaforen die op meerdere sites worden gebruikt. 2. De metaforen zijn contextueel. De metaforen die wij hebben gebruikt passen goed in een community, webshop en op sociale media. De metaforen die wij hebben gebruikt worden al op meerdere communityâ&#x20AC;&#x2122;s, webshops en sociale media gebruikt. 3. De metaforen passen bij de functionaliteiten. We hebben de webshop, het delen van kleding en de moodboards als functionaliteit. De plusknop, like-knop en deel-knop passen bij het delen van kleding en het maken van moodboards. De metaforen voor de klantenservice, het retourneren en bezorgen passen bij een webshop. Dit laat zien dat de metaforen bij de functionaliteit passen. 4. Gebruik metaforen om verborgen aspecten van het materiaal bloot te leggen. Dit betekent dat de achterliggende gedachte van een metafoor juist moet zijn. Een statement zoals â&#x20AC;&#x2DC;bankieren is een gameâ&#x20AC;&#x2122; laat zien dat je bankieren niet te serieus moet nemen, terwijl met dat in werkelijkheid juist wel moet doen. De metaforen die wij hebben gekozen hebben geen verkeerde, achterliggende gedachte. SaveShop betekent dat het veilig is om op onze site te shoppen, maar dat men ook kan sparen tijdens het shoppen. Beide achterliggende gedachtes zijn expres. 5. Dank procesmetaforen af indien nodig. Procesmetaforen zijn metaforen die tijdens het ontwerpen of brainstormen zijn ontstaan, maar ongepast zijn voor de klanten. Dit is bij ons niet het geval, want zoals al eerder is beschreven, worden onze metaforen al op andere sites gebruikt.

6. Metaforen moeten belangrijke features niet in de weg staan. Metaforen kunnen heel handig zijn, omdat ze opvallen en geen lappen met tekst bevatten, maar het kan ook drempelverhogend zijn. Als klanten of gebruikers de metaforen niet snappen, staan ze in de weg en kan men de site niet meer goed gebruiken. Dit is bij ons niet het geval. Aangezien de metaforen wereldwijd bekend zijn, gaan we ervan uit dat iedereen de metaforen zal snappen. 7. Metaforen kunnen verouderen. We maken gebruik van verschillende soorten iconen in ons wireframe. Kuniavsky vertelt over het gevaar dat iconen kunnen verouderen. Momenteel zie je dit terug bij het icoon voor opslaan (diskette). De jeugd van tegenwoordig werken niet meer met diskettes en zullen het icoon wellicht hierdoor niet meer begrijpen. In ons wireframe hebben hier rekening mee gehouden. We zullen alle iconen aan bod laten komen en per icoon uitleggen of we dit risico ook lopen met het door ons gekozen icoon. Spaarvarken  de spaarvarken spaarpot staat icoon voor het sparen van geld. Dit icoon zal pas gedateerd raken als er geen spaarvarkens meer zullen bestaan. De kans hierop is zeer klein. Zolang wij nog gebruik zullen maken van ‘echt’ geld zullen de spaarpotten blijven bestaan. Kruis  in de wiskunde wordt de plus gebruikt voor het erbij tellen van iets en het vergrootten van het getal. In het design staat het symbool voor het vergroten van de afbeelding. Zulke wiskundige iconen zullen niet snel veranderen. Hart  het symbool van het hartje is al ontstaan in de 13 e eeuw. We zien het als een symbool voor liefde. Je kunt zo je waardering/liefde voor het artikel tonen. Verbonden punten  de punt links breid zich uit in de twee punten rechts. Tevens staan ze allemaal in contact met elkaar doormiddel van de lijnen. Hierdoor krijg je het metafoor van delen. Headset  tegenwoordig is dit een icoon dat zeer van toepassing is op een klantenservice. Voor de toekomst zal dit icoon zich kunnen evalueren in bijvoorbeeld een googleglass. Voor deze tijd is dit nog niet van toepassing, maar het is een icoon dat in de loop van de tijd waarschijnlijk zich gaat evalueren. Retour  de twee pijlen die een metafoor zijn voor retour geven een draaiende beweging aan. Hiermee is het een metafoor voor het heen en weer ruilen. Bezorgen  tegenwoordig worden bestellingen bezorgd met een busje. Voor de toekomst zal dit natuurlijk kunnen veranderen, maar dit ligt nog zo ver weg dat we nog geen voorspelling durven te maken hoe het er dan uit zou komen te zien. Munt  voor de munt is het hetzelfde verhaal als bij het varken, zolang mensen nog bekend zijn met ‘echt’ geld zal dit icoon niet verouderen. Winkelmand  als je boodschappen gaat doen of gaat winkelen neem je je boodschappen mee in een tas. De metafoor is dan ook het stoppen van de spullen in je boodschappentas. Tegen de tijd dat we geen winkels meer kennen, maar alleen nog maar web shops zal dit icoon verouderen.

8. Iconen moeten geen achterliggende gedachtes hebben. Iconen moeten voor iedereen begrijpelijk zijn, ook voor mensen zonder enkele ervaring met de website. Wij hebben gebruik gemaakt van iconen die regelmatig terug komen op diverse websites en die niet snel zullen dateren om het voor iedereen begrijpelijk te maken. De iconen bevatten geen achterliggende gedachtes en zijn na verwachtingen in ĂŠĂŠn keer duidelijk voor iedere gebruiker.

Feedback Ook voor de opdracht van SxDweek2 hebben we weer feedback gekregen die we in deze opdracht hebben toegepast. De feedback was om het wireframe duidelijker te maken. Dat kon door betere fotoâ&#x20AC;&#x2122;s of door het beter leesbaar te maken. We hebben voor beide gekozen: de fotoâ&#x20AC;&#x2122;s zijn helder en scherp (we hebben geen scanner, dus dat ging helaas niet) en het wireframe is met stift overgetrokken waardoor het ook beter leesbaar is. Ook was de feedback dat we het wireframe beter uit moesten leggen. We hebben nu cijfers voor de onderdelen gezet en ze per onderdeel uitgelegd. Dit maakt duidelijker over welke features we het hebben als we het wireframe uitleggen. Als laatste was de feedback dat een gedesigned document juist kan afleiden van de kern. Daarom hebben we dit word-document zo minimaal mogelijk opgemaakt. Het is een standaard document, alleen hebben we de kleuren aangepast, omdat we het niet konden laten.