The Scaling Fallacy e Web Design

In parole povere, l'errore di ridimensionamento è il fenomeno in cui le persone assumono erroneamente che qualcosa che funziona in una sola misura funzionerà anche in un'altra dimensione. In questo articolo, discuteremo di come questa fallacia entra in gioco nel mondo reale, e poi spiegheremo come applicare le lezioni ai tuoi progetti web.

The Falling Fallacy


Uffa, come se un gigantesco scorpione alto 50 piedi potesse persino muovere, per non parlare di combattere con un semidio.

Di recente stavo guardando il remake del film per Scontro tra Titani quando mi viene in mente questo vecchio principio del design. In una scena iniziale, gli scorpioni giganti continuano ad attaccare l'eroe del film in un'epica battaglia fino alla morte. Gli scorpioni, ridimensionati a proporzioni gigantesche, erano agili e letali come ci si potrebbe aspettare quando si tratta di un temibile nemico ...

Il potere degli effetti speciali digitali oggigiorno fa sembrare del tutto possibile che una mostruosità così ingrandita possa accadere dato il giusto allineamento di Zeus e del Raggio di Crescita da Tesoro, ho fatto saltare i bambini (un altro fantastico esempio del perché la scienza e Hollywood non dovrebbero mai fare figli). Tuttavia, la realtà di un gigantesco mostro in scala è fisicamente impossibile.

Mentre molto si dice che i piccoli insetti siano in grado di sollevare pesi enormi rispetto alle loro dimensioni corporee relative, la pura realtà della stessa forza che viene trasferita a una versione super-dimensionata di quello stesso insetto non funziona nel mondo fisico.

Una piccola formica potrebbe essere in grado di sollevare 50 volte il suo peso, ma ciò non significa che una formica da 1.000 libbre sarebbe in grado di sollevare 50.000 libbre. Gli effetti della gravità su un insetto minuscolo sono praticamente inesistenti, ma la gravità diventa una potenza molto reale una volta ridimensionata la dimensione. Una formica da 1.000 libbre avrebbe avuto difficoltà a rotolare giù dal letto al mattino.

L'errore del ridimensionamento non si limita a ridimensionare le piccole cose in grandi dimensioni: una massiccia montagna può sopportare mille tempeste di pioggia e neve ... ma una piccola collina di terra viene spazzata via dalla brezza più delicata.

Lo capisci ... ciò che funziona a una sola dimensione non sempre funziona quando viene scalato oltre le intenzioni originali di progettazione. Il design, la funzione e la fruibilità di qualsiasi cosa in tutto il mondo sono legati l'uno all'altro in scala. L'errore si verifica quando un progettista presuppone che l'usabilità verrà mantenuta quando un progetto viene scalato in alto o in basso.

Applicandolo al Web Design

The Scaling Fallacy entra in gioco nel web design in due aree chiave: ipotesi di interattività e caricare ipotesi. Ne discuteremo entrambi in un momento, ma mentre leggi, voglio che tu consideri quanto siano facili da risolvere questi problemi di scala.

Come dice il vecchio proverbio, "il senno di poi è 20/20"... è in grado di prevedere con precisione il futuro che è così dannatamente difficile.

Nella maggior parte dei casi, risolvere questi problemi di progettazione è abbastanza semplice (aggiungendo un sistema di impaginazione, proteggendo un layout da immagini di grandi dimensioni usando il CSS overflow: nascosto proprietà, istruendo i clienti a non scherzare mai con il sistema di navigazione, ecc.). Tutti questi compiti sono facili da fare ... sta identificando questi problemi prima che accadano che richiede un'attenta riflessione e preparazione.

Va bene, tuffiamoci nella sostanza nitida e grintosa:

Ipotesi di interazione

Ipotesi di interazione si verificano quando si crea un disegno basato sul presupposto che il comportamento dell'utente sarà lo stesso a diversi livelli di scala.

L'esempio classico è di un piano di fuga antincendio: un piano generale di fuga antincendio per una piccola casa è semplice: uscire dall'edificio il più velocemente possibile, chiamare la polizia. La stessa strategia di uscita, quando applicata a un edificio per uffici in grattacielo pieno di persone, si tradurrebbe in una catastrofe. Il problema non è il design per dire, è il fatto che il design non ha rappresentato la nuova scala.

Un esempio di web design

Nel web design, ipotesi di interattività simili possono verificarsi quando si presume che un client possa popolare il proprio web design con i contenuti come ci si aspetta da loro.

Ad esempio, il posizionamento, lo stile e le dimensioni di una barra di navigazione possono avere un senso quando un blog ha solo 4 o 5 categorie, ma la stessa barra di navigazione diventa quasi inutilizzabile quando vengono aggiunti 20 o più collegamenti:


Un design della barra di navigazione, come previsto.
La stessa barra di navigazione, questa volta con circa 20 collegamenti, che rende difficile la lettura o l'utilizzo.

In questo caso, la soluzione è abbastanza semplice: istruisci il cliente che sta usando il sito web per mantenere i suoi collegamenti di navigazione principali limitati a una manciata (o usa un menu a tendina per collegamenti aggiuntivi).

Identificazione dei presupposti di interazione

L'identificazione delle ipotesi di interazione non è scienza missilistica, ma richiede una sorta di pensiero flessibile che tiene conto di diverse possibilità. In termini di web design, se si progetta un elemento partendo dal presupposto che verrà utilizzato in un unico modo (sia dall'utente che dalla persona che inserisce il contenuto un anno dopo aver lasciato il progetto), ci sono ottime possibilità che l'elemento si guasta quando viene utilizzato in un modo diverso da quello per cui è stato progettato.

Ecco alcuni esempi in cui vengono fatte delle semplici ipotesi di interazione ... queste non sono tutte in alcun modo, ma dovrebbe darti una buona idea di come funzioni:

  • immagini - Immagina di aver progettato un sito Web che utilizza tutte le immagini di 200 px per 200 px. In seguito il client aggiunge un'immagine di 400px per 100px, che interrompe il layout.
  • Menu di navigazione - Si progetta un sito con un innovativo sistema di menu "ancorato" che richiede all'utente di passare con il mouse su una determinata area per visualizzare il menu ... ma si trascura di dire agli utenti come farlo.
  • sidebars - Disegni una barra laterale larga esattamente 300 px, ma il client aggiunge immagini larghe 500px, rompendo lo stile.
  • layout - Si progetta un sito che si basa molto sul layout a più colonne, ma in seguito il client desidera utilizzare un layout che utilizza l'intera larghezza (senza una barra laterale).

La maggior parte di questi problemi dovrebbe essere facile da risolvere ... solo poche righe di codice aggiuntive o un semplice incontro educativo con un cliente possono impedire che si verifichino problemi ... ma quello che voglio che tu togli di questo è che devi sempre prevedere gli scenari in cui i tuoi progetti vengono utilizzati in modi in cui inizialmente non li pianifichi.

Carica ipotesi

Le ipotesi di caricamento sono leggermente diverse: si verificano quando un progettista assume che le sollecitazioni su un dato sistema saranno le stesse ad ogni scala. Le ipotesi di caricamento si verificano molto sul lato dello sviluppo di un progetto di web design; Fare ipotesi sul fatto che un'immagine pesante di un web design che funziona quando 1.000 persone visitano il sito un mese può essere spazzata via dall'acqua quando più di un milione di persone visita in un giorno e pone ulteriore stress sul server. Lo stesso principio può essere applicato anche al design visivo reale di un sito ...

Ad esempio, si progetta un layout di galleria di immagini che è incredibilmente facile da consultare quando ci sono solo 10 immagini ... ma non fornendo un adeguato sistema di "impaginazione", l'intero layout diventa difficile da consultare quando vengono aggiunte più di 25 immagini.


Un sistema di impaginazione è forse uno degli esempi più semplici di modifica di un progetto per tenere conto della scala.

La soluzione è piuttosto semplice in questo caso: aggiungendo un semplice sistema di impaginazione, lo stesso design può essere reso "scalabile" con poche piccole modifiche. Viene aggiunto un sistema di impaginazione numerato e, whallah !, il tuo progetto è nuovamente utilizzabile ... in qualsiasi scala ragionevole. Si incontrerebbe di nuovo il problema di ridimensionamento solo se la libreria di immagini ha superato il ragionevole limiti del sistema di impaginazione ... a quel punto dovresti considerare un sistema di tagging e di ricerca più raffinato.

Identificazione delle ipotesi di carico

Identificare le ipotesi di carico è anche abbastanza semplice: immagina solo che una parte specifica del tuo disegno venga estesa ai suoi limiti in termini di contenuto ... quindi pianifica di conseguenza. La soluzione potrebbe essere un disegno o un twe dell'interfaccia utente (come l'esempio di impaginazione), ma potrebbe anche essere semplice come istruire gli utenti su quali sono i limiti. Se il tuo progetto consente solo di 100 immagini e non c'è nulla che tu possa fare al riguardo, devi solo informare gli utenti in anticipo. Guarda com'è semplice?

Presupposti per le dimensioni dello schermo

L'ultimo tipo di ipotesi che vorrei descrivere è quello che molti di voi hanno familiarità con le ipotesi sulla dimensione dello schermo. Questo argomento da solo è degno del proprio post sul blog (di più su questa settimana), quindi cercherò di mantenere questo breve:

Se stai progettando un sito web e non ti fermi mai per un momento per testare come appare in una risoluzione diversa, fermati subito e fallo!

Sono lontani i giorni in cui il 75% dei navigatori di internet naviga su un monitor 1024x768. Oggigiorno, le persone navigano in rete su schermi di tutte le forme e dimensioni ... dai minuscoli schermi dell'iPhone ai massicci televisori HD.

Progettare un sito Web partendo dal presupposto che tutti là fuori hanno una certa dimensione dello schermo non è solo miope, sta minando la fruibilità principale del tuo sito. Anche se potrebbe non avere senso creare un sito Web diverso per ogni diverso tipo di dispositivo là fuori, vale certamente la pena di dedicare un'ora o due almeno a considerare il modo in cui il tuo sito andrà bene su diversi tipi di schermo e risoluzioni.

Trovare pochi aggiustamenti che puoi fare durante la fase di progettazione di un sito ti farà risparmiare un sacco di dolore a lungo termine. Ecco alcuni suggerimenti rapidi per evitare ipotesi sulla dimensione dello schermo:

  • Non fare affidamento su sistemi di menu complessi che richiedono un mouse per l'uso accurato. Suggerimento: il font 8pt non è adatto alle dita.
  • Prendi in considerazione l'aggiunta di un tema di fallback ottimizzato per dispositivi mobili a un sito WordPress.
  • Evita di progettare siti "a schermo intero" (siti in cui il contenuto principale occupa più di 960 pixel) a meno che il sito non possa ridimensionarsi per schermi più piccoli.
  • Non utilizzare Flash per la navigazione di base, a meno che tu non abbia una buona ragione (o un metodo di fallback HTML)
  • In caso di dubbio, ingrandisci il testo del tuo corpo di 2 punti in più ... non danneggerà la leggibilità sui monitor normali e gli utenti mobili saranno in grado di leggere il tuo testo.

Evitare gli errori di scala

Nessun piano di battaglia sopravvive al contatto con il nemico.

L'unico vero modo per evitare l'errore di ridimensionamento è di essere costantemente alla ricerca di esso. Durante tutto il processo di progettazione, dovresti essere consapevole della tua tendenza a fare questo tipo di ipotesi.

Non limitarti a progettare partendo dal presupposto che tutto ciò che crei in Photoshop o Fireworks rimarrà lo stesso quando verrà lanciato il sito web. A meno che tu non sia coinvolto in un progetto in cui sarai l'unica entità che progetta e aggiunge contenuti al sito, è molto probabile che qualcuno, a un certo punto, aggiungerà contenuti che infrangeranno le tue aspettative su come questo progetto era destinato a essere usato.

Allo stesso modo, evita di progettare cose che funzionano solo su scala severamente limitata. Come tutti sappiamo, fare personalizzazioni e revisioni a un web design può essere un processo doloroso, arduo e costoso ... progettare sotto l'errore del ridimensionamento fa sì che questi problemi si moltiplichino quando ti verrà richiesto di rivisitare i tuoi vecchi progetti tutte le volte che il comportamento delle persone diminuisce al di fuori delle tue ipotesi.

Conclusione

Questo è tutto per ora! Spero che tutti trovino questo post utile ... The Scaling Fallacy è uno di quei principi enigmatici che è facile da spiegare in astratto, ma difficile da definire nei progetti concreti ... quindi ci vuole molta pratica e costante attenzione per evitare le insidie ​​più importanti che arrivano dalle ipotesi che abbiamo discusso.

Se ti è piaciuto il post o hai qualcosa da aggiungere, postalo sotto nei commenti. Saluti!