it-swarm-eu.dev

Come si fa a vincere la sfida della progettazione di immobili di grandi dimensioni?

Questa domanda è un po 'più soggettiva, ma spero di avere una nuova prospettiva. Sono così abituato a progettare per determinate dimensioni dello schermo (in genere 1024x768) che trovo che quella dimensione non sia un problema. Espandere le dimensioni a 1280x1024 non ti compra abbastanza spazio sullo schermo per fare una differenza apprezzabile, ma mi darà un po 'più di respiro. Fondamentalmente, ho solo espandere la mia "dimensione della griglia" e lo stesso design di base per lo schermo leggermente più piccolo funziona ancora.

Tuttavia, negli ultimi due progetti, i miei clienti utilizzavano tutti gli schermi 1080p (1920x1080) e desideravano soluzioni per utilizzare il maggior numero possibile di immobili. 1920 pixel di larghezza offrono poco meno del doppio della larghezza a cui sono abituato, e il widescreen rende alcuni dei miei vecchi approcci alla progettazione che non funzionano altrettanto bene. Il problema in cui mi imbatto è che quando viene presentato con così tanto spazio, mi trovo di fronte ad alcuni problemi importanti.

  • Quante colonne dovrei usare? Il formato largo si presta a una divisione a 3 colonne con una divisione 2: 1: 1 (ovvero la colonna di contenuto più grande delle altre due). Tuttavia, se vado con tre colonne cosa devo fare con quella colonna aggiuntiva?
  • Come faccio a utilizzare efficiente del patrimonio immobiliare dello schermo? C'è la tentazione di mettere tutto sullo schermo in una volta, ma troppe informazioni in realtà rendono l'applicazione più difficile da usare. Lo spazio bianco è importante per dare un senso a informazioni complesse, ma troppo rende i concetti correlati troppo separati.
  • Di solito lavoro con applicazioni Web con dati complessi e la visualizzazione e la presentazione sono fondamentali per dare un senso ai dati grezzi. Quando il tuo utente ha anche uno schermo di grandi dimensioni (almeno 24 "), alcune informazioni non sono visibili e devi spostare il puntatore a lunga distanza. Come puoi assicurarti che tutto ciò che è necessario rimanga all'interno dei punti caldi visivi?
  • Siti semplici come i blog in realtà funzionano meglio quando la larghezza è limitata, il che si traduce in un sacco di proprietà immobiliari sprecate. Mi chiedo se avere la casella di testo e l'anteprima del testo fianco a fianco sarebbe un grande vantaggio per l'amministratore di quel tipo di schermo? (Divisione 1: 1 a due colonne).

Per le tue risposte, so che quasi tutto nel design è "dipende". Quello che sto cercando è:

  • Principi generali che usi
  • Come è cambiato il tuo approccio al design

Sto scoprendo che devo riqualificarmi come lavorare con questo diverso formato. Ogni aumento della risoluzione che ho elaborato finora è stato di circa il 25%: da 640 a 800 (aumento del 25%), da 800 a 1024 (aumento del 28%) e da 1024 a 1280 (aumento del 25%). Tuttavia, il salto dal 1280 al 1920 è un buon aumento del 50% nello spazio - l'equivalente dal salto da 640 direttamente a 1024. Non esisteva una media grandezza comunemente usata per aiutare a imparare le lezioni più gradualmente.


Per aiutare a focalizzare un po 'la domanda, ho avuto un progetto che era in qualche modo simile a Atlassian JIRA, un sistema di gestione dei problemi. C'erano circa sei diversi tipi di record che il cliente voleva conservare, tutti potenzialmente potrebbero essere correlati tra loro. La raccolta dei dati non era il problema principale, sebbene avesse un ruolo.

Il lato più importante del problema era la creazione di un sistema che suggerisse potenziali relazioni tra i record e aiutasse gli analisti a riconoscere i modelli negli incidenti segnalati.

C'erano diversi tipi di analisti che si concentravano sui diversi settori problematici e, a causa della natura del loro tipo di lavoro esplorativo, non sapevano cosa volevano. Sapevano solo che dovevano dare un senso a molti dati, disegnare correlazioni e caratterizzare classi di problemi.


(Originariamente richiesto qui: https://softwareengineering.stackexchange.com/questions/45864/how-do-you-conquer-the-challenge-of-designing-for-large-screen-real-estate =, ma ha detto che questo potrebbe essere più appropriato)


Per la generosità : distendi un po 'la mente. La risposta pat "Rendi tutto più grande" ha un limite a quanto sia utile la risposta. Stiamo parlando di utenti che devono dare un senso a molti dati e trovare relazioni tra i record. Se semplicemente aumentassi le dimensioni di tutto ciò che sarebbero state molto limitate in ciò che potevano vedere sullo schermo, in particolare perché la verticale è così limitata.

18
Berin Loritsch

La cosa più importante mi sembra consentire viste di più livelli di dettaglio contemporaneamente e illustrare le relazioni tra le viste. Il punto in cui entra in gioco la proprietà dello schermo è quando puoi passare da un livello all'altro semplicemente guardando una parte diversa dello schermo, anziché fare clic su qualcosa.

Quindi, per prima cosa, penso che sia ottenere più livelli in una schermata, e usare anche la proprietà dello schermo sia nel mettere in relazione le parti sia nel separarle (e non renderle troppo affollate o opprimenti). Le relazioni possono essere rese visibili evidenziando gli elementi negli elenchi e disegnando le caselle sulle immagini in modo da sapere quali dettagli vengono visualizzati.

Il numero di colonne, beh, dipende davvero da quali visualizzazioni vengono visualizzate sullo schermo in quel momento. In più impostazioni visive (modifica delle immagini, viste della mappa) potrei immaginare che si tratti di un'area principale e rendere le altre colonne un po 'più larghe del solito, per rendere le cose come la vista in miniatura o i dettagli dello strumento (pensa Photoshop) meno angusti. Nei sistemi di localizzazione dei problemi, immaginavo che la sezione "dettagli" del layout a tre colonne potesse essere ulteriormente suddivisa (sia in verticale che in orizzontale) per includere elementi come i dettagli dei clienti, le risposte o problemi correlati.

Anche qualcosa da considerare è che hai più spazio. È una promozione del "rendilo più grande", ma uno che puoi davvero usare a tuo vantaggio. Con schermi più ampi, è possibile (ad esempio) visualizzare miniature riconoscibili senza allontanare altri dettagli o mettere più informazioni fianco a fianco. (Su schermi più piccoli, non potrei mai adattarmi a ciò che volevo nell'elenco delle colonne della mia app di posta, quindi vedrei solo metà dell'oggetto, o solo la prima parte del nome.)

Inoltre, quando hai più spazio sullo schermo, puoi usare più grafici e illustrazioni. Sono fastidiosi quando è necessario fare clic per accedere alle informazioni, quindi le persone preferiscono i dati solo alle immagini (è la mia esperienza). Ma se puoi avere entrambi ...

Un altro suggerimento è quello di esaminare gli argomenti relativi alla visualizzazione dei dati e al design del dashboard.

12
Inca

Il problema principale di "solo allargare tutto è blocchi di testo: saltare dalla fine della riga all'estrema destra all'inizio della riga successiva all'estrema sinistra è doloroso se non assistito visivamente.

Per la gestione dei problemi, un display a tre colonne sembra effettivamente naturale (scusate, fogbugz):

enter image description here? No I won't.

Una colonna di navigazione con collegamenti rapidi configurati dall'utente (ad es. Filtri comuni), una colonna per un elenco/albero/qualsiasi problema, che non sia sovraccaricato di colonne e dettagli per il problema selezionato o problemi selezionati.

Ciò richiederebbe un layout 1: 2: 2, per il quale 1920 sembra ancora un po 'stretto.
==> Un rapido passaggio per ridistribuire gli immobili tra l'elenco dei problemi e i dettagli dei problemi potrebbe essere utile qui.

In generale, questo layout funziona solo con uno schermo largo. Per supportare altre risoluzioni, potrebbe essere necessario offrire alcune opzioni di layout:

ok ok, layout choices

Vorrei raccomandare preparazione per quella possibilità, anche se i tuoi clienti dicono "no, tutti abbiamo grandi monitor". A volte devi fare solo con un piccolo laptop o mezzo schermo singolo.

6
peterchen

Design

Penso che devi abbandonare l'idea di una pagina lunga (verticale). Invece, pensa a il browser come un contenitore di blocchi o una tela. Su schermi di grandi dimensioni i blocchi si allineano principalmente in orizzontale, su schermi meno grandi è necessario scorrere di più. Penso che sia importante non cadere nella progettazione solo per schermi di grandi dimensioni. Come anche i piccoli schermi stanno diventando sempre più utilizzati. Invece, fallo funzionare su tutte le schermate e lascia che le informazioni scorrano/trovino a modo loro.

Mi piace come ad esempio TaskRabbit posiziona il loro video esplicativo. Lo hanno messo sopra il fold. Qui, vedo la comprensione del browser come una tela anziché come una pagina.

Gestione dell'informazione

Mi ispiro anche ad alcuni film, come le interfacce matrice , rapporto di minoranza e altri multi-touch . Ad esempio, vedi il rapporto sulle minoranze, quello schermo è molto più grande di 1920x1080 :-). Ciò che fanno è utilizzare lo zoom, consentire all'utente di sostituire gli elementi e la distanza fisica. Quest'ultimo è più difficile per l'utilizzo desktop. Ma gli altri due sono interessanti. Soprattutto se stai progettando un'interfaccia in cui le persone devono gestire e analizzare molte informazioni.

Quindi quando, come dici tu, la potenza di calcolo non può aiutarli molto nella loro analisi, penso che gli strumenti per consentire agli utenti di gestirlo da soli diventino più importanti. E quegli strumenti, ad esempio lo zoom e la sostituzione, richiedono molto spazio. (E lascia spazio bianco!)

Esempi

Alcuni schizzi approssimativi con queste idee. Sono sicuro che puoi pensare di più e di più pertinente alla tua applicazione.

Browser come contenitore, con controlli delle informazioni per l'utente: Browser as container, with information controls for the user

Oppure, raggruppa i tipi di informazioni insieme: Group types of information together

5
Lode

Un immobile con schermo più grande è un'arma a doppio taglio. Il vantaggio è che hai più spazio per mostrare agli utenti più informazioni. Ma lo svantaggio è che stai mostrando agli utenti più informazioni, il che può danneggiare l'efficienza dell'utente se le informazioni che stai mostrando agli utenti non sono rilevanti per il loro compito ed è invece lì per riempire lo spazio.

Principio 1: assicurarsi che le informazioni in tutte e tre le colonne siano direttamente correlate l'una all'altra. In altre parole, il percorso di navigazione per tutte e tre le colonne dovrebbe connettersi tra loro. Le informazioni vengono visualizzate in una colonna come risultato diretto di un'azione in un'altra colonna.

Principio 2: Naturalmente, l'inizio del percorso di navigazione dovrebbe iniziare nella colonna di sinistra. Ciò significa che la colonna di sinistra dovrebbe essere il menu principale o la schermata principale in cui gli utenti vanno per iniziare la loro attività e selezionare le loro voci principali. Una volta che ciò accade, le colonne centrale e destra dovrebbero aprirsi. La colonna centrale dovrebbe andare più in profondità e mostrare più dettagli degli elementi selezionati dalla colonna di sinistra. L'ultima e la colonna di destra dovrebbero mostrare il maggior numero di informazioni ed è l'area di lavoro principale in cui gli utenti faranno il loro compito.

Principio 3: l'ordine e le dimensioni della colonna devono essere progettati in modo da riflettere questa struttura di informazioni. Pertanto, la colonna sinistra dovrebbe essere la più sottile, quella centrale dovrebbe essere leggermente più grassa e la terza colonna dovrebbe essere obesa.

Principio 4: la colonna di destra è la colonna in cui desideri che gli utenti svolgano la maggior parte delle loro attività. Questo perché ha più spazio, contiene la maggior parte delle informazioni ed è l'ultima colonna del loro percorso di navigazione. La colonna centrale è dove si desidera mostrare un'anteprima o lo stato dell'attività che l'utente sta eseguendo. La colonna di sinistra può anche fornire indicazioni di stato, ma dovrebbero essere al livello più ampio.

Ho creato un wireframe per aiutare a illustrare meglio questo aspetto (non potrei pubblicare l'immagine qui perché non me lo permetterebbe): http://imgur.com/YbVbj?full

1
user3794

Dai un'occhiata a SmugMug per alcune idee. Il loro sito fa un ottimo lavoro di adattamento alla risoluzione orizzontale e verticale del tuo schermo. Regola il numero di miniature per pagina e le dimensioni della foto media.

Noterai anche che tende a mantenere qualcosa di simile a una divisione del 50/50 tra le miniature a sinistra e la foto di medie dimensioni a destra mentre ridimensioni la finestra. Ovviamente non stai progettando una galleria fotografica online, ma forse potresti usare un layout simile.

1
Steve Wortham

Potresti dare un'occhiata alla pagina Web "Designing for (Google) TV" di Google - un insieme generale di regole per le pagine web destinate a schermi a 720p o 1080p.

Contiene tutto il gnaff generale come "assicurati di poter usare le frecce per la navigazione", ma i punti rilevanti sono cose come "Non usare caratteri di dimensioni inferiori a 18 px per schermi a 1080p".

Penso che in sostanza stia cercando di dire che dovresti progettarlo esattamente allo stesso modo, ma utilizzare elementi più grandi e dimensioni dei caratteri. Troppe informazioni sullo schermo sembrano schifose e gli schermi HD/ad alta risoluzione necessitano sempre di caratteri più grandi.

0
tonyhb

Ok, ecco un principio di uno studio del 1996:

  1. Quando un utente passa dal lavorare con 1 schermo a 2 schermi, la produttività salta del 40% (nei programmatori). Quindi, questo è un argomento potente per più pixel. Ora, perché la produttività salta? perché sprecano meno memoria e tempo a scorrere tra le schede o le app (meno cambio di contesto ). Cambio di contesto costoso. Quindi, se vuoi fare in modo che usi della tua nuova 'terra', usa le nuove aree di pixel che ti sono state date per ridurre la frequenza/rischio/probabilità di "contesto switching". Ciò potrebbe significare cose controintuitive come, ridimensionare la finestra dell'app in modo che altre app in genere funzionino perfettamente nella stessa schermata. Puoi vedere un esempio di questo con GMAIL, qualche anno fa l'editor di posta elettronica di composizione di Gmail, è diventato più piccolo, non più grande.

  2. rendere la tua app più amichevole con le altre app (questa è derivata da 1). Guarda come la tua app può ottimizzare l'intero non solo la tua app

  3. spero che aiuti.

PIC: con l'esplosione delle dimensioni dello schermo, gmail composer ridimensionata ... GMAIL COMPOSER DOWNSIZED SINCE 2015

0
Jose Berengueres

Jira (lo sto usando anche io) risolve questa domanda semplicemente ingrandendo tutti gli elementi, quindi se ci sono due colonne gli elementi delle colonne diventano semplicemente più ampi, con risoluzioni dello schermo diverse. Penso che questa non sia la soluzione migliore, perché su uno schermo davvero ampio sarebbe davvero strano ...

Quindi, se fossi in te, proverei a creare un'interfaccia che è allineata al centro e ha anche uno spazio bianco sul lato sinistro e destro:

In questo modo puoi giocare con uno spazio bianco:

  • 1680: il 75% (1260) dello schermo è contenuto, il 25% è uno spazio bianco sui due lati
  • 1920: la (1440) stessa scala può essere applicata - 75% al ​​25%

enter image description here

Con questa soulution i tuoi contenuti aumenterebbero solo del 14% circa e potresti avere lo spazio bianco su entrambi i lati. Tutti gli elementi di contenuto nel mezzo dovrebbero diventare più grandi (con il 14%) per soddisfare i requisiti di visibilità, ma lo spazio bianco e l'allineamento centrale migliorerebbero notevolmente ux!

  • la tua UI non sarebbe troppo affollata
  • non è necessario progettare l'intera UI per risoluzioni dello schermo diverse
  • dovrai applicare un moltiplicatore x1.14

Sto usando 1680 * 1050 - ma non faccio eccezione per le applicazioni browser per riempire l'intero schermo, perché non ci sono abituato ... tutti i siti Web e quasi tutto è ottimizzato per una risoluzione inferiore. E ho davvero bisogno di spazi bianchi.

Jira non ha un vero spazio bianco, nel 1680, tutti gli elementi sembrano troppo grandi, con solo pochi contenuti. Con l'applicazione dello spazio bianco l'intera interfaccia sarebbe più facile da usare!

0
Roland Pokornyik

Principi generali che usi

  • Raggruppare, raggruppare informazioni, rendere gli elementi secondari meno importanti nel design, ad esempio: la riga del menu nella parte superiore di questa pagina ha uno sfondo scuro. Un altro esempio è questo sito che utilizza lo schermo intero con pannelli su ciascun lato per memorizzare informazioni secondarie e navigazione.

  • Cerca modi per appiattire la struttura delle informazioni per ridurre il numero di clic per accedere a compiti comuni


Come posso utilizzare in modo efficiente il settore immobiliare dello schermo?

È possibile utilizzare una barra degli strumenti agganciabile con strumenti per l'analisi. Potresti averne uno in più che potrebbe essere selezionato durante l'impostazione dei dati/analisi e quindi nascosto.


Come si fa a garantire che tutto ciò che è necessario rimanga all'interno dei punti caldi visivi?

Potresti avere un display molto grande e mostrare una sezione in una porta di visualizzazione che gli utenti possono navigare, ad esempio: google maps

0
Leah