t3n News 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.

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

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?

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Nico Saborowski am 10.11.2014 (10:07 Uhr)

    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 Teilen
  2. von German am 10.11.2014 (15:12 Uhr)

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

    Antworten Teilen
  3. von Iris am 10.11.2014 (15:23 Uhr)

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

    Antworten Teilen
  4. von Fritz Buder am 11.11.2014 (18:16 Uhr)

    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 Teilen
  5. von SabineUlsten am 12.11.2014 (08:25 Uhr)

    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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign

Auch in diesem Jahr drehte es sich auf der Developer Week um UX- und UI-Design. Im Panel von Patrick Lobacher haben wir uns inspirieren lassen. » weiterlesen

Die Evolution des Webdesigns: Von 1991 bis heute
Die Evolution des Webdesigns: Von 1991 bis heute

Eine interaktive Website nimmt euch mit auf eine Zeitreise: Hier seht ihr, wie sich das Webdesign in der Zeit zwischen 1991 und 2015 verändert hat. » weiterlesen

6 Webdesign-Trends für 2016, die du kennen solltest
6 Webdesign-Trends für 2016, die du kennen solltest

Als Designer sollte man neue Trends kennen und kann durch sie auch Inspiration bekommen. Jerry Cao, UX-Designer und Content-Stratege, zeigt dir sechs Trends im Webdesign, die dieses Jahr eine Rolle … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?