Button ontwerpen voor accessibility tools

[Annevd]

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

Taak: Button ontwerpen voor accessibility tools

[wingsvn]

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

[wingsvn]

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

[wingsvn]

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.

[Annevd]

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]

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]

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]

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]

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]

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:

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:

• Ja, de google translate functie zit al standaard in de browser. Echter zullen veel mensen bij bijvoorbeeld het wat oudere publiek niet weten waar dit zit, hoe het werkt en dat het überhaupt bestaat.
• Het is handig dat deze functie zich bevind bij alle andere toegankelijkheids-functies. Alles is in hetzelfde menu te vinden.
• Mensen hoeven niet eerst naar hun browserinstellingen te gaan omdat de optie zich binnen de website bevindt. Het veranderen van de taal kan dan een stuk sneller.

Volledig verbeterd design

[wingsvn]

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: