Ob Unternehmenswebsite, persönlicher Blog, Shopping-Website oder Gaming-Website: Wir alle hoffen, Besucher anzuziehen und ihnen ein angenehmes Besuchserlebnis zu bieten. Benutzerfreundlichkeit ist ein Maß für die Benutzererfahrung und beschreibt, wie einfach Besucher die Funktionen einer Website nutzen können – entweder durch eigenes Wissen oder durch das Erlernen einer neuen Vorgehensweise. Ich denke, Jakob Nielson hat es sehr gut erklärt, als er sagte: Benutzerfreundlichkeit ist eine Eigenschaft, die misst, wie einfach eine Website zu verwenden ist. Unter dem Begriff „Usability“ versteht man außerdem Methoden, die im Designprozess eingesetzt werden, um die Benutzerfreundlichkeit zu verbessern. In diesem Artikel möchte ich eine Usability-Checkliste bereitstellen, die alles vom visuellen Design bis hin zu einfachen Navigationshinweisen abdeckt und in jedem Projekt verwendet werden kann . 1. Aktuelle StandortnavigationTeilen Sie den Benutzern jederzeit mit, in welchem Modul sie sich befinden oder welche Kategorie sie durchsuchen. Dies kann die Benutzerfreundlichkeit jeder Website erheblich verbessern. An dieser Stelle kann die Erstellung einer aktuellen Standortnavigation als der effektivste Weg zur Verbesserung der Benutzerfreundlichkeit angesehen werden. Die aktuelle Standortnavigation lässt sich am besten serverseitig erstellen, wodurch viel HTML- und CSS-Code eingespart werden kann. Wenn es nicht praktisch ist, die Navigation auf der Serverseite zu erstellen, ist es auch eine gute Idee , CSS zu verwenden, um Ihr Body-Element zu bearbeiten und jedes Navigations-Tag direkt zu definieren. Darüber hinaus können Sie mit JavaScript ganz einfach ein Navigationsmenü für den aktuellen Standort erstellen . Bitte beachten Sie, dass sich die Navigation Ihres aktuellen Standorts am besten vom Mouse-Rollover-Stil unterscheidet, da viele Websites dies nicht beachten. 2. Verfügbare Formularbeschriftungen und SchaltflächenMithilfe des HTML-Label-Attributs können Sie Benutzern ermöglichen, Formularelemente durch Klicken auf das Annotationslabel zu aktivieren. Dies ist eine großartige integrierte Funktion von HTML, die jedoch leider nur wenigen Benutzern bekannt ist. Wie macht man Benutzer auf diese Funktion aufmerksam? Sie können den Benutzer warnen, indem Sie die Form des Mauszeigers ändern. Die Implementierung erfordert hierfür nur ein oder zwei Codezeilen. Wenn Sie dies tun, können Benutzer leicht erkennen, dass dieses Tag anklickbar ist. Ich finde es immer sehr falsch, dass diese anklickbaren Elemente im HTML-Standard nicht einheitlich als kleine Zeiger festgelegt sind. Daher definiere ich sie normalerweise einheitlich wie folgt: Beschriftung, Schaltfläche, Eingabe [Typ = "Senden"] {Cursor: Zeiger;}
3. Verlinken Sie Ihr Logo mit der HomepageIch finde es frustrierend, dass Ihr Logo nicht auf die Homepage Ihrer Website verweist, und es gibt so viele Websites, die dies nicht tun. Benutzeruntersuchungen zeigen, dass dies notwendig und von den Benutzern gewünscht ist! Heutzutage erkennen immer mehr Websites, wie wichtig es ist, ihren Logos Links hinzuzufügen. Nutzer geben sich nicht mehr mit einem Textlink zufrieden, der als „Startseite“ gekennzeichnet ist. Sie möchten durch einen Klick auf das Logo zur Startseite zurückkehren. Nehmen Sie beispielsweise Facebook, das jedem Navigationselement ein „ref“-Attribut hinzufügt, um Benutzerklicks zu verfolgen. Wie unten dargestellt: 4. Erhöhen Sie den anklickbaren Bereich des LinksVor etwa einem Jahr schrieb Ryan Singer von 37Signals einen Beitrag darüber, wie sie den anklickbaren Bereich von Links im Basecamp-Projekt vergrößerten . Dies ist ein weiteres kleines Detail, das die Benutzerfreundlichkeit der Website verbessert. Sie müssen lediglich den Abstandswert um den Link erhöhen, um den Klickbereich effektiv zu vergrößern. Es lohnt sich für jede Website, diesen Ansatz auszuprobieren, da er verhindern kann, dass Benutzer versehentlich oder unabsichtlich auf Links klicken. Und für das mobile Webdesign ist dies sogar noch wichtiger, da viele Benutzer ihre Finger zum Anklicken von Links auf dem Touchscreen verwenden und eine Vergrößerung der Fläche ihnen dabei helfen kann, bequemer im Internet zu surfen. 5. Fokusanzeige des FormularelementsDas Hinzufügen einer Fokusanzeige zu aktiven Formularelementen wird zum Trend im UI-Design. Benutzer erfahren, was sie getan haben und was sie tun. Dies ist eine einfache, aber effektive Möglichkeit, dem Benutzer nützliche Details zu übermitteln. 6. Stellen Sie eine nützliche 404-Fehlerseite bereitEs kann frustrierend sein, wenn Ihre Website Ihren Benutzern eine große Apache-Fehlermeldung anzeigt. Daher ist das Erstellen einer benutzerfreundlichen, nützlichen 404-Fehlerseite eine gute Lösung. Denn für Nicht-Entwickler haben Zahlen wie „404“ weder Bedeutung noch Wert. Nutzer wollen auf der Website nur die Informationen finden, die sie benötigen. Erstellen Sie eine Fehlermeldungsseite, die den Benutzern dabei helfen kann, die benötigten Informationen richtig zu finden, z. B. durch die Anzeige einer Entschuldigung beim Hinzufügen eines Suchfelds, empfohlener Artikel oder Homepage-Links usw., und versuchen Sie, die Benutzer auf der Website zu halten, anstatt ihnen die ganze Schuld dafür zu geben, dass sie den falschen Link eingegeben haben. Hier sind einige hervorragende 404-Seiten zum Genießen: Sehr kreative 404-Fehlerseite Wertschätzung 7. Schaffen Sie eine angenehme SchreibumgebungHeutzutage ist das Verfassen von Website-Texten ein großes Thema geworden und es müssen immer mehr Details bei der Erstellung einer Website berücksichtigt werden. Von der Antike bis in die Gegenwart hat die Diskussion über den Textinhalt von Websites nie aufgehört und die Standards dazu haben sich geändert. Steve Krug plädierte einst dafür, den Textinhalt um die Hälfte zu reduzieren und in Listenform darzustellen. Aber jetzt ist es anders. Wir müssen Texte so schreiben, wie wir mit Freunden sprechen, damit die Nutzer eine angenehme und herzliche Atmosphäre spüren. Auf diese Weise fühlen sich die Benutzer weniger eingeschränkt und selbst wenn sie auf Probleme mit der App stoßen, sind sie froh, in der Hilfe der Website Lösungen zu finden. 8. Passen Sie den Zeilenabstand an, um die Lesbarkeit zu verbessernDer Zeilenabstand ist eines der Elemente, die direkt von traditionellen Medien wie Büchern, Zeitungen und Zeitschriften auf Webseiten übertragen werden können. Die Erforschung und Verbesserung dieser Inhalte erfolgt seit Hunderten von Jahren, und es wurden viele hervorragende Erfahrungen gesammelt. Bevor Sie also das nächste Mal mit dem Entwurf beginnen, können Sie sich in einer Zeitschrift Inspiration holen. Der Zeilenabstand ist ein häufig übersehener oder missbrauchter Aspekt des Webdesigns. Normalerweise beginne ich mit einem Zeilenabstand von 1,4x und passe ihn dann je nach Design und Inhalt an. 9. Verwenden Sie Leerzeichen, um Elemente zu unterscheiden und zu kategorisierenEine Möglichkeit zur Anzeige von Inhalten besteht in der Gruppierung von Inhaltselementen in Kategorien. Sie können zur Kategorisierung Bilder, Rahmen oder einfach nur Leerraum verwenden. Die Verwendung von Leerzeichen zum Gruppieren von Inhaltselementen kann eine natürliche und harmonische Benutzererfahrung schaffen und den Inhalt auch auf den ersten Blick klar erkennbar machen. Wenn Benutzer eine Webseite überfliegen (beispielsweise beim Lesen einer TOP10-Liste), achten sie zuerst auf den Titel. Wir hoffen zunächst, dass die Inhalte unserer Website interessant sind und zum Weiterlesen anregen. Eine richtige Führung der Benutzer fördert und ergänzt jedoch die Darstellung der Inhalte. 10. ZugänglichkeitHiermit ist nicht der „508 Act“ gemeint (Absatz 508, ein US-Gesetz, das grundsätzlich besagt, dass bestimmte spezielle Benutzergruppen, wie etwa Menschen mit Behinderungen, die erwarteten Informationen beim Surfen auf einer Website nicht erhalten können, die Website gemäß den einschlägigen Gesetzen und Vorschriften verklagen können). Mit „barrierefrei“ ist hier gemeint, dass Sie für Ihre Benutzer alle Aspekte berücksichtigen, damit diese problemlos finden, was sie benötigen. Wenn Sie durch die Gewährleistung eines barrierefreien Surfens verhindern können, dass Ihre Benutzer verärgert werden und die Seite verlassen, dann ist „schnelle Reaktion“ Ihre letzte Verteidigungslinie, um Benutzer zu halten. Wenn Sie zielstrebig sind, können Sie alle erdenklichen Tests durchführen und anschließend die Testmeinungen der Anwender zu Rate ziehen. Ziel ist es, die Nutzer so weit wie möglich zu binden, da das Bewusstsein und die Gewohnheiten einzelner Nutzer unterschiedlich sind und es schwierig ist, einen Weg zu finden, alle Nutzer zufriedenzustellen. Wenn Sie an „barrierefreies Surfen“ und „Reaktionsfähigkeit“ denken, denken Sie vielleicht zuerst an Menschen mit Sehbehinderungen, aber es steckt noch viel mehr dahinter. Beispielsweise müssen Sie Ihre Website an Benutzer mit begrenzter Bandbreite (DFÜ, Mobiltelefone, langsames Internet usw.) und älteren Browsern anpassen (einige Unternehmen erlauben ihren Mitarbeitern nicht, ihre Browser zu aktualisieren). Wenn wir unser Bestes tun, um Barrieren bei der Nutzung der Site zu beseitigen und schnell auf Site-Probleme zu reagieren, können wir ein nahtloses Benutzererlebnis schaffen, das bei den Benutzern einen guten Eindruck hinterlässt und sie dazu bringt, immer wiederzukommen. |
<<: Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf
>>: Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS
In diesem Artikel werden die einzelnen Schritte d...
1. Einführung in Varnish Varnish ist ein leistung...
Inhaltsverzeichnis 1. Entdecken Sie das Problem 2...
1. Methode 1 zum Löschen von Floating Legen Sie d...
vorgenannt Dieser Artikel ist sehr kurz~ Der Haup...
MySQL implementiert Sequenzfunktion 1. Erstellen ...
1.Mysql-Verbindungsmethode Um das MySQL-Kommunika...
Inhaltsverzeichnis 1. Entwicklungsumgebung 2. Ins...
Szenario mit dem Problem des Seitenumblätterns B ...
Linux findet ein bestimmtes Programm, wo ist Der ...
Vorwort Dieser Artikel konzentriert sich nur dara...
Verstehen Sie zunächst eine Methode: Aufrufen ein...
Es gibt eine neue Funktion, die das Erfassen eine...
Beim Schreiben des HTTP-Moduls von nginx müssen d...
React entstand als internes Projekt bei Facebook....