Zukünftiges UI-Design ohne Schaltflächen

Veröffentlicht: 2022-03-11

Was sind Buttons und brauchen wir sie wirklich?

Seit den Anfängen grafischer Benutzeroberflächen verwenden wir Schaltflächen. Bedenken Sie, dass die ursprüngliche GUI von Xerox PARC 44 Jahre alt ist, aber unsere Benutzeroberflächen sehen immer noch bemerkenswert danach aus. Ich habe kürzlich die Geschichte der Schaltflächenstile nachgezeichnet, indem ich die Dribbble-Zeitachse erstellt habe. Obwohl sich Knöpfe synchron mit aktuellen Trends und neben der Technologie entwickelt haben, ist ihr Ursprung zweifellos von realen Objekten der Vergangenheit inspiriert.

Gescanntes Bild aus dem Herbstkatalog von Sears First Electric Buzzer 1897
Unten rechts – Sears First Electric Buzzer Herbstkatalog 1897.

Seit mehr als einem Jahrzehnt entwickeln wir Geräte ohne physische Schnittstelle – die nicht auf menschliche Berührungen angewiesen sind, sondern durch Sprache oder Gesten aktiviert werden können. Warum beharren wir darauf, Formen zu erschaffen, mit denen wir interagieren können, die auf vertrauten Objekten basieren, die uns umgeben? Die Form eines digitalen Knopfes ist immer noch den Werkzeugen und Mechanismen nachempfunden, die wir im 19. Jahrhundert entwickelt haben!

Wir haben völlig neue, intelligente elektronische Geräte entwickelt – wir können sie auf fast jede erdenkliche Weise handhaben, aber aus Faulheit oder Gewohnheit zwingen wir unsere Benutzer weiterhin, auf einen kniffligen kleinen Bereich zu klicken, der nur wenige Pixel breit ist.

Es ist an der Zeit, etwas dagegen zu unternehmen – es ist an der Zeit, knopflos zu denken.

„Tastenlose“ Benutzeroberfläche – wo alles interagiert

Eine „knopflose Utopie“ ist ein Konzept, bei dem jeder Versuch, an über 130 Jahren festzuhalten, wie die Dinge immer gemacht wurden, völlig zunichte gemacht wird. Die Zukunft ist jetzt – wir müssen weitermachen und uns von den veralteten Lösungen unserer Vorgänger trennen.

Können wir uns eine Oberfläche ganz ohne Knöpfe vorstellen? Etwas so Intuitives, dass Sie schon beim Anschauen wissen, wie Sie handeln müssen? Es muss nicht mehr nur in unserer Vorstellung sein – diese Schnittstellen existieren bereits.

Microsoft HoloTour-App in AR
Microsoft HoloLens: HoloTour.

Können wir den verehrten Knopf ein für alle Mal beseitigen? Mikrofone, Kameras, Touchscreens, Vibration, Beschleunigungsmesser, Kreisel, GPS, erweiterte Realität, virtuelle Realität – die Liste geht weiter – und all dies wird von Ihrem Smartphone oder PC aus verwaltet. Es gibt keinen Grund mehr, Ihre Benutzer weiterhin zu zwingen, auf dieses eine winzige Rechteck zu drücken.

Lassen Sie uns Schaltflächen in Benutzeroberflächen eliminieren

Haben Sie Type Design gelesen, wo Interfaces frei von jeglichen grafischen Elementen sind und wo nur der Inhalt zählt? Viele von Ihnen haben gefragt: „Was ist mit Knöpfen?“ Wir brauchen sie nicht mehr – eliminieren wir sie komplett.

Hier sind ein paar interessante Ideen:

Facebook hat nur gefragt: „Wie ist deine Stimmung?“ Sie müssen keine Taste drücken , um zu antworten – verwenden Sie Ihre Stimme – sagen Sie einfach, dass Sie sich großartig fühlen, und machen Sie sich auf den Weg zum Strand. Ziehen Sie dann den Text, den Facebook aus Ihrer Antwort erkennt, an die Stelle, an der er erscheinen soll.

Animation der Sprachschnittstelle
Suchen Sie per Sprache.

Wie ein Artikel auf Medium? Vor einiger Zeit konnte man auf Medium einfach einen Artikel „empfehlen“. Heute klicken wir auf „Klatschen“. Also „klatsch“. Was wäre, wenn es nicht nötig wäre, auf diesen seltsamen kleinen Knopf zu klicken, sondern einfach buchstäblich zu klatschen ?

Mann, der zu einem Artikel auf Medium klatscht
Knopfloses Konzept von Wojciech Dobry (…Nehmen Sie es nicht zu ernst).

Was ist mit einigen komplexeren Aktionen? Wie zum Beispiel eine Kasse in einem Online-Shop. Ziehen Sie einen Artikel per Drag-and-Drop in den Einkaufswagen, wischen Sie, um zur Kasse zu gehen, und bestätigen Sie ihn dann mit Ihrem Fingerabdruck. Kinderleicht.

UI-Animation
ASOS – Animation zum Warenkorb hinzufügen von Zachary Zhao.

Denken Sie an Inhalt und den gesamten Bildschirm

Beginnen wir mit den Oberflächen, die wir derzeit berühren, um eine Aktion auszuführen. Angesichts der Tatsache, dass die überwiegende Mehrheit der modernen grafischen Benutzeroberflächen Touchscreen-Displays sind – die oft mit unseren Daumen bedient werden – liegt es nahe, dass solche Schnittstellen uns noch lange begleiten werden. Und wir werden definitiv diesen unwiderstehlichen Drang zum Klopfen haben – Berührung ist schließlich unser wichtigstes Gefühl. Die Berührung der Oberfläche gibt uns ein Gefühl von echter Aktion, von Kontrolle. Wie wäre es, dass wir unseren Benutzern beibringen, mit der gesamten Oberfläche zu interagieren, anstatt auf einen bestimmten Punkt zu klicken?

Mal sehen, wie Instagram es macht:

Instagram-Story-Navigation
Instagram-Story-Navigation.

Haben Sie jemals eine Schaltfläche gesehen, mit der Sie eine Instagram-Story durchsuchen und zur vorherigen Story zurückkehren können? Wahrscheinlich nicht, denn alles, was Sie tun müssen, ist, den linken Rand des Bildschirms zu berühren, um es zu aktivieren.

Benutzer erwarten mittlerweile neue Möglichkeiten der Interaktion mit unseren digitalen Produkten, und oft kommt es dabei nicht einmal auf eine Schaltfläche an. Karten reagieren auf all ihren Oberflächen; Wenn Sie auf ein Wort klicken, erwarten wir, seine Definition zu finden. Wenn wir Bilder berühren, erwarten wir etwas Aktion. Nutzer sind es bereits gewohnt, dass ganze Bereiche auf Berührungen reagieren.

Gestenerkennung

Wir verstehen Gesten sehr gut, weil sie für uns natürlich sind und sich in unseren körperlichen Handlungen widerspiegeln. Derzeit werden sie von fast jeder Anwendung verwendet, um die Navigation zu beschleunigen. Wir können auf ein Foto doppelt tippen, anstatt es wie eine Schaltfläche zu drücken. wir können wischen, um die Galerie zu durchsuchen; oder kneifen Sie, um Inhalte zu zoomen.

UI-Animation zeichnet Herz auf dem Touchscreen
Vergil Pana.

UI-SchnittstelleUI-Schnittstelle

Benutzeroberflächen von Ramotion & Jarek Berecki.


Wir machen Gesten nicht nur auf flachen Touchscreens – Gesten werden auch in AR- und VR-Räumen ausgeführt, in denen wir mit unserem ganzen Körper navigieren können.

Mann mit Gesten in Augmented Reality
Gesten auf HoloLens von Microsoft.


Mann, der Gestenerkennung verwendet, um IoT zu steuernMann, der Gestenerkennung verwendet, um IoT zu steuern

Clay VR-Gestenerkennung auf dem iPhone.

Sprachschnittstellen

Siri, Cortana, Alexa und Google Assistant sind alle einsatzbereit. Viele argumentieren, dass Sprachschnittstellen die Zukunft sind – es ist schwer zu widersprechen, da ihre potenziellen Verwendungsmöglichkeiten zahllos sind. Wir können Fahrzeuge, intelligente Gebäude und Maschinen steuern, indem wir einfach mit ihnen sprechen – genauso wie wir mit einer echten Person sprechen. Mit künstlicher Intelligenz und maschinellem Lernen sind Maschinen heute in der Lage, unsere Sprache immer genauer zu verstehen. Wir sind nicht mehr darauf beschränkt, sorgfältig geschriebene „Zaubersprüche“ auszusprechen; Wir können in ganzen Sätzen sprechen.

OK Google-Werbung
OK Google…

Durch die Verwendung von Sprache können wir uns frei in der Welt des Geldtransfers bewegen. Derzeit erlaubt Ihnen Siri, Geld per PayPal an eine andere Person zu überweisen, indem Sie nur eine kurze Anfrage ausführen: „Siri, sende 200 $ mit PayPal an XYZ.“ Keine Tasten – die einzige erforderliche Bestätigung und Sicherheitsüberprüfung ist Touch ID.

Siri wird für PayPal-Überweisungen auf dem iPhone verwendet

Physische Aktionen, verbundene Geräte und Videoerkennung

Lächeln zum Bezahlen? Es ist hier! Alibaba und KFC haben gemeinsam ein System eingeführt, mit dem Sie bezahlen können, indem Sie einfach in die Kamera lächeln – es müssen keine Tasten gedrückt werden. Das System arbeitet mit Gesichtserkennung und ist jetzt in China erhältlich.

KFC und Alibaba lächeln, um das System zu bezahlen

Dies ist nur eine der möglichen Verwendungen. Unsere Geräte sind bereits mit einer ganzen Reihe von Sensoren ausgestattet und können Ihren gesamten Körper überwachen. Nichts hindert Sie daran, mit einem Finger eine Aktion auf Ihrem Smartphone auszuführen.

iWatch zum Entsperren des MacBook Pro

Ein weiteres Beispiel für eine physische Aktion, die das Verschwinden von Tasten beschleunigt, ist einfach die Nähe zum Gerät. Schauen wir uns zum Beispiel die iWatch an – koppeln Sie sie einfach mit Ihrem Laptop und warten Sie, um Ihr MacBook zu entsperren. Tragbare Geräte können verwendet werden, um unsere Identität zu bestätigen und unsere Bedürfnisse basierend auf Standort- und Sensordaten intelligent vorherzusagen. Dank ihnen können wir bereits auf vielen Oberflächen auf die Verwendung von Schaltflächen verzichten.

Gyroskop zur Steuerung des GerätsGyroskop zur Steuerung des Geräts

Vergessen wir nicht die Technologien, die seit mehreren Jahren weit verbreitet sind. Eines ist das Gyroskop – in fast jedem Smartphone vorhanden, aber selten in Schnittstellen verwendet. Oben sehen Sie experimentelle Schnittstellen, die von Patryk Adas erstellt wurden.

UI-Designs der Zukunft

Bei so vielen verschiedenen Optionen, die uns zur Verfügung stehen, ist es jetzt möglich, die Verwendung typischer rechteckiger Schaltflächen zur Interaktion mit Benutzern zu vergessen. Mit der heutigen Technologie sind wir in der Lage, völlig neue Schnittstellen zu erstellen, die Folgendes können:

  • Sparen Sie Benutzern Zeit
  • Verhindern Sie Fehler, Ausrutscher und Irrtümer
  • Kompensieren Sie alle versehentlichen Handlungen

UI-KonzepteUI-Konzepte

Konzeptschnittstellen von Cosmin Capitan und Ramotion.


Die Zeit ist gekommen – die Technologie überholt uns. Wir, Designer, MÜSSEN es verfolgen … und auf jeden Fall aufholen!