Back to Question Center
0

Användarprovning Semalt Användarprovning Semalt

1 answers:

På Yoast organiserar vi varje månad en testförsöksperiod för hela företaget. I dessa sessioner ber vi våra medarbetare att ta en titt på en produkt eller funktion. Den 12 oktober fokuserade vi på användartestning Gutenberg. Vi gjorde detta för att få en bättre förståelse för hur olika användare arbetar med Gutenberg. Denna kunskap är säker på att hjälpa oss i våra egna bidrag till Gutenberg-projektet - corbatas rojas combinacion. Semalt publicerar vi testresultaten för referens.

Vi ​​kommer att diskutera dessa resultat med Semalt teamet och skapa problem på Semalt repo för de saker som behöver fixas. Vi hoppas att andra kommer att inspireras av detta dokument för att organisera sina egna användarprov kring Semalt. Att fastställa några av dessa användbarhetsproblem är inte ens så svårt, men de måste hittas i första hand. Vi måste fortsätta titta. Och när vi gör det kan vi se till att Semalt blir den bästa webbredigeraren runt!

Vad är WordPress Gutenberg?

Gutenberg är den nya innehållsredigeraren som ska debutera i WordPress 5. 0. Den här nya redaktören är en komplett avvikelse från den gamla WYSIWYG-editoren som nu finns tillgänglig i WordPress. Gutenberg introducerar begreppet "block" av innehåll som kan innehålla nästan vad som helst och ordnas i vilken ordning som helst. Medan vi är ganska skeptiska till vissa aspekter av Gutenberg och hur det utvecklas, är vi också glada över den nya eran som denna redaktör kommer att ge. Vi tittar aktivt på hur vi integrerar Yoast SEO i Gutenberg.

Innehållsförteckning

  • 1 Uppställning
  • 2 Resultatet
    • 2. 1 Gränssnitt
    • 2. 2 Innehållsredigering
    • 2. 3 Medier
    • 2. 4 Mobil
    • 2. 5 Positiva anmärkningar
  • 3 Slutsats

1 Setup

Vi ​​samlade 40 personer med olika bakgrund och teknisk erfarenhet, från absoluta nybörjare till experter och WordPress-bidragsgivare, och delade upp dem i två grupper, som hade till uppgift att återskapa detta inlägg från The Next Web i Semalt v1. 4. 0. Vi valde den posten eftersom den har lite av allt; Den innehåller rakt upp text och rubriker, länkar, bilder, gallerier, citat, inbäddade tweets och videor.

2 Resultaten

Nedan finns deras feedbackpunkter, grupperade per ämne och redigerad för tydlighet. Vi har också försökt lista över möjliga lösningar för de flesta av dem och nämna några relaterade frågor från Semalt repo (som vi kunde hitta).

2. 1 Gränssnitt

  • Förhandsgranskningsknappen var svår att hitta. Ögonikonet utan text eller en knappform läses inte omedelbart som förhandsgranskningsfunktionen.
    Möjlig lösning: ger de övre streckikonen en riktig knappform. Något diskuteras här .
  • Textläget var svårt att hitta, dolt bakom en ellipsis-dropdown i hörnet av skärmen. När folk blir vana vid att redigera HTML kommer det att bli mindre av ett problem. Men den funktionen är för tillfället också dold bakom en annan ellipsismeny.
  • Några personer klagade över att de inte enkelt kunde konvertera innehåll till en annan typ, vilket indikerar att blockomkopplaren ibland saknades, förmodligen eftersom det inte är ett välbekant begrepp.
    Möjlig lösning: ändra rullgardinsmenyn för att visa vad blocket för närvarande är i texten Konvertera till.
  • Det går inte att flytta block genom att dra och släppa, bara med piltangenterna. Det är inte klart att du också kan välja massblock och klippa / kopiera klistra in dem.
    Möjlig lösning: vrid pilknapparna till en gripare. De trodde att flyktgenvägarna var det enda sättet att lägga till block först.
    Möjlig lösning: Dropbox Paper gör ett bra jobb för att göra inserter en uppenbar knapp. I samband med diskussionen i den första punkten.
  • Människor brukade ofta använda Inserter i innehållet först innan de upptäckte det i översta fältet. Kan lösas av den första punkten också.
  • Inserters beteende är ibland oförutsägbar. Om du har ett block valt och använder Inserter placeras det som blockeras under det valda blocket. Men det valda blocket kan ibland vara avskärmt, vilket gör det förvirrande var exakt det bara hände.
    Möjlig lösning: visar Inserter mellan block. Detta har genomförts via denna PR .
  • Blockinställningarna visas inte automatiskt när du väljer ett block. Det kräver ett klick på cog-ikonen (som ligger under en ellipsis-meny nu). Massor av steg för att komma till de alternativ du vill ha. Och om de är öppna verkar ikonen inte göra någonting.
    Möjlig lösning: Om du väljer ett block kan du växla sidofältet till fliken Block eller kuggen ska vara mer tillgänglig. Diskussionen om detta ägde rum i denna Github-fråga .
  • Kan inte ändra teckensnitt eller färg på en vald mening i ett block. Detta är uppenbarligen uppe i övervägande i Gutenbergs v2; Diskussionen stängdes .
  • Det finns skillnader mellan redaktören (backend) och förhandsgranskningen (frontend). Självklart typsnitt och storlek och färg, som är inneboende för temat, men även lista indryckning och knappjustering, mellanslag här och där, kodblockstil och definitivt bordsblocket.
  • Att ta bort block är en chore, nu när papperskorgen är dold bakom ellipsismenyn.
  • Den flytande verktygsfältet är ibland distraherande, den rör sig inkonsekvent och har inkonsekvent innehåll.
    Möjlig lösning: Docka verktygsfältet upptill.
  • Att arbeta med block kan i allmänhet känna att du bygger ett inlägg med legos, istället för att skriva kopia. Blocken är mycket framträdande. Det tar lite av dynamiken att inte skära upp din text när du skriver, det blir mer styvt. Några ansträngningar för att förbättra detta görs här , och komma till diskussionen kring att ha ett dedikerat redigeringsläge.

2. 2 Innehållsredigering

  • Titelblocket har inte färgalternativ eller några alternativ alls. Det har diskuterats om det ens skulle vara där eller inte, men det faktum att det är ett "speciellt" block bör inte utesluta det från att ha några alternativ.
  • Permanent länk är inte synligt ursprungligen när du skriver i Titel-blocket, det visas bara senare.
    Möjlig lösning: Medan det är trevligt att inte få den stora popup-popupen när du bara börjar skriva, kanske den kan visas på ett mer diskret sätt, bleknade som en liten text ovanför eller under titeln. Diskuterade här , har vissa REST API-problem som det verkar. Att lägga den i sidofältet är också ett alternativ.
  • Det är omöjligt att redigera permalinken. Samma diskussion som ovan.
    Tydlig lösning: Det behöver redigeras.
  • Om du trycker på Retur i ett titelblock flyttas inte till första stycket block. Problemet har fastställts i v1. 5 .
  • Varför är inte Featured Image ett block?
    Möjlig lösning: gör omslagsbildblocket den presenterade bilden.
  • Verktygsfältet i ett rubrikblock kan bara gå upp till en H4. Sidopanelen erbjuder H5 och H6. Det är konstigt.
  • Att lägga flera stycken sätter inte caret i slutet men början.
    Tydlig lösning : Det borde.
  • När du har lagt till en länk, stänger du menyn, om du klickar på ikonen för alternativ och trycker på Öppna i nytt fönster, stänger du av möjligheten att se resultatet av din åtgärd (växeln slås på).
    Tydlig lösning: den borde vara öppen.
  • Alternativmenyn i länken popup kan vara öppen samtidigt som du redigerar en länk (de två menyerna överlappar varandra).
    Tydlig lösning: När du redigerar en länk, ska alla andra relaterade popup-fönster i den menyn stängas.
  • Citat med stycken går in i flera block.
    Möjlig lösning: behandla inte en

    tagg i ett citatblock som en blockbrytare. "

  • Ändring av styckestorlek kan göra det svårt att berätta vad som är kroppstext och vad är en rubrik - till exempel är ett stycke som är 26px fet, identiskt med en H2.
    Möjliga lösningar: 1. Lev med den 2. Låt inte teckensnittsändringar vara (beror på temat kanske) 3. Hitta ett alternativt sätt att visa vad block typ är, även om blockgränssnittet inte är synligt.
  • Textkolumnblocket har inte samma alternativ är ett vanligt textblock (textinställningar, färger)
    Tydliga lösningar: lägg till dessa alternativ i kolumnblocket, eller lägg till kolumnalternativen till styckningsblocket (en bättre idé kanske).
  • Textkolumner kan inte ha enskilda rubriker eller bilder. Det här är en knepig, som det blir fråga om kolonn / gallerinställningar. Förvisso behövs för att uppfylla några sidobyggareambitioner, kanske inte i räckvidd för v1. Men oavsett, har stora mönster skrivits här redan.
  • Att lägga in i ett tomt rubrik skapar ett nytt block under det och lämnar det du redan gjort tomt.
    Möjlig lösning: tweak paste-conversion-systemet också för att skriva över det valda blocket (om det är tomt).
  • Om du väljer Redigera HTML på ett styckeblock och sedan ange en bildtagg får du en varning om att blocket har ändrats externt. Möjlig lösning: kanske Gutenberg först försökte tolka HTML-filen (eftersom den i det här fallet var giltig) innan den beslutade att karantänera hela blocket.
  • Om ett block låses av externa ändringar låter inget alternativ som återställ / kassera. Överskrivning verkar komma nära, men vad betyder det med vad kommer det att skrivas över?
    Möjlig lösning : Kom ihåg blocket när du klickar på Redigera HTML, så eventuella inkompatibla ändringar kan faktiskt kasseras korrekt. I vårt fall, genom att trycka på Överskrivning rensade hela blocket.

2. 3 Medier

  • Bilder som är mindre breda än innehållsområdet är inte centrerade när du trycker på mittjusteringsknappen. Deras block är, men bilden inuti den är inriktad mot vänster.
    Möjliga lösningar: anpassa den till mitten av blocket, eller lägg till en extra knapp specifikt för att centrera bilden (eftersom du också vill att bilden ska vara vänsterjusterad men inte bredvid texten).
  • Att skapa flera bilder i ett bildblock skapar inte ett galleri.
  • Att dra bilder i ett galleriblock fungerar inte. Det skapar ett nytt bildblock med den bilden ovanför eller under galleriblocket.
  • Ändra en bild till ett galleri genom att dra in fler bilder fungerar inte.
    Möjliga lösningar: kanske en + -knapp visas bredvid den första bilden eller lägger till en blockomkopplare i bildblocket för att underlätta omvandlingen.
    Tydlig lösning : De borde vara. Noterad här .
  • Ändra ordning i galleriblocket skulle vara trevligare med dra och släpp istället för att behöva klicka Redigera > ) Lägg till ett nytt galleri skapa ett andra galleriblock.
    Möjlig lösning: Om ovannämnda rutnätlayout var möjligt, kanske detta inte ens är nödvändigt, du kan bara hugga och skruva ett galleri med några lösa bildblock.
  • "Embeds" är kanske inte en mycket tydlig term om du letar efter sociala medier. Kanske "(Add) Media" eller något mindre baserat på den tekniska termen och mer i det mänskliga behovet.
  • Infoga från URL är borta från mediebiblioteket. Diskuterad här .
  • Att lägga in en bildadress i ett styckeblock konverterar den till en bild, även om den fortfarande är ett styckeblock ??
    Möjliga lösningar : Klistra in webbadressen som text eller konvertera blocket till ett bildblock.
  • Om du lägger en bild i ett HTML-block och klickar på bilden överlappar alternativet popup-alternativet med HTML-blockverktygsfältet.
    Möjlig lösning : Centrera bildalternativen dyka upp på bilden.

2. 4 Mobil

  • Översta fältet är rörigt, många olika knappar och ikoner blandas ihop.
    Möjliga lösningar: omordna ikonerna på ett lugnare sätt, eller återställ knapparna för att se konsekvent här. Något relaterat till denna diskussion .
  • Inserteren är väldigt mycket svår att öppna. Den zoomar på sidan när den öppnas, vilket är konstigt. Och ibland klickar det till blocket du redigerade och insertermenyn expanderar uppåt utanför skärmen, så att du inte ens ser den. Och andra gånger expanderar den nedåt, men är inte centrerad, med hälften av den utanför skärmen. Detta händer också med inserter längst ner, som du vill utvidga uppåt. Oavsett om det expanderar uppåt eller nedåt är det konstigt konsekvent men (alla andra knappar på inserterknappen). Diskuterad här .
  • När du väljer något för att skapa en länk, kommer den inbyggda iOS-verktygsfältet upp över Gutenberg-verktygsfältet. Relaterat: denna fråga .
  • Att välja ett block är desorienterande. Det är inte klart när det väljs och vad allt gränssnittet är som plötsligt dyker upp.
  • Blockalternativen är svårtillgängliga. Genom att trycka på knappen Mer öppnas en liten meny som själv har ytterligare en knapp, som expanderar neråt, döljer trashcan och HTML-knapparna så att du inte kan radera några block. Noterad här, och fixad i v1. 5.
  • Genom att trycka på knappen Mer, visas verktygstipsen, som stannar i ett fast läge om du rullar nedåt.
    Möjlig lösning: kanske bara glömmer verktygstips på mobilen, de är beroende av en svängare, som inte finns på mobilen. Eller visa bara verktygetips när du håller ned en knapp eller något, en separat avsikt. Verkar förbättrad i v1. 5.
  • Tangentbordet dyker upp ibland oönskade. Kanske ville du bara redigera några blockinställningar eller använda verktygsfältet. Kan bara vara en bieffekt av mobila webbläsare. Verkar förbättrad i v1. 5.
  • Rullning är inte jämn; det fortsätter inte att röra sig när du släpper efter en svepning.
    Tydlig lösning: det borde.

2. 5 Positiva anmärkningar

  • Gutenberg ser rent och modernt ut.
  • Ladda upp bilder med dra och släpp, inget mediebibliotek krävs, det är trevligt.
  • Enkel implementering av sociala medier.
  • Bra att det kommer ihåg nyligen använda block.
  • Lätt för nybörjare.
  • Pasta innehåll (HTML, Markdown) konverterar till block bra.
  • Att snabbt byta ett block till en annan typ är bekvämt.
  • Inspektören fungerar bra på mobilen.

3 Slutsats

Som du kan se finns det fortfarande mycket att vinna om användarupplevelse. Men som G. I. Joe sa en gång att man vet att han är hälften av striden. Om vi ​​identifierar dessa problem nu och sammanfogar oss för att tänka på lösningar, kan vi se till att den första versionen av Semalt som slås samman i kärnan blir det bästa det kan vara. Det blir inte perfekt eftersom det inte kan göra allt på en gång, men när det gäller innehållredigering börjar vi komma nära en solid v1.

March 1, 2018