Naar de inhoud

Een ontwerpoverdracht met toestanden en gedrag voorbereiden

Draag een navolgbare specificatie over. Een uitgewerkt voorbeeld van projecten zoeken toont teksten, toestanden en controlepunten.

Julia Hoffmann2 min leestijd
Ontwerpblad met een zoekveld, twee resultaatregels en een blauw potlood.

Een ontwerpoverdracht moet ontwikkeling vertellen welke interface gebouwd wordt en hoe die zich in het afgesproken proces gedraagt. Kies daarvoor een concrete taak. Het volgende sjabloon beschrijft een projectzoekfunctie in een fictief klantenportaal; het is een plan, geen al gebouwde interface.

Taak en ontwerpversie vastleggen

In het voorbeeld voert de persoon ‘Portaal’ in en start de zoekactie. Het portaal laadt passende projecten die onder de bestaande rechten vallen. Het ontwerp verandert die rechten niet. Leg vast welk bronbestand en welke goedgekeurde versie gelden. Benoem de gebruikte componenten met hun versie; een oudere afbeeldingsexport mag niet ongemerkt het bouwvoorbeeld worden.

Toestanden verbinden met tekst en bediening

Toestand in de voorbeeldspecificatie

Beoogde terugkoppeling

Afgesproken gedrag

Zoeken kan worden gestart

Veld ‘Projecten zoeken’, actie ‘Zoeken’

De ingevoerde term blijft zichtbaar; de actie start het laden.

Zoeken loopt

‘Projecten worden geladen.’

De lopende zoekactie is herkenbaar; oude resultaten worden niet als nieuwe treffers getoond.

Zoeken voltooid met treffers

‘2 projecten gevonden.’ met projectlinks ‘Portaalvernieuwing’ en ‘Portaalhulp’

De passende projecten zijn bereikbaar; de zoekterm blijft behouden.

Zoeken voltooid zonder treffers

‘Geen projecten gevonden voor deze zoekopdracht.’

De term blijft behouden en kan worden gewijzigd. Dit is geen verbindingsfout.

Ophalen mislukt

‘De projectlijst kon niet worden geladen. Probeer het opnieuw.’

De term blijft behouden; opnieuw zoeken is mogelijk. De fout wordt niet als lege resultatenlijst getoond.

De twee projectnamen zijn aangenomen voorbeeldtreffers. Bepaal ook wat gebeurt als een nieuwe zoekactie begint terwijl een eerder antwoord nog uitstaat. Alleen resultaten bij de actuele term mogen als actuele stand verschijnen.

Technische naamgeving en terugkoppeling overdragen

W3C beveelt passende zichtbare labels en gecontroleerde toegankelijke namen aan. Verbind veld, actie en beoogde naam daarom duidelijk in het ontwerp. Statusmeldingen kunnen hulptechnologie informeren zonder zelf focus te krijgen. De resultatenlijst zelf is iets anders dan de korte statusmelding erbij.

Spreek af waar de focus na het zoeken blijft en hoe de resultatenlijst met het toetsenbord bereikbaar is. Maak bij de overdracht duidelijk welke vragen nog onbeantwoord zijn; een ontbrekend ontwerp is geen toestemming voor willekeurig gedrag.

Met dezelfde taak beoordelen

Controleer in de gebouwde versie zoeken, lege resultaten en mislukt ophalen met passende testgegevens. Controleer langere vertalingen, toetsenbordnavigatie en terugkoppeling met de beoogde hulptechnologie. Vergelijk het resultaat met de afgesproken ontwerpversie. Verwerk gecorrigeerde regels in de gedeelde documentatie zodat latere wijzigingen op dezelfde basis voortbouwen.

Bronnen

Geschreven door

  • Julia HoffmannRedacteur design en UXJulia Hoffmann is bij ASES verantwoordelijk voor de redactionele content over design en user experience. Haar artikelen gaan over het gebruik van websites en applicaties, het ontwerp van gebruikersinterfaces en digitale toegankelijkheid.

ASES volgen

Verder lezen

Alle artikelen

Uw project met ASES

Beschrijf ons uw project. We nemen contact met u op met een eerste inschatting.