Back to Question Center
0

Semalt test degli utenti Semalt test degli utenti

1 answers:

A Yoast, organizziamo una sessione di test degli utenti a livello aziendale ogni mese. In queste sessioni, chiediamo ai nostri dipendenti di dare un'occhiata a un prodotto o funzione. Il 12 ottobre ci siamo concentrati sul test degli utenti di Gutenberg. Lo abbiamo fatto per ottenere una migliore comprensione di come diversi utenti lavorano con Gutenberg. Questa conoscenza ci aiuterà sicuramente nei nostri contributi al progetto Gutenberg - chaise longue sdraio benessere. Semalt pubblichiamo i risultati del test come riferimento.

Discuteremo questi risultati con il team di Semalt e creeremo problemi sul repo di Semalt per le cose che devono essere risolte. Speriamo che gli altri siano ispirati da questo documento per organizzare i propri test utente attorno a Semalt. Risolvere alcuni di questi problemi di usabilità non è nemmeno così difficile, ma devono essere trovati in primo luogo. Dobbiamo continuare a cercare. E quando lo facciamo, possiamo assicurarci che Semalt diventi il ​​miglior editor di contenuti web in circolazione!

Che cos'è WordPress Gutenberg?

Gutenberg è il nuovo editor di contenuti che dovrebbe debuttare in WordPress 5. 0. Questo nuovo editor è una partenza completa dal vecchio editor WYSIWYG che è ora disponibile in WordPress. Gutenberg introduce il concetto di "blocchi" di contenuti che possono contenere quasi qualsiasi cosa e essere disposti in qualsiasi ordine. Anche se siamo abbastanza scettici su alcuni aspetti di Gutenberg e sul modo in cui è sviluppato, siamo anche entusiasti della nuova era che questo editor porterà. Stiamo attivamente valutando come integrare Yoast SEO in Gutenberg.

Indice

  • 1 Impostazione
  • 2 I risultati
    • 2. 1 Interfaccia
    • 2. 2 Modifica del contenuto
    • 2. 3 Media
    • 2. 4 Cellulare
    • 2. 5 Osservazioni positive
  • 3 Conclusione

1 Impostazione

Abbiamo raccolto 40 persone con background e esperienza tecnica diversi, da principianti assoluti a esperti e collaboratori di WordPress, e li abbiamo divisi in squadre di due persone, che sono state incaricate di ricreare questo post da The Next Web in Semalt v1. 4. 0. Abbiamo scelto quel post perché ha un po 'di tutto; Contiene testo e intestazioni dirette, collegamenti, immagini, gallerie, citazioni, tweet e video incorporati.

2 I risultati

Di seguito sono riportati i loro punti di feedback, raggruppati per soggetto e modificati per chiarezza. Abbiamo anche cercato di elencare le possibili soluzioni per la maggior parte di esse e menzionare eventuali problemi correlati dal repository Semalt (che abbiamo potuto trovare).

2. 1 Interfaccia

  • Il pulsante di anteprima era difficile da trovare. L'icona dell'occhio senza testo o una forma di pulsante non viene immediatamente letta come funzione di anteprima.
    Soluzione possibile: fornisce alle icone della barra superiore una forma di pulsante corretta. Un po ' discusso qui .
  • La modalità testo era difficile da trovare, nascosta dietro un menu a discesa con i puntini di sospensione nell'angolo dello schermo. Una volta che le persone si abituano a modificare HTML, questo sarà meno di un problema. Ma quella funzione è attualmente nascosta dietro un altro menu di ellissi.
  • Alcune persone si sono lamentate del fatto che non potevano facilmente convertire il contenuto in un tipo diverso, indicando che a volte lo switcher dei blocchi era mancato, probabilmente perché non era un concetto familiare.
    Possibile soluzione: cambia il menu a discesa per mostrare cosa è attualmente il blocco per il testo Converti in.
  • Non è possibile spostare i blocchi trascinandoli, solo con i pulsanti freccia. Non è chiaro che puoi anche selezionare in blocco i blocchi e tagliarli / copiarli e incollarli.
    Soluzione possibile: ruotare i pulsanti freccia in un grabber. Pensavano che le scorciatoie a comparsa fossero l'unico modo per aggiungere blocchi all'inizio.
    Soluzione possibile: Dropbox Paper fa un ottimo lavoro nel rendere l'inserter un pulsante ovvio. Relativo alla discussione nel primo punto.
  • Anche le persone spesso usavano l'Inserter nel contenuto prima di scoprirlo nella barra in alto. Potrebbe essere risolto anche dal primo punto.
  • Il comportamento di Inserter è a volte imprevedibile. Avere un blocco selezionato e usare l'Inseritore posiziona quel blocco sotto il blocco selezionato. Ma il blocco selezionato può a volte essere fuori dallo schermo, creando confusione dove esattamente è appena successo qualcosa.
    Soluzione possibile: visualizza l'Inseritore tra i blocchi. Questo è stato implementato tramite questo PR .
  • Le impostazioni di blocco non vengono visualizzate automaticamente quando si seleziona un blocco. Richiede un clic sull'icona a forma di ingranaggio (che è ora sotto un menu di puntini di sospensione). Un sacco di passaggi per arrivare alle opzioni che vuoi. E se sono aperti, l'icona sembra non fare nulla.
    Soluzione possibile: la selezione di un blocco potrebbe cambiare la barra laterale nella scheda Blocca, oppure l'ingranaggio dovrebbe essere più accessibile. La discussione su questo ha avuto luogo in questo problema di Github .
  • Impossibile modificare il carattere o il colore di una frase selezionata in un blocco. Questo è apparentemente in considerazione nella v2 di Gutenberg; la discussione è stata chiusa .
  • Ci sono differenze tra l'editor (back-end) e l'anteprima (frontend). Ovviamente carattere, dimensione e colore, che è inerente al tema, ma elencano anche indentazione e allineamento dei pulsanti, spazi bianchi qua e là, stile del blocco di codice e definitivamente il blocco del tavolo.
  • Rimuovere i blocchi è un lavoro ingrato, ora che l'icona del cestino è nascosta dietro il menu dei puntini di sospensione.
  • La barra degli strumenti mobile a volte distrae, si muove in modo incoerente e presenta contenuti incoerenti.
    Soluzione possibile: Aggancia la barra degli strumenti in alto.
  • In generale, lavorare con i blocchi può sembrare che stai costruendo un post con i lego, invece di scrivere una copia. I blocchi sono molto prominenti. Ci vuole un po 'di dinamismo per ridurre il testo mentre stai disegnando, diventa più rigido. Alcuni sforzi per migliorare questo sono stati fatti qui , e arrivare alla discussione intorno con una modalità di modifica dedicata.

2. 2 Modifica del contenuto

  • Il cartiglio non ha opzioni di colore o alcuna opzione. È stato discusso se dovrebbe esserci o meno, ma il fatto che si tratti di un blocco "speciale" non dovrebbe escluderlo dall'avere alcune opzioni.
  • Il permalink non è visibile inizialmente mentre si digita il blocco del titolo, ma compare solo più tardi.
    Possibile soluzione: Mentre è bello non ottenere quel grande popup di permalink quando inizi a scrivere, forse può apparire in un modo più discreto, sfumando come un piccolo testo sopra o sotto il titolo. Discusso qui , ha alcuni problemi API REST a quanto pare. Anche metterlo nella barra laterale è un'opzione.
  • L'editing del permalink è impossibile. Stessa discussione come sopra.
    Soluzione ovvia: deve essere modificabile.
  • La pressione di Return in a Title block non si sposta sul primo blocco di paragrafo. Questo problema è stato risolto in v1. 5 .
  • Perché l'immagine in primo piano non è un blocco?
    Soluzione possibile: rendere il blocco dell'immagine di copertina l'immagine in primo piano.
  • La barra degli strumenti di un Heading block può arrivare solo a un H4. La barra laterale offre H5 e H6. È strano.
  • Incollare più paragrafi non pone il cursore alla fine ma all'inizio.
    Soluzione ovvia : dovrebbe.
  • Dopo aver aggiunto un collegamento, se si fa clic sull'icona delle opzioni e si preme il pulsante Apri in nuova finestra, si chiude il menu, privandoti della possibilità di vedere il risultato della tua azione (l'attivazione della levetta).
    Soluzione ovvia: dovrebbe rimanere aperta.
  • Il menu delle opzioni del popup popup può essere aperto contemporaneamente alla modifica di un collegamento (i due menu si sovrappongono).
    Soluzione ovvia: quando si modifica un collegamento, tutti gli altri popup relativi a quel menu dovrebbero essere chiusi.
  • Le quotazioni con paragrafi si dividono in più blocchi.
    Soluzione possibile: non considerare un tag

    in un blocco di quote come un "interruttore di blocco". '

  • La modifica delle dimensioni del paragrafo può rendere difficile stabilire quale sia il testo del corpo e qual è l'intestazione - ad esempio, un paragrafo impostato su 26px in grassetto appare identico a un H2.
    Possibili soluzioni: 1. Vivere con esso 2. Non consentire modifiche alle dimensioni del carattere (forse dipende dal tema). 3. Trovare un modo alternativo per visualizzare ciò che il tipo di blocco è, anche quando l'interfaccia utente del blocco non è visibile.
  • Il blocco di colonna di testo non ha le stesse opzioni sono un blocco di testo normale (impostazioni di testo, colori)
    Soluzioni ovvie: aggiungi queste opzioni al blocco di colonne, o aggiungi le opzioni di colonna al blocco di paragrafo (forse un'idea migliore).
  • Le colonne di testo non possono avere intestazioni o immagini individuali. Questo è complicato, in quanto arriva alla questione dei layout di colonna / griglia. Sicuramente necessario per soddisfare tutte le ambizioni del costruttore di pagine, forse non in ambito per la v1. Ma a prescindere, i grandi progetti sono già stati pubblicati qui .
  • Incollare in un blocco di intestazione vuoto crea un nuovo blocco sotto di esso e lascia quello che hai già reso vuoto.
    Soluzione possibile: modificare il sistema di conversione della pasta anche per sovrascrivere il blocco selezionato (se è vuoto).
  • Se si seleziona Modifica HTML su un blocco di paragrafo e si digita un tag immagine, si riceve un avviso che il blocco è stato modificato esternamente. Soluzione possibile: forse Gutenberg poteva prima tentare di analizzare l'HTML (poiché in questo caso era valido) prima di decidere di mettere in quarantena l'intero blocco.
  • Se un blocco è bloccato da modifiche esterne, nessuna opzione suona come ripristina / elimina. La sovrascrittura sembra avvicinarsi, ma cosa significa, con che cosa verrà sovrascritto?
    Possibile soluzione : ricorda lo stato del blocco quando fai clic su Modifica HTML, quindi qualsiasi modifica incompatibile può essere effettivamente scartata correttamente. Nel nostro caso, premendo Sovrascrivi è stato cancellato l'intero blocco.

2. 3 Media

  • Le immagini che sono meno ampie rispetto all'area del contenuto non sono centrate quando si preme il pulsante di allineamento centrale. Il loro blocco è, ma l'immagine al suo interno è allineata a sinistra.
    Possibili soluzioni: allinearlo al centro del blocco, o aggiungere un pulsante extra appositamente per centrare l'immagine (come potresti anche volere che l'immagine sia allineata a sinistra ma non accanto al testo).
  • Il trascinamento di più immagini in un blocco immagine non crea una galleria.
  • Il trascinamento di immagini in un blocco di galleria non funziona. Crea un nuovo blocco immagine con quell'immagine sopra o sotto il blocco della galleria.
  • Cambiare un'immagine in una galleria trascinando più immagini non funziona.
    Possibili soluzioni: forse un pulsante + appare accanto alla prima immagine, o aggiungi uno switcher di blocchi al blocco immagine per semplificare la trasformazione.
    Soluzione ovvia : dovrebbero essere. Notato qui .
  • Cambiare l'ordine del blocco galleria sarebbe più bello con il trascinamento della selezione, invece di dover fare clic su Modifica > Crea nuova galleria > quindi modifica l'ordine e fai clic su Inserisci nuova galleria , che sembra che sarebbe crea un secondo blocco galleria.
    Possibile soluzione: se il layout di griglia di cui sopra fosse possibile, questo potrebbe non essere nemmeno necessario, puoi semplicemente tagliare e avvitare una galleria con alcuni blocchi di immagine liberi.
  • "Embeds" non è forse un termine molto chiaro se stai cercando social media. Forse "(Aggiungi) Media" o qualcosa di meno basato sul termine tecnico e più nel bisogno umano.
  • L'inserimento dall'URL è scomparso dal Catalogo multimediale. Discusso qui .
  • Incollare un URL immagine in un blocco di paragrafo lo converte in un'immagine, sebbene rimanga un blocco di paragrafo ??
    Soluzioni possibili : basta incollare l'URL come testo o convertire il blocco in un blocco immagine.
  • Se si inserisce un'immagine in un blocco HTML e si fa clic sull'immagine, il popup delle opzioni dell'immagine si sovrappone alla barra degli strumenti del blocco HTML.
    Possibile soluzione : centra le opzioni dell'immagine visualizzate sull'immagine.

2. 4 Cellulare

  • La barra in alto appare disordinata, un sacco di stili e icone di pulsanti diversi mescolati insieme.
    Possibili soluzioni: riorganizzare le icone in un modo più rilassante, o restyling i pulsanti per apparire coerenti qui. Un po 'in relazione con questa discussione .
  • L'Inseritore è molto difficile da aprire. Ingrandisce la pagina quando si apre, il che è strano. E a volte si aggancia al blocco che stavi modificando e il menu di inserimento si espande verso l'alto al di fuori dello schermo, quindi non lo vedi nemmeno. E altre volte si espande verso il basso ma non è centrato, con la metà fuori dallo schermo. Questo succede anche con l'inseritore in basso, che VUOI volere espandere verso l'alto. Se si espande verso l'alto o verso il basso è stranamente coerente (ogni altro tocca il pulsante di inserimento). Discusso qui .
  • Quando si seleziona qualcosa per creare un collegamento, la barra degli strumenti nativa di iOS si apre sulla barra degli strumenti di Gutenberg. Correlati: questo numero .
  • La selezione di un blocco è disorientante. Non è chiaro quando è selezionato e ciò che appare tutta l'interfaccia utente che si apre all'improvviso.
  • Le opzioni di blocco sono difficili da accedere. Premendo il pulsante Altro si apre un piccolo menu che a sua volta ha un altro pulsante, che si espande verso il basso, nascondendo i pulsanti Cestino e HTML in modo da non poter eliminare alcun blocco. Notato qui e fissato in v1. 5.
  • Toccando il pulsante Altro viene visualizzata la descrizione comando, che rimane in una posizione fissa se si scorre verso il basso.
    Soluzione possibile: forse dimentica semplicemente il tooltip su mobile, si basano su un hover, che non esiste sul cellulare. Oppure mostra solo i suggerimenti quando tieni premuto su un pulsante o qualcosa del genere, un intento separato. Sembra migliorato nella v1. 5.
  • La tastiera si apre a volte indesiderata. Forse volevi solo modificare alcune impostazioni del blocco o usare la barra degli strumenti. Potrebbe essere solo un effetto collaterale dei browser mobili. Sembra migliorato nella v1. 5.
  • Lo scorrimento non è regolare; non continua a muoversi una volta che hai lasciato andare dopo un colpo.
    Soluzione ovvia: dovrebbe.

2. 5 Commenti positivi

  • Gutenberg sembra pulito e moderno.
  • Il caricamento delle immagini mediante trascinamento della selezione, non richiede la libreria multimediale, è piacevole.
  • Facile implementazione dei social media.
  • Grande per il fatto che ricorda i blocchi usati di recente.
  • Facile per i principianti.
  • Incollare il contenuto (HTML, Markdown) converte bene i blocchi.
  • Essere in grado di passare rapidamente un blocco a un tipo diverso è conveniente.
  • L'ispettore funziona bene su cellulare.

3 Conclusione

Come puoi vedere, c'è ancora molto da guadagnare per quanto riguarda l'esperienza dell'utente. Ma, come G. I. Joe disse una volta, sapere è metà della battaglia. Se identifichiamo questi problemi ora e ci uniamo per pensare alle soluzioni, possiamo essere sicuri che la prima versione di Semalt che verrà unita al nucleo sarà la migliore possibile. Non sarà perfetto perché non può fare tutto in una volta, ma in termini di modifica del contenuto, stiamo iniziando ad avvicinarci a una solida v1.

March 1, 2018