ui lab experience - criando microinterações com javascript
TRANSCRIPT
![Page 1: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/1.jpg)
Criando microinterações com JavaScript simples
Estácio
Front01 20
0816
![Page 2: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/2.jpg)
Sobre mimTécnico em eletrônicaDesenvolvedor há mais de 4 anosPrestei algumas consultoriasAtualmente sou atuo como full stack
Criando microinterações com JavaScript simplesFront
![Page 3: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/3.jpg)
TimelineIntrodução
Estrutura
Projeto
Engenharia
Conclusão
Criando microinterações com JavaScript simplesFront
![Page 4: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/4.jpg)
Criando microinterações com JavaScript simplesFront
![Page 5: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/5.jpg)
Criando microinterações com JavaScript simplesFront Criando microinterações com JavaScript simplesFront
![Page 6: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/6.jpg)
Mas isso não é UX?
Criando microinterações com JavaScript simplesFront
![Page 7: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/7.jpg)
Se você já trabalha a UX do seu produto, você provavelmente já
trabalha microinterações
Criando microinterações com JavaScript simplesFront
![Page 8: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/8.jpg)
“Se você se preocupa com a experiência do usuário,
você deve se preocupar com microinterações."
by Dan Saffer
Criando microinterações com JavaScript simplesFront
![Page 9: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/9.jpg)
“Cada vez que você muda uma configuração, sincroniza arquivos ou dispositivos, ajusta o alarme, faz login em um site, muda o status do seu comunicador instantâneo ou “curte”
alguma coisa, você está engajando com uma microinteração."
by Dan Saffer
Criando microinterações com JavaScript simplesFront
![Page 10: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/10.jpg)
Microinterações proporcionam momentos ao resolver tarefas únicas em um produto.
Criando microinterações com JavaScript simplesFront
![Page 11: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/11.jpg)
Microinterações proporcionam momentos ao resolver tarefas únicas em um produto.
Criando microinterações com JavaScript simplesFront
![Page 12: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/12.jpg)
🔥🔥🔥🔥🔥🔥🔥
Criando microinterações com JavaScript simplesFront
![Page 13: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/13.jpg)
❤
Criando microinterações com JavaScript simplesFront
![Page 14: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/14.jpg)
“Um produto é uma coleção de detalhes"
by Nick Holmer
Criando microinterações com JavaScript simplesFront
![Page 15: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/15.jpg)
“É a diferença entre um produto que você ama e um que você tolera”
by Dan Saffer
Criando microinterações com JavaScript simplesFront
![Page 16: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/16.jpg)
Estrutura
Criando microinterações com JavaScript simplesFront
![Page 17: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/17.jpg)
Trigger é o ponto onde se inicia uma ação.
• Manual Triggers • System Triggers
Trigger
Criando microinterações com JavaScript simplesFront
![Page 18: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/18.jpg)
Triggers manuais são disparadas pelo usuário, de forma consciente.
Criando microinterações com JavaScript simplesFront
![Page 19: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/19.jpg)
Triggers manuais devem ser fáceis de descobrir e de serem aprendidas.
Onde começa essa ação?
O que eu estou fazendo?
Criando microinterações com JavaScript simplesFront
![Page 20: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/20.jpg)
Criando microinterações com JavaScript simplesFront
![Page 21: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/21.jpg)
Enviar
Criando microinterações com JavaScript simplesFront
![Page 22: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/22.jpg)
Utilize animações para criar fluxos naturais para seu usuário.
Criando microinterações com JavaScript simplesFront
![Page 23: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/23.jpg)
Criando microinterações com JavaScript simplesFront
![Page 24: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/24.jpg)
Entregue informações antes mesmo da ação.
Criando microinterações com JavaScript simplesFront
![Page 25: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/25.jpg)
Criando microinterações com JavaScript simplesFront
![Page 26: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/26.jpg)
System triggers são disparadas sem a intervenção do usuário.
Criando microinterações com JavaScript simplesFront
![Page 27: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/27.jpg)
System triggers devem criar um contexto para engajar o usuário na
ação.
O que iniciou isso? Por que isso é importante para mim?
O que posso/devo fazer?
Criando microinterações com JavaScript simplesFront
![Page 28: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/28.jpg)
Criando microinterações com JavaScript simplesFront
![Page 29: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/29.jpg)
Quando?Quem?
Por que?O que posso fazer?
Criando microinterações com JavaScript simplesFront
![Page 30: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/30.jpg)
Criando microinterações com JavaScript simplesFront
![Page 31: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/31.jpg)
RulesUma rule define como ocorrerá o fluxo da interação.
• Como • Quando • Por que?
Criando microinterações com JavaScript simplesFront
![Page 32: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/32.jpg)
Criando microinterações com JavaScript simplesFront
![Page 33: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/33.jpg)
Se estiver seguindo
Se estiver esperando aprovação
Se ainda não está seguindo
Criando microinterações com JavaScript simplesFront
![Page 34: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/34.jpg)
Caso esteja em outra língua
Criando microinterações com JavaScript simplesFront
![Page 35: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/35.jpg)
Rules podem ajudar o usuário a não cometer erros.
Criando microinterações com JavaScript simplesFront
![Page 36: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/36.jpg)
Caso contenha anexo, anexos…
Criando microinterações com JavaScript simplesFront
![Page 37: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/37.jpg)
Feedback’s devem passar a mensagem presentes nas regras.
Feedback
• Visuais • Audíveis • Toque (Vibração do celular)
Criando microinterações com JavaScript simplesFront
![Page 38: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/38.jpg)
Criando microinterações com JavaScript simplesFront
![Page 39: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/39.jpg)
Criando microinterações com JavaScript simplesFront
![Page 40: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/40.jpg)
Criando microinterações com JavaScript simplesFront
![Page 41: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/41.jpg)
Criando microinterações com JavaScript simplesFront
![Page 42: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/42.jpg)
Criando microinterações com JavaScript simplesFront
![Page 43: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/43.jpg)
Loops criam um ciclo de vida para a interação. Essas podem ser curtas, longas ou até mesmo sem fim pré-determinado.
Loops
Criando microinterações com JavaScript simplesFront
![Page 44: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/44.jpg)
Loops devem levar em consideração fatores como recorrência e até
mesmo processamento.
Criando microinterações com JavaScript simplesFront
![Page 45: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/45.jpg)
Criando microinterações com JavaScript simplesFront
![Page 46: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/46.jpg)
Criando microinterações com JavaScript simplesFront
![Page 47: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/47.jpg)
ModeMode ou modelo criam estados contextualizados, dando a possibilidade de refinar a maneira como uma interação é executada.
Criando microinterações com JavaScript simplesFront
![Page 48: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/48.jpg)
Criando microinterações com JavaScript simplesFront
![Page 49: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/49.jpg)
Criando microinterações com JavaScript simplesFront
![Page 50: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/50.jpg)
ProjetandoPara poder criar microinterações incríveis é preciso conhecer todo o ecossistema que envolve seu produto.
• Recursos • Dados • Usuário • …
Criando microinterações com JavaScript simplesFront
![Page 51: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/51.jpg)
Criar uma tela de acesso a uma aplicação onde o usuário poderá acessar ou se cadastrar.
Brifing
Criando microinterações com JavaScript simplesFront
![Page 52: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/52.jpg)
Requisitos• Os dados necessários eram email e senha • Usuário deve poder continuar logado • O usuário deve ter um meio de pedir uma nova senha
Criando microinterações com JavaScript simplesFront
![Page 53: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/53.jpg)
Recursos• Api para cadastro e consulta
• /exists verifica se ja existe na base • /login retorna o token de acesso a aplicação • /singin cadastra um usuário retorno o token do mesmo.
• EveryGreen Browsers • Armazenamento local (localStorage) • Animações em CSS3 e 4 • Requests via XHR • Markup em HTML5
Criando microinterações com JavaScript simplesFront
![Page 54: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/54.jpg)
Mágica…
Criando microinterações com JavaScript simplesFront
![Page 55: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/55.jpg)
Criando microinterações com JavaScript simplesFront
Sem Mágica…
![Page 56: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/56.jpg)
“Se as microinterações forem pobres as funções principais não poderão ser bem executadas. E isso causa
frustração.”by Dan Saffer
Criando microinterações com JavaScript simplesFront
![Page 57: UI Lab Experience - Criando microinterações com JavaScript](https://reader034.vdocuments.mx/reader034/viewer/2022051705/58a9aeb61a28ab9c758b5ec9/html5/thumbnails/57.jpg)
Outras formas de contato:
! fb.com/luizstacio
" twitter.com/luizstacio
# br.linkedin.com/in/luizstacio
$ www.luizstacio.com.br
Criando microinterações com JavaScript simplesFront
01 200816
www.uilab.com.brfb.com/uilabschool