search

fdnd-agency / buurtcampus-oost

In Buurtcampus Oost zoeken studenten samen met bewoners, professionals, ondernemers, docenten en onderzoekers gezamenlijk naar oplossingen voor kansrijke uitdagingen uit de buurt.
MIT License
1 stars 9 forks source link

Button ontwerpen voor accessibility tools #136

Open Annevd opened 3 weeks ago

Annevd commented 3 weeks ago

User story: Als bezoeker wil ik toegankelijkheid features zien en kunnen aanpassen

Taak: Button ontwerpen voor accessibility tools

wingsvn commented 3 weeks ago

Hoe komt de button er uit te zien? waar komt de button te staan? Hoe worden de features weergeven? zie #155

wingsvn commented 2 weeks ago

Op basis van mijn eerdere analyse en gevonden inspiratie heb ik wat ontwerpen geschetst.

Image

wingsvn commented 2 weeks ago

Ik heb een aantal van deze ideeën in Figma gezet om te visualiseren hoe de layout er uit zou komen te zien. En waar we de features/tool button het beste kunnen neerzetten. Image

Annevd commented 2 weeks ago

2/10

Aan de hand van Wing-san's analyse bij issue #155, heb ik ook ontwerpen gemaakt voor de accessibility tools button.

Ik heb gekozen om duidelijke labels erbij te zetten omdat het om toegankelijkheid gaat, en dit meteen duidelijk moet zijn voor iedereen. Ook staan er icoontjes bij die hier aan bijdragen. Door de switch naast de opties kun je de tools aan en uit zetten.

Schetsen

Verkenning schetsen:

Breakdownschets:

Wireflow:

Figma design

KaanKalmi commented 2 weeks ago

Anne's design:

Top:

  1. Duidelijke labels en volgorde
  2. Leuk dat het komt uit een ander knopje (dat blauwe poppetje)

    Tip:

  3. Let op de duidelijkheid van het aan/uit state van de knoppen
  4. dat selectie menu van selecteer een taak misschien veranderen? ion know it looks good
TristanKatte commented 2 weeks ago

Top:

  1. Duidelijke volgorde
  2. Goed dat alle accessibility functies uit 1 knop kunnen komen

Tip:

  1. De stijling van de aan/uit staat zijn nog ietsje onduidelijk.
  2. Misschien een focus ring maken voor alle functies
Einanas commented 2 weeks ago

Tips:

  1. Bij het ontwerp voor de accessibility de sectie 'vertaal de site' is beetje onnodig dit staat namelijk al ingebouwd in de browser ook.

Tops

  1. Je hebt duidelijk doordacht welke design passend zou kunnen zijn door variaties te laten zien in je schetsen.
  2. Ik vind het ook leuk om te zien dat je hebt nagedacht over de posities van je knoppen, dit maakt het overzichtelijk voor jezelf en een ander.
Anna-Kyra commented 2 weeks ago

Design critique: top:

  1. Ziet er hiërarchies goed uit

Tip:

  1. Misschien met een hover laten zien dat het icoon dat het menu over toegankelijkheid gaat.
Annevd commented 1 week ago

3/10 Improved design

Naar aanleiding van de feedback van de 'Design Critque` heb ik mijn button en menu voor de accessibility tools proberen te verbeteren.

Ik heb nagedacht over:

  1. Contrast/kleurenblindheid
  2. Duidelijke onderscheiding tussen aan/uit styling van de switches
  3. Of de vertaal functie echt nodig is

1. Contrast & Kleurenblindheid

Om ervoor te zorgen dat het contrast van de knoppen hoog genoeg was, heb ik gebruik gemaakt van de CCA contrast checker, op basis van contrast voor niet-tekstuele elementen(AA).

Vervolgens heb ik deze foto in een kleurenblindheid analyzer gestopt, om te controleren of daar ook het contrast hoog genoeg was. Nu bleek het voor het kleurenblindheid-type Monochromacy/Achromatopsia, niet hoog genoeg te zijn:

Image

Ik heb dit hierna aangepast naar een nog hoger contrast waar het nu ook voor dit type kleurenblindheid voldoet aan de contrast eisen (AA):

2. Duidelijke aan/uit states

Ik heb de kleur van de 'aan' state blauw gemaakt, met een hoog genoeg contrast volgens de CCA. Hierdoor is er nu duidelijk onderscheid tussen aan en uit.

3. Is de vertaalfunctie echt nodig?

Na de feedback dat de vertaalfunctie overbodig was begon ik zelf ook te twijfelen over de vraag naar deze functie in het menu. Ik heb hier goed over na gedacht en ben toch tot de conclusie gekomen dat dit wél handig is om in het toegankelijkheidsmenu te hebben om een aantal redenen:

Volledig verbeterd design

Image

Image

wingsvn commented 1 week ago

Tijdens het design critique/ review kreeg ik de feedback om labels toe te voegen aan de accessibility features voor meer duidelijkheid #169 en om misschien iets van een animatie op accessibility tool button te zetten, zodat het wat meer opvalt dat de button aanwezig is.

Ik had in eerste instantie geen labels toegevoegd omdat ik het clean en klein wilde houden en omdat een aantal website (waar juist veel mensen met een visuele beperking) dit ook niet hadden, dacht ik dat de icoontjes wel duidelijk genoeg waren. Maar na de design critique talk en de verkregen feedback, heb ik toch besloten dit wel te doen. Hier het nieuwe design:

Image