risposta-alla-domanda-sullo-sviluppo-web-bd.com

La trappola di Pinterest

Prima un po 'di contesto:

Sono stato sempre più vittima di "Pinterestization" o "Pinterest Trap" nel mio progetto. Ho la sensazione di non essere l'unico. Vedi questo estratto da Hana Schank in articolo di UX Mag sull'Anno 2013 in revisione :

"Quest'anno, abbiamo visto una tendenza che ha iniziato a prendere piede alla fine del 2012 con l'ascesa della spirale di Pinterest fuori controllo, vale a dire che una buona fetta del web ha iniziato a sembrare Pinterest, con le immagini a blocchi che sostituiscono il contenuto e la navigazione deviate al side […] Il mio sospetto è che tra qualche anno torneremo indietro e ci chiederemo perché così tante interfacce fossero un gruppo di immagini in scatole. Speriamo che questa tendenza stia per uscire. "

Sono d'accordo con lei. Lo stesso si può dire per gli onnipresenti layout "Metro".

Ma quali sono le alternative?

Sarò al sodo: sto lavorando su un sito portfolio per una grande organizzazione e probabilmente finirà per assomigliare a questo:

Mullen.com/work

Ecco il problema che continuo a incontrare su questo e altri progetti:

Questo trattamento funziona davvero bene per i contenuti visivi, specialmente con i passaparola ben fatti. L'occhio può analizzarlo rapidamente. È carino. Mette molti grandi contenuti in uno spazio limitato. Funziona bene con RWD. Più che altro, tuttavia, gli utenti sembrano VOGLIONO interagire con siti come questo. Chiedono di essere cliccati.

Ma il contenuto della pagina in questione è uguale a parti visive e non visive. Che dire di rappresentare il lavoro strategico? Esempi audio? Qualche lavoro senza evidenti risultati visivi?

Un'opzione è quella di aggiungere immagini di stock di formaggio per dare risorse visive a contenuto non visivo. Ma sembra un cop-out e funzionerebbe solo se il contenuto fosse basato sulla maggior parte delle immagini. Ma come ho detto, è 50/50. Sono un sacco di foto d'archivio scadenti ...

Possiamo pensare alle alternative all'uso delle foto scadenti qui? Quali tipi di interazioni possono trattare egualmente bene il lavoro visivo e non visivo pur rimanendo altamente analizzabile e attraente?

35
JGS

Non utilizzare immagini senza significato solo a scopo decorativo. Verranno ignorati , è disordinato, deve essere scaricato dall'utente finale, il che significa che il sito sarà più lento da caricare ... Ci sono numerosi motivi per non usare tali immagini quando non ha alcuno scopo.

Comunque penso che stai trascurando un'opzione: la tipografia. Una buona tipografia può essere bella ed è al centro di un buon design. Quindi, per i contenuti che non possono essere rappresentati con le immagini, utilizza invece una tipografia Nice. Puoi presentare tweet, testimonianze, citazioni, titoli ... se è in tipografia (e non testo salvato come immagine ma testo effettivo ), allora può essere ricercabile e letto anche da persone con tecnologie assistive.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

37
JonW

Un'altra opzione è quella di utilizzare un livello semitrasparente sopra le immagini per il testo che consente di controllare il colore e la tonalità di tutte le immagini in modo da poter avere un portfolio dall'aspetto più coerente (se lo si desidera).

The Verge utilizza molti gradienti di colore che potrebbero non essere adatti ai tuoi gusti, ma può essere un modo efficace di combinare entrambi i testi pur essendo in grado di controllare l'interfaccia utente anziché solo un assortimento di immagini disparate.

enter image description here

26
Midas

Per trovare un'alternativa che risolva i problemi con il layout Pinterest, il primo passo è identificare quale sia il problema specifico con il layout Pinterest è.

Il grande compromesso del design con il layout di pinterest e il tuo esempio è la ** mancanza di ** erirarchia **** - affidarsi interamente alle immagini in oggetti equamente ponderati per catturare l'attenzione. Questo è alla base del tuo problema con la perdita di oggetti non visivi, nonché problemi più ampi con questi layout che sembrano una discarica di contenuti.

Va bene per un sito come Pinterest che riguarda la navigazione di grandi volumi di contenuti curati dagli utenti di qualità variabile, ma per un portafoglio aziendale, probabilmente desideri qualcosa che guidi le persone attraverso una sorta di storia, messaggio o panoramica di ciò che è l'azienda.

You could aggiungi una tipografia elaborata o icone di stile del progetto sostantivo per gli oggetti non visivi, che almeno darebbe loro alcuni presenza - ma non risolverebbe il problema più profondo della mancanza di gerarchia che dà un mucchio di cose concorrenti piuttosto che un chiaro messaggio o flusso.

La prominenza relativa , utilizzando dimensionamento, posizionamento e spazi bianchi , è un modo migliore di attirare l'attenzione sul contenuto piuttosto che cercare di rendere tutto ugualmente accattivante. Quando tutto parla allo stesso volume, nulla si distingue.


Quindi il secondo passaggio sta scoprendo che "porta a casa il messaggio" e/o le risposte previste del pubblico, che il layout sarà progettato per ottenere attraverso. Di cosa si tratta dipenderà interamente dal tuo cliente.


Il terzo passaggio diventa strutturazione il contenuto intorno questo messaggio o flusso. A questo punto, pensa in astratto: non lasciarti sorprendere da dettagli precisi. Post-it su carta, non in Photoshop.

Uno strumento che ti aiuterà a tradurre quel messaggio in un layout è l'idea che ci sono essenzialmente cinque modi per raggruppare le informazioni, a volte chiamato " cinque cappelliere" :

  1. Posizione/geografia : Seme di sviluppo La homepage di == è un bell'esempio di presentazione di una società organizzando geograficamente le informazioni (leggermente contro- intuitivo però - sarebbe meglio se lo scorrimento verso il basso ti portasse al passaggio successivo nell'animazione)
  2. Ordine alfabetico (o altre convenzioni arbitrarie note): buono per ricerche di riferimento come indici
  3. Tempo : buono laddove è importante la recency o per una narrazione corretta e coinvolgente che abbia un inizio, una parte centrale e una fine, rischiosa per qualsiasi altra cosa.
  4. Categoria : estremamente flessibile - ci sono sempre diversi modi in cui le cose possono essere raggruppate.
  5. Continuum /gerarchia/scala: (ad es. Dal migliore al peggiore, dal più grande al più piccolo) Anche molto flessibile.

È un esercizio utile esaminare liste come questa pensando a come ciascuna di esse (e combinazioni) potrebbe funzionare per il cliente, quindi scegliere la combinazione migliore.


Quindi il quarto passo è la sfida progettuale aperta di capire come trasformarlo in un layout.

Potrebbe essere semplice come un layout in stile pinterest suddiviso in sezioni, con ogni sezione con un messaggio testuale che introduce un tema e una sotto-gerarchia all'interno del contenuto che va dall'esempio migliore, più chiaro, più grande e/o dall'estrema sinistra al più oscuro/esempi di nicchia più piccoli e in basso a destra.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups


La cosa fondamentale è porre queste domande in questo ordine:

  1. (primo) Qual è il problema che stai cercando di risolvere?
  2. Qual è il messaggio da comunicare?
  3. Quale struttura di informazioni comunica meglio quel messaggio?
  4. (ultimo) Come posso trasformare quella struttura in un layout di pagina?
11

Un'altra alternativa sarebbe quella di mantenere lo stesso dimensionamento di tutte le immagini/i contenuti, aggiungere imbottitura e aggiungere dettagli al di sotto di essi invece di passare il mouse. Funzionerebbe comunque bene per RWD e gli utenti potrebbero scegliere di scansionare tutte le immagini o il testo se non sono sicuri di cosa rappresentino le immagini.

enter image description here

0
Elle_Underscore

come accennato in precedenza, ci può essere un buon numero di idee per avere una soluzione per questo. Dato che questo è per il sito tipo Porto folio, preferirò optare per un approccio basato su "ROW" invece di scatole.

Microsoft.com è un buon esempio per lo stesso - http://www.Microsoft.com/en-in/default.aspx

Portfolio di alcuni modelli: http://www.ajazkhan.com/

0
Rajesh R. Nair