A quale risoluzione progettare l’interfaccia di un sito web?

Questa domanda che ci trasciniamo fin dalla fine degli anni 90 ha avuto un’evoluzione nella risposta seguendo il mondo degli schermi disponibili su computer desktop e notebook.  Negli ultimi anni la risposta che si è man mano affermata è quella di una progettazione che sfrutti, al minimo, sino a 970px in orizzontale e almeno 550px in verticale all’interno del punto di vista dell’utente (senza scrollare).
Specifico al minimo perchè la tendenza i è sempre stata quella di un’aumento della risoluzione degli schermi e dunque dello spazio primario disponibile per progettare le nostre interfacce.
I designer di interfacce oggi cercano di sfruttare al meglio questo spazio sapendo che non è per forza necessario costringere tutta l’interfaccia all’interno del punto di vista primario dell’utente, ma che è comunque utile per avere una maggiore efficacia della stessa (a pari livelli di leggibilità e ordine nell’interfaccia).
Negli ultimi giorni però ho pensato se questa “verità progettuale” sia ancora vera e dando un occhiata alle statistiche di un po’ di grandi portali su cui ho la possibilità di operare mi sono reso conto che non è poi così vera.
Nell’ultimo anno con la grande diffusione dei netbook e con l’esplosione del mondo mobile (in particolare degli smarphone con full browsing) si sono largamente diffuse delle risoluzioni particolari che inficiano i precedenti ragionamenti.
In particolare ho notato una diffusione marginale (5-8%) di schermi a 800 x 600 px e una discreta diffusione (10-15%) di schermi a 1024 x 600 px, che dovrebbero essere proprio i netbook con i loro schermi tra i 10″ e i 12″ pollici di dimensione.
Dunque oggi come progettisti dovremmo tenere in considerazione questa ulteriore (de)evoluzione del mercato che di fatto, se si consoliderà nel tempo, ci offrirà un’area visibile fissa di circa 440px sull’asse verticale.
Se poi integriamo questa riflessione con la vecchia teoria (a più riprese sconfessata e riconfermata) che sui siti a sfondo informativo l’utenza effettua da 0 a 2,5 scroll in media (e l’efficacia d’uso dell’informazione è distribuita proporzionalmente sull’altezza) scopriamo che abbiamo perso una superficie utile di circa 275px in altezza (1100px contro 1375px in media).
Chiaramente queste riflessioni si basano al momento sull’ipotesi (ancora da verificare) che il comportamento degli utenti su schermi “grandi” sia il medesimo di quello che hanno su quelli più piccoli, ma se si dovesse rivelare vera alcune regole base della progettazione di interfacce dovranno essere adeguate alla nuova realtà.
Voi cosa ne pensate? Le statistiche dei vostri siti confermano queste risoluzioni? Avete dati per confermare o sconfessare questa ipotesi? :)

Questa domanda che ci trasciniamo fin dalla fine degli anni 90 ha avuto un’evoluzione nella risposta seguendo il mondo degli schermi disponibili su computer desktop e notebook.  Negli ultimi anni la risposta che si è man mano affermata è quella di una progettazione che sfrutti, al minimo, sino a 970px in orizzontale e almeno 550px in verticale all’interno del punto di vista dell’utente (senza scrollare).

Specifico al minimo perchè la tendenza i è sempre stata quella di un’aumento della risoluzione degli schermi e dunque dello spazio primario disponibile per progettare le nostre interfacce.

I designer di interfacce oggi cercano di sfruttare al meglio questo spazio sapendo che non è per forza necessario costringere tutta l’interfaccia all’interno del punto di vista primario dell’utente, ma che è comunque utile per avere una maggiore efficacia della stessa (a pari livelli di leggibilità e ordine nell’interfaccia).

Negli ultimi giorni però ho pensato se questa “verità progettuale” sia ancora vera e dando un occhiata alle statistiche di un po’ di grandi portali su cui ho la possibilità di operare mi sono reso conto che non è poi così vera.

Nell’ultimo anno con la grande diffusione dei netbook e con l’esplosione del mondo mobile (in particolare degli smarphone con full browsing) si sono largamente diffuse delle risoluzioni particolari che inficiano i precedenti ragionamenti.

In particolare ho notato una diffusione marginale (5-8%) di schermi a 800 x 600 px e una discreta diffusione (10-15%) di schermi a 1024 x 600 px, che dovrebbero essere proprio i netbook con i loro schermi tra i 10″ e i 12″ pollici di dimensione.

Dunque oggi come progettisti dovremmo tenere in considerazione questa ulteriore (de)evoluzione del mercato che di fatto, se si consoliderà nel tempo, ci offrirà un’area visibile fissa di circa 440px sull’asse verticale.

Se poi integriamo questa riflessione con la vecchia teoria (a più riprese sconfessata e riconfermata) che sui siti a sfondo informativo l’utenza effettua da 0 a 2,5 scroll in media (e l’efficacia d’uso dell’informazione è distribuita proporzionalmente sull’altezza) scopriamo che abbiamo perso una superficie utile di circa 275px in altezza (1100px contro 1375px in media).

Chiaramente queste riflessioni si basano al momento sull’ipotesi (ancora da verificare) che il comportamento degli utenti su schermi “grandi” sia il medesimo di quello che hanno su quelli più piccoli, ma se si dovesse rivelare vera alcune regole base della progettazione di interfacce dovranno essere adeguate alla nuova realtà.

Voi cosa ne pensate? Le statistiche dei vostri siti confermano queste risoluzioni? Avete dati per confermare o sconfessare questa ipotesi? :)

  1. Credo che il problema della risoluzione dello schermo sia un ormai superato, non nel senso che non dobbiamo più tenerne conto come progettisti, ma nel senso che non è più di fatto un “problema”. Mi spiego.

    La mia impressione (perché sempre di impressioni e di statistiche parliamo) è che di fatto quelli che una volta erano utenti con monitor piccoli e poca esperienza di interfacce liquide (come è quella di un browser, a differenza delle applicazioni client tradizionali a cui erano abituati) oggi siano perlopiù utenti abituati a navigare su molti siti (magari con più tab aperte) completamente difformi per dimensioni, proporzioni, posizione degli elementi di navigazione e struttura informativa, ecc.
    Per loro è naturale fare lo scroll o il resize della finestra del browser per adattarla alle dimensioni “naturali” del sito o alle loro preferenze “visuali” (se ci pensi e ci fai caso, sono convinto che anche tu lo fai in modo ormai inconscio e istintivo, come probabilmente appunto anche gli utenti, di ridimensionare il browser in funzione del sito web che stai visitando).

    Quindi non dobbiamo più progettare “per una risoluzione” ma “per nessuna risoluzione” (you know… “perdere il controllo”!) il che non vuol dire layout completamente liquidi (un’illusione che ha fatto breccia un po’ di tempo fa, ma con scarso successo viste le complessità introdotte da quel tipo di necessità e il rapporto costi/benefici di una tale soluzione) ma definizione di un layout visuale “tipico” (per esempio i 970px di cui sopra) e poi lasciare che siano gli utenti ad “adattarsi” all’interfaccia (utenti “adattativi”, you know…)

    So che ti sembrerà strano pensare di rinunciare a controllare un elemento progettuale così importante, ma tutto sommato non lo abbiamo mai avuto. E tantomeno lo avremo ora: potendo essere ruotato (a seconda del contesto d’uso o dello sghiribizzo dell’utente nel momento in cui lo usa) la risoluzione dell’iPad è1024×768 oppure 768×1024? Entrambe, evidentemente. Quindi chi si adatta a cosa? E soprattutto: chi controlla la cosa? Io o l’utente?

    PS: sicuramente non ti sarà sfuggito, ma visto che non lo hai linkato lo faccio io:
    http://browsersize.googlelabs.com/

  2. Non mi occupo più di progettazione (vera e propria) di siti web da tempo, tuttavia mi piace pensare, da dietro al mio iMac 27 con 2500×1900 di risoluzione, che i siti si possano adattare agli utenti e, soprattutto, che se sto creando un sito per un certo target di visitatori (utenti Mac, per esempio) possa sfruttare le risoluzioni stellari dei loro monitor.

  3. Il fatto è che non esistono più “gli user”, non esistono più “i target”.

    Siamo abituati a pensarlo, ma di fatto sono solo una costruzione mentale che, se una volta poteva avere un qualche fondamento logico/sociologico/scientifico, oggi non ha più motivo d’essere. Anzi diventa uno strano constraint a cui ci sottoponiamo solo perché siamo abituati a farlo da tempo immemore, ma senza averlo più messo in discussione.

    Il tuo “user stellare” fra tre mesi avrà in mano un iPad, verrà sul tuo sito e… cosa accadrà? Sarà uno user diverso solo perché la risoluzione del suo device è diversa? Siamo ormai in una condizione in cui i modelli di user – di utenti – sono ogni giorno più liquidi, ogni giorno più sfuggenti, ogni giorno hanno contorni e confini sempre più labili. E loro ci si trovano bene in questa “liquidità”, in questo essere uno, nessuno e centomila contemporaneamente: vengono sul tuo sito e sono utenti “business”, dopo un minuto vanno su facebok e diventano utenti “cazzari” e dopo un altro minuto leggono i messaggi degli amici su Gmail e diventano utenti “domestici”… ma in fondo sono la stessa *persona* con gli stessi modelli mentali e gli stessi meccanismi di approccio ad una interfaccia. Sono loro che si adattano alle interfacce (hanno imparato a farlo, l’esperienza acquisita in questo senso ha un ruolo chiave) e quindi pensare di mettere in piedi un meccanismo complesso e costoso (quale quello di gestire diverse risoluzioni con diversi layout e diverse dimensioni degli oggetti nelle pagine) mi sembra un overhead inutile, per risolvere un problema che probabilmente solo noi ci poniamo…

  4. Cristiano è indubbio che il progetto nel suo complesso debba essere concepito con una certa “liquidità” che ne permetta l’adattamento a qualunque risoluzione. Però è anche un dato che certe aree portano intrinsecamente una maggiore efficacia nelle attività di conversione dell’utente e dunque non pensi che comunque, nell’attività di disegnare una gerarchia nell’interfaccia, dobbiamo tenere in considerazione gli aspetti che ho citato nel post ?

  5. @Luca: si, ma gerarchia vuol dire (semplifico, eh!) “in che ordine metto le cose” non automaticamente anche quanti pixel devono occupare verticalmente.

    Ovvio che se devo disegnare una pagina o un’interfaccia, tengo conto di ciò che sta sopra e ciò che sta sotto il fantomatico “browser fold” (media statistica?) ma non sacrifico leggibilità e pulizia dell’impaginazione (leggi: trovabilità dei contenuti) solo per mettere tutto quello che riesco sopra il “fold”. Perdo magari in visibilità immediata, ma guadagno in organizzazione dei contenuti e in “bellezza”! E Dio solo sa di quanta bellezza abbiamo bisogno oggi…

    PS: anche gli amici di Boxes & Arrows dicono più o meno la stessa cosa: “Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.” ( http://www.boxesandarrows.com/view/blasting-the-myth-of )

  6. @Luca: avevo scritto un commento, prima, ma mi sa che è andato perso in qualche post… ci riprovo. Nel caso fosse in moderazione, cancella questo e tieni quello precedente.

    Disegnare la gerarchia vuol dire decidere (semplificando) “in che ordine vanno le cose”, non lo spazio verticale che occupano. Non sacrificherei leggibilità e pulizia formale dell’interfaccia per mettere quanto più riesco “above the fold”. Anche gli amici di Boxes and Arrows la pensano così: “Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.” ( http://www.boxesandarrows.com/view/blasting-the-myth-of )

  7. Proprio ieri mi trovavo a casa dei miei genitori e ho visto mia madre provare a interfacciarsi con un sito web dal suo nuovo mini portatile, ci ha messo 5 minuti a capire che doveva scrollare la pagina per trovare il pulsante submit di un form che si trovava a 50 pixel a sud del cursore… sicuramente mia madre non rispecchia l’utente medio ma sicuramente rendere le cose più facili possibili ai nostri “clienti” non è cosa da sottovalutare.

  8. No Jacopo tua madre è l’utente tipo, come mio padre, che ha masticato pane e bit dal 1968 e oggi davanti a una pagina Web fa gli stessi errori di tua madre.
    La conclusione è che bisogna contare anche in verticale.
    Il problema è al solito che se metti un pulsante di invio sopra il form, poi tutti cliccano senza riempire il campo dati, ci puoi scommettere!

    M.

  9. Interessante post su questo tema:
    http://iampaddy.com/lifebelow600/

  10. Pingback: Riflessioni sul design per iPad | Luca Mascaro dot info

  11. Pingback: Riflessioni sul design per iPad | Mikazuchi / Fashion Lifestyle