10 Tipps zum Entwerfen nützlicher, benutzerfreundlicher Webanwendungen

10 Tipps zum Entwerfen nützlicher, benutzerfreundlicher Webanwendungen

Hier sind 10 Tipps zum Entwerfen benutzerfreundlicherer Webanwendungen!

Tipp 1: Achten Sie auf die Tabs

Registerkarten sind eine hervorragende visuelle Darstellung des Konzepts der Inhaltsorganisation. Seine Funktionen sind intuitiv und jeder weiß, wie sie zu bedienen sind. Leider können Registerkarten dazu führen, dass nachlässige Designer die Formulare außer Kontrolle geraten lassen und sie überladen und unorganisiert werden.
Verwenden Sie keine Registerkarten zur Verwaltung übermäßig komplexer Formulare. Konzentrieren Sie sich auf die Reduzierung übermäßig komplexer Formulare. Wenn es zu unübersichtlich wäre, sie alle auf einer Seite unterzubringen, teilen Sie sie in einen Leitfaden auf.

Tipp 2: Sparverhalten konsequent gestalten

Mischen Sie nicht das automatische Commit- und das manuelle Speicherverhalten. Wenn eine Schaltfläche „Speichern“ vorhanden ist, vertrauen Benutzer dem Verhalten der automatischen Übermittlung nicht mehr. Ebenso können sie bei anderen Eingabearten davon ausgehen, dass die automatische Übermittlung die Eingabe erledigt und die Schaltfläche „Speichern“ ignorieren. Egal für welche Methode Sie sich entscheiden, bleiben Sie dabei und seien Sie konsequent.

Tipp 3: Überlegen Sie sich, wo sich der Lösch-Button befindet

Sofern Benutzer nicht häufig Dinge löschen müssen, sollten Sie die Löschschaltfläche an einer sekundären Stelle in Ihrem Formular platzieren. Die Bereitstellung einer Schaltfläche „Löschen“ in den Suchergebnissen kann zu unnötiger Komplexität führen, da dadurch einer Aktion zu viel Bedeutung beigemessen wird, die die Benutzer möglicherweise nicht häufig verwenden sollen.

Tipp 4: Geben Sie immer Beschriftungen für Eingabefelder an

Es hat sich zu einem gängigen Trend entwickelt, in Webanwendungen leere Eingabeaufforderungen anstelle von Eingabefeldbeschriftungen zu verwenden, da die Anwendung dadurch einfacher und klarer aussieht. Wenn der Benutzer etwas eingibt, verschwindet die leere Eingabeaufforderung leider. Was soll der Benutzer tun, wenn er wissen möchte, welches Eingabefeld die Daten enthält?
Schwebende Beschriftungen haben sich zu einer neuen beliebten Lösung entwickelt, die den Unterschied zwischen der Einfachheit benutzerdefinierter Platzhalter und der Verwendung fester Beschriftungen auflöst.

Tipp 5: Bei neuem Bedarf richtig recherchieren

Die meisten Benutzer wissen nicht, wie man Software entwirft, stellen jedoch häufig Anforderungen an den Softwareentwurf. Fragen Sie sie, warum sie etwas Neues brauchen, und verstehen Sie, was sie wirklich erreichen möchten. Bieten Sie eine bessere Lösung für den zugrunde liegenden Bedarf, anstatt blind neue Funktionen bereitzustellen.

Tipp 6: Bringen Sie intuitive Benutzeroberfläche und Effizienz ins Gleichgewicht

Wenn Benutzer Ihre App zum ersten Mal verwenden, müssen sie so schnell wie möglich loslegen. Die Benutzer konsultieren nie die Dokumentation und erhalten in den meisten Fällen nie eine Schulung. Das heißt, dass sich die Benutzer mit der Zeit von der mühsamen Erlernung der Verwendung des Programms zu einer sehr effizienten Arbeitsweise entwickeln müssen, die sie an einem Acht-Stunden-Tag erledigen können.
Es besteht ein empfindlicher Ausgleich zwischen einer App, die leicht zu erlernen ist und einfache Bildschirme bietet, und einer effizienten und schnellen Nutzung.

Tipp 7: Was passiert nach dem Speichern?

Bedenken Sie immer, was passiert, nachdem der Benutzer auf „Speichern und Senden“ klickt. Die Ergebnisse müssen konsistent sein und der Benutzer muss irgendwann die Antwortinformationen kennen. Wenn Ihre Anwendung über das typische Suchen-Bearbeiten-Speichern-Konzept verfügt, besteht der richtige Ansatz darin, die Suchergebnisseite anzuzeigen, da die Benutzer wahrscheinlich gerade dabei sind, zum nächsten Element in der Liste zu wechseln.
Wenn der Benutzer einen mehrstufigen Prozess in einer Assistentenoberfläche abgeschlossen hat, ist eine Abschlussseite erforderlich, die anzeigt, was gespeichert wurde, und Optionen für den nächsten Schritt bietet. Das Fehlen von weiteren Aktionen oder Vorschlägen auf der Bestätigungsseite des Assistenten kann für neue Benutzer verwirrend sein.

Tipp 8: Wo befinden Sie sich gerade?

In einer größeren Webanwendung kann es Dutzende oder sogar Hunderte von Schnittstellen geben. Benutzer müssen stets auf einheitliche Weise wissen, wo sie sich in der Anwendung befinden und was sie gerade bearbeiten. Dies kann durch Hervorheben der Navigationsleiste erfolgen, um dem Benutzer anzuzeigen, wo er sich in der Anwendung befindet.
Sie können auch Breadcrumbs verwenden, um zu beschreiben, wo sich der Benutzer in Ihrer Anwendung befindet. Für jeden vom Benutzer ausgewählten Ort können auch Breadcrumbs angezeigt werden. Durch Anklicken einer dieser Breadcrumbs kehrt der Benutzer zur zuletzt durchsuchten Benutzeroberfläche zurück.

Tipp 9: Machen Sie sich nicht zu viele Gedanken über Bildlaufleisten

Im Zeitalter von Desktopanwendungen besteht das typische UI-Design darin, sich ohne Bildlaufleisten an den Bildschirm anzupassen. Eine vertikale Bildlaufleiste ist in einer Webanwendung nichts Schlechtes, solange sie sichtbar und klar dargestellt ist. Wenn der Benutzer auf die Registerkarte des Formulars klickt, wird dieser je nach Verhalten des Browsers möglicherweise sogar automatisch an die entsprechende Position gescrollt.

Tipp 10: Keine Angst vor Leerraum

Es besteht eine natürliche Tendenz, alles ausfüllen zu wollen. Mit steigenden Anforderungen packen die Entwickler immer mehr Funktionen in einen begrenzten Raum. Was bleibt, ist eine übermäßig komplexe Anwendung, die ziemlich verworren und verwirrend aussieht. Wenn Sie ausreichend Leerraum lassen, kann Ihre App einfach und ansprechend aussehen.

abschließend

Benutzer beurteilen die Qualität einer App eher anhand ihrer Benutzeroberfläche als anhand ihrer Funktionalität. Wenn Benutzer der Meinung sind, dass Ihre Anwendung einfach zu verwenden ist und ihnen ein gutes Gefühl vermittelt, werden sie Ihre Anwendung verwenden. Andernfalls wird es schwierig sein, gute Bewertungen zu erhalten, selbst wenn die Funktionen leistungsstark sind. Behalten Sie diese zehn Tipps beim Entwurf Ihrer nächsten Webanwendung im Hinterkopf und Ihre Benutzer werden es Ihnen danken!
Über den Autor:
David Talbot ist derzeit Chefarchitekt der EverBank. Mit über 15 Jahren Erfahrung in der Softwarebranche und Berufserfahrung im Erstellen von Rich-UI-Webanwendungen. Er ist außerdem Autor von Applied ADO.NET und einer großen Anzahl technischer Artikel. Die E-Mail-Adresse lautet [email protected]

<<:  Eine kurze Diskussion über HTML-Titel, Absätze, Zeilenumbrüche, horizontale Linien und Sonderzeichen

>>:  Mit CSS3 implementierter Gradienten-Folieneffekt

Artikel empfehlen

WeChat Mini-Programm implementiert den Likes-Dienst

In diesem Artikel wird der spezifische Code für d...

Detailliertes Tutorial zur Verwendung des Befehls xargs unter Linux

Hallo zusammen, ich bin Liang Xu. Sind Sie bei de...

Die Darstellung und Öffnungsmethode eines Hyperlinks

<br />Verwandte Artikel: So rufen Sie einen ...

SQL-Implementierung von LeetCode (175. Zwei Tabellen verbinden)

[LeetCode] 175.Zwei Tabellen kombinieren Tabelle:...

Vollständige Analyse der MySQL-Datentypen

Datentyp: Die grundlegenden Regeln, die definiere...

Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

Inhaltsverzeichnis 1. Wir müssen sicherstellen, d...

Detaillierte Analyse des temporären JDBC- und MySQL-Tablespace

Hintergrund Temporäre Tablespaces werden verwende...

So konfigurieren Sie geplante MySQL-Aufgaben (EVENT-Ereignisse) im Detail

Inhaltsverzeichnis 1. Was ist eine Veranstaltung?...

So verwenden Sie pdf.js zur Vorschau von PDF-Dateien in Vue

Wenn wir auf der Seite eine PDF-Vorschau anzeigen...

Praktische Methode zum Löschen von Dateien über die Linux-Befehlszeile

rm-Befehl Der Befehl rm wird von den meisten Benu...

CSS- und HTML- und Front-End-Technologie-Schichtendiagramm

Die Beziehung zwischen Javascript und DOM ist seh...