© Palau/Shutterstock.com, © S&S Media
Windows Developer
Anwendungsgesteuerte Animationen leichtgemacht

Tolle UX mit Angular Animations

Große graue Buttons in großen grauen Fenstern - Anwendungen wie wir sie von früher kennen, aber nicht unbedingt lieben gelernt haben. Aber sie haben ihren funktionalen Zweck erfüllt. Auch heutige Anwendungen erfüllen ihren funktionalen Zweck, aber sie sind einen Schritt weiter. Statt grau auf grau gibts oftmals durchdachte farbliche Designs. Und viel wichtiger: Von subtilen, kleinen, unterstützenden bis hin zu großen, pompösen und erstaunlichen Animationen ist alles mit dabei. Ziel ist dabei die Unterstützung des Benutzers, also die Verbesserung der User Experience.

Manuel Rauber


Interview mit Manuel Rauber

Internetseiten wie Dribbble [1] oder Awwwards [2] sind tolle Inspirationsquellen für interessante User-Interface- und User-Experience-Konzepte oder deren Implementierung. Dahinter stecken oftmals nicht einfache JavaScript-Skripte, die man mal eben in seine eigene Anwendung einbauen kann, sondern oftmals sehr viel Engagement, Arbeit und Zeit. Die steigende Zahl an Firmen, die eine Stelle für UI-/UX-Developer oder UI/UX Engineers ausschreiben, zeigt die Bereitschaft, mehr und mehr in diese Bereiche zu investieren, um die Benutzerzufriedenheit zu erhöhen.

Ein gutes UI gepaart mit einer guten UX hilft immens bei der Steuerung einer Anwendung durch den Benutzer. Sie funktionieren nicht nur gut bei ihrer Nutzung, sondern es macht auch noch Spaß. Oftmals merken wir Benutzer gar nicht, wie gut die UX einer Anwendung ist, wenn diese dementsprechend durchdacht und implementiert ist. Wir merken eher, wenn etwas mal nicht ganz rund ist oder der Arbeitsablauf nicht stimmt.

Das heißt aber auch, dass wir Entwickler unser Skillset erweitern müssen. Sicherlich müssen wir nicht in der Lage sein, die Arbeit eines spezialisierten UX Engineers in vollem Umfang zu erledigen, aber wir sollten in der Lage sein, kleine subtile und unterstützende Elemente entwickeln zu können. Natürlich beschränkt sich die Arbeit eines UX Engineers nicht nur darauf, tolle Animationen zu erstellen. Diese sind oftmals das Ergebnis eines oder mehrerer Workshops des UX Engineers zusammen mit seinem Kunden zur Verbesserung von Arbeitsabläufen. Aber oftmals sind es auch genau diese kleinen subtilen Animationen, die eine Anwendung zum Leben erwecken, und man dann gerne damit arbeitet.

Im Rahmen des Artikels wollen wir uns daher grundlegend mit dem von Angular angebotenen Animations-API beschäftigen, dessen sehr ausdrucksstarke domänenspezifische Sprache kennenlernen und erste Animationen selbst erstellen. Der Artikel wird durch eine Beispielanwendung begleitet, die auf GitHub [3] zu finden ist und auf Angular 5+ basiert. Daher ist das hier im Artikel gezeigte API basierend auf Angular 5.

Browserunterstützung

Angular Animations [4] bauen auf dem sehr jungen Standard Web Animations API [5] auf. Abbildung 1 zeigt, dass Firefox und Chrome den Standard partiell implementieren, während andere Browserhersteller ihn noch nicht unterstützen. Mit etwas Performanceverlust kann der Standard allerdings über einen JavaScript Polyfill in den anderen Browser (IE 10+, Safari 9+, Mobile S...

Windows Developer
Anwendungsgesteuerte Animationen leichtgemacht

Tolle UX mit Angular Animations

Große graue Buttons in großen grauen Fenstern - Anwendungen wie wir sie von früher kennen, aber nicht unbedingt lieben gelernt haben. Aber sie haben ihren funktionalen Zweck erfüllt. Auch heutige Anwendungen erfüllen ihren funktionalen Zweck, aber sie sind einen Schritt weiter. Statt grau auf grau gibts oftmals durchdachte farbliche Designs. Und viel wichtiger: Von subtilen, kleinen, unterstützenden bis hin zu großen, pompösen und erstaunlichen Animationen ist alles mit dabei. Ziel ist dabei die Unterstützung des Benutzers, also die Verbesserung der User Experience.

Manuel Rauber


Interview mit Manuel Rauber

Internetseiten wie Dribbble [1] oder Awwwards [2] sind tolle Inspirationsquellen für interessante User-Interface- und User-Experience-Konzepte oder deren Implementierung. Dahinter stecken oftmals nicht einfache JavaScript-Skripte, die man mal eben in seine eigene Anwendung einbauen kann, sondern oftmals sehr viel Engagement, Arbeit und Zeit. Die steigende Zahl an Firmen, die eine Stelle für UI-/UX-Developer oder UI/UX Engineers ausschreiben, zeigt die Bereitschaft, mehr und mehr in diese Bereiche zu investieren, um die Benutzerzufriedenheit zu erhöhen.

Ein gutes UI gepaart mit einer guten UX hilft immens bei der Steuerung einer Anwendung durch den Benutzer. Sie funktionieren nicht nur gut bei ihrer Nutzung, sondern es macht auch noch Spaß. Oftmals merken wir Benutzer gar nicht, wie gut die UX einer Anwendung ist, wenn diese dementsprechend durchdacht und implementiert ist. Wir merken eher, wenn etwas mal nicht ganz rund ist oder der Arbeitsablauf nicht stimmt.

Das heißt aber auch, dass wir Entwickler unser Skillset erweitern müssen. Sicherlich müssen wir nicht in der Lage sein, die Arbeit eines spezialisierten UX Engineers in vollem Umfang zu erledigen, aber wir sollten in der Lage sein, kleine subtile und unterstützende Elemente entwickeln zu können. Natürlich beschränkt sich die Arbeit eines UX Engineers nicht nur darauf, tolle Animationen zu erstellen. Diese sind oftmals das Ergebnis eines oder mehrerer Workshops des UX Engineers zusammen mit seinem Kunden zur Verbesserung von Arbeitsabläufen. Aber oftmals sind es auch genau diese kleinen subtilen Animationen, die eine Anwendung zum Leben erwecken, und man dann gerne damit arbeitet.

Im Rahmen des Artikels wollen wir uns daher grundlegend mit dem von Angular angebotenen Animations-API beschäftigen, dessen sehr ausdrucksstarke domänenspezifische Sprache kennenlernen und erste Animationen selbst erstellen. Der Artikel wird durch eine Beispielanwendung begleitet, die auf GitHub [3] zu finden ist und auf Angular 5+ basiert. Daher ist das hier im Artikel gezeigte API basierend auf Angular 5.

Browserunterstützung

Angular Animations [4] bauen auf dem sehr jungen Standard Web Animations API [5] auf. Abbildung 1 zeigt, dass Firefox und Chrome den Standard partiell implementieren, während andere Browserhersteller ihn noch nicht unterstützen. Mit etwas Performanceverlust kann der Standard allerdings über einen JavaScript Polyfill in den anderen Browser (IE 10+, Safari 9+, Mobile S...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang