Hibaok-átvilágítás · amit a rajzolás előtt megtanultunk
Mesterek
Húsz forrás, mindegyikből egyetlen elv, amelyet átveszünk. Mellette: hol dolgozik a termékben, és mit nem veszünk át szándékosan.
01Egyszerre egy kérdés, mindenkinek
02Nyugodt, sűrű eszközök szakembereknek
03A bizonytalanság őszinte ábrázolása
04Irányítópult, amely tájékoztat
05Látható adatvédelem
06Apple Human Interface Guidelines
07Mindenkinek érthető
ForrásAz elv, amelyet átveszünkÍgy dolgozik a termékbenFunkciók
01
Egyszerre egy kérdés, mindenkinek
GOV.UK Design System
és Service Manual
Egy oldal, egy kérdés – és a kérdés maga az oldal címe.
A kapu, az értékelés és az órák kérdése külön képernyő, a kérdés a címben áll. A hibaüzenet a mező mellett, egyszerű szavakkal mondja meg, mit kell tenni.
Nem vesszük át: a piros hibaszínt. Nálunk az Összevetés-kék és a „!” jel viszi a hibát.
F6 Kérdőív – kitöltésF3 Előkészítő varázslóF1 Belépés és fiókokF14 Ügyfelek, beállítások, adatvédelem
Typeform
egykérdéses folyam
Egyszerre egy kérdés látszik; a ritmus beszélgetésszerű, a haladás érezhető.
Egy képernyő, egy döntés. A haladási sáv felível, a hátralévő idő valós becslés: „kb. 6 perc van hátra”, a végén „Mindjárt kész”.
Nem vesszük át: az automatikus továbblépést. A Tovább csak akkor él, ha mindhárom skálának van értéke.
F6 Kérdőív – kitöltésF16 Előnézet
Luke Wroblewski
Web Form Design
Képernyőnként egy elsődleges művelet, a címke a mező fölött, a visszajelzés a kitöltés után.
A varázsló minden lépésén egyetlen zöld gomb áll. A beillesztett Excel-táblát előnézetben ellenőrizzük; a hibás sort kék kiemelés és egy mondat jelzi, nem gépelés közbeni figyelmeztetés.
F3 Előkészítő varázslóF1 Belépés és fiókokF2 Átvilágítások kezeléseF12 Felhasználók és jogosultságok
02
Nyugodt, sűrű eszközök szakembereknek
Linear
billentyűzet elsőként
Sűrű, de nyugodt: minden elérhető billentyűzetről, és az állapotnak egyetlen, következetes jele van.
A tanácsadói tér listái és a riport-szerkesztő billentyűzettel végigjárhatók, a fókusz mindig látszik. Az öt állapot mindenhol ugyanazzal az állapotcímkével jelenik meg.
Nem vesszük át: a sötét, lila alaphangot. A Felívelő Vonal világos, a sötét mód a design system szerinti.
F2 Átvilágítások kezeléseF8 Elemzés és riport-szerkesztőF11 Kérdésbank és sablonokF13 Napló
Stripe Dashboard
számok, események, napló
A szám pontos és táblázatos, és minden érzékeny művelet nyomot hagy.
Táblázatos számjegyek mindenhol. Export, linkmásolás és kódlap-nyomtatás csak friss megerősítés után történik, „Naplózva” jelzést kap, a naplóban pedig külön, nyugodt sorként látszik.
F4 Kiküldés és emlékeztetőkF13 NaplóF14 Ügyfelek, beállítások, adatvédelemF1 Belépés és fiókok
Things 3
a mai nap nyugalma
A nyugalom a szerkezetből jön: csak az látszik, ami most dönt.
A teendősáv három dolgot mutat: „Közzétételre vár”, „Holnap indul”, „Lejár 2 napon belül”. A részvétel oldala egy számot és egy görbét emel ki; a többi csendben vár.
F2 Átvilágítások kezeléseF5 RészvételF10 Visszamérés
03
A bizonytalanság őszinte ábrázolása
Claus O. Wilke
Fundamentals of Data Visualization, a bizonytalanság fejezetei
Egy becslés csak a bizonytalanságával együtt igaz; a tartomány az ábra része, nem lábjegyzet.
Minden hibaindex ± sávval áll a rangsorban. A költség mindig „kb.”, középértékkel és tartománnyal: „kb. 18,4 M Ft / év”, mellette „14,1–23,9 M Ft”.
F9 Közzétett eredményekF10 VisszamérésF8 Elemzés és riport-szerkesztő
Jessica Hullman
kutatások a bizonytalanság megjelenítéséről
A halványan jelzett bizonytalanságon az olvasó átsiklik; ki kell mondani, és bele kell építeni a jelbe.
Szóval is kimondjuk: megbízható, tájékoztató, bizonytalan. A holtverseny rangként jelenik meg („3–5.”), és a „valós változás” felirat csak kimutatható különbségnél áll; máskor „nincs kimutatható változás”.
F9 Közzétett eredményekF10 VisszamérésF8 Elemzés és riport-szerkesztő
FT Visual Vocabulary
Financial Times
Az ábra abból a viszonyból következik, amelyet meg kell mutatni.
Rangsor: rendezett ív (RankingSwoosh). Észlelési rés: résábra. Részvétel: napról napra felívelő görbe. Visszamérés: előtte → utána, pontpárral.
F9 Közzétett eredményekF5 RészvételF10 VisszamérésF7 Személyes eredmény
Edward Tufte
adat-tinta, kis sokszorosok
Minden tinta adatot hordozzon; ami nem hordoz, az elmarad.
Nincs rácsvonal, árnyék és térhatás; az ív maga a sáv. A rejtett hőtérkép-cella sraffozott, és kiírja az okát: „< k”.
F9 Közzétett eredményekF8 Elemzés és riport-szerkesztőF5 Részvétel
04
Irányítópult, amely tájékoztat
Stephen Few
Information Dashboard Design
Egy pillantás alatt megmondja, hol a baj, és a kivételt emeli ki, nem a díszt.
Az Áttekintés fül egy képernyő: a legerősebb hibacsoportok, a költség tartománnyal és a megbízhatóság. Nincs KPI-csempe, és nincs olyan szám, amelyhez nem tartozik döntés.
F9 Közzétett eredményekF2 Átvilágítások kezeléseF5 Részvétel
05
Látható adatvédelem
Apple adatvédelmi címkék
és az Apple adatvédelmi szövegei
Szabványos, átfutható címke mondja meg, mi történik az adattal, mielőtt elköteleződsz.
Minden képernyő, amely válaszokat érint, egy sorban kimondja, ki mit lát. A küszöb mindig AnonymityMeter, soha nem puszta szám. A jogosultsági mátrix utolsó sora: „Ki töltötte ki – senki”.
F6 Kérdőív – kitöltésF5 RészvételF12 Felhasználók és jogosultságokF14 Ügyfelek, beállítások, adatvédelem
Signal
nyugodt, egyszerű magyarázatok
Egy nyugodt mondat arról, mire képtelen a rendszer, erősebb minden ígéretnél.
„Azt senki sem látja, ki töltötte ki – csak az egységenkénti darabszámot.” A személyes kód a kitöltő egyetlen kulcsa a saját válaszaihoz és eredményéhez, ezért a mentésére nyugodtan, de félreérthetetlenül kérjük.
F5 RészvételF6 Kérdőív – kitöltésF7 Személyes eredményF15 E-mailek és értesítések
06
Apple Human Interface Guidelines
Apple HIG
és az SF Pro betűrendszer
Világosság, háttérbe lépés, mélység: a tartalom az első, a felület szolgál.
SF Pro Display 20 pt fölött, SF Pro Text alatta, Inter tartalékkal és táblázatos számjegyekkel. A mobil kitöltésben minden érintési cél legalább 56 px, az Apple 44 pontos minimuma fölött.
Minden funkció; kiemeltenF6 Kérdőív – kitöltésF7 Személyes eredmény
07
Mindenkinek érthető: gyereknek és nagyszülőnek
2. kör · a teljes felülethez
Apple HIG · iOS 26, macOS 26
rétegzett anyagok, koncentrikus sarkok, SF Symbols-mozgás
A vezérlők anyaga a tartalom fölött lebeg, és a belső sarok a külsőből következik.
Áttetsző anyag csak a navigációs sávban és a lapokon. Belső rádiusz = külső − térköz: egy 34-es kártyában 12-es margóval 22-es gomb ül. Az ikonok az SF Symbols mozgáshatásainak mintájára a jelentést játsszák el: ismétlődés, leülepedés, beállás.
F6 Kérdőív – kitöltésF7 Személyes eredményF9 Közzétett eredményekF16 Előnézet
Apple Assistive Access
egyszerűsített iOS kognitív akadálymentességhez
Nagy csempe, ikon és felirat együtt, egyszerre egyetlen választás.
A kitöltő opciókártyái legalább 64 px magasak: bal oldalt 44 px-es ikon, mellette a szó. Ikon felirat nélkül sehol nem áll, és a választás soha nem csak színből derül ki.
F6 Kérdőív – kitöltésF16 ElőnézetF7 Személyes eredmény
Apple Weather, Health, Fitness
mozgó jelentés, nyugodt adat
A mozgó ikon elmondja, mi történik; az adat hétköznapi embernek szól.
Az ikon megjelenéskor egyszer lejátssza a jelentését, és kiválasztáskor megismétli. A személyes eredmény számok nélküli ívekkel és egy mondattal beszél, ahogy a Health összefoglalói.
F6 Kérdőív – kitöltésF7 Személyes eredményF5 Részvétel
NHS digital service manual
a GOV.UK mellett: tartalom és nyelv
Egyszerű nyelv: mondatonként egy gondolat, és a hibaüzenet a következő lépést mondja.
„Válassz legalább egy lehetőséget, vagy jelöld: Sehol sem jellemző.” Nem hibáztat, nem kódot mutat, és a mező mellett áll, kék „!” jellel.
F6 Kérdőív – kitöltésF1 Belépés és fiókokF3 Előkészítő varázsló
Nielsen Norman Group · W3C WAI
idősebb felhasználók és gyerekek
Nagyobb betű és célpont, erős kontraszt, kiszámítható út; gyereknek konkrét kép és azonnali visszajelzés.
A kitöltésben 19 px-es törzsszöveg, 56 px-es célpontok, 8 px köztük, 7 : 1-re törekvő kontraszt, és 200 %-os nagyításnál is működik. A Vissza mindig ott van; nincs időkorlát és automatikus továbblépés.
F6 Kérdőív – kitöltésF7 Személyes eredményF16 ElőnézetF1 Belépés és fiókok
Duolingo · Headspace
haladás és visszajelzés · nyugodt mozgás
A haladás látható és bátorító; a mozgás lassú, lélegző ritmusú.
A haladási sáv felível, és szóval is kimondja, hol tartasz: „1. rész · 5 / 11 · kb. 6 perc van hátra”. A végén nyugodt köszönet és a személyes kód.
Nem vesszük át: a pontszámot, a jelvényeket, a sorozatokat és a hangos ünneplést.
F6 Kérdőív – kitöltésF7 Személyes eredményF15 E-mailek és értesítések
Funkciók szerint
Minden funkciónak van legalább egy mestere. Az Apple HIG mindegyikben dolgozik.
F1 Belépés és fiókok
GOV.UK, Wroblewski, Stripe
F2 Átvilágítások kezelése
Wroblewski, Linear, Things 3, Few
F3 Előkészítő varázsló
GOV.UK, Wroblewski
F4 Kiküldés és emlékeztetők
Stripe
F5 Részvétel
Things 3, FT, Tufte, Few, Apple címkék, Signal
F6 Kérdőív – kitöltés
GOV.UK, Typeform, Apple címkék, Signal
F7 Személyes eredmény
FT, Signal
F8 Elemzés és riport-szerkesztő
Linear, Wilke, Hullman, Tufte
F9 Közzétett eredmények
Wilke, Hullman, FT, Tufte, Few
F10 Visszamérés
Things 3, Wilke, Hullman, FT
F11 Kérdésbank és sablonok
Linear
F12 Felhasználók és jogosultságok
Wroblewski, Apple címkék
F14 Ügyfelek, beállítások, adatvédelem
GOV.UK, Stripe, Apple címkék
F15 E-mailek és értesítések
Signal