GUI & NUI
NAAM STUDENT MICHELLE VAN LOON STUDENTNUMMER 525972 SEMESTER SIM-IMEC DOCENT ROBERT LARICCIA VERSIE 003 DATUM 2 APRIL 2015
INHOUDSOPGAVE 003 INLEIDING 004 VOORBEELDEN GUI EN NUI 006 DE OVEREENKOMSTEN EN VERSCHILLEN TUSSEN GUI EN NUI 007 DE 10 RICHTLIJNEN 009 WELKE INTERACTIE, NAVIGATIEPATRONEN, MENUSTRUCTUREN EN/OF USER-EXPERIENCE SPREEKT JE HET MEEST AAN IN DE VOORBEELDEN EN WAAROM? 010 CONCLUSIES EN AANBEVELINGEN 011 BRONVERMELDING 012 REFLECTIE
INLEIDING
V
oor het semester SIM-IMEC kregen we de opdracht om een uitgebreide analyse te doen naar de Graphic User Interface (GUI) en de Natural User Interface (NUI) van twee verschillende websites of applicaties. Eén van deze twee zou een GUI bevatten en de ander een NUI. Een Graphic User Interface is een manier van interactie met een computer of mobiele omgeving waarbij grafische beelden, widgets en tekst worden gebruikt om acties mee uit te voeren en te navigeren door de omgeving. Deze elementen moeten zo toegepast worden dat de website of applicatie makkelijk in gebruik moet zijn voor de gebruiker. De Natural User Interface is een opkomende User Interface (UI). De NUI laat de gebruiker door middel van intuïtieve acties door een website of applicatie navigeren, deze intuïtieve acties zijn vaak gerelateerd aan natuurlijk, alledaags menselijk gedrag. Denk hier bijvoorbeeld aan een touchscreen of het navigeren door een website door te swipen. In deze analyse wordt er gekeken naar de aspecten van deze twee voorbeelden, of deze voorbeelden zich houden aan de 10 richtlijnen van ‘Ontwerp voor de gebruiker’ en er wordt gekeken naar de overeenkomsten en verschillen tussen de GUI en NUI. Afsluitend wordt er gekeken naar mijn mening over deze twee voorbeelden en de aspecten die overgenomen zouden kunnen worden in mijn eigen op te leveren product voor het semestervak SIM-IMEC of SIM-ICD. Tijdens deze analyse is er gebruik gemaakt van het boek ‘100 Things Every Designer Needs To Know About People’ van Susan M. Weinschenk. De citaten die in deze analyse staan vermeld zijn afkomstig uit het bovengenoemde boek.
003
VOORBEELDEN GUI EN NUI Voorbeeld GUI Voor het voorbeeld van een Graphic User Interface heb ik gekozen voor de website van het Amerikaanse autobedrijf Lincoln. Op de website kunnen gebruikers meer leren over de auto’s die het Amerikaanse autobedrijf aanbiedt en kunnen deze vervolgens ook kopen. De interface van deze website is een Graphic User Interface. Dat dit een Graphic User Interface is, is te zien aan het duidelijk gebruik van pictogrammen, teksten en widgets. Enkele voorbeelden op de website waarin de Graphic User Interface duidelijk terug te zien is zijn de buttons waar teksten op staan die letterlijk verwijzen naar de acties die beschreven staan. Zo is te zien op een afbeelding hier rechts dat er een tekstblok staat met daarin geschreven “Chat with Congierge”. Naast deze tekst staat er ook een pictogram weergegeven dat verwijst naar chatten. Deze manier van navigatie wordt bij elk onderdeel op de website van Lincoln.
Figuur 1. Website van autobedrijf Lincoln
004
VOORBEELDEN GUI EN NUI
Voorbeeld GUI Voor het voorbeeld van een Natural User Interface heb ik gekozen voor de applicatie ‘Insect Definer’ van Yael Cohen. De applicatie laat de gebruiker kennis maken met de wereld van insecten op een hele interessante manier. De gebruiker kan leren over bijvoorbeeld insecten in het algemeen, insecten die in een bepaald gebied voorkomen, en de samenstelling van insecten. De interface van Insect Definer is een Natural User Interface. Alle interacties worden gedaan door middel van touchscreen en je kunt navigeren door alle onderdelen door middel van swipen. Verder krijgt de gebruiker de kans om zelf op onderzoek te gaan door de applicatie. De insecten kunnen gedraaid worden en bewogen worden door natuurlijke bewegingen waar de gebruiker mee bekend is. Zo krijgt de gebruiker een compleet beeld van deze desbetreffende insecten.
Figuur 2. Insect Definer applicatie door Yael Cohen
005
DE OVEREENKOMSTEN EN VERSCHILLEN TUSSEN GUI EN NUI GUI EN NUI “When you are the one designing the task, make sure that the objects in the environment are easy to see, easy to find, and have clear affordances.” (Weinschenk, 100 Things Every Designer Needs To Know About People, 2011, p.15) Ondanks dat GUI en NUI twee verschillende interfaces zijn, zijn er ook overeenkomsten te vinden tussen deze twee. Zo is het bij beide interfaces van belang dat het gemakkelijk in gebruik is, er feedback na aanleiding van uitgevoerde acties te zien is en dat er een beleving wordt aangeboden aan de gebruiker. Het grootste verschil tussen de twee interfaces is de manier waarop acties worden uitgevoerd. Bij de GUI wordt er gebruik gemaakt van een muis, een keyboard, herkenbare buttons, widgets en tekst om acties uit te voeren en te navigeren door de omgeving. Bij de NUI wordt er gebruik gemaakt van touchscreen, swipen. Het kenmerk van deze elementen is dat alle bewegingen natuurlijker aanvoelen, zoals bijvoorbeeld een krant lezen op een iPad. Om naar een volgende pagina te gaan dient de gebruiker te swipen, dit betreft de zelfde beweging die gemaakt zou worden om een echte pagina van een krant om te slaan.
Mensen creëeren in hun hoofd al een bepaald idee en beeld over de manier waarop iets uitgevoerd moet worden, zelfs nog voordat zij dit al eens hebben gedaa. Bij beide interfaces moet die gedachte in het ontwerpproces worden meegenomen. Het is van belang dat deze gedachte uiteindelijk deels of zelfs compleet aansluit bij de uiteindelijke versie van de website of applicatie. “Imagine that you’ve never seen an iPad, but I’ve just handed you one and told you that you can read books on it. Before you turn on the iPad, before you use it, you have a model in your head of what reading a book on the iPad will be like. You have assumptions about what the book will look like on the screen, what things you will be able to do, and how you will do them - things like turning a page, or using a bookmark. You have a mental model of reading a book on the iPad, even if you’ve never done it before.” (Weinschenk, 100 Things Every Designer Needs To Know About People, 2011, p.72)
Deze overeenkomsten en verschillen zijn ook terug te zien in de twee voorbeelden die hiervoor beschreven staan. Beide bieden ze een beleving aan de gebruiker en zorgen ze ervoor dat het gebruiksvriendelijk is. De verschillen zijn het duidelijkst te zien. Zo wordt er bij ‘Lincoln’ gebruik gemaakt van veel herkenbare buttons en stukken tekst. Bij ‘Insect Definer’ wordt er voornamelijk gebruik gemaakt van een interactieve beleving waar de gebruiker moet swipen, zoomen en ‘rotate’ bewegingen moet maken.
006
DE 10 RICHTLIJNEN
‘Lincoln” 1. Bewegen Er moet geklikt worden op verschillende buttons, teksten en blokken om door de website heen te navigeren. 2. Waarnemen Zodra iets geselecteerd wordt volgt daar vervolgens feedback op. Di wordt duidelijk doordat de kleur van het woord veranderd of doordat er een omlijning verschijnt.
7. Motivatie De website wekt de gebruiker op om te overwegen om een Lincoln auto aan te schaffen. Dit doen zij door middel van aantrekkelijke beelden te plaatsen, informatie aan te bieden en de gebruiker op een speciale, persoonlijke en exclusieve manier aan te spreken. 8. Tegen fouten maken Ik heb tijdens de analyse van de website geen foutmelding kunnen vinden.
3. Taal en lezen Er worden leesbare fonts gebruikt die ook de juiste fontsize hanteren. Verder wordt er gebruik gemaakt van korte leeslengten. Op de website staan geen lange teksten. Elke tekst is zo kort mogelijk geschreven. Alleen het benodigde wordt laten zien.
9. Keuzes maken Op de website staan allemaal de hoeveelheid gebruiker krijgt
4. Aandacht De aandacht voor de website wordt getrokken door de visuele beelden en het aanbod aan informatie. De gehele website staat vol met aantrekkelijke foto’s en video’s van auto’s. Vervolgens is er ook veel te leren en wordt deze informatie op een leuke manier weergegeven. Zo wordt de informatie bijvoorbeeld onderverdeeld in leuke onderwerpen.
10. Emotie De website speelt goed in op de emoties van de gebruiker. Er zijn veel visuele beelden, er is een goede uitstraling en de gebruiker krijgt een gevoel van exclusiviteit.
van Lincoln zijn heel veel keuzemogelijkheden. Deze onderverdeeld in duidelijk onderwerpen waardoor van deze keuzemogelijkheden lijkt mee te vallen. De op deze manier geen last van ‘information overload’.
5. Onthouden, leren en tegen vergeten Er wordt veel gebruik gemaakt van visuele beelden en patterns. Alles is volgens onderwerpen ingedeeld en dit zal de gebruiker helpen om dingen makkelijker te vinden en te onthouden. Er valt genoeg te leren op de website door het grote aanbod aan informatie. 6. Denken De gebruiker hoeft niet extreem veel na te denken voor het uitvoeren van een actie. Dit komt omdat in de applicatie duidelijke beschrijvingen staan en de informatie is onderverdeeld in verschillende categorieën.
007
DE 10 RICHTLIJNEN
‘Insect Definer� 1. Bewegen Door middel van touchscreen en te swipen wordt er door de applicatie heen genavigeerd. 2. Waarnemen Er is veel feedback. Als er een keuze wordt gemaakt krijgt dit vak een andere kleur en verandert er iets op het scherm. 3. Taal en lezen De taal van deze applicatie is in het Hebreeuws, dit is geen probleem voor mij geweest tijdens de analyse. Ik leer deze taal al jaren en begrijp goed wat er gezegd wordt. Het betreft een prettig font met een erg fijne fontsize. De stukken tekst zijn erg fijn te lezen en de informatie sluit erg goed aan bij de onderwerpen. 4. Aandacht De aandacht wordt behouden in deze applicatie door het feit dat er constant dingen veranderen in beeld. Zodra er een selectie wordt gemaakt veranderd de content. Zo blijft het voor de gebruiker aantrekkelijk en blijft de aandacht behouden want er zijn voortdurend nieuwe dingen te zien en te lezen. 5. Onthouden, leren en tegen vergeten Er wordt veel gebruik gemaakt van patterns. Alle content is onderverdeeld in overzichtelijke ruimtes en dit wordt op elke pagina doorgevoerd. De informatie over de insecten die wordt aangeboden aan de gebruiker staat verdeeld onder verschillende hoofdstukken, hierdoor is het gemakkelijk voor de gebruiker om onderdelen te leren en deze te onthouden.
Zodra de gebruiker dit heeft vastgesteld voor zichzelf, wordt alles duidelijk en hoeft hij niet te veel meer na te denken. Echter moet de gebruiker wel nadenken over de ontvangen informatie en dit vervolgens ook verwerken. 7. Motivatie Net als bij de website van Lincoln motiveert Insect Definer de gebruiker door nieuwsgierigheid op te wekken. Zodra de gebruiker keuzes maakt en dingen selecteert verandert er van alles in het scherm. Hierdoor wordt de gebruiker gemotiveerd om op zoek te gaan naar nieuwe onderdelen. 8. Tegen fouten maken Ook dit is niet van toepassing bij deze analyse. Er wordt niet gesproken over foutmeldingen. 9. Keuzes maken In de applicatie van Insect Definer heeft de gebruiker de mogelijkheid om te kiezen tussen heel veel onderdelen. Wel bestaat er tussen al deze keuzemogelijkheden een duidelijk gevoel van eenheid en consistentie. Dit maakt het voor de gebruiker overzichtelijk en duidelijk. 10. Emotie De applicatie speelt goed in op de emoties van de gebruiker. Er kan veel plezier beleefd worden aan de applicatie doordat de gebruiker eindeloos kan uitproberen en onderzoeken. Er zijn veel visuele beelden die allemaal enorm uitgebreid zijn.
6. Denken Het is bij deze applicatie van belang dat de gebruiker op onderzoek gaat en zijn natuurlijke instinct volgt wat betreft de navigatie.
008
WELKE INTERACTIE, NAVIGATIEPATRONEN, MENUSTRUCTUREN EN/ OF USER-EXPERIENCE SPREEKT JE HET MEEST AAN IN DE VOORBEELDEN EN WAAROM? Wat mij het meest aanspreekt is het swipen in de applicatie van Insect Definer. Dit geeft een natuurlijk gevoel en het is leuk om mee te experimenteren. Het klikken op een knop geeft toch een wat statischer gevoel. Ook de user-experience van Insect Definer vind ik echt fantastisch. Het biedt je echt een enorm leuke ervaring. Je kunt helemaal zelf beslissen wat je wilt leren en hoe je dat wilt leren. Door zelf op zoek te gaan en keuzes te maken leer je op een leuke manier heel erg veel. Dat spreekt mij enorm aan, het is dus erg leerzaam maar ook erg leuk. De website van Lincoln vind ik erg mooi vormgegeven en bevat een erg duidelijk doel dat overal in terug te zien is. De interactie is erg simpel maar toch clean en duidelijk en dat geldt ook voor de navigatie. De vormgeving van Lincoln sluit erg goed aan bij het product dat zij aanbieden en dat spreekt mij heel erg aan. Het is toch iets bijzonders als je je vormgeving compleet kunt laten aansluiten bij het product dat je aanbiedt. “People use look and feel as their first indicator of trust. When participants in the study rejected a health Web site as not being trustworthy, 83 percent of their comments were related to design factors, such as an unfavorable first impression of the look and feel. poor navigation, color, text size, or the name of the Web site� (Weinschenk, 100 Things Every Designer Needs To Know About People, 2011, p.177)
009
CONCLUSIES EN AANBEVELINGEN
We kunnen concluderen dat de twee voorbeelden die zijn geanalyseerd, twee compleet verschillende User Interfaces bevatten. ‘Lincoln’ bevat een Graphic User Interface. Dat houdt in dat de navigatie en acties worden weergegeven met behulp van beelden, widgets en tekst. ‘Insect Definer’ bevat een Natural User Interface. Dat houdt in dat alle bewegingen die gedaan moeten worden om een actie uit te voeren op een natuurlijke manier worden gedaan. Denk bijvoorbeeld aan het swipen van een krant op je iPad, dat swipen betreft dezelfde beweging die je zou uitvoeren tijdens het omslaan van een echte krant. Ik denk dat Figgo’s Coffee Roasters enorm veel vergelijkingen heeft met de website van Lincoln. Daaronder valt een unieke beleving bieden aan de gebruiker, de gebruiker exclusiviteit bieden, een simpele vormgeving hebben die toch erg uitgebreid en uniek lijkt te zijn en het motiveren van de gebruiker. De elementen waar ik enorm door ben geïnspireerd voor het concept van Figgo’s Coffee Roasters of een volgend project zijn: - Het gebruik van grote beelden. Het komt steeds vaker voor dat een afbeelding de gehele breedte van een website vult. Hiermee wordt de toon van de website meteen gezet. Deze stijl van vormgeving spreekt mij erg aan en dan vooral zodra er typerende foto’s worden gebruikt. Een grote afbeelding zoals op de pagina van Lincoln zou ik zeker op de homepagina van Figgo’s Coffee Roasters gebruiken. - De minimalistische maar toch duidelijke feedback. Op de website van Lincoln wordt gebruik gemaakt van minimalistische feedback. Zo verandert een kleur lichtelijk of er verschijnt een dunne omlijning. Dit vind ik erg aantrekkelijk, vooral omdat een minimalistische vormgeving altijd mijn voorkeur heeft. Dit element zal ook terugkomen in de navigatie van Figgo’s Coffee Roasters. Ook Insect Definer bevat enkele hele handige en interessant elementen: - Het swipe, zoom en draai systeem van Insect Definer vind ik echt fantastisch maar zal helaas niet meegenomen worden naar het ontwerp van Figgo’s Coffee Roasters. Dit omdat deze interacties niet goed bij het concept passen. - Wat mij heel erg aanspreekt aan Insect Definer is de manier waarop de navigatie verloopt. Er zijn weinig zichtbare buttons te vinden en dit zorgt ervoor dat de gebruiker het complete beeld kan gebruiken om meer te leren over insecten. De beleving is op deze manier groter. Dit zal ook worden toegepast in Fruit Farm, de applicatie die wordt ontwikkeld voor SIM-ICD. Ook daar zullen vrij weinig buttons te zien zijn zodat de gebruiker het hele beeld tot zijn beschikking heeft.
010
BRONVERMELDING
Cohen, Y. (2013). Insect Definer. Geraadpleegd op 28 maart 2015, van https:// www.behance.net/gallery/Insect-Definer/8164527 Lincoln (z.d.). Crossovers. Geraadpleegd op 1 april 2015, van http://www.lincoln.com/crossovers/mkc/ Morris, A. (z.d.). Lincoln App. Geraadpleegd op 28 maart 2015, van http:// www.appdesignserved.co/gallery/Lincoln-App/8016253 Saffer, D. (2014). What are the basic principles of NUI (Natural User Interface) design? Geraadpleegd op 28 maart 2015, van http://www.quora.com/Whatare-the-basic-principles-of-NUI-Natural-User-Interface-design Webopedia (z.d.). Graphical User Interface (GUI). Geraadpleegd op 28 maart 2015, van http://www.webopedia.com/TERM/G/Graphical_User_Interface_GUI.html Weinschenk, S. (2011). 100 Things Every Designer Should Know About People. Pearson Education. WhatIs (2011). Natural User Interface (NUI). Geraadpleegd op 28 maart 2015, van http://whatis.techtarget.com/definition/natural-user-interface-NUI Wikipedia (2015). Grafische gebruikersomgeving. Geraadpleegd op 28 maart 2015, van http://nl.wikipedia.org/wiki/Grafische_gebruikersomgeving
011
REFLECTIE
Toen ik aan dit document begon vond ik het lichtelijk verwarrend. Ik snapte niet goed waarom het boek ‘100 Things Every Designer Should Know About People’ nodig was voor het doen van deze analyse. Toen ben ik echter het boek gaan lezen en kwam wel wat interessante onderdelen tegen. Ik ben toen met goede moed begonnen aan het schrijven van dit document en ben erg tevreden hoe het is verlopen. Het schrijven van dit document ging erg vlot en ik vond het geen last. Dit komt waarschijnlijk juist omdat ik het aan het begin nogal verwarrend vond maar uiteindelijk het doel van dit product begreep en met goede moed begon te schrijven en omdat ik het erg prettig vind om te schrijven. Het viel mij op hoe leuk ik het vond om verschillende User Interfaces te onderzoeken en te kijken naar wat er allemaal wordt aangeboden. Tijdens het schrijven van dit document ben ik een heel stuk wijzer geworden over de beide interfaces. Ik wist hiervoor vaag wat een GUI en een NUI was maar nooit voldoende om dit document te schrijven. Toen ik ben gaan onderzoeken wat dit allemaal precies was, werd mij alles duidelijk. De kennis over de GUI en de NUI die ik heb verkregen tijdens het schrijven van dit document zal mij erg goed van pas komen in volgende projecten. Enkele voorbeelden van elementen die van pas zouden kunnen komen in een volgend project zijn de manieren waarop aandacht op een website/applicatie behouden wordt en wanneer je het beste een GUI of een NUI moet gebruiken.
012