The Scaling Fallacy and Web Design

Simpel gezegd, de schalwarewaarschijnlijkheid is het fenomeen waarbij mensen ten onrechte aannemen dat iets dat op één grootte werkt ook op een andere grootte zal werken. In dit artikel gaan we bespreken hoe deze misvatting in de echte fysieke wereld om de hoek komt kijken en leggen we u uit hoe u de lessen kunt toepassen op uw eigen webontwerpen.

The Scaling Fallacy


Ugh, alsof een gigantische 50 voet lange schorpioen zelfs zou kunnen bewegen, laat staan ​​een gevecht aangaan met een demi-god.

Ik was onlangs aan het kijken naar de remake van de film Titanenstrijd toen dit oude ontwerpprincipe in me opkwam. In een vroege climaxscene gaan gigantische schorpioenen door met de held van de film aan te vallen in een epische strijd om de dood. De schorpioenen, geschaald tot gigantische proporties, waren lenig en dodelijk zoals je zou verwachten als je met zo'n geduchte vijand omgaat ...

De kracht van digitale speciale effecten maakt het tegenwoordig heel goed mogelijk dat een dergelijk opgeschaald monstruositeit kan optreden gezien de juiste afstemming van Zeus en de Groeistraal van Schat, ik heb de kinderen opgeblazen (nog zo'n geweldig voorbeeld van waarom wetenschap en Hollywood nooit baby's zouden moeten maken). De realiteit van een gigantisch opgeschaald monster is echter fysiek onmogelijk.

Hoewel er veel wordt gezegd over kleine insecten die enorme gewichten kunnen tillen in vergelijking met hun relatieve lichaamsgrootte, werkt de pure realiteit van diezelfde kracht die wordt overgebracht naar een supergrote versie van datzelfde insect, gewoon niet in de fysieke wereld..

Een kleine mier kan 50x zijn gewicht opheffen, maar dat betekent niet dat een enorme mier van 1.000 pond 50.000 pond zou kunnen tillen. De effecten van de zwaartekracht op een klein insect zijn vrijwel onbestaand, maar de zwaartekracht wordt een zeer reële kracht zodra de grootte is opgeschaald. Een mier van 1000 pond zou het moeilijk hebben om 's ochtends gewoon uit bed te rollen.

De schaalverwaarschuwing werkt niet alleen om kleine dingen te groot te maken - een enorme berg kan door duizend regen en sneeuwstormen heen staan ​​... maar een kleine heuvel van vuil zal worden weggespoeld door de zachtste bries.

Je snapt het ... wat op één maat werkt, werkt niet altijd wanneer het wordt geschrapt buiten de oorspronkelijke ontwerpintenties. Het ontwerp, de functie en de bruikbaarheid van vrijwel alles in de wereld zijn op schaal aan elkaar verbonden. De denkfout doet zich voor wanneer een ontwerper aanneemt dat bruikbaarheid behouden blijft wanneer een ontwerp wordt opgeschaald of neerwaarts wordt aangepast.

Dit toepassen op Web Design

The Scaling Fallacy komt in het spel in webontwerp op twee belangrijke gebieden: aannames over interactiviteit en laad aannames. We zullen beide in een moment bespreken, maar terwijl je leest, wil ik dat je bedenkt hoe gemakkelijk deze schaalproblemen opgelost kunnen worden.

Zoals het oude gezegde luidt: "Achteraf is 20/20"... het is in staat om nauwkeurig de toekomst te voorspellen die zo lastig is.

In de meeste gevallen is het oplossen van deze ontwerpproblemen vrij eenvoudig (een paginatiesysteem toevoegen, een lay-out beschermen tegen te grote afbeeldingen door CSS te gebruiken overloop verborgen eigendom, opdrachtgevers opdracht geven om nooit te knoeien met het navigatiesysteem, enz.). Al deze taken zijn gemakkelijk te doen ... het is het identificeren van deze problemen voordat ze zich voordoen, waarvoor zorgvuldig moet worden nagedacht en voorbereid.

Oké, laten we een duik nemen in de nitty gritty dingen:

Interactieveronderstellingen

Aannames van interactie optreden wanneer u een ontwerp maakt op basis van de aanname dat het gedrag van de gebruiker hetzelfde zal zijn op verschillende schaalniveau's.

Het klassieke voorbeeld is van een plan om een ​​brand te ontsnappen: een algemeen plan om een ​​klein huis te ontvluchten is eenvoudig: verlaat het gebouw zo snel mogelijk, bel de politie. Dezelfde exitstrategie, toegepast op een kantoorgebouw in een wolkenkrabber vol met mensen, zou een catastrofe tot gevolg hebben. Het probleem is niet het ontwerp, maar het feit dat het ontwerp geen rekening heeft gehouden met de nieuwe schaal.

Een voorbeeld van een webontwerp

In webontwerp kunnen soortgelijke veronderstellingen van interactiviteit optreden wanneer u ervan uitgaat dat een klant uw webontwerp gaat vullen met inhoud zoals u verwacht.

De plaatsing, stijl en grootte van een navigatiebalk kan bijvoorbeeld perfect logisch zijn als een blog slechts 4 of 5 categorieën heeft, maar dezelfde navigatiebalk wordt bijna onbruikbaar wanneer 20 of meer links worden toegevoegd:


Een navigatiebalkontwerp, zoals het bedoeld is om te worden gebruikt.
Dezelfde navigatiebalk, deze keer met zo'n 20 links, waardoor het moeilijk te lezen of te gebruiken is.

In dit geval is de oplossing vrij eenvoudig: geef de klant die de website gebruikt de opdracht om zijn belangrijkste navigatielinks beperkt te houden tot een handvol (of gebruik een vervolgkeuzemenu voor extra links).

Veranderingen in de interactie identificeren

Het identificeren van interactie-aannames is geen rocket science, maar het vereist een soort van flexibel denken dat rekening houdt met verschillende mogelijkheden. Als het gaat om webontwerp, als u een element ontwerpt in de veronderstelling dat het slechts op één manier wordt gebruikt (door een gebruiker of de persoon die de inhoud invoert een jaar nadat u het project verlaat), is de kans zeer groot dat het element werkt niet wanneer het op een andere manier wordt gebruikt dan waarvoor het is bedoeld.

Hier zijn slechts een paar voorbeelden waarbij veronderstellingen over eenvoudige interacties worden gemaakt ... dit zijn ze allemaal niet, maar het zou u een goed idee moeten geven van hoe dit werkt:

  • Afbeeldingen - Stel je voor dat je een website hebt ontworpen die alle afbeeldingen van 200px bij 200px gebruikt. De client voegt later een afbeelding van 400 x 100 pixels toe, waardoor de lay-out wordt verbroken.
  • Navigatiemenu's - U ontwerpt een site met een innovatief "gekoppeld" menusysteem waarbij een gebruiker moet zweven boven een bepaald gebied om het menu te zien ... maar u verzuimt de gebruikers te vertellen hoe dit te doen.
  • sidebars - Je ontwerpt een zijbalk die precies 300 px breed is, maar de klant voegt afbeeldingen toe met een breedte van 500px, waardoor de vormgeving wordt verbroken.
  • lay-outs - U ontwerpt een site die sterk afhankelijk is van een lay-out met meerdere kolommen, maar de klant wil later een lay-out gebruiken die de volledige breedte gebruikt (zonder zijbalk).

De meeste van deze problemen zouden eenvoudig te verhelpen moeten zijn ... slechts een paar extra coderegels of een eenvoudige educatieve vergadering met een klant kunnen voorkomen dat er ooit problemen ontstaan ​​... maar wat ik wil dat u hiervan weghaalt, is dat u moet altijd anticiperen op scenario's waarbij uw ontwerpen worden gebruikt op manieren die u niet van plan bent ze te gebruiken.

Laad veronderstellingen

Belastingsaannames zijn een beetje anders - ze doen zich voor wanneer een ontwerper aanneemt dat de spanningen op een bepaald systeem op elke schaal hetzelfde zullen zijn. Belastingaannames gebeuren veel aan de ontwikkelingszijde van een webontwerpproject; Veronderstellingen maken dat een zwaar webontwerp met afbeeldingen dat werkt wanneer 1.000 mensen de site een maand bezoeken, uit het water kan worden geblazen als er meer dan een miljoen mensen per dag op bezoek zijn en de server extra belasten. Hetzelfde principe kan ook van toepassing zijn op het daadwerkelijke visuele ontwerp van een site ...

U ontwerpt bijvoorbeeld een lay-out van een afbeeldingsgalerij die ongelooflijk gemakkelijk te doorbladeren is wanneer er slechts 10 afbeeldingen zijn ... maar door geen goed "paginering" -systeem te bieden, wordt de volledige lay-out moeilijk te doorbladeren wanneer meer dan 25 afbeeldingen zijn toegevoegd.


Een paginatiesysteem is misschien een van de eenvoudigste voorbeelden van het aanpassen van een ontwerp om rekening te houden met schaal.

De oplossing is in dit geval vrij eenvoudig: door een eenvoudig paginatiesysteem toe te voegen, kan hetzelfde ontwerp "schaalbaar" worden gemaakt met een paar kleine aanpassingen. Er is een genummerd paginatiesysteem toegevoegd, en whallah !, uw ontwerp is weer bruikbaar ... op elke redelijke schaal. U zou het schaalprobleem alleen opnieuw tegenkomen als uw bibliotheek met afbeeldingen de. Overschreed redelijk limieten van het paginatiesysteem ... op dat moment zou je een verfijnder tagging- en zoeksysteem moeten overwegen.

Identificatie van ladingsveronderstellingen

Het identificeren van ladingsveronderstellingen is ook vrij eenvoudig: stel je voor dat een specifiek deel van je ontwerp wordt uitgerekt tot aan zijn grenzen in termen van inhoud ... en dienovereenkomstig plannen. De oplossing kan een ontwerp of UI-tweak (zoals het pagineringvoorbeeld) zijn, maar het kan ook zo simpel zijn als gebruikers instrueren wat de limieten zijn. Als je ontwerp slechts 100 afbeeldingen toestaat en er niets is wat je eraan kunt doen, vertel het de gebruikers dan vooraf. Zie hoe eenvoudig dat is?

Veranderingen schermgrootte

Het laatste type veronderstelling dat ik zou willen beschrijven, is er een waarvan de meesten bekend zijn met: veronderstellingen van de schermgrootte. Alleen dit onderwerp is zijn eigen blog waard (meer hierover volgende week), dus ik zal proberen dit kort te houden:

Als u een website ontwerpt en nooit even stopt om te testen hoe het eruit ziet in een andere resolutie, stop dan nu en doe het!

Lang geleden zijn de dagen dat 75% van de surfers op een 1024x768-monitor browsen. Tegenwoordig surfen mensen op schermen in alle soorten en maten ... van kleine iPhone-schermen tot enorme HD-televisies.

Het ontwerpen van een website in de veronderstelling dat iedereen een bepaalde schermgrootte heeft, is niet alleen kortzichtig, maar ondermijnt ook de belangrijkste bruikbaarheid van uw site. Hoewel het misschien niet logisch is om voor elk type apparaat een andere website te maken, is het zeker de moeite waard om een ​​uur of twee te nemen om op zijn minst te overwegen hoe uw site het op verschillende schermtypen en resoluties zal doen..

Het vinden van slechts een paar aanpassingen die u kunt maken tijdens de ontwerpfase van een site, bespaart u op de lange termijn veel verdriet. Hier zijn slechts een paar snelle tips om veronderstellingen van schermgrootte te vermijden:

  • Vertrouw niet op complexe menusystemen waarvoor een muis nauwkeurig moet worden gebruikt. Hint: 8pt lettertype is niet vingervriendelijk.
  • Overweeg een mobielvriendelijk fallback-thema toe te voegen aan een WordPress-site.
  • Vermijd het ontwerpen van "volledig scherm" -sites (sites waar de kerninhoud meer dan 960px breed is) tenzij de site zichzelf kan verkleinen voor kleinere schermen.
  • Gebruik Flash niet voor kernnavigatie, tenzij u een verdomd goede reden hebt (of een HTML-fallback-methode)
  • Maak bij twijfel uw lichaamstekst 2 punten groter ... het is niet schadelijk voor de leesbaarheid op normale monitoren, en mobiele gebruikers zullen uw tekst daadwerkelijk kunnen lezen.

Het schalen van denkfouten vermijden

Geen gevechtsplan overleeft ooit het contact met de vijand.

De enige echte manier om de schaliegeurfout te vermijden, is er constant op te letten. Tijdens het ontwerpproces moet u zich bewust zijn van uw eigen neiging om dit soort aannames te maken.

Ontwerp niet alleen in de veronderstelling dat alles wat u in Photoshop of Fireworks maakt, hetzelfde blijft wanneer de website wordt gestart. Tenzij u deelneemt aan een project waarbij u de enige entiteit zult zijn die inhoud op de site ontwerpt en toevoegt, is de kans groot dat iemand op een gegeven moment inhoud toevoegt die uw verwachtingen schaadt over hoe dat ontwerp bedoeld was om worden gebruikt.

Vermijd ook het ontwerpen van dingen die alleen op een zeer beperkte schaal werken. Zoals we allemaal weten, kan het maken van aanpassingen en revisies van een webontwerp een pijnlijk, zwaar en duur proces zijn ... ontwerpen onder de schalingsfout brengt alleen maar deze problemen met zich mee, omdat u uw oude ontwerpen zo vaak opnieuw zult moeten bekijken als het gedrag van mensen daalt buiten je eigen aannames.

Conclusie

Dat is het voor nu! Ik hoop dat iedereen dit bericht nuttig vindt ... De Scaling Fallacy is een van die raadselachtige principes die gemakkelijk te verklaren is in het abstracte, maar moeilijk vast te pinnen is in concrete ontwerpen ... dus het vergt veel oefening en constante waakzaamheid om de belangrijkste valkuilen te vermijden die komen van de aannames die we hebben besproken.

Als je het bericht leuk vond of iets toe te voegen had, plaats het dan hieronder in de reacties. Proost!