Icona hamburger

Ciao, sono nuovo a Discourse e spero che questa sia un’osservazione utile: il menu hamburger non cambia mai in un’interfaccia utente di ‘chiusura’, quindi mi sono ritrovato a cliccarlo pensando che stessi per rivelare altro, ma si chiude inaspettatamente. Era già aperto. Ho alcune righe di CSS che ho intenzione di aggiungere come argomento nella categoria ‘componente tema’ quando avrò più accesso. Fortunatamente il codebase ha classi appropriate in modo che possiamo agganciarci a quelle in base alla visualizzazione o meno della barra laterale.

discourse-hamburger-toggle

.btn-sidebar-toggle::before {
    transition:.2s ease-out all;
    opacity:0;
    content: "+";
    font-size: 32px;
    transform: rotate(0deg);
    position:absolute; left:12px;
}

.btn-sidebar-toggle  svg {
    transition:.2s ease-out all
}

body.has-sidebar-page .btn-sidebar-toggle::before {
    opacity:1;
    transform: rotate(45deg);
}

body.has-sidebar-page .btn-sidebar-toggle svg {
    opacity:0
}
4 Mi Piace

Grazie per questo! Suggerirei anche che il pulsante di chiusura X venga spostato all’interno del menu stesso, in cima. (In quella posizione aggiungerei anche il testo “Chiudi menu” al pulsante, e forse userei una freccia che punta a sinistra invece della X.)

< Chiudi menu o << Chiudi menu

4 Mi Piace

Penso che la maggior parte delle persone utilizzi Discourse con la barra laterale sempre abilitata (sarei curioso di vedere statistiche su vari forum). Avere una grande X che incoraggia, per così dire, a chiudere una parte del layout che è fondamentalmente permanente per molti utenti mi sembrerebbe un po’ strano. :thinking:

3 Mi Piace

Concordo que ter o ícone pouco utilizado de hambúrguer para fechar ocupando o espaço mais valioso no canto superior esquerdo da janela não é o ideal.

Aqui está o que a Cloudflare tem na parte inferior da sua barra lateral:

Parece que alguém que soubesse um pouco mais do que eu sobre CSS (ou talvez DOM?) poderia criar um componente de tema rapidamente, mas provavelmente a coisa é um PR que corrige o template.

Poderia até ser o primeiro item na barra lateral. . .

3 Mi Piace

Come si riapre se il pulsante si trova nella barra laterale compressa?

2 Mi Piace

Doh!

Hai un ottimo punto!

Non ho mai detto di essere un esperto di UX.

. . . hmm . . . OK

Quello che fanno è far collassare la barra laterale in questo modo:

e la cosa in basso la espande.

Quindi forse collassare la barra laterale invece di rimuoverla è una soluzione. Poi, se sai cosa sono le icone/colori, puoi usarla senza che sia espansa.

Praticamente ogni sito mette la home/icona in alto a sinistra, e avere l’hamburger lì sembra sbagliato.

3 Mi Piace

So che è una cosa diversa ma sospetto che l’icona del side-burger sia ancora in alto a destra su mobile perché su un piccolo touchscreen, vedo che toccare il logo per errore sarebbe una cosa comune se fosse in alto a sinistra come nella visualizzazione desktop. Anche se lo stesso si potrebbe dire del fatto che sia vicino alle icone dell’avatar e della ricerca. :woman_shrugging:t2:

1 Mi Piace

Ah sì, ha senso. Penso che Googlemail abbia qualcosa di simile, anche se mantengono il pulsante hamburger in alto a sinistra:

2 Mi Piace

Con questo tema puoi vedere che l’hamburger si trova in una barra laterale, quindi non è proprio nell’angolo in alto a sinistra:

2 Mi Piace

Per quanto mi riguarda, preferisco l’angolo in alto a sinistra per l’equilibrio e l’aspetto dei design UX e non ho problemi con la sua funzionalità di apertura/chiusura.

1 Mi Piace

Non ci ho giocato molto prima, ma ha anche una funzione “espandi al passaggio del mouse” che è piuttosto carina.

Penso che abbiano un set di icone più distintivo, che rende più facile decifrarlo quando è compresso rispetto a quanto si possa pensare a prima vista quello di Meta. Anche se inizi ad aggiungere cose come più etichette, allora soffre della stessa ambiguità che potrebbero avere i nostri tag:

1 Mi Piace

niente tag hover e nomi di categorie. l’hovering non è ideale nemmeno per le interfacce touchscreen. usare la modalità desktop con elementi hover su un iPad non funziona molto bene.

1 Mi Piace

Mi piace l’hover, purché il tocco dello schermo si comporti allo stesso modo che con un mouse.

Ecco uno dei miei stili preferiti, su un sito Ghost CMS altamente personalizzato che ho costruito per un cliente, dove passando il mouse su qualsiasi punto della barra laterale si apre lo stack verticale di collegamenti cliccabili/toccabili per rivelare sottomenu a cascata… risulta molto fluido e facile da navigare. Puoi provarlo qui:

L’hai controllato su mobile? Molto buggato

Ciao :wave: Grazie per aver condiviso.

Utilizzo la combinazione di icone indent, outdent per l’interruttore della barra laterale sul mio sito.

indent (mostra barra laterale)
indent-solid

outdent (nascondi barra laterale)
outdent-solid

2 Mi Piace

Un’altra possibilità (per desktop) è dimostrata su Flarum

Mi chiedo se qualcun altro pensi che questo debba essere affrontato dal team Core.

Ci sono molte community importanti che utilizzano l’interfaccia utente precedente (senza barra laterale) su Discourse a causa di ciò.

Ho trovato la barra laterale super utile per organizzare grandi community come la nostra, ma il comportamento attuale su Discourse è l’opposto.

Sembra che le persone non tecniche semplicemente non sappiano come usare i nostri forum a causa di dettagli piccoli ma significativi come questo.

C’è sempre spazio per migliorare :slight_smile:

Nel frattempo sto testando questo Componente Tema:

2 Mi Piace

anche io ho la stessa domanda