UI Lab Experience - Criando microinterações com JavaScript

Criando microinterações com JavaScript simples

Estácio

Front01 20

0816

Sobre mimTécnico em eletrônicaDesenvolvedor há mais de 4 anosPrestei algumas consultoriasAtualmente sou atuo como full stack

Criando microinterações com JavaScript simplesFront

TimelineIntrodução

Estrutura

Projeto

Engenharia

Conclusão



Criando microinterações com JavaScript simplesFront Criando microinterações com JavaScript simplesFront

Mas isso não é UX?


Se você já trabalha a UX do seu produto, você provavelmente já

trabalha microinterações


“Se você se preocupa com a experiência do usuário,

você deve se preocupar com microinterações."

by Dan Saffer


“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


Microinterações proporcionam momentos ao resolver tarefas únicas em um produto.


Microinterações proporcionam momentos ao resolver tarefas únicas em um produto.


🔥🔥🔥🔥🔥🔥🔥


❤


“Um produto é uma coleção de detalhes"

by Nick Holmer


“É a diferença entre um produto que você ama e um que você tolera”

by Dan Saffer


Estrutura


Trigger é o ponto onde se inicia uma ação.

• Manual Triggers • System Triggers

Trigger


Triggers manuais são disparadas pelo usuário, de forma consciente.


Triggers manuais devem ser fáceis de descobrir e de serem aprendidas.

Onde começa essa ação?

O que eu estou fazendo?



Enviar


Utilize animações para criar fluxos naturais para seu usuário.



Entregue informações antes mesmo da ação.



System triggers são disparadas sem a intervenção do usuário.


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?



Quando?Quem?

Por que?O que posso fazer?



RulesUma rule define como ocorrerá o fluxo da interação.

• Como • Quando • Por que?



Se estiver seguindo

Se estiver esperando aprovação

Se ainda não está seguindo


Caso esteja em outra língua


Rules podem ajudar o usuário a não cometer erros.


Caso contenha anexo, anexos…


Feedback’s devem passar a mensagem presentes nas regras.

Feedback

• Visuais • Audíveis • Toque (Vibração do celular)







Loops criam um ciclo de vida para a interação. Essas podem ser curtas, longas ou até mesmo sem fim pré-determinado.

Loops


Loops devem levar em consideração fatores como recorrência e até

mesmo processamento.




ModeMode ou modelo criam estados contextualizados, dando a possibilidade de refinar a maneira como uma interação é executada.




ProjetandoPara poder criar microinterações incríveis é preciso conhecer todo o ecossistema que envolve seu produto.

• Recursos • Dados • Usuário • …


Criar uma tela de acesso a uma aplicação onde o usuário poderá acessar ou se cadastrar.

Brifing


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


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


Mágica…



Sem Mágica…

“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


[email protected]

Outras formas de contato:

! fb.com/luizstacio

" twitter.com/luizstacio

# br.linkedin.com/in/luizstacio

$ www.luizstacio.com.br


01 200816

www.uilab.com.brfb.com/uilabschool

Software

UI Lab Experience - Criando microinterações com JavaScript