Dienstag, 04 März 2014 15:09

No.4 :) - UX vs :( - UX [Formular Edition]

Über die Usability von Formularen kann man mehrstündige Workshops halten. Wir haben zwei Beispiele für unsere Reihe "Good UX vs. Bad UX" genommen, um zu zeigen, worauf man achten sollte.

Good UX - Das Online-Formular zum Beantragen der Briefwahlunterlagen

Bereits bei den Bundestagswahlen 2013 ist mir das Online-Formular der Stadt Nürnberg zum Beantragen der Briefwahlunterlagen als sehr gutes Beispiel für ein benutzerfreundliches Formular im Gedächtnis geblieben. Allerdings gab es da noch nicht unsere Reihe "Good UX vs. Bad UX", so dass ich damals keinen Screenshot gemacht habe. Dieses Jahr stehen erneut Wahlen an, und ich werde kurz erläutern, weshalb es das Formular in unsere Reihe geschafft hat:

Briefwahlantrag Startseite 

Briefwahlantrag Fehlerfall

1.) Pflichtfelder: Sowohl oberhalb als auch unterhalb des Formulars ist der Hinweis, dass es sich bei Feldern mit * um Pflichtfelder handelt. Diese sind farblich und durch ein Sonderzeichen (siehe Punkt Voice Over) hervorgehoben.

2.) Fehlerfall: Im Fehlerfall wird ein allgemeiner Hinweis zum Beheben des Fehlers angezeigt und die jeweiligen Felder hervorgehoben. Zusätzlich gibt es noch eine Info, wie das Feld ausgefüllt werden muss.

3.) Direkte Validierung der eingegebenen Daten: Beim Ausfüllen des Formulars wird direkt eine Rückmeldung vom System gegeben, ob die Eingabe korrekt ist. Ein grüner Pfeil gibt dem Nutzer jeweils Feedback.

4.) Label: Das Label zum Texteingabefeld steht daneben (alternativ kann man es auch darüber schreiben oder unten in das Feld). Das hat den Vorteil, dass die Nutzer sehen, was sie eingeben müssen.

5.) Voice Over: "Name Sterntext bearbeiten" - "Bitte geben Sie den Tag an" - Beim Entwickeln des Formulars hat man darauf geachtet, dass der vorgelesene Text dem Nutzer hilft, das Formular auszufüllen. Damit wird die Seite auch barrierefrei.

Für uns fünf gute Gründe, warum es das Formular in die Kategorie Good UX geschafft hat!

Bad UX - Hilfe-Formular auf der Adobe-Seite

Durch Zufall bin ich neulich auf die Online-Hilfe von Adobe gestoßen. Da ich nach einem speziellen Wort gesucht habe, ist mir das Adobe-Community-Suchfeld oben links auf der Webseite aufgefallen. Als ich den Suchbegriff eingeben wollte, war das Beispiel für Bad UX gefunden:

Suchformular Adobe Hilfe Startseite 

Suchformular ausgefüllt Adobe Hilfe

1.) Label: Das Label ist im Suchfeld. Kann man machen, und es spricht nichts dagegen. Allerdings sollte das Formular leer sein, wenn ich rein klicke. So muss der Nutzer erst umständlich den Text löschen. Generell ist es besser, wenn das Label außerhalb des Texteingabefelds steht und man dieses mit einem Beispieltext für die Suche vorausfüllt.

2.) Konsistenz: Dem aufmerksamen Webseiten-Besucher fällt auf, dass es zwei Suchfelder gibt: eines in der linken Spalte und eines oben rechts im Header. Beide Suchfelder verhalten sich unterschiedlich (Autovervollständigung - keine Autovervollständigung, Löschen des Inhalts beim Selektieren - Kein Löschen des Inhalts, ...). Leider hat man bei der Konzeption der Webseite nicht darauf geachtet, dass der Punkt Erwartungskonformität – Konsistenz, Anpassung an das Benutzermodell eingehalten wird. In der EN ISO 9241-110 Grundsätze der Dialoggestaltung gibt es dazu weitergehende Informationen.

3.) Voice Over: "Suche Eingabemaske am Textende Text bearbeiten" (linkes Suchfeld) - "Search Text bearbeiten" (rechtes Suchfeld). Einmal deutsch, einmal englisch. Außerdem auf Grund der schlechten Implementierung ein langer, komplizierter Text. 

Leider sind das drei gravierende Punkte, die uns zu dem Schluss kommen lassen: "Adobe, das geht besser!"

Freigegeben in Blog
Donnerstag, 17 Oktober 2013 12:06

No.2 :) - UX vs :( - UX

Vor einer Woche haben wir die neue Reihe :) - UX vs :( - UX eingefügt. In der Zwischenzeit sind uns wieder zwei Beispiele für diese Reihe über den Weg gelaufen.

:( - UX

Der Königsweg des Produktdesigns ist natürlich ein möglichst benutzerfreundliches Produkt, das auch noch Freude macht und begehrt wird. Leider hat der Hersteller unserer Grillzange diesen Weg nicht eingeschlagen. Natürlich kann man sich die Frage stellen, muss eine Grillzange begehrt sein oder Freude bereiten? Nein, aber sie muss das machen, was sie soll. Mit besagter Grillzange ist es einfach nicht möglich, das Grillgut ohne Verrenkungen zu wenden. Außerdem wird aufgrund der relativ scharfen Zacken und des langen Griffs das Grillgut zerdrückt. Das geht eindeutig besser! Deshalb für uns ein Beispiel für :( - UX.

Grillzange

PS: Trotz der Grillzange hatten wir im September einen tollen Grillabend auf der insertEFFECT-Terrasse. 

:) - UX

Das Thema Mobility-Apps ist gerade in aller Munde. Ein weiteres viel diskutiertes Thema sind Formular-Elemente, vor allem seit iOS7 gelauncht wurde. Dazu kommt, dass die Eingabe von Daten nach wie vor auf mobilen Endgeräten keinen Spaß macht. Die Macherinnen und Macher des Eingabeformulars der moovel-App haben die Problematik erkannt und eine tolle Lösung umgesetzt:

  • Die Formular-Elemente sind clever in einen Satz integriert, so dass die Nutzer einfacher verstehen, wonach sie suchen.
  • Die Eingabefelder sind deutlich hervorgehoben, indem die Farben invertiert wurden. 
  • Editierbare Felder haben einen Button-Style in Form von abgerundeten Ecken und dunkel hinterlegten Flächen bekommen. Das ist übrigens generell ein Tipp von Jessica Enders, den man anwenden sollte, wenn ein Element im Flat-Design danach schreit, touchbar zu sein.

Das sind alles Argumente dafür, dass es das moovel-Eingabeformular in der Kategorie :) - UX geschafft.

Nina

Freigegeben in Blog
Donnerstag, 10 Oktober 2013 11:15

No.1 :) - UX vs :( - UX

Wenn man als User Experience Designerin tätig ist, achtet man häufig schon unbewusst darauf, ob ein Produkt, digital oder analog, gut bedienbar ist. Wir wollen hier auf unserem Blog eine kleine Reihe starten, in der wir gute, aber auch schlechte Beispiele für User Experience vorstellen.

Freigegeben in Blog
Mittwoch, 17 Juli 2013 13:13

m-commerce - Los geht die Reise!

Im November vergangenen Jahres habe ich das Debüt als Autorin für unternehmer.de mit dem Artikel "Guerilla Usability Tests – Auf der Jagd nach Fehlern in Apps" gegeben. Da es eine Menge Spaß macht für unternehmer.de zu schreiben und das Thema der Juli Ausgabe "Mobile & App" ist, gibt's nun einen neuen Artikel. 

Vielen Dank an Patricia, dass es ein Leitartikel geworden ist und den Artikel somit eine coole Illustration von mediendesign.de schmückt. 

Die PDF-Version des Magazins unternehmer WISSEN gibt's hier: http://www.unternehmer.de/it-technik/153452-m-commerce-schafft-man-das-perfekte-shoppingerlebnis-auf-mobilen-endgeraeten

oder auf der Website: http://www.unternehmer.de/it-technik/153452-m-commerce-schafft-man-das-perfekte-shoppingerlebnis-auf-mobilen-endgeraeten 

Viel Spaß beim Schmökern!

m-commerce 1

 

m-commerce 2

 

 

Freigegeben in Blog
Dienstag, 14 Mai 2013 22:47

Qualitätssicherung

insertEFFECT steht für Software, die auch den Ansprüchen von morgen gerecht wird. Um eine hohe Qualität und Stabilität der Software bei Auslieferung sowie im Verlauf einer eventuellen Weiterentwicklung und Pflege sicherzustellen, haben sich bei uns folgende Maßnahmen bewährt:

  • Testgetriebene Entwicklung
  • Manuelle Funktionstests und UI-Tests
  • Testen auf relevanten Endgeräten
  • Collective Code Ownership
  • Cloud Testing
  • Usability Tests
Freigegeben in Kompetenzen
Dienstag, 14 Mai 2013 01:24

Agile Methoden

In Absprache mit unseren Kunden setzen wir auf agile Methoden beim Management der Softwareprojekte. Scrum garantiert die Flexibilität und Transparenz, die bei der Entwicklung von Apps nötig ist. Kurze Release-Zyklen ermöglichen dem Kunden, auch während des Projektverlaufs schnellen Eingriff und die Möglichkeit, Änderungswünsche zu implementieren.

insfx scrum

Freigegeben in Kompetenzen
Montag, 08 April 2013 11:23

Usability

Eine einfache Bedienung entscheidet über den Erfolg eines Produkts. Bei uns nimmt Usability in allen Entwicklungszyklen eine wichtige Rolle ein. Bereits in der Konzeptphase werden einfache Tests durchgeführt. Dies lässt sich ausbauen bis hin zu umfassenden Usability-Tests, mit denen Anwendungskiller auf mobilen Webseiten oder in Applikationen zielsicher aufgespürt werden können.

Je nach Projekt und Fragestellung kommen folgende Usability-Testmethoden zum Einsatz:

  • Heuristische Evaluation
  • Experten-Review
  • Cognitive Walkthrough
  • Usability-Test im Labor
  • Thinking-Aloud-Methode

 image usability

Freigegeben in Kompetenzen

Viele Apps sind mittlerweile auf eine gute Usability bedacht. Es gibt Bücher, Experten oder ganze Geschäftszweige, die sich mit dem Thema beschäftigen. Das Programm muss intuitiv zu bedienen sein - am besten ohne Einarbeitungszeit. Dies erreicht man durch eine selbsterklärende Benutzeroberfläche. Doch was ist in welchem Rahmen für jemand bestimmtes selbsterklärend?

Freigegeben in Blog
Donnerstag, 27 Oktober 2011 17:19

E-Book: Mobile Design & Usability

Mobile Design & Usability – warum soll man sich darüber überhaupt Gedanken machen?

In unseren Workshops, Projekten und bei unzähligen Kundengesprächen werden uns immer wieder Fragen rund um das Thema Design von Apps gestellt. Fragen, die uns zu diesem E-Book insprierten.

Das Ergebnis ist eine komprimierte Einführung in das Thema “Mobile Design & Usability”. Es gibt einen Überblick über die Design-Philosophie sowie die wichtigsten User-Interface-Elemente von Android- und iPhone-Apps und geht außerdem auf die Grundprinzipien von User-Interface-Gestaltung ein. Um die Herangehensweise noch besser zu verdeutlichen, haben wir uns eine fiktive Android- und iPhone-App ausgedacht und sie designt: Lokuskop, eine App, mit der nach öffentlichen Toiletten im Umkreis gesucht werden kann.

Wir würden uns freuen, wenn Sie es auch Ihren Freunden, Kollegen, Bekannten und für wen es auch sonst interessant sein könnte, weiterempfehlen. Natürlich sind Feedback, Anregungen für zukünftige Updates sowie Lob jederzeit willkommen.

Think of design as communication between you and the user.
Jim Palmer auf der Google I/O 2010

E-Book herunterladen
Version 1.1 (PDF, 4,2 MB)

Freigegeben in Downloads