SlideShare ist ein Scribd-Unternehmen logo
1 von 71
Downloaden Sie, um offline zu lesen
WEBTECHCON, 23 - 27 OCTOBER 2016, MUNICH
CREATE USER-CENTRIC 

UI-ANIMATIONS
PETER ROZEK
SENIOR UX MANAGER
KPS digital GmbH, ein Unternehmen der KPS AG
KPS DIGITAL GMBH
KPS AG
KPS digital GmbH, ein Unternehmen der KPS AG
WEBINTERFACE
KPS digital GmbH, ein Unternehmen der KPS AG
KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATION IS POWERFUL,
BECAUSE IT CAN CREATE
THE ILLUSION OF LIFE.
KPS digital GmbH, ein Unternehmen der KPS AG
YOU HAVE TO CREATE
SOMETHING THAT FEELS
HUMAN AND
ACCOMPLISHES A TASK.
@Jeeyun Oh, assistant professor of communications
at Robert Morris University
“Interactivity persuades people by
making users think more deeply
about the message.“
http://trentwalton.com/2012/02/02/redefined/
http://www.dokimos.org/ajff/
CLAP YOUR HANDS, NOW !!!
THE FUTURE OF ANIMATION
DESIGN IS OPTIMIZED FOR
MOBILE
Scource: IBM, Three New Ways to Understand and Improve Your Customers’ Experience, 2016
KPS digital GmbH, ein Unternehmen der KPS AG
EXAMPLE
KPS digital GmbH, ein Unternehmen der KPS AG
GALLERIES AND
SLIDESHOWS
https://www.vanmoof.com/de_de/
KPS digital GmbH, ein Unternehmen der KPS AG
FORM FIELDS 

OR CALLS TO ACTION
http://mds.is/float-label-pattern/
FLOAT LABEL
PATTERN:
FROM MATT D.
SMITH
KPS digital GmbH, ein Unternehmen der KPS AG
NAVIGATION AND MENUS
http://www.porsche.com/germany/
KPS digital GmbH, ein Unternehmen der KPS AG
PAGE MOTION
http://waaark.com/
KPS digital GmbH, ein Unternehmen der KPS AG
LOADING
Techniques:

HTML = SVG

CSS = animation, @keyframes, transform
https://codepen.io/woodwork/pen/YWjWzo
http://projects.lukehaas.me/css-loaders/
KPS digital GmbH, ein Unternehmen der KPS AG
<div class="loader">Loading...</div>
KPS digital GmbH, ein Unternehmen der KPS AG
.loader,
.loader:before,
.loader:after {
background: #ffffff;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
width: 1em;
height: 4em;
}
.loader:before,
.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader {
color: #ffffff;
text-indent: -9999em;
margin: 88px auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
@keyframes load1 {
0%,
80%,
100% {
box-shadow: 0 0;
height: 4em;
}
40% {
box-shadow: 0 -2em;
height: 5em;
}
}
KPS digital GmbH, ein Unternehmen der KPS AG
SKIP INTRO - CSS3 IS THE
NEW FLASH
KPS digital GmbH, ein Unternehmen der KPS AG
SCROLL ANIMATION
http://www.evanshalshaw.com/more/bondcars/
KPS digital GmbH, ein Unternehmen der KPS AG
HOVER AND VISUAL
FEEDBACK
KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATED PHOTOGRAPHY
KPS digital GmbH, ein Unternehmen der KPS AG
ESSENTIAL FUNCTIONS OF
MICROINTERACTIONS
KPS digital GmbH, ein Unternehmen der KPS AG
Communicate feedback or the result of an
action.
Accomplish an individual task.
Enhance the sense of direct manipulation.
Help users visualize the results of their actions
and prevent errors.
Show System
Status
KPS digital GmbH, ein Unternehmen der KPS AG
ANIMATION BRINGS USER
INTERFACE TO LIFE
Animations make the experience feel crafted
KPS digital GmbH, ein Unternehmen der KPS AG
PROCESS
http://playful-interaction-concepts.de/methode-gamification-design-modell/
Gamification Design Modell
WALT DISNAY: THE TWELVE BASIS 

PRINCIPLES OF ANIMATION
http://the12principles.tumblr.com/
Squash and Stretch
Anticipation
Staging
Straight Ahead Action and Pose to Pose
Follow Through and Overlapping Action
Slow In and Slow Out
Arc
Secondary Action
Timing
Exaggeration
Solid drawing
Appeal
KPS digital GmbH, ein Unternehmen der KPS AG
FIVE PRINCIPLES WILL
ALWAYS DETERMINE HOW
INTERACTION DESIGN
KPS digital GmbH, ein Unternehmen der KPS AG
1. Goal-driven design (Personas and
Experience Map)
2. Usability
3. Affordance and signifiers
4. Learnability
5. Feedback and response time
KPS digital GmbH, ein Unternehmen der KPS AG
STORY-DRIVEN DESIGN
Develop concepts from the user's point of view
and his context.
KPS digital GmbH, ein Unternehmen der KPS AG
START BY DESIGNING
INDIVIDUAL COMPONENTS
AND THINKING ABOUT HOW
THEY CHANGE AND MOVE
IN DIFFERENT CONTEXTS.
KPS digital GmbH, ein Unternehmen der KPS AG
DO AND DON'T
What makes a good transition?
KPS digital GmbH, ein Unternehmen der KPS AG
MOTION IS QUICK!
Do:
Animate quickly so
that the user never
has to wait for the
animation to finish.
Don’t:
Staggering and slowing
the movement of many
elements can lengthen
the duration.
KPS digital GmbH, ein Unternehmen der KPS AG
MOTION IS CLEAR!
Do:
Maintain a clear path
into the next view,
even while elements
are choreographed as
a group.
Don’t:
Transitions can get
confusing when multiple
items need to move in
different directions or
cross paths.
KPS digital GmbH, ein Unternehmen der KPS AG
MOTION IS COHESIVE!
Motion experience should be consistent
throughout the product.
KPS digital GmbH, ein Unternehmen der KPS AG
SKETCH BEFORE YOU SKETCH
Image: http://blog.invisionapp.com/10-tips-on-prototyping-uis-with-sketch/
KPS digital GmbH, ein Unternehmen der KPS AG
PROTOTYPING UI
ANIMATION
KPS digital GmbH, ein Unternehmen der KPS AG
PATTERN & FRAMEWORKS 

CAN HELP
KPS digital GmbH, ein Unternehmen der KPS AG
CSS @KEYFRAMES
@keyframes meine-animation {
from {
/* Properties at the beginning of the animation */
}
to {
/* Properties at the end of the animation */
}
}
.mein-selektor {
animation-name: meine-animation;
animation-duration: 2s;
animation-iteration-count: infinite;
/* More animation Properties */
}
@keyframes meine-animation {
0% {
/* Properties at the beginning of the animation */
}
50% {
/* Properties after half of the animation */
}
100% {
/* Properties at the end of the animation */
}
}
@keyframes meine-animation {
0% {
/* Properties at the beginning of the animation */
}
25%, 75% {
/* Properties from 1/4 to 3/4 of the animation */
}
100% {
/* Properties at the end of the animation */
}
}
KPS digital GmbH, ein Unternehmen der KPS AG
TESTING
KPS digital GmbH, ein Unternehmen der KPS AG
CONCLUSION
KPS digital GmbH, ein Unternehmen der KPS AG
DESIGN THE TRANSACTION
NOT THE INTERFACE.
KPS digital GmbH, ein Unternehmen der KPS AG
FOLLOWING THE SEMANTIC
STRUCTURE OF THE
CONTENT
KPS digital GmbH, ein Unternehmen der KPS AG
BENEFITS OF ANIMATION
KPS digital GmbH, ein Unternehmen der KPS AG
1. Reduces cognitive load
2. Provide clear feedback in response to
user’s actions
3. Provide system status to the user
4. Guide and teach the user how to interact
with the interface
THANKS FOR YOUR TIME!
PETER.ROZEK@KPS.DE
QUESTION?
FOR ELLEN
KPS digital GmbH, ein Unternehmen der KPS AG

Weitere ähnliche Inhalte

Ähnlich wie Create User Centric UI-Animations

VR and AR User Experience Design
VR and AR User Experience DesignVR and AR User Experience Design
VR and AR User Experience DesignJoerg Osarek
 
USECON RoX2016: Opening Remarks
USECON RoX2016: Opening RemarksUSECON RoX2016: Opening Remarks
USECON RoX2016: Opening RemarksUSECON
 
Ostfalia Webdesign Theorie Block 1
Ostfalia Webdesign Theorie Block 1Ostfalia Webdesign Theorie Block 1
Ostfalia Webdesign Theorie Block 1Ostfalia Webdesign
 
Trends & Innovationen: Natural User Interfaces
Trends & Innovationen: Natural User InterfacesTrends & Innovationen: Natural User Interfaces
Trends & Innovationen: Natural User InterfacesTRENDONE GmbH
 
NINC! - Presentation Papers 3D 2008
NINC! -  Presentation Papers 3D 2008NINC! -  Presentation Papers 3D 2008
NINC! - Presentation Papers 3D 2008Philipp Hummer
 
Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008kaeau
 
Presentation Papers 3D 2008
Presentation Papers 3D 2008Presentation Papers 3D 2008
Presentation Papers 3D 2008kaeau
 
worldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIESworldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIESworldiety GmbH
 
To Be or Not to Be - Die Digitalisierung und ihre Folgen
To Be or Not to Be - Die Digitalisierung und ihre FolgenTo Be or Not to Be - Die Digitalisierung und ihre Folgen
To Be or Not to Be - Die Digitalisierung und ihre FolgenMartin Runde
 
Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1Ostfalia Webdesign
 
Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014Julian Mengel
 

Ähnlich wie Create User Centric UI-Animations (20)

VR and AR User Experience Design
VR and AR User Experience DesignVR and AR User Experience Design
VR and AR User Experience Design
 
USECON RoX2016: Opening Remarks
USECON RoX2016: Opening RemarksUSECON RoX2016: Opening Remarks
USECON RoX2016: Opening Remarks
 
Ostfalia Webdesign Theorie Block 1
Ostfalia Webdesign Theorie Block 1Ostfalia Webdesign Theorie Block 1
Ostfalia Webdesign Theorie Block 1
 
VDC Newsletter 2014-05
VDC Newsletter 2014-05VDC Newsletter 2014-05
VDC Newsletter 2014-05
 
VDC Newsletter Mai 2017
VDC Newsletter Mai 2017VDC Newsletter Mai 2017
VDC Newsletter Mai 2017
 
Trends & Innovationen: Natural User Interfaces
Trends & Innovationen: Natural User InterfacesTrends & Innovationen: Natural User Interfaces
Trends & Innovationen: Natural User Interfaces
 
NINC! - Presentation Papers 3D 2008
NINC! -  Presentation Papers 3D 2008NINC! -  Presentation Papers 3D 2008
NINC! - Presentation Papers 3D 2008
 
Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008Ninc! Presentation 3D Design 2008
Ninc! Presentation 3D Design 2008
 
Presentation Papers 3D 2008
Presentation Papers 3D 2008Presentation Papers 3D 2008
Presentation Papers 3D 2008
 
worldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIESworldiety GmbH - SUCCESS STORIES
worldiety GmbH - SUCCESS STORIES
 
VDC-Newsletter November 2014
VDC-Newsletter November 2014VDC-Newsletter November 2014
VDC-Newsletter November 2014
 
VDC-Newsletter 2017-01
VDC-Newsletter 2017-01VDC-Newsletter 2017-01
VDC-Newsletter 2017-01
 
Monolithen mit ddd zerlegen
Monolithen mit ddd zerlegenMonolithen mit ddd zerlegen
Monolithen mit ddd zerlegen
 
VDC Newsletter 2006-06
VDC Newsletter 2006-06VDC Newsletter 2006-06
VDC Newsletter 2006-06
 
To Be or Not to Be - Die Digitalisierung und ihre Folgen
To Be or Not to Be - Die Digitalisierung und ihre FolgenTo Be or Not to Be - Die Digitalisierung und ihre Folgen
To Be or Not to Be - Die Digitalisierung und ihre Folgen
 
VDC-Newsletter 2016-08
VDC-Newsletter 2016-08VDC-Newsletter 2016-08
VDC-Newsletter 2016-08
 
Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1Ostfalia Webdesign Übung Block 1
Ostfalia Webdesign Übung Block 1
 
VDC-Newsletter 2013-12
VDC-Newsletter 2013-12VDC-Newsletter 2013-12
VDC-Newsletter 2013-12
 
VDC-Newsletter 2014-02
VDC-Newsletter 2014-02VDC-Newsletter 2014-02
VDC-Newsletter 2014-02
 
Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014Animation Webdesign -Webmontag Kassel 2014
Animation Webdesign -Webmontag Kassel 2014
 

Mehr von Peter Rozek

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership Peter Rozek
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenPeter Rozek
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVEPeter Rozek
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperiencePeter Rozek
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXPeter Rozek
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXPeter Rozek
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryPeter Rozek
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivePeter Rozek
 
Performance and UX
Performance and UXPerformance and UX
Performance and UXPeter Rozek
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignPeter Rozek
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Peter Rozek
 
Online / Offline
Online / OfflineOnline / Offline
Online / OfflinePeter Rozek
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Peter Rozek
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesPeter Rozek
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenPeter Rozek
 
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesResponsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesPeter Rozek
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or diePeter Rozek
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Peter Rozek
 

Mehr von Peter Rozek (20)

How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership How to win Stakeholders, Design needs Leadership
How to win Stakeholders, Design needs Leadership
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
THE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVETHE UX OF DATA - VISUALIZATION RESPONSIVE
THE UX OF DATA - VISUALIZATION RESPONSIVE
 
Designing the Priority, Performance ist User Experience
Designing the Priority, Performance ist User ExperienceDesigning the Priority, Performance ist User Experience
Designing the Priority, Performance ist User Experience
 
Hassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UXHassliebe Onlineformulare, Enhance your Form for better UX
Hassliebe Onlineformulare, Enhance your Form for better UX
 
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UXDESIGN THE PRIORITY, PERFORMANCE 
AND UX
DESIGN THE PRIORITY, PERFORMANCE 
AND UX
 
The UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQueryThe UX of DATA: Responsive Datenvisualisierung mit jQuery
The UX of DATA: Responsive Datenvisualisierung mit jQuery
 
jQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und ResponsivejQuery: Accessibility, Mobile und Responsive
jQuery: Accessibility, Mobile und Responsive
 
Performance and UX
Performance and UXPerformance and UX
Performance and UX
 
Responsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and GuidelinesResponsive Navigation Patterns, UX and Guidelines
Responsive Navigation Patterns, UX and Guidelines
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive WebdesignThe Future is now! Flexbox und fancy Stuff im Responsive Webdesign
The Future is now! Flexbox und fancy Stuff im Responsive Webdesign
 
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
Responsive Navigation Patterns, UX und Guidelines (Webdeveloper Week 2015)
 
Online / Offline
Online / OfflineOnline / Offline
Online / Offline
 
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
Responsive Navigation Patterns, UX und Guidelines (Webinale 2015)
 
Responsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und GuidelinesResponsive Navigation Patterns, UX und Guidelines
Responsive Navigation Patterns, UX und Guidelines
 
Hightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign TestenHightway to Hell - Responsive Webdesign Testen
Hightway to Hell - Responsive Webdesign Testen
 
Responsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und GuidelinesResponsive Navigation Patterns - UX und Guidelines
Responsive Navigation Patterns - UX und Guidelines
 
Responsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or dieResponsive Workflow, Break the rules or die
Responsive Workflow, Break the rules or die
 
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
Responsive Webdesign: Neue Möglichkeiten und Freiheiten mit dem CSS3-Flexbox-...
 

Create User Centric UI-Animations