Nuovi stili per il menu a tendina dell'intestazione / menu di notifica

Nel complesso penso che stiamo facendo molti progressi qui, il lato destro funziona, ma trovo il contrasto sul testo letto molto difficile da leggere e vedere, il grigio è un po’ triste.

Confronta con questo artefatto interattivo (cliccabile, provalo)

Mi piace abbastanza l’ultima opzione, perché è chiara e ordinata, ma anche le prime 2 vanno bene.

Pensieri? (anche cosa succede con Nathan… che avatar :slight_smile: )

(anche il raggio del bordo ridotto sembra un pochino meglio)

4 Mi Piace

Oggi alcuni dei designer e io abbiamo fatto del pairing e dell’iterazione sugli stili. Ecco dove siamo arrivati.

  • Riportare lo sfondo blu, ma leggermente più smorzato.
  • Mantenere il nuovo stile “read” per imitare gli elenchi di argomenti
  • Diminuire l’evidenziazione dello sfondo “attivo” dell’elemento di navigazione attivo
  • Mantenere lo sfondo del cerchio blu per le icone non lette


Sam, mi piacciono anche le prime due opzioni che mostra il tuo artefatto. Le esaminerò più a fondo. Per ora, penso che la nostra ultima iterazione ci porti in una situazione in cui la differenziazione è un po’ più chiara.

Per andare avanti, penso che avremmo bisogno di alcune modifiche al template e al testo.

CSI ENHANCE

Sembra normale

6 Mi Piace

L’ultimo sembra molto buono! Comunica chiaramente lo stato di non letto, ma è comunque molto leggero. Allo stesso modo, mi piace il primo (anche se non penso che il cerchio blu sia necessario, quindi in confronto l’ultimo vince). Tutti gli altri design sono “troppo” per il mio gusto personale.

Su mobile ricevo uno sfondo “rossastro” invece che blu.

Trovo il grigio chiaro molto difficile da leggere, sembra sbiadito. Forse proviamo a scurire solo la decorazione dell’avatar?

Il contrasto qui è semplicemente molto, molto difficile per gli occhi, specialmente sul testo non in grassetto.

Penso che sia questo il motivo per cui Gmail ha finito per usare il font-weight per la delineazione.

Anche su desktop, ricevo 2 blu diversi che creano confusione.

Sì, trovo interessanti questi commenti. Deve essere dovuto alla vicinanza, al grassetto, allo spazio e alla larghezza ridotta del testo.

Sto usando lo stesso colore per indicare “letto” che usano le nostre liste di argomenti.

Detto questo, penso che anche lo sfondo dell’icona abbia qualcosa a che fare con questo, motivo per cui mi piace il suggerimento di @keegan qui:

Un’altra opzione che vorrei implementare è il titolo inline con descrizione. Qualcosa del genere:

Questo accade al passaggio del mouse? O la lista mostra effettivamente 2 colori diversi di sfondo blu su elementi diversi?

Questo, sì due colori diversi. Devi ottenere un account per richiedere l’approvazione in locale per vederlo.

1 Mi Piace

Ah ok, gli stili si applicano a non letto. Aggiungerò del css per puntare anche a questo.

Puoi inviare uno screenshot dello sfondo rossastro su mobile?

1 Mi Piace

Gli ultimi aggiornamenti sono attivi da un paio di giorni. Mi chiedo cosa ne pensi tutti qui.

Per me va bene in generale, ma quel testo grigio chiaro mi infastidisce ancora. Preferirei che fosse nero. Possiamo provare? Lasciamo l’icona grigia ma manteniamo il testo in nero per le notifiche lette?

A parte questo, preferisco questo stile al nostro originale. Penso ancora che valga la pena esplorare opzioni più radicali, ma come iterazione mi sembra buono.

Inoltre @lindsey un grande cambiamento a cui dovremmo pensare è rendere gli avatar visibili per impostazione predefinita, non lo stiamo facendo e molte installazioni predefinite ottengono questa esperienza predefinita non ottimale:

Le modifiche apportate da @jordan.vidrine qui sono perfezionamenti rispetto a una re-immaginazione, il che è positivo

  • La selezione sembra un po’ migliore
  • Lo stile distinto delle icone per letto e non letto sembra migliore
  • I link blu nelle notifiche sono un’eccezione, è bello averli in nero.
3 Mi Piace

La modifica è stata unita.

1 Mi Piace

Huh, non ci abbiamo provato di recente? Pensavo che ci avessimo provato e avessimo deciso di non procedere per qualche motivo. Ma mi piace molto l’idea, il menu delle notifiche è molto più interessante e informativo con le avatar.

2 Mi Piace

Penso che un buon compromesso qui sia di impostarlo come predefinito nelle nuove installazioni

Penso che il motivo principale per cui abbiamo esitato siano le personalizzazioni apportate dalle persone

1 Mi Piace

@jordan-vidrine Penso che possiamo abilitare questo esperimento ora a livello globale su meta (e bloccare questo argomento) e vedere se qualcuno si lamenta, nel complesso penso che dove siamo ora sia meglio del nostro default.

@lindsey cosa ne pensi?

È un cambiamento evolutivo che è sottilmente migliore in alcuni modi.

3 Mi Piace

Fatto!

Abilitato per tutti gli trust_level_0 users.

3 Mi Piace

Trovo ancora più facile riconoscere la differenza tra bianco su blu e nero su bianco rispetto alla differenza tra bianco su blu e bianco su grigio scuro

Forse è perché l’icona è il primo posto in cui guardo.
È più importante per me dell’avatar. Perché, chi ha attivato la notifica è anche lì come testo, di cosa sono notificato è solo lì per i post spostati, altrimenti l’icona è l’unico indicatore.

2 Mi Piace

C’è stato un cambiamento riguardo al font o alla dimensione delle icone? La mia prima impressione è che siano un po’ più grandi ora, ma potrebbe essere a causa dello spazio bianco aggiunto. Questo crea una leggera discrepanza tra le icone di notifica e le icone del menu.

Inoltre, il padding sulla destra mi sembra un po’ troppo grande.

Nota a margine: sto usando lo zoom del browser al 90% (non sono sicuro di come ciò possa causare problemi, ma i browser a volte sono strani :smile: ).

L’ultima (e probabilmente definitiva) iterazione è ora attiva. Mi imposterò un promemoria sui segnalibri per la prossima settimana per unire se non ci saranno ulteriori commenti.

2 Mi Piace

Grazie per aver evoluto questa bella funzionalità. È molto meglio di com’era più di un anno fa.

Devo ammettere, tuttavia, che non sono completamente convinto dall’uso di una nuova intera interruzione di riga prima dell’elemento dettagliato.

Nel mio caso attuale puoi vedere quanto spazio viene risparmiato dal dettaglio che inizia subito dopo il nome utente e la separazione è comunque ottenuta dal tipo in grassetto del nome utente rispetto al peso inferiore del dettaglio.

Ma se manteniamo la possibilità di modificarlo tramite CSS, sono a posto.

1 Mi Piace

[quote=“merefield, post:85, topic:369574”]
Parlando di questo, ha senso avere una classe su questa div?:[/quote]

Sì, dovrebbe assolutamente avere una classe!@

1 Mi Piace