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

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

Mas isso não é UX?

Criando microinterações com JavaScript simplesFront

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

trabalha microinterações

Criando microinterações com JavaScript simplesFront

“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

“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

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

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

🔥🔥🔥🔥🔥🔥🔥

Criando microinterações com JavaScript simplesFront

❤

Criando microinterações com JavaScript simplesFront

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

by Nick Holmer

Criando microinterações com JavaScript simplesFront

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

by Dan Saffer

Criando microinterações com JavaScript simplesFront

Estrutura

Criando microinterações com JavaScript simplesFront

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

• Manual Triggers • System Triggers

Trigger

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Enviar

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Quando?Quem?

Por que?O que posso fazer?

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

• Como • Quando • Por que?

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Se estiver seguindo

Se estiver esperando aprovação

Se ainda não está seguindo

Criando microinterações com JavaScript simplesFront

Caso esteja em outra língua

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Caso contenha anexo, anexos…

Criando microinterações com JavaScript simplesFront

Feedback’s devem passar a mensagem presentes nas regras.

Feedback

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

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

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

mesmo processamento.

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

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

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

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

Mágica…

Criando microinterações com JavaScript simplesFront

Criando microinterações com JavaScript simplesFront

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

Criando microinterações com JavaScript simplesFront

Obrigado!luizstacio@gmail.com

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