it-swarm.com.de

Hierarchisches Strukturdesign und Benutzerfreundlichkeit

Ich habe eine Website zum Erlernen von Sprachen mit der Karteikartenmethode erstellt. Die Website selbst ist http://www.vocableman.com

Das Problem, auf das ich gestoßen bin, ist, dass Benutzer sich beschweren, dass sie Probleme mit dem Verständnis der Funktionen haben, und die Hauptursache wahrscheinlich die hierarchische Struktur ist, die ich im Abschnitt Karten und Ordner verwende (Sie können eine einfachere Version im Abschnitt Öffentliche Ordner sehen, nachdem Sie darauf geklickt haben in einem der Ordner), wodurch der Benutzer die Möglichkeit erhält, Ordner und Unterordner zu erstellen, die individuelle Lernkarten enthalten.

Gibt es eine Möglichkeit, diese baumartige Struktur zu erstellen/zu entwerfen/zu imitieren, die für Benutzer einfacher zu verwenden und zu verstehen ist und möglicherweise auch auf Touch-Geräten einfacher zu verwenden ist (die Baumstruktur ist ziemlich schwierig zu verwenden, da die aktiven Bereiche zum Reduzieren und Erweitern von Elementen vorhanden sind ist ziemlich klein)?

UPDATE: Welche weiteren Verbesserungen der Benutzerfreundlichkeit der Website selbst können Sie empfehlen?

1
Martin Zikmund

Ihre Website hat ein schönes Design, scheint aber noch nie einen tatsächlichen Benutzertest gehabt zu haben. Sie würden ernsthaft davon profitieren, wenn Sie fünf zufällige Fremde von der Straße holen, ihnen jeweils 50 US-Dollar zahlen und sie bitten, bestimmte Aufgaben auszuführen (aus einem öffentlichen Ordner lernen, sich anmelden, aus einem privaten bezahlten Ordner lernen), während Sie zuschauen und Ihr verdammtestes versuchen nicht zu helfen, sondern aufzuzeichnen, wie sie versagen. Es gibt viele kleine, aber einfache, offensichtliche und schnelle Lösungen, die Sie zur Verbesserung Ihrer Website durchführen können. Zu viele, um sie hier aufzulisten. Wenn Sie es jedoch nicht selbst testen möchten, gibt es sicher viele Usability-Experten, die für eine moderate Gebühr eine Liste mit Empfehlungen für Sie zusammenstellen könnten.

Für die Hauptantwort:

Die Ordner auf der linken Seite leisten kein Klicken. Sie sehen aus wie eine nicht anklickbare Liste von Wörtern, nicht wie eine Menüstruktur. Dies wird durch den Kontrast zwischen dem ersten Element (das sich in "Linkblau" befindet) und dem Rest der Elemente (in "Ich bin kein Linkschwarz") hervorgehoben. Sie verwenden eine Textdekoration, die für die Angabe von "Ich bin ein Link" reserviert ist, um stattdessen "Ich bin der aktive Link" anzuzeigen. Dekorieren Sie stattdessen alle Elemente auf der linken Seite als Links und markieren Sie den aktuellen Ordner auf andere Weise (möglicherweise rot färben, möglicherweise eine Hintergrundfarbe angeben).

Zweitens würde ich den Rand um die linke Spalte entfernen. Der Navigationsbereich fühlt sich eher wie ein Inhaltsbereich an, da er im Inhaltsfeld "enthalten" ist. Brechen Sie es aus der Box und es wird sich ein bisschen mehr wie ein Navigationselement anfühlen. Sie können ihm auch eine leichte Hintergrundfarbe geben, um ihn vom Inhalt in der größeren rechten Spalte abzuheben.

Schließlich würde ich Benutzern die Möglichkeit geben, einem Ordner Beschreibungen hinzuzufügen. Diese Beschreibung wird über allen Karteikarten angezeigt, die dieser Ordner enthält. Wenn der Ordner keine Karten enthält, ist die Beschreibung das einzige Element in der Box. Auf diese Weise können Benutzer die erwartete Verwendung der Navigation links und der Karten im aktuellen Ordner beschreiben ... kategorisierte Abschnitte, sequentielle Unterrichtspläne usw.

1
Myrddin Emrys

Die hierarchische Navigation auf Touchscreen-Geräten ist ein gut erforschter Bereich. Wie ich zu jedem mit "Touchscreen" gekennzeichneten Problem zu sagen habe, gibt es keinen einheitlichen Standard für Touchscreen-Hardware, und jede Art von Gerät hat ihre eigenen Stärken und Schwächen (sowie Konventionen).

Wenn Sie sich auf ein kleines, kapazitives Touch-Mobilgerät wie ein iPhone beziehen, besteht die Konvention aus aufeinanderfolgenden Listenansichten (alle mit UINavigationController ):

Hierarchical navigation on the iPhone using successive list views

Bild aus nerohoop 的 专栏

Wenn Sie sich stattdessen auf etwas Größeres wie ein iPad-Tablet beziehen, können Sie dasselbe wie oben tun, jedoch eine Seitenleiste/ein Popover verwenden.

Wenn Sie an Windows 8/Windows RT (Vollbild-Metro-Apps) oder benutzerdefinierte Kiosk-Software denken, besteht die Konvention aus aufeinanderfolgenden Schaltflächen von Schaltflächen (es sei denn, Sie können die Hierarchie reduzieren, was im Allgemeinen der Fall ist eine bessere Option, es sei denn, Sie würden eine extreme Anzahl von Elementen auf einem Bildschirm haben.

Hier ist Discourse, ein Metro RSS-Reader:

Screenshot of Discourse (a Metro RSS reader)

Bild aufgenommen von Softonic.com

… Und so zeigt Microsoft selbst Informationen an, die klassisch hierarchisch sind (beliebige Dateien und Ordner) in seiner Skydrive-App für Windows 8:

A screenshot of SkyDrive for Windows 8

Bild aus MSDN Blogs

Mit unserer benutzerdefinierten Kiosksoftware IQ LINK müssen wir in der Lage sein, eine dynamische Hierarchie beliebiger Tiefe auf kapazitiver Hochleistungshardware (mit relativ geringer Reaktionsfähigkeit) anzuzeigen, daher tun wir dies mit einer Reihe von aufeinanderfolgenden Schaltflächengitter:

The folders view in IQ LINK, a custom kiosk application

Bild von der IQ LINK-Website

2
Kit Grose