it-swarm.com.de

Verbessert die Verwendung eines WYSIWYG-Editors an sich die UX?

Als jemand mit viel Hintergrundwissen beim Schreiben von Low-Level-Software hatte ich immer eine starke Abneigung gegen WYSIWYGs wie CKEditor oder TinyMCE im Browser. Für mich sind sie meistens problematisch, da sie den Inhalt frei von Struktur machen und die Wiederverwendung von Teilen des Inhalts später sehr kompliziert machen.

Ich bin daran interessiert, "die andere Seite" des Gesprächs zu hören. Lasse ich meine Benutzer leiden, weil sie wirklich "Freiform" -Eingabeoptionen benötigen?

Wenn ich mich in einigen großen internationalen Online-Magazinen wie http://www.time.com/ und einigen lokalen umschaue, sehe ich, dass die Herausgeber Artikel zu produzieren scheinen, die fast nur bestehen von Rohtext. Bilder befinden sich normalerweise oben im Artikel, ansonsten sind die komplexesten Inhalte normalerweise Links.

12
user50849

Was ist der Wert von WYSIWIG?

Es bietet Unmittelbarkeit und die Fähigkeit, schnell zu fummeln. Bret Victor fängt es perfekt in diesem Video ein, in dem er die Bedeutung der Unmittelbarkeit im kreativen Prozess während der Codierung von Animationen und Spielen zeigt. Kreativität profitiert enorm vom Experimentieren, Spielen und im Moment sein. Sie können dies nicht durch Analyse, Struktur und Vorausdenken erreichen.

WYSIWYG-Editoren haben Millionen von Menschen den Zugriff auf Funktionen ermöglicht, die sonst unerreichbar wären. Auch wenn die Leute sofort sehen können, was sie getan haben, können sie schnell lernen, wie sie es ändern können.

enter image description here

Aber warum ist dies entweder oder ... warum können Sie keinen Zugriff auf die WYSIWIG UND eine Struktur gewähren?

Ich muss sagen, dass ich es liebe, ein Wordpress] zu verwenden, was ich für einen Hybrid halte (einige WYSIWIG einige Strukturen) ... sie haben so großartige Arbeit geleistet, um die Präsentationsebene vom Inhalt zu trennen.

Es ermöglicht es einem, den Text einfach in einem einfachen visuellen Editor (es ist im Grunde nur WYSIWIG der HTML-Elemente, nicht der CSS) auf einer Registerkarte zu bearbeiten und dann mit dem HTML auf einer anderen zu spielen. Außerdem können Sie CSS-Stylesheets hinzufügen, um die Themen anzupassen, oder von vorne beginnen und einfach die CMS-Ebene zum Verwalten des Inhalts verwenden.

Das Tolle ist, dass jeder Benutzer sein eigenes Level finden kann. Es ermöglicht ihnen auch zu wachsen und zu lernen. Führen Sie die Schritte aus, wenn sie bereit sind, d. H. Der Zugriff wird durch das Tool nicht eingeschränkt.

Ich habe Wordpress mit so vielen Kunden verwendet, die nur eine einfache Möglichkeit wünschen, ihre Websites regelmäßig zu bearbeiten. Ich habe Kindern beigebracht, sie zu verwenden.

Einige von ihnen haben weiter gelernt, wie man das CSS bearbeitet ... indem sie das HTML nie versteckt haben ... es hat ihnen den Zugang zum nächsten Level ermöglicht.

ABER wenn ich meinen Willen hätte, würden wir noch extremer WYSIWIG gehen

Mein einziger Fehler bei Wordpress ist, dass Sie Änderungen nicht live sehen können ... es ist also ein Schmerz, "zu fummeln". Sie müssen aktualisieren und dann Änderungen sehen. Auch das CSS ist zu versteckt und kann nicht einfach gespielt werden. Ich neige dazu, andere Werkzeuge zu verwenden und sie dann zu importieren.

Um ein Layout richtig zu machen, dreht sich alles ums Fummeln.

Ich liebe Tools wie CSSEDIT , dabblet und jsfiddle , mit denen Sie Ihre Änderungen live sehen können. Stylizer verfügt über einige großartige Bedienfelder, mit denen Sie mithilfe von Schiebereglern schnell dynamisch sehen können, wie sich das Ändern eines CSS-Werts wie der Breite auf Ihr Design auswirkt, indem Sie einen Schieberegler verwenden, um die Änderung dynamisch anzuzeigen. Wenn Sie genau sehen können, welche Änderungen an Ihrem "Code" vorgenommen werden, können Sie schnell und einfach lernen.

WYSIWIG ist eine großartige Lernumgebung ...

Das Hinzufügen von Live-CSS-Bearbeitungstools zu allen Standardbrowsern trägt wahrscheinlich mehr zum schnellen Erlernen von CSS/HTML5 bei als jede andere Initiative. Wenn Sie mit vielen verschiedenen Beispielen live spielen und den Effekt sofort sehen können ... lernen Sie nicht nur, was es tut ... Sie möchten mehr tun ... es macht Spaß!

Ich würde gerne Dabblet oder CSSedit mit Schiebereglern (Dablet hat bereits visuelle Erklärungen (z. B. eine Linealgrafik mit der Breite) jedes manipulierbaren CSS-Werts, aber ich würde gerne dynamisch mit ihnen interagieren können) und schnelle Hilfe, z. Dies ist eine Liste möglicher Werte für dieses Codeelement. Um es zu einem perfekten HTML5/CSS-Lernwerkzeug zu machen.

Aber ich schweife ab, um Ihren Punkt zu beantworten.

Nein, bitte beschränken Sie Ihr Tool nicht darauf, dass Ihre Benutzer Text und Bilder separat eingeben können. Lassen Sie sie schrittweise lernen und wachsen. Vertrauen Sie Ihren Benutzern und geben Sie ihnen Zugriff auf eine WYSIWIG-Ansicht für Fummelei und Kreativität sowie auf die Struktur/den Code für die Entwicklung eines Verständnisses des zugrunde liegenden Modells. Oh ja und setzen Sie Schieberegler wie Bret Victors ÜBERALL!

12
Lisa Tweedie

Es gibt eine Art hybride Antwort. Ich bin auf diese Anwendung gestoßen und war ziemlich beeindruckt davon. Grundsätzlich können Sie die mögliche Struktur des Dokuments mit einer XML-Datei definieren, und der Benutzer wird dann angewiesen, es innerhalb dieser Einschränkungen auszufüllen.

Ich bin mir nicht sicher, ob das genau das ist, wonach Sie suchen, aber es könnte sich lohnen, einen Blick darauf zu werfen, um das Beste aus beiden Welten zu bekommen.

P.S. Ich hasse traditionelle Browser-WYSIWYG-Editoren, einfach weil sie alle superflockig zu sein scheinen.

2
Matt Lavoie

Ich möchte ihnen ein Formular im CMS mit einem Feld für jeden Datentyp präsentieren. Laden Sie Bilder in ein Feld hoch, schreiben Sie Text in ein zweites und verknüpfen Sie ein YouTube-Video in ein drittes.

Dies scheint ein äußerst vernünftiger Ansatz zu sein, insbesondere wenn Ihre Benutzer keine besonderen Erfahrungen mit der Textformatierung usw. haben.

Eine Möglichkeit könnte darin bestehen, dem Benutzer das Hinzufügen zusätzlicher Bildplatzhalter usw. zu ermöglichen, damit er eine gewisse Flexibilität erhält, Sie jedoch die Kontrolle über die Formatierung und Bilderzeugung usw. behalten. Ich habe dies für ein Hilfeverwaltungssystem getan. Der Benutzer fügt Felder für Texteingaben oder Bilder hinzu und kann diese in der Liste neu anordnen. Das Textfeld ist ein Rich-Text-Feld, das den Text formatieren kann, und ich habe einige Steuerelemente für Fett, Kursiv, Unterstreichung, Textgröße, Schriftfarbe usw. implementiert.

1
ChrisF

Die ehrliche Antwort ist, dass es von Ihrer primären Benutzerbasis abhängt.

Ich habe an einem Projekt in der Schule gearbeitet, bei dem ich die Migration einer Schulorganisationssite von einem Server auf einen anderen durchgeführt habe. Der Manager wollte das vorhandene Content-Management-System weiter nutzen, da er und sein Team (das hauptsächlich den Inhalt bereitstellte) über die verschiedenen Organisationsaktivitäten mit den im CMS angebotenen Textbearbeitungsoptionen des WYSIWYG-Editors zufrieden waren.

Studentische Redakteure, die mit Hintergrundwissen im Bereich Webdesign an Bord kamen, waren jedoch oft frustriert über die Schwierigkeiten beim Rendern komplexer Layouts, die mit einem WYSIWYG-Editor nicht erstellt werden konnten. Infolgedessen wurde häufig nur die Ankündigung vollständig in einem Bildeditor erstellt und veröffentlicht.

Wir haben es endlich geschafft, einen Weg zu finden, um das Problem zu lösen, indem wir eine Funktion bereitgestellt haben, mit der Benutzer HTML-Tags in den Freiform-Eintrag eingeben können, damit sie den Inhalt je nach ihren Fähigkeiten und ihrem Komfortniveau so strukturieren können, wie sie es möchten.

Daher würde ich empfehlen, zu bestimmen, wer Ihre Benutzer sind und welche Art von Inhalten sie bereitstellen, und ob diese in einer festen Struktur definiert werden können, sodass Sie einen definierten formularbasierten Ansatz verwenden können.

In Bezug auf Ihre Antwort

Ich möchte ihnen ein Formular im CMS mit einem Feld für jeden Datentyp präsentieren. Laden Sie Bilder in ein Feld hoch, schreiben Sie Text in ein zweites und verknüpfen Sie ein YouTube-Video in ein drittes.

Während dieser Ansatz Benutzern beim Erstellen stark strukturierter Dokumente helfen würde, wie können Sie Situationen berücksichtigen, in denen Benutzer mehr als ein Bild oder mehr als ein Video bereitstellen müssen. Indem Sie ihre Fähigkeit einschränken, ihre Artikel oder Texte um das Layout herum zu strukturieren, würden Sie auch Einfluss haben der Ton des Artikels und das effektive Layout

1
Mervin

WYSIWYG-Editoren sind wie ein zweischneidiges Schwert. Während sie die Benutzererfahrung von Inhalten für den Editor verbessern können, können sie die Benutzererfahrung von Inhalten für den Leser/Benutzer genauso gut verringern, wenn die Redakteure keine Kenntnisse über semantisches HTML haben. WYSIWYG kann auch für diejenigen, die wissen, wie man Seiten mit einem einfachen Texteditor codiert, äußerst frustrierend werden. Einige WYSIWYG-Editoren entfernen Tags und Attribute, wenn sie nicht korrekt eingerichtet sind.

Ich denke, das größere Problem liegt in der Methode, aus der der Benutzer beim Schreiben von Inhalten wählen muss. Einige CMS wie Drupal können eingerichtet werden, um Ihren Hauptbenutzern/Entwicklern, die eine Seite bearbeiten müssen, eine robustere Reihe von Tools zu ermöglichen. Erlauben Sie diesen Benutzern einfach, zum Code selbst zu springen oder ein Editor, der eine vollständige Layout- und Stilsteuerung ermöglicht, ist möglicherweise am besten geeignet. Für Ihren typischeren Inhaltseditor ist möglicherweise eine leicht abgespeckte Version eines WYSIWYG die beste. Die meisten dieser Inhaltseditoren möchten nur den benötigten Text hinzufügen können Weitere Funktionen wie die Steuerung der Kopfzeile und das erweiterte Text-Styling sollten Entwicklungsmitarbeitern oder geschulten Inhaltseditoren überlassen werden.

1
JeffH

Ich stimme Ihnen voll und ganz zu, dass viele der WYSIWYG-Editoren bei der Strukturierung des HTML-Layouts einer Seite schreckliche Arbeit leisten, insbesondere wenn ein "nicht technischer" Benutzer versucht, sie wie ein Word-Dokument zu verwenden.

Wenn Sie Ihrem Benutzer einen gut strukturierten Überblick darüber geben, welche Informationen er eingeben soll und wo er sie eingeben soll, kann dies seine Angst lindern, wenn er zum ersten Mal ein CMS verwendet.

Ich mag auch die Idee von @ ChrisF, dem Benutzer das Hinzufügen zusätzlicher Platzhalter für Bilder zu ermöglichen. Dies gibt dem Benutzer ein bisschen mehr Kontrolle darüber, wo er ein Bild haben möchte, und gibt Ihnen eine Vorstellung davon, was der Benutzer sehen möchte.

0
PL3X