Naam: !! ! Kelly Vuijst! Student nummer:! 500630293! Begeleider:! ! Renske Solkez!
!
Voorwoord!
!
Ik ben Kelly Vuijst, 21 jaar en afstuderende aan de Hogeschool van Amsterdam. Hier volg ik de opleiding Communication and Multimediadesign. In de 4 jaar van deze opleiding heb ik mij gespecialiseerd in interactie ontwerp en visueel ontwerp.!
!
Voor mijn afstudeerproject wilde ik graag twee liefdes combineren. Make-up en ontwerpen. Zo is het idee naar voren gekomen om ‘iets’ met make-up te gaan doen. Ik heb gekeken naar wat ik miste in de wereld van make-up en ook geluisterd naar wat anderen hierover zeiden. Gelukkig was de uitslag hiervan vrij unaniem; een zoek en vergelijk platform voor make-up.!
!
Dit is het eerste project waarbij alles volledig vanuit mijn kant moest komen. Mijn zwakke punt, de projectleiding, kon ook niet achter blijven. Dit is af en toe moeilijk geweest en achteraf had ik sommige dingen efficiënter kunnen aanpakken maar ik ben erg blij met hoe het project is verlopen. Ik had niet verwacht nog zoveel te leren tijdens een laatste project. Door het zoeken naar trends en testen en experimenteren met interactie heb ik veel geleerd over hoe mensen denken en zoeken.!
!
Ik wil graag iedereen die mij geholpen heeft met testen enorm bedanken. Natuurlijk mogen de mensen van mediaBunker die mij ondersteund hebben in het ontwerpen van zowel het visuele ontwerp als het interactie ontwerp niet ontbreken. Jullie zijn gelukkig ontzettend kritisch geweest en hebben mij geholpen van mijn ‘matige’ eerste ontwerpen een prachtig eindproduct te maken.!
!
Managementsamenvatting!
!
De hoofdvraag ‘Hoe kunnen we make-up liefhebbers helpen bij het vinden van reviews en swatches van producten die binnen hun persoonlijke wensen vallen (geschikte huidskleur,
voorkeur, etc.) die verspreid zijn over allerlei beautyblogs zonder dat ze daarvoor alle verschillende ! kanalen hoeven te doorzoeken?’ is beantwoord met een sociaal desktop platform. De doelgroep, waar meisjes tussen de 16 en 23 jaar onder vallen, is uitgebreid getest om zo de needs en wants te onderzoeken. Hier is een lijst van features ontstaan waaraan het platform moet voldoen om als succesvol te worden beschouwd. Deze features zijn zowel sociaal als functioneel. De doelgroep gaf aan dat ze naast een slim zoeksysteem, op basis van kleuren, tags en filters, ook graag sociale features wilden hebben. Het delen van hun eigen collectie en het zien wat anderen leuk vinden en hebben is erg belangrijk. Ook spelen de professionals op het gebied van make-up een grote rol. Zij leren de doelgroep hoe ze de producten moeten gebruiken. Ook hebben zij een grote groep fans die graag dezelfde make-up hebben als de professionals.!
!
Van deze feature list is een interactie ontwerp gemaakt, welke gebaseerd is op de laatste trends op het gebied van webdesign. Na het testen is hier een uiteindelijk ontwerp uit gekomen.!
!
Na het testen van een kleurenschema met de doelgroep is een rustig schema ontstaan met als brandcolor mint groen. Het design is net als het kleurenschema erg rustig en modern gehouden. Dit sprak de doelgroep het meeste aan omdat dit niet afleid van de grote aantallen foto’s.
Bovendien zouden de kleuren uit de swatches, looks en producten die de doelgroep wil bekijken en vergelijken centraal moeten staan.!
!
Het eindresultaat is een sociaal platform waar foto’s van producten, looks en swatches centraal staan.
Inhoudsopgave!
!
Voorwoord!
1!
Managementsamenvatting!
2!
Inhoudsopgave!
3!
Inleiding!
4!
Doelgroep!
5!
Resultaten doelgroep onderzoek! 5!
Koopgedrag! 5! Persona! 6! Storyboard! 6! Feature List! 7! Extra features! 8!
Concurrentie!
9!
Concurrentie analyse! 9!Interactie!
11!
Indeling! 11! Zoeken en filteren! 13! Feature Flowchart! 14! Onderdelen! 15!Ontwerp!
16!
Kleuren analyse! 16! Definitieve kleurkeuze! 17! Trendanalyse! 18!Look and Feel! 19!
Visual Design! 20!
Techniek!
22!
Prototype! 22!
Prototype tests! 22!
Platform! 22!
Aanbeveling voor uitvoering!
23!
Inleiding!
!
Als make-up fanaat en verzamelaar spendeer ik heel wat tijd op het internet, zoekend, kijkend en vergelijkend. Na een tijdje werd het duidelijk dat de mensen die ik leerde kennen tijdens deze bezigheid dezelfde frustrerende punten tegen kwamen als ik. Er is nergens een zoekmachine voor make-up, we wilden allemaal graag online winkelen maar moesten eerst naar de winkel om iets fatsoenlijks te vinden. In de jaren dat ik hiermee bezig ben is het aantal blogs en vlogs flink gestegen. Steeds vaker zag je het fenomeen ‘swatch’ voorbij komen. Hoe maak je een swatch? Heel simpel, je haalt je vinger door het product en strijkt het vervolgend op de hand, pols of arm om te laten zien hoe de dekking, finish, kleur en kwaliteit nou eigenlijk echt is. Je maakt hier een foto van en zet het op het wereldwijde web. En daar heb je het dan, je swatch.!
!
Deze swatches bleken enorm handig te zijn maar ook één groot nadeel te hebben. De producten die geswatched zijn zien er totaal anders uit in verschillende soorten licht. Ook ziet een kleur er op iemand met een donkere huid heel anders uit dan op iemand met een zeer lichte huid. Het
resultaat hiervan is dus dat er veel en lang gezocht moet worden voor je een resultaat hebt waarop je een mening kunt baseren.!
!
Om een oplossing voor dit probleem te vinden besloot ik mijn afstudeerproject hier aan te wijden. Hopelijk is het mogelijk om uiteindelijk het ontworpen platform te laten bouwen en in gebruik te nemen.
Doelgroep!
Resultaten doelgroep onderzoek!
!
Doormiddel van enquêtes, group interviews en observaties is de doelgroep onderzocht. Het eerste deel van het onderzoek is gedaan doormiddel van de enquêtes en observaties. 59 meisjes uit de doelgroep hebben de enquête online ingevuld. De observaties zijn zowel online als offline gedaan. Meerdere observaties zijn gedaan in winkels waar make-up verkocht wordt, zoals de Kruidvat en Douglas. De online observaties zijn gedaan met een groep van 3 meisjes die de opdracht kregen om een nieuw product uit te zoeken.!
!
De doelgroep bestaat uit meisjes en jonge vrouwen tussen de 16 en 23 jaar. Deze meisjes zijn regelmatig tot dagelijks bezig met make-up en spenderen ook veel tijd online. Deze tijd vullen ze met het zoeken naar geschikte producten om te kopen, het bekijken van nieuws over nieuwe producten en het bekijken van de mening van anderen over het product. Een veel bekeken kanaal is youtube, waar meisjes zoals Bethany Mota bijna 6,5 miljoen volgers hebben . Bethany vertelt 1 haar mening over nieuwe producten en laat meisjes zien hoe zij zich op moeten maken. Doordat er ook relatief jonge meisjes in de doelgroep zitten, die vaak nog niet de mogelijkheid hebben om veel geld uit te geven zijn kortingsacties, goedkope alternatieven (ook wel dupes genoemd) en goedkope buitenlandse websites populair. De doelgroep haalt deze informatie van veel
verschillende kanalen zoals nieuwsbrieven, blogs, youtube en fora.!
!
Omdat er vaak erg veel informatie te vinden is op veel verschillende kanalen gebruiken ze graag sites als Bloglovin, dit is een website die RSS feeds uitleest waar je je op kan abonneren. Omdat bloggers vaak ook blogposts maken voor hun youtube filmpjes krijgen ze direct nieuws over nieuwe ‘vlogs’ en ‘blogs’. 60 Procent van de doelgroep deelt regelmatig foto’s van nieuwe
producten, make-up looks of swatches. De overige 40 procent van de testers uit de doelgroep doet dit niet omdat ze anoniem willen blijven of dit teveel werk vinden. !
!
De belangrijkste obstakels waar de doelgroep tegenaan loopt tijdens het zoeken, zijn de kwaliteit van de foto en het gebrek aan informatie, blijkt uit vraaggesprekken. Een swatch in direct zonlicht kan veel feller en glinsterender lijken dan het product eigenlijk is. Merken maken hier vaak gebruik van om het product beter over te laten komen dan het daadwerkelijk is.!
!
Koopgedrag!
!
De doelgroep koopt meerdere keren per maand make-up. De doelgroep gaf aan het liefst online te kopen, omdat dit vaak goedkoper en minder tijdrovend is. De doelgroep koopt producten zoals foundation vaak eerst in de winkel zodat ze kunnen zien of de kleur past, daarna kopen ze het product online. Lipsticks, blushes en oogschaduw wordt voornamelijk online verkocht.!
!
Speciale make-up zoals merken die niet in Nederland te krijgen zijn en Limited Editions worden online besteld. Ook worden sommige merken online vanuit het buitenland besteld omdat ze daar goedkoper zijn. Offline wordt make-up het meest gekocht bij de drogist. Dit gaat dan om zogenaamde ‘low budget’ make-up merken zoals Rimmel, Catrice en MUA. De ‘High end’ merken, zoals Mac Cosmetics, NARS en Benefit worden in luxere parfumerie zaken of online gekocht.!
!
Ook wordt er vaak actief gezocht naar kortingscodes en
aanbiedingen en vervolgens wordt er ingeslagen tijdens de acties. !
HQhair, populaire webshop.
Mota, Bethany. "Bethany Mota." YouTube. YouTube, n.d. Web. 17 Aug. 2014. <https:// 1
!
Limited Edition collecties van High End merken zoals MAC worden vaak online verkocht omdat ze daar eerder uit komen en in de winkel sneller uitverkocht zijn.!
De doelgroep gaf aan liever meer online te gaan winkelen. Dit gaat sneller en kost minder moeite. Het daadwerkelijke verschil tussen online en offline winkelen is vrij klein. In de winkel is de kleur vaak vertekend door het kunstlicht, maar online zijn weer erg veel verschillende swatches te vinden waarvan de doelgroep niet kan zien in wat voor licht het is gemaakt. Beiden hebben dus nadelen.!
!
Favoriete webshops van de doelgroep zijn de Nederlandse douglas.nl, de Engelse HQhair.com en de Amerikaanse beautybay.com. !
!
!
Persona!
!
Aan de hand van de resultaten uit de doelgroep onderzoeken is een persona opgezet.!
!
De persona, Lauren, is een 21 jarige student. Ze spendeert veel aandacht aan haar uiterlijk en houdt graag de laatste trends bij. !
!
Een van de doelen van Lauren is gemakkelijk een product te vinden dat bij haar past. Ook wil ze graag weten wat haar vrienden kopen en leuk vinden.!
!
Lauren houdt ook wekelijks een blog bij op wordpress. Zij zet daar nu swatches op maar vindt het teveel tijd kosten om de beste prijs en dupes erbij te zoeken. Dit zou ze liever automatisch gedaan willen hebben.!
!
!
!
Storyboard!
!
Het storyboard laat zien hoe de tweede persona, Jenna, het proces doorloopt van het zoeken naar een nieuwe foundation.Feature List!
!
Uit het doelgroeponderzoek is gebleken dat de gebruikers graag de volgende features zouden willen zien in het platform.!
!
Zoeken & Filteren!
-
Gemakkelijk kunnen zoeken en filteren!-
Uitgebreide filters!-
Huidskleur!-
Huidstype!-
Ondertoon!-
Prijs!-
Kleur!-
Finish!-
Dekking!-
Kwaliteit!-
Merk!!
De doelgroep wil graag simpel en makkelijk kunnen zoeken maar ook veel mogelijkheden hebben als dit nodig is. Omdat de eigenschappen van een product heel belangrijk zijn als het gaat om het zoeken naar een specifiek product zijn er veel verschillende filters nodig.!
!
Delen!
-
Tekstuele reviews achterlaten!-
Swatches achterlaten!-
Make-up looks delen!-
Mee doen aan wedstrijden!-
Gemakkelijk swatches kunnen delen op hun blog!-
Hun eigen make-up collectie kunnen delen!-
Wishlist kunnen delen!!
De doelgroep wil graag zowel haar make-up collectie als wishlist kunnen delen. Het delen van swatches is key feature in het platform en daarbij willen de gebruikers graag ook alleen tekstuele reviews kunnen delen. Foto’s van make-up looks die ze bij zichzelf hebben gemaakt willen ze ook delen. Ook zouden ze hiermee graag meedoen aan wedstrijden.!
!
Volgen!
-
Vrienden kunnen volgen!-
Bekende personen kunnen volgen!-
Blogposts kunnen volgen!-
Video kanalen kunnen volgen!-
Nieuws lezen!-
Lezen wat hun vrienden leuk vinden!-
Lezen wat hun vrienden kopen!!
Soms wil de doelgroep graag kunnen zien wat hun vrienden doen, leuk vinden en kopen. Ook willen ze graag bekende personen, ook wel ‘beauty guru’s’ kunnen volgen. Officieel nieuws van merken en nieuwe collecties zijn ook gewenst. Omdat dit nieuws meestal alleen productfoto’s en productnamen bevat zit er geen verschil in het vertrouwen dat de doelgroep heeft in officiële merken en beautybloggers.!
!
!
Ontdekken!
-
Browsen door een lijst met alle producten!-
Tips krijgen van producten die bij hen passen!-
Aanbiedingen lezen!-
Tutorials bekijken!!
Soms wil de doelgroep graag achterover kunnen gaan zitten en simpelweg kunnen lezen en klikken, om zo nieuwe producten te kunnen ontdekken. De doelgroep wil graag persoonlijke deals en tips te zien krijgen, op basis van een rijk ingevuld profiel.!
!
Extra features!
!
De doelgroep gaf ook aan dat ze graag een profiel aan wilde kunnen maken om zo hun huidtype en haarkleur aan te kunnen geven zodat ze konden zien welke producten goed staan bij welk type persoon. Ook wilden ze graag makkelijk dingen kunnen delen op facebook, twitter en fora.
Persoonlijke aanbiedingen en advies stond ook op hun verlanglijst. Overige resultaten uit het onderzoek waren dat de doelgroep graag foto-herkenning zou willen gebruiken om een make-up product terug te kunnen vinden dat gebruikt is in een foto. Een optie om een kleur bij jezelf te testen, online, door bijvoorbeeld een foto te uploaden was ook gewenst.!
!
Overige gewenste features!
!
-
Persoonlijk profiel!-
Delen op social media!-
Foto herkenning, zien welk make-up product er is gebruikt op een foto!-
Kleur ‘aanpassen’ via foto!!
Concurrentie!
!
Concurrentie analyse!
!
Tijdens de concurrentie analyse is er gekeken naar zowel make-up gerelateerde sites als overige zoek en vind sites. Grote vergelijkwebsite’s zoals Tweakers en Kieskeurig zijn geanalyseerd.!
!
Hieronder staat een tabel met een korte samenvatting van de analyse gedaan tussen deze websites. !
!
Temptalia is op dit moment de autoriteit wat betreft swatches, dupes en reviews. Temptalia is een
website met blog en database vol swatches, dupes en reviews gemaakt door de persoon achter Temptalia. Er is een kleine groep mensen die zich aan hebben gemeld bij de community die ook posts mogen schrijven voor Temptalia maar alle posts worden eerst gelezen door de eigenaresse van Temptalia zelf.!
!
Makeupalley was de autoriteit op het gebied van reviews, swatches en productfoto’s maar
vanwege een sterk verouderd design niet meer zo populair. Ze hebben nog steeds een grote database aan tekstuele reviews, maar niet zoveel swatches.!
!
Tweakers is de autoriteit op het gebied van techniek vergelijken. Op Tweakers is direct te zien
waar een product het goedkoopst te krijgen is, wat er goed of slecht aan is en wat de specificaties van het product zijn. Het heeft een redelijk modern design maar de interactie is niet heel sterk. Tweakers heeft wel de meest minimalistische interactie van alle testonderwerpen en is daarom redelijk snel aan te leren.!
!
Kieskeurig is een vergelijkingswebsite voor vrijwel alle soorten producten, make-up is echter niet
een belangrijk onderwerp voor hen aangezien hier niet zoveel aandacht aan wordt besteed. De interactie van kieskeurig is ietwat chaotisch en verouderd. Er staat veel tekst op.!
!
Voor dit voorbeeld zijn de 3 belangrijkste punten voor vergelijking naar boven gebracht. !
!
Filters, hier wordt beoordeeld of de filters voldoende mogelijkheden bieden. Er is gekeken naar
welke website de meeste relevante filter opties had.!
!
Interactie, hier wordt beoordeeld of de website een goede interactie heeft. Zijn de filters makkelijk
te gebruiken, is het makkelijk om door de site te lopen?!
!
Learning curve, hoe lang duurt het voordat de gebruiker door heeft hoe de website werkt en hoe
ze de filters moeten gebruiken?!
!
!
Tweakers heeft, ondanks de verschillende doelgroep, de beste interactie van de geteste websites.
Filters Interactie Learning curve
Tweakers +++ ++ ++
Kieskeurig + -
-Temptalia ++ + ++
Online Communities!
!
Naast zoek en vergelijk websites spendeert de doelgroep ook veel tijd op online communities. Een aantal van deze communities zijn genoemd en beschreven. Daarnaast zijn ze ook geanalyseerd om zo te kijken welke sterke en zwakke punten er spelen bij deze communities.!
!
YOUTUBE
!
Youtube is een welbekende community waar alleen filmpjes op gedeeld kunnen worden. Het aantal ‘beauty vloggers’ en ‘lifestyle vloggers’ is zeer groot. Het grootste beauty kanaal op youtube, Bethany Mota, op dit moment heeft zo’n 6,5 miljoen volgers. Bethany is een van de weinige vloggers die geen blog heeft. Wel heeft ze inmiddels haar eigen kleding lijn en tourt ze door Amerika om filmpjes op te nemen. Dit is dan ook een van de redenen waarom youtube zo populair is. Er zijn veel succesverhalen van meisjes die uitgroeien tot een beauty icoon en hun eigen make-up of kledinglijn (of collectie) mogen produceren. Youtube is op dit moment ook het platform waar het meeste geld binnen valt te halen voor de bloggers en vloggers.
!
!
SOCIAL MEDIA COMMUNITIES
!
Social Media Communities zoals Facebook, Instagram en Google+ zijn belangrijk voor zowel de bloggende als de niet-bloggende gebruikers uit de doelgroep. De bloggers kunnen hier adverteren
en bezoekers trekken voor hun blog. De niet-bloggers lezen hier graag het nieuws over hun favoriete blogs.
!
!
PINTEREST & INSTAGRAM
!
Hoewel dit twee verschillende communities zijn op verschillende platformen lijkt het gedrag van de gebruikers op deze communities erg op elkaar. De bloggers delen hier hun gemaakte foto’s van producten, swatches en looks. Niet-bloggers ‘Liken’ en delen dit en zo verspreiden de foto's van de bloggers zich steeds verder binnen de communities. Een gebrek dat beide communities hebben is dat er niet of niet makkelijk doorgeklikt kan worden naar meer informatie. Op Pinterest is de link soms verkeerd gegeven en gebeurd het nog wel eens dat de link naar een
compleet verkeerde pagina toe gaat. Op Instagram is het niet mogelijk om klikbare links te delen, de gebruiker kan eventueel wel via het profiel van de poster op een url klikken maar het is niet mogelijk om direct door te klikken naar informatie of een artikel.
!
!
WORDPRESS & BLOGGER
!
Wordpress en blogger zijn de twee meest gebruikte blog platformen. Een opvallend detail is dat meisjes die
‘professioneler’ willen bloggen vaak kiezen voor een eigen domeinnaam in combinatie met wordpress. Hobbymatig wordt blogger meer gebruikt omdat dit platform laagdrempeliger is. Een gebrek van beide platformen is dat de gebruiker de
indeling, sortering en informatiestroom bepaald. Vaak resulteert dit in rommelige
blogs met een onduidelijk archief. Lang niet alle blogs hebben een zoekfunctie of categorieën.
!
!
youtube.com
instagram.com
Interactie!
!
Indeling!
!
De doelgroep gaf aan zowel actief te willen kunnen zoeken als rustig te kunnen ‘vinden’. Om hier een onderscheid in te maken is het gedeelte waar de gebruiker kan zoeken/browsen duidelijk afgeschermd van het deel waar je kunt zoeken.!
!
Tijdens het onderzoek werd duidelijk dat een op dit moment populaire trend zeer goed werkt voor het zoeken. Deze trend is de grote search bar in het midden van de header. Tijdens het ontwerpen van de interactie zijn er twee
modellen ontworpen. Één homepagina met een traditionele balk met een zoek icoon en overige iconen en één
homepagina met daarop een groot zoekveld.
!
De eerste versie, die een grote slider op de voorpagina heeft met daarin ‘featured images’ en een boxed layout, kreeg positieve reacties van de doelgroep. De iconen waren echter niet direct duidelijk. Ook was het verschil tussen de blokken onder de navigatie en de slider niet duidelijk. Hier was initieel ook geen verschil voor aangegeven, beide
bevatten ‘featured images’ alleen zou de slider op iedere pagina moeten blijven staan. Een ander nadeel van dit ontwerp is dat er een limiet zit op het schalen. Kleiner is natuurlijk mogelijk maar met dit ontwerp zit je altijd vast aan een limiet van 960 pixels. Aangezien er
tegenwoordig steeds meer gebruik wordt gemaakt van grotere schermen is omhoog schalen een goed idee.!
!
De tweede versie, die geen slider meer bevat maar een simpele navigatiebalk met daarin het zoekveld centraal, werd door de gebruikers als zeer effectief bestempeld. ‘Het doet wat het moet doen’ was een reactie die vaak voor kwam in de test. Ondanks dat versie 1 bestempeld werd als ‘gezelliger’ viel de interactie van versie 2 wel beter in de
smaak. Versie twee heeft een extra rij content op de homepagina en schaalt mee met het beeldscherm. Het maakt optimaal gebruik van de ruimte beschikbaar op het beeldscherm. Het ‘community’ gedeelte, waar de gebruiker achterover kan zitten en kan browsen, is te vinden aan de linker kant van de navigatiebalk. Het persoonlijke gedeelte, waar de gebruiker haar profiel kan bekijken en dingen kan delen, staat aan de rechter kant. De zoekbalk staat hier groot centraal en kan dan ook niet gemist worden.!
!
Uit tests bleek dat het grote zoekveld zeer effectief is. Door een ‘slim’ zoekveld te gebruiken, waar ook hele simpele zoektermen al gerichte resultaten opleveren, kan de gebruiker gemakkelijk de eerste stap nemen om te gaan zoeken. De learning curve en
effortlessness van het interactie ontwerp zijn dan ook erg positief.!
!
Ook werd de tweede versie als overzichtelijk en rustig bestempeld. De bewegende slider uit versie één werd als afleidend gezien door de gebruikers waarmee de tests zijn uitgevoerd.!
!
http://swatched.com
Swatched
logo
Deals Join / News
Blog Vlog Contest
Footer Join / News Contest http://swatched.com Swatched logo 1
Deals Join / News
Blog Vlog Contest
Footer
Optie 1
De laatste trend waarmee getest moest worden was het image grid. Omdat optie 2 van het
homescherm een duidelijke voorkeur had is er vanuit dit oogpunt verder aan de interactie gewerkt. !
!
De sterke punten van optie 2, de fixed navigatie en de grote zoekbalk zijn behouden. Het grid bevat de optie om eindeloos te scrollen, de content laad vanzelf in terwijl de gebruiker naar beneden scrollt. Er staan een aantal duidelijke filters bovenaan de pagina waarbij de gebruiker simpele instellingen kan veranderen. Omdat ieder product minimaal 1 productfoto en een X aantal swatches bevat kan er ook gekozen worden om alleen productfoto’s te bekijken of juist alleen swatches te bekijken.!
!
Het foto grid schaalt mee met het beeldscherm van de gebruiker. Het grid is altijd beeldvullend en afhankelijk van het formaat beeldscherm zullen de rijen korter worden en/of de afbeeldingen kleiner schalen.!
!
!
http://swatched.com Swatched logo FooterView Swatch Grid
Friends News Everyone
Zoeken en filteren!
!
De doelgroep gaf aan op veel verschillende onderdelen te willen filteren.!
Om te onderzoeken wat de meest effectieve manier is om filters te gebruiken voor de doelgroep is er eerst onderzoek gedaan naar de methodes van andere websites, welke als positief worden ervaren. Hierna zijn er verschillende schermen ontworpen waarmee getest is binnen de doelgroep.!
!
!
Tijdens het testen werd duidelijk dat de doelgroep de visuele weergave van iconen die bepalen welk product type ze kunnen kiezen niet handig vonden. Dit omdat er voor het oog, wenkbrauwen en lippen veel verschillende soorten zijn die zo niet kunnen worden onderscheden van elkaar. Een voorbeeld hiervan is dat er onder de categorie ‘oog’ dan dus ook een oogprimer, oogpotlood, oogschaduw, mascara etcetera zou moeten vallen. Binnen deze subcategorieën zijn ook weer categorieën. Zo zijn vrijwel alle producten in waterproof en non-waterproof te krijgen en zijn er veel verschillende soorten oogschaduw, zoals poeder, creme, losse pigmenten, geperste pigmenten, etcetera. !
!
Uiteindelijk is gekozen voor een rustige interface door de filters dichtgeklapt te laten zitten. Ze kunnen naar wens uitgeklapt worden en zo kan er optimaal gebruik gemaakt worden van de filters indien nodig. De ‘product types’ worden gekozen door tekstuele categorieën aan te klikken. Deze lijst wordt gesorteerd op alfabet. !
!
Het grid waarin afbeeldingen staan van swatches wordt altijd getoond. De inhoud van het grid wordt bepaald door de ‘sorteer’ filter. Deze staat standaard op ‘nieuwste eerst’, waardoor de nieuwst toegevoegde swatches bovenaan zullen staan in het grid. Net als de andere grids in het platform heeft ook dit grid ‘infinite scrolling’.!
!
Ook is de zoekbalk weggelaten omdat de zoekbalk in de header altijd aanwezig is en een tweede zoekbalk dus overbodig is.!
!
!
http://swatched.com Swatched logo FooterSearch... ie 'Green glittery pigmented eyeshadow' Search
Sort by: Newest first
Filters Product type Brand Color Rating Price Skin type Coverage Traits http://swatched.com Swatched logo
Search Search Sort by: Newest first
Filters Product type Brand Color Rating Price Skin type Coverage Traits Footer http://swatched.com Swatched logo Filters Product type Brand Color Rating Price Skin type Coverage Traits Footer Sort by
Feature Flowchart!
!
!
De uiteindelijke feature flowchart beschrijft welke features er bij welke pagina in het platform komen te staan. De explore sectie wordt ook wel de social feed genoemd omdat dit de plek is waarop gebruikers de activiteiten van andere mensen kunnen zien en volgen. De explore sectie is ook wel de homepagina van Swatchlove.!
!
Alle productpagina’s, profielen en lookpagina’s zijn te delen via social media, dit is niet apart aangegeven in de flowchart.!
!
De features aangegeven in deze flowchart zijn de features die zullen verschijnen in de eerste versie van het platform. Overige features besproken in dit document zullen bij volgende versies gemaakt worden. De rede dat het platform in meerdere versies gebouwd moet worden is omdat het platform op deze manier met een eerste versie live kan en vervolgens doorontwikkeld kan worden. Op deze manier kan het platform alvast een userbase opbouwen en kan er een begin gemaakt worden aan het vullen van de database door de gebruikers. !
!
!
Explore Recommended Hot Add Search Profile
Blogposts Videos Contests News Social feed Shopping deals Based on profile Based on friends
Most viewed Swatches
Reviews Contest entry Based on wishlist Wishlist Profile Collection Uploads Eyes Lips Face Skintype Color Trait Rating Price Brand Swatched Makeup platform (desktop)
Onderdelen!
!
Het Swatchlove platform is onderverdeeld in een aantal pagina’s waarop de gebruiker kan zoeken en vinden. Hier staan alle onderdelen en hun functies beschreven zoals in de uiteindelijke versie naar voren zal komen.!
!
Swatchlove Home!
Op de homepagina is een grid met infinite scrolling geplaatst. Hierop zijn populaire looks en contents te zien van over de hele wereld maar ook de activiteit van de vrienden van de gebruiker. Het is hier mogelijk om te filteren. De gebruiker kan ervoor kiezen om alleen maar activiteit van vrienden te bekijken of alleen die van de hele wereld. De gebruiker kan ook kiezen om de swatchfoto’s te laten zien in het grid in plaats van de productfoto’s.!
!
Deals!
Op de deals pagina worden producten of webshops uitgelicht die op dit moment interessante acties hebben voor de gebruiker. Er worden persoonlijke deals uitgelicht, gebaseerd op de wishlist en loves van de gebruiker. Ook worden er algemene deals en kortingscodes uitgelicht. !
!
Hot!
Producten die binnen een periode van een week erg veel gestegen zijn in hun positie verschijnen op deze pagina. De ‘Hot’ pagina laat de trends in de producten zien. Op deze pagina wordt de feed gebaseerd op het percentage likes waarin het product gestegen is, in plaats van op het cijfer. Dit om ook nieuwe producten een kans te geven. Ook zorgt dit ervoor dat de feed niet alleen vol staat met ‘high end’ producten waarvan de kwaliteit over het algemeen beter is dan de ‘drogisterij’ producten.!
!
Add to Swatchlove!
Op deze pagina kan de gebruiker dingen delen met de community.! De volgende dingen kunnen gedeeld worden:!
-
Contest entries!-
Tekstuele reviews!-
Swatches!-
Looks!!
Profiel!Vanzelfsprekend kunnen de gebruikers hier hun eigen profiel bekijken en aanpassen. Ook kunnen de gebruikers hier hun eigen collectie en wishlist bekijken.!
!
Zoeken!
In deze sectie kan de gebruiker zoeken naar producten of looks die aansluiten bij zijn of haar wensen. Doormiddel van handige zoekfilters kan de gebruiker snel en makkelijk zoeken. De zoekbalk blijft altijd in beeld zodat de gebruiker makkelijk en snel kan zoeken.
Ontwerp!
!
Kleuren analyse!
!
Al sinds het begin van Swatchlove is er een duidelijke voorkeurskleur geweest in het design; blauw. Deze specifieke, warme kleur lichtblauw spreekt en is duidelijk. Met deze kleur als uitgangspunt zijn er een aantal andere kleuren en kleurenschema’s naar voren gekomen. Het is begonnen met een aantal complementaire kleuren, zoals oranje en roze. Beide vrij aanwezige kleuren, en naast de al erg aanwezige blauwtint moest er nog een rustige kleur bij komen. Beige complementeert zowel blauw als oranje, roze en een hoop andere kleuren. Het is vrij neutraal en zeer geschikt voor bijvoorbeeld achtergronden die niet af mogen leiden.!
!
Uit een individuele brainstorm sessie zijn de volgende palettes gekomen:!
!
Palette 1 is geïnspireerd op een persoonlijke
favoriet en iets wat ook veel speelt bij de doelgroep; cupcakes. Één van de favoriete merken van de doelgroep; Too Faced, sluit erg goed aan bij dit palette. Omdat een groot deel van het verzamelen, bekijken en gebruiken van make-up ook gaat om de merken en het uiterlijk van de producten past een zoet ontwerp goed bij het platform.!
!
Palette 2 is vrolijk zomers, maar door de koele en gedempte kleuren ook heel goed passend in
andere jaargetijden. De blauwtint is ook hier iets zachter en onopvallender gemaakt waardoor alleen de roze kleur nog opzichtig is. De roze kleur kan goed gebruikt worden als highlight kleur om de nadruk te leggen op een bepaalde feature of zin.!
!
Palette 3 is geïnspireerd op Koi vissen in het water. Niet geheel make-up gerelateerd maar het
straalt rust en schoonheid uit. In dit palette is de blauwe kleur naar voren gekomen zoals hij initieel bedoeld was. De oranje kleur werkt complementerend en zorgt voor een mooie, opvallende
contrast kleur.!
!
Palette 4 bevat echte trendkleuren voor 2014, de blauwe kleur neigt naar groen en de kleuren zijn
gedempt. De groenblauwe kleur zorgt voor een mooi contrast met het roze en de licht blauwgroen en lichtroze passen goed bij de geel-beige kleur. Deze lichtere kleuren kunnen goed gebruikt worden als achtergrond kleuren en de felle kleuren zijn mooie highlight kleuren.!
!
Na de voorkeurskleuren bepaald te hebben; blauw, roze, oranje en bruin is er onderzoek gedaan naar de psychologische aspecten achter deze kleuren. Hier volgt een korte analyse van het kleuren onderzoek.!
!
Blauw: Creëert een gevoel van vertrouwen en veiligheid. Is ook wel terug te zien bij banken en grote warenhuizen. !2
Roze: Romantisch en vrouwelijk, stereotype kleur gebruikt voor een vrouwelijke doelgroep. Wordt gebruikt bij een doelgroep met traditionele kopers en voor kledingwinkels. Roze is ook een kleur die door veel mensen gezien wordt als een creatieve kleur die aanroept tot verbeelding en inspiratie.!
Oranje: Agressieve kleur, vaak gebruikt voor Call to Action en het werven van abonnees of leden. Is ook wel terug te zien in outlet winkels, sale pagina’s en trekt impuls aankopen aan. Oranje wordt
Hallock, Joe. "Colour Assignment - Preferences." Joe Hallock, n.d. Web. 17 Aug. 2014. <http:// 2
door de meeste mensen als een vrolijke kleur gezien. In de Nederlandse cultuur wordt oranje ook wel geassocieerd met Nederland en voetbal.!
!
Na deze analyse is besloten het palette met de kleur oranje te laten vervallen. Dit omdat er teveel negatieve associaties aan vast zitten zoals sales, voetbal en fastfood restaurants. Palette nummer 3 1 viel ook af omdat de kleuren te zacht zijn er er geen highlight kleur is. Daarbij zijn er
verschillende onderzoeken die wijzen dat vrouwen over het algemeen niet van de kleur bruin houden. De keuze viel dus op palette 2 of 4, de keuze is na testen bij de doelgroep gevallen op palette 2. Dit omdat dit palette maar één highlight kleur heeft en verder erg rustig is. Dit helpt de foto’s van de producten er uit te springen. De blauwe voorkeurskleur waar alles mee begon is zachter gemaakt en heeft plaats gemaakt voor een sterke roze kleur. !
!
Definitieve kleurkeuze!
!
Tijdens het ontwerpen werd duidelijk dat de zachte kleuren niet genoeg contrast hadden
om de verschillende onderdelen van de interactie duidelijk te maken. Er is een witte kleur
toegevoegd aan het palette om zo een heldere, schone achtergrond te creëren voor de
afbeeldingen die getoond worden op de pagina’s. De zandkleur is veranderd in een lichte
grijstint om een rustige ondergrond te creëren om onderdelen zoals blokken weer te
geven.!
!
Na het testen met de doelgroep bleek dat de contrasten tussen de gekozen kleuren nog
niet groot genoeg was. Ook na de eerste aanpassingen van het palette niet. De gekozen
kleuren zijn grijs, wit en zwart. Daarnaast blijft de mintgroene kleur als brandcolor. De
mintgroene kleur is feller en donkerder geworden zodat de witte tekstkleur meer afsteekt.!
!
Het volgende kleurenpalette is het definitieve palette: !
!
De doelgroep reageerde het beste op de tests met dit
palette. Er is gekozen om nog maar één kleur te
kiezen. Dit onderscheidt het Swatchlove merk van
andere merken en het is zo makkelijk te herkennen.
Ook oogt het rustig en stoort het niet met de kleuren
uit de foto’s, die erg belangrijk zijn. Ook vonden zij de
teksten makkelijker te lezen en vonden zij de foto’s op
een witte of lichtgrijze achtergrond mooier staan dan de voorheen gekozen zandkleurige
achtergrond.!
!
Wildrich, Leo. "The Science of Colors in Marketing." Buffer Social. Buffer, 23 July 2013. Web. 17 3
Trendanalyse!
!
Door trends te bekijken en analyseren op verschillende populaire websites en nieuwssites
is het mogelijk geweest een patroon te vormen. De populaire trends die gebruikt zullen
4worden in het platform zijn hier uitgelicht.!
!
Flat design!
Een trend waar we al een tijdje niet meer omheen
kunnen. Een van de grootste partijen op mobiel gebied,
Apple, heeft ook toegegeven aan flat design. Het flat
design zie je niet alleen terug in het gebruik van logo’s
maar in de algehele website. Schaduwen, patterns en
effectjes zijn niet meer. Ook de schaduw van een flat
design is flat, met harde rechte lijnen. !
Iconen zie je in verschillende stijlen terug. Het zijn
gevulde iconen, alleen de outlines van de iconen of juist
gedetailleerde iconen met kleur en oog voor detail.
Natuurlijk dit allen wel op de ‘flat design’ manier, zonder
textures, patterns en effectjes.!
!
Text over images!
Schone, witte tekst zonder schreef zie je in 2014 veel
terug op afbeeldingen. Wisselend worden deze
afbeeldingen zachter gemaakt door er een wazig effect
aan toe te voegen. Dikke witte lijnen kunnen de tekst
omkaderen. Een algemene trend in 2014 is dat alles
steeds meer visueel wordt. Langzaam stappen we af van
de kale pagina’s met tekst en afbeeldingen die in 2013
nog een grote trend waren en gaan we naar pagina’s die
volledig gevuld zijn met foto’s.!
!
Image grid!
Deze pagina’s worden dikwijls gevuld met foto’s door ze te
plaatsen in een vierkant grid. Wisselend wordt er ook alleen
een gekleurde achtergrond met daarop tekst weergegeven.
Het gebruik van het grid is makkelijk en schaalt dikwijls direct
mee met de browser om zo op ieder scherm een volledig
gevuld beeld te hebben. Vaak hebben deze grids een hover
state waarop meer informatie staat. De ‘Text over images’ trend
wordt hier dan ook vaak gebruikt. Op de foto's in het grid is
vrijwel nooit beschrijvende tekst te vinden.!
!
!
!
!
!
!
Battjes, Desiree. "10 Webdesigntrends Voor 2014." Frankwatching. Kees Internetbureau, 26 Nov. 4
2013. Web. 17 Aug. 2014. <http://www.frankwatching.com/archive/2013/11/26/10-webdesigntrends-voor-2014/>.
Moving effects!
Een andere leuke trend van 2014 is dat er steeds meer
bewegende effecten komen. Zoekbalken die vanzelf
uitklappen, bewegende effecten wanneer er gehovered
wordt en ga zo maar door. Zelfs bewegende popups met
een kleine inleiding van de website zijn weer hip. Vaak
verbergt de hover state een nieuwe actie die je kunt
uitvoeren met een element. Het delen van een foto
bijvoorbeeld of het verwijderen van een product. !
!
Look and Feel!
!
Een grote bron van inspiratie tijdens het
ontwerpen van het platform is een bekend
make-up merk geweest. Naast dat het een
persoonlijke favoriet is, is het ook een grote
favoriet van de gebruikers. Het merk ‘Too
Faced’ werd vaak genoemd in het
gebruikersonderzoek als er werd gevraagd
naar mooiste verpakkingen of brand images.
Too Faced heeft een zachte, vrouwelijke stijl.!
!
De kleuren zachtgeel, goud en knalroze komen
vaak terug in zowel de producten als de
huisstijl van het merk.!
!
Omdat het belangrijk is dat de kleurige producten, foto’s en swatches
centraal te houden is er gekozen voor een zachte achtergrond met een
accent kleur die tekenend voor het merk kan zijn. !
!
De ‘feel’ van het platform moet modern en
vooruitstrevend zijn. Daarom is er gekozen om in te
spelen op populaire trends. !
!
!
Visual Design!
!
Het uiteindelijke visual design is hieronder uitgelicht en kort beschreven. Het volledige design is te bekijken in het visuele document dat is toegevoegd in de bijlage.!
!
Logo!
Het gekozen logo is wit, zodat het goed uit komt op de gekozen brandcolor. De gekozen brandcolor is ook te zien op de achtergrond van het logo. De naam van het platform wordt ‘Swatchlove’, vandaar dat het logo bestaat uit hartjes en meerdere onderdelen daarvan.
De gedachte achter het logo is vrij breed. Allereerst is er het hartje, dat staat voor de liefde voor make-up. Daarbij zijn er meerdere delen van het hartje dat over elkaar gelaagd zijn. Deze staan voor de geswatchede make-up die in meerdere lagen geswatched worden. De meerdere vormen staan voor de community die samen komt en samen het hart vormt.!
!
!
Homescherm!
Het homescherm bestaat uit een grote header met de zoekbalk centraal. De zoekbalk is altijd
beschikbaar om zo optimaal gebruiksgemak mee te brengen. De header is een ‘floating header’ en zal dus tijdens het scrollen mee naar beneden gaan en altijd in beeld zijn. In de header is het logo van Swatchlove te zien samen met de 4 icons die de onderdelen van Swatchlove aangeven.!
!
Op de homepagina staat een ‘global’ grid dat gevuld is met wereldwijde populaire swatches, contests en looks. Daarbij is ook de vrienden activiteit van de gebruiker te zien indien zij is ingelogd. Bovenaan het grid is de optie om te filteren zodat er alleen gebruiker activiteit getoond wordt. Ook is er een optie om alleen swatches of juist alleen productfoto’s van de productposts (swatches, reviews en producten) te zien. De looks en contests hebben altijd een ‘full face’ afbeelding.!
!
!
Profiel!
Op het profiel van de gebruiker is korte informatie te vinden over wie de gebruiker is en hoe zij eruit ziet. Social media accounts kunnen gekoppeld worden. Hier zijn 3 grids te vinden die te bereiken zijn via tabbladen in een divider. De collection balk staat open bij het eerste bezoek, hierna kan de bezoeker zelf wisselen tussen de tabbladen. De contest entries staan tussen de ‘looks’ in het grid en worden aangeduid met een icoon.
! !
!
!
!
!
!
Product pagina!
Op de product pagina is net als op de profielpagina een divider te zien waarop 3 tabbladen te zien zijn. Swatches; de pagina die open staat bij het eerste bezoek, Looks en Reviews. !
!
Boven de divider staan 4 blokken. Één gevuld met een foto van het product. Als hier op geklikt wordt zal een gallery met overige foto’s openen. Hiernaast staat een blok met informatie en een cijfer. Helemaal rechts staat het kleuren palette waarmee gezocht kan worden naar soortgelijke producten. Hieronder staat de tag cloud met de tags waarmee het product is getagd.!
!
!
!
!
!
Zoeken!
De zoekpagina is net als de rest van het ontwerp erg clean. De ingeklapte filters houden de pagina rustig. Door uitklap panelen te gebruiken zijn de grote aantallen filters goed en snel bruikbaar maar storen niet. Naast de filters is een grid weergegeven met de nieuwste producten. Dit grid zal veranderen in een grid met
zoekresultaten nadat de gebruiker ergens op heeft gezocht. !
!
!
!
!
!
!!
Deals!
De deals pagina heeft een infinite scrolling grid, waarop deals van verschillende formaten te zien zijn. Dit zodat de adverteerders meerdere opties hebben en doormiddel van een grotere advertentie meer op kunnen vallen. De advertenties kunnen in de vorm van 1, 2 of 4 vakjes worden gekocht. De advertenties worden gesorteerd op volgorde van nieuwste tot oudste. !
!
Acties die niet meer gelden worden automatisch uit het grid gehaald. !
!
Techniek!
Prototype!
!
Voor het prototype is er besloten een klikbaar prototype te maken. Dit omdat het voldoende functionaliteit toont en de ‘flow’ van het platform duidelijk kan tonen. Met een klikmodel lijkt het alsof de tester zich al op de daadwerkelijke website begeeft en zo kan er een nauwkeurige inschatting worden gemaakt van het succes van de uiteindelijke versie van het product.!
!
Om het prototype te ontwikkelen wordt er gebruik gemaakt van de Axure applicatie.!
!
De volgende functies zijn weergegeven in het prototype:!
-
Deals!-
Producten!-
Swatches!-
Looks!-
Reviews!-
Looks!-
Profielen!-
Hot list!-
Zoeken!-
Filteren!!
Het prototype wordt volledig aangekleed met de visuele ontwerpen om zo een zo realistisch mogelijk beeld te vormen voor de testgroep.!
!
Prototype tests!
!
De laatste tests voor het concept zijn gedaan doormiddel van het klikbare prototype. Een groep van 3 testers uit de doelgroep en 1 tester met ervaring in interactie en ontwerp hebben het prototype getest. !
!
Uit deze tests bleek dat het huidige kleurenschema als zeer positief werd ervaren. Het is rustig maar sprekend en leidde niet af van de productfoto’s en swatches, volgens de testers. Ook de interactie werd goed opgevangen. De enige kritiek die de doelgroep had was dat het niet volledig duidelijk was wat het verschil was tussen de ‘global’ pagina en de ‘homepagina’. In het definitieve ontwerp zijn deze twee pagina’s dus samengevoegd tot één geheel.!
!
Platform!
!
Voor de bouw van het platform zijn een aantal technieken gekozen. Deze technieken zijn gekozen per functie van het platform en zijn gebaseerd op ervaring en advies van de technische adviseur. !
!
Het platform zal zoveel mogelijk in HTML5, CSS3 en jQuery gebouwd worden omdat met deze moderne taal veel mogelijkheden zijn te behalen. Een aantal van deze mogelijkheden voor het platform zijn:!
-
Color picker vanaf een foto !5-
Hover transitions (wazige foto met tekst en iconen erover, zoals te zien in het prototype en het ontwerp document.)!-
Schaalbaar grid!-
Infinite ScrollingVieiria, Sara. "How to Create a Color Picker with HTML5 Canvas." Webdesigner Depot. N.p., 21 5
Mar. 2013. Web. 17 Aug. 2014. <http://www.webdesignerdepot.com/2013/03/how-to-create-a-color-picker-with-html5-canvas/>.
Aanbeveling voor uitvoering!
!
Wanneer dit project uitgevoerd wordt kan ik aanraden om meer onderzoek in de technische kant te stoppen. Als visual designer heb ik niet de volledige kennis om een uitgebreid onderzoek naar de geschikte techniek voor dit platform te doen. Ik heb een externe professional in moeten schakelen om mij hier over te adviseren.!
!
Vervolgens zou ik bij verschillende bedrijven een offerte aanvragen voor het platform en op basis hiervan een gemiddelde stellen voor de kosten die gemaakt zullen worden. Hiermee kan dan een financieel plan geschreven worden en kan de zoektocht naar investeerders beginnen.!
!
Om de database snel te vullen en veel gebruikers te trekken is het belangrijk dat de juiste kanalen worden aangesproken. De make-up professionals kunnen hiervoor gebruikt worden. Zij staan vaak open voor betaalde advertorials. Hiermee kan er naamsbekendheid gecreëerd worden en een goede userbase opgebouwd worden.!
Bijlagen!
!
Het interactie ontwerp en ontwerp document zijn te vinden in de bijgevoegde
documenten.
!Makeup Alley!
http://makeupalley.com!
-
Verouderd!
-
Vroeger autoriteit!
-
Lelijk?!
-
Slechte interactie!
-
Ene zoekresultaat wel inloggen, andere niet!
-
5 sterren systeem, verder tekst.!
-
weinig foto’s!
-
slechte kwaliteit foto’s!
-
grote database!
!
Temptalia!
http://temptalia.com!
-
Modern!
-
Grote database met goede kwaliteit foto’s!
-
Alle swatches van dezelfde personen!
-
Publiek kan niet meewerken aan vullen database!
-
Heel erg groot, weinig content above fold!
-
Dupes genoemd!
-
Algemene verkooppunten genoemd (geen webshops)!
-
‘Glossover’!
-
Veel reclame!
-
Foundation matrix!
-
Veel bezoekers, geen actieve
deelnemers
Web design trends 2014!
!
http://www.hongkiat.com/blog/web-design-trends-2014/! http://www.frankwatching.com/archive/2013/11/26/10-webdesigntrends-voor-2014/!!
Flat UI!7. Flat Design Elements!
How could I discuss web design trends without mentioning the widespread use of flat UI elements. CSS3 allowed designers to create much flatter buttons using natural box shadows, text shadows, or rounded corners. This flat UI pattern transcended into form inputs and even navigation menus.! But I feel there is more we can expect in the near future. Flat icon sets and GUI kits have been released for free on dozens of websites. In my guide to flat web design you can find heaps of free downloadable PSD/AI graphics. Metro-style layouts have also grown in popularity from Microsoft’s Windows OS and the Windows Mobile Phone.!
!
Voorbeelden:! http://www.belancio.com/design/work/billione-rikko! !!
Webdesign trends 2014
Doelgroep test !
Homepage
!
6 juni 2014!
!
Testpersonen! Lisa - 22 jaar! Wies - 17 jaar! Ginny - 18 jaar! Amanda - 20 jaar!!
De testpersonen zijn twee verschillende wireframes voorgelegd. Individueel
konden zij hier hun mening over geven en aangeven welke wireframe hun voorkeur had en waarom.!
!
Lisa
Nummer een is lekker duidelijk, ik weet direct waar ik op moet klikken. Kan ik ook ergens zien of ik ingelogd ben? Wat komt er in de grote afbeelding daarboven te staan? Dat is een slideshow toch?
-uitgelichte afbeeldingen- Oh maar zijn die blokjes dat dan niet ook? -ja- oh oke. Beetje dubbel op
dan? Nouja staat wel leuk denk ik. Als de afbeeldingen maar wel scherp zijn. Nummer twee is een beetje app achtig. Wel raar dat hij zo breed is, wat nou als ik een 13 inch laptop heb? - dan schaalt
hij mee en is hij ook volledige breedte - Oh cool, als het dan maar niet opgepropt wordt is het wel
goed, dan is het voor iedereen goed te bekijken. Ik vind Nummer 2 wel heel fijn rustig, het is gewoon alleen het menu en dan zie je alle plaatjes. Mijn voorkeur gaat naar Nummer 2.!
!
Wies!
Nummer twee, die vind ik het beste. Dan kan ik direct wat intypen om te zoeken en als ik daar geen zin in heb dan klik ik gewoon op iets op de voorpagina. Kun je nou bij allebei vanzelf
doorscrollen of heb je alleen die 3 rijen? - Nee het is geen endless scroll. - Oh oke. Dat zou ik dan wel fijn vinden, dan hoef ik helemaal niets te doen als ik daar geen zin in heb. !
!
Ginny!
Ik vind het wel wat lastig te beoordelen zo zonder plaatjes. Staan die ‘deals’ enzo tekstjes er straks nog bij, nee zeker? -nee, dan zijn het alleen plaatjes.- Ik zou wel graag duidelijk willen hebben wat het allemaal is, anders weet ik niet zo goed waar ik op klik. Ik vind optie 2 wel het mooiste want dat is het rustigs. Je krijgt straks al die kleurtjes en plaatjes door elkaar en dan wil ik niet afgeleid worden door bewegende foto’s want dan raak ik in de war. Optie een is opzich wel leuk maar ik denk dat optie twee makkelijker te begrijpen is.!
!
Amanda!
Ik vind ze allebei wel leuk zo maar ik je ziet optie 2 wel vaak tegenwoordig en dat is wel handig. Een beetje net zoals pinterest dat is ook heel makkelijk zoeken en lekker kijken en kikken. En ik vind het altijd een beetje vervelend als mijn halve beeldscherm is gevuld met zo’n slideshow en dat dan steeds heen en weer gaat terwijl ik iets aan het lezen ben of een filmpje kijk ofzo. Dat vind ik niet zo fijn. Ik vind alleen wel dat nummer 2 veel ruimte heeft tussen de foto’s, misschien moet dat
http://swatched.com
Swatched
logo
1
Deals Join / News
Blog Vlog Contest
Footer
Wireframe 1
iets minder worden. En meer foto’s? Er past heel veel op zo maar er is niet heel veel op gezet. Ik zou voor nummer 2 kiezen dus.
