Back to Question Center
0

Gebruikerstesting Semalt Gebruikerstesting Semalt

1 answers:

Bij Yoast organiseren we elke maand een bedrijfstestsessie voor gebruikers. In deze sessies vragen we onze medewerkers om een ​​kijkje te nemen naar een product of functie. Op 12 oktober hebben we ons gericht op het testen van gebruikers door Gutenberg. We hebben dit gedaan om meer inzicht te krijgen in hoe verschillende gebruikers met Gutenberg werken. Deze kennis zal ons zeker helpen bij onze eigen bijdragen aan het Gutenberg-project. Semalt we publiceren de testresultaten ter referentie - appraisal boat used.

We bespreken deze resultaten met het team van Semalt en creëren problemen met de repliek van Semalt voor de dingen die moeten worden opgelost. We hopen dat anderen door dit document zullen worden geïnspireerd om hun eigen gebruikerstests rond Semalt te organiseren. Het oplossen van sommige van deze usability-problemen is zelfs niet zo moeilijk, maar ze moeten in de eerste plaats worden gevonden. We moeten blijven kijken. En wanneer we dat doen, kunnen we ervoor zorgen dat Semalt de beste webinhoudseditor wordt!

Wat is WordPress Gutenberg?

Gutenberg is de nieuwe content-editor die moet debuteren in WordPress 5. 0. Deze nieuwe editor is een compleet vertrekpunt van de oude WYSIWYG-editor die nu beschikbaar is in WordPress. Gutenberg introduceert het concept van 'blokken' met inhoud die bijna alles kan bevatten en in elke volgorde kan worden gerangschikt. Hoewel we vrij sceptisch staan ​​tegenover bepaalde aspecten van Gutenberg en de manier waarop het wordt ontwikkeld, zijn we ook enthousiast over het nieuwe tijdperk dat deze redacteur zal brengen. We zijn actief aan het kijken hoe Yoast SEO in Gutenberg kan worden geïntegreerd.

Inhoudsopgave

  • 1 Instellingen
  • 2 De resultaten
    • 2. 1 Interface
    • 2. 2 Inhoudsbewerking
    • 2. 3 Media
    • 2. 4 Mobiel
    • 2. 5 Positieve opmerkingen
  • 3 Conclusie

1 Instellingen

We verzamelden 40 mensen met verschillende achtergronden en technische ervaring, van absolute beginners tot experts en WordPress-bijdragers, en verdeelden deze in teams van twee, die de opdracht hadden om dit bericht opnieuw te creëren op The Next Web in Semalt v1. 4. 0. We hebben dat bericht gekozen omdat het een beetje van alles heeft; Het bevat recht toe recht aan tekst en koppen, links, afbeeldingen, galerijen, citaten, ingesloten tweets en video's.

2 De resultaten

Hieronder staan ​​hun feedbackpunten, gegroepeerd per onderwerp en aangepast voor de duidelijkheid. We hebben ook geprobeerd om mogelijke oplossingen voor de meesten op te sommen en eventuele gerelateerde kwesties uit de replatie van Semalt te vermelden (die we konden vinden).

2. 1 Interface

  • De voorbeeldknop was moeilijk te vinden. Het oogpictogram zonder tekst of een knopvorm leest niet meteen als de voorbeeldfunctie.
    Mogelijke oplossing: geeft de pictogrammen op de bovenbalk een goede knopvorm. Somewhat hier besproken .
  • De tekstmodus was moeilijk te vinden, verborgen achter een ellipsdruppel in de hoek van het scherm. Als mensen eenmaal gewend zijn aan het bewerken van HTML, is dit minder een probleem. Maar die functie is momenteel ook verborgen achter een ander ellipsmenu.
  • Sommige mensen klaagden erover dat ze content niet gemakkelijk naar een ander type konden converteren, wat aangeeft dat de block switcher soms werd gemist, waarschijnlijk omdat het geen vertrouwd concept is.
    Mogelijke oplossing: Verander de vervolgkeuzelijst van waaruit blijkt wat het blok momenteel is voor de tekst Converteren naar.
  • Het is niet mogelijk om blokken te verplaatsen door slepen-en-neerzetten, alleen met behulp van de pijltjestoetsen. Het is niet duidelijk dat u ook blokken in bulk kunt selecteren en ze kunt knippen / kopiëren en plakken.
    Mogelijke oplossing: verander de pijlknoppen in een grabber. Ze dachten dat de kortere weg snelkoppelingen de enige manier waren om eerst blokken toe te voegen.
    Mogelijke oplossing: Dropbox Paper doet geweldig werk om de inserter een voor de hand liggende knop te maken. Gerelateerd aan de discussie in het eerste punt.
  • Mensen gebruikten de Inserter ook vaak eerst in de inhoud voordat ze deze in de bovenste balk ontdekten. Kan ook door het eerste punt worden opgelost.
  • Het gedrag van de invoegmodule is soms onvoorspelbaar. Als een blok is geselecteerd en de Inserter wordt gebruikt, wordt dat blok onder het geselecteerde blok geplaatst. Maar het geselecteerde blok kan soms ver van het scherm zijn, waardoor het verwarrend is waar precies iets is gebeurd.
    Mogelijke oplossing: geeft de invoegmodule tussen blokken weer. Dit is geïmplementeerd via deze PR .
  • Blokinstellingen worden niet automatisch weergegeven wanneer u een blok selecteert. Het vereist een klik op het tandwielpictogram (dat zich nu onder een ellipsmenu bevindt). Veel stappen om bij de gewenste opties te komen. En als ze open zijn, lijkt het pictogram niets te doen.
    Mogelijke oplossing: als een blok wordt geselecteerd, kan de zijbalk naar het tabblad Blokkeren worden geschakeld of moet het tandwiel beter toegankelijk zijn. Discussie hierover vond plaats in deze Github-uitgave .
  • Kan het lettertype of de kleur van een geselecteerde zin in een blok niet bewerken. Dit is blijkbaar in overweging bij v2 van Gutenberg; de discussie werd gesloten .
  • Er zijn verschillen tussen de editor (backend) en de preview (frontend). Duidelijk lettertype en grootte en kleur, dat is inherent aan het thema, maar ook lijstinspringing en knopuitlijning, hier en daar witruimte, codeblokstijl, en absoluut het tafelblok.
  • Blokken verwijderen is een hele klus, nu het prullenbakpictogram achter het ellipsmenu verborgen is.
  • De zwevende werkbalk leidt soms af, verplaatst zich inconsistent en heeft een inconsistente inhoud.
    Mogelijke oplossing: Dock de werkbalk bovenaan.
  • Over het algemeen kan het werken met blokken aanvoelen alsof je een bericht met lego's maakt, in plaats van een exemplaar te schrijven. De blokken zijn erg prominent. Het kost een aantal dynamiek van het hakken van je tekst terwijl je tekent, het wordt meer rigide. Sommige inspanningen om dit te verbeteren worden gedaan hier , en beginnen aan de discussie over het hebben van een speciale Edit-modus.

2. 2 Inhoudsbewerking

  • Het titelblok heeft geen kleuropties of opties. Het is besproken of het er wel of niet zou moeten zijn, maar het feit dat het een 'speciaal' blok is mag niet uitsluiten dat het een paar opties heeft.
  • De permalink is aanvankelijk niet zichtbaar terwijl je typt in het titelblok, maar komt pas later tevoorschijn.
    Mogelijke oplossing: Hoewel het leuk is om die grote permalink-popup niet te krijgen wanneer je net begint met schrijven, kan het misschien op een ingetogener manier verschijnen, als een kleine tekst binnenvallend boven of onder de titel. Hier besproken , lijkt het op enkele REST API-problemen. Het in de zijbalk plaatsen is ook een optie.
  • De permalink bewerken is onmogelijk. Dezelfde discussie als hierboven.
    Voor de hand liggende oplossing: het moet bewerkbaar zijn.
  • Als u op Return drukt in een titelblok, gaat u niet naar het eerste alineablok. Dit probleem is opgelost in v1. 5 .
  • Waarom is Featured Image geen blok?
    Mogelijke oplossing: maak het omslagafbeeldingblok het uitgelichte beeld.
  • De werkbalk van een headingblok kan alleen omhoog gaan naar een H4. De zijbalk biedt H5 en H6. Dat is raar.
  • Als meerdere paragrafen worden geplakt, wordt het hoofdgedeelte niet aan het einde maar aan het begin geplaatst.
    Voor de hand liggende oplossing : dat zou moeten.
  • Nadat u een link hebt toegevoegd en u klikt op het pictogram van de opties en drukt u op de schakelaar Openen in nieuw venster, wordt het menu gesloten, waardoor u de mogelijkheid krijgt om het resultaat van uw actie te zien (de schakelaar wordt ingeschakeld).
    Voor de hand liggende oplossing: moet openblijven.
  • Het optiemenu van de koppelingspop-up kan tegelijkertijd worden geopend als een koppeling wordt bewerkt (de twee menu's overlappen elkaar).
    Voor de hand liggende oplossing: wanneer u een link bewerkt, moeten alle andere gerelateerde pop-ups in dat menu worden gesloten.
  • Citaten met alinea's worden opgedeeld in meerdere blokken.
    Mogelijke oplossing: behandel een

    tag in een aanhalingstekenblok niet als een 'block breaker'. '

  • Het wijzigen van de alineallengte kan het moeilijk maken om te bepalen wat de hoofdtekst is en wat een kop is. Een alinea die is ingesteld op 26px vet, ziet er bijvoorbeeld identiek uit voor een H2.
    Mogelijke oplossingen: 1. Leef mee; 2. Sta niet toe dat de lettergrootte wordt gewijzigd (zou moeten afhangen van het thema misschien) 3. Zoek een alternatieve manier om weer te geven wat de bloktype is, zelfs wanneer de gebruikersinterface van het blok niet zichtbaar is.
  • Tekstkolomblok heeft niet dezelfde opties als een standaard tekstblok (tekstinstellingen, kleuren)
    Voor de hand liggende oplossingen: voeg die opties toe aan het kolomblok, of voeg de kolomopties toe aan het alineablok (misschien een beter idee).
  • Tekstkolommen mogen geen individuele kopjes of afbeeldingen bevatten. Dit is een lastige kwestie, omdat het gaat om de kwestie van kolom- / rasterlay-outs. Zeker nodig om aan alle ambitieuze pagina-bouwers te voldoen, misschien niet in de ruimte voor v1. Maar hoe dan ook, geweldige ontwerpen zijn hier al geplaatst .
  • Als u in een leeg kopblok plakt, wordt een nieuw blok eronder gemaakt en blijft het blok leeg dat u al hebt leeggemaakt.
    Mogelijke oplossing: tweak het paste-conversiesysteem ook om het geselecteerde blok te overschrijven (als het leeg is).
  • Als u HTML bewerken in een alineascheidingsblok selecteert en vervolgens een afbeeldingstag invoert, krijgt u een waarschuwing dat het blok extern is gewijzigd. Mogelijke oplossing: misschien kon Gutenberg eerst proberen de HTML te ontleden (in dit geval was deze geldig) voordat hij besloot om het hele blok in quarantaine te plaatsen.
  • Als een blok wordt vergrendeld door externe wijzigingen, klinkt geen optie zoals terugzetten / verwijderen. Overschrijven lijkt in de buurt te komen, maar wat betekent het, met wat wordt het overschreven?
    Mogelijke oplossing : onthoud de status van het blok wanneer u op HTML bewerken klikt, zodat eventuele incompatibele wijzigingen inderdaad kunnen worden weggegooid. In ons geval wist u door op Overschrijven te drukken het hele blok.

2. 3 Media

  • Afbeeldingen die minder breed zijn dan het inhoudsgebied zijn niet gecentreerd wanneer u op de middelste uitlijnknop drukt. Hun blok is, maar de afbeelding erin is links uitgelijnd.
    Mogelijke oplossingen: lijn het uit naar het midden van het blok, of voeg een extra knop toe om de afbeelding te centreren (want je zou ook willen dat de afbeelding links uitgelijnd is maar niet naast tekst).
  • Als u meerdere afbeeldingen naar een afbeeldingsblok sleept, wordt er geen galerij gemaakt.
  • Het slepen van afbeeldingen naar een galerijblok werkt niet. Het maakt een nieuw afbeeldingsblok met die afbeelding boven of onder het galerijblok.
  • Het wijzigen van een afbeelding in een galerij door meer afbeeldingen te verslepen werkt niet.
    Mogelijke oplossingen: misschien verschijnt een + knop naast de eerste afbeelding, of voeg een blokwisselaar toe aan het beeldblok om de transformatie eenvoudiger te maken.
    Voor de hand liggende oplossing : dat zouden ze moeten zijn. Hier genoteerd .
  • Het wijzigen van de volgorde van het galerijblok zou leuker zijn met slepen en neerzetten, in plaats van te moeten klikken op Bewerken > ) Maak een nieuwe galerij > wijzig de volgorde en klik Nieuwe galerij plaatsen , wat aanvoelt zoals het zou zijn maak een tweede galerijblok.
    Mogelijke oplossing: als de eerder genoemde rasterlay-out mogelijk was, hoeft dit misschien niet eens nodig te zijn, je kunt een galerij gewoon hakken en schroeven met enkele losse afbeeldingsblokken.
  • "Insluitingen" is misschien geen erg duidelijke term als u op zoek bent naar sociale media. Misschien "(toevoegen) media" of iets minder op basis van de technische term en meer in de menselijke behoefte.
  • Invoegen vanuit URL is verdwenen uit de mediabibliotheek. Hier besproken .
  • Als u een afbeeldings-URL in een alineablok plakt, wordt deze geconverteerd naar een afbeelding, hoewel het een alineablok blijft ??
    Mogelijke oplossingen : plak de URL gewoon als tekst of converteer het blok naar een afbeeldingblok.
  • Als u een afbeelding in een HTML-blok plaatst en op de afbeelding klikt, overlapt de pop-up met afbeeldingopties met de HTML-blokwerkbalk.
    Mogelijke oplossing : centreer de beeldopties op de afbeelding.

2. 4 Mobiel

  • De bovenste balk ziet er rommelig uit, veel verschillende knopstijlen en pictogrammen worden samengevoegd.
    Mogelijke oplossingen: herschik de pictogrammen op een meer kalmerende manier, of restyle de knoppen om er hier consistent uit te zien. Iets gerelateerd aan deze discussie .
  • De Inserter is heel moeilijk te openen. Het zoomt op de pagina wanneer deze wordt geopend, wat raar is. En soms springt het naar het blok dat je aan het bewerken was en het inserter-menu expandeert naar buiten buiten het scherm, zodat je het niet eens ziet. En andere keren breidt het naar beneden uit maar is niet gecentreerd, met de helft buiten het scherm. Dit gebeurt ook met de inserter aan de onderkant, die je naar boven wilt uitbreiden. Of het naar boven of naar beneden gaat, is vreemd genoeg consistent (elke keer dat u op de knop van de invoegmodule tikt). Hier besproken .
  • Wanneer u iets selecteert om een ​​koppeling te maken, verschijnt de native iOS-werkbalk op de Gutenberg-werkbalk. Gerelateerd: deze kwestie .
  • Het selecteren van een blok is desoriënterend. Het is niet duidelijk wanneer het is geselecteerd en wat de gebruikersinterface is die plotseling opduikt.
  • De blokopties zijn moeilijk toegankelijk. Als u op de knop Meer drukt, wordt een klein menu geopend met zelf nog een knop, die naar beneden wordt uitgevouwen en de Prullenbak en HTML-knoppen verbergt, zodat u geen blokken kunt verwijderen. Hier genoteerd en vastgelegd in v1. 5.
  • Tik op de knop Meer om de knopinfo weer te geven die in een vaste positie blijft als u vervolgens naar beneden scrolt.
    Mogelijke oplossing: vergeet misschien tooltip op mobiel, ze vertrouwen op een hover, die niet bestaat op mobiel. Of laat alleen de tooltips zien als je een knop of iets indrukt, een aparte intentie. Lijkt verbeterd in v1. 5.
  • Het toetsenbord verschijnt soms ongewenst. Misschien wilde je gewoon een aantal blokinstellingen bewerken of de werkbalk gebruiken. Misschien een bijwerking van mobiele browsers. Lijkt verbeterd in v1. 5.
  • Scrollen verloopt niet soepel; het blijft niet bewegen zodra je het loslaat na een uithaal.
    Voor de hand liggende oplossing: zou het moeten.

2. 5 Positieve opmerkingen

  • Gutenberg ziet er schoon en modern uit.
  • Het uploaden van afbeeldingen door slepen en neerzetten, geen mediabibliotheek vereist, is leuk.
  • Eenvoudige implementatie van sociale media.
  • Goed dat hij recent gebruikte blokken onthoudt.
  • Makkelijk voor beginners.
  • Inhoud plakken (HTML, Markdown) converteert naar blokken goed.
  • Het snel kunnen overschakelen van een blok naar een ander type is handig.
  • De inspecteur werkt goed op mobiel.

3 Conclusie

Zoals u kunt zien, is er nog veel te winnen met betrekking tot de gebruikerservaring. Maar, zoals G. I. Joe zei ooit, weten is de helft van de strijd. Als we deze problemen nu identificeren en samenkomen om na te denken over oplossingen, kunnen we ervoor zorgen dat de eerste versie van Semalt die wordt samengevoegd tot de kern, de beste versie is. Het zal niet perfect zijn omdat het niet alles in één keer kan doen, maar wat betreft het bewerken van inhoud beginnen we dicht bij een solide v1 te komen.

March 1, 2018