Vaisala

Vaisala ist ein weltweit führender Anbieter von Messinstrumenten und smarten Lösungen für Klimaschutzmaßnahmen. Das Unternehmen stellt Industrie- und Wettermessgeräte zur Überwachung von Raumklima, Biogas, Flüssigkeiten, Druck oder Temperatur her, um nur einige Beispiele zu nennen. Die Geräte und Daten von Vaisala verbessern die Ressourceneffizienz, treiben die Energiewende voran und sorgen für die Sicherheit und das Wohlbefinden von Menschen und Gesellschaften weltweit.

​

Das Angebot von Vaisala umfasst Hunderte von Produktfamilien, einschließlich digitaler Produkte. Damit​hat das Unternehmen ein Designsystem entwickelt, das die Konsistenz der Benutzeroberfläche gewährleistet, die Beibehaltung der einzigartigen optischen Sprache unterstützt, die Entwicklung erleichtert und die Kosten reduziert. Der nächste Schritt war die Verbesserung der optischen Qualität durch das Hinzufügen von Animationen zu digitalen Schnittstellen, ein Bewegungsdesignsystem, das über mehrere Berührungspunkte hinweg funktionieren würde. Winzige Details, die der Oberfläche Leben und Dynamik verleihen und die Benutzerfreundlichkeit verbessern.

UI Motion Design Konzepte

Das Ziel war es, die UI-Bewegung so zu gestalten, dass sie die Werte und die DNA des Unternehmens widerspiegelt. Die Teams von Unravel und Vaisala haben sich darauf geeinigt, zwei Ansätze mit Dokumentation und Implementierungsvorgaben zu erstellen. Es war sehr aufregend, da wir während unserer 4-wöchigen Zusammenarbeit festgestellt haben, dass Vaisala, genau wie Unravel, von einem großartigen Design der eigenen Produkte besessen ist.

Konzept A inspiriert von der Natur

Wir haben einen fallenden Wassertropfen und die Bewegung der aufgehenden Sonne betrachtet. Die Bewegungen sind sanft, organisch und natürlich.

Konzept B inspiriert durch vom Menschen geschaffene Wunderwerke

Der Goldene Schnitt ist ein vielseitiges mathematisches Konzept, das in verschiedenen Bereichen des Designs und der Kunst verwendet wird und dazu dient, ästhetisch ansprechende und ausgewogene Kompositionen zu schaffen. In der Bewegung kann er Übergänge und das Gleichgewicht des Timings verfeinern.

Die natürliche menschliche Bewegung besteht aus 3 Phasen: Ausbrechen aus dem Stillstand, Erhöhung der Beschleunigung, sanfte Landung. Industrielle Maschinen sind so gebaut, dass sie dieses Muster in noch viel intensiverer Weise wiederholen. Die besten von ihnen bewegen sich schnell und halten ihre Präzision die ganze Zeit über auf einem perfekten Niveau.
Die Bewegung in der Benutzeroberfläche von High-End-Produkten sollte sich auch genauso anfühlen.

Harmonie. Der wichtigste Bewegungsübergang. Wird für Objekte verwendet, die den Bildschirm verlassen oder den Seiteninhalt wechseln. Die Kurve beginnt langsam, beschleunigt und verlangsamt sich zum Ende hin subtil.

Start. Wird zum Laden von Elementen auf dem Bildschirm verwendet, die in einer Sequenz oder nach Skeleton Screens erscheinen. Die Kurve startet das Element schnell und verlangsamt sich zum Ende hin.

 Interaktiv. Universelle Vorlage für Elemente, die sich leicht verschieben lassen. Die Kurve ist eine Feder mit einem leichten Taumeln am Ende.

Für beide Konzepte lieferten wir detaillierte Richtlinien für die Gestaltung von Animationen, wie Dauer, Übergänge, Beschleunigung und Verzögerung oder Ladeeinstellungen. Diese dienen auch als Grundlage für den Aufbau komplexer Interaktionen.

Barrierefreiheit

Die Gestaltungsrichtlinien enthielten Empfehlungen, um sicherzustellen, dass alle Animationen für alle Nutzer zugänglich bleiben, auch für solche mit Bewegungsempfindlichkeit oder anderen Anforderung an die Zugänglichkeit.

 Einige davon sind:

• Anbieten von Optionen zur Reduzierung oder Deaktivierung von Bewegungen. Möglichkeit für Benutzer, Animationen über die Einstellungen oder Präferenzen zu deaktivieren oder zu reduzieren. Dies ist besonders wichtig für Menschen mit Gleichgewichtsstörungen oder Bewegungsempfindlichkeit.
• Vermeiden Sie Animationen, die blinken oder schnelle Farbwechsel beinhalten. Dies kann bei manchen Benutzern zu Krampfanfällen führen.
• Es ist dafür zu sorgen, dass die Bewegung auf den Punkt beschränkt bleibt, auf den sich der Benutzer konzentriert, und sich nicht über große Teile des Bildschirms ausbreitet.
• Animationen sollten subtil und zielgerichtet bleiben. Übermäßige oder unnötige Bewegungen, die ablenkend oder desorientierend wirken könnten, sind zu vermeiden.
• Man sollte sich nicht ausschließlich auf Bewegungen verlassen, um wichtige Informationen zu vermitteln. Alternative Möglichkeiten, Inhalte und Funktionen zu verstehen, sollten bereitgestellt werden.

Dynamische Prototypen für Desktop und Mobilgeräte

Sind Sie neugierig, wie Bewegung Ihr digitales Produkt verbessern kann? Überzeugen Sie sich von den Fähigkeiten unserer Motion Designer.