There are many reasons for this principle but my favourite is that designing for a minority makes things better for everyone.
Examples:
Subtitles don’t just help deaf people; they allow people to watch a video in a loud cafe
Plain language isn’t just easier to read for people with low literacy; experts find it easier to read too
Large radio buttons don’t just help people with motor impairments; everyone finds them easier to click
Principle #2: Good design makes things obvious
Chris Pratley, founder of OneNote said “You know you have a good design when people say ‘oh yeah, of course’ like the solution was obvious”.
Examples:
Instead of using a hamburger menu, just show the navigation items and let them wrap if necessary
Instead of using sticky menus, just let users scroll and put calls to action in context
Instead of hiding hint text in tooltips, just show the hint inline
Principle #3: Good design puts users in control
Design for real life. People prefer to interact in different ways. And we should design for both an idealised work flow as well as when things don’t go to plan.
Examples:
Instead of expecting users to fill out a form in one go, expect them to get interrupted
Instead of showing a menu on hover, show it on click
Instead of infinite scrolling, let users paginate
Principle #4: Good design is lightweight
According to Google increasing the page load time from 1 to 3 seconds increases the chance of abandonment by 32%. At 6 seconds it increases to 106%. Slow interfaces are stressful and untrustworthy.
Examples:
Kill the background video and prioritise the content and flow
Kill the tooltips and reduce the content to its irreducible core
In 2017, we looked at how web bloat affects users with slow connections. Even in the U.S., many users didn’t have broadband speeds, making much of the web difficult to use. It’s still the case that many users don’t have broadband speeds, both inside and outside of the U.S. and that much of the modern web isn’t usable for people with slow internet, but the exponential increase in bandwidth (Nielsen suggests this is 50% per year for high-end connections) has outpaced web bloat for typical sites, making this less of a problem than it was in 2017, although it’s still a serious problem for people with poor connections.
CPU performance for web apps hasn’t scaled nearly as quickly as bandwidth so, while more of the web is becoming accessible to people with low-end connections, more of the web is becoming inaccessible to people with low-end devices even if they have high-end connections. For example, if I try browsing a ”modern” Discourse-powered forum on a Tecno Spark 8C, it sometimes crashes the browser. Between crashes, on measuring the performance, the responsiveness is significantly worse than browsing a BBS with an 8 MHz 286 and a 1200 baud modem. On my 1Gbps home internet connection, the 2.6 MB compressed payload size ”necessary” to load message titles is relatively light. The over-the-wire payload size has ”only” increased by 1000x, which is dwarfed by the increase in internet speeds. But the opposite is true when it comes to CPU speeds — for web browsing and forum loading performance, the 8-core (2 1.6 GHz Cortex-A75 / 6 1.6 GHz Cortex-A55) CPU can’t handle Discourse. The CPU is something like 100000x faster than our 286. Perhaps a 1000000x faster device would be sufficient.
WCAG 2.0 nivå AA kräver kontrastratio på minst 4.5:1 för normal text och 3:1 för stor text. Stor text räknas som minst 18.66px (fetad) eller 24px (normal) och större. WCAG skriver även:
Tillfälligt: Text eller bilder av text som ingår i en inaktiv användargränssnittskomponent, som är ren dekoration, som inte är synliga för någon, eller som ingår i en bild som innehåller väsentligt annat visuellt innehåll, har inget kontrastkrav.
Logotyper: Text som är en del av en logotyp eller varumärke har inget minimikrav på kontrast.
Förbättrade kontraststandarder
1.4.6 Kontrast (förbättrad): Den visuella presentationen av text och bilder av text har ett kontrastförhållande på minst 7:1, förutom följande: (Nivå AAA)
Stor text: Storskalig text och bilder av storskalig text har ett kontrastförhållande på minst 4,5:1;
Tillfälligt: Text eller bilder av text som ingår i en inaktiv användargränssnittskomponent, som är ren dekoration, som inte är synliga för någon, eller som ingår i en bild som innehåller väsentligt annat visuellt innehåll, har inget kontrastkrav.
Logotyper: Text som är en del av en logotyp eller varumärke har inget minimikrav på kontrast.
Nyans (hue) — Nyans hänvisar till färgen på själva bilden. Nyans är en grad på färghjulet (från 0 till 360 grader) — 0 (eller 360) är röd, 120 är grön, 240 är blå. Det definieras formellt som ”i vilken grad en stimulans kan beskrivas som lik eller olik stimuli som beskrivs som röd, grön, blå och gul” (källa).
Mättnad (saturation) — Färgmättnad hänvisar till färgintensiteten i en bild. När färgen är helt mättad anses färgen vara dess renaste (äkta) version. Mättnad är ett procentuellt värde: 0 % betyder en grå nyans och 100 % är helfärgen. Rena färger är helt mättade.
Luminans (luminance) — intensiteten av ljus som emitteras från en yta per ytenhet i en given riktning. Detta är mätningen av ljusstyrka, med en skala från vitt till svart. Luma (%) är intensiteten hos den akromatiska signalen som bidrar till vår färguppfattning. Ett mättnadsvärde på 0 indikerar mestadels grått medan 100 % ljusstyrka (eller L = 255) är vitt.
Intensitet (intensity) — Intensitet avser renheten hos en nyans. Den högsta intensiteten eller renheten hos en nyans är nyansen som den visas i spektrumet eller på färghjulet. En nyans som är reducerad i intensitet kallas en ton.
Nyans (tint) — En nyans är ett blandningsresultat av en originalfärg där vitt har lagts till. En nyans är ljusare än den ursprungliga färgen.
Nyans (shade) — En nyans är ett blandningsresultat av en originalfärg där svart har lagts till. En nyans är mörkare än den ursprungliga färgen.
Ton (tone) — Ton är ett resultat av att blanda en ren färg med valfri neutral/gråskala färg, inklusive de två ytterligheterna vit och svart. En ton skapas antingen genom blandning av en färg med grått, eller genom både toning och skuggning.
Chroma — Kvaliteten på en färgs renhet, intensitet eller mättnad. Med andra ord är chroma den upplevda styrkan hos en ytfärg, graden av visuell skillnad från en neutral grå med samma ljushet.
Ljusstyrka (Brightness/Lightness) — Ljusstyrka som i brightness är den relativa ljusheten eller mörkheten för en viss färg, från svart (ingen ljusstyrka) till vitt (full ljusstyrka). Ljuststyrka som i lightness är en procentsats; 0% är svart, 100% är vit.
Färgkontrast (Color Contrast) — Skillnaden i luminans mellan två närliggande färger eller överlagrade färger (förgrund/bakgrund).
Dynamiskt omfång (Dynamic Range) — Förhållandet mellan de största och minsta värdena som en viss kvantitet kan anta. För färgkontrast är detta skillnaden mellan den ljusaste luminansen och den mörkaste luminansen. Det tar tid för ögonen att anpassa sig till olika ljusnivåer, så designers måste ta hänsyn till det dynamiska omfånget för det mänskliga ögat som tillämpas på digitala skärmar.
Optisk bländning (Optical Glare) — Bländning orsakas av ett betydande förhållande mellan luminansen mellan objekt och bländningskällan. Detta kan även gälla digitala och tryckta källor, varvid reflekterat ljusare ljus gör det svårare för det mänskliga ögat att urskilja närliggande föremål. Du kan också tillämpa detta koncept på skärmbländning, som vad som händer när du använder en bärbar dator utomhus.
Färgkontrastförhållande (Color Contrast Ratio) — En egenskap hos ett digitalt displaysystem definierat som förhållandet mellan luminansen för den ljusaste färgen (vit) och den för den mörkaste färgen (svart) som systemet kan producera. Ett högt kontrastförhållande är en önskad aspekt av alla skärmar.
Human Eye Dynamic Range — Det dynamiska omfånget för det mänskliga ögat är cirka 20 stopp, eller 1 000 000:1. Kontrastkänsligheten hos det mänskliga ögat är störst när detaljfrekvensen i en scen är cirka 4 cykler per grad (källa).
Beräkna kontrastratio
Kontrastförhållanden kan variera från 1 till 21 (vanligtvis skrivet 1:1 till 21:1).
