The Scaling Fallacy og Web Design

Enkelt sagt, skaleringsfeilen er fenomenene hvor folk feilaktig antar at noe som fungerer i en størrelse også vil fungere i en annen størrelse. I denne artikkelen skal vi diskutere hvordan denne feilen kommer til spill i den virkelige fysiske verden, og da vil vi forklare hvordan du bruker leksjonene til dine egne webdesign.

The Scaling Fallacy


Ugh, som om en gigantisk 50 fot høy scorpion kan til og med flytte, enn si slåss med en demi-gud.

Jeg så nylig på filmgjenkjenningen for Clash of the Titans da dette gamle designprinsippet kom til tankene. I en tidlig klimaksituasjon fortsetter gigantiske skorpioner å angripe filmens helt i en episk kamp mot døden. Skorpioner, skalert til gigantiske proporsjoner, var ferske og dødelige som du kanskje regner med når du arbeider med en slik fryktelig fiende ...

Kraften til digitale spesial effekter i dag gjør det helt mulig at en slik oppskalert monstrosity kunne oppstå gitt riktig justering av Zeus og Growth Ray fra Kjære, jeg blåste opp barna (et annet fantastisk eksempel på hvorfor vitenskap og Hollywood aldri burde lage babyer). Imidlertid er virkeligheten til et gigantisk oppskalert monster fysisk umulig.

Mens mye er sagt om små insekter som kan løfte store vekter i forhold til deres relative kroppsstørrelse, blir den rene virkeligheten av den samme styrke som overføres til en super-stor versjon av det samme insektet bare ikke i den fysiske verden.

En liten maur kan løfte 50x det er vekt, men det betyr ikke at en massiv 1000 lb maur kunne løfte 50 000 lbs. Effektene av tyngdekraften på et lite insekt er nesten ikke-eksisterende, men tyngdekraften blir en veldig reell kraft når størrelsen er oppskalert. En 1,000 lb ant vil ha det vanskelig å bare rulle ut av sengen om morgenen.

Skalingsfeilen jobber ikke bare med å skalere små ting til stor skjønt - Et massivt fjell kan stå gjennom tusen regn og snøstormer ... men en liten skje med smuss vil bli vasket bort med den mildeste brisen.

Du får det ... Det som fungerer i en størrelse virker ikke alltid når det skaleres utover de opprinnelige designintensjonene. Design, funksjon og brukbarhet av omtrent alt i hele verden er bundet til hverandre etter målestokk. Fallen oppstår når en designer antar at brukbarheten vil beholdes når et design skaleres opp eller ned.

Bruk den til webdesign

Scaling Fallacy kommer inn i spill i webdesign på to hovedområder: interaktivitetsforutsetninger og lastforutsetninger. Vi diskuterer begge om et øyeblikk, men når du leser, vil jeg at du skal vurdere hvor lett disse skaleringsproblemer skal løses.

Som det gamle ordtaket sier, "etterpå er 20/20"... det er i stand til å forutsi fortiden fremtiden som er så darn vanskelig.

I de fleste tilfeller er løsningen av disse designproblemer ganske enkelt (legge til et paginasjonssystem, beskytte et oppsett fra store bilder ved hjelp av CSS overløp: skjult eiendom, instruerer kunder å aldri rote med navigasjonssystemet, etc.). Alle disse oppgaver er enkle å gjøre ... det identifiserer disse problemene før de skjer, noe som krever nøye gjennomtenkning og forberedelse.

Ok, la oss dykke inn i de nitty gritty tingene:

Interaksjonsforutsetninger

Interaksjonsforutsetninger oppstår når du lager et design basert på en antagelse at brukerens oppførsel vil være den samme på ulike nivåer.

Det klassiske eksempelet er en brannfluktplan: En generell brannfluktplan for et lite hus er enkelt: gå ut av bygningen så fort som mulig, ring politiet. Den samme exitstrategien, når den brukes på en skyskraper kontorbygning fylt med mennesker, vil resultere i katastrofe. Problemet er ikke designet per si, det er faktumet at designen ikke har tatt hensyn til den nye skalaen.

Et Webdesign Eksempel

I webdesign kan lignende interaksjonsforutsetninger oppstå når du antar at en klient kommer til å fylle ut webdesign med innhold som du forventer at de skal.

Plasseringen, stilen og størrelsen på en navigeringslinje kan for eksempel være perfekt når en blogg bare har 4 eller 5 kategorier, men samme navigeringslinje blir nesten ubrukelig når 20 eller flere koblinger legges til:


En navigeringslinjedesign, som den er ment å bli brukt.
Samme navigeringslinje, denne gangen med 20 eller så koblinger, noe som gjør det vanskelig å lese eller bruke.

I dette tilfellet er løsningen ganske enkel: instruer klienten som bruker nettstedet for å holde hovednavigasjonslinkene begrenset til en håndfull (eller bruk en rullegardinmeny for flere lenker).

Identifisere interaksjonsforutsetninger

Å identifisere samspillingsforutsetninger er ikke rakettvitenskap, men det krever en slags fleksibel tenkning som står for ulike muligheter. Når det gjelder webdesign, dersom du designer et element under forutsetning om at det bare vil bli brukt på en enkelt måte (enten av en bruker eller den som skriver inn innholdet et år etter at du forlater prosjektet), er det en veldig god sjanse for at elementet vil fungere når det brukes på en måte utenfor det du ment det for.

Her er bare noen få eksempler hvor enkle samspillingsforutsetninger blir gjort ... dette er ikke alle av dem på noen måte, men det bør gi deg en god ide om hvordan dette virker:

  • Bilder - Tenk deg at du har designet et nettsted som bruker alle 200px med 200px bilder. Klienten legger senere et 400px ved 100px bilde, som bryter oppsettet.
  • Navigasjonsmenyer - Du designer et nettsted med et innovativt "docked" menysystem som krever at en bruker skal svinge over et bestemt område for å se menyen ... men du forsømmer å fortelle brukerne hvordan du gjør dette.
  • sidefelt - Du designer et sidebjelke som er akkurat 300px bredt, men klienten legger til bilder som er 500px brede, bryter stylingen.
  • oppsett - Du designer et nettsted som er avhengig av flere kolonneoppsett, men klienten vil senere bruke et layout som bruker full bredde (uten sidebjelke).

De fleste av disse problemene bør være enkle å fikse ... bare noen få ekstra kodelinjer eller et enkelt pedagogisk møte med en klient kan forhindre at noen problemer oppstår noen gang ... men det jeg vil at du skal ta bort fra dette er at Du må alltid forutse scenarier der designene dine brukes på måter du ikke opprinnelig planlegger å bruke.

Legg inn antagelser

Lastforutsetninger er litt annerledes - de oppstår når en designer antar at stressene på et gitt system vil være det samme på alle skalaer. Lastforutsetninger skjer mye på utviklingssiden av et webdesign prosjekt; Å gjøre forutsetninger om at et bilde tungt webdesign som fungerer når tusen mennesker besøker nettstedet en måned, kan bli blåst ut av vannet når mer enn en million mennesker besøker om dagen og legger ekstra stress på serveren. Det samme prinsippet kan gjelde for den faktiske visuelle utformingen av et nettsted også ...

For eksempel designer du et bildegalleri-oppsett som er utrolig enkelt å bla gjennom når det bare er 10 bilder ... men ved å ikke gi et riktig "paginering" -system blir hele oppsettet vanskelig å bla gjennom når mer enn 25 bilder legges til.


Et paginasjonssystem er kanskje et av de enkleste eksemplene på å tilpasse et design for å ta hensyn til skalaen.

Løsningen er ganske enkel i dette tilfellet: Ved å legge til et enkelt paginasjonssystem, kan samme design gjøres "skalerbar" med noen få små tweaks. Et nummerert paginasjonssystem er lagt til, og whallah!, Ditt design kan brukes igjen ... i en hvilken som helst rimelig skala. Du ville bare støte på skaleringsproblemet igjen hvis ditt bibliotek med bilder overgikk rimelig grenser for paginasjonssystemet ... på hvilket tidspunkt må du vurdere et mer raffinert merkings- og søkesystem.

Identifisere Load Assumptions

Identifisere belastningsforutsetninger er ganske enkelt også: Bare tenk at noen bestemt del av ditt design blir strukket til det er grenser når det gjelder innhold ... Planlegg deretter. Løsningen kan være et design eller UI-tweak (som paginasjonseksemplet), men det kan også være så enkelt som å instruere brukerne hva grensene er. Hvis designet ditt bare tillater 100 bilder, og det er ingenting du kan gjøre med det, bare fortelle brukerne det foran. Se hvor enkelt det er?

Skjermstørrelse antagelser

Den siste typen antagelse som jeg vil beskrive, er en som de fleste av dere er kjent med: skjermstørrelsesantagelser. Dette emnet alene er verdig til sitt eget blogginnlegg (mer i neste uke), så jeg prøver å holde denne korte:

Hvis du designer et nettsted og aldri stopper for et øyeblikk for å teste ut hvordan det ser ut i en annen oppløsning, stopp akkurat nå og gjør det!

Langt borte er de dagene hvor 75% av internett surfere surfer på en 1024x768 skjerm. I dag surfer folk på nettet på skjermbilder av alle former og størrelser ... fra små iPhone-skjermer til massive HD-fjernsyn.

Utforming av et nettsted under forutsetning av at alle der ute har en viss skjermstørrelse, er ikke bare kortsiktig, det underminerer kjernenes brukbarhet av nettstedet ditt. Selv om det ikke er fornuftig å skape et annet nettsted for hver annen type enhet der ute, er det absolutt verdt å ta en time eller to for minst å vurdere hvordan nettstedet ditt vil gå på forskjellige skjermtyper og -oppløsninger.

Å finne bare noen få tilpasninger du kan gjøre i løpet av designfasen på et nettsted, vil spare deg for mye sorg i det lange løp. Her er bare noen få raske tips for å unngå skjermstørrelsesforutsetninger:

  • Ikke stole på komplekse menysystemer som krever at musen skal brukes nøyaktig. Hint: 8pt skrift er ikke finger-vennlig.
  • Overvei å legge til et mobilvennlig tilbakebetalingstema til et WordPress-nettsted.
  • Unngå å designe "fullskjerm" -nettsteder (nettsteder hvor kjerneinnholdet er mer enn 960px bredt), med mindre nettstedet kan skala seg ned for mindre skjermer.
  • Ikke bruk Flash for kjernevirksomhet, med mindre du har en forbannet god grunn (eller en HTML-fallback-metode)
  • Når du er i tvil, gjør hele din kroppstekst 2 poeng større ... det vil ikke skade lesbarheten på vanlige skjermer, og mobilbrukere vil faktisk kunne lese teksten din.

Unngå Scaling Fallacy

Ingen kamp av kamp overlever alltid kontakt med fienden.

Den eneste virkelige måten å unngå skaleringsfeil er å stadig være på utkikk etter det. Gjennom hele prosessprosessen bør du være oppmerksom på din egen tendens til å gjøre slike antagelser.

Ikke bare design under forutsetningen om at alt du lager i Photoshop eller fyrverkeri vil forbli det samme når nettstedet blir lansert. Med mindre du er på et prosjekt der du skal være den eneste enheten som designer og legger til innhold på nettstedet, er det stor sjanse for at noen, på et eller annet tidspunkt, vil legge til innhold som vil bryte dine forventninger til hvordan designet var ment å bli brukt.

På samme måte må du unngå å designe ting som bare virker i en svært begrenset skala. Som vi alle vet kan det være en smertefull, vanskelig og kostbar prosess å lage tilpasninger og revideringer til et webdesign ... å designe under feilfeilen, gjør disse problemene mange ganger, ettersom du blir bedt om å revidere de gamle designene dine så ofte som folks adferd faller utenfor dine egne forutsetninger.

Konklusjon

Det er det for nå! Jeg håper alle finner dette innlegget nyttig ... Scaling Fallacy er en av de gåtefulle prinsippene som er lett å forklare abstrakt, men vanskelig å spikre ned i betongdesign ... så det krever mye øvelse og konstant årvåkenhet for å unngå de store fallgruvene som kommer fra forutsetningene som vi diskuterte.

Hvis du likte innlegget eller har noe å legge til, legg det under i kommentarene. Jubel!