Kategorie: Softwareentwicklung

Unarten im Netz – oder: wie werde ich meine Besucher los

Wer kennt sie noch, die guten alten Popups: kleine Browserfenster, die sich über den Browser gelegt haben. Und das meist, um Werbung anzuzeigen. Diese Zeiten sind zum Glück vorbei, da aktuelle Browser diese von Haus aus unterdrücken.

Doch es gibt eine neue Methode, um Benutzer auf einer Webseite abzuschrecken und zu verjagen: Inline-Overlays (also kleine „Popups“ innerhalb der Webseite oder auch Modals genannt). Mit diesen wird der Nutzer meist nach der Emailadresse gefragt, um einen Newsletter zu abonnieren. Ok, ist nicht ganz so nervig wie ein blinkendes Werbe-Popup, aber dennoch unterbricht es den Lesefluss. Und dies meist dann, wenn man sich gerade am Anfang eines Artikels befindet, aus versehen den Mauszeiger aus dem Browserfenster bewegt oder etwas zurück scrollt, um Inhalte erneut zu lesen. Also bei Aktivitäten, die vermuten lassen, dass man das Fenster schließen möchte.

Aber warum? Eine Einschätzung zur Nutzerfreundlichkeit: 0 von 10. Der Nutzer bekommt teilweise nicht einmal die Möglichkeit, den Inhalt zu lesen und soll sich davor schon entscheiden einen Newsletter zu abonnieren. Meines Erachtens mehr abschreckend als nützlich. Denn in den heutigen Zeiten, in denen man immer noch sehr viel Spam im Postfach findet, wird es immer schwerer an Email-Adressen zu kommen.

Aber auch hier hilft Qualität statt Quantität: es wäre sinnvoller sich auf guten Inhalt zu konzentrieren, als zwanghaft zu versuchen, die Leute zu einem Newsletter zu überreden. Also liebe Webmaster: bitte lasst es!

13 wichtige Dinge, die Deine nächste mobile App enthalten sollte

Es gibt viele Dinge, die eine gute App ausmachen. Hier ein paar Gedankenstützen, die bei der Umsetzung einer App helfen können:

  1. Feedback System (E-Mail oder Feedback-Formular)
  2. Fokussiere auf Benutzerfreundlichkeit
  3. Personalisierung (Einstellungen für Datenschutz, Schriftarten/Farben/Größen)
  4. Halte die App einfach und implementiere nur die Basisfunktionen
  5. Denke daran: es ist nur ein Telefon
  6. Wenn Anmeldung, dann auch über Social Media?
  7. Vermeide eine Art „Webbrowser“ mit den gleichen Funktionen einer mobilen Webseite
  8. Weniger ist manchmal mehr – frage nicht nach zu vielen Informationen
  9. Ändere nichts (beim Umwandeln in eine mobile App, sollte sichergestellt sein, dass keine Features ausgelassen werden oder schwer auffindbar sind)
  10. Analysen einbinden
  11. Möglichkeiten zu Offline-Nutzung
  12. Gamification (Gamification ermöglicht es dem Nutzer, interaktiv zu sein und Spaß beim Verwenden der App zu haben)
  13. Fokussiere auf Geschwindigkeit (langsame Apps machen keinen Spaß)

Inspiration: thenextweb.com
Bildnachweis: unsplash.com/@chiro

Buttons in Dialogen: Ok und Abbrechen – rechts oder links?

Die Anordnung von Buttons ist meist abhängig vom Betriebssystem, diese Information sollte daher aus den entsprechenden User Interface Guidelines entnommen werden. Hier eine kurze Zusammenfassung:

Windows

Buttons sollten nach ihrer Aktion in folgender Reihenfolge (von links nach rechts) platziert werden:

OK/[Do it]/Ja
[Don’t do it]/Nein
Abbrechen
Annehmen (wenn vorhanden)
Hilfe (wenn vorhanden)

Abbrechen ist immer rechts vom Ok-Button.

MacOS

Ein Button der eine Aktion ausführt sollte am weitesten rechts platziert werden. Der Abbrechen-Button wird links daneben angeordnet. Bei MacOS ist Abbrechen also links von Ok.

Android

Die ablehnendste Aktion eines Dialogs ist immer auf der linken Seite. Ablehnende Aktionen bringen den Nutzer zurück zur letzten Ansicht.

Bestätigende Aktionen sind rechts. Diese Aktionen The affirmative actions are on the right. Bestätigende Aktionen führen den Prozess fort, welcher den Dialog aufgerufen hat. Bei Android ist Abbrechen also links von Ok.

Designrules im Webdesign, die häufig unterschätzt werden

Es gibt viele Dinge, welche zur Verbesserung der Benutzerfreundlichkeit einer Webseite beitragen. Doch auch wenn einige Designelemente gut aussehen, sie könnten einen Einfluss auf die Benutzerfreundlichkeit haben.

Zentrierte Logos schaden der Navigation auf Webseiten

Getting back to the homepage is about 6 times harder when the logo is placed in the center of a page compared to when it’s in the top left corners. (Quelle: nngroup.com)

Buttons sollten keinen Hand-Cursor haben

There is this belief that the hand cursor means “clickable”, but this is incorrect and potentially problematic. My hope is that by the end of the article, you’ll never want to use the hand cursor for buttons ever again. (Quelle: medium.com)

Ist das „mein“ oder „dein“ Interface?

Wann sollte man „mein“ oder „dein“ in Benutzeroberflächen nutzen? Kurz zusammengefasst:

  • mein (o.ä.) nutzen, wenn der Nutzer mit dem Produkt interagiert, beispielsweise klicken von Buttons oder auswählen von Checkboxen. Solche Wörter sollten aber nur verwendet werden, um etwas besonders hervor zu heben.
  • dein (o.ä.) verwenden, wenn das Produkt Fragen stellt, Anweisungen gibt oder dem Nutzer Dinge beschreibt. Eben so, wie es ein persönlicher Assistent tun würde.

(Quelle: medium.com)

Design Rules für Eingabefelder

Eingabefelder sind allgegenwertig. Jede Interaktion mit Benutzeroberflächen, egal ob über Desktops oder mobile Endgeräte, erfordert Eingabefelder. Kurz zusammengefasst, welche Punkte hier wichtig sind:

  • Position von Labels: die beste Position für Labels ist links oberhalb vom Eingabefeld. Damit wurden Formulare am schnellsten ausgefüllt. Labels links neben dem Input fuhrten hingegen zu einer Verlangsamung beim Ausfüllen, da hier die Augenbewegung deutlich zunimmt.
  • Platzhalter: Platzhalter sind hilfreich, jedoch nicht wenn diese beim Fokus auf das Eingabefeld verschwinden. Also lieber ein aussagekräftiges Label verwenden. Eine neue Methode, bei dem der Platzhalter beim Fokus auf das Eingabefeld zum Label wird, könnte diesen Nachteil ausmerzen.
  • Keyboard: einige Eingabefelder erfordern nur Zahlen als Eingabe. Auf mobilen Endgeräten kann die Nummerblock-Tastatur sehr hilfreich sein. Aktivieren lässt sich diese durch “tel” als type oder das Attribut “pattern=”[0-9]*”.

(Quelle: uxbooth.com – The New Rules of Form Design)

Cards

Cards sind eine beliebte Möglichkeit, mehrere Elemente auf einer Seite darzustellen. Eigentlich sehr einfach umzusetzen, doch es gibt einige Dinge, die man beachten sollte. Auf zurb.com sind 5 Fehler aufgelistet, die häufig beim Erstellen von Cards gemacht werden. dazu gehören:

  • Große Freiräume durch unterschiedliche Höhen der Cards
  • Zu viele Cards auf einmal
  • Zu viele Aktionen innerhalb einer Card
  • Zu viele Inhalte in einer Card
  • Graphiken in Cards, wenn diese nicht zwingend benötigt werden.

(Quelle: zurb.com – 5 Common Mistakes Designers Make When Using Cards In Design)