Come progetteresti una buona interfaccia utente di ricerca?

Question

Desidero fornire ai miei utenti un motore di ricerca 'avanzato'. Io fondamentalmente un sacco di criteri tra cui scegliere:

• alcuni sono molto semplici/comune e sarà in gran parte usano (cioè periodo di tempo, elemento id)
• alcuni sono un po 'meno tradizionale
• e alcuni non saranno utilizzati molto, ma ho ancora voglia di fornire loro

Nel complesso, ho intorno a 30 + criteri per scegliere tra

Il risultato è un set di dati che ho displ in una griglia.

Ho cercato l'ispirazione su Internet, e anche google non sembra avere una buona soluzione per la ricerca avanzata.

Ho progettato questo tipo di strumenti in passato, e non sono stato molto contento del risultato, anche se l'utente è stato finalmente in grado di usarlo in modo abbastanza efficace.

• Pensi che il pannello di ricerca dovrebbe essere visibile per tutto il tempo (cioè visualizzata in cima alla mia griglia di risultato) o disponibili in un modulo separato (che mi permetteva di utilizzare più posto per tutti i controlli)

• pensi che è meglio per visualizzare tutti i criteri di ricerca, o per permettere all'utente clic su 'avanzata', se vuole vedere/utilizzare più criteri

• Come si organizzano i criteri? per frequenza di utilizzo, o piuttosto per area (cioè criteri relativi all'utente, alla posizione, al tempo, ecc.)

• Dove devo inserire il pulsante "Cerca"? accanto ai controlli di ricerca più comuni, o in fondo, o entrambi?

E più in generale, hai suggerimenti da condividere su come progettare una bella interfaccia utente di ricerca? Che tipo di funzionalità ti mancano di solito in questo tipo di motori di ricerca "avanzati"?

Answer 1

Solo un consiglio generale: mantieni la semplicità. A molta scelta confonde l'utente e aumenta la possibilità che una certa funzionalità non venga utilizzata.

Provare diversi prototipi sugli utenti per scoprire quali opzioni sono valide e quali no.

Answer 2

Cerca di mantenere l'interfaccia il più semplice possibile. La maggior parte degli utenti avrà bisogno solo di una finestra di testo e di un pulsante di ricerca. Le restanti opzioni possono essere inserite in un'opzione di ricerca avanzata.

Questa configurazione è più amichevole per i nuovi utenti, oltre a contribuire alla conservazione delle risorse salvando le ricerche avanzate più costose per le persone che ne hanno effettivamente bisogno.

Answer 3

il mio pensiero:

spettacolo -Solo criteri avanzati Quando si desidera. La ricerca è una cosa grandiosa quando è resa il più semplice possibile per le persone che cercano di cercare.

-Se esiste un insieme molto ampio di criteri di ricerca per ricerche avanzate: non confondere i risultati con esso. Rendi molto facile e ovvio per un utente tornare indietro e modificare i criteri, ma non cercare di sprecare spazio sui risultati assegnando loro di nuovo i loro criteri.

-Organizzazione dei criteri è difficile da dire senza sapere tutto. ma come altri hanno/diranno: renderlo semplice! Potresti non aver bisogno di mostrarlo tutto in una volta: fammi espandere le aree se voglio di più, nascondi cose che non voglio usare. e poi metti un pulsante di ricerca in fondo. Ma ancora una volta, non voglio scorrere una pagina di criteri casuali solo per trovare questo pulsante.

Answer 4

• Dovrebbe essere presente una casella di testo di ricerca come parte della testa dell'albero su ogni pagina del sito.
• Preferisco che il pulsante sia etichettato "trova" anziché "cerca" perché i vantaggi sono sempre più interessanti delle funzionalità.
• Ciò che dovrebbe essere sofisticato è l'algoritmo di ricerca e non la GUI.

Answer 5

Mi piace l'approccio "elenco di regole". Tu sai quello:

Find items that match [ All |v] of these conditions: 

[Name   |v] [Contains |v] [_____________] (-) (+) 
[Start date  |v] [Is before |v] [_____________]  (+) 

              (Cancel) (Search) 

Ciò mantiene la finestra di dialogo da troppo disordinato, ma dà comunque agli utenti tutte le opzioni di cui possono aver bisogno.

Ma questo presuppone che tu abbia bisogno di cose così avanzate! Potresti scoprire che un approccio basato su un elenco di parole chiave progettato in modo intelligente funzionerà correttamente.

Answer 6

Non è un esperto di interfaccia utente, ma ho visto un sacco di cattiva interfaccia utente.

• KISS è un buon inizio.
• Rende intuitivo.
• Mantieni la ricerca sia in alto che in basso. Sarei dispiaciuto di usare qualcosa che mi costringa a risalire la pagina per scrivere (vedi la documentazione di Flex, il loro controllo di impaginazione è solo in cima - un dolore miserabile che sai dove).
• Organizzazione di criteri dovrebbe essere duplice:
  • operatori di base (20%) che l'80% userà up-front
  • modificare dinamicamente l'insieme di criteri disponibili in qualsiasi momento.
• Ottenere gli utenti avviati con meno tempo di accelerazione e consentire loro di aggiungere/rimuovere criteri in base alle necessità. L'idea è di fargli usare qualcosa di cui ha bisogno e non ingombrare il suo pensiero o il flusso di lavoro con la brillantezza del tuo set di funzionalità.
• Come altri hanno accennato ed è la tendenza al giorno d'oggi con l'interfaccia utente in generale, utilizzare i controlli che sono nascosti fino a meno che l'utente non voglia esplicitamente avanzato/fine-tuning (UI su richiesta).
• Una buona regola empirica è di avere un massimo di 5-7 funzioni su una pagina.
• Sarebbe bello se fosse possibile disporre i criteri in modo tale da creare una storia da cui l'utente può leggere la sua query e gli operatori possono ricavarne un significato.
• Sono un grande fan del piccolo testo e delle icone facili da comprendere, ma tale configurazione dipende dall'ambiente di installazione. Il tuo nipote può usare quel possente cavallo di battaglia?
• Un buon design richiede anche che la tua interfaccia utente sia accessibile. Questo è un duro da spezzare e non ho assolutamente idea di come lo faresti.

Buona fortuna!

Answer 7

Mantieni i controlli avanzati nascosti per impostazione predefinita. Il tuo input di ricerca e il pulsante di azione devono essere sempre visibili e dati in risalto, indipendentemente dal fatto che i tuoi controlli avanzati siano visibili o meno. Assicurati che mostrare/nascondere i controlli avanzati non cambi la posizione dell'ingresso o del pulsante principale - quelli che devono rimanere statici in modo che la memoria spaziale dell'utente non sia influenzata.

Per quanto riguarda i controlli avanzati, senza sapere esattamente quale tipo di dati è necessario mostrare, posso solo dare una panoramica dei potenziali metodi di organizzazione. Personalmente, mi piace FERMO:

• Località
• Alphabet
• tempo (timeline o cronologia - pensare a un museo di storia)
• Categoria (si pensi grandi magazzini)
• Gerarchia (il più grande al più piccolo, più chiaro al più scuro, ecc.

A seconda dei controlli, uno di questi avrà più senso. Organizza di conseguenza. ider o range input (ad esempio, 'lightest', 'light', ecc.) piuttosto che un elenco di checkbox/radio, è preferibile in quanto riduce il numero di elementi visivi sulla pagina.

Dimentica la regola "più/meno 7", che è stata presa completamente fuori dal contesto da persone che in realtà non hanno letto lo studio. In breve, è applicabile solo alla risposta dell'essere umano agli stimoli esterni, non alle opzioni visualizzate su uno schermo. Questo non significa che dovresti esagerare, ma anche se hai molte opzioni, puoi modificarle visivamente. Clutter è un fallimento del design - non delle informazioni.

Ricordarsi di utilizzare molto spazio bianco e gli elementi <label> per assegnare a ciascuna opzione un target di clic di buona dimensione. Questo è particolarmente importante quando si tratta di checkbox o radio.

Assicurarsi che quando i risultati vengono restituiti, vi è un titolo chiaro (<h2> o <h3> di solito sufficiente) re-indicando la query dell'utente e quanti risultati sono stati restituiti. Non dimenticare una pagina di risultati 0! Offri alcuni consigli per ampliare la query, se possibile.

Answer 8

1) Pensi che il pannello di ricerca debba essere visibile sulla griglia dei risultati?

Un semplice pannello di ricerca come la ricerca di base di Google può essere nella pagina Risultati poiché è compatto. Ciò consente all'utente di riprovare la ricerca con criteri diversi senza perdere tempo andando a una nuova pagina o finestra. La ricerca avanzata è molto più ingombrante quindi c'è un compromesso più importante tra un facile accesso ai risultati (in un riquadro più piccolo) e un facile accesso alla ri-ricerca, quindi è necessario valutare la frequenza degli utenti che effettuano nuovamente la ricerca rispetto al lavoro che fanno con il risultati. Ad esempio, se la ricerca ripetuta avviene il 50% delle volte, ma includendo un pannello di ricerca avanzata nella pagina dei risultati richiede uno scorrimento supplementare il 75% delle volte, gli utenti stanno meglio senza un pannello di ricerca avanzata sui risultati. Come regola generale, la ricerca avanzata non dovrebbe essere nella pagina dei risultati, a meno che l'attività non sia realmente l'esplorazione dei dati.

Un altro problema con il pannello di ricerca nella parte superiore dei risultati è cosa fare se i risultati non corrispondono ai criteri (ad es., Se l'utente modifica un criterio dopo la visualizzazione dei risultati ma prima di fare nuovamente clic su Cerca). Con la ricerca avanzata è molto più facile per gli utenti dimenticare o perdere se hanno cambiato un criterio o meno e quindi essere confusi su quali criteri sono in vigore per i risultati. Mettendo la ricerca avanzata su una pagina separata impedisce ciò, sebbene ci siano altri modi per evitare questo problema se Ricerca avanzata si trova nella pagina Risultati (ad esempio, utilizzando la ricerca "sfaccettata" con applicazione istantanea).

In ogni caso, la pagina Risultati dovrebbe visualizzare i criteri utilizzati per effettuare la ricerca.

2) Pensi che sia meglio consentire all'utente di fare clic su "Avanzate" per ulteriori criteri?

Per la maggior parte delle app di database, gli utenti di un determinato gruppo (ad esempio, posizione lavoro) hanno da 2 a 5 insiemi specifici di criteri di ricerca che li raggiungono nella maggior parte del lavoro (ad esempio, la ricerca di ordini effettuati tra due utenti -dati forniti), a volte includendo criteri che hanno anche specifici valori di criterio (ad esempio, cercare tutti gli ordini con stato di attesa). In questa situazione, gli utenti saranno più veloci e meno probabilità di essere confusi se si dispone di un pulsante Avanzato per la ricerca ad hoc, mentre la ricerca predefinita ha controlli su misura per queste ricerche specifiche. Predefinito per Ricerca avanzata solo se gli utenti effettueranno principalmente effettuando ricerche ad hoc esplorative.

3) Come organizzeresti i criteri?

Se alcuni criteri vengono utilizzati in modo particolare, vengono gestiti tramite Ricerca di base come descritto per 2, quindi i criteri di ordinamento nella ricerca avanzata sono ridotti in base alla frequenza. Rende solo difficile per gli utenti trovare il criterio che stanno cercando. In genere puoi fare affidamento sugli utenti che hanno in mente un campo specifico, quindi ordina il criterio alfabeticamente oppure, se gli utenti hanno familiarità con la Pagina dei risultati e i suoi campi sono disposti in modo coerente con il modo in cui pensano gli utenti, usa lo stesso ordine come usato per le colonne dei risultati.

4) Dove devo inserire il pulsante "Cerca"?

Il pulsante di ricerca dovrebbe essere sempre visibile. La soluzione migliore è avere tutti i criteri su un riquadro scorrevole con il pulsante all'esterno del riquadro. Mettere il pulsante in alto e in basso è un'alternativa comune ma sfacciata. Non lo metterei secondo i criteri comuni perché se i tuoi utenti sono passati dalla ricerca di base a quella avanzata, probabilmente non stanno usando criteri comuni. Considerare no Pulsante di ricerca se è possibile mantenere il tempo di risposta inferiore a 500 ms, fornendo invece l'applicazione immediata come visto in Vista.

5) Come progettare un'interfaccia utente di ricerca piacevole?

Per field-based multi-criteri di ricerca, ci sono due modelli di base:

a. Una forma di tutti i campi con un posto per inserire i valori dei criteri per ogni campo. Il problema è che i campi con valori impostati possono scorrere fuori dalla visualizzazione e gli utenti potrebbero aver dimenticato di aver impostato un valore. Quindi vuoi mantenere questo il più compatto possibile. Vedere il capitolo Migliorare il recupero dei dati in About Face 2.0 di Alan Cooper per un approccio. È anche possibile fornire una stringa di riepilogo dei criteri selezionati vicino ai pulsanti di ricerca che l'utente può verificare. Facendo clic su ciascun criterio nella stringa si può anche saltare l'utente ai criteri per cambiarlo.

b. L'utente seleziona da un elenco di campi quelli da utilizzare nei criteri, quindi imposta i valori per i criteri in posizione consolidata.La principale sfida qui è di ridurre al minimo il numero di clic "overhead" per selezionare un campo. Idealmente, l'elenco dei campi è sempre disponibile e un clic seleziona il campo, lo inserisce nella posizione consolidata e posiziona il cursore nel controllo del valore, qualcosa come mostrato in http://www.zuschlogin.com/content/blogimages/37/FindAdvanced.gif, solo per Ricerca piuttosto che Trova. (Con la convenzione arbitraria "Trova" è molto diverso da "Cerca" per gli utenti; Trova evidenzia le cose all'interno della pagina corrente che corrispondono a un determinato criterio mentre Cerca recupera le cose corrispondenti a un determinato criterio)

Entrambi questi disegni collegano il criterio per ogni campo da AND logici e sono limitati nei join tra le tabelle di database sottostanti, ma è probabile che soddisfino quasi tutti i tuoi utenti. Se le attività richiedono join più complicati e combinazioni booleane, esaminare i progetti di query grafica (ad esempio, Badre AN, Catarci T, Massari A, & Santucci G 1996. Facilità comparativa di utilizzo di un linguaggio diagrammatico rispetto a un linguaggio di query iconico. & P Barclay (Eds) Interfacce verso Database (IDS-3): Atti del 3 ° Workshop Internazionale su Interfacce a Database, Napier University, Edimburgo, 8-10 luglio) e Query su disegni di Esempio.

Answer 9

Il modello di progettazione predefinito che utilizzo è Filter Table. Ciò copre forse il 90% dei casi d'uso. Per ricerche più complesse, avrei bisogno di informazioni più specifiche sugli obiettivi e sui casi d'uso degli utenti, in modo che fosse possibile progettare una soluzione più ottimale per quelle situazioni.

Answer 10

Si prega di trovare le mie risposte (in testo normale) rispetto a ciascuna delle domande (in corsivo) richieste.

"1) Pensa che il pannello di ricerca debba essere sempre visibile (cioè visualizzato sulla parte superiore della griglia dei risultati) o disponibile in un modulo separato (che mi consenta di utilizzare più spazio per tutti i controlli) "

Visualizzazione sulla parte superiore della griglia dei risultati poiché lascia uno spazio orizzontale aggiuntivo per visualizzare i risultati della ricerca e quindi per visualizzare più colonne di dati di ricerca senza scorrere orizzontalmente.

"2) Pensi che è meglio per visualizzare tutti i criteri di ricerca, o per permettere all'utente clic su 'avanzate' se vuole vedere/utilizzare più criteri"

Mostra tutti i criteri disponibili, ma in un modo a schede. categorizzare i campi di ricerca di input in categorie e disporre di una scheda per ogni categoria.

"3) Come vorresti organizzare i criteri? Dalla frequenza di utilizzo, o meglio per area (es. Criteri relativi all'utente, al luogo, al tempo, etc.)"

Organizzare 'per area 'perché a persone diverse piace usare criteri diversi. Ogni criterio dovrebbe avere una propria scheda. Ma organizza le schede nell'ordine "più popolare" e "meno popolare" come pensi. Nel tuo caso le schede possono essere "Per nome" (contenente i campi nome, secondo nome, cognome, nome da nubile della madre, nickname, nome del padre ecc.), "Per posizione" (nome del luogo, nome della contea, nome del distretto, nome dello stato , nome del paese, ecc.) e così via fino alla scheda avanzata (dove si inseriscono i campi meno utilizzati).

"4) Dove devo mettere il pulsante 'Cerca'? Accanto ai controlli di ricerca più comuni, o in fondo, o entrambi?"

Mettere i campi di input di ricerca come discusso in precedenza in una moda a schede che li classifica in base al "tipo di campo" (mi riferirò a quest'area come alla griglia di ricerca). Quindi metti pulsanti di azione come 'Cerca', 'Cancella/Ripristina' appena sotto la griglia di ricerca allineata al centro (mi riferirò a quest'area come a una griglia di pulsanti).Quindi posiziona il riquadro dei risultati della ricerca sotto la griglia dei pulsanti poiché è disponibile un'area più orizzontale per la visualizzazione in modo che sia possibile visualizzare contemporaneamente le colonne massime.

Answer 11

Dai un'occhiata alla mela cotogna, il sito dei modelli ui di infragistica: http://quince.infragistics.com.

Personalmente, mi piacerebbe guardare utilizzando una griglia filtrabile, come il xtragrid da DevExpress: http://www.devexpress.com/Products/NET/Controls/WinForms/Grid/datafiltering.xml

accoppiato con una barra di ricerca sopra di esso per popolare inizialmente la griglia.

Answer 12

Non pensare che questo sia già stato menzionato ma non dimenticare che dovrai anche avviare la ricerca quando l'utente preme entrare in uno qualsiasi dei campi di ricerca. Probabilmente ne sono già consapevole, ma vale la pena menzionarlo comunque.

Answer 13

Semplice è buono. Suggerirei un approccio iterativo in cui si costruiscono lentamente funzionalità dopo aver eseguito test di accettazione utente e guardando i registri per vedere quali funzionalità usano (o non usano). L'unico modo per sapere cosa migliorare è guardare i tuoi utenti.