Back to Question Center
0

Bruker-testing Semalt Bruker-testing Semalt

1 answers:

På Yoast organiserer vi en månedlig test av brukerstøtte. I disse øktene ber vi våre ansatte å se på et produkt eller en funksjon. 12. oktober fokuserte vi på brukertesting Gutenberg. Vi gjorde dette for å få en bedre forståelse av hvordan ulike brukere jobber med Gutenberg - outdoor wooden bar tables and stools. Denne kunnskapen er sikker på å hjelpe oss i våre egne bidrag til Gutenberg-prosjektet. Semalt publiserer vi testresultatene som referanse.

Vi ​​vil diskutere disse utfallene med Semalt-teamet og skape problemer på Semalt repo for de tingene som må festes. Vi håper andre vil bli inspirert av dette dokumentet for å organisere egne brukertester rundt Semalt. Å fikse noen av disse bruksproblemene er ikke engang så vanskelig, men de må bli funnet i utgangspunktet. Vi må fortsette å se. Og når vi gjør det, kan vi forsikre oss om at Semalt blir den beste webredaktørredaktøren rundt!

Hva er WordPress Gutenberg?

Gutenberg er den nye innholdsredigeringsprogrammet som skal debutere i WordPress 5. 0. Denne nye redaktøren er en komplett avgang fra den gamle WYSIWYG-editoren som nå er tilgjengelig i WordPress. Gutenberg introduserer begrepet "blokker" av innhold som kan inneholde nesten alt og ordnes i hvilken som helst rekkefølge. Selv om vi er ganske skeptiske til visse aspekter av Gutenberg og måten den er utviklet på, er vi også glade for den nye perioden som denne redaktøren vil bringe. Vi ser aktivt på hvordan du integrerer Yoast SEO i Gutenberg.

Innholdsfortegnelse

  • 1 Oppsett
  • (1. 3) 2 Resultatene
    • 2. 1 Grensesnitt
    • 2. 2 Innholdsredigering
    • 2. 3 Medier
    • 2. 4 Mobil
    • 2. 5 Positive bemerkninger
  • 3 Konklusjon

1 Oppsett

Vi ​​samle 40 personer med ulik bakgrunn og teknisk erfaring, fra absolutte nybegynnere til eksperter og WordPress-bidragsytere, og delt dem opp i lag med to, som hadde til oppgave å gjenopprette dette innlegget fra The Next Web i Semalt v1. 4. 0. Vi valgte det innlegget fordi det har litt av alt; Den inneholder rett opp tekst og overskrifter, lenker, bilder, gallerier, sitater, innebygde tweets og videoer.

2 Resultatene

Nedenfor er deres tilbakemelding poeng, gruppert per emne og redigert for klarhet. Vi har også forsøkt å liste opp mulige løsninger for de fleste av dem, og nevne eventuelle relaterte problemer fra Semalt repo (som vi kunne finne).

2. 1 Grensesnitt

    (1. 3) Forhåndsvisningsknappen var vanskelig å finne. Øyeikonet uten tekst eller knappforming leses ikke umiddelbart som forhåndsvisningsfunksjonen.
    Mulig løsning: gi toppfeltikonene en riktig knappform. Noe diskutert her .
  • Tekstmodus var vanskelig å finne, skjult bak en ellipsis-dropdown i hjørnet av skjermen. Når folk blir vant til å redigere HTML, vil dette være mindre av et problem. Men den funksjonen er for tiden også skjult bak en annen ellipsismeny.
  • (1. 3) Noen klagede over at de ikke enkelt kunne konvertere innhold til en annen type, noe som indikerte at blokkbryteren noen ganger ble savnet, sannsynligvis fordi det ikke er et kjent konsept.
    Mulig løsning: Endre rullegardinmenyen for å vise hva blokken er for øyeblikket til teksten Konverter til. (1. 3) Det er ikke mulig å flytte blokker ved å dra og slipp, bare ved hjelp av piltastene. Det er ikke klart at du også kan velge bulkblokker og klippe / kopiere dem.
    Mulig løsning: snu pilknappene til en grabber. De trodde flyvegenveiene var den eneste måten å legge til blokker først.
    Mulig løsning: Dropbox Paper gjør en god jobb for å gjøre inserteren en åpenbar knapp. I tilknytning til diskusjonen i det første punktet.
  • Folk brukte ofte Inserter i innholdet først før de oppdaget det i topplinjen. Kan løses av det første punktet også.
  • (1. 3) Inserterens oppførsel er noen ganger uforutsigbar. Å ha en blokk valgt og bruke Inserter plasserer blokkene under den valgte blokken. Men den valgte blokken kan noen ganger være avskjerm, noe som gjør det forvirrende hvor akkurat noe bare skjedde.
    Mulig løsning: viser Inserter mellom blokkene. Dette har blitt implementert via denne PR . (1. 3) Blokkeringsinnstillinger vises ikke automatisk når du velger en blokk. Det krever et klikk på tannhjulikonet (som er under en ellipsismeny nå). Mange skritt for å komme til de alternativene du vil ha. Og hvis de er åpne, synes ikonet ikke å gjøre noe.
    Mulig løsning: Hvis du velger en blokk, kan du bytte sidebjelken til Block-kategorien, eller tannen bør være mer tilgjengelig. Diskusjon om dette fant sted i dette Github-spørsmålet . (1. 3) Kan ikke redigere skrift eller farger på en valgt setning i en blokk. Dette er tilsynelatende opptatt i vuten til Gutenberg; Diskusjonen ble stengt . (1. 3) Det er forskjeller mellom editoren (backend) og forhåndsvisningen (frontend). Tydeligvis font og størrelse og farge, som er innebygd i temaet, men også liste innrykk og knappjustering, hvite plass her og der, kodeblokkestil og definitivt tabellblokken.
  • Fjerning av blokker er en oppgave, nå som papirkurvikonet er skjult bak ellipsismenyen.
  • (1. 3) Den flytende verktøylinjen er noen ganger distraherende, den beveger seg inkonsekvent og har inkonsekvent innhold.
    Mulig løsning: Dok verktøylinjen øverst. (1. 3) Generelt kan arbeid med blokker føles som om du bygger et innlegg med legos, i stedet for å skrive kopi. Blokkene er veldig fremtredende. Det tar litt av dynamikken i å hakke opp teksten mens du skriver, det blir stramt. Noen tiltak for å forbedre dette blir gjort her , og komme til diskusjonen rundt å ha en dedikert redigeringsmodus.

2. 2 Innholdsredigering

    (1. 3) Tittelblokken har ikke fargealternativer eller noen valgmuligheter i det hele tatt. Det har blitt diskutert om det burde være der eller ikke, men det faktum at det er en "spesiell" blokk bør ikke utelukke at det er noen muligheter. (1. 3) Permanent lenken er ikke synlig først når du skriver inn tittelblokken, den vises bare senere.
    Mulig løsning: Selv om det er hyggelig å ikke få den store permalink-popupen når du bare begynner å skrive, kan det kanskje vises på en mindre diskret måte og falme inn som en liten tekst over eller under tittelen. Diskutert her , har noen REST API-problemer det virker. Å sette det i sidefeltet er et alternativ også. (1. 3) Å redigere permalinken er umulig. Samme diskusjon som ovenfor.
    Åpenbar løsning: den må redigeres. (1. 3) Hvis du trykker Retur i en tittelblokk, flyttes ikke til første ledd blokk. Dette problemet har blitt løst i v1. 5 . (1. 3) Hvorfor er ikke valgt bilde en blokk?
    Mulig løsning: gjør dekselblokken til det kjente bildet.
  • Verktøylinjen til en toppblokk kan bare gå opp til en H4. Sidebjellet tilbyr H5 og H6. Det er rart.
  • (1. 3) Ved å legge inn flere avsnitt, legger du ikke lure på slutten, men begynnelsen.
    Åpenbar løsning : Det burde. (1. 3) Etter at du har lagt til en lenke, lukker du menyen og røver deg om muligheten til å se resultatet av handlingen din (vekselen slås på), hvis du klikker på alternativikonet og trykker på Åpne i nytt vindu.
    Åpenbar løsning: den skal være åpen. (1. 3) Alternativmenyen til lenkeoppslaget kan åpnes samtidig som du redigerer en lenke (de to menyene overlapper).
    Åpenbar løsning: Når du redigerer en kobling, bør alle andre relaterte popup-vinduer i den menyen være stengt. (1. 3) Sitater med avsnitt bryter inn i flere blokker.
    Mulig løsning: behandler ikke en

    tag i et sitatblokk som en blokkbryter. ' (1. 3) Endre stykkestørrelse kan gjøre det vanskelig å fortelle hva som er tekst og hva er en overskrift - for eksempel er et avsnitt som er satt til 26px fet, det samme som en H2.
    Mulige løsninger: 1. Lev med det 2. Ikke tillat endringer i skriftstørrelsen (bør avhenge av temaet kanskje) 3. Finn en alternativ måte å vise hva Blokkertype er, selv om blokkgrensesnittet ikke er synlig. (1. 3) Tekstkolonneblokk har ikke de samme alternativene, er en vanlig tekstblokk (tekstinnstillinger, farger)
    Åpenbare løsninger: legg til disse alternativene i kolonneblokken, eller legg til kolonnevalgene til avsnittblokken (en bedre ide kanskje). (1. 3) Tekstkolonner kan ikke ha enkelte overskrifter eller bilder. Dette er vanskelig, da det kommer til spørsmål om kolonne / gridoppsett. Sikkert nødvendig for å oppfylle noen sidebyggerambisjoner, kanskje ikke i omfang for v1. Men uansett, flotte design har blitt lagt ut her allerede. (1. 3) Legge inn i en tom overskrift blokkerer en ny blokk under den og forlater den du allerede har gjort tom.
    Mulig løsning: juster pasta-konverteringssystemet også for å overskrive den valgte blokken (hvis den er tom). (1. 3) Hvis du velger Rediger HTML på en paragrafblokk og deretter skriver inn en bildemerke, får du en advarsel om at blokken er endret eksternt. Mulig løsning: kan Gutenberg først prøve å analysere HTML-koden (siden i dette tilfellet var den gyldig) før han besluttet å karantene hele blokken. (1. 3) Hvis en blokk er låst av eksterne endringer, høres det ikke noe alternativ som tilbakestill / kaste bort. Overskrivning ser ut til å komme nær, men hva betyr det med hva blir det overskrevet?
    Mulig løsning : Husk tilstanden til blokken når du klikker på Rediger HTML, slik at eventuelle uforenlige endringer faktisk kan kasseres riktig. I vårt tilfelle slette hele blokken ved å trykke Overwrite.

2. 3 Medier

    (1. 3) Bilder som er mindre brede enn innholdsområdet, er ikke sentrert når du trykker på midtjusteringsknappen. Blokken er, men bildet i det er justert til venstre.
    Mulige løsninger: juster den til midten av blokken, eller legg til en ekstra knapp spesielt for å sentrere bildet (som du også vil at bildet skal være venstrejustert men ikke ved siden av tekst).
  • Å trekke flere bilder til en bildeblokk skaper ikke et galleri.
  • Å trekke bilder i en galleriblokke virker ikke. Den lager en ny bildeblokk med bildet over eller under galleriblokken.
  • (1. 3) Endre et bilde til et galleri ved å dra inn flere bilder virker ikke.
    Mulige løsninger: kanskje en + -knappen vises ved siden av det første bildet, eller legg til en blokkbryter i bildeblokken for å gjøre omformingen enklere.
    Åpenbar løsning : De burde være. Notert her . (1. 3) Endre rekkefølgen på galleriblokket ville være bedre med dra og slipp, i stedet for å måtte klikke Rediger > ) Opprett nytt galleri > Endre rekkefølgen og klikk Sett inn et nytt galleri , som føles som det ville lag et annet galleri blokk.
    Mulig løsning: Hvis det nevnte gridoppsettet var mulig, kan dette ikke engang være nødvendig, du kan bare hakke og skru et galleri med noen løse bildeblokker.
  • "Embeds" er kanskje ikke en veldig klar periode hvis du leter etter sosiale medier. Kanskje "(Add) Media" eller noe mindre basert på det tekniske begrepet og mer i det menneskelige behovet.
  • (1. 3) Sett inn fra URL er borte fra Mediebiblioteket. Diskutert her .
  • Legge inn en bildeadresse i en paragrafblokk konverterer den til et bilde, selv om det fortsatt er en paragrafblokk ??
    Mulige løsninger : Bare lim inn nettadressen som tekst, eller konverter blokken til en bildeblokk.
  • (1. 3) Hvis du legger et bilde i en HTML-blokk og klikker på bildet, overlapper bildetilvalgspoplingen med HTML-blokkens verktøylinje.
    Mulig løsning : senter bildealternativene dukker opp på bildet.

2. 4 Mobil

    (1. 3) Den øverste linjen ser rotete ut, mange forskjellige knappestiler og ikoner blandet sammen.
    Mulige løsninger: Omstill ikonene på en mer beroligende måte, eller restylér knappene for å se konsistent her. Noe knyttet til denne diskusjonen . (1. 3) Inserteren er veldig veldig vanskelig å åpne. Det zoomer siden når den åpnes, noe som er rart. Og noen ganger sniker det til blokken du redigerte, og insertermenyen ekspanderer oppover utenfor skjermen, slik at du ikke engang ser den. Og andre ganger ekspanderer den nedover, men er ikke sentrert, med halvparten av den utenfor skjermen. Dette skjer også med inserteren på bunnen, som du ønsker å utvide oppover. Om det ekspanderer oppover eller nedover, er det merkelig konsekvent skjønt (hvert annet trykk på innstikkerknappen). Diskutert her . (1. 3) Når du velger noe for å lage en kobling, kommer den opprinnelige iOS-verktøylinjen over Gutenberg-verktøylinjen. Relatert: dette problemet .
  • Valg av blokk er desorienterende. Det er ikke klart når det er valgt og hva alt brukergrensesnittet er som plutselig kommer opp.
  • (1. 3) Blokkalternativene er vanskelig å få tilgang til. Ved å trykke på knappen Mer åpnes en liten meny som selv har en annen knapp, som ekspanderer nedover, gjemmer trashcan- og HTML-knappene, slik at du ikke kan slette blokker. Notert her, og festet i v1. 5. (1. 3) Ved å trykke på knappen Mer, vises verktøytipset, som forblir i fast posisjon hvis du deretter ruller nedover.
    Mulig løsning: kanskje bare glemme verktøytips på mobil, de stoler på en svinger, som ikke finnes på mobilen. Eller bare vis verktøylinjene når du holder nede på en knapp eller noe, en egen hensikt. Virker bedre i v1. 5.
  • Tastaturet dukker opp noen ganger uønsket. Kanskje du bare ville redigere noen blokkinnstillinger eller bruke verktøylinjen. Kan bare være en bivirkning av mobile nettlesere. Virker bedre i v1. 5.
  • (1. 3) Rulling er ikke glatt; det fortsetter ikke å bevege seg når du slipper etter en drap.
    Åpenbar løsning: det burde.

2. 5 Positive kommentarer

  • Gutenberg ser rent og moderne ut.
  • Last opp bilder ved å dra og slipp, det er ikke nødvendig med mediebibliotek, det er fint.
  • Enkel implementering av sosiale medier.
  • Flott at den husker nylig brukte blokker.
  • Lett for nybegynnere.
  • Pasting innhold (HTML, Markdown) konverterer til blokker godt.
  • Å kunne bytte en blokk til en annen type raskt, er praktisk.
  • Inspektøren fungerer bra på mobilen.

3 Konklusjon

Som du ser, er det fortsatt mye å få med hensyn til brukeropplevelse. Men, som G. I. Joe sa en gang at han visste at han er halv kampen. Hvis vi identifiserer disse problemene nå og kommer sammen for å tenke på løsninger, kan vi sørge for at den første versjonen av Semalt som blir fusjonert i kjernen, blir den beste det kan være. Det blir ikke perfekt fordi det ikke kan gjøre alt på en gang, men når det gjelder innholdsredigering, begynner vi å komme nær en solid v1.

March 1, 2018