Digitas LBi Scotch & Soda mobiele omgeving User Experience Document Bart van den Brink & Wouter Greveling
Hogeschool Utrecht Communication & Multi Mediadesign Docenten: Laurens Vreekamp & Hans Kemp Proofing & Reflecting 16-01-2014 wouter.greveling@student.hu.nl bart.vandenbrink@student.hu.nl
Hier komt een knop die je brengt naar het design-tips scherm voor mannen. Visueel wordt hier duidelijk gemaakt dat het om de mannelijke categorie gaat. Wanneer de gebruiker hier op klikt, vergroot het vakje totdat het hele scherm gevuld is en wordt hierin het nieuwe scherm geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die je brengt naar het design-tips scherm voor vrouwen. Visueel wordt hier duidelijk gemaakt dat het om de mannelijke categorie gaat. Wanneer de gebruiker hier op klikt, vergroot het vakje totdat het hele scherm gevuld is en wordt hierin het nieuwe scherm geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die de gebruiker brengt naar het Store-locator scherm. Wanneer hier op wordt geklikt, wordt het vakje vergroot totdat het hele scherm is gevuld. Hier wordt vervolgens het nieuwe scherm in geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die de gebruiker brengt naar het favorietenscherm. Wanneer hier op wordt geklikt, wordt het vakje vergroot totdat het hele scherm is gevuld. Hier wordt vervolgens het nieuwe scherm in geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt een knop die de gebruiker brengt naar het winkelmandje. Wanneer hier op wordt geklikt, wordt het vakje vergroot totdat het hele scherm is gevuld. Hier wordt vervolgens het nieuwe scherm in geladen. Alle andere iconen op het scherm verdwijnen uit het scherm met een schuivende beweging. Hier komt het logo van Scotch & Soda of een andere notificatie zoals aanbiedingen.
First time use Als de gebruiker voor het eerst gebruik maak van de interface krijgt hij een uitleg te zien. Kleine tips die het gebruik van de mobiele omgeving aansporen. Bijvoorbeeld het sliden van de pagina of het omlaag trekken van het filter. In dit UX document word je rondgeleid door de Scotch & Soda mobiele website. Placeholder voor een achtergrond die bij de desbetreffende tip hoort. Dit kan wit zijn, maar ook een plaatje als het onderdeel is van de bijbehorende tip. Het achtergrondplaatje beweegt dus met dezelfde slidebeweging mee als het model.
Hier komt een model met het willekeurige kledingstuk dat aan de hand van de ingevulde instellingen wordt gekozen. Door van rechts naar links te sliden, verdwijnt het plaatje uit de linkerkant van het scherm en verschijnt de nieuwe tip vanuit de rechterkant met een schuivende beweging. Dit kader vormt een selectietool om de juiste kledingcategorie te kunnen selecteren. Het kledingtype dat zich binnen het kader bevindt staat in verbinding met de tips die getoond worden.
Dit werkt als een band met daarop iconen voor de verschillende kledingtypes. Deze band kan naar links en naar rechts gesleept worden, zodat de juiste categorie in het selectiekader geplaatst kan worden. Het complete menu aan de bovenkant kan naar beneden getrokken worden, zodat er een extra menu tevoorschijn komt met enkele functies waaronder filters.
Wanneer de gebuiker het scherm aanraakt zal er een overlay menu over het complete scherm verschijnen. Hierin worden enkele opties aangeboden en zal er wat meer informatie staan over het desbetreffende kledingstuk en de tip.
Hier komt informatie te staan over het desbetreffende kledingstuk en de tip die erbij gegeven wordt.
Dit icoon staat voor de optie om de kledingtip op te slaan in je favorieten. Na er op gelikt te hebben zal het icoon dikker gedrukt worden om aan te geven dat de tip vanaf dat moment in de favorieten staat. Door er nog een keer op te klikken gaat het icoon weer terug naar de normale grootte en wordt de tip verwijderd uit de favorieten.
Dit icoon staat voor de optie om de kledingtip te delen met je sociale omgeving. Door er op te klikken zal er een extra menu geopend worden.
Dit icoon staat voor de optie om het kledingstuk binnen de tip toe te voegen aan je winkelwagen. Na er op gelikt te hebben zal het icoon dikker gedrukt worden om aan te geven dat de tip vanaf dat moment in de winkelwagen staat. Door er nog een keer op te klikken gaat het icoon weer terug naar de normale grootte en wordt de tip verwijderd uit de winkelwagen.
Wanneer je op de delen knop drukt verschijnt dit extra menu. Door op de bovenste optie te klikken zul je de foto opslaan op het geheugen van de smartphone. Dit is de optie om de foto te delen met je sociale omgeving. Wanneer hier op geklikt wordt zullen er extra opties tevoorschijn komen.
Door hier op te klikken ga je terug naar het vorige menu.
Door te klikken op het gebied buiten de aangegeven opties ga je eveneens terug naar het vorige menu.
Wanneer er op ‘foto delen’ is geklikt, zullen deze extra iconen tevoorschijn komen. De bovenste optie van het menu, foto bewaren, zal omhoog schuiven door middel van een schuivende animatie om op die manier ruimte te maken voor de nieuwe iconen. De nieuwe iconen achter de nieuwe ruimte die open gaat al te zien zijn alsof ze er altijd al waren. Wanneer er op een van deze iconen wordt geklikt, zal de foto van de tip die op dat moment geopend is, gedeeld worden via het bijbehorende programma.
Door te klikken op het gebied buiten de aangegeven opties ga je terug naar het vorige menu. De ‘Annuleren‘ knop onderaan heeft hetzelfde effect.
Door de vinger op het scherm te plaatsen en naar links te bewegen, zal de nieuwe tip geladen worden. Het plaatje zal samen met de achtergrond naar links bewegen en uit het scherm verdwijnen.
Wanneer er gewisseld wordt van kledingtip, zal het plaatje naar links bewegen en hier uit het scherm verdwijnen. Tegelijkertijd zal aan de rechterkant een nieuw plaatje tevoorschijn komen en naar het midden van het scherm gaan. Dit gebeurt allemaal met een schuivende animatie. Als er van kledingcategorie gewisseld wordt, zoals dat eerder beschreven werd, zullen alle iconen een (aantal) plaats(en) opschuiven. De gebruiker is niet geheel vrij in het bewegen van deze band, omdat er gebruik wordt gemaakt van ankerpunten. Door lichte magnetische kracht zal het icoon dat het dichtste bij het markeerkader staat, naar het midden van het kader getrokken worden wanneer de gebruiker de vinger loslaat. Wanneer er van kledingcategorie gewisseld wordt, zal de kledingtip die bij de vorige categorie hoorde ook gewisseld worden. Dit gebeurt eveneens met een schuivende beweging waarbij het plaatje uit het scherm verdwijnt. Of dit links of rechts is, wordt bepaald door de richting waarin de kledingcategorie bewogen wordt. De iconen voor de kledingcategorieĂŤn zullen uit het scherm verdwijnen door middel van een schuivende beweging. Of dit de linkerkant of rechterkant is wordt bepaald door de beweging van de vinger.
Dit menu komt naar voren, wanneer de band met kledingcategorieĂŤn naar beneden getrokken wordt. Deze beweging zal gepaard gaan met een schuivende animatie. Wanneer er met de vinger een schuifbeweging naar boven gemaakt wordt, zal het uitgeklapte menu weer terugkeren naar zijn vorige positie. Dit icoon staat voor de lijst met opgeslagen favorieten. Door er op te klikken zal de gebruiker naar een nieuw scherm gebracht worden. Dit icoon staat voor de store-locator. Door er op te klikken zal de gebruiker naar een nieuw scherm gebracht worden. Dit icoon staat voor het winkemandje. Door er op te klikken zal de gebruiker naar een nieuw scherm gebracht worden. Een filter waar de gebruiker kan aangeven of hij op zoek is naar tips voor mannen of vrouwen. Door de slider naar links of rechts te schuiven kan de gebruiker een keuze maken. Een filter waar de gebruiker kan aangeven of hij op zoek is naar tips voor de zomer of winter collectie. Door de slider naar links of rechts te schuiven kan de gebruiker een keuze maken. Een filter waar de gebruiker kan aangeven welke maat hij heeft. De maataanduiding verandert aan de hand van de kledingcategorie die geselecteerd is. Door de slider naar links of rechts te schuiven kan de gebruiker een keuze maken. Standaard zal de slider op L staan voor de mannen en M voor de vrouwen Een filter waar de gebruiker kan aangeven in welke kleur hij wilt dat de kledingstukken gekozen worden. Er kunnen hier meerdere kleuren aangevinkt worden door op het vakje te klikken. Er wordt dan een glow om de rand van het vakje geplaatst om de selectie te laten zien
Dit is het overzicht waarin de gebruiker al diens opgeslagen kledingtips kan terugzien. De tips worden in twee verschillende kolommen onderverdeeld. De band met iconen voor alle kledingcategorieĂŤn fungeert nu als filter om de opgeslagen favorieten onder te verdelen. De slide-beweging is hetzelfde gebleven zoals eerder vermeld werd. Ook kan dit menu weer naar beneden getrokken worden voor een extra menu De plaatjes staan voor de kledingtips die de gebruiker interessant vind en op heeft geslagen. Deze worden hier onderverdeeld in twee kolommen met de meeste recente tip bovenaan. Wanneer de gebruiker klikt op een plaatje zal deze uitvergroot worden, zoals dat het geval is bij het design-tip menu. De mogelijkheid om het overlay menu op te roepen, wordt dan ook weer geactiveerd, zodat de gebruiker de desbetreffende tip ook weer kan verwijderen uit diens favorieten. De gebruiker kan door met diens vinger over het scherm te sliden, alleen naar boven en beneden, scrollen door alle opgeslagen favorieten. Er wordt hier gebruik gemaakt van een infinite list zodat de gebruiker oneindig lang kan doorscrollen totdat hij het einde van de lijst heeft bereikt.
Dit icoon staat voor een knop die de gebruiker naar het store-locator scherm zal brengen. Er wordt hiervoor een nieuw scherm geopend.
Op deze plek stond normaal het icoon en de knop om naar de favorieten te gaan, maar aangezien de gebruiker hier nu is, wordt de knop verandert naar de home knop. Via deze optie keert de gebruiker terug naar het kledingtip menu.
Dit icoon staat voor een knop die de gebruiker naar het winkelmandje zal brengen. Er wordt hiervoor een nieuw scherm geopend.
Dit menu kan gebruikt worden om het extra menu tevoorschijn te halen. Door deze balk met de vinger naar beneden te trekken, verschijnt het extra gedeelte door middel van een schuifbeweging.