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

Design della tabella di confronto

Sto cercando di progettare una tabella di confronto dei prodotti, che fornisce i dettagli di varie funzioni (10-15) disponibili su diversi prodotti simili (25-50) sul mercato.

Il primo pensiero che ottengo è quello di creare una tabella con crocette e segni di spunta per fornire segnali visivi. Tuttavia, la stessa tabella esatta è disponibile in uno dei siti Web dei nostri concorrenti. Se ci provo, sembrerà una fregatura da loro.

Avresti qualche suggerimento su come posso gestire il design?

3
Andy

Per la natura stessa di una tabella comparativa seguirà un formato simile ai tuoi concorrenti; è una tabella che confronta gli elementi tra loro e tu sei limitato a come altrimenti puoi farlo. Sono concetti familiari per gli utenti Web e sono piuttosto onnipresenti, non è necessario reinventare la ruota. Sono sicuro che il tuo concorrente ha anche opzioni di navigazione principali, un logo, alcune schede, un piè di pagina ... non le stai strappando includendole neanche.

Puoi comunque utilizzare lo stesso concetto di tabella di confronto, ma visualizzarlo in uno stile diverso rispetto al tuo concorrente. Ecco a cosa servono il tuo marchio e il tuo design visivo: far risaltare le funzionalità e i concetti chiave e differenziare il tuo sito dagli altri.

Qui ci sono solo un paio di esempi che mostrano lo stesso tipo di concetto ma mostrati in modo abbastanza diverso da non essere confusi l'uno con l'altro:

enter image description here

Fonte: http://www.shopify.com/

enter image description here

Fonte: https://www.crazyegg.com/pricing

3
JonW

Invece di dare una soluzione, ti consiglio questo video TED sull'arte della scelta. Sheena Iyengar spiega come gli umani scelgono e cosa li rende efficaci:

  1. Imposta i tuoi limiti (prezzo, ecc.),
  2. Restringi la tua scelta alle tue esigenze di base,
  3. categorizzare il resto.

Penso che se cerchi una soluzione adatta a questa strategia avrai più vantaggi per gli utenti rispetto al tuo concorrente. Può essere la ricerca sfaccettata come ha mostrato Edgarator è il modo di risolvere.

1
FrankL

Se vuoi fare qualcosa di diverso, e io sono solo creativamente selvaggio, come non l'ho mai visto prima; potresti voler provare qualcosa del genere:

mockup

download bmml source - Wireframe creati con Balsamiq Mockups

Questo filtro consente all'utente di concentrarsi su quegli elementi a cui tieni davvero e di confrontare i prodotti con le funzionalità a loro care senza dover passare attraverso l'intero elenco.

Se è basato sul web, farlo con JQuery per mostrare e nascondere elementi dalla tabella con le animazioni sarebbe perfetto! :)

1
edgarator

Esistono molti altri tipi di indicatori disponibili. Un modo è utilizzare i segni di spunta in cui la funzione è disponibile e lasciare gli altri vuoti o con un segno meno (preferibilmente vuoto in quanto può causare disordine e rumore visivo).

Inoltre, i segni di spunta non devono essere "segni di spunta" di per sé, ma solo un'icona che chiarisce che la funzione è disponibile per quel prodotto. Ho scoperto che un semplice cerchio nero è spesso piacevole per gli occhi, forse più di un segno di spunta.

Esempio di grafico di confronto del database da PennState University Libraries :

enter image description here

Questo è un grafico simile al tuo, confrontando una dozzina di funzionalità tra molti prodotti. So che è brutto dal punto di vista visivo ma capisce bene (riesci a capire cosa intendo per potenziale disordine e rumore visivo?)

0
Asaf Sitner

Vorrei suggerire una tecnica semplice, evidenziare i dati dell'intera tabella con un colore verde (o qualsiasi colore) insieme ai bordi per indicare che è disponibile e l'herher con un colore rosso (o altro colore) per indicare che è già in uso o barrato.

Non dimenticare di menzionare il codice colore e il significato nella legenda!

0
sree