Bootstrap Dashboard

Allgemein Schlagwörter: , , 0 Kommentare

Ich mag die Gestaltung vom Back-End einer WebSite. Besonders die Konzeption und grafische Ausarbeitung von Daten gefällt mir. Heute möchte ich Euch eine Inspirationsquelle von mir zeigen. Beginnen wir mit den Forumlaren.

Webformular

Ein Webformular ist ein Formular auf einer Webseite zur Erfassung von Daten, die zur Verarbeitung an einen Webserver gesendet werden. Man findet sie beispielsweise in Webmail-Anwendungen, Suchmaschineneingabefeldern, in Sozialen Netzwerken oder auf Login-Seiten. Das Kommentar-Funktion auf dieser Seite unten ist Webformular. Das Absenden der Daten verläuft über das Hypertext Transfer Protocol via HTTP-GET, HTTP-POST oder dem XMLHttpRequest (Ajax).

Der Heise Verlag hat eine Einführung in bessere Formulare dank HTML5 und CSS3 veröffentlicht. Aber bist du auch manchmal genervt, weil beim Einkaufen auf dem Handy die Adressengabe ständig von der Autokorrektur zerschossen wird oder weil sich bei numerischen Eingaben die QWERTZ-Tastatur öffnet anstatt der Ziffernblock?

Auch diese Stolpersteine möchten wir in unserem neuen Online-Shop vermeiden.

Back-End Gestaltung

In den letzten Tagen haben wir uns im Büro für Gestaltung mit der Webformular Gestaltung intensiv beschäftigt.

Was ein gutes Webformular ausmacht

Der Dialog zwischen schlecht programmierten und gestalteten Formularen und deren Benutzern geht mit einer klaren Niederlage seitens des Formulares aus. Es sind Formulare, welche den Dialog zwischen Dir und Deinen Besuchern erst ermöglichen. Sehr schnell vergrault man sich wichtiges Feedback oder gar Kunden, sollte hier die Wichtigkeit von sauberen und durchdachten Webformularen unterschätzt werden.

Denn eines steht fest: Deine Besucher ärgern sich nicht mit Formularen herum. Er wird schnell einen anderen Anbieter aufsuchen.

Beispiel für eine Standard Gestaltung https://blog.r23.de/html/backend/app/form-standard.html

Ein gutes Webformular erstellen und validieren

Das Abfangen von Fehlern und Falscheingaben und die Abarbeitung der eingebenen Daten stellen den zweiten Teil eines Formulares dar. Besonders das Abfangen von Fehlern des Anwenders ist der Part, an dem sehr viel daneben geht und eine Menge Frust seitens des Anwenders aufkommen lässt.

Beispiel https://blog.r23.de/html/backend/app/form-validation.html

Zur schlimmsten Sorte der „dummen-Formulare“ gehören diese, welche fehlerhafte Eingaben zwar durch eine Fehlerseite mitteilen – diese Fehler aber nicht auflisten. Kommen Sie Ihren Anwendern also entgegen, indem sie alle fehlerhaften Punkte auflisten und einen kleinen Hilfetext dazu bieten, was denn genau falsch eingegeben wurde.

Typisches Beispiel einer Registrierung -> Du hast eine notwendige Eingabe vergessen und das Passwort muss wieder zweimal eingegeben werden, sowie der Text für die Eselsbrücke und die 100 zuvor gestellten Drop-Down Menüs.

Du möchtest in einem Shop nur Preise von bis dur anzeigen lassen? Warum kein Schieberegler verwenden?

Regler

Verzichte auf Reset

Hast du dich selbst schon dabei erwischt, wie du ein „Reset“ – Button gedrückt hast anstelle Absendebutton? Nach dem zweiten erfolgreichen, versehentlichen Klick auf genau diesen Resetbutton, wurde dir klar was diese HTML-Funktion taugt: NICHTS!

back-end_mobil-fist

Fotosbearbeiten

In der Regel benötigt eine Webanwendung Fotos in einem bestimmten Seitenverhältnis. Zum Biepsiel: 16:9 oder 4:3 oder 1:1 oder 2:3. Vorschaubilder werden gerne im Seitenverhältnis 1:1 verwendet. Bei der automatischen Bildbearbeitung von 16:9 nach 1:1 werden dann die Köpfe von Personen abgeschnitten… Für die meisten Bildergalerien reicht es vermutlich aus, wenn ein zufälliger Bildausschnitt als Vorschaubild ausgeschnitten wird. Deshalb ist es nicht nötig, dem Benutzer die Möglichkeit zu geben, direkt im Browser einen Bildausschnitt zu wählen. Doch wenn die Fotos im Vordergrund stehen, sollten die Fotos besser in Szene gesetzt werden.

Beispiel Image Cropper

Usability und User Experience als Wirtschaftsfaktor

Usability ist ein Maß dafür, wie leicht Nutzer mit einem interaktiven Produkt interagieren. User Experience geht darüber hinaus und umfasst das gesamte Nutzungserlebnis, das ein Nutzer mit einem Produkt erfährt: Wie attraktiv wird eine Anwendung wahrgenommen? Macht die Nutzung des interaktiven Produkts Spaß? Von Usability und User Experience profitieren Nutzer und Unternehmen gleichermaßen.

Eine gelungene User Experience wirkt sich aber auch auf das Markenimage aus. Denn die Bedienoberfläche ist die Visitenkarte eines Produkts. Über sie erlebt der Nutzer das Gerät und somit auch die Marke – ob Kaffeemaschine, Mobiltelefon, Computersoftware oder industrielle Anlage.

Was würdet ihr anders machen? Habt ihr Erfahrung mit dieser oder ähnlichen Techniken? Eure Meinung interessiert mich brennend, also hinterlasst mir doch einen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell

Blog via E-Mail abonnieren

Gib Deine E-Mail-Adresse an, um diesen Blog zu abonnieren und Benachrichtigungen über neue Beiträge via E-Mail zu erhalten.