O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

UX Design para Desenvolvedores

143 visualizações

Publicada em

Palestra realizada no Rio Sul Valley Dev Summit - Conferência de Desenvolvimento no Sul Fluminense, em Volta Redonda, em novembro de 2017.

Publicada em: Design
  • Seja o primeiro a comentar

UX Design para Desenvolvedores

  1. 1. UX DESIGN PARA DESENVOLVEDORES RIAN DUTRA
  2. 2. EXPERIÊNCIA +10 de experiência Sócio fundador da Rian Design, na qual desenvolveu sites, aplicativos e projetos gráficos para clientes como Udacity Brasil, Museu Imperial de Petrópolis, Instituto Ronald McDonald, SOS Mata Atlântica, Ephere, Sergio Mallandro e Tom Cavalcante. FORMAÇÃO ‣ Mestrado em Ciência da Computação (UFJF) ‣ Pós-graduação em Gestão, Empreendedorismo e Marketing (PUCRS) ‣ Pós-graduação em Animação 3D (Instituto Infnet) ‣ Graduação em Design Gráfico (Instituto Infnet) ‣ Graduação em Análise e Desenvolvimento de Sistemas (UNESA)
  3. 3. O QUE É UX DESIGN
  4. 4. O QUE É UX DESIGN DESIGN DE EXPERIÊNCIA DO USUÁRIO ▸ UX ≠ UI ▸ UX diz respeito à experiência do usuário ao usar um produto/serviço, em todas as suas etapas de contato ▸ UX não necessariamente tem a ver com software ▸ Experiência do usuário com o atendimento do banco ▸ Experiência do usuário com um sachê de catchup ▸ Experiência do usuário com uma máquina de estacionamento rotativo
  5. 5. O QUE É UX DESIGN UX
  6. 6. 6 MAIORES ERROS DE UX DESIGN
  7. 7. 6 MAIORES ERROS DE UX DESIGN ERRO 1 JOGAR DADOS NA TELA ▸ Fazer o que é fácil para nós, e não o que é melhor para o usuário ▸ Mostrar dados crus em vez de informações refinadas ▸ O usuário tem de se esforçar para interpretar os dados e transformá-los em algo prático e aplicável ▸ Às vezes, o que pode ser fácil para os desenvolvedores enxergarem, pode não ser para o usuário
  8. 8. 6 MAIORES ERROS DE UX DESIGN ERRO 2 EXPOR TECNOLOGIA AO USUÁRIO ▸ Os desenvolvedores passam horas diante da tecnologia e é natural que esqueçam que o usuário não entende termos técnicos ou jargões que são naturais para os devs ▸ Mas expor o usuário a termos técnicos pode causar confusão e fricção cognitiva, enfraquecendo a UX. ▸ Deve-se utilizar linguagem mais humanizada. ▸ O usuário não se importa com a tecnologia. Ele quer apenas resolver seu problema
  9. 9. 6 MAIORES ERROS DE UX DESIGN ERRO 3 USER INTERFACE (UI) BAGUNÇADA ▸ A velha desculpa de “Não sou bom em UI” e acabar deixando a UI bagunçada ▸ UI bagunçada é a forma mais rápida de fricção cognitiva que destrói a experiência do usuário ▸ Desenvolvedores não são obrigados a serem ótimos UI Designers, mas não exagere nessa desculpa ▸ No mínimo, mantenha a UI limpa e organizada
  10. 10. 6 MAIORES ERROS DE UX DESIGN ERRO 4 SER INCONSISTENTE ▸ Alterar a posição de botões, menus e outros elementos ao longo da aplicação torna a interface inconsistente ▸ O botão “Salvar" deve ser sempre “Salvar” ▸ O menu lateral deve ser sempre lateral ▸ Mantenha os botões e menus nos mesmos lugares, os mesmos rótulos, os mesmos ícones, fontes e estilos
  11. 11. 6 MAIORES ERROS DE UX DESIGN ERRO 5 CODIFICAR PARA O “USUÁRIO EXPERT” ▸ Evitar o trabalho pesado, de fazer algo fácil de ser usado, com a desculpa de que está codificando para “Usuário Expert” ▸ Pensar que o usuário tem conhecimentos técnicos e entende a tecnologia, é um grande erro ▸ Mesmo que o usuário tenha mais conhecimento sobre tecnologia, o trabalho do desenvolvedor é criar algo que funcione, tanto em termos técnicos quanto em relação à facilidade de uso ▸ No dia a dia, o usuário não deve perder tempo usando a aplicação. Ela deve o ajudar a resolver os problemas de forma mais rápida e fácil
  12. 12. 6 MAIORES ERROS DE UX DESIGN ▸ “O usuário pode querer fazer isso ou precisar daquilo” é o mesmo que brincar de adivinha ▸ Às vezes, passam horas codificando para problemas que não existem, simplesmente porque querem ou gostam de programar algo específico. Certo, pode ser divertido :) ▸ É importante focar no problema do usuário ▸ Entender quem é o usuário e o que ele precisa pode reduzir a complexidade do código e construir a coisa certa de primeira. Caso contrário, pode ser entregue algo mais complexo do que os usuários precisam, destruindo a experiência do usuário ERRO 6 SOLUCIONAR PROBLEMAS NÃO EXISTENTES
  13. 13. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOSOU, 10 HEURÍSTICAS DE NIELSEN
  14. 14. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Mantenha o usuário sempre informado com o que ele está fazendo, informando o retorno de suas ações ▸ Ex: barras de progresso, remover item da interface ao exclui-lo dos registros, cor de um botão indicando que aquela ação foi executada PRÁTICA 1 MOSTRAR O QUE ESTÁ ACONTECENDO
  15. 15. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN PRÁTICA 2 FALAR A LINGUAGEM DO USUÁRIO ▸ Fale a língua do usuário de forma que seja entendida e que pareça familiar. Evitar termos técnicos ▸ Metáforas com uso de ícones são excelentes para tornar a interface familiar ▸ Ex: barra de ferramentas do Photoshop faz bom uso de ícones
  16. 16. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ O usuário deve conseguir controlar a navegação, poder abortar uma tarefa ou desfazer uma operação ▸ Usuários às vezes escolhem funções por engano e precisam conseguir sair facilmente, podendo desfazer ou refazer a interação ▸ Ex: seguir e deixar de seguir no Instagram, excluir postagem no Wordpress, bloquear amigos no Facebook, remover do carrinho PRÁTICA 3 CONTROLE E LIBERDADE
  17. 17. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Mantenha a consistência e padrão visual (texto, cor, desenho do elemento, som etc) ▸ Ex 1: botões de fechar/max/minimizar das janelas do Windows, caixa de entrada de mensagens do Facebook, barra de pesquisa dos navegadores ▸ Ex 2: no Windows 8 foi removido o menu “Iniciar”, que existia desde o Win95. Gerou toneladas de reclamações e usuários insatisfeitos. PRÁTICA 4 CONSISTÊNCIA E PADRÕES Logo na esquerda. Busca no centro. Login na direita.
  18. 18. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Crie interface que faça o usuário evitar erros ▸ Avise o usuário quando algum erro pode acontecer ▸ Ex: avise qual tipo de arquivo é permitido para upload, alerta “Tem certeza de que deseja excluir isto?”, perguntar ao usuário se deseja enviar email sem anexo (no Gmail) PRÁTICA 5 PREVENÇÃO DE ERROS Para o usuário que não faz compras há muito tempo na Americanas, o site pergunta se o endereço ainda é aquele cadastrado.
  19. 19. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ O usuário não tem obrigação de decorar qual foi o caminho que ele fez pra chegar até a página ▸ Eles devem realizar tarefas já executadas antes, sem dificuldade ▸ Ex: breadcrumb em sites, fontes usadas recentemente no Word são mostradas no topo da lista, últimos efeitos usados no Photoshop, também. Últimas pesquisas feitas no Facebook PRÁTICA 6 MINIMIZAR A SOBRECARGA DE MEMÓRIA
  20. 20. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Deve ser fácil para inexperientes, mas também deve permitir os experientes personalizar ações conforme de costume, facilitando sua usabilidade ▸ Deve se adaptar às necessidades do usuário ▸ Ex: atalhos no Photoshop (ou outros programas), busca rápida no Mac PRÁTICA 7 FLEXIBILIDADE E EFICIÊNCIA DE USO
  21. 21. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Apresente a informação que o usuário precisa no momento, nada mais! ▸ Simples e direto ao ponto PRÁTICA 8 DIÁLOGO SIMPLES
  22. 22. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ Devem ajudar o usuário a entender o que houve ▸ Linguagem objetiva e sem códigos/termos técnicos ▸ Ex: Firefox avisa que houver algum problema ao acessar o site, por falta de internet ou site fora do ar ▸ Ex (ruim): telas azuis do Windows. Motivos pode ser: placa-mãe, memória, vídeo, temperatura, software e mil outros PRÁTICA 9 MENSAGENS DE ERRO CLARAS
  23. 23. 10 PRÁTICAS PARA EVITAR ERROS BÁSICOS EM UX DESIGN ▸ O ideal é que seja tão fácil que não precise de documentação ▸ A ajuda deve ser acessível ▸ Ex: centrais de ajuda de sites, documentação do Word e Excel PRÁTICA 10 AJUDA E DOCUMENTAÇÃO
  24. 24. www.rian.design www.designr.com.br

×