Parte do material usado na palestra no The Developers Conference de 2014, edição São Paulo, na trilha Mobile. Mostramos alguns conceitos de quando uma animação pode ser utilizada de forma a engajar o usuário e aumentar a sensação de continuidade. Autores: Daniel Risi e Santhyago Gallão Fonte: https://github.com/santhyago/animation_floating_menu

1. Santhyago Gallão
UX Developer
Samsung SIDIA
Daniel Risi
UX Manager
Samsung Latin America

2. UM CASO EXTREMO…
HTTP://WWW.LINGSCARS.COM/

3. ‘Poluído’
‘Cansativo’
‘Ilegível’
‘Pra onde olho? Onde Clico?’
‘Over’
‘Flashy’

4. flASH:
99%
BAD
Jakob Nielsen, 2000

5. ANIMAÇÕES PODEM MELHORAR A
USABILIDADE DE UMA INTERFACE?!

6. UI UX
≠

7. Eficiência
Eficácia
Satisfação

8. TÁ….
E COMO ANIMAÇÕES PODEM MELHORAR
A USABILIDADE DE UMA INTERFACE?

9. * http://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/

10. Albert Einstein
‘TUDO DEVE SER FEITO O
MAIS SIMPLES POSSÍVEL,
MAS NÃO MAIS SIMPLES.’

15. ObjectAnimator (PropertyValuesHolder)
Scale e Alpha
ActivityOptions (Android L)
TimerTask
(TimerTask???)

16. alpha = ObjectAnimator
.ofFloat(backgroundFilter, "alpha", 0f, 0.5f);
alpha.setDuration(300);
alpha.addListener(new AnimatorListener() { … });
alpha.start ();

17. PropertyValuesHolder scaleY, scaleX;
scaleX = PropertyValuesHolder.ofFloat("scaleX", 1, 0);
scaleY = PropertyValuesHolder.ofFloat("scaleY", 1, 0);
ObjectAnimator scale = ObjectAnimator
.ofPropertyValuesHolder(plusSign, scaleX, scaleY);
scale.setDuration(180);
scale.addListener(new AnimatorListener() { ... });
scale.start ();

18. ActivityOptions options =
ActivityOptions
.makeSceneTransitionAnimation(this,
searchButton, "search_button");
Bundle bundle = options.toBundle();

19. <ImageView
...
android:viewName="search_button”
... />

20. private class SearchBoxAnimTimerTask extends TimerTask {
...
public SearchBoxAnimTimerTask() {
if (MainActivity.enterSearchBox) {
searchBoxW = searchBoxWidth; searchBoxH = searchBoxHeight;
searchBoxParams.height = 10; searchBoxParams.width = 10;
} else {
searchBoxW = 10; searchBoxH = 10;
searchBoxParams.height = searchBoxHeight;
searchBoxParams.width = searchBoxWidth;
}
mWindowManager. updateViewLayout(searchBox, searchBoxParams);
searchBox.setVisibility(View.VISIBLE);
}
...

21. ...
public void run() {
animationHandler.post(() -> {
if (MainActivity.enterSearchBox) {
searchBoxParams.width =
(int) ((searchBoxParams.width - searchBoxW) * 2 / 3 + searchBoxW);
mWindowManager.updateViewLayout(searchBox, searchBoxParams);
if (Math.abs(searchBoxParams.width - searchBoxW) <= 2) {
searchBoxParams.height = (int)
((searchBoxParams.height - searchBoxH) * 2 / 3 + searchBoxH);
mWindowManager.updateViewLayout(searchBox, searchBoxParams);
if (Math.abs(searchBoxParams.height - searchBoxH) <= 2) {
SearchBoxAnimTimerTask.this.cancel();
mSearchBoxTimer.cancel();
enterSearchButton();
}
}
} else { //Faz o contrário
}}});
}
...