koenvanoeveren

[koenvanoeveren]

Week 2: Oriëntatie / Verdieping

[koenvanoeveren]

Station Eindhoven Gids!

Dit is de eindversie van de Eindhoven station gids! Geluid Waarbij ik er op heb gelet om de geluiden iets meer te laten passen bij de vormgeving stijl. Een strak clean en minimalistisch ontwerp. Ik heb er dus voor gekozen om de overdreven harde geluiden weg te laten zoals in de vorige versie (bv. Whoosh). Visueel Visueel heb ik nog een laatste verbeterslag toegepast door de kleuren meer samenhang te laten hebben met het ontworpen karakter. Ook heb ik nu nog meer de guiding toegepast waarbij het karakter in beeld schuift en je een hint geeft wat relevant kan zijn voor het tijdstip. Zo geeft het karakter aan “Het is 12:21, bent u opzoek naar een plek om lunch te halen”, op deze manier wilde ik de gebruiker op een speelse manier meer door de interface heen nemen. En kon ik op deze manier persuasive design toepassen, door de knop “eten en drinken” op te lichten en het karakter ernaar laten wijzen. Animatie Qua animaties van de objecten heb ik het minimalistisch gemaakt, dit omdat ik van mening ben dan een interface geen drukte moet zijn van veel bewegende objecten. Hierbij is het doel van de interface dat de gebruiker z.s.m zijn gewenste content vindt en weet waar hij/zij iets kan vinden op het station Eindhoven. Dit heb ik ook proberen te bewerkstelligen met een zoekfunctie rechtsboven het scherm, zodat de gebruiker altijd snel een zoekterm kan invoeren. Toekomst Deze interface zou gebruikt kunnen worden op alle grote stations in de wereld, maar zou ook kunnen uitgewerkt worden tot een “City guide” waarbij je een snel overzicht krijgt waar je welke bezienswaardigheid in de stad kunt vinden + de benodigde “side info”.

[koenvanoeveren]

De oefening heb ik gedaan tijdens de les, hierin viel me op dat er veel meer rust was en het prettig kijken is. Nu is er echter weinig onderscheid tussen objecten, hier ga ik nog naar kijken. En onderdelen van deze test zou ik kunnen gebruiken door wellicht dingen wat meer te groeperen.

[koenvanoeveren]

Animatie station Eindhoven gids! Ik heb een nieuwe versie gemaakt van het hoofdscherm en deze continu laten bewegen. Dit om aandacht te trekken van diegene die naar iets op zoek is Ik heb gekozen voor zwaaien en springen om vriendelijk en enthousiast over te komen. Ik heb gekeken naar verschillende geluidjes voor bij de animatie: https://www.zapsplat.com/music/cartoon-jump-slightly-electronic/ https://www.zapsplat.com/music/cartoon-jump-or-spring/ https://www.zapsplat.com/music/cartoon-spring-bounce-or-jump-7-2/

Waarvan ik het 2e geluidje het best vond passen bij het karakter en zijn beweging. Dit karakter zal ik later verwerken in de andere schermen

[koenvanoeveren]

Na de les van Play media waarbij we hadden geëxperimenteerd met karakter design, ben ik opnieuw naar mijn karakter gaan kijken en wilde ik graag en volledig eigen versie maken. Hierbij heb ik gekozen voor een hoofdvorm wat lijkt op de blokken uit het menuscherm. Met dit als basis ben ik een karakter gaan ontwerpen wat volwassen(baard)  is en betrouwbaar (blauw). Vervolgens ben ik opnieuw het openingsscherm gaan ontwerpen, waarbij ik oranje heb gepakt als achtergrond kleur omdat dit staat voor vriendelijkheid/hulpverlenend, het staat in contrast met het blauw van het karakter en het springt gelijk in het oog. Dit voor het extra opvallen in de stationshal. In een volgende versie ga ik dit karakter animeren door hem continu te laten bewegen wanneer niemand het scherm gebruikt.

[koenvanoeveren]

Hierboven de 2e versie van de “Station Eindhoven gids”! Waarbij ik op het begin de animatie heb laten bewegen zodat het meer aandacht trekt dan een stilstaand beeld, dit wil ik later nog verder uitwerken. Vervolgens heb ik gekozen voor een vrolijke/betrouwbare deun op het begin. Dit leek me een mooi openingsgeluid waarbij men zich op zijn gemak voelt. Bron deuntje: Musical branding or into element, piano and synth choir, trustworthy, warm  By https://www.zapsplat.com

Vervolgens zie je op het hoofdscherm het karakter continu oplichten, waardoor het meer opvalt. Wanneer je op de informatiebalk klikt krijg je een whoosh geluid, wat goed past bij schuivende elementen. Wanneer de balk terug schuift, is er net een andere whoosh te horen om te benadrukken dat hij inschuift. Bron Whoosh: multimedia_max_min_interface_sound_whoosh_min.mp3 multimedia_max_min_interface_sound_whoosh_max.mp3 By zapsplat.com Wanneer de gebruiker op eten&drinken klikt, verschijnen er verschillende winkels die één voor één omhoog schuiven met een whoosh geluid. Hiervoor heb ik een andere whoosh gebuikt om verschil te maken in objecten. Hiervoor heb ik gebruikt: Whoosh van New age studios In een volgende versie zal ik gaan kijken hoe ik meer verschillende geluiden kan toevoegen die aansluiten bij de bewegingen.

Ik heb gekeken of ik de achtergrond er meer uit wilde laten springen wanneer deze actief was. Misschien gebruik ik dit in een volgende versie. Voor nu vind ik het nog wat te druk ogen

[koenvanoeveren]

Hierbij het hoofdmenu! Waarbij de gebruiker snel en eenvoudig kan vinden waarnaar hij/zij op zoek is. Ik heb het scherm verder uitgewerkt en hierbij gekozen voor afgeronde hoeken bij de blokken, dit voor een vriendelijkere/toegankelijkere uitstraling. Ik heb grote iconen gebruikt voor een duidelijke en snelle herkenning van de items. Ik heb gekozen voor het scherm 2, zonder de omlijning van de blokken. Ik vond het hierdoor te druk worden met teveel kleuren. Scherm 2 oogt wat rustiger en duidelijker. Om ook meer rust te creëren heb ik gekozen voor een minimaal kleurverschil tussen de achtergrond en de achtergrond van de blokken. Grijs/wit. Ook heb ik t.o.v mijn vorige menuscherm de schaduw verwijderd onder de blokken maar slechts een dunne lijn ipv daarvan. Ik vond de schaduw te erg eruit springen en heb gekozen voor een minimale lichtgrijze lijn. Ook heb ik een info balk aan het scherm toegevoegd, waar de gebruiker gerichte zoektermen kan invoeren. Deze balk heb ik voorzien van een schaduw om deze er meer uit te laten springen. Ook zal ik deze voorzien een lichte animatie zodat er meer aandacht naar toe gaat. Ook heb ik dit blok juist wel voorzien van een vullende kleur achtergrond (contrast t.o.v. de anderen blokken)

Bronvermelding iconen: Tickets icon By Kerry Webster eat icon by Guilherme Furtado from the Noun Project Fast food icon By Pixel perfect finance icon by Creative Stall from the Noun Project Close icon By Gustavo Cordeiro  Search icon by Flaticon Safe Icon made by Freepik from www.flaticon.com PSV Eindhoven logo T-Shirt by lezebre.lu Ov-fiets logo https://www.ns.nl Fietsenstalling stationsantpoortnoord.nl Bus, trein en taxi by Flaticon

Het hoofd van mijn character heb ik gemaakt met behulp van de volgende vector: https://www.freepik.com/free-vector/nice-businessmen_853232.htm#term=business%20character&page=1&position=29

[koenvanoeveren]

---------   Vanaf hier begint versie 02.  -------------

Hierbij het openingsscherm voor de “Station Eindhoven gids”! Met onze hulpkarakter die klaar staat voor uw gerichte vragen! - Het karakter zal zwaaien en oplichten (zie animatie andere post) - Dit openingsscherm zal verdwijnen wanneer de gebruiker voor het scherm staat (camera/afstandsensor) - Ik heb gekozen voor de overheersende blauwe kleur wat staat voor vertrouwen. Zoals in de schets te zien, heb ik ervoor gekozen dat het scherm zal verspringen wanneer er een gebruiker vlak voor het scherm staat. Om zo een eerste handeling te besparen. Zodat ze sneller hun doel hebben gevonden. Bronvermelding: Logo eindhoven http://logocurio.us/blog/2013/11/07/eindhoven-open-source-city-brand/ Hoofd karakter gemaakt met behulp van: https://www.freepik.com/free-vector/nice-businessmen_853232.htm#term=business%20character&page=1&position=29

[koenvanoeveren]

Hierboven de eerste versie van de mockup/interactie en geluid voor het 1e inlevermoment. Het geluid is hier nog wat overdreven  en hard, hier zal ik later verder naar kijken. Ik heb ervoor gekozen dat  het achtergrondvlak uitschuift/vergroot zodat er meer informatie in getoond kan worden. Hierin zie je de verschillende winkels voor “eten en drinken”. Het hoofdicoon verkleint wanneer je erop klikt, dit omdat het niet zo groot op de “detailpagina” hoeft te staan maar dan kleiner naast de titel komt te staan. De geluidsbron: https://www.zapsplat.com/music/user-interface-tone-select-digital-button/ Contributor : Dusty Room De iconenbronnen: Tickets icon By Kerry Webster Fast food icon By Pixel perfect finance icon by Creative Stall from the Noun Project Close icon By Gustavo Cordeiro Kiosk logo http://spaarzegelacties.nl/kiosk-spaarkaart/

[koenvanoeveren]

Ik heb een eerste wireframe gemaakt hoe ik denk dat ik het hoofdmenu ga indelen. Elk onderwerp heeft zijn eigen blok en bijpassend icoon om overzicht en duidelijkheid te creëren. Vervolgens ben in de interactie gaan schetsen. Wanneer de gebruiker op een blok klikt word het blok groter en komt er meer info tevoorschijn over het geselecteerde onderwerp. Hier zal ik later nog een eerste mockup versie van maken.

[koenvanoeveren]

Om een eerste idee te schetsen wanneer een gebruiker mijn te ontwerpen scherm zou kunnen gebruiken, heb ik de bovenstaande scenario's verwerkt in een storyboard. Mijn scherm zal de hulp zijn wanneer je iets zoekt op het station Eindhoven.

[koenvanoeveren]

Vervolgens ben ik me meer gaan verdiepen in schermen die ik passend vind voor mijn schermontwerpen. Het gaat een scherm worden waar alles overzichtelijk te zien is en je kunt aanklikken waar je meer informatie over wilt hebben.

[koenvanoeveren]

Hierboven mijn eerste ontworpen guide-character! Uit mijn voorgaande onderzoek bleek dat veel mensen achter een informatiebalie in de echte wereld bijna allemaal een soort kraagje hadden. Dus dit heb ik ook geprobeerd te verwerken in mijn eerste versie, Ik heb mijn character een blauwe blouse aan laten hebben omdat de kleur blauw staat voor vertrouwen. En vertrouwen is belangrijk wanneer je hulp nodig hebt. Kleurbetekenis zie onderstaande afbeelding: bron: http://www.dailyinfographic.com

Het hoofd van mijn character heb ik gemaakt met behulp van de volgende vector: https://www.freepik.com/free-vector/nice-businessmen_853232.htm#term=business%20character&page=1&position=29 Ik heb deze geprobeerd na te maken en aan te passen.

[koenvanoeveren]

Onderzoek naar characters. Eerst gekeken naar de mensen achter een informatiebalie in de echte wereld en wat me hieraan opviel was dat ze bijna allemaal een soort kraagje hadden. Vervolgens ben ik op zoek gegaan naar vector characters die dat ook hebben. Wat ik nu ga doen is een eigen character ontwerpen met de verzamelde informatie en inspiratie

[koenvanoeveren]

Geluidsbepaling

Ik ga op zoek naar minimalistische geluiden die goed aansluiten bij het interface. Ik ga waarschijnlijk aan het werk met vlakken die afgeronde hoeken hebben. Hierdoor zou ik kunnen denken aan een geluid als dit:

https://freesound.org/people/ani_music/sounds/201161/ https://freesound.org/people/dubizer/sounds/261857/ https://freesound.org/people/gellski/sounds/288883/ https://www.zapsplat.com/music/user-interface-tone-select-digital-button/ https://audiojungle.net/item/click/21004353?s_rank=6 https://audiojungle.net/item/click/20680219?s_rank=14

Deze geluiden klinken nu nog te extreem maar geeft wel een rond idee/gevoel.

[koenvanoeveren]

1e versie beeld/stijl bepaling Een strak, duidelijk/minimalistisch interface wil ik gaan ontwerpen met een kleine speelse twist qua kleuren en geluiden. Om een eerste beeld te creëren heb ik bovenstaand mood/styleboard gemaakt.

[koenvanoeveren]

Concept

Locatie: Eindhoven station Concept: Mijn concept is er om een overzicht te creëren voor de gebruiker wat er allemaal is op het station en waar je het kan vinden. Het kan nogal een zoektocht zijn door de drukte en hectiek van een groot station om te vinden waar je naar zoekt. Uiteraard heb je hulpverleners die je om hulp kan vragen maar dit kan nu ook via mijn “hulpverlener scherm” wat ik ga ontwerpen.  Hierbij kan je denken aan de volgende onderwerpen:

Winkelen

Supermarkt

Eten & Drinken

Treinreis/Spoor

Bus

Kluisjes

Geld pinnen

Toilet

Taxi

OV-Fiets

Fietsenstalling

De weg naar het PSV stadion?