interaction design - navigation & structure

27
Navigation & Structure interaction design Jessy Bak 0868672 Communication & Multimedia Design

Upload: jessy-bak

Post on 06-Mar-2016

231 views

Category:

Documents


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Interaction Design - Navigation & Structure

Navigation & Structure interaction design Jessy Bak

0868672 Communication & Multimedia Design

Page 2: Interaction Design - Navigation & Structure

   

2  

Inhoudsopgave

inleiding  ...................................................................................................................  4  

Beschrijving type tuin en gebruiker  ............................................  4  De gebruiker  ........................................................................................................  4  Doelen  ......................................................................................................................  5  Voordelen  ..............................................................................................................  5  Activiteiten  ............................................................................................................  6  Benodigdheden en eventuele wellness faciliteiten  .................  6  Kennis  ........................................................................................................................  7  Omgeving  ..............................................................................................................  7  Type site  ........................................................................................................................................................................  8  

Sitemap  ....................................................................................................................  8  

Sitemap 1  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 2  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 3  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 4  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 5  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 6  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 7  ...................................  Fout!  Bladwijzer  niet  gedefinieerd.  Sitemap 8  ........................................................................................  Fout!  Bladwijzer  niet  gedefinieerd.  

Scenario’s en prototype schetsen  .................................................  9  

Scenario 1 ................................................................................. 9 inleiding ..................................................................................... 9 Scenario .................................................................................... 9 Home pagina ......................................................................... 10 Home pagina met drop down menu sauna’s ................... 11 Informatie pagina infrarood sauna ..................................... 12 Scenario 2 ............................................................................... 12 inleiding ................................................................................... 12 Scenario .................................................................................. 12 Home pagina ......................................................................... 13 Home pagina met drop down menu onderhoud ............. 14 Keuze pagina onderhoud van baden ................................ 15

Page 3: Interaction Design - Navigation & Structure

   

3  

Onderhoud pagina jacuzzi  ......................................................................................................  16  

Filters  .........................................................................................................................  16  Filter  pagina  ........................................................................................................................................................................  17  Sauna  Filter  .........................................................................................................................................................................  18  Variant  1  ...............................................................................................................................................................................  18  Variant  2  ......................................................................................................  Fout!  Bladwijzer  niet  gedefinieerd.  variant  3  ................................................................................................................................................................................  19  

Baden  filter  ..........................................................................................................................................................................  19  Variant  1  ...............................................................................................................................................................................  19  variant  2  ................................................................................................................................................................................  20  variant  3  ................................................................................................................................................................................  20  

Rationale  ...............................................................................................................  20  

Persoonlijk verslag  ......................................................................................  21  

Bronnen  ..................................................................................................................  22  

Bijlage  ......................................................................................................................  24  

Sitemap 1  ............................................................................................................  24  Sitemap 2  ............................................................................................................  24  Sitemap 3  ...........................................................................................................  25  Sitemap 4  .................................................................................................................     25  Sitemap 5  ............................................................................................................  26  Sitemap 6  ............................................................................................................  26  Sitemap 7  ................................................................................................................................................................  27  

Page 4: Interaction Design - Navigation & Structure

   

4  

inleiding Bij interactieve producten bijvoorbeeld websites, vinden we onze weg via navigatiemenu’s, beelden en geschreven of gesproken taal. Het is belangrijk dat de informatie goed georganiseerd in een interactief product. De opdracht van de module Navigation & Structure is om een voorstel van een website te maken voor een specifieke type gebruiker en tuin. In deze module heb ik geleerd; hoe mensen woorden en beelden gebruiken om hun weg te vinden in een website. De opbouw van navigatiestructuren en een navigatie structuur te maken in de vorm van een prototype die bestaat uit wireframes en een sitemap. In dit verslag is mijn toepassing van de opdracht te zien.

Beschrijving type tuin en gebruiker

De gebruiker Ik heb gekozen voor de wellness tuin. Wij hebben thuis ook wellness, het leek mij daarom erg handig om dit als soort tuin te kiezen. Ik heb dan een beter beeld van de tuin. Deze tuin is gericht op je eigen kuuroord aan huis. Je kan hier tot rust komen op elke wenselijke manier. De wellness tuin is duur in aanschaf en een grote tuin is noodzakelijk. Daarom is de doelgroep voor deze tuin volwassen mannen en vrouwen met een hoog budget en een voldoende grote tuin. De tuin moet genoeg ruimte hebben voor alle wellness elementen. Wellness betekent gezondheid. Wellness is een combinatie van de twee woorden wellbeing en fitness. Onder wellness valt alles wat met ontspanning, genieten, rust en herstellen te maken heeft.

Page 5: Interaction Design - Navigation & Structure

   

5  

Doelen De mensen met dit type tuin hebben als doel ontspannen/tot rust komen, genieten van hun tuin en actief of inactief werken aan de gezondheid. De tuin kan een grote rol in hun leven spelen. Mensen met een zware baan kunnen hier tot rust komen waardoor de stres minder zal zijn. Of mensen die ziek zijn en veel pijn hebben kunnen deze tuin gebruiken om de pijn te verzachten. Ook kan het gewoon voor het plezier zijn om te genieten. Ze zullen rust ervaren als zij in de tuin zijn. Het is een plek om zich terug te trekken uit het drukke leven en tot te rust komen.

Voordelen • Warm water opent de bloedvaten, dit zorgt voor een

betere doorbloeding. Doordat het water voor gewichtloosheid zorgt, wordt de druk op de spieren minder. Hierdoor krijgen de spieren de kans om ook te ontspannen.

• Verminderd de stress. 80% van de ziektes worden veroorzaakt door stress.

• Geneest spier en gewrichtspijn. • Goed voor sport prestaties. Wellness ontspant het

lichaam en de spieren komen los, hierdoor worden de sport prestaties makkelijker en na het sporten voorkomt het stijfheid van de spieren.

• Dagelijks gebruik van de Jacuzzi verminderd cellulitis. • Betere nachtrust. • Goede genezing van het lichaam. De wellness

verwijderd snel de slechte stoffen uit het lichaam. • Verzacht chronische pijn. De wellness verwarmt de

gewrichten en verminderd de zwelling van het weefsel waardoor deze elastischer wordt.

Page 6: Interaction Design - Navigation & Structure

   

6  

Activiteiten De belangrijkste activiteit in de tuin is genieten en tot rust komen. Maar het is belangrijk in een wellness tuin dat deze schoon is en goed onderhouden moet worden. Zo moeten de planten in de tuin bijgehouden worden, losse blaadjes moeten weggehaald worden, de faciliteiten moeten schoon blijven of zelfs (water) verschoond worden, de faciliteiten moeten winterklaar worden gemaakt, filters moeten gereinigd worden, sauna’s schimmelvrij houden, ontkalking. Het is aan de gebruiker zelf om te kijken of hij/zij deze activiteiten zelf wilt uitvoeren of hier iemand voor in dienst neemt. Door iemand in te huren zullen de gebruikers meer genieten van hun wellness tuin, omdat zij zelf niet de verantwoordelijkheid hebben voor de onderhoud van hun tuin. Maar het kan ook zijn dat het voor de gebruiker zelfs ontspanning kan zijn om in de tuin bezig te zijn, omdat het even tijd is voor de gebruiker zelf. Als de gebruiker de activiteiten zelf uitvoert is het wel van belang dat de gebruiker weet hoe hij het moet doen en wat hij moet doen, achterstallig onderhoud zorgt voor veroudering van de faciliteiten wat kan leiden tot het minder genieten in de wellness tuin.

Benodigdheden en eventuele wellness faciliteiten

• Sauna’s (infrarood (met of zonder kleurtherapie), Turkse sauna, klassieke sauna met houtkachel, sauna met elektrische kachel)

• tuinhuis • Waterval • Zonnebank • Douche • Beplanting • Zwembad

Page 7: Interaction Design - Navigation & Structure

   

7  

• Bar • Sportzaal • Massage kamer • Loungebedden • Handdoeken • Betegelde paden • Beplanting • Boxen • Chloor • Schoonmaakmiddel • Schoonmaak producten • Tuinverwarmers • Verlichting • Handdoeken • Rust ruimte • Hamam ruimte • Baden (binnenzwembaden, dompel baden,

hottubs, whirlpools, zoutwaterbad,jacuzzi)

Kennis De kennis wat de gebruikers moeten weten is dat de tuin zelf ook rust moet uitstralen, welke wellness elementen er allemaal zijn, hoe de wellness elementen werken en hoe de onderhoud moet worden gedaan van de wellness. De kennis is te verkrijgen bij aanschaf van de wellness elementen en op internet. Ook zijn er verschillende diensten die de elementen onderhouden.

Omgeving De tuin bevind zich aan het huis, in een dorp of stad. Maar de stad is minder vanzelfsprekend, omdat dit vaak kleinere tuinen zijn en met weinig privacy. Een vrijstaand huis met een vrije omgeving is de perfecte omgeving voor deze tuin, maar het is ook mogelijk om deze tuin te vestigen aan een eengezinswoning, zolang de tuin maar

Page 8: Interaction Design - Navigation & Structure

   

8  

over voldoende ruimte beschikt. Het is namelijk aan de gebruiker zelf over hoeveel elementen de wellness tuin beschikt.

Type site De site wordt een informatieve site voor een wellnesstuin, hier kunnen die gebruikers informatie vinden over alle wellness die er zijn en over de onderhoud.

Sitemap Na veel sitemaps gemaakt te hebben is dit mijn uiteindelijke sitemap geworden. In de bijlage staan al mijn voortgangen van de sitemaps. De uiteindelijke sitemap bestaat uit 4 hoofdcategorieën. Die elk weer bestaan uit subcategorieën, ik ben tevreden over mijn uiteindelijke sitemap. Ik vind het een goede opbouw en de gebruiker hoeft weinig paden af te leggen om bij zijn uiteindelijke doel te komen. De categorieën met de blokjes zijn categorieën met een link. De categorieën met alleen een streep zijn kopjes in een tekst. Ik vond de techniek van een sitemap erg fijn, je kon makkelijk een wireframe maken bij de sitemap. Ik heb dit vak opnieuw moeten doen omdat ik altijd wel weer iets zag wat veranderd, vervangen of weggelaten moest worden.

Page 9: Interaction Design - Navigation & Structure

   

9  

Scenario’s en prototype schetsen

Scenario 1

inleiding Ricardo is 43 jaar en woont in Brielle met zijn vrouw. Ricardo heeft een drukke baan als ingenieur. Hij komt vaak met stres thuis, is erg vermoeid en heeft reuma. Hij woont in een vrijstaand huis in een woonwijk. Zijn tuin is afgeschermd door middel van beplanting. Ricardo heeft een verhaal gehoord van een man die ook reuma had en dat de pijnklachten minder zijn geworden na het gebruik van een infrarood sauna. Ricardo wilt zich hier wat verder in verdiepen. Hij wilt meer informatie krijgen over de infrarood sauna en de onderhoud hiervan

Scenario Ricardo komt via google op de site World of Wellness terecht. Hij komt direct op de home pagina van de site. Hier ziet hij een groot logo met de tekst “World of Wellness”. Ook ziet hij aan de bovenkant een header met

Page 10: Interaction Design - Navigation & Structure

   

10  

daarin nogmaals het logo, een home knop, een sauna’s knop, een baden knop, een onderhoud knop, een accessoires knop, knop met zoekfilter verfijnen en een zoek balk. De knoppen sauna’s, baden, onderhoud en accessoires bevatten drop down menu’s.

Home pagina

Ricardo weet wat hij zoekt en hij gaat direct met zijn muis naar de knop “Sauna’s”. Omdat Ricardo weet wat hij zoekt heeft hij de functie zoekresultaat verfijnen niet nodig. Er is nu een drop down menu te zien met de categorieën; infrarood sauna, Turkse sauna, klassieke sauna met houtkachel en sauna met elektrische kachel.

Page 11: Interaction Design - Navigation & Structure

   

11  

Home pagina met drop down menu sauna’s

Ricardo klikt op de categorie infrarood sauna. De header blijft hetzelfde, aan de linkerkant is nu een Sidebar te zien met de categorieën die eerst te zien waren in het drop down menu onder de categorie sauna. De categorie sauna en de woorden infraroodsauna in de Sidebar zijn anders weergegeven, zo kan Ricardo zien waar hij zich bevind op de website. In het midden van de site ziet Ricardo een kopje “De infrarood sauna” onder dit kopje met tekst staat een volgend kopje “onderhoud”. Naast tekst staan twee afbeeldingen, een afbeelding van een infraroodsauna en een plaatje over de straling van een infrarood sauna. Ricardo heeft nu alle informatie gevonden waar hij naar op zoek was.

Page 12: Interaction Design - Navigation & Structure

   

12  

Informatie pagina infrarood sauna

Scenario 2

inleiding Esmee is 40 jaar en werkt in het vastgoed. Zij woont in Oostvoorne in een vrijstaand huis met haar man en kinderen. Esmee heeft een jacuzzi, deze is al lang niet meer onderhouden. Esmee wilt zich hier eerst verder in verdiepen voordat zij aan de onderhoud van de jacuzzi begint.

Scenario Via google komt Esmee op World of Wellness terecht . Zij komt direct op de home pagina van de site terecht. Esmee ziet een header met daarin het logo, een home knop, een sauna’s knop, een baden knop, een onderhoud knop, een accessoires knop, een zoen resultaat verfijnen knop en een zoek balk. In het midden

Page 13: Interaction Design - Navigation & Structure

   

13  

van de pagina is het logo te zien met de tekst “World of Wellness”.

Home pagina

Esmee weet wat zij zoekt en zij gaat met haar muis naar de knop “onderhoud”, zij heeft het filter systeem niet nodig. Er verschijnt een drop down menu met de categorieën; sauna’s en baden.

Page 14: Interaction Design - Navigation & Structure

   

14  

Home pagina met drop down menu onderhoud

Esmee klikt op de categorie baden. De header blijft hetzelfde. In het midden van de site staan de categorieën; zwembad, dompelbad, hottub, whirlpool, zoutwaterbad en jacuzzi met foto’s daarvan.

Page 15: Interaction Design - Navigation & Structure

   

15  

Keuze pagina onderhoud van baden

De categorie onderhoud is anders weergeven, zo kan Esmee goed zien waar zij zich bevind op de website. Esmee klikt op de categorie jacuzzi. Er opent een nieuw scherm. De header blijft weer hetzelfde. In de linker Sidebar zijn nu alle categorieën van sauna’s en baden weergeven. Jacuzzi is hetzelfde weergeven als de onderhoud knop in de header. Esmee weet nu precies in welke categorie zij zich bevind In het midden scherm is nu de informatie over de onderhoud van de jacuzzi te zien met als titel: “De onderhoud van een jacuzzi”. Onder deze tekst is weer een kopje te zien met een opsomming van benodigdheden. Aan de rechterkant van de tekst zijn afbeeldingen te zien. Een van een jacuzzi en een van een potje chloor wat nodig is om de jacuzzi schoon te houden. Hier kan Esmee alle informatie vinden over de

Page 16: Interaction Design - Navigation & Structure

   

16  

onderhoud van een jacuzzi en de benodigde spullen daarvoor.

Onderhoud pagina jacuzzi

 

Filters Ik heb mijn filters verwerkt in de site onder het kopje “Zoek resultaten verfijnen”. Als de gebruiker van de site hier op klikt komt hij op een nieuw scherm op de site terecht. Hier is de filter te zien. De filter werk als een soort stappen plan, er komt steeds een nieuwe vraag gebaseerd op je vorige antwoord. Het filtersysteem bestaat ook uit 2 delen; sauna’s en baden. Dit zijn 2 belangrijke onderdelen in mijn website, ze zijn ook erg verschillend en daarom kunnen deze niet samen worden gebruikt in 1 filter. Op de volgende pagina is het scherm met de filter weergeven.. Vul je bijvoorbeeld alleen de sauna filter in zal je hier ook alleen een zoekresultaat vinden, maar bezoekers kunnen

Page 17: Interaction Design - Navigation & Structure

   

17  

hier ook kijken wat meer bij hun eisen past, een bad of een sauna. Op dit filtersysteem heb ik een aantal varianten gemaakt die voor kunnen komen. Door de keuzes die de gebruiker maakt, wordt er een bijpassend product gezocht die goed bij de eisen van de gebruiker passen.

Filter  pagina  

 

Page 18: Interaction Design - Navigation & Structure

   

18  

Sauna  Filter  

Variant  1  

 

 Variant  2  

   

Page 19: Interaction Design - Navigation & Structure

   

19  

variant  3  

 

Baden  filter  

Variant  1  

   

Page 20: Interaction Design - Navigation & Structure

   

20  

variant  2  

 

variant  3  

 

Rationale  Ik heb in de website een simpele en veel voorkomende navigatiestructuur gebruikt. De hoofdcategorieën zijn duidelijke termen, de drop down menu’s zijn handig en

Page 21: Interaction Design - Navigation & Structure

   

21  

snel te gebruiken. Wil je de drop down menu’s niet gebruiken is dat ook geen probleem, je krijgt dan een keuzescherm te zien met alsnog alle categorieën. Zo’n keuze scherm is terug te vinden bij het prototype scherm :”de keuzepagina onderhoud van baden”. Ik vond het belangrijk dat de website niet chaotisch was, het gaat tenslotte om een wellness tuin waar rust een pre is. Ik vind dat de site eenvoudig is, maar duidelijk. Ook vind ik het belangrijk dat je altijd weet waar je je bevind in een website, daarom heb ik ervoor gekozen om de categorie waar de gebruiker zich op dat moment bevind anders weergegeven, op de schetsen heb ik deze blauw gekleurd. In de scenario’s heb ik twee van mijn belangrijkste doelen op de site uitgewerkt. Iemand die opzoek is naar informatie en iemand die op zoek is naar informatie over de onderhoud. Ik heb geprobeerd om overal in de site eenheid te creëren, ook dit straalt rust uit. Ik heb geen scenario gedaan voor iemand die opzoek gaat naar informatie via de filters, dit is een bewuste keuze omdat ik een apart filtersysteem heb toegevoegd die bestaat uit stappen. Ik heb deze op verschillende manieren uitgewerkt zonder scenario. Het filtersysteem vond ik een handige oplossing voor de gebruikers die nog aan het oriënteren zijn op wellness. Ze hoeven alleen een paar vragen te beantwoorden en komen bij een product wat aan hun eisen voldoet. Zo hoeven de gebruikers niet alle onderdelen 1 voor 1 te bekijken en door te lezen voordat de gebruikers erachter komen waar ze naar op zoek zijn.

Persoonlijk verslag In het begin wist ik niet wat ik met de opdracht aanmoest. Ik heb onderzoek gedaan voor 3 verschillende tuinen

Page 22: Interaction Design - Navigation & Structure

   

22  

omdat ik er maar niet achter kwam wat mij nou echt aansprak, ik begon met een vijvertuin en daarna koos ik een specifiekere vijvertuin met koikarpers. Ook dit was niet de tuin waar ik al de weken aan zou kunnen werken en uiteindelijk heb ik gekozen voor een wellness tuin. Ik ben op deze keuze gekomen omdat ik hier al een antal dingen van wist en daardoor hier meer interesse in had.

De opdracht zelf vond ik heel leerzaam, maar ook heel moeilijk. Ik heb lang gedaan over de sitemaps, telkens zag ik wel wat dat verbeterd kon worden. Daarna kwamen de wireframes, ik had geen idee waar ik moest beginnen. Met een beetje hulp kon ik met wat vertraging eindelijk van start. Ik heb op het laatste moment nog veel dingen moeten veranderen, aangezien de feedback niet erg positief was. Ik was het er wel mee eens en vind mijn uiteindelijk site veel beter.

Door de stappen ben ik het vak goed gaan begrijpen. Ondanks dat het op het laatste moment nog erg stressen was heb ik het vak wel als leuk ervaren. Ik kijk nu ook veel kritischer naar ander websites. Met mijn uiteindelijke product

ben ik redelijk tevreden.

Bronnen • Riny Bak (vader) • Jo Pauwels (2011) Wellness Thuis • Dan Saffer (2009) Designing for interaction • Jantien Slob (Docent Navigation & Structure) • http://www.elysium.nl/ • http://www.gratisadviseurs.nl/question.php?id=65034 • http://www.optimalegezondheid.com/hoe-goed-is-

wellness-voor-je-gezondheid/ • http://www.well4u.nl/wellness-blog/wellness/wat-is-

wellness/ • http://www.outdoorliving.nl

Page 23: Interaction Design - Navigation & Structure

   

23  

• http://www.jozon.nl/html/accessoires_sauna_reiniging.aspx

• http://www.infobunker.nl/lichaam-geest/soorten-saunas/

• http://mens-en-gezondheid.infonu.nl/diversen/42639-infraroodsauna-positieve-effecten-op-je-lichaam-en-geest.html

• http://www.vsbwellness.n

Page 24: Interaction Design - Navigation & Structure

   

24  

Bijlage

Sitemap 1

Sitemap 2

Page 25: Interaction Design - Navigation & Structure

   

25  

Sitemap 3

Sitemap 4

Page 26: Interaction Design - Navigation & Structure

   

26  

Sitemap 5

Sitemap 6

Page 27: Interaction Design - Navigation & Structure

   

27  

Sitemap 7