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

Come avviare un popup informativo aggiuntivo da un set di celle in una griglia

Ho una griglia con una grande quantità di righe e colonne. Le colonne sono raggruppate logicamente in gruppi di 5 tutti relativi a un elemento di dati (le lettere nell'esempio seguente).

Header | Property 1 (A) | ... | Property 5 (A) | Property 1 (B) | ... | Property 5 (B) | ...
Row 1  |      1A.1      | ... |      5A.1      |      1B.1      | ... |      5B.1      | ...
Row 2  |      1A.2      | ... |      5A.2      |      1B.2      | ... |      5B.2      | ...

Sto cercando di pensare a un modo per lanciare un popup con alcune informazioni aggiuntive su quell'elemento di dati (la lettera nell'esempio sopra), ma non sono sicuro di come/dove dovrebbe essere lanciato il popup.

Posizionare un'icona nell'intestazione non è un'opzione perché non saremo in grado di dire per quale riga l'utente vorrebbe aprirla. Anche posizionare un'icona nella riga non è un'opzione perché non sapremo per quale raggruppamento in quella riga l'utente vorrebbe aprirla.

Le opzioni che ho escogitato finora, che non sono entrambe eccezionali, sono:

  • Quando un utente fa clic in una cella, mostra un piccolo pulsante a comparsa nelle vicinanze in cui può fare clic per aprire il popup per il raggruppamento di righe e colonne in cui si trova la cella. Ciò ha problemi di usabilità e rilevabilità.
  • Aggiungendo una nuova colonna per ciascun raggruppamento con un'icona su cui l'utente fa clic per aprire il popup per quel raggruppamento di righe e colonne. Il problema con questo approccio è che l'utente perde proprietà immobiliari (in una griglia già occupata) per questa colonna e l'icona che si ripete tutta la colonna ogni 5 colonne sembrerà strana.

Esiste un modo migliore per l'utente di accedere al popup desiderato?

3
jbabey

Se è molto probabile che l'utente desideri vedere i dettagli di maggiori informazioni, potrebbe essere utile passare a un layout dell'interfaccia utente master-figlio fisso, simile a quello illustrato.

Ciò fornisce convenienza e posizionamento fisso per i dati.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Nota

  • l'area dei dettagli potrebbe essere posizionata sul lato destro dello schermo, soprattutto se si tratta di un dispositivo widescreen o di orientamento orizzontale.
  • Le dimensioni dell'area dei dettagli possono variare in base alle informazioni visualizzate. Può essere piccolo se non vengono visualizzati dati.
6
Jason A.

Ecco un altro approccio:

Lavoro nell'e-commerce e una possibile soluzione alle tue informazioni aggiuntive in un problema di rete potrebbe essere risolta con il modo in cui visualizziamo più informazioni sul nostro prodotto nella pagina di elenco dei prodotti.

Se pensi a una griglia di prodotti come a una cella nel tuo foglio di calcolo. Per visualizzare ulteriori informazioni su un prodotto (in questo caso la tua cella), è possibile che un riquadro si apra sotto la cella per visualizzare le informazioni aggiuntive. Ecco un esempio di Google Shopping (vedi la demo live qui ):

enter image description here

Questa soluzione è migliore della soluzione pop-up perché

  1. nulla copre la cella originale
  2. le informazioni aggiuntive sono sulla pagina e l'utente può fare riferimento ad altre celle senza chiudere un pop-up
  3. nessun pop-up significa meno clic
  4. l'utente è in grado di visualizzare altre celle senza chiudere il riquadro.

Merita una considerazione.

2
Chairman Meow

Il mio suggerimento sarebbe di usare un suggerimento Se la descrizione o i dettagli aggiuntivi hanno dimensioni inferiori, è possibile utilizzare l'attributo title per visualizzare le informazioni quando l'utente passa il mouse sopra l'intestazione della colonna Se si richiede un'esperienza coerente, è possibile implementare un suggerimento personalizzato

2
Jonathan Cardoz

Anziché utilizzare un popup, che può diventare problematico su piccoli dispositivi, suggerirei di visualizzare le informazioni aggiuntive di seguito e all'interno della riga interessata. L'esempio nell'immagine mostra ciò che sto cercando di descrivere. Di solito è una griglia con vari nomi di album. I nomi dei brani dell'album vengono visualizzati quando si fa clic sul collegamento (nell'esempio fa clic su Sleep Is For the Week ). Vedi in azione qui .

enter image description here

Ciò richiederà temporaneamente molto spazio sullo schermo, naturalmente, ma è con le informazioni/informazioni pertinenti a cui l'utente è attualmente interessato. Quindi non dovrebbe essere un problema.

Per migliorarlo ulteriormente, è possibile aggiungere un'icona al collegamento che dia un suggerimento sullo stato on/off (ad es. Una freccia che punta su/giù se espansa). Inoltre la descrizione comandi quando si passa con il mouse sopra il collegamento potrebbe descrivere la possibile azione (ad es. Fare clic sul collegamento per ulteriori informazioni ).

2
msp

Questa complessa interfaccia ha due livelli, entrambi complessi in se stessi. Uno strato primario e secondario, se lo desideri. L'uso di un popup è un buon inizio, ma ci sono diversi modi per renderlo più facile da usare:

Evidenzia la cella su cui stanno operando e considera di usarlo come trigger per aprire il popup, o evidenziare e il tasto Invio, il che significa che non avrai bisogno di un'icona, una semplice istruzione nell'intestazione coprire tutte le celle, a seguito di ciò:

Navigazione da tastiera - usando i tasti freccia (e la scheda) per spostarsi ed entrare per attivare il popup secondario - ed esc per chiuderlo, insieme all'evidenziazione della cella in modo che l'utente sappia quale cella attiverà un popup. Invio per esaminare e esc per chiudere è un modello molto comune nel software, ottenendo un grande riconoscimento come risultato del software per fogli di calcolo.

Fornisci completa interazione da mouse e tastiera - specialmente se questo sarà usato pesantemente e ripetutamente. l'evidenziazione equivarrebbe a un clic e l'evidenziazione e Invio equivarrebbe a un doppio clic. Ricorda, le interazioni del mouse raddoppiano come tocchi sui touchscreen (questa non sembra un'app del telefono, almeno nella sua forma attuale, ma gli schermi delle dimensioni di un tablet lo gestiscono).

Consenti navigazione dal livello secondario al livello secondario, in modo da poter spostare le celle ma avere il popup del livello secondario e mettere a fuoco automaticamente senza tornare alla griglia. Se decidessi di mettere a fuoco l'attivo, ciò accadrebbe naturalmente ogni volta che l'utente si spostava tra le celle.

sa un layout UI figlio fisso come suggerito da JayFang nella loro risposta - questo è probabilmente meglio di un popup centrale o di altri tipi di popup (credito dovuto a JayFang per questo suggerimento, ma per fare la mia risposta il più completo e buono possibile dovevo pensare e sfruttare questa conoscenza)

Funzione di ricerca/filtro - consente all'utente di limitare rapidamente le celle utilizzando i termini di ricerca digitati, ad esempio, 5b9 si focalizzerà immediatamente su quella cella e puoi quindi aprire immediatamente il popup o concentrarsi su di esso in modo che il prossimo keypress apre il livello secondario di interazione.

Evidenzia la riga e la colonna correnti si trovano ai bordi dell'interfaccia, in modo molto simile a Excel, fornendo un feedback extra sulla loro posizione e aiutandoli anche a dedurre ciò che è contenuto da qualsiasi cella oscurata dal popup

Esamina i tuoi utenti - sono loro esperti - in tal caso, puoi permetterti di sacrificare una certa quantità di rilevabilità per rendere le cose più snelle e fare affidamento sul fatto che gli utenti esperti investiranno tempo nell'apprendimento e nell'insegnamento l'un l'altro. C'è una grande differenza tra Facebook o Google, costruendo un'interfaccia apprendibile per un miliardo di utenti e un'applicazione destinata a pochi esperti.

Evidenzia la prima cella al caricamento della pagina - contrassegnare le tue istruzioni in modo simile aiuterà il nuovo utente a stabilire la connessione

soluzione a due schermi - mentre dici che anche il livello secondario di interazione è complesso (una griglia di 5 per 6, presumibilmente modificabile, campi) potresti anche considerare di dividerlo sul suo schermo e ottenere il vantaggi di uno schermo intero per questa griglia secondaria. Conserva chiaramente il contesto della griglia e fornisci anche il livello secondario alla navigazione del livello secondario successivo

Potrebbe non essere necessario implementare tutto questo per fornire una buona soluzione, ma dovresti essere in grado di giocare con queste diverse idee, costruire alcuni prototipi, combinare un po 'di osservazione dell'utente con alcune mani sui test dell'utente e trovare il modello migliore per la tua specifica applicazione.

PS non usa solo il colore per evidenziare

1
Toni Leigh

Il mio consiglio sarebbe di aggiungere una riga nella parte superiore della griglia con le informazioni che l'utente può fare clic nei quadrati della griglia per visualizzare le informazioni aggiuntive nei popup. Nella mia esperienza, è meglio che l'utente veda prima le istruzioni per ottenere maggiori informazioni, piuttosto che farle capire dove si trova o inciampare su cosa fare per ottenerle.

0
ceefin

Non conoscere il contesto di utilizzo rende sfocato trovare una soluzione. Ecco cosa posso inventare:
Che ne dici di selezionare separatamente il grezzo e la colonna? Ecco cosa sto cercando di spiegare: l'utente seleziona la colonna che desidera ottenere i dati, quindi seleziona una riga. Quando sono selezionati il ​​grezzo e la colonna, può apparire il pop-up extra.

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Questo è un po 'complicato. L'ho pensato da quando penso che il "pop-up segreto" non verrà usato molto. Se verrà usato spesso, allora un pulsante o un cambiamento visivo del collegamento sulla cella sarà solo più chiaro e facile da notare.

mockup

scarica la fonte bmml

0
Esin

In un caso simile, ho usato una descrizione comandi invece di un poppin. Devi solo scorrere una cella per più di 1 secondo per visualizzare le informazioni aggiuntive.

Puoi anche aggiungere un link se devi andare su un'altra pagina

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

0
Renaud