Selezione tra due opzioni nell'app per smartphone?
Abbiamo un'app per smartphone per pizzerie, e un utente può scegliere di vedere "consegna" o "consegna" e, separatamente, il più vicino o il più economico.
Queste sono le due opzioni che ho trovato:
Con la linea orizzontale sotto la selezione, è molto chiaro cosa ha selezionato l'utente. Ma davvero non mi piace la linea verticale, ma l'utente potrebbe confondersi.
Inoltre, tantissime app utilizzano la linea orizzontale per visualizzare la selezione. La mia app è un'altra app con lo stesso design noioso che tutti gli altri usano.
Ho anche considerato i controlli segmentati. Probabilmente sarà simile a questo poiché Android non ha il controllo segmentato di iOS 13 :
Anche se mi piace un po 'di più, il problema più grande è che non è chiaro quale opzione sia selezionata quando sono disponibili solo due opzioni, che è documentata qui . Ho chiesto a un collega (utente Android) e ha pensato che fosse stato selezionato "Vino bianco". Quindi c'è quella confusione.
Quali altre opzioni ci sono?
Risposte
Le due schermate precedenti sono un esempio di "Navigazione" e non vengono utilizzate per la "Selezione" in generale.
Dato che hai detto che si tratta di un'app che ti consente di scegliere gli alimenti, cosa succede se l'utente desidera selezionare più di un alimento / bevanda dalla categoria? O come puoi assicurarti che il cibo predefinito sia quello che l'utente preferirebbe?
È possibile utilizzare modelli stabiliti per selezionare gli elementi dall'elenco in base alle condizioni.
Filtra i chip in base al design del materiale: https://material.io/components/chips#filter-chips
Come presentato, preferisco l'approccio sottolineato in termini di chiarezza. È evidente cosa è selezionato, cosa no e quali opzioni sono abbinate. Detto questo, sono sicuro che i designer visivi di talento potrebbero migliorare le prestazioni del secondo (rendendo il carattere selezionato in grassetto, ad esempio).
Vorrei anche incoraggiarti a NON scegliere il tuo preferito, il mio preferito, i preferiti dei risponditori o la media delle preferenze dei tuoi colleghi. Il personale UX di solito spreca molto tempo a discutere e argomentare variazioni minori dell'interfaccia utente che è meglio lasciare ai test degli utenti. Raccogli tutti gli approcci, quindi lascia che siano gli utenti a decidere. Suggerirei un "test di 5 secondi" per questo. Mostra agli utenti ciascuna opzione per soli 5 secondi, quindi chiedi loro cosa è stato selezionato.
Infine, aggiungerei che c'è un problema più profondo che credo sia più importante: la scalabilità. Cosa succede in seguito quando ti viene chiesto di aggiungere "Tater Tots"? Entrambe le opzioni si interromperanno. Presumi sempre che il futuro aggiungerà altre cose. Quindi consiglierei l'approccio checkbox / chip di filtro di Sooraj MV. Non solo si ingrandisce bene, ma si riduce anche. Funzionerebbe con una sola opzione (solo "patate al forno" per esempio).
Quindi l'utente lo testerà ovviamente.
Questa risposta riguarda le immagini modificate. In precedenza, le immagini mostravano selezioni di prodotti (vino, piatti a base di patate) in cui i raggruppamenti di opzioni non erano troppo chiari.
Ora, c'è una differenza tra le scelte che l'utente deve fare:
- Che tipo di servizio vuole?
- Il servizio dovrebbe essere vicino o economico?
C'è una differenza tra il tipo di risposte offerte da Scelta 1 e Scelta 2.
Per la scelta 1 , le pizzerie offrono la consegna o no. O offrono il carry-out o non lo fanno. Ci sono due gruppi di pizzerie (consegna e da asporto) e alcune pizzerie possono essere trovate in entrambe.
Per la scelta 2 , una pizzeria è più vicina solo rispetto a un'altra pizzeria. Ciò significa che la scelta 2 crea una scala da vicino a lontano e una scala da economica a costosa. Facendo clic su "più vicino" viene visualizzato un certo numero di pizzerie all'estremità "chiusa" della scala. Quando viene presentato all'utente, il numero definito di pizzerie vicine dovrebbe anche essere mostrato (ordinato) nell'ordine dal più vicino al più lontano con il più vicino è il primo elencato.
Con questo in mente, è possibile stabilire una gerarchia più forte e aiutare l'utente a trovare ciò di cui ha bisogno più rapidamente:
Al primo livello, è la posizione. Il secondo livello offre una scelta tra i due gruppi principali di pizzerie. Il terzo livello, la scala da vicino a lontano, è stabilito tramite una funzione di ordinamento in cui l'utente può scegliere di ordinare le pizze più vicine per prime o quelle più economiche per prime.
Potremmo presumere che l'utente sappia se vuole che una pizza venga consegnata o meno prima di ordinare, e ciò giustificherebbe che l'utente definisca il tipo di pizzeria prima della vicinanza o del prezzo. Ma questo sarebbe un presupposto e sarebbe stato meglio testato. Se la vicinanza o il prezzo della pizzeria (Scelta 2) finisse per essere più importante, la Scelta 1 dovrebbe essere implementata come filtro opzionale (tramite caselle di controllo o menu a discesa con caselle di controllo). Se si scopre che la vicinanza o il prezzo (Scelta 2) sono MOLTO più importanti della Scelta 1, la Scelta 2 dovrebbe passare al livello 2. La Scelta 1 si sposterà quindi al livello 3 come filtro opzionale.