Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Santhyago Gallão
UX Developer	
Samsung SIDIA	
Daniel Risi
UX Manager	
Samsung Latin America
UM CASO EXTREMO…
HTTP://WWW.LINGSCARS.COM/
‘Poluído’
‘Cansativo’
‘Ilegível’
‘Pra onde olho? Onde Clico?’
‘Over’
‘Flashy’
flASH:
99%
BAD
Jakob Nielsen, 2000
ANIMAÇÕES PODEM MELHORAR A
USABILIDADE DE UMA INTERFACE?!
UI UX	
≠
Eficiência	
Eficácia	
Satisfação
TÁ….
E COMO ANIMAÇÕES PODEM MELHORAR
A USABILIDADE DE UMA INTERFACE?
* http://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/
Albert Einstein	
‘TUDO DEVE SER FEITO O
MAIS SIMPLES POSSÍVEL,
MAS NÃO MAIS SIMPLES.’
ObjectAnimator (PropertyValuesHolder)
Scale e Alpha
ActivityOptions (Android L)
TimerTask
(TimerTask???)
alpha = ObjectAnimator
.ofFloat(backgroundFilter, "alpha", 0f, 0.5f);
alpha.setDuration(300);
alpha.addListener(new Animat...
PropertyValuesHolder scaleY, scaleX;
scaleX = PropertyValuesHolder.ofFloat("scaleX", 1, 0);
scaleY = PropertyValuesHolder....
ActivityOptions options =
ActivityOptions
.makeSceneTransitionAnimation(this,
searchButton, "search_button");
Bundle bundl...
<ImageView
...
android:viewName="search_button”
... />
private class SearchBoxAnimTimerTask extends TimerTask {
...
public SearchBoxAnimTimerTask() {
if (MainActivity.enterSearc...
...
public void run() {
animationHandler.post(() -> {
if (MainActivity.enterSearchBox) {
searchBoxParams.width =
(int) ((s...
Animando a UI: Entregue uma experiência, não apenas um aplicativo
Animando a UI: Entregue uma experiência, não apenas um aplicativo
Animando a UI: Entregue uma experiência, não apenas um aplicativo
Animando a UI: Entregue uma experiência, não apenas um aplicativo
Animando a UI: Entregue uma experiência, não apenas um aplicativo
Upcoming SlideShare
Loading in …5
×

Animando a UI: Entregue uma experiência, não apenas um aplicativo

631 views

Published on

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

Published in: Design
  • Be the first to comment

Animando a UI: Entregue uma experiência, não apenas um aplicativo

  1. 1. Santhyago Gallão UX Developer Samsung SIDIA Daniel Risi UX Manager Samsung Latin America
  2. 2. UM CASO EXTREMO… HTTP://WWW.LINGSCARS.COM/
  3. 3. ‘Poluído’ ‘Cansativo’ ‘Ilegível’ ‘Pra onde olho? Onde Clico?’ ‘Over’ ‘Flashy’
  4. 4. flASH: 99% BAD Jakob Nielsen, 2000
  5. 5. ANIMAÇÕES PODEM MELHORAR A USABILIDADE DE UMA INTERFACE?!
  6. 6. UI UX ≠
  7. 7. Eficiência Eficácia Satisfação
  8. 8. TÁ…. E COMO ANIMAÇÕES PODEM MELHORAR A USABILIDADE DE UMA INTERFACE?
  9. 9. * http://www.nngroup.com/articles/guidelines-for-multimedia-on-the-web/
  10. 10. Albert Einstein ‘TUDO DEVE SER FEITO O MAIS SIMPLES POSSÍVEL, MAS NÃO MAIS SIMPLES.’
  11. 11. ObjectAnimator (PropertyValuesHolder) Scale e Alpha ActivityOptions (Android L) TimerTask (TimerTask???)
  12. 12. alpha = ObjectAnimator .ofFloat(backgroundFilter, "alpha", 0f, 0.5f); alpha.setDuration(300); alpha.addListener(new AnimatorListener() { … }); alpha.start ();
  13. 13. 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 ();
  14. 14. ActivityOptions options = ActivityOptions .makeSceneTransitionAnimation(this, searchButton, "search_button"); Bundle bundle = options.toBundle();
  15. 15. <ImageView ... android:viewName="search_button” ... />
  16. 16. 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); } ...
  17. 17. ... 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 }}}); } ...

×