Screen Design Naam: Maarten van Domburg Studentnummer: 0864421 Klas: CMD2A Docent: Bart Nederveen Opdracht: Screen Design Opdracht 2 Vodafone Interface
Opdracht Vodafone Interface De opdracht houdt in dat we een sales statistieken tool herontwerpen voor telecom provider Vodafone. Dit doen we door een analyse te maken van persona s, scenario s, flows en wireframes. Aan de hand van de brandguidelines van Vodafone die we gekregen hebben werken we de sales pagina s visueel uit. De pagina s draaien op het intranet en zijn toegankelijk voor werknemers. Op de sale pagina s krijgen de werknemers informatie over de toestellen en hoe deze het momenteel doen in de markt.
Deliverable 1: Merkanalyse & doorvertaling interactieontwerp Merkanalyse Als eerst ben ik een uitgebreide analyse gaan maken van Vodafone. Ik ben hiervoor de brandguidelines gaan bestuderen en ik ben voorbeelden gaan verzamelen die de basis kunnen gaan vormen voor het realiseren van het ontwerp. Wat mij opviel Vodafone gebruikt veel de kleur rood. De kleur rood wordt bij Vodafone positief neergezet. Rood wordt ook wel als de hero beschouwd. Het is dus verboden om rood op een negatieve manier neer te zetten. Het wordt aangemoedigd om rood te gebruiken op plekken waar iets positief neergezet wordt. Wat mij ook opviel is dat Vodafone veel vrolijke kleuren gebruikt. Vodafone is vrij divers met kleur gebruik en maakt gebruik van veel secundaire kleuren. Hoe wel de primaire kleuren vooral uit grijstinten en rood bestaat. Het is een uitdaging om met deze secundaire kleuren aan de gang te gaan omdat het snel een rommeltje kan worden. Ook viel mij op dat Vodafone zijn eigen lettertype gebruikt wat ik erg origineel vind en leuk lijkt om met een nieuw soort typografie aan de gang te gaan. Vormgeving merkanalyse In mijn merkanalyse heb ik gekozen om een groot diversiteit aan beelden te verzamelen. Ik heb op elk gebied waar de brandguidelines van Vodafone terug komt elementen gezocht. Door de diversiteit aan elementen kan ik het merk Vodafone van verschillende invalshoeken bekijken en beslissen welke elementen ik mee neem naar mijn door vertaling. In mijn merkanalyse zijn beelden te vinden van iconen, logo s, typografie en kleuren maar ook fotografie en illustraties. Ik heb ook naar voorbeelden gezocht hoe het niet moet.
Schetsen Tijdens het schetsen ben ik gaan kijken hoe de visuele eigenschappen zoals vorm, layout, kleur en typografie het ontwerp sterk kunnen maken. Dit zijn de schetsen van het inlogscherm van het intranet. Ik ben vooral gaan kijken hoe ik de pagina vorm wou gaven. Door te spelen met de rhombus en deze op verschillende manieren in de pagina neer te zetten wilde ik zien wat de beste uitkomst zou zijn. Ook heb ik de indeling van het login schermpje op verschillende manieren ingedeeld.
Door schets nummer 1 werd het al snel duidelijk dat ik het log in scherm niet in de rhombus wilde hebben. De pagina zou zich dan teveel op een plaats afspelen en er zouden vrij veel lege vlakken overblijven. Schets nummer 2 vind ik zelf het meest geschikt omdat het in balans staat en er gebruik gemaakt wordt van het hele oppervlak. Ook het inlog scherm is hier het meest in balans door de avatar in het midden te zetten en alles te centreren.
Dit is een schets van het dashboard. Deze schets heb ik gemaakt om vooral de indeling duidelijk te maken. Ik heb bekeken wat er volgens het werkboek in moet komen te staan. Het werd duidelijk dat er een uit klap menu in de pagina moet komen en een menu balk waar het mogelijk is om je account te beheren. Wanneer je op het logo klikt ga je weer terug naar home. Aan de hand van deze schets ben ik meer gaan spelen met de elementen.
Bij deze schets ben ik gaan kijken hoe ik het menu wil toepassen. In het werkboek stond het menu verticaal afgebeeld. Ik was wel benieuwd hoe het menu eruit zou komen te zien wanneer deze horizontaal wordt afgebeeld. Ik heb de rhombus aan de rechterkant van de pagina geplaatst met het account menu erin. Dit heb ik gedaan omdat rood bij Vodafone de hero is en het hierdoor moet lijken alsof jij de hero bent.
In deze schets heb ik heel het menu terug laten komen in de rhombus. Dit heb ik gedaan zodat het voor de gebruiker in een opzicht duidelijk waar hij zich door de pagina s heen kan navigeren. Ik heb de achtergrond van de pagina s licht gehouden met het idee om de elementen op de pagina grijstinten te geven. Door dit te doen wordt op de elementen de nadruk gelegd. Onder aan de elementen komen interactieve knoppen met doorverwijzingen naar de achterliggende pagina s. Deze links krijgen een secundaire kleur.
Ik heb de keuze gemaakt om het menu over de rhombus te laten komen. Hierdoor wordt de nadruk gelegd op de plaats waar de gebruiker zich bevind. En kan hij zich makkelijk terug navigeren naar voorliggende pagina s. Ook heb ik gekozen om het account menu los op de pagina te plaatsen waardoor het duidelijk wordt dat het om twee verschillende menu s gaat. Ik heb het hoofd menu uitlaten schuiven en het een donkere tint gegeven. Hierdoor wordt de nadruk gelegd op het uitgeschoven gedeelte.
Deliverable 2: Stijlstudie Modular Design Stijlstudie In de stijlstudie heb ik zoals ik verzonnen had tijdens het schetsen de elementen grijstinten gegeven. Ik heb hiervoor gebruik gemaakt van de primaire kleuren van Vodafone. Door de elementen een grijstint te geven vallen ze op binnen de pagina. Ik ben gaan kijken hoe ik rood terug kon laten komen als hero. Dit heb ik gedaan door binnen de elementen bijvoorbeeld het meest voorkomende abonnement of de nummer 1 van de top 10 telefoons de kleur rood te geven. Door de elementen bestaand uit grafieken en tabellen binnen de pagina dezelfde secundaire kleuren te geven vormt het een eenheid. Het wordt namelijk een rotzooitje als je te veel verschillende kleuren gebruikt. Ook heb ik gekeken naar welke interactieve buttons ik wil gebruiken. Ik vind zelf de interactieve buttons die Vodafone gebruikt met de kleur red violet erg sterk overkomen. Het past bij de vrolijke uitstraling van Vodafone. Wanneer er op deze buttons geklikt wordt veranderen ze in aubergine. Als secundaire call to action buttons heb ik gebruik gemaakt van grijstinten. Dit heb ik gedaan omdat deze buttons niet op hoeven te vallen. Om de pagina s een eenheid te laten vormen heb ik vastgelegd welke typografie ik ga gebruiken. Hierdoor krijgen alle pagina s qua typografie dezelfde inhoud. Dit is prettiger voor de gebruiker om te lezen en ziet er verzorgd uit. Ik ben opzoek gegaan naar icons die passen bij de guidelines van Vodafone. Ik heb dit gedaan door eerst onderzoek te doen naar de icons die Vodafone zelf gebruikt. Aan de hand van dit onderzoek ben ik zelf opzoek gegaan naar icons. Ik heb er voor gezorgd dat de icons overeenkomen met elkaar zodat het weer een eenheid blijft..
Deliverable 3: Uitgewerkte interface screens Sales pagina s De pagina s zijn gemaakt volgens de guidelines van Vodafone. Het is belangrijk dat de pagina s opgemaakt zijn volgens deze guidelines zodat hij daadwerkelijk gepubliceerd zou kunnen worden. Ik heb daarom elementen toegevoegd zoals kleur, typografie, rhombus, call to action buttons, icons en logo s die gelijk zijn aan die van Vodafone. Ik ben te werk gegaan in Photoshop omdat dit voornamelijk in de praktijk ook zo gedaan wordt. Dit heb ik gedaan door kolommen en een grid te gebruiken. Dit biedt een handvat voor de structuur en een mooie samenhang. Ik ben gebruik gaan maken van een 960 grid met 12 kolommen.
Login Wat als eerst opvalt bij de login pagina is, Welkom. Dit heb ik gedaan zodat de werknemer zich welkom geheten voelt. Daaronder heb ik aangeven waar de werknemer zich bevindt. Dat is namelijk Vodafone Intranet. Door het gebied grijs te markeren waar het interactieve zich afspeelt komt hier de nadruk op te liggen. De werknemer weet daardoor waar het interactieve zich afspeelt. Ik heb een bescheiden rhombus gebruikt zodat dit niet teveel de aandacht trekt maar dat het wel duidelijk is dat de werknemer zich op een Vodafone pagina bevindt. Omdat het werknemers betreft staan ze allemaal al in het systeem en hoeft de gebruiker maar haar gebruikersnaam in te voeren en komt haar eigen avatar te voorschijn. Wanneer er nog niks is ingevoerd zie je een witte rechthoek die er wel uitziet of er iets gaat verschijnen. Ik heb dit zo gedaan omdat er tijdens het inloggen ook daadwerkelijk iets tevoorschijn komt.
Dashboard Ik ben begonnen om de header te plaatsen. Door het menu te dupliceren die ik tijdens de stijlstudie gemaakt had en het account hier aan toe te voegen kwam er een redelijk goed beeld van de header. Rechtsboven in heb ik het account geplaatst. Zoals bij veel andere sites is het account niet iets waar de nadruk op ligt. Je gebruikt de opties bij je account niet veel tenzij je bijvoorbeeld adres gegevens moet wijzigen. Wanneer je post heb moet hier natuurlijk wel de nadruk op komen te liggen. Dit heb ik gedaan door de notificatie hier van red violet te maken. Het is een opvallende kleur waardoor de aandacht van de gebruiker wordt getrokken. Als de gebruiker op de notificatie klikt schuift er een balk uit met daarin haar post berichten. Deze balk is ook redviolet omdat het uit interactieve buttons bestaat. Het is clickable. Het menu bestaat uit zes koppen. Ik heb deze koppen verduidelijkt door er iconen voor te zetten. Hierdoor is het menu meer toegankelijk en hoef je de koppen niet eens te lezen. Boven aan de pagina maak ik duidelijk wie er ingelogd is door de naam te vermelden. Ook staat erbij welkom hierdoor voelt de persoon zich nog steeds welkom geheten. Eerst waren de primaire buttons die onder de tabellen staan de gehele breedte van de tabel. Deze heb ik nu kleiner gemaakt omdat ze te veel aanwezig waren. Ik heb ervoor gekozen om de taart tabel van abonnementen te veranderen in een soort staaf tabel. Hierdoor blijft de tabel overzichtelijk maar past het beter in de indeling van de pagina. Het percentage waar de meeste telefoons van zijn verkocht heeft de kleur rood want dit is de hero.
Toestellen Bij de toestellen pagina heb ik het uitklappende menu toegepast. Ik vind dat de rode kleur die aangeeft op welke pagina je je bevind binnen het menu erg sterk overkomen. Het verduidelijkt nog een keer de navigatie boven aan de pagina. Ook vind ik het uitklappen van het menu met een donkere grijstint goed gelukt. Het geeft duidelijk aan in welk gebied je je van de site bevind. Je bekijkt eerst wat zich allemaal nog meer in dat gebied bevind voor dat je weer verder kijkt wat het menu nog meer te bieden heeft. Ik heb ervoor gekozen om de merken van de toestellen boven aan de pagina weer te geven. Het is voor de gebruiker gemakkelijk om te kiezen van welk merk hij meer wil weten. Dit wordt ook sterk over gebracht door het icoon van het merk te gebruiken. Ik heb er voor gekozen om de informatie hoeveel toestellen een merk heeft weg te laten. Dit wordt ook duidelijk wanneer je er op klikt. Ik heb het een secundaire call to action kleur gegeven omdat het altijd actief is en wanneer een persoon meerdere merken wil bekijken en veel opgeklikt wordt. Wanneer het dan de kleuren red violet en aubergine bevat komt dit chaotisch over. De call to action button bij de toestellen heb ik wel de kleur red violet gegeven. De buttons nodigen namelijk uit om naar de detailpagina te gaan. Omdat de informatie die nu bij de telefoons staat er beknopt is. Ik heb de naam van de telefoon die op de eerste plek staat de kleur rood gegeven. Dit om het hero idee van Vodafone terug te laten komen.
Toestelinformatie Bij de periodieke verkoopcijfers heb ik er voor gekozen om de secundaire call to action buttons te gebruiken. Dit heb ik gedaan omdat er een aantal knoppen altijd actief zijn en ze verder niet doorverwijzen naar andere pagina s. Alleen binnen het element periodieke verkoopcijfers komt er een verandering. Ik heb de tabellen en grafieken weer opgebouwd met veel dezelfde kleuren. Het geeft nu een vrolijk beeld maar is niet chaotisch. Ik ben opzoek gegaan naar iconen die ik kon gebruiken voor het printen en het opslaan van een pdf. Deze iconen moeten overeen komen met de andere iconen. Door de uitlijningen bij het print icoon weg te halen en het icoon in e vullen met een donkere grijze kleur komt hij overeen met de andere iconen. Ik heb het abonnementen aandeel op het element met algemene informatie gezet zodat de indeling van de pagina beter zou kloppen. Het is ook overzichtelijk welk abonnement aandeel de telefoon bezit met het hoogste abonnement aandeel als kleur rood.