Design Pattern Research
Meerdere Pagina's (Navigatie)
Notion (Hamburger Menu)
Notion gebruikt een hamburger menu. Een hamburger menu werkt, maar is tegenwoordig een beetje outdated. Veel apps kiezen op het moment voor een bottom bar, omdat deze altijd zichtbaar en accessible is en makkelijk te bereiken met de duim.
Instagram (Bottom Bar Menu)
Instagram gebruikt de Bottom Bar Menu. Op het moment is dit de marktstandaard. Bijna iedere app die je opent gebruikt dit type menu. Dit komt omdat dit de optimale plek is om makkelijk met je duim te navigeren, en je minimaliseert het aantal clicks of taps die je nodig hebt om een menu te navigeren zoals bij het hamburger menu.
Tinder (Top Bar Menu)
Bij dating app Tinder is het menu aan de bovenrand. Dit is omdat de belangrijkste interactie met de app onderin gebeurt. Namelijk iemand leuk vinden of niet. Hierdoor hebben ze het menu naar boven verplaatst.
Locatie Weergave
Snapchat
Snapchat laat een poppetje van al je vrienden zien, op de locatie waar ze voor het laatst snapchat hebben gebruikt. Dit is niet heel accuraat, omdat je niet precies kan zien waar het poppetje daadwerkelijk staat op de kaart. Wel is het handig dat je een goed overzicht heb waar iedereen ongeveer is, en je kan meerdere mensen tegelijk zien.
WhatsApp
WhatsApp is een messaging service waarbij je naar individuen of groepen berichten kan sturen.
Je kan op WhatsApp je locatie delen, maar dit moet je actief aanzetten. Het is op de foto hieronder niet heel goed te zien, omdat we ons op dezelfde locatie bevinden, maar je ziet hier twee bolletjes. Het grote bolletje met de foto is mijn jongere broertje, en het kleine blauwe bolletje ben ikzelf. Wanneer we verder uit elkaar staan kun je ons allebei duidelijk zien.
Waze
Waze is een navigatieapp die zich focust op een soort community. In Waze kunnen mensen aan andere bestuurders laten weten of er dingen zijn waar ze voor moeten op passen. Denk bijvoorbeeld aan, wegversperringen, wegwerkzaamheden, omleidingen, files, flitsers, ongelukken en agenten.
Bij waze kun je ook je rit delen met anderen, zodat zij een idee hebben van waar jij bent en hoe lang het nog duurt voordat jij op bestemming aankomt. De schermen die je hieronder ziet zijn gemaakt door een vriend van mij nadat ik hem mijn rit had doorgestuurd. Hij is op de rode stip bovenin, en ik ben het rode lachende wolkje op wielen. Wanneer ik mij verplaats wordt dit realtime doorgegeven.
Items toevoegen aan een groep of lijst
Discord
Discord is een VoIP applicatie waar je met vrienden in een server kan chatten en bellen. In het voorbeeld kijken we naar hoe we iemand kunnen uitnodigen voor de IAM Core server.
Door naar rechts te swipen of op het hamburger menu te drukken kun je alle kanalen binnen de server zien, en alle servers waar jij persoonlijk inzit. Bovenin zien we een grote 'Leden uitnodigen' knop. Vanuit hier kun je mensen die je al kent uitnodigen voor dit kanaal of de serverlink kopiëren zodat mensen zelf kunnen instappen.
Spotify
Spotify is een muziek service waar je zelf afspeellijsten kan maken. In het voorbeeld kijken we hoe we een het nummer 'Amsterdam' toe kunnen voegen aan de afspeellijst 'mood'.
Door op de 3 dots te drukken krijg je een menu met meer opties. Vanuit hier kan je kiezen om dit nummer toe te voegen aan een afspeellijst. Nu moeten we alleen nog kijken welke afspeellijst we kiezen en daarop klikken. 'Amsterdam' staat nu in 'mood'.
WhatsApp
Bij WhatsApp kan je alleen iemand toevoegen vanuit jouw persoonlijke bestaande contacten, dat is niet zo handig als het persoon nog geen account heeft of nog niet in jouw contactenlijst staat. Echter is de manier waarop je een contact toe kan voegen aan de groep wel fijn. Door op de plus te drukken krijg je een hele lijst (alfabetisch) met al jou contacten. Hier kun je dan een of meerdere contacten tegelijk kiezen om toe te voegen aan de groep.
Weergave van teams
Discord
Door naar links te swipen in een Discord server kun je alle leden in die server zien.
WhatsApp
Wanneer je een groep aanmaakt kunnen daar meerdere leden in zitten, en deze kun je duidelijk zien. Door op de titel van de groep te drukken kom op een pagina met meer informatie. Zo kun je bijvoorbeeld zien welke foto's en video's er allemaal gedeeld zijn in deze groep. Wanneer je iets naar onder scrolt zie je het hele team staan.
Voetbal.nl
Voetbal.n| is een website en app waar je alle KNVB-teams kan terugvinden, inclusief spelers, wedstrijden en plaats in het klassement.
We kijken hier naar het eerste team van mijn lokale club (Edamse Voetbal Club). Tenzij het team opgeslagen staat moet je zoeken. Wanneer we zoeken krijgen we alle teams van EVC te zien. We kiezen in dit geval voor de eerste. Nu drukken we op de tab teams.
Conclusie
Navigatie
Hier is de bottom bar navigatie het beste voor ons. Met een beperkte hoeveelheid schermen en geen belangrijkere functies die onderaan de pagina plaatsvinden is dit het ideale format voor ons om onze gebruikers tussen pagina's te laten wisselen.
Locatie
Hier vind ik die van WhatsApp het beste, maar niet probleemloos. Het icoontje van de ander is groot en duidelijk, maar daarmee is de locatie waar zij zich bevinden minder duidelijk. Hetzelfde geld voor Snapchat, maar hier is het ook onhandig dat het een cartoonfiguurtje is. Uiteindelijk is het bij Waze niet handig dat je je eigen positie niet kan zien als je de rit van iemand anders bekijkt. Ik navigeer nu toevallig naar dezelfde locatie als waar de persoon waarmee ik de rit deel zich bevind, maar deze is zelf niet te zien op de kaart.
Toevoegen aan groep
Weergave van groep
De manier hoe voetbal.nl dit aanpakt vind ik het beste, ookal staat het een beetje verborgen in een menu. Ze gebruiken grote foto's en oppervlaktes per persoon. Ik wil dit nog iets groter maken, en de teampagina als voor of hoofdpagina maken, maar dit is een goed begin.
Last updated
Was this helpful?