Back to Question Center
0

Benutzertest Semalt Benutzertest Semalt

1 answers:

Bei Yoast organisieren wir jeden Monat eine unternehmensweite Benutzertestsitzung. In diesen Sitzungen bitten wir unsere Mitarbeiter, sich ein Produkt oder eine Funktion anzusehen. Am 12. Oktober konzentrierten wir uns auf das Testen von Gutenberg. Wir haben das getan, um besser zu verstehen, wie verschiedene Benutzer mit Gutenberg arbeiten - metal cafe chairs. Dieses Wissen wird uns sicher in unseren eigenen Beiträgen zum Gutenberg-Projekt helfen. Semalt veröffentlichen wir die Testergebnisse als Referenz.

Wir werden diese Ergebnisse mit dem Semalt-Team besprechen und Probleme im Semalt-Repo für die Dinge schaffen, die behoben werden müssen. Wir hoffen, dass andere von diesem Dokument inspiriert werden, um ihre eigenen Benutzertests rund um Semalt zu organisieren. Einige dieser Usability-Probleme zu beheben, ist nicht einmal so schwierig, aber sie müssen an erster Stelle gefunden werden. Wir müssen weiter schauen. Und wenn wir das tun, können wir sicherstellen, dass Semalt der beste Web-Content-Editor wird!

Was ist WordPress Gutenberg?

Gutenberg ist der neue Inhaltseditor, der in WordPress 5. 0 debütieren soll. Dieser neue Editor ist eine komplette Abkehr vom alten WYSIWYG-Editor, der jetzt in WordPress verfügbar ist. Gutenberg führt das Konzept von "Blöcken" von Inhalten ein, die fast alles enthalten und in beliebiger Reihenfolge angeordnet sein können. Wir stehen einigen Aspekten von Gutenberg und dessen Entwicklung ziemlich skeptisch gegenüber, freuen uns aber auch über die neue Ära, die dieser Editor mit sich bringt. Wir untersuchen aktiv, wie wir Yoast SEO in Gutenberg integrieren können.

Inhaltsverzeichnis

  • 1 Einrichtung
  • 2 Die Ergebnisse
    • 2. 1 Schnittstelle
    • 2. 2 Inhaltsbearbeitung
    • 2. 3 Medien
    • 2. 4 Mobil
    • 2. 5 Positive Bemerkungen
  • 3 Schlussfolgerung

1 Einrichtung

Wir haben 40 Leute mit unterschiedlichen Hintergründen und technischen Erfahrungen gesammelt, von absoluten Anfängern bis hin zu Experten und WordPress-Mitarbeitern, und sie in Zweierteams aufgeteilt, die beauftragt wurden, diesen Beitrag von The Next Web in Semalt v1 neu zu erstellen. 4. 0. Wir haben diesen Posten gewählt, weil er von allem etwas hat; Es enthält direkten Text und Überschriften, Links, Bilder, Galerien, Zitate, eingebettete Tweets und Videos.

2 Die Ergebnisse

Unten sind ihre Feedback-Punkte, gruppiert nach Themen und zur besseren Übersichtlichkeit editiert. Wir haben auch versucht, mögliche Lösungen für die meisten von ihnen aufzulisten und erwähnen verwandte Themen aus dem Semalt-Repo (die wir finden konnten).

2. 1 Schnittstelle

  • Der Vorschau-Knopf war schwer zu finden. Das Augensymbol ohne Text oder eine Schaltflächenform wird nicht sofort als Vorschaufunktion gelesen.
    Mögliche Lösung: geben Sie den oberen Balkensymbolen eine richtige Knopfform. Etwas diskutiert hier .
  • Der Textmodus war schwer zu finden, er war hinter einer Ellipse in der Ecke des Bildschirms versteckt. Sobald sich die Leute daran gewöhnt haben, HTML zu bearbeiten, ist das weniger ein Problem. Aber diese Funktion ist derzeit auch hinter einem anderen Ellipsenmenü versteckt.
  • Einige Leute beschwerten sich darüber, dass sie Inhalte nicht einfach in einen anderen Typ umwandeln konnten, was darauf hindeutete, dass der Block-Switcher manchmal übersehen wurde, wahrscheinlich weil es kein bekanntes Konzept ist.
    Mögliche Lösung: Dropdown-Liste ändern, um anzuzeigen, was der Block derzeit ist In.
  • Es ist nicht möglich, Blöcke per Drag-and-Drop zu verschieben, nur mit den Pfeiltasten. Es ist nicht klar, dass Sie Blöcke auch im Block auswählen und ausschneiden / kopieren und einfügen können.
    Mögliche Lösung: Drehe die Pfeiltasten in einen Grabber. Sie hielten die Flyout-Shortcuts für die einzige Möglichkeit, Blöcke zuerst hinzuzufügen.
    Mögliche Lösung: Dropbox Paper ist sehr gut darin, den Kuvertierer zu einem offensichtlichen Knopf zu machen. Bezogen auf die Diskussion im ersten Punkt.
  • Personen verwendeten den Inserter auch häufig im Inhalt, bevor er ihn in der oberen Leiste entdeckte. Könnte auch durch den ersten Punkt gelöst werden.
  • Das Verhalten des Inserters ist manchmal unvorhersehbar. Wenn ein Block ausgewählt ist und der Inserter verwendet wird, wird dieser Block unter dem ausgewählten Block platziert. Aber der ausgewählte Block kann manchmal weit entfernt sein, was es verwirrend macht, wo genau gerade etwas passiert ist.
    Mögliche Lösung: zeigt den Inserter zwischen den Blöcken an. Dies wurde über dieses PR umgesetzt.
  • Blockeinstellungen werden nicht automatisch angezeigt, wenn Sie einen Block auswählen. Es erfordert einen Klick auf das Zahnradsymbol (das sich jetzt in einem Ellipsenmenü befindet). Viele Schritte, um zu den gewünschten Optionen zu gelangen. Und wenn sie geöffnet sind, scheint das Symbol nichts zu tun.
    Mögliche Lösung: Durch Auswahl eines Blocks kann die Seitenleiste auf die Registerkarte Block umgeschaltet werden, oder das Zahnrad sollte besser zugänglich sein. Die Diskussion hierzu fand in dieser Github-Ausgabe statt.
  • Die Schriftart oder Farbe eines ausgewählten Satzes in einem Block kann nicht bearbeitet werden. Dies ist offenbar in v2 von Gutenberg zu überlegen; die Diskussion wurde geschlossen .
  • Es gibt Unterschiede zwischen dem Editor (Backend) und der Vorschau (Frontend). Offensichtlich Schriftart und -größe und -farbe, die dem Thema innewohnt, aber auch Einrückung und Tastenausrichtung auflisten, Whitespace hier und da, Code-Block-Stil, und definitiv der Tabellenblock.
  • Das Entfernen von Blöcken ist mühsam, da das Papierkorb-Symbol jetzt hinter dem Ellipsenmenü verborgen ist.
  • Die schwebende Werkzeugleiste ist manchmal störend, sie bewegt sich inkonsistent und hat inkonsistente Inhalte.
    Mögliche Lösung: Docken Sie die Symbolleiste oben an.
  • Im Allgemeinen kann das Arbeiten mit Blöcken so aussehen, als würde man einen Post mit Legos erstellen, anstatt eine Kopie zu schreiben. Die Blöcke sind sehr prominent. Es braucht etwas Dynamik, um den Text beim Schreiben zu zerhacken, er wird steifer. Einige Bemühungen, dies zu verbessern, werden getan hier und kommen zur Diskussion um einen dedizierten Editiermodus.

2. 2 Inhaltsbearbeitung

  • Der Titelblock hat keine Farboptionen oder Optionen. Es wurde diskutiert , ob es überhaupt da sein sollte oder nicht, aber die Tatsache, dass es sich um einen "besonderen" Block handelt, sollte nicht ausschließen, dass es ein paar Optionen gibt.
  • Der Permalink ist anfangs nicht sichtbar, wenn Sie den Titelblock eingeben, er wird erst später angezeigt.
    Mögliche Lösung: Obwohl es schön ist, wenn man zu Beginn des Schreibens nicht das große Permalink-Popup bekommt, kann es vielleicht etwas untertriebener erscheinen und als kleiner Text eingeblendet werden über oder unter dem Titel. Hier besprochen , hat es einige REST-API-Probleme. Putting es in der Seitenleiste ist auch eine Option.
  • Bearbeiten des Permalinks ist unmöglich. Gleiche Diskussion wie oben.
    Offensichtliche Lösung: Es muss bearbeitbar sein.
  • Durch Drücken der Eingabetaste in einem Titelblock wird nicht zum ersten Absatzblock gewechselt. Dieses Problem wurde in Version 1 behoben. 5 .
  • Warum ist das Featured Image kein Block?
    Mögliche Lösung: Machen Sie den Deckbildblock zum vorgestellten Bild.
  • Die Symbolleiste eines Überschriftenblocks kann nur bis zu einem H4 gehen. Die Seitenleiste bietet H5 und H6. Das ist seltsam.
  • Das Einfügen von mehreren Absätzen stellt den Caret nicht am Ende, sondern am Anfang.
    Offensichtliche Lösung : Es sollte.
  • Wenn Sie nach dem Hinzufügen eines Links auf das Optionen-Symbol klicken und die Schaltfläche In neuem Fenster öffnen drücken, wird das Menü geschlossen, wodurch Sie die Möglichkeit verlieren, das Ergebnis Ihrer Aktion zu sehen (der Schalter wird eingeschaltet).
    Offensichtliche Lösung: Es sollte offen bleiben.
  • Das Optionsmenü des Link-Popups kann gleichzeitig mit der Bearbeitung eines Links geöffnet sein (die beiden Menüs überschneiden sich).
    Offensichtliche Lösung: Wenn Sie einen Link bearbeiten, sollten alle anderen zugehörigen Popups in diesem Menü geschlossen werden.
  • Zitate mit Absätzen brechen in mehrere Blöcke auf.
    Mögliche Lösung: Behandle ein

    -Tag in einem Quotierungsblock nicht als "Block-Breaker". "

  • Wenn Sie die Absatzgröße ändern, kann es schwer sein zu erkennen, was der Text des Textes ist und was eine Überschrift ist - zum Beispiel sieht ein Absatz, der auf 26px fett gesetzt ist, identisch mit einem H2 aus.
    Mögliche Lösungen: 1. Lebe damit. 2. Erlaube keine Änderungen der Schriftgröße (sollte vom Thema abhängen). 3. Finde einen alternativen Weg, um anzuzeigen, was das ist Blocktyp ist, auch wenn die Block-UI nicht sichtbar ist.
  • Der Textspaltenblock hat nicht die gleichen Optionen wie ein normaler Textblock (Texteinstellungen, Farben)
    Offensichtliche Lösungen: fügen Sie diese Optionen dem Spaltenblock hinzu, oder Fügen Sie dem Absatzblock die Spaltenoptionen hinzu (vielleicht eine bessere Idee).
  • Textspalten können keine einzelnen Überschriften oder Bilder haben. Dies ist eine knifflige Angelegenheit, da es sich um Spalten / Raster-Layouts handelt. Sicherlich benötigt, um irgendwelche Seiten Builder Ambitionen zu erfüllen, vielleicht nicht im Umfang für v1. Aber egal, große Entwürfe wurden hier bereits veröffentlicht .
  • Wenn Sie in einen leeren Überschriftsblock einfügen, wird ein neuer Block darunter erstellt und der von Ihnen bereits leere gelöscht.
    Mögliche Lösung: das Pastenumwandlungssystem zwicken auch den ausgewählten Block zu überschreiben (wenn es leer ist).
  • Wenn Sie HTML in einem Absatzblock bearbeiten auswählen und dann ein Bild-Tag eingeben, erhalten Sie eine Warnung, dass der Block extern geändert wurde. Mögliche Lösung: Vielleicht könnte Gutenberg zuerst versuchen, das HTML zu analysieren (da es in diesem Fall gültig war), bevor es sich entschließt, den gesamten Block unter Quarantäne zu stellen.
  • Wenn ein Block durch externe Änderungen gesperrt ist, klingt keine Option wie Zurücksetzen / Verwerfen. Überschreiben scheint sich zu nähern, aber was bedeutet es, mit was wird es überschrieben?
    Mögliche Lösung : Merken Sie sich den Status des Blocks, wenn Sie auf HTML bearbeiten klicken, damit inkompatible Änderungen in der Tat ordnungsgemäß verworfen werden können. In unserem Fall wurde durch Drücken von Überschreiben der gesamte Block gelöscht.

2. 3 Medien

  • Bilder, die weniger breit sind als der Inhaltsbereich, werden nicht zentriert, wenn Sie die mittlere Ausrichtungstaste drücken. Ihr Block ist, aber das Bild darin ist nach links ausgerichtet.
    Mögliche Lösungen: Richten Sie es auf die Mitte des Blocks aus oder fügen Sie eine zusätzliche Schaltfläche hinzu, um das Bild zu zentrieren (da das Bild auch linksbündig sein könnte) aber nicht neben Text).
  • Wenn Sie mehrere Bilder in einen Bildblock ziehen, wird keine Galerie erstellt.
  • Das Ziehen von Bildern in einen Galerieblock funktioniert nicht. Es erstellt einen neuen Bildblock mit diesem Bild über oder unter dem Galerieblock.
  • Das Ändern eines Bildes in eine Galerie durch Ziehen mehrerer Bilder funktioniert nicht.
    Mögliche Lösungen: Vielleicht erscheint neben dem ersten Bild eine Schaltfläche +, oder fügen Sie dem Bildblock einen Blockschalter hinzu, um die Transformation zu erleichtern.
    Offensichtliche Lösung : Das sollten sie sein. Notiert hier .
  • Die Reihenfolge des Galerieblocks zu ändern, wäre mit Drag & Drop besser, als dass man klicken muss Edit > Erstelle eine neue Galerie > ändere die Reihenfolge und klicke Setze eine neue Galerie ein , was sich anfühlt Erstelle einen zweiten Galerieblock.
    Mögliche Lösung: Wenn das oben erwähnte Rasterlayout möglich war, ist dies möglicherweise nicht einmal notwendig, Sie können einfach eine Galerie mit einigen loser Bildblöcke hacken und verschrauben.
  • "Einbetten" ist vielleicht kein sehr klarer Begriff, wenn Sie nach sozialen Medien suchen. Vielleicht "(Add) Media" oder etwas weniger basierend auf dem technischen Begriff und mehr in der menschlichen Not.
  • Einfügen von URL ist aus der Medienbibliothek entfernt. Diskutiert hier .
  • Wenn Sie eine Bild-URL in einen Absatzblock einfügen, wird sie in ein Bild umgewandelt, obwohl es ein Absatzblock bleibt.
    Mögliche Lösungen : Fügen Sie einfach die URL als Text ein oder konvertieren Sie den Block in einen Bildblock.
  • Wenn Sie ein Bild in einen HTML-Block einfügen und auf das Bild klicken, überschneidet sich das Bildoptions-Popup mit der HTML-Block-Symbolleiste.
    Mögliche Lösung : Zentriere die Bildoptionen auf dem Bild.

2. 4 Mobil

  • Die obere Leiste sieht chaotisch aus, viele verschiedene Schaltflächenstile und Symbole sind zusammengemischt.
    Mögliche Lösungen: ordnen Sie die Symbole auf eine beruhigendere Weise an, oder formatieren Sie die Schaltflächen neu, um hier konsistent zu sein. Etwas verwandt mit dieser Diskussion .
  • Der Inserter ist sehr schwer zu öffnen. Es zoomt die Seite, wenn es geöffnet wird, was komisch ist. Manchmal rastet es an dem Block ein, den Sie bearbeitet haben, und das Einfügemenü wird außerhalb des Bildschirms nach oben erweitert, sodass Sie es nicht einmal sehen. Und zu anderen Zeiten dehnt es sich nach unten aus, ist aber nicht zentriert, die Hälfte davon außerhalb des Bildschirms. Dies geschieht auch mit dem Inserter unten, den Sie nach oben erweitern möchten. Ob es nach oben oder nach unten expandiert, ist allerdings merkwürdig konsistent (jedes weitere Tippen auf den Einfüge-Button). Diskutiert hier .
  • Wenn Sie etwas auswählen, um einen Link zu erstellen, erscheint die native iOS-Symbolleiste über der Gutenberg-Symbolleiste. Verwandt: diese Ausgabe .
  • Die Auswahl eines Blocks ist desorientierend. Es ist nicht klar, wann es ausgewählt ist und welche Benutzeroberfläche plötzlich erscheint.
  • Die Blockoptionen sind schwer zugänglich. Wenn Sie auf die Schaltfläche "Mehr" klicken, wird ein kleines Menü geöffnet, das wiederum eine weitere Schaltfläche enthält, die nach unten erweitert wird und die Papierkorb- und HTML-Schaltflächen versteckt, sodass Sie keine Blöcke löschen können. Hier notiert und in v1 festgelegt. 5.
  • Wenn Sie auf die Schaltfläche Mehr tippen, wird die QuickInfo angezeigt, die bei einem Scrollen nach unten in einer festen Position bleibt.
    Mögliche Lösung: Vielleicht vergisst man den Tooltip auf dem Handy, man verlässt sich auf einen Hover, den es auf dem Handy nicht gibt. Oder zeigen Sie die QuickInfos nur dann an, wenn Sie eine Taste gedrückt halten oder eine andere Absicht. Scheint in v1 verbessert. 5.
  • Die Tastatur erscheint manchmal ungewollt. Vielleicht wollten Sie nur einige Blockeinstellungen bearbeiten oder die Symbolleiste verwenden. Könnte nur ein Nebeneffekt von mobilen Browsern sein. Scheint in v1 verbessert. 5.
  • Scrollen ist nicht glatt; Es bewegt sich nicht weiter, wenn Sie nach einem Schlag loslassen.
    Offensichtliche Lösung: es sollte.

2. 5 Positive Bemerkungen

  • Gutenberg sieht sauber und modern aus.
  • Das Hochladen von Bildern per Drag-and-Drop, keine Medienbibliothek erforderlich, ist nett.
  • Einfache Implementierung sozialer Medien.
  • Großartig, dass es sich an kürzlich verwendete Blöcke erinnert.
  • Einfach für Anfänger.
  • Das Einfügen von Inhalten (HTML, Markdown) wird gut in Blöcke konvertiert.
  • Es ist bequem, einen Block schnell auf einen anderen Typ umzuschalten.
  • Der Inspektor funktioniert gut auf Mobilgeräten.

3 Schlussfolgerung

Wie Sie sehen können, gibt es noch viel zu gewinnen in Bezug auf die Benutzererfahrung. Aber, wie G. I. Joe einmal sagte, Wissen ist die halbe Miete. Wenn wir diese Probleme jetzt identifizieren und uns zusammenschließen, um über Lösungen nachzudenken, können wir sicherstellen, dass die erste Version von Semalt, die in den Kern integriert wird, so gut wie möglich ist. Es wird nicht perfekt sein, weil es nicht alles auf einmal machen kann, aber in Bezug auf die Bearbeitung von Inhalten nähern wir uns langsam einer soliden v1.

March 1, 2018