Klassiek
Hazır Köy Yufkası
De dorpsyufka. Dun, soepel, met die typische lichte gebakken smaak.
€ 3,75
Wat je niet ziet
op een screenshot
Bewegingen zijn het makkelijke deel. Waar ontwerp over gaat is wat er gebeurt als een formulier faalt, hoe een lege lijst eruitziet, en of een inkoper op een telefoon in een drukke keuken de prijs kan lezen.
Alle contrastwaarden op deze pagina zijn gemeten met de officiële formule, niet geschat. Je krijgt het getal, niet mijn oordeel.
01
De schaal
Zes maten, meer niet. Elke stap is groot genoeg om als verschil te lezen; wie er tien gebruikt krijgt tekst die er per ongeluk anders uitziet in plaats van bewust.
72–120px
Elke ochtend opnieuw
alleen de hero, één keer per pagina32–56px
Drie soorten, meer niet
sectiekop24–36px
Hazır Köy Yufkası
productnaam, artikelkop17px
Sinds 2012 bakt Ensar dagelijks 100.000 yufka in Ermelo.
lopende tekst15px
Soepele, grote wraps voor dürüm en kebab.
bijschrift, kaarttekst12px
ENSAR FOOD B.V. · TOLWEG 28
label, altijd in kapitaal met ruime letterafstand
02
Kleur, met het getal erbij
Vijf tinten. Bij elke staat wat hij haalt op de twee ondergronden van de site. De norm is 4,5 voor gewone tekst en 3,0 vanaf 24px.
| tint | op #0D0B09 | op #15110E | waarvoor |
|---|---|---|---|
| #F3EBDD | 16,59:1 | 15,86:1 | koppen en belangrijke tekst |
| #C9BFAF | 10,81:1 | 10,33:1 | lopende tekst |
| #E8CE73 | 12,64:1 | 12,08:1 | labels en links |
| #C9A227 | 8,12:1 | 7,76:1 | knopvlak, randen |
| #8C8377 | 5,27:1 | 5,03:1 | het zachtste dat nog mag |
Donkere tekst op het gouden knopvlak haalt 7,65:1. Dat is waarom die knop donkere letters heeft en geen witte: wit op dit goud zou 2,2:1 zijn geweest.
03
Alle toestanden, naast elkaar
Een knop heeft er vijf. De meeste sites tekenen er één en laten de rest aan de browser over. Focus is de belangrijkste: zonder zichtbare focusring kan niemand die geen muis gebruikt de site bedienen.
rust
muis erover
toetsenbord
ingedrukt
uitgeschakeld
rust
muis erover
toetsenbord
ingedrukt
uitgeschakeld
De uitgeschakelde knop staat bewust op 4,96:1 en niet lager. Grijs tot het onleesbaar is, is gemakzucht: iemand moet nog kunnen lezen wat hij niet mag.
04
De schermen die iedereen vergeet
Een ontwerp is pas af als je weet hoe het eruitziet als er niets is, als het laadt, en als het misgaat. Drie schermen die zelden getekend worden en die de bezoeker wél tegenkomt.
Leeg
Nog geen bestellingen
Zodra je een order plaatst staat hij hier, met de leverdatum erbij.
Een lege lijst is een kans, geen fout. Zeg wat er komt te staan en geef één weg vooruit.
Laden
Een skelet in de vorm van wat er komt, geen ronddraaiend wieltje. De pagina springt dan niet als de inhoud er is.
Fout
De prijslijst kon niet worden geladen
De verbinding werd verbroken. Je gegevens zijn niet verloren.
Zeg wat er misging, of het erg is, en wat de bezoeker nu kan doen. Geen “Oeps” en geen uitroepteken.
05
Een veld dat meedenkt
Vier toestanden van hetzelfde veld. De fout staat eronder in woorden, niet alleen in rood: kleur alleen is onbruikbaar voor wie kleurenblind is.
Waar we de prijslijst naartoe sturen
Je bent aan het typen
Er ontbreekt nog een deel na de punt, bijvoorbeeld .nl
Dit adres kan verstuurd worden
06
Dezelfde kaart, drie keer
Hetzelfde product, hetzelfde beeld, dezelfde tekst. Alleen de opbouw verschilt. Onder elke staat wat hij goed doet en wat hij kost.
Alles zichtbaar. Werkt als de bezoeker nog niet weet wat hij zoekt. Kost veel hoogte: drie hiervan zijn een heel scherm.
Hazır Köy Yufkası
€ 3,75
Beeld voorop. Half zo hoog, dus meer producten in beeld. Alleen bruikbaar als de naam genoeg zegt, en dat is bij yufka niet voor iedereen zo.
Klassiek
Hazır Köy Yufkası
Dun en soepel. Voor börek, gözleme of om af te scheuren.
€ 3,75
Liggend. Leest als een lijst en schaalt naar twintig producten. Het beeld wordt klein, dus alleen goed als de foto's strak zijn uitgesneden.
Voor Ensar zou ik C nemen op de productpagina en A op de startpagina. Drie producten mogen groot; twintig moeten scanbaar zijn.
07
Ritme in de witruimte
Alle afstanden komen uit één reeks. Dat is niet netjesheid om de netjesheid: als afstanden willekeurig zijn, ziet een pagina er rommelig uit zonder dat iemand kan aanwijzen waarom.
4tussen een pictogram en zijn tekst
8tussen twee regels van hetzelfde blok
16binnen een kaart
24tussen kaarten
48tussen blokken in een sectie
96tussen secties
Waarom dit belangrijker is dan de bewegingen
De bewegingen op de vorige pagina zijn in een middag te maken. Deze pagina gaat over de beslissingen die bepalen of iemand zijn bestelling afmaakt: of hij ziet dat een veld fout staat, of hij begrijpt waarom een knop niet werkt, en of hij de prijs kan lezen bij weinig licht.
Zeg welke onderdelen je in de echte site wilt, dan bouw ik ze erin. De toestanden en de foutmeldingen zou ik sowieso doen — die ontbreken nu.