In this article
En prissidans kan använda attraktiva färger och ändå känna sig svår att läsa. En karta placerar återbetalningsnoten ovanför priset, en annan döljer den under en lång funktionlista och den tredje trycker knappen utanför skärmen. Besökaren gör layoutarkéologi istället för att jämföra planer.
Arkitektonisk rytm är en användbar designanalogi här: upprepa viktiga relationer så att människor kan hitta sin väg. Det är en analogi, inte bevis för att ett rent rutnät ökar försäljningen. Nedan finns ett exempel på en gränssnitt, med avsiktligt illustrativa mått, som en designer eller utvecklare kan anpassa utan att behöva köpa en ny komponentbibliotek.
Börja med relationer, sedan välj ett utrymmesskala
Gå igenom beslutet sidan stöder. På en värdjämförelse behöver en köpare förstå arbetsbelastningen, återkommande kostnad, gränser, stöd och nästa steg. Dessa relationer bör förbli tydliga på varje karta. Upprepa informationens ordning innan du försöker få de dekorativa kanterna att matcha.
För detta exempel, använd en 8-pixel bas med 8, 16, 24 och 32-pixel utrymmes-token. Detta är designval, inte en åtkomlighetsstandard eller en universell optimal lösning. Placera en etikett 8 pixlar från dess värde, lämna 16 pixlar mellan relaterade fakta och använd 24 pixlar för att separera olika grupper. En starkare avbrott innan åtgärden säger till läsaren att jämförelsen är slut.
Namnge token efter syfte, till exempel field-gap, group-gap och card-padding. En utvecklare bör kunna ändra card-padding en gång snarare än att leta igenom sjutton nästan identiska deklarationer. Om en översatt etikett behöver en extra rad, låt gruppen växa. Konsistens betyder förutsägbara relationer, inte att tvinga varje mening in i samma rektangel.
En användbar första test är att ta bort bilder och färger. Kan någon fortfarande förstå vilket pris som hör till vilken plan och var dess begränsningar sitter? Om hierarkin försvinner, lutar layouten för mycket på dekorationsfaktorer.
Exempel på arbete: tre värdkort i dator- och mobilbredd
Föreställ dig en fiktiv jämförelse av tre värdkonfigurationer. Detta är en illustrativ designövning, inte en Enigma prislista eller ett kundresultat. Varje karta innehåller ett plans namn, avsedd arbetsbelastning, betalningsinformation, innehållande resurser, viktiga exkluderingar och en åtgärd.
Vid en 1200-pixel innehållsbredd har tre kolumner separerade av två 24-pixel gap, vilket ger 384 pixlar tillgängliga. Med 24-pixel padding på båda sidorna har varje karta 336 pixlar för sitt innehåll. Vid en 390-pixel skärmbredd lämnar 16-pixel yttre marginaler en 358-pixel karta, eller 310 pixlar innehåll efter samma padding. Dessa beräkningar visar hur mycket utrymme texten faktiskt har. De säger inte till en webbläsare att ignorera zoomning eller en besökskundens typsnittsinställningar.
Håll samma informationssortering när korten stakar på mobil. Placera återkommande kostnad, betalningsperiod och eventuell startavgift tillsammans. Placera en återbetalningsvillkor bredvid det relevanta priset snarare än att lita på en fotnot flera skärmar bort. Håll exkluderingar nära den relaterade funktionen.
På datorn kan ett rutnät justera de huvudsakliga grupperna medan texten kan brytas. På mobil, ta bort fasta korthöjder och låt varje plan ta det utrymme den behöver. Testa den längsta plans titel och den längsta översatta åtgärdslabel. Lös inte en översvämningsskärv genom att dölja viktig text. En ren skärmdump är inte en användbar jämförelse om besökaren inte kan hitta fällan.
Använd denna femstegsgranskning innan du publicerar
Först läs en karta utan att titta på dess grannar. Skriv ner vad besökaren köper vad som utesluts och vad åtgärden gör. Varje svar som kräver en tooltip, en annan karta eller en försäljare förtjänar en tydligare etikett.
Andra, skanna samma fakta över alla kartor. Resursgränsen eller stödarrangemanget bör visas i en förutsägbar plats och använda jämförbara enheter. Om en konfiguration kräver en annan sorts information förklara skillnaden istället för att skapa en rymlig men missledande rad.
Tredje, testa en smal vy, webbläsarzoom och längre text. Titta efter avklippta etiketter, knappar som ligger ovanpå text, dolda priser och horisontell rullning på vanlig innehåll. Verklig text är en bättre stressprov än tre matchande rader med platsbehållare.
Fjärde, använd tangentbordet. Följ fokusindikatorn genom länkar, väljare och utökningsbara innehåll. En utökad panel bör förbli ansluten till sitt kontroll och inte täcka planens pris eller få nästa åtgärd att fastna under den. Upprepa kontrollen med en touch-enhet; hover kan inte bära viktig information själv.
Femte, granska beslutet efter att visuella element återställts. Identifierar den ljusa accenten en åtgärd eller konkurrerar den mot sex andra ljusa accenterna? Behåll användbar betoning, ta bort dekorativt brus och registrera några problem med vyfält, tema, kontroll och förväntat beteende. Det ger utvecklaren ett återupptagbart problem snarare än det ofixabla ärendet: 'Det ser lite fel ut.'
Kontrollera kontrast och omflyttning istället för att lita på en frostad skärmdump
En frostad karta förändras med vad som passerar bakom den. Svart text som läses bra över blått kan försvinna när en ljus illustration rör sig under. Ökning av oskärpa kan mjuka bakgrunden utan att ge tillräcklig kontrast. Använd en tillräckligt ogenomskinlig yta bakom viktig text och testa de faktiska renderade kombinationerna i båda teman.
WCAG:s minimumkontrastkriterium använder ett förhållande på minst 4.5:1 för vanlig text och 3:1 för kvalificerad stor text. Stor text har en specifik definition i riktlinjerna; en rubrik är inte automatiskt undantagen bara för att den är bold. Tidningens färgkontrastkontroll kan jämföra två fasta färger men kan inte certifiera en hel sida eller utvärdera en rörlig genomskinlig yta.
Reflow-riktlinjerna är en annan användbar test. Vanligt vertikalt rullande innehåll bör förbli användbart vid en bredd motsvarande 320 CSS pixlar utan att kräva rullning i båda riktningarna. Vissa verkligt tvådimensionella innehåll har undantag så utvärdera en jämförelsetabell enligt dess syfte snarare än att klippa kolumner för att undvika en rullningslina.
Rytm har också gränser. Upprepade kartor bör inte dölja betydande skillnader och matchande visuella positioner bör inte överväga en känslig dokumentläsningsordning. Börja med semantiska rubriker, märkta kontroller och tydlig text. Behandla utrymme som stöd för den struktur. Sedan be någon att utföra den faktiska jämförelseuppgiften, notera var de tvekar och förbättra designen. En konsekvent rutnät är ett verktyg; beslutet det hjälper någon att fatta är syftet.
Läs mer
Din nästa steg
Prova granskningen på en prissättning eller tjänstsektion innan du omförsöker hela webbplatsen. Spara vystorleken, identifiera den längsta innehållet och fånga det ljusaste bakgrunden bakom viktiga texter. Fixa en upprepade relation, sedan upprepa jämförelseuppgiften.
Om samma problem dyker upp över hela din webbplats kan Enigma hjälpa till att omvandla hittarna till en delad komponent och utrymmessystem. Ta med skärmsnitt och beslut dina besökare behöver göra. Det användbara utgångspunkten är en tydlig uppdragstext, inte en löfte om att en annan gradient kommer att göra säljandet.