Heute werden wir 15 Bits der Benutzeroberfläche und das Erlebnisdesign untersuchen, die die Erfahrung mit der Verwendung einer Website oder Anwendung wirklich verbessern.
Verwenden Sie diese Website-, iPhone- und Desktop-Anwendungsbeispiele als Inspiration für die Erstellung Ihrer eigenen, süchtig machenden Benutzererfahrung.
Einführung
Dieser Beitrag wird als meine eigene kleine Hall of Fame-Schnittstelle dienen. Es ist eine komplette Mischung aus verschiedenen Arten von Schnittstellen und Elementen, die ich für nützlich und inspirierend halte.
Jedes Beispiel soll Sie dazu veranlassen, über neue Möglichkeiten nachzudenken, die Sie nie in Betracht gezogen haben, und Sie zu ermutigen, stets zu versuchen, den Wert der Erfahrung, die Sie Ihren Benutzern bieten, zu maximieren.
Side-Scrolling-Parallax-Effekt
Dieses kleine bisschen ist rein visuell überflüssige Flare, aber es verbessert wirklich das Erlebnis einer Seiten-Scrolling-Site.
Parallax-Bildlauf ist ein Effekt, bei dem der Hintergrund in verschiedene Ebenen aufgeteilt wird, die sich während eines Bildlaufs mit unterschiedlichen Geschwindigkeiten bewegen. Die weiter hinten liegenden Ebenen bewegen sich langsamer als die Ebenen in der Nähe und es entsteht eine 3D-Illusion.
Das Portfolio von Charlie Gentle ist ein hervorragendes Beispiel für diesen Effekt. Die Website ist in separate Bereiche unterteilt, auf die Sie durch Klicken auf die Vor- und Zurück-Schaltflächen auf der Bildschirmseite zugreifen können.
Wenn Sie auf eine Schaltfläche klicken, blättert die Site reibungslos zum nächsten Abschnitt. An diesem Punkt tritt der Parallax-Effekt mit dem Bokeh oben auf dem Bildschirm ein. Es ist ein einfacher Trick, der die Site wirklich lebendig macht.
iPhone zum Aktualisieren herunterziehen
Die meisten Social-iPhone-Apps verfügen über ein System zur Aktualisierung ihres Datenstroms. Einige schütteln Sie, andere tippen Sie auf eine Schaltfläche, aber die Methode, die für mich am sinnvollsten erscheint, ist "Ziehen zum Aktualisieren".
Apps wie Gowalla, Foursquare und Tweetie haben dies als primäre Methode zur Aktualisierung übernommen. Der Grund, warum dies so gut funktioniert, liegt in der direkten Interaktion. Sie schauen sich mit dem Finger eine Liste an und blättern durch sie, und wenn Sie möchten, dass sie aktualisiert wird, sollten Sie diesen Bereich nicht verlassen müssen.
Wenn Sie eine Schaltfläche an einem anderen Ort auf dem Bildschirm platzieren, werden die Benutzeraktionen unterbrochen und der Fluss der Benutzer unterbrochen. Sie müssen die Liste verlassen, mit einem separaten Teil der Benutzeroberfläche interagieren und zu dem zurückkehren, was sie getan haben. Auf diese Weise ist alles eine Aktion, lokalisiert an einem einzigen primären Ort.
Die Lektion hier ist das Untersuchen Ihrer eigenen Benutzeroberflächen auf Elemente, die die Aufmerksamkeit des Benutzers unnötig beeinträchtigen. Überlegen Sie, ob die Schnittstelle verbessert werden kann, indem Sie entfernte Elemente in den betroffenen Bereich integrieren.
Global zugängliche HUDs
Einige meiner Lieblings-Mac-Anwendungen sind die, die leise im Hintergrund laufen, aber mit einer speziellen Tastenkombination sofort wieder auftauchen können und dann verschwinden, wenn Sie damit fertig sind.
Im Fall von The Hit List ist das Heads-up-Display (HUD) nicht die Hauptschnittstelle der Anwendung, sondern eher ein verkleinerter Teil der App, der zum Aufzeichnen von Elementen in Ihren Kopf nützlich ist.
Diese Art von globaler (Zugriff von überall) Funktionalität lässt diese weniger wie Anwendungen erscheinen und eher als Funktionen, die direkt in mein Betriebssystem integriert sind.
Überlegen Sie, wie Sie HUDs in Ihren eigenen Schnittstellen verwenden können, um die Funktionalität bestimmter Teile Ihrer Anwendungen und Websites zu erweitern.
Convertbot-Zirkularmenüs
Convertbot ist eines der wenigen Beispiele für UI-Design, das schwieriger zu bedienen ist und gleichzeitig viel mehr Spaß macht.
Diese iPhone-App verwendet ein seltsames, aber wunderschönes kreisförmiges Menü, um Basiseinheiten zu konvertieren. Es gibt viele Apps im iPhone App Store, die diese Aufgabe auf viel direktere und leichtere Art und Weise ausführen, aber auch keinen Spaß machen.
Mit Converbot auf meinem iPod muss ich ständig nach Szenarien Ausschau halten, die es mir verdienen, die App herauszuziehen. Die Benutzeroberfläche bietet glatte Animationen, prächtige Farben und Texturen sowie eine reibungslose Funktionalität, die die Verwendung einfach macht.
Diese App beweist, dass es in seltenen Fällen möglich ist, dass der Benutzer das Gegenteil von dem bekommt, was er erwartet, genau das, was der Schnittstellenarzt bestellt hat. Stellen Sie nur sicher, dass Sie über die Gestaltungskompetenz verfügen, die das unterstützt, wie es die Jungs von Tapbots offensichtlich tun.
SlideDeck
Es gibt keinen Mangel an jQuery-Schiebereglern im Web, aber es gibt einige, die sich als nützliche und einzigartige Implementierung wirklich von den anderen abheben. SlideDeck ist eines davon.
SlideDeck verwendet ein ordentliches Akkordeon-Format, um Tonnen von Informationen in einem erstaunlich kleinen, organisierten und vollständig zugänglichen Bereich zu verstauen. Der Inhalt ist in Abschnitte unterteilt, die in vertikalen Balken verborgen werden, die beim Klicken erweitert werden. Wenn sich ein Abschnitt erweitert, bricht der zuvor offene Abschnitt in einer schönen, fließenden Animation zusammen.
Was es so toll macht, ist, wie einfach es ist, genau den richtigen Teil der Diaschau zu erreichen, den Sie sehen möchten. Diese Schieberegler verwenden normalerweise winzige Symbole oder Punkte, um zu bestimmten Seiten zu springen. Diese Methode ist jedoch viel beschreibender und offensichtlicher.
Strongbad E-Mails: Gehen Sie Rando!
Zuerst, wenn Sie nicht wissen, wer Strongbad ist, schämen Sie sich. Er ist bei weitem die beliebteste Figur in dem seit langem bestehenden Internet-Cartoon mit Homestarrunner und seinen Freunden.
Jede Woche beantwortet Strongbad eine E-Mail eines Zuschauers, woraufhin ultimativer Heiterkeit folgt. Frühere Episoden werden in einer riesigen, unhandlichen Liste geführt, durch die Sie scrollen, während Strongbad seinen neuesten Song zum Scrollen singt.
Vor kurzem haben die Entwickler ein "go rando" hinzugefügt. Taste. Wenn Sie auf diesen kleinen Textausschnitt klicken, könnten Sie lediglich zu einer zufälligen E-Mail geführt haben, aber das war nicht gut genug für Strongbad. Wenn Sie auf diese Schaltfläche klicken, wird stattdessen die gesamte Liste wie das Wheel of Fortune (komplett mit Verlangsamung und Stopp) gescrollt, während Strongbad die komischen Soundeffekte liefert.
Offensichtlich ist dies so erstaunlich, dass Sie es mehrere Male verwenden müssen, bevor Sie sich als erledigt betrachten können.
Der Punkt ist, manchmal, ein bisschen Gedanken (und sogar Komödie) in Ihre kleinste Funktion zu setzen, kann das Ding in die Lieblingsfunktion eines jeden auf Ihrer Website verwandeln. Darüber hinaus ist es eine todsichere Methode, Nutzer für Ihre Website zu gewinnen.
Hergestellt von Tinder Color Picker
Zunder ist ein super Geheimnis, dass sich das Fuel Brand Network in den Ärmel gelegt hat. Obwohl ich keine Ahnung habe, was es ist, liebe ich die kleine Teaser-Seite, die sie entwickelt haben.
Die kleinen Rechtecke oben auf dem Bildschirm bieten Ihnen sieben verschiedene Farbschemata, um die Site anzuzeigen. Wenn Sie auf eine Farbe klicken, ändert sich der Hintergrund und der Inhalt der Seite wird aktualisiert, um den Kontrast auf dem neuen Hintergrund zu maximieren.
Ich habe mehr Zeit auf dieser Seite verbracht, als ich zugeben möchte, und spielte mit diesen kleinen Knöpfen. Hut ab an das Fuel Team für das Erstellen einer meiner Lieblingsseiten.
Pixelmator: Zeichenfolgen werden angehängt
Pixelmator ist eine hervorragende und kostengünstige Bildbearbeitungsalternative zu Photoshop. Pixelmator ist zwar keineswegs so leistungsstark, bringt jedoch eine Menge Innovationen auf den Tisch und bietet bessere Preise als alle Mitbewerber in Photoshop, die mir je begegnet sind.
Eine meiner bevorzugten UI-Funktionen in Pixelmator sind diese kleinen hängenden Zeichenfolgen, die beim Anwenden von Effekten angezeigt werden. In dem obigen Fall können Sie den Punkt ziehen, um die Mitte des angewendeten Effekts neu zu positionieren. Der Punkt wird an diese Zeichenfolge angehängt, die ihn mit dem Filterfenster verknüpft. Wenn Sie den Punkt verschieben, springt die Saite für die Fahrt mit realistischer Physik.
Ich sehe ehrlich gesagt nicht einmal ein Bedürfnis, dass diese kleinen Fäden existieren, da es offensichtlich ist, dass das Fenster und der Effekt in Beziehung stehen, aber ihre Anwesenheit dient als schöne visuelle Bestätigung dieser Tatsache und macht das Anwenden von Filtern umso mehr Spaß.
Riesige Hover-Effekte
Bei fast jeder Website, die Sie besuchen, gibt es eine Art Hover-Ereignis für die Links. Normalerweise ist dies etwas zu klein und nicht zu ablenkend. gerade genug, um uns zu sagen, dass es dort einen Link gibt.
Riot Industries entschied zu Recht, dass dieser Trend durchbrochen werden musste, indem der Schwebeffekt den Großteil des Platzes auf der Seite und den Link wenig Platz einräumte.
Wenn Sie den Mauszeiger über den kleinen vertikalen Streifen von Miniaturansichten bewegen, wird der riesige Text nach rechts auf und ab gezoomt. Es wird ausgeführt und erscheint am oberen Rand des Bildschirms. Dort flackert es zu einer neuen Nachricht, die dem Symbol entspricht, über das Sie den Mauszeiger bewegen, und läuft dann wieder nach unten, um neben diesem Symbol anzuhalten.
Ich habe noch nie eine andere Website mit einem Effekt wie dieser gesehen und ich liebe die typografische Funktionalität all dieser Dinge.
Drag & Drop Online
Als begeisterter Mac-Benutzer neige ich zu der Meinung, dass alles im Leben mit Drag & Drop funktionieren sollte. Funktionalität. In letzter Zeit sehe ich diese Idee in einer Online-Umgebung widergespiegelt.
Wenn Sie im obigen Beispiel auf ein Symbol klicken, gelangen Sie zur entsprechenden Seite dieser Anwendung. Wenn Sie dies jedoch umgehen und die Anwendung sofort herunterladen möchten, ziehen Sie einfach das Symbol der App auf die Schaltfläche "Herunterladen". Nifty nein?
Ein weiterer Ort, an dem Sie die Drag & Drop-Funktion online nutzen können, finden Sie im IconDock-Einkaufswagen. Hier ziehen Sie einfach die Symbole, die Sie kaufen möchten, in das Dock, um sie für den späteren Kauf zu halten.
Photoshop.com Fotostapel
Dies ist ein weiteres Beispiel, das funktional völlig nutzlos ist, aber eine nette zusätzliche Note darstellt, die das Interesse der Besucher länger halten wird.
Beim Laden der Photoshop.com-Seite wird ein Stapel Polaroids auf den Bildschirm fallen gelassen und springt in alle Richtungen ab. Der Stapel wird dann vollständig interaktiv. Sie können auf Bereiche des Bildschirms klicken und ziehen, um Fotos wild durcheinander zu werfen und zu sehen, wie sie auf andere stürzen.
Die Physik scheint recht gut zu funktionieren und das Ganze fügt der Seite definitiv eine großartige Interaktion hinzu.
Folge der Maus
Die Seite unten ist eine andere, die einen schönen Parallax-Effekt aufweist, aber dieses Mal möchte ich mich mehr auf die Art konzentrieren, wie Sie mit dieser Szene interagieren.
Sobald Sie diese Seite laden, stellen Sie fest, dass etwas Seltsames vor sich geht. Wenn Sie den Cursor nach links und rechts bewegen, reagiert der Hintergrund so, als würden Sie Ihren Kopf bewegen. Während die Seite zur Seite schwenkt, wird mehr von der Landschaft sichtbar.
Obwohl dies auf den meisten Websites nicht angebracht ist, wirkt diese einzigartige Methode des Umsehens hier wirklich gut und trägt wirklich zum 3D-Effekt bei. Ich habe sogar andere Websites gesehen, die diese Methode noch weiter verbessern, indem sie es als primäre Möglichkeit zum Navigieren des gesamten Inhalts der Seite verwenden.
Dualer Schieberegler
Dies ist ein weiterer jQuery-Slider, der sich als einzigartig brillantes Design hervorhebt.
Die Vorlage ThemeForest WordPress enthält eine Art Doppelbild-Schieberegler. Der erste Schieberegler enthält Bilder und der zweite enthält Beschreibungen des Bildes.
Wenn sich der Bildschieber vertikal bewegt, wird der Beschreibungsschieber horizontal verschoben. Der resultierende Effekt ähnelt dem Betrachten einer komplexen Maschine. Die beiden Animationen fühlen sich an, als wären sie eine einzige Funktion.
Es ist eine hervorragende Möglichkeit, Bilder und Texte zu präsentieren, die mich wirklich fassungslos gemacht haben und mehr wollen.
Mit Momentum scrollen
Als ich vor einigen Jahren zum ersten Mal ein iPhone in die Hände bekam, verliebte ich mich sofort in die Idee der Momentum-basierten Benutzerinteraktion. Als ich in Safari mit dem Finger schnippte, gab es kein 1: 1-Verhältnis der Bewegungen. Stattdessen benutzte das Gerät meine Bewegung, als würde ich tatsächlich ein Stück Papier schnippen, das Momentum, Spitzenwert und dann langsamer machen würde Kraft meiner Handlung.
Seitdem wollte ich mehr Technologie, um diese Idee aufzugreifen, insbesondere OS X. Glücklicherweise hat Apples Magic Mouse genau das bewirkt.
Durch Einschalten? Mit Impuls scrollen? Sie können die iPhone-Scrollfunktion nachahmen. Wenn Sie auf einem iPhone nach unten bewegen, wird der Bildschirm heruntergefahren, während Sie auf einer Magic Mouse nach unten bewegen, um den Bildschirm nach oben zu bewegen. Dies ist wegen der Indirektheit der Maus sinnvoll, aber ich wünschte immer noch, Sie könnten die Mausbewegungsfunktion ändern, um das iPhone zu spiegeln.
Die Lektion hier ist, dass jedes Mal, wenn Sie ein Stück Realität in eine simulierte Benutzererfahrung einfließen lassen können, dies die Ehrfurcht des Betrachters erhöht und das Ganze als magisch erscheinen lässt.
Wirklich minimal
Obwohl ich schön komplexe Schnittstellen liebe, gibt es Zeiten, in denen Sie nur mit Ihren Gedanken produktiv sein müssen und fast nichts anderes. Hin und wieder kommt eine Schnittstelle, die diese Idee wirklich auf den Punkt bringt. Ich kann mir keine bessere als WriteRoom für Mac vorstellen.
Trotz seines Erscheinungsbildes ist WriteRoom ein ziemlich leistungsfähiger Texteditor mit zahlreichen Funktionen und Anpassungsoptionen. Es verbirgt dies alles nur unter einer sehr einfachen Benutzeroberfläche, die Ihnen das Gefühl gibt, als würden Sie Zahlen in eine Schraffur bei LOST eingeben.
So verrückt das auch klingt, diese Art von Benutzererfahrung finde ich am meisten süchtig. Etwas Einzigartiges und Immersives, das Sie fast zu einer anderen Zeit und einem anderen Ort bringt, wo alles wegfällt und Sie sich ganz auf die anstehende Aufgabe konzentrieren können.
Fazit
Nun, das ist meine Liste von inspirierenden Elementen und Schnittstellen. Ich hoffe, es hilft Ihnen dabei, ein paar großartige Ideen zu entwickeln, wie Sie Ihre eigenen Entwürfe sowohl groß als auch klein verbessern können.
Verwenden Sie die Kommentare unten, um uns über die kleinen Bereiche der Benutzeroberfläche zu informieren, die Sie für großartig halten, und was Sie von den obigen Beispielen halten.