Design Patterns
Tijdens het schetsen van de eerste concepten heb ik veel gekeken naar andere apps om Design Patterns te ontdekken en direct toe te kunnen passen. In de Benchmark Creation heb ik er ook al een hoop benoemd. De bronnenlijst van de apps die ik heb gebruikt voor Design Patterns kan hier worden bekeken.
Vervolgens heb ik tijdens de uitwerking van mijn prototypes gezocht naar bekende principes en patterns om ervoor te zorgen dat mijn prototype aan de principles of user interface design voldoet en de functionaliteiten zoveel mogelijk voor zich spreken voor iedere gebruiker.
De basis elementen in mijn app design heb ik gebaseerd op het Material Design System van Google, omdat Google dit systeem heeft ontwikkeld om ervoor te zorgen dat app designers zich aan de conventies in het systeem houden en gebruikers zo minder snel zullen stuiten op een app die niet user friendly is.
Bottom navigation
Een veelvoorkomende oplossing voor navigatie in apps is een bottom navigation bar. Deze bar vervangt door middel van iconen met waar mogelijk een kleine titel de pagina's die op desktop vaak in een top bar menu staan verwerkt en op kleinere schermen veel in hamburger menu's worden gestopt. Door een bottom bar te gebruiken zijn alle pagina's continue zichtbaar en gemakkelijk te vinden. Met kleur en contrast kan worden aangegeven op welke tab/pagina de gebruiker zich bevind. (Google, z.d.)
Voor de volgorde van de menu items zijn geen adviezen of conventies. Wanneer er een actieknop in het menu zit die een proces start voor een gebruiker in plaats van een nieuwe pagina te openen, zit deze knop doorgaans in het midden en heeft deze standaard een andere kleur (meer hiërarchie, zoals voorbeeld rechtsonder op de onderstaande afbeelding). Wanneer er geen actieknop is maar er een bepaalde tab belangrijker is dan de rest, kan ervoor worden gekozen om deze in het midden te zetten, zoals de home vaak staat, maar komt ook steeds vaker voor dat de belangrijkste tab links staat omdat men van links naar rechts leest en ook een beetje omdat the UX design: rule of thumb uitwijst dat rechtshandige mensen (het overgrote deel van de bevolking) daar het makkelijkst bij kan. Al worden telefoons steeds groter en is dit niet meer altijd even waar. (Appdexa, 2019).
In mijn ontwerp zijn zowel het dashboard (home) als de to-do list (schoonmaakrooster) het belangrijkst. Daarom kies ik ervoor om de home knop in het midden te zetten, en de to-do list helemaal links.
Cards component
Een populaire en tijdloze oplossing voor content blokken is het 'cards component' (Curtis, 2018). Door een kaartje te maken met een omlijning of schaduw wordt duidelijk welke content bij elkaar hoort en welke acties hieraan verbonden zijn. Cards kunnen voor allerlei soorten content gebruikt worden, voor User Generated Content zoals een Instagram post of het voorbeeld rechtsboven op de afbeelding hieronder; maar ook voor een overzichtelijke weergave van informatie en een call to action die meer aandacht of context nodig heeft dan met een button kan worden gecreëerd. Buttons kunnen overigens prima op Cards worden geplaatst, maar het gebruik van iconen past beter bij mobile UX design.
In mijn ontwerp komen diverse content blokken voor die ik goed in Cards kan verwerken. Ask Team Clean doet dit zelf ookal op haar platform.
Buttons
Het gebruik van knoppen is onontkoombaar in digital design, en omdat diverse vormen van interactie mogelijk maken een van de randvoorwaarden aan mijn eindproduct is, is het belangrijk dat ik diverse toepassingen gebruik en zorgvuldig combineer zonder dat het te druk of inconsistent wordt. Omdat Ask Team Clean zelf al gebruik maakt van solide, rechthoekige buttons neem ik deze mee als primaire button. Uit het Material Design System heb ik gehaald dat het een logische stap is om mijn secundaire buttons dan lichter van kleur te maken en mijn tertiaire buttons outlined te maken. Ook de states van buttons kan eindeloos mee gespeeld worden, er kan worden gewerkt met schaduw, maar ook met hover- en push kleuren. Omdat ikzelf een prototype uitwerk in Adobe XD, waar de vormgeving van states puur afhankelijk is van hoeveel scherm duplicaties de designer zelf achter elkaar zet, focus ik mij liever op de inhoudelijke functionaliteit van mijn concept dan in het exact uitwerken van deze states. Maar wel wil ik benadrukken hoe belangrijk het is om gebruikers feedback te geven nadat zij een actie uitvoeren, zoals hoveren over- of klikken op een button. Essentiële states zal ik uiteraard wel uitwerken.
System icons
Om een design neer te zetten dat voor zichzelf spreekt is het van belang om herkenbare system icons te gebruiken. Gewone iconen zijn iconen die je inzet om een bepaald verzamelwoord voor een tab / pagina mee te visualiseren; Systeem iconen zijn iconen die worden gebruikt om aan te geven dat er een actie mogelijk is (of bepaalde reactie kan worden getriggerd).
Voorbeelden hiervan zijn een knop met enkel een plusje erop om aan te geven dat hiermee een element kan worden toegevoegd. Of drie puntjes of een tandwieltje om aan te geven dat er instellingen te wijzigen zijn achter een element.
Ask Team Clean gebruikt momenteel zowel solide als outlined iconen door elkaar. In geval van buttons kan dit worden gedaan om hiërarchie aan te geven, maar als het aankomt op icons is het eigenlijk de bedoeling om één stijl te kiezen of enkel van outlined op solide over te gaan als een icoon geselecteerd wordt, om zo de aangeklikte state aan te geven.
Omdat er 2D illustraties zonder lijnen worden gebruikt in de ATC huisstijl, zouden solide iconen hier visueel goed op aansluiten maar ook minder opvallen. Ik begin daarom met outlined iconen in mijn eerste versie, en zal door middel van expert reviews achterhalen of in het in dit geval beter is om het visuele aspect voorrang te geven of het functionele aspect.
Wat ik meeneem uit het Material Design System is de colour grading voor het aangeven van states (foto rechtsmidden op de afbeelding hieronder) en de puntjes voor instellingen en pijltjes voor volgende- en vorige pagina's (foto's links onderaan op de afbeelding hieronder).
Voor de bronnenlijst van deze design pattern search klikt u hier.
Last updated
