Dieser Blog wurde zerstört

Leider wurde mein Blog von ein paar Vollidioten zerstört! Es wird wohl ein paar Tage dauern bis ich alle Elemente wiederhergestellt habe, ich bitte um euer Verständnis und ein wenig Geduld.

Vielen Dank!

 

Kontextabhängige Keyboards für mobile Endgeräte – UX Tipp 4

Formulare mit einem mobilen Endgerät auszufüllen stellt für viele Nutzer eine Herausforderung dar, insbesondere Smartphones machen es dem Nutzer durch ihre überladenen und sehr kleinen Keyboards schwer ein Formular fehlerfrei und flüssig auszufüllen.

Wie kann man den Nutzer bestmöglich dabei unterstützen Formulare auf mobilen Endgeräten auszufüllen?

Ein erster Ansatz ist natürlich die Anzahl der zu befüllenden Formularfelder auf ein Minimum zu reduzieren. Damit wird die Höhe der Hürde „Dateneingabe“ zwar verringert, die Wahrscheinlichkeit von „Vertippern“ und damit einhergehend die mögliche Frustration des Nutzers aber nicht wesentlich reduziert. … 

 

Bevormundung durch mobile Endgeräte – UX Tipp 3

Wer kennt das nicht, man tippt gerade seinen Nutzernamen und Password in ein Login-Formular ein und das Smartphone oder Tablet machen aus dem ersten Buchstaben einen Großbuchstaben und oder schlagen einem völlig unnötig eine Autokorrektur vor. Eine vollkommen sinnlose und störende Bevormundung durch mobile Endgeräte, die nicht selten zu Frustration beim Nutzer führt. … 

 

Selbsterklärende Formulare – UX Tipp 2

Formulare stellen für viele Nutzer eine Hürde dar und führen häufig zu Frustration. Eine Ursache dafür ist, dass sich viele Nutzer unsicher sind ob sie das Formular auch richtig ausfüllen.

Selbsterklärende Formulare können dazu beitragen die Akzeptanz und das Nutzungserlebnis zu verbessern, dem Nutzer die Sicherheit vermitteln die er braucht um erfolgreich zu konvertieren. … 

 

Direkte Manipulation – UX Tipp 1

Manchmal ist es sinnvoll bestimmte Elemente der Nutzeroberfläche durch direkte Manipulation änderbar zu machen und auf umständliche Schritte zu verzichten.  Zum Beispiel, eine Liste von Ordnern, der der Nutzer beliebig viele neue Ordner hinzufügen können soll.

Hier ist es wenig sinnvoll den Nutzer mit umständlichen Eingabemasken zu beschäftigen, besser ist es die Liste direkt manipulierbar zu machen und so ein paar Hürden in der Nutzung abzubauen. Direkte Manipulation ist immer dann angemessen, wenn der Nutzungskontext selbsterklärend ist.

… 

 

Sticky Navigation – Axure 6.5 Tutorial

Sticky Navigation – bis zu  Axure Version 7 war es ein ziemlich trickreiches Unterfangen Elemente die mitscrollen bei erreichen einer gewissen Scrolltiefe „sticky“ werden zu lassen. Am Beispiel einer sticky Navigation möchte ich kurz die Möglichkeiten aufzeigen.

Die Ausgangssituation: Das Verhalten der Navigation beim Scrollen auf der Seite http://oneplus.net/de/one will ich in Axure nachbauen. D.h. zu Anfang scrollt die Seitennavigation mit und wird bei erreichen einer gewissen Scrolltiefe an den oberen Browserrand angeheftet.

… 

 

UI Sketching mit Penultimate

Penultimate ist eine iPad App für handschriftliche Texte und Handskizzen, also auch fürs UI Sketching verwendbar. Zuerst habe ich Penultimate auf meinem iPad verwendet um Meeting-Notizen festzuhalten oder schnelle Skizzen für meine Kollegen und Mitarbeiter anzufertigen, irgendwann habe ich dann die Copy & Paste Funktion von Penultimate entdeckt und kam auf die Idee mir ein Skizzenbuch mit UI-Vorlagen anzufertigen.

Per Copy & Paste kann ich nun in Sekunden komplette Seitenskizzen aus standardisierten UI-Elementen zusammen kopieren. … 

 

Kreisförmige Elemente mit CSS 3

Man sieht sie jetzt überall im Internet, Kreise! Kreisförmige Elemente auf Webseiten sind wieder modern und werden aktuell gerne verwendet.
Wer jetzt denkt er müsse sofort Photoshop oder das Bildbarbeitungsprogramm der Wahl anwerfen um ein rechteckiges Bild in einen Kreis zu verwandeln, der täuscht sich. Seit der Einführung von CSS3 gibt es eine viel elegantere Lösung. … 

 

Fluide Bildgrößen für responsive Webdesign

In Layouts die sich der Auflösung des Anzeigegeräts anpassen, ob nun kontinuierlich (fluid) oder schrittweise (responsive), stellen Elemente mit fixen Größen ein Problem dar. Texte zum Beispiel können durch Anpassung der Schriftgröße oder verändern der Zeilenlänge an die Spezifika des jeweiligen Device (Anzeigegeräts) angepasst werden. Bilder und Hintergrundbilder jedoch haben keine Umbrüche die einfach neu arrangiert werden können. Bilder und Hintergrundbilder müssen bei gleichem Seitenverhältnis auf die zur Verfügung stehende Anzeigefläche skalieren, es werden also fluide Bildgrößen benötigt. … 

 

Wireframes und Prototypen mit InDesign erstellen

Geht nicht? Geht nicht gibt es ja bekanntlich nicht. Shlomo Goltz beschreibt in einem Artikel auf Smashing Magazine wie man InDesign als mächtiges Werkzeug für low bis medium fidelity Wireframes und Prototypen einsetzen kann.

Bei 1&1 arbeiten wir seit langer Zeit mit InDesign um unsere Oberflächenkonzepte zu erstellen. Diese Dokumente beschreiben im Detail alle Änderungen/Maßnahmen die von unseren Frontend Teams auf den Web-/Shopseiten umzusetzen sind. Gleichzeitig dient uns das OFK genannte Dokument als Basis für alle QA-Maßnahmen.

Inspiriert durch Shlomos Ausführungen werde ich aber selbst mal einen Wireframe oder Prototypen mit InDesign anfertigen.

Creating Wireframes And Prototypes With InDesign | Smashing Magazine.