Afstudeerproject Abigaél
  • Ask Team Clean | Cleaning Schedule Generator
  • Introductie
    • Inleiding
    • Projectplanning en logboek
  • Design Brief
    • ℹ️ Introductie
    • 🤓Persoonlijke focus
    • ⚠️ Probleemstelling
    • 🎯Designchallenge en deelvragen
    • 🗓️ Projectplanning per fase
    • 💡Complexiteit en productvisie
  • Design Challenge
  • Krabbels
  • Fase 1 - Definitie
    • Doelgroep mapping uit marktonderzoek
    • Survey en Context Mapping
    • Persona's en Scenario's
    • Stakeholdermap
    • Programma van Eisen
    • Deelvragen bij Fase 1 beantwoord
  • FASE 2 - exploratie
    • Literature Study: Schoonmaken
    • Literature Study: Klantenbinding
    • Literature Study: Online Interactie
    • Benchmark Creation
    • Good, Bad & Best Practices
    • User Flows
    • Deelvragen bij Fase 2 beantwoord
  • Fase 3 - ideatie
  • Concepten
    • Concept 1: Generator tool voor desktop
    • Concept 2: Schoonmaakschema generator app
    • Concept 3: Het ATC platform in een app
    • Expert Review
  • Interviews
  • Proof of concept
  • Feedback Frenzy
  • Requirements Check op concepten (MoSCoW)
  • Inspiration Wall
  • Deelvragen bij Fase 3 beantwoord
  • Fase 4 - concepting
  • User Stories
  • Focusgroup & Co-creation
  • Design Patterns
  • Design Principes
  • Stylesheet
  • Definitief concept
  • Programma van Eisen check op concept
  • Fase 5 - validatie & iteratie
    • Prototype V1
    • Tests V1
      • User Review V0.5 | Ruggero
      • Peer Review V1 | Folkert-Jan
      • Usability Test V1 | Peet
    • Iteratie > Prototype V2
    • Design Patterns 2
    • Tests V2 en V2.5
      • Usability Test V2 | Esmée
      • Usability Test V2 | Michelle
      • Iteraties naar Prototype V2.5
      • Design Expert Test V2.5 | Anouk
      • Design Expert Review V2.5 | Joop
    • Iteratie > Prototype V3
    • Product Quality Review - Wayne Parker Kent
    • Design Patterns 3
    • Iteratie > Prototype V4
    • Tests V4
      • Usability Test V4 | Ruggero & Daan
      • Usability Test V4 | Tim
    • Deelvragen bij Fase 5 beantwoord
  • fase 6 - evaluatie
  • Definitief Prototype
  • Validatie Definitief Prototype
  • Adviesrapport / Aanbevelingen
  • Conclusie
  • Eindoplevering
    • Design Rationale
    • Eindproduct
    • Reflectie
  • Bijlage
    • Bronnen
    • Bouwstenen
      • De verschillende projectfases
      • Workshops
      • SLC Sessie 14/04
Powered by GitBook
On this page
  • Bottom navigation
  • Cards component
  • Buttons
  • System icons

Design Patterns

PreviousFocusgroup & Co-creationNextDesign Principes

Last updated 4 years ago

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 heb ik er ook al een hoop benoemd. De bronnenlijst van de apps die ik heb gebruikt voor Design Patterns

Vervolgens heb ik tijdens de uitwerking van mijn prototypes gezocht naar bekende principes en patterns om ervoor te zorgen dat mijn prototype aan de voldoet en de functionaliteiten zoveel mogelijk voor zich spreken voor iedere gebruiker.

De basis elementen in mijn app design heb ik gebaseerd op het , 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.

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. .

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

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).

Een populaire en tijdloze oplossing voor content blokken is het 'cards component' . 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 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.
Benchmark Creation
principles of user interface design
Material Design System van Google
(Google, z.d.)
(Appdexa, 2019)
(Curtis, 2018)
Board met screenshots van Google Material Design pagina over Bottom Navigation (material.io/components/bottom-navigation) en voorbeelden uit mijn Inspiration Wall.
Board met screenshots van Google Material Design pagina over Cards (material.io/components/cards) en voorbeelden uit mijn Inspiration Wall.
Board met screenshots van Google Material Design pagina over buttons, van material.io.
Board met screenshots van Google Material Design pagina over System Icons en Icons, van material.io/design/iconography/system-icons.html
Een screenshot van het inlogscherm op askteamclean.com, waarop gebruik van het card component en solide buttons te zien is.
User Generated Content
kan hier worden bekeken.
Voor de bronnenlijst van deze design pattern search klikt u hier.