Ora che abbiamo questi menu fantastici, abbiamo pensato a qualche modo per renderli più belli? Sento che c’è molto spazio sprecato (specialmente su mobile), il che rende anche gli obiettivi di clic molto più piccoli.
Potrebbe rendere gli obiettivi più facili da cliccare e leggere; forse potremmo iniziare con questo come esperimento solo per mobile, dato lo spazio extra?
Un altro esempio visivo da un sito casuale per spiegare questo
Se non c’è abbastanza spazio su desktop per questo, forse potremmo optare per un layout 3v3 come mostrato di seguito?
Per me il problema principale è il target di clic su mobile nella prima scheda. Mi chiedo se un semplice aggiustamento degli spaziature lì ci porterebbe quasi alla soluzione.
Sono curioso di sapere cosa ne pensa @awesomerobot. Concordo sul fatto che il grande spazio bianco sia eccessivo.
Per quello che vale, non ho riscontrato problemi di usabilità nella prima scheda. Non è che la usi spesso, ma non ricordo di aver mai cliccato per sbaglio qualcosa quando l’ho fatto.
Penso che sia carino, ma potrebbe essere utile isolare il pulsante di disconnessione dal resto. Per quanto ne so, puoi collegarti a quel menu per aggiungere opzioni, e potrebbe creare confusione se il pulsante di disconnessione si sposta improvvisamente da sinistra a destra o viceversa (anche se non cambia spesso).
Per me, la cosa più goffa è il notevole spazio verticale vuoto su mobile in tutte le schede, come @rishabh ha menzionato in origine.
Due opzioni basate sulle bozze di @rishabh: opterei per le 3 colonne, anche se ciò limita lo spazio per il testo (“enter anonymous mode” può probabilmente essere accorciato e, in ogni caso, non è attivo di default…)
Modifica: ora che ci penso, la versione a 2 colonne è probabilmente più sicura per le diverse lingue con parole più lunghe
Immagino che i pulsanti grandi possano funzionare, ma in tal caso sposterei il pulsante “Esci” in fondo, magari dandogli la larghezza completa… non so…
Nel complesso, la versione desktop sembra andare abbastanza bene così com’è.
Nuovo argomento? Questa discussione sembra fuori tema per l’accesso rapido, che è già stato completato (ed è ottimo) e non sarà influenzato dalle ultime proposte.
Non capisco perché siano necessari questi ultimi cambiamenti. Ma forse mi sono perso una motivazione esposta altrove sul perché “qui per Mobile sia giustificato un cambiamento più ampio”.
Mi piace avere i menu desktop e mobile identici. Uso entrambi e questo riduce lo sforzo mentale.
I layout a più colonne sono generalmente più lenti da leggere. Le icone sono utili, ma non tanto se vengono aggiunti o rimossi pulsanti.
Se lo spazio disponibile per l’atterraggio è insufficiente verticalmente - ed è già pari alla larghezza laterale del menu a tendina - allora perché non abbiamo pulsanti a icona per tutti i menu?
Immagino che l’obiettivo principale sia riempire lo spazio bianco vuoto. Accetterei altre funzionalità prima dei grandi pulsanti proposti:
dimensione del testo più grande per corrispondere al pulsante Rispondi sotto ogni post
più opzioni di menu, ad esempio inviti, badge
opzioni di raggruppamento con una qualche forma di separazione: le opzioni del menu utente insieme nella stessa sequenza del riepilogo utente; le bozze da sole; il disconnessione da sola in fondo
Sì, tendo a preferire più coerenza (è anche più facile da mantenere), ma toccare gli elementi è un’esperienza diversa dal cliccarci sopra… quindi a volte layout diversi sono giustificati.
Non mi preoccupa troppo perché ci sono pochissimi elementi.
Forse dovremmo? Bisogna pur iniziare da qualche parte. Forse anche il menu hamburger potrebbe essere trasformato in un’icona in futuro.
Non sono contrario a questo per raggiungere la parità con le schede nel menu utente, ma sospetto che badge e inviti non siano davvero importanti in questo contesto (i badge sono già nel menu hamburger, la maggior parte delle persone non usa gli inviti), quindi potrebbero essere più rumorosi che utili.
Non ha molto senso con 6-7 elementi.
Forse ho frainteso, ma sono già nello stesso ordine (le bozze e le modalità anonime non hanno schede complete nella pagina utente, quindi queste rompono un po’ la sequenza).
Ci ho pensato anch’io, ma per ora voglio evitarlo. Al momento tutti questi menu sono composti esclusivamente da elementi su cui puoi cliccare per andare da qualche parte o fare qualcosa… non sono sicuro che siano il posto giusto per contenuti puramente informativi?
È un po’ complicato perché, in realtà, questo menu ha al massimo 7-8 voci, e farle stare su un iPhone X è diverso dal farle stare su un iPhone più vecchio o su Android. Penso che le caselle a due colonne siano un migliore utilizzo dello spazio, ma sui telefoni grandi c’è ancora spazio disponibile.
Potremmo essere molto sofisticati e ridimensionare dinamicamente queste caselle in base all’altezza della finestra di visualizzazione? Se i nostri obiettivi sono occupare spazio e creare aree di tocco molto facili, potremmo esagerare. Probabilmente è un po’ estremo, ma questo illustra che anche ingrandendo molto rimane ancora dello spazio.
Se vuoi rendere tutto raggiungibile con una sola mano, idealmente tutto questo menu dovrebbe essere in basso… (lo stile a schede non ha molto senso con questo layout, è solo un esempio veloce). Tuttavia, inizi a complicare le cose con le direzioni del contenuto (dovrebbe l’elenco iniziare dal basso se il menu è in basso? è un grosso problema).
Comunque, è un po’ un divagare… Penso che le caselle con icone a due colonne siano un buon punto di partenza. Raggiunge gli obiettivi di utilizzare lo spazio in modo leggermente migliore e rende le cose molto più cliccabili.
Invece di cercare di riempire tutto lo spazio, perché non far sì che il menu occupi solo lo spazio necessario, invece di utilizzare l’intera altezza? Già su desktop l’altezza cambia dinamicamente. C’è una ragione per non fare lo stesso su mobile?
L’altezza completa segue il pattern dell’app mobile di “menu scorrevoli a tutta altezza”. Se non fossero a tutta altezza, non credo sarebbe chiaro che è possibile scorre per chiuderli (almeno lo spazio bianco aggiuntivo funge da area di scorrimento aggiuntiva).
È abbastanza comune che gli utenti controllino le loro bozze da giustificare il loro spostamento in una scheda dedicata nel menu (invece che nella scheda del profilo), proprio come notifiche, segnalibri e messaggi? Immagino che sia utilizzato relativamente meno frequentemente rispetto alle notifiche, ma mi chiedo come si confronterebbe con i segnalibri. Non sapevo nemmeno che fosse possibile visualizzare tutte le proprie bozze fino al recente cambiamento del menu che le ha spostate nella sezione profilo del menu utente, quindi mi chiedo se renderle ancora più prominenti non sarebbe ancora meglio.
Ciao Kris @awesomerobot, grazie per tutto il tuo lavoro sull’UX.
L’aspetto a due colonne è ottimo.
Inoltre, la posizione più evidente per le bozze suggerita da @seanblue sembra una buona idea. L’avevo completamente trascurata… è utile e al momento è nascosta.
Non sono sicuro che molti utenti vadano affatto a sinistra del menu utente per vedere se è cliccabile, poiché le tre schede a destra catturano tutta la mia attenzione.
Mi chiedevo, dato che potresti stare programmando in quell’area… se potresti aggiungere classi CSS individuali alla lista. Al momento tutte hanno la classe = “read”. Vorrei poter nascondere alcune voci.
Sto creando un forum privato e individuale per un cliente particolare, dove gli utenti non possono vedersi a vicenda. Un po’ come sta cercando di fare @joebuhlig nel suo tema.
Ciao