The Scaling Fallacy and Web Design

Enkelt sagt är skalningsfallet fenomenen där människor felaktigt antar att något som fungerar i en storlek också kommer att fungera i en annan storlek. I den här artikeln kommer vi att diskutera hur denna felaktighet kommer till spel i den verkliga fysiska världen, och sedan kommer vi att förklara hur man tillämpar lektionerna på dina egna webbdesigner.

Skalningsfallet


Ugh, som om en jätte 50 fot lång skorpion kunde ens flytta, än mindre slåss med en demi-gud.

Jag tittade nyligen på filmnyckeln för Clash of the Titans när den här gamla designprincipen kom i åtanke. I en tidig klimatisk scen fortsätter gigantiska skorpioner att attackera filmens hjälte i en episk kamp mot döden. Skorpionerna, skalade till gigantiska proportioner, var skarpa och dödliga som du kan förvänta dig när du arbetar med en sådan fruktansvärd fiende ...

Effekten av digitala specialeffekter gör det idag helt möjligt att en sådan uppskalad monstrositet kan inträffa med tanke på rätt inriktning av Zeus och Growth Ray från Älskling, jag blåste upp barnen (ett annat bra exempel på varför vetenskap och Hollywood aldrig borde göra barn). Verkligheten hos ett gigantiskt uppskalat monster är emellertid fysiskt omöjligt.

Medan mycket sägs om små insekter som kan lyfta stora vikter jämfört med deras relativa kroppsstorlek, överförs den rena verkligheten av samma styrka till en superstorad version av samma insekt bara inte i den fysiska världen.

En liten myr kan lyfta 50x det är vikt, men det betyder inte att en massiv 1,000lb ant skulle kunna lyfta 50.000 lbs. Effekterna av gravitation på en liten insekt är praktiskt taget obefintlig, men tyngdkraften blir en mycket riktig kraft när storleken är uppskalad. En 1,000 lb ant hade svårt att bara rulla ut ur sängen på morgonen.

Skalfeligheten arbetar inte bara med att skala små saker till stora men - Ett massivt berg kan stå genom tusen regn och snöstormar ... men en liten skinka kommer att tvättas bort med den mildaste brisen.

Du får det ... Det som fungerar i en storlek fungerar inte alltid när det skalas utöver de ursprungliga designintentionerna. Utformningen, funktionen och användbarheten av nästan allt i hela världen är knutna till varandra i skala. Felaktigheten uppstår när en designer antar att användbarheten kommer att behållas när en design är skalad upp eller ner.

Applicera den på webbdesign

Scaling Fallacy kommer in i spel i webbdesign på två viktiga områden: Interaktivitetsantaganden och ladda antaganden. Vi diskuterar båda på ett ögonblick, men när du läser vill jag att du ska överväga hur lätt dessa skalningsproblem ska lösa.

Som det gamla ordspråket säger, "efterhand är 20/20"... det är att kunna exakt förutsäga framtiden som är så darn svår.

I de flesta fall är det ganska enkelt att lösa dessa designproblem (lägga till ett paginationssystem, skydda en layout från överdimensionerade bilder med hjälp av CSS överflöd: dold egendom, instruerar kunder att aldrig röra sig med navigationssystemet etc.). Alla dessa uppgifter är enkla att göra ... det identifierar dessa problem innan de händer som kräver noggrann tanke och förberedelse.

Okej, låt oss dyka in i nitty gritty saker:

Interaktionsförutsättningar

Interaktionsantaganden uppstår när du skapar en design baserad på ett antagande att användarens beteende kommer att vara densamma på olika nivåer.

Det klassiska exemplet är en brandplan: En allmän brandplan för ett litet hus är enkelt: lämna byggnaden så fort som möjligt, ring polisen. Samma exitstrategi, när den tillämpas på en skyskrapa kontorsbyggnad packad med människor skulle resultera i katastrof. Problemet är inte designen per sagt, det är faktumet att designen inte har redogjort för den nya skalan.

Ett webbdesign exempel

I webbdesign kan liknande interaktionsförutsättningar inträffa när man antar att en klient kommer att fylla din webbdesign med innehåll som du förväntar dig att.

Placeringen, stilen och storleken på en navigeringsfält kan exempelvis vara perfekt när en blogg bara har 4 eller 5 kategorier, men samma navigeringsfält blir nästan oanvändbar när 20 eller fler länkar läggs till:


En navigeringsbar design, som den är avsedd att användas.
Samma navigeringsfält, den här gången med 20 eller så länkar, vilket gör det svårt att läsa eller använda.

I det här fallet är lösningen ganska enkel: instruera klienten som använder webbplatsen för att hålla sina huvudnavigationslänkar begränsade till en handfull (eller använd en rullgardinsmeny för ytterligare länkar).

Identifiera interaktionsförutsättningar

Att identifiera interaktionsantaganden är inte raketvetenskap, men det kräver ett slags flexibelt tänkande som står för olika möjligheter. När det gäller webbdesign, om du designar ett element under antagandet att det bara kommer att användas på ett enda sätt (antingen av en användare eller den person som skriver in innehållet ett år efter att du lämnat projektet) finns det en mycket bra chans att Elementet kommer då att fungera när det används på ett sätt utanför det du tänkte på.

Här är bara några exempel där enkla interaktionsantagelser görs ... det här är inte alla av dem på något sätt, men det borde ge dig en bra uppfattning om hur det här fungerar:

  • Bilder - Tänk dig att du har utformat en webbplats som använder alla 200px med 200px bilder. Klienten lägger senare till en bild på 400px med 100px, vilket bryter layouten.
  • Navigationsmenyer - Du utformar en webbplats med ett innovativt "docked" menysystem som kräver att en användare svävar över ett visst område för att se menyn ... men du försummar att berätta för användarna hur man gör det här.
  • sidofält - Du utformar ett sidofält som är exakt 300px bredt, men klienten lägger till bilder som är 500px breda, bryter styling.
  • layouter - Du utformar en webbplats som är starkt beroende av flera kolumner, men klienten vill senare använda en layout som använder hela bredden (utan sidofält).

De flesta av dessa problem borde vara lätta att fixa ... bara några extra kodkod eller ett enkelt pedagogiskt möte med en klient kan förhindra att några problem uppstår någonsin ... men det jag vill att du ska ta bort från detta är att du måste alltid förutse scenarier där dina mönster används på sätt som du inte ursprungligen planerar att använda.

Ladda antaganden

Belastningsantaganden är lite annorlunda - de uppträder när en designer antar att spänningarna på ett givet system kommer att vara desamma i varje skala. Belastningsantaganden händer mycket på utvecklingssidan av ett webbdesignprojekt; Göra antaganden om att en bildwebbdesign som fungerar när tusen människor besöker webbplatsen en månad kan blåsas ut ur vattnet när mer än en miljon människor besöker på en dag och lägger ytterligare stress på servern. Samma princip kan tillämpas på den faktiska visuella utformningen av en webbplats också ...

Du utformar till exempel en bildgallerilayout som är otroligt lätt att bläddra när det bara finns 10 bilder ... men genom att inte tillhandahålla ett korrekt "paginering" -system blir hela layouten svår att bläddra när mer än 25 bilder läggs till.


Ett paginationssystem är kanske ett av de enklaste exemplen på att anpassa en design till en skala.

Lösningen är ganska enkel i detta fall: genom att lägga till ett enkelt paginationssystem kan samma design göras "skalbar" med några små tweaks. Ett numrerat paginationssystem läggs till och whallah! Din design är användbar igen ... i alla rimliga mål. Du skulle bara stöta på skalningsproblemet om ditt bibliotek med bilder översteg rimlig gränser för paginationssystemet ... vid vilken tidpunkt du skulle behöva överväga ett mer raffinerat märkningssystem och söksystem.

Identifiera Load Assumptions

Identifiera belastningsantaganden är också ganska enkelt: föreställ dig att någon specifik del av din design sträcker sig till dess gränser när det gäller innehåll ... planera därefter. Lösningen kan vara en design eller UI-tweak (som paginationsexemplet), men det kan också vara så enkelt som att instruera användarna vad gränserna är. Om din design endast tillåter 100 bilder och det finns inget som du kan göra åt det, berätta bara för användarna det där framåt. Se hur enkelt det är?

Skärmstorlek antaganden

Den sista typen antagande som jag skulle vilja beskriva är en som de flesta av er bekanta med: antaganden om skärmstorlek. Det här ämnet är ensamt värd det egna blogginlägget (mer på nästa vecka), så jag försöker hålla den här kortfattad:

Om du utformar en webbplats och aldrig slutar ett ögonblick för att testa hur det ser ut i en annan upplösning, sluta just nu och gör det!

Långt borta är de dagar där 75% av surfare på Internet surfar på en 1024x768 bildskärm. Numera surfar människor på nätet på skärmar av alla former och storlekar ... från små iPhone-skärmar till massiva HD-tv.

Att utforma en webbplats under antagandet att alla där ute har en viss skärmstorlek är inte bara kortsiktig, det undergräver användarens kärnanvändbarhet. Även om det inte vore bra att skapa en annan webbplats för varje annan typ av enhet där ute, är det verkligen värt att ta en timme eller två för att åtminstone tänka på hur din webbplats kommer att gå på olika skärmtyper och upplösningar.

Att hitta några justeringar som du kan göra under designfasen på en webbplats kommer att spara dig mycket sorg i det långa loppet. Här är några få snabba tips för att undvika skärmstorlek antaganden:

  • Lita inte på komplexa menysystem som kräver att musen används korrekt. Hint: 8pt teckensnitt är inte fingervänligt.
  • Överväg att lägga till ett mobilvänligt fallback-tema till en WordPress-webbplats.
  • Undvik att designa "fullskärms" -sidor (webbplatser där kärninnehållet upptar mer än 960px bredd) om inte webbplatsen kan skala sig ned för mindre skärmar.
  • Använd inte Flash för kärnnavigering, om du inte har en fördömd bra anledning (eller en HTML-fallback-metod)
  • När du är i tvivel, gör hela din kroppstext 2 poäng större ... det kommer inte att skada läsbarheten på vanliga skärmar, och mobila användare kan faktiskt läsa din text.

Undvika skalningsfallet

Ingen stridsplan överlever någonsin kontakt med fienden.

Det enda riktiga sättet att undvika skalningsfel är att ständigt vara på utkik efter det. Under hela designprocessen bör du vara medveten om din egen tendens att göra dessa typer av antaganden.

Utforma inte bara under antagandet att allt du skapar i Photoshop eller Fireworks blir detsamma när webbplatsen startas. Om du inte är på ett projekt där du kommer att vara den enda enheten som designar och lägger till innehåll på webbplatsen är chansen hög att någon på något vis kommer att lägga till innehåll som kommer att bryta dina förväntningar på hur den designen var avsedd att användas.

På samma sätt undviker du att utforma saker som bara fungerar i en mycket begränsad skala. Som vi alla vet kan anpassningar och revideringar till en webbdesign vara en smärtsam, svår och dyr process ... att utforma under skalningsfeligheten gör det bara att dessa problem multipliceras, eftersom du kommer att behöva se dina gamla mönster så ofta som människors beteende faller utanför dina egna antaganden.

Slutsats

Det är det för nu! Jag hoppas att alla tycker att det här inlägget är användbart ... Skalingsfallet är en av de gåtfulla principerna som är lätta att förklara i abstrakt men svårt att spika ner i konkreta mönster ... så det kräver mycket träning och konstant vaksamhet för att undvika de stora fallgroparna som kommer från antagandena som vi diskuterade.

Om du gillade inlägget eller har något att lägga till, posta det nedan i kommentarerna. Skål!