Landmarkt mobiel ontwerp wireframes

Informatiearchitectuur AVV 3 Landmarkt Mobiel

Naam Omar Vasquez Jesus Studentnummer 500704100 Naam Lars Douwe Schuitema Studentnummer 500706531 Klas Roze Docent C.J.H.M. van den Driesche Vak Informatiearchitectuur Opdracht AVV 3 Landmarkt mobiel Type ontwerp Lo-Fi wireframes & Detail Versie 1.1 Datum 8 - 4 - 2015

Lo-Fi Wireframe 1

ANNOTATIES

1

2

1. Pannenkoek menu (slide naar buiten bij het drukken). Nu zijn de submenus ook te zien.

2. Shopping Cart, druk hier voor je bestellingen.

3

3. Titel van desbetreffende slide.

4

4. Afbeelding/foto.

5. Druk hierop en ga naar de volgende slide.

6. Ga een slide terug.

6

5

Informatiearchitectuur Landmarkt mobiel ontwerp Lo-Fi wireframe 1 Omar Vasquez Jesus Lars Douwe Schuittema

Lo-Fi Wireframe 2

ANNOTATIES 1. Uitgeklapte pannenkoek menu, de submenu’s zijn nu ook zichtbaar

1

2. Submenu’s 3. Content gerelateerd aan het menu

3 2

Informatiearchitectuur Landmarkt mobiel ontwerp Lo-Fi wireframe 2 Omar Vasquez Jesus Lars Douwe Schuittema

Lo-Fi Wireframe 3

ANNOTATIES 1. Subtitel 2. Korte tekst (omschrijving).

1

3. Afbeelding of foto gerelateerd aan content.

2

3

Informatiearchitectuur Landmarkt mobiel ontwerp Lo-Fi wireframe 3 Omar Vasquez Jesus Lars Douwe Schuittema

Lo-Fi Wireframe 4

ANNOTATIES 1. Buttons (snelle handeling).

1

Informatiearchitectuur Landmarkt mobiel ontwerp Lo-Fi wireframe 4 Omar Vasquez Jesus Lars Douwe Schuittema

Lo-Fi Wireframe 5

Informatiearchitectuur Landmarkt mobiel ontwerp Lo-Fi wireframe 5 Omar Vasquez Jesus Lars Douwe Schuittema

Lo-Fi Wireframe 6

ANNOTATIES 1. Titel.

1

2. Omschrijving.

3. Icoon m.b.t. agenda.

2

4. Meer informatie uitklap menu.

3 4

Informatiearchitectuur Landmarkt mobiel ontwerp Lo-Fi wireframe 6 Omar Vasquez Jesus Lars Douwe Schuittema

7

8

3 5

10

6

4

Informatiearchitectuur Landmarkt mobiel ontwerp Detail wireframe 1 Omar Vasquez Jesus Lars Douwe Schuittema

9

6

1

2

Detail Wireframe Home

TIMES SQUARE EFFECT Er is duidelijk onderscheidt gemaakt in de hiërarchie binnen het ontwerp. Zo is voor de gebruiker het snelmenu duidelijk aangegeven met iconen en een achtergrond kleur zo dat de gebruiker dit snel kan vinden en bedienen. De slide knoppen zitten aan de zijkant van de afbeelding en zijn goed zichtbaar. De andere opties/menu’s zoals de homeknop, algemene menu, zoekbalk en winkelkarretje zijn allemaal boven aan het scherm te vinden. Dit is op de website van landmarkt ook zo gedaan de gebruiker kan dan van het normale uitgaan.

Kortom is de vormgeving duidelijk en er is goed rekening gehouden met de verschillende onderdelen en de hiërarchie binnen de onderdelen.

De winkelkar is er om je bestellingen/boodschappenlijstje te bekijken en om af te rekenen en je bestelling te plaatsen. Via dit menu krijg je ook suggesties voor recepten aan de hand van wat je in je winkelkarretje hebt.

De zoekbalk is gemaakt voor snelle zoekfuncties, bij het typen van de eerste paar letters zal de zoekfunctie je mogelijke suggesties geven, om het zoeken sneller en simpeler te laten verlopen.

Via het pannenkoekenmenu kan je naar alle categorieën en pagina’s gaan die je wilt, die staan hier allemaal onder. Het logo staat naast het pannenkoekenmenu en dient tevens als home/terug knop.

Doormiddel van een grijs vlak is er onderscheid gemaakt tussen het snelmenu en de overige elementen op het scherm. Zo weet de gebruiker precies waar die op kan drukken en waar die heen kan.

Het menu aan de onderkant is een snelmenu en bevat de meest bezochte pagina’s, doormiddel van iconen is aangegeven welke pagina’s je kan bezoeken zoals dit op de landmarkt website ook is aangegeven.

1. Pannenkoekmenu (uitklapbaar, voor submenu’s.

De homepagina is eigenlijk een mobiele versie van de daadwerkelijke website, je kan er aanbiedingen zien aankopen doen, naar andere menu’s gaan en via de snelmenu’s naar de meest gebruikte pagina’s gaan.

10. Volgende onderwerpen.

9. Snelle menu’s (andere slides)

8. Content.

7. Achtegrond

6. Slide buttons. (volgende of vorige)

5. Titel van de pagina.

4. Shopping Cart (bekijk je bestellingen of betaal.

3. Zoekbalk

2. Logo van Landmarkt, fungeert tevens als homeknop

ANNOTATIES

ONDERBOUWING

6

7

8

3

4

Informatiearchitectuur Landmarkt mobiel ontwerp Detail wireframe 2 Omar Vasquez Jesus Lars Douwe Schuittema

5

2

1

Detail Wireframe Keuken

TIMES SQUARE EFFECT Het is voor de gebruiker duidelijk en helder waar die zich bevindt en waar die heen moet. De iconen, menu’s, iconen en foto’s zijn hiërarchisch vormgegeven en zijn afgestemd met de website van landmarkt.

De gebruiker kan ook aan de hand van de icoon die oranje gloeit (in het snel menu) zien waar hij zich nu bevindt binnen de menu’s.

1. Slide titel

De keuken is de pagina die de verschillende kraampjes en keukens laat zien. De pagina valt gelijk op door de foto van de desbetreffende keuken die gelijk te zien is. Zoals bij de andere pagina’s staat het snelmenu onderaan het scherm en de algemene opties staan bovenaan. De titel staat duidelijk bovenaan met een wat grotere font, zodat de gebruiker weet waar hij zich bevindt. Onder de titel staat een korte omschrijving van de keuken.

8. Keuken (is nu geselecteerd en icoon wordt oranje).

7. Slager.

6. Kaasboer.

5. Bakker (dit zijn de hoofdmenu’s).

4. Slide naar beneden.

3. Afbeelding.

2. Korte omschrijving.

ANNOTATIES

ONDERBOUWING

3

2

Informatiearchitectuur Landmarkt mobiel ontwerp Detail wireframe 3 Omar Vasquez Jesus Lars Douwe Schuittema

1

Detail Wireframe Helden

TIMES SQUARE EFFECT De helden pagina is eigenlijk een 1 op 1 replica van de originel website van Landmarkt. Tijdens het ontwerpen viel ons op dat deze pagina eigenlijk van zichzelf al erg mobiel was. Het gene wat aangepast moest worden warend de formaten en de letter grote. We hebben hier dus goed nagedacht over wat het makkelijkste voor de gebruiker is en wat hij gewend is. Sommige buttons zijn wel iets groter gemaakt zo dat deze meer opvallen. Als de gebruiker de landmarkt website wel is bezocht heeft zal hij niet de weg kwijtraken bij de mobiele versie van deze pagina.

1. Foto van Landmarkt ‘‘held’’.

De helden pagina is de pagina waarop de verschillende personen (helden) van de landmarkt comunity te zien zijn. Je kan zien waar ze een held in zijn, wat voor keuken ze bezitten, een korte omschrijving over de held en de tijden en dagen dat die aanwezig is. Ook zijn er filmpjes (optioneel) te zien van de helden.

3. Slide naar beneden om meer helden te bekijken.

2. Naam en informatie over held.

ANNOTATIES

ONDERBOUWING

5.1.1 RECEPTPAGINA

4.1.1 HELDENPAGINA

3.2 OVER ONS

Informatiearchitectuur Landmarkt website Sitemap Omar Vasquez Jesus Lars Douwe Schuittema

DE TIMES SQUARE IS ZO GEBOUWD, DAT HET ER MOEILIJK IS OM DE WEG TE VINDEN. BIJ EEN WEBSITE KAN HET ZIJN, DAT DE INDELING ZO INGEWIKKELD IS, DAT DE GEBRUIKER DE WEG NIET KAN VINDEN.

TIMES SQUARES EFFECT

ZE WILLEN EEN GEZELLIGE SFEER VOL ENERGIE MET VERSE PRODUCTEN. JE KUNT ER MEER DAN ALLEEN BOODSCHAPPEN DOEN. PROEVEN, ETEN IN HET RESTAURANT, SLENTEREN LANGS AFDELINGEN EN MEEDOEN AAN WORKSHOPS.

DOEL LANDMARKT

DE NUMMERS IN DE BLOKKEN DUIDEN OOK HET NIVEAU VAN HET ITEM AAN. DE TEKST IN DE BLOKKEN STAAN VOOR DE NAAM VAN DE MENU-ITEMS.

SUBMENU-ITEM (NIVEAU 3)

SUBMENU-ITEM (NIVEAU 2)

MENU-ITEM (NIVEAU 1)

LEGENDA

3.3 RESERVEREN

5.1 CATEGORIE

4.1 CATEGORIE

3.1 ONZE KAART

5.0 RECEPTEN

2.1 SUBCATEGORIE

4.0 HELDEN

3.0 RESTAURANT

2.0 MARKT

1.0 HOME

5.1.1 RECEPTPAGINA

5.1 CATEGORIE

6.0 AANBIEDINGEN

Sitemap Landmarkt

8.4 CONTACT OPNEMEN

7.4 ROUTE

14.0 VOOR BEDRIJVEN

13.0 LOGIN

12.0 CONTACT INFO

11.0 LEVERANCIER

10.0 VACATURES

9.0 A. VOORWAARDEN

6.0 AANBIEDINGEN

7.5 VACATURES

8.3 FAQ

8.2 BEZORGEN VAN LM

8.1 BESTELLEN

8.0 BEZORGEN

7.3 CONTACT OPNEMEN

7.2 OVER ONS

7.1 OPENINGSTIJDEN

7.0 OVER ONS