interaktive Assets

Chemicalbox kreiert animierte Assets für innovative Interface. Webbasiert oder als interaktive Installation.

Animated Interaction Design

WAS UMFASST DAS INTERACTION ANGEBOT VON CHEMICALBOX?
Chemicalbox kombiniert klassisches 3D-Design mit neustem UI Design und überrascht mit innovativen Navigations und Design-Konzepten. In Kombination mit detailverliebten Frontend Entwickler entstehen so innovative Websites, Games oder Interaktive Installationen.

ANIMATED INTERACTION DESIGN

Ein besonderes Augenmerk liegt bei Chemicalbox bei den Animationen im Interaction Design.

In einem digitalen Produkt gibt es nur wenige Dinge, die schöner sind als gut gestaltete Animationen. Sie bringen uns zum Grinsen und helfen uns, das Produkt zu verstehen. Aber Animation ist mehr als nur ein nachträglicher Gedanke von Lächeln-induzierenden Berührungen. Eine gute funktionale Animation macht eine Benutzeroberfläche deutlich ansprechender und benutzerfreundlicher.

Wenn wir über funktionale Animation sprechen, geht es um die Art der subtilen Animation, die einen klaren, logischen Zweck hat. Es reduziert die kognitive Belastung, beugt Veränderungsblindheit vor und schafft ein besseres Verständnis der räumlichen Zusammenhänge. Einfach ausgedrückt, Animation erweckt die Benutzeroberfläche zum Leben.

Wieso gute Animation wichtig ist

Wenn es um großartiges UX-Design geht, kann Animation vielseitig eingesetzt werden. Erstens kann es Funktionalität präsentieren oder daraus schließen. In gewisser Weise fungiert es als Mini-Onboarding. Darüber hinaus kann es eine Ebene der Freude und des Spaßes hinzufügen. Es kann Interaktionen auch Beruhigung und Bedeutung verleihen.

Sie fühlen sich wohl, wenn Sie etwas tun und eine Animation, die auf das erwartete Ergebnis hinweist, ausgeführt wird, z. B. wenn Sie ein Element löschen und es verblasst oder vom Bildschirm verschwindet. Es ist viel weniger verwirrend, als ein Element einfach verschwinden zu lassen, während die Elemente auf einer Seite neu angeordnet werden. Mit der Animation können wir nicht nur die Bedeutung unserer Designs freischalten, sondern auch neue Modelle für die Interaktion im Allgemeinen bereitstellen.

Wenn es um großartiges UX-Design geht, ist Animation ein zentraler Punkt.

5 Punkte Checkliste für Animationen im Interaction Design

1

Animation muss einen Zweck erfüllen

Sinnlose Animationen kosten nur die kostbare Zeit Ihres Benutzers, und nach der ersten Freude wird der Benutzer es leid diese anzusehen. Desshalb müssen Animationen funktionsfähig sein. Beispielsweise sollen die Animationen für Orientierung, sofortiges Feedback, den Kontent erlebbar machen oder Storytelling eingesetzt werden.

2

Die Animation muss die Marke widerspiegeln

Betrachten Sie eine einfache Bewegung eines Objekts von links nach rechts. Es gibt praktisch unendlich viele Möglichkeiten, um diese Bewegung zu erzielen, indem Sie die Beschleunigungskurve anpassen. Damit können Sie Ihrer Animation eine Persönlichkeit hinzufügen. Beispielsweise kann die Kurve: Snappy, Smooth oder Bouncy eingestellt werden.

3

Animation sollte nicht der Held sein

Wenn Ihre Animation im Mittelpunkt steht, steht nicht mehr die Experience im Mittelpunkt, sondern zwingen den Benutzer lediglich, einen Film anzusehen.

4

Animation muss sich natürlich anfühlen

Da der Benutzer direkt mit der Benutzeroberfläche interagiert, besteht eine gewisse Erwartung, dass die Benutzeroberfläche bis zu einem gewissen Grad den Regeln der Physik folgt. Eine Liste, die auf die Geschwindigkeit reagiert, mit der Sie interagiert haben, ist ein perfektes Beispiel. Gleiches gilt jedoch auch für andere Objekte.

Dies bedeutet jedoch nicht, dass alle Apps gleich reagieren sollten. In der realen Welt reagieren Balltreter nicht auf die gleiche Weise. Ein Fußball wird wegfliegen, aber eine Bowlingkugel wird wahrscheinlich nur Ihren Fuß verletzen. Wie bereits in der vorherigen Richtlinie erwähnt, dreht sich alles um den Ton und das Gewicht, das Ihre Marke vermitteln soll.

Sie müssen das „Material“ und das Gewicht Ihrer App definieren und das Verhalten entsprechend anpassen. Denken Sie jedoch daran, es bei Bedarf immer anzupassen, damit es nicht gegen die nächste Richtlinie verstößt.

5

Animation kann die gefühlte Zeit verkürzen

Mithilfe von Animationen können Sie die Zeitwahrnehmung des Benutzers optimieren. Verwenden Sie dies also zu Ihren Gunsten. Für das menschliche Gehirn erscheint alles unter 0,1 Sekunden augenblicklich und unter 1 Sekunde nahtlos. Wenn Sie also einen Prozess haben, der beispielsweise 6 Sekunden dauert, können Sie ihn in einige separate Animationen aufteilen. Dieser Trick sollte den Prozess deutlich beschleunigen und Ihren Benutzer beschäftigen.

Sie können auch eine Animation verwenden, um eine Sofortaktion vorzutäuschen, die im Hintergrund tatsächlich etwas länger dauert. Dadurch fühlt sich die App reaktionsfreudiger an, obwohl der Vorgang immer noch länger dauert, als der Benutzer sieht.

Interaction Design bedeutet nicht wie es Ausschaut, sondern wie es funktioniert!

Interaktive Installationen

Bei interaktiven Installationen kann erkundet, gespielt und ein Ambiente voller Spaß und Spannung geschaffen werden. Die interaktive Installationen werden so ein Teil eines Erlebnisses für den Teilnehmer.

Passive Zielgruppe aktivieren

Eine interaktive Installation ist eine aufregende Möglichkeit, einen physischen Raum durch Technologie, Ton und Licht zu aktivieren, die auf Sie reagieren. Sie machen Menschen aus passiven Zielgruppen zu engagierten aktiven Teilnehmern.

Sensoren

Häufig werden bei Interaktive Installationen verschiedene Sensoren verwendet, mit denen sich schöne und ansprechende interaktive digitale Inhalte steuern lassen - von Video- bis zu 3D-Spielumgebungen.

Bei interaktiven Installationen muss der jeweilige Spezialist über seinen Tellerrand schauen können – genau das kann Mario Buholzer

Tino Niederberger, Creative Director, Bold AG
Tino Niederberger, Creative Director, Bold AG

Agenturen / Kunden

Infobox UX / UI

 

WAS BEDEUTET USER-EXPERIENCE (UX)

Der Begriff User Experience (UX), bezeichnet die Erfahrung die ein Nutzer bei der Interaktion mit dem Produkt erlebt. Meistens ist dieses Produkt eine Maschine oder im IT-Bereich ist der Begriff User Experience meist im Zusammenhang mit der Gestaltung von Websites oder Apps zur Anwendung. Übersetzt bedeutet User Experience wörtlich: Nutzererfahrung / Nutzererlebnis.

 

WAS BEDEUTET UI-DESIGN (UI)

Das User Interface (UI) bezeichnet das Design, auf der die Interaktion zwischen Mensch und Maschine stattfindet. Das UI gehört dabei weder zum Menschen noch zur Maschine. Ziel ist es, die Benutzerschnittstelle für den User nutzbar und sinnvoll zu gestalten, damit dieser leichter operative Entscheidungen ausführen kann.

Chemicalbox hat schnell und flexibel unsere Anforderungen an das UI-Design umgesetzt. Die Zusammenarbeit war sehr angenehm und unkompliziert.

Lukas Hierholzer, Die Ergonomen, Zürich
Lukas Hierholzer, Die Ergonomen, Zürich

WIESO HUMAN CENTRED DESIGN?

Die nutzerorientierte Gestaltung zielt darauf ab, interaktive Produkte so zu gestalten, dass sie über eine hohe Gebrauchstauglichkeit (Usability) verfügen. Dies wird im Wesentlichen dadurch erreicht, dass der (zukünftige) Nutzer eines Produktes mit seinen Aufgaben, Zielen und Eigenschaften in den Mittelpunkt des Entwicklungsprozesses gestellt wird.

Wenn Design intuitiv ist, werden die Menschen dazu inspiriert, sich weiterzuentwickeln. Sie werden verstanden und ihr Verhalten wird vorweggenommen. Erfahrungen passen sich ihren Bedürfnissen, Absichten und dem Kontext an.

2019 - Trends im UI Design - Part 2

 

Visuelles Geschichtenerzählenk

Der Trend zu benutzerdefinierten Grafiken hat dem Storytelling in den Benutzeroberflächen eine weitere Perspektive eröffnet. Immer mehr Websites und mobile Apps greifen auf speziell gestaltete Charaktere zurück, die die Geschichte zeigen, die Atmosphäre einstellen, die Nachricht senden oder die Vorteile so präsentieren, wie es der Stimmung, dem Ton und der Stimme der Plattform entspricht.

Originelle Charaktere tragen dazu bei, die Interaktionen menschlicher zu gestalten, starke visuelle Assoziationen mit der realen Welt herzustellen und die gewünschte Stimmung sofort zu übertragen. Darüber hinaus können die Zeichen je nach Komposition ein effektives Werkzeug sein, um die Seite oder den Bildschirm dynamisch und lebendig zu gestalten.

 

Knopflose Interaktionen

Schaltflächen sind nach wie vor eines der wichtigsten Elemente des Benutzeroberflächen-Designs. Jetzt sehen wir kreativere Experimente zur mobilen Benutzererfahrung im Hinblick auf Benutzeroberflächen-Interaktionen ohne Schaltflächen. Dieser Ansatz spart wertvollen Platz auf dem Bildschirm, um weitere Informationen zu erhalten, und es wird sogar angenommen, dass er der erste Schritt zu den virtuellen Schnittstellen ist, die nur auf Gesten basieren.

Wenn Sie feststellen, dass ein Element Ihrer Benutzeroberfläche Anweisungen erfordert, müssen Sie es neu gestalten.

Bei großartigem UX-Design geht es darum, die Benutzerführung zu vereinfachen - und dies bedeutet, alle Elemente zu entfernen, die nicht unbedingt erforderlich sind.

2019 - Trends im UI Design - Part 4

 

Wachstum von Videoinhalten

Verschiedene Arten von Promo- und Erklärvideos wurden verbessert, um auf Bildschirmen und Seiten angezeigt zu werden. Kein Wunder, denn sie dienen effizient den Marketingzielen und steigern die Markenbekanntheit. Ein kreatives und einprägsames Video ist eine gute Möglichkeit, die Aufmerksamkeit der Kunden auf sich zu ziehen und die bewährte Methode, um sie schnell und hell zu informieren. Ein Video aktiviert mehrere Wahrnehmungskanäle - Audio, Video, Ton - gleichzeitig und erweitert sie um die Fähigkeit, Geschichten zu erzählen.

Alle genannten Faktoren neigen dazu, die Präsentation per Video stark und einprägsam zu machen, insbesondere wenn sie auf qualitativ hochwertigem Grafikdesign und Animation basieren. Die Menschen sind täglich mit unzähligen Informationen aller Art überlastet, sodass die meisten von ihnen nicht bereit sind, viel Zeit in das Erlernen von Produkten oder Dienstleistungen zu investieren, insbesondere der neuen. Unter diesen Umständen sind Videos zu einem dynamischen, informativen und attraktiven Kommunikationsmittel geworden. Das Problem der Ladegeschwindigkeit für eine Webseite wird jedoch immer größer und sollte auf verschiedenen Geräten sorgfältig getestet werden.

 

UI-orientiertes Branding

Das Jahr 2018 setzte den massiven Trend des Redesigns für das Branding fort: Globale und lokale Unternehmen, Produkte und Marken änderten ihre Logos und Markendarstellungen, hauptsächlich mit dem Ziel, Formen und Details zu vereinfachen. Einer der Gründe für den Trend war das Streben nach einer besseren Bedienbarkeit und Navigierbarkeit der Markenelemente, da immer mehr Unternehmen um eine höhere Online-Präsenz konkurrieren. Daher wurden sowohl neue als auch überarbeitete Logos erstellt, um die Benutzeroberfläche zu vereinfachen und auf einer Vielzahl von digitalen Geräten und Layouts effektiv wahrgenommen zu werden.

Darüber hinaus wurden animierte Logos zu einem Trend, der Identitätssymbole interaktiver machte und das Markenbewusstsein stärkte.

 

Mehrschichtige Layouts

Kreative Experimente werden ständig von UI-Designern durchgeführt, um neue interessante Wege zu finden, um die Webseite ansprechend und interaktiv zu gestalten. Einer der wachsenden Trends ist das Anwenden mehrerer interaktiver Ebenen, die das Scrollen und die Interaktion originell erscheinen lassen.

AGENTUREN / PRODUKTIONSFIRMEN / AUFTRAGSGEBER / KUNDEN

6 wichtige Design-Tipps für die Benutzeroberfläche

Merken Sie sich diese 6 Richtlinien, wenn Sie elegante, benutzerfreundliche und benutzerzentrierte Benutzeroberflächen erstellen möchten.

1

Kennen Sie Ihre Benutzer

Vor allem müssen Sie wissen, wer Ihre Benutzer sind - von innen und außen. Das bedeutet, dass Sie alle demografischen Daten kennen, die Ihre Analytics-App (s) abrufen können, ja. Aber was noch wichtiger ist, es bedeutet zu wissen, was sie brauchen und was sie daran hindert, ihre Ziele zu erreichen.

2

Definieren Sie, wie Benutzer Ihre Benutzeroberfläche verwenden

Bevor Sie Ihre Benutzeroberfläche entwerfen, müssen Sie definieren, wie die Benutzer sie verwenden. Angesichts der zunehmenden Verbreitung von Touch-basierten Geräten ist dies ein zentrales Anliegen, als Sie vielleicht denken. Schau einfach auf

Zunder: Das Benutzererlebnis der App wird buchstäblich durch die Leichtigkeit und Impulsivität eines einfachen Streifens definiert.

Menschen nutzen Websites und Apps auf zwei Arten: direkt (durch Interaktion mit einem Element des Produkts) und indirekt (durch Interaktion mit einem Element außerhalb des Produkts).

3

Feedback geben

In der realen Welt gibt uns die Umgebung Feedback.

Nur allzu oft geben digitale Schnittstellen nicht viel zurück, sodass wir uns fragen, ob wir die Seite neu laden, den Laptop neu starten oder einfach aus dem nächsten verfügbaren Fenster werfen sollen.

Also gib mir die Lade-Animation. Lassen Sie diesen Knopf aufspringen und schnappen Sie zurück, wenn ich darauf tippe - aber nicht zu viel. Und gib mir ein virtuelles High-Five, wenn ich etwas für dich mache und ich stimme zu, dass es fantastisch ist.

4

Standards sind wertvoll

Als hochkreativer Typ lieben Designer es, Dinge neu zu erfinden - aber das ist nicht immer die beste Idee.

Warum? Eine überarbeitete Version einer vertrauten Interaktion oder Benutzeroberfläche führt zu einer „kognitiven Belastung“: Sie lässt die Benutzer erneut über einen Prozess nachdenken, den sie bereits gelernt haben. Natürlich können Sie das Rad neu erfinden - aber nur, wenn es das Design tatsächlich verbessert.

5

Platzierung Grösse der Elemente

Überlegen Sie sich die Platzierung und Größe der Elemente genau
Das Fitts-Gesetz, ein grundlegendes Prinzip der Mensch-Computer-Interaktion (HCI), besagt:

Die Zeit zum Erfassen eines Ziels ist eine Funktion der Entfernung zu und der Größe des Ziels.

Mit anderen Worten: Je näher und / oder größer etwas ist, desto schneller können Sie den Cursor (oder Finger) darauf platzieren. Dies hat natürlich alle möglichen Auswirkungen auf die Interaktion und das Design der Benutzeroberfläche, aber drei der wichtigsten sind:

6

Machen Sie die Entscheidungsfindung einfach

Zu viele Internetseiten schreien nach uns: „Banner“ werden plötzlich zu Vollbildanzeigen. Modals erscheinen und flehen uns an, Blogs zu abonnieren, die wir noch nicht lesen konnten. Video-Interstitials halten uns auf unseren Spuren und zwingen uns, kostbare Sekunden ach so langsam vorbeizuschauen. Und lass mich noch nicht einmal mit den Widgets, Flyouts, Tooltips beginnen ...

Je mehr Optionen Sie einem Benutzer präsentieren, desto schwerer fällt es ihm, eine Entscheidung zu treffen.

UI Software

Beim Prototyping wird bei Chemicalbox hauptsächlich diese Software verwendet.

Sketch

Sketch ist ein sehr beliebtes Tool in der Design-Community, mit dem Sie HiFi-Schnittstellen und Prototypen erstellen können. Eine der großartigen Funktionen ist "Symbole", mit denen Sie UI-Assets und -Elemente zur Wiederverwendung entwerfen können. Auf diese Weise können Sie Designsysteme erstellen und Ihre Schnittstellen konsistent halten. Von dort aus können Sie Ihr Design problemlos in einen klickbaren Prototyp exportieren. Wenn Sie ein InVision-Benutzer sind, überprüfen Sie das Craft-Plugin.

balsamiq

Wenn Sie schnelles Wireframing suchen, ist Balsamiq ein guter Vorschlag. Sie können schnell und einfach Strukturen und Layouts für Ihre Projekte entwickeln. Die Drag & Drop-Elemente vereinfachen das Leben und Sie können Schaltflächen mit anderen Seiten verknüpfen. So können Sie schnell mit der Planung Ihrer Schnittstellen beginnen und diese dann an Ihr Team oder Ihre Kunden weitergeben.

UI/UX RESSOURCEN

Massgebend für die Gestaltung sind folgende Richtlinien:

Google Material Design

Material Design ist eine visuelle Sprache, die die klassischen Prinzipien guten Designs mit der Innovation von Technologie und Wissenschaft verbindet.

Material Design

Microsoft Fluent Design

Fluent vereint die Grundlagen von prinzipiellem Design, technologischer Innovation und Kundenbedürfnissen. Es ist ein kollektiver Ansatz zur Schaffung von Einfachheit und Kohärenz durch ein plattformübergreifendes, gemeinsames offenes Designsystem.

Fluent Design

Barrierefreies Design

Design für alle, Universal Design, Inklusive Design, Barrierefreies Design
… alle diese Begriffe können so interpretiert werden, dass die Designer an ALLE Menschen denken, und ihre Bedürfnisse berücksichtigen, egal welches Alter, Geschlecht, Herkunft, Beeinträchtigung (permanent, temporär oder situativ) sowie in welchen Kontext (physisch und sozial) sie sich befinden.

 

Einen gutes Kontrastverhältnis bieten

Die Inhalte sollten leicht wahrgenommen werden können und die Unterscheidung zwischen Vorder- und Hintergrund sollte leicht sein.
Nicht nur unter optimalen (kontrollierten) Bedingungen, sondern auch in verschiedenen Nutzungskontexten muss ein ausreichender Farbkontrast berücksichtigt werden, z.B. Bildschirm in der Sonne, Auflösung/Größe des Bildschirmes, alte Monitore, etc.
Die Wahrnehmung des Inhalts und die Unterscheidung zwischen Vorder- und Hintergrund sollte so weit wie möglich erleichtert werden.

 

Hilfreiche Ressourcen für barrierefreies Designen.

Minimum Kontrast WCAG – BITV
Kontrast Checker plugin für Sketch
Mozilla WCAG Contrast checker
Google Developer Guidelines for Accessible Styles

 

Reinen Text verwenden, wo immer dies möglich ist

Statt Texte in form von Bildern auszugeben, sollte reiner Text genutzt werden. So kann der Text verkleinert und vergrößert werden (Responsivität), dazu lädt er schneller und ist einfacher zu übersetzen. Reine Texte können auch von Screenreadern einfach vorgelesen werden. Es müssen keine zusätzlichen alternative Texte für die Bildern hinterlegt werden.

Farbwahl-Tools

Beliebte Werkzeuge zum Auswählen von Farben
Beim erstellen eines Farbschemas gibt es viele Werkzeugen, die das definieren des UI-Farbschemas vereinfachen.
Farbe ist der Eckpfeiler des UI-Designs.

Coolors.co

Dieses Tool ermöglicht es, ein Bild hochzuladen und daraus eine Farbpalette zu erstellen. Auch den Export von Farbkombinationen in verschiedene Formate wie SVG ist möglich.

Coolors.co

Paletton

Paletton ähnelt Adobe Color CC. Der Hauptunterschied besteht darin, dass Sie nicht nur auf 5 Töne beschränkt sind. Diese Funktion ist praktisch, wenn Sie Primärfarben haben und mit zusätzlichen Tönungen spielen möchten.

Paletton

Adobe Color CC

Mit Adobe Color CC können Sie mithilfe eines Farbrads ein Farbschema erstellen. Das erstellte Schema kann in Adobe Photoshop exportiert werden. Color CC bietet auch eine hervorragende Sammlung von Tausenden von Farbkombinationen aus der kreativen Community.

Adobe Color cc

Googles MDL Color Customizer

Googles MDL Color Customizer ist ein hervorragendes Tool für Android-Entwickler. Benutzer können damit primäre und sekundäre Benutzeroberflächenfarben für die Android-App kombinieren.

Googles MDL Color Customizer