t3n News Entwicklung

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

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

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 was abschauen könnt.

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

Och wie süß! (Screenshot: readme)

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

Bildschirmfoto 2015-01-30 um 10.14.53

Unser Leser Nico Saborowski hat uns im letzten Teil dieser Serie auf eine nette Anzeige der ungefähren Lesezeit bei allfacebook.de hingewiesen. Danke dafür!

trello-2

Trello achtet besonders auf Details: Das Favicon ändert sich entsprechend der Hintergrundfarbe des Boards. Sehr praktisch wenn man auf mehreren Boards gleichzeitig arbeitet. Leider werden die unterschiedlichen Icons nur in Chrome richtig angezeigt.

ui-schmankerl-2

Wenn ihr versucht, das Google-Männchen innerhalb von Area 51 zu platzieren, könnt ihr das nicht und das Männchen verwandelt sich in ein UFO samt Piloten. Ein Beweis, dass Google von Außerirdischen geführt wird? Ich weiß es nicht, aber es ist ein nettes UI-Feature.

Bildschirmfoto 2015-01-30 um 09.43.27

Der Kalender von Sunrise hat kontext-sensitives Labeling, das heißt: Die App erkennt automatisch anhand von Keywords, welcher Aktivität ihr nachgehen wollt und ändert dementsprechend das Icon in der Kalenderansicht. Recht praktisch und auch sehr schön umgesetzt.

Bildschirmfoto 2015-01-30 um 09.53.07

Google Maps zeigt euch den Schatten von hohen Gebäuden in Echtzeit an. Ein kleines Detail, das zwar nicht wirklich hilfreich ist, wenn man auf der Suche nach einer bestimmten Adresse ist – trotzdem ein nettes Feature und eine Feinheit, die das UX aufwertet.

Bildschirmfoto 2015-01-30 um 09.55.11

Wie auch bei Trello fungiert das Logo von Ello als Ladeindikator. Ein kleines, aber nettes Feature, das den Nutzer auf das Logo lenkt und das Interface ruhiger wirken lässt. Gerade, wenn man kein Freund von Overlays ist.

Bildschirmfoto 2015-01-30 um 10.08.23

Slack ist in aller Munde – teilweise zurecht. Das Team-Kommunikations-Tool zeigt nette Sprüche oder Erinnerungen während des Ladevorgangs an. Habt ihr eigentlich schon zwei Liter Wasser getrunken? Sitzt ihr eigentlich in einer ergonomischen Position?

Bildschirmfoto 2015-01-30 um 10.09.08

Das Dokumentations-Tool für Entwickler readme hat ein nettes Feature bei der Passwort-Eingabe. Wechselt ihr in das Eingabefeld für das Passwort, verdeckt sich das Maskottchen die Augen. Och, wie süß!

Bildschirmfoto 2015-01-30 um 10.17.59

„Bilder sagen mehr als tausend Worte“, hat sich wohl tumblr.com gedacht, als das Team die neuesten Verbesserungen im GIF-Format kommuniziert hat. Sieht nicht nur gut aus, bringt die Veränderungen auch gut auf den Punkt.

Bildschirmfoto 2015-01-30 um 10.23.44

Ein weiteres Schmankerl beschert uns Slack: Farben im Hex-Format werden direkt im Chat angezeigt. Ideal für etwaige Pipetten von Bildbearbeitungssoftware.

Wenn euch diese UI-Schmankerl gefallen haben: Hier geht es zurück zum ersten Teil.

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
9 Antworten
  1. von Karl am 01.02.2015 (20:45 Uhr)

    "In unserer neuen Serie zeigen wir euch geniale Lösungen für gängige UI-Probleme"

    Spielereien trifft es besser....

    Antworten Teilen
    • von E. am 02.02.2015 (01:32 Uhr)

      Dohoch, ein sich knuffiges Auge schliessendes Uhu ist ein gängiges UI-Problem.

      Antworten Teilen
    • von val am 02.02.2015 (09:46 Uhr)

      Diese Spielereien wirken deshalb wie spielereien, weil sie UX Probleme spielerisch lösen. Der Uhu liefert intuitiveres Feedback auf eine Fehleingabe, als es ein aufpoppender Text tun würde. Das Kontext-sensitive Labeling von Sunrise hilft intuitiv die jeweiligen EInträge erfassbarer zu gestalten.
      Diese Dinge sollte man nicht als Spielereien abstempeln.

      Bis auf das Ufo. Das ist einfach ein Easter Egg. Wenngleich man auch deren Daseinsberechtigung durch UX argumentieren kann, denn letztere wird damit im zweifelsfall interessanter und unterhaltsamer gemacht, was ebenfalls nicht schlecht ist.

      Zu oft werden Elemente, in die viel Zeit gesteckt wurde, als sinnlose Spielereien abgetan. Es gibt einfach durchaus kreative und unterhaltsame Wege, biedere, langweilige und evtl sogar fruistrierende Erlebnisse für den User erträglicher zu machen oder ihm evtl ein Lächeln zu entlocken.
      Eine fehlgeschlagene Passworteingabe gehört dazu. Die Relevanz solcher 'Spielereien' zu unterschätzen erscheint mir schlichtweg falsch.

      Antworten Teilen
      • von Karl am 02.02.2015 (14:19 Uhr)

        "Ein Problem [...] nennt man eine Aufgabe oder Streitfrage, deren Lösung mit Schwierigkeiten verbunden ist." (Wikipedia)

        Wenn man versucht für jede Maßnahme ein Problem zu finden ertappt man sich schnell dabei sehr tief in die Erfinderecke abzudriften. Es sind keine Lösungen für Probleme sondern leider teils nutzlose teils sinnvolle Spielereien.

        Teilen
  2. von laskuso am 01.02.2015 (21:36 Uhr)

    Bei Computergrafiken gilt meist: PNG schlägt JPG, dann sehen die Konturen nicht so verwaschen aus. :-)

    Antworten Teilen
  3. von Ulf am 02.02.2015 (10:01 Uhr)

    Wer an weiteren UI-Inspirationen interessiert ist, sollte sich "Little Big Details" (http://littlebigdetails.com/) einmal anschauen. Dieser Blog postet regelmäßig über diverse UX- & UI-Design Details.

    Antworten Teilen
  4. von Iris am 05.02.2015 (12:22 Uhr)

    Schöne Details! MailChimp hat auch nette Features. Z.B. wenn man eine E-Mail Kampagne gesendet wird eine Schimpanse-Hand angezeigt, nach ein paar High Fives öffnet sich sogar ein lustiges Spiel :)

    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
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

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

Mobile, Frontend, Webdesign, E-Commerce oder Mediengestaltung: Telekom, internetstores, MAN, RHM Media und viele mehr suchen Verstärkung
Mobile, Frontend, Webdesign, E-Commerce oder Mediengestaltung: Telekom, internetstores, MAN, RHM Media und viele mehr suchen Verstärkung

Zweimal pro Woche verweisen wir hier auf aktuelle und interessante Jobangebote aus unserer Stellenbörse „t3n Jobs“. Heute können wir euch 27 Angebote aus den Bereichen „Entwicklung“ und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?