Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 1)

    So schön ist Webdesign: Schmackhafte UI-Schmankerl zum Nachmachen (Teil 1)

Das Web besteht selbstredend aus Webseiten. Einige davon sind allerdings besonders schön oder bieten UI-Kniffe, die sonst keiner hat. In unserer neuen Reihe präsentieren wir euch ab sofort inspirierende UX/UI-Schmankerl, von denen ihr euch etwas abschauen könnt.

Kennt ihr das auch? Einige Websites fühlen sich irgendwie besser an als andere – hier ein Autocomplete und dort wird ein Klick gespart. In unserer neuen Serie zeigen wir euch geniale Lösungen für gängige UI-Probleme, die ihr so noch nicht gesehen habt. Denn: Gutes UI-Design sieht man nicht.

Unsere liebsten UI-Schmankerl

instapaper
Neue Ordner anlegen bei Instapaper: Fast so einfach wie Tagging. (Screenshot: t3n)

Instapaper lässt euch ziemlich raffiniert neue Ordner anlegen. Beim Klick auf „Add Folder“ verwandelt sich der Button in ein Eingabefeld samt Input-Fokus, was euch ein schnelles Anlegen von Ordnern – fast so schnell wie beim „Tagging,“ – ermöglicht.

trello
Unauffälliger Ladeindikator bei Trello. (Screenshot: t3n)

Trello nutzt das eigene Logo als subtilen Lade-Indikator, wenn zwischen den Boards hin- und hergewechselt wird. Obwohl kein eigener Ladeindikator existiert, wird der Benutzer auf eine Statusänderung des Systems aufmerksam gemacht.

Bildschirmfoto 2014-08-29 um 11.15.10
Nie wieder nervige Sounds. Chrome zeigt wie es geht. (Screenshot: t3n)

Ihr habt 20 Browser-Tabs offen – und von irgendwoher ertönt auf einmal fahrstuhlartige Musik. Nervig, oder? Chrome zeigt euch an, ob Töne in einem Tab abgespielt werden. Ein Feature, das ich mir für jeden Browser wünsche.

... und diese UI-Schmankerl haben wir auch gefunden

Bildschirmfoto 2014-09-01 um 09.42.31
Amazon zeigt die Symbiose von Menü-Leiste und Dropdown. (Screenshot: t3n)

Amazon zeigt das Dropdown-Menü statisch als vertikale Navigationsleiste an, vorausgesetzt, dass die Breite des Browserfensters eine vollständige Anzeige zulässt. Sollte sich der Viewport verkleinern, wird die feststehende Navigationsleiste zum Dropdown-Menü umgewandelt.

Bildschirmfoto 2014-09-01 um 09.45.46 2
Übersichtliche Zusatzinformation. (Screenshot: t3n)

Facebook zeigt euch die Geburtstage eurer Freunde auch im Chat an: Neben dem Namen erscheint eine kleine Torte.

Bildschirmfoto 2014-09-01 um 10.10.48
Sublime Text zeigt dir den Pfad an, falls mehrere Dateien den gleichen Namen besitzen. (Screenshot: t3n)

In Sublime Text werden Dateien mit dem identischen Dateinamen samt Pfad angezeigt, um eine Identifizierung der jeweiligen Datei zu vereinfachen.

Bildschirmfoto 2014-09-01 um 09.52.27
Ja, Statuscode 404 hat sogar Filme geprägt. (Screenshot: t3n)

Tippfehler. Aber du wirst erstaunt sein, dass IMDB einige Filmzitate zum Statuscode 404 auffährt, und sie passen sogar.

ui-schmankerl
Der Schlagschatten wird mit steigendem Kontrastverlust stärker. ((Screenshot: t3n)

Für Texte vor einem Hintergrund mit besonders drastischer Kontrastveränderung blendet das iPhone automatisch einen relativ dominanten Schlagschatten unter den Text, um dem Nutzer das Lesen zu erleichtern.

tumblr_n452z9dXO21qea4hso1_1280
Niemand möchte Passwörter tippen. (Screenshot: t3n)

Wenn ihr bei Slack euer Passwort auf einem mobilen Gerät zurücksetzt, werdet ihr nach dem Klick auf den Aktivierungslink direkt zur Anwendung weitergeleitet. Slack öffnet sich also bereits im eingeloggten Zustand – und ihr spart euch die Eingabe von ellenlangen Passwörtern auf mobilen Geräten.

google-maps
Hätte man diese Darstellung besser lösen können? (Screenshot: t3n)

Bei Google Maps hat man Drag-&-Drop mit Skeuomorphismus vereint. Wenn ihr das Street-View-Männchen auf die Karte zieht, wackelt es in eurem imaginären Griff, als würdet ihr eine Puppe hin- und her bewegen.

Wo habt ihr euch das letzte mal gedacht: „Hm, so hätte ich das auch lösen können.“? Oder welche Finesse habt ihr entdeckt?

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

5 Reaktionen
SabineUlsten
SabineUlsten

Ich würde behaupten, dass bei der Fülle der Webseiten im Internet die Benutzerfreundlichkeit zum wichtigsten Kriterium wurde. Meine Buchempfehlung zum Thema Usability: "Don't make me think!"

Antworten

Fritz Buder
Fritz Buder

Mir gefällt bei Baulinks, dass das linke Menü bei den redaktionellen Beiträgen in der Regel zum Beitrag passt - Beispiel: http://www.baulinks.de/webplugin/2014/1841.php4 . Wenn man dann mit „jünger“ oder „älter“ weiterklickt, fällt einem das schnell auf.

Antworten

Iris
Iris

Ich nutze Trello und hatte das mit dem Logo gar nicht bemerkt! Sehr schön :)

Antworten

German
German

Dieser Beitrag hat mir am Boden zerstört.
So viel Arbeit nur um zu sehen wie schlecht mein Website ist :(

Antworten

Nico Saborowski
Nico Saborowski

Mir gefällt auf dem Blog Allfacebook die Anzeige, die mir die ungefähre Lesezeit anzeigt. Je weiter ich nach unten scrolle, desto voller wird dann auch der Balken.
Beispiel: http://allfacebook.de/konferenz/call-for-speaker-2015

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen