UX UI Design com base nas heurísticas de Nielsen
- 1. UX / UI Profª Aline Okumura
- 3. 4 U’s • User Experience = Experiência do usuário • Como a pessoa se sente sobre uma determinada experiência? • Pessoas, Sentimentos e Interações • Exemplo comprar um computador • Usuários são pessoas. • UX Design: Design de Experiência do Usuário • Área multidisciplinar que envolve: Interação, Psicologia, Design Visual e etc... • Principal objetivo como UX Designer é? • Além do design bonitinho é um trabalho de pesquisa profunda com o usuário e sua experiência.
- 4. Metodologias • Protótipos (baixa, média e alta fidelidade) • Design visual (Motion Graphics - às vezes) • Fluxos de uso • Base de dados de pesquisa • Ferramentas: • Personas • Mapa do site • Wireframe • Flows
- 5. User Interface • Meio de interação com o usuário HUMANO OBJETIVO INTERFACE
- 6. Heurísticas de Jacob Nilsen 1. Visibilidade de qual estado estamos no sistema 2. Correspondência entre o sistema e o mundo real 3. Liberdade de controle fácil pro usuário 4. Consistência e padrões 5. Prevenções de erros 6. Reconhecimento em vez de memorização 7. Flexibilidade e eficiência de uso 8. Estética e design minimalista 9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros 10. Ajuda e documentação https://www.nngroup.com/articles/ten-usability-heuristics/
- 7. 1. Visibilidade de status de sistema • O site disponibiliza para o usuário informações sobre o carregamento do vídeo, como a porcentagem, previsão de conclusão e o que o usuário deve fazer.
- 8. 2. Correspondência entre o sistema e o mundo real Toda comunicação do produto deve falar a linguagem do usuário e não ser orientada ao sistema, ou seja, o sistema não deve usar linguagem técnica ou termos que são de conhecimento específico (exceto quando o sistema trata-se de um sistema direcionado à área técnica). Todas as nomenclaturas devem ser contextualizadas e coerente com o modelo mental do usuário. Isso também é aplicado a ícones e imagens ilustrativas.
- 9. 3. Liberdade de controle fácil pro usuário O sistema nunca deve impor algo ao usuário, também nunca deve tomar a decisão por ele. O ideal é sugerir e não induzir. Dar liberdade ao usuário das decisões e ações que podem ser tomadas. Facilitar as “saídas de emergência”, permitir desfazer ou refazer alguma ação no sistema e retornar ao ponto anterior quando estiver perdido ou em situações inesperadas. Exemplo: Breadcrumb
- 10. 4. Consistência e padrões O sistema deve manter a consistência visual e de linguagem. Manter padrões de interação em diferentes contextos. Falar a mesma língua o tempo todo, e nunca identificar uma mesma ação com ícones ou labels diferentes. Tratar coisas similares da mesma maneira, facilitando a identificação do usuário e ensinando-o a usar o sistema.
- 11. 5. Prevenções de erros Ações drásticas como deletar arquivos, devem ser bem sinalizadas. Além disso, ter sempre uma confirmação ou possibilidade de desfazer o que foi feito. Nas palavras do próprio Nielsen “Ainda melhor que uma boa mensagem de erro é um design cuidadoso que possa prevenir esses erros”.
- 12. 6. Reconhecimento em vez de memorização O usuário não é obrigado a reaprender o serviço toda vez que o acessa. O sistema deve evitar acionar a memória do usuário o tempo inteiro.
- 13. 7. Flexibilidade e eficiência de uso O sistema pode ser ágil para usuários a vançados e ser fácil de utilizar pelos usuários leigos. Isso é o que se espera de um sistema flexível e eficiente. O uso de atalhos de teclados, preenchimento automático a partir de dados anteriores e máscaras de campos são exemplos de itens que aprimoram a eficiência do sistema com flexibilidade.
- 14. 8. Estética e design minimalista Dialogar de forma simples e direta, com um layout mais limpo, com diálogos naturais, de fácil entendimento e que apareçam em momentos necessários.
- 15. 9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros Dialogar de forma simples e direta, com um layout mais limpo, com diálogos naturais, de fácil entendimento e que apareçam em momentos necessários.
- 16. 10. Ajuda e documentação Uma interface intuitiva e clara evita a solicitação de ajuda. Mesmo assim o sistema deve manter ao alcance do usuário, itens de auxílio para determinadas ações. Além disso, devemos manter ajudas fixas que podem ser acessadas à qualquer momento em caso de dúvidas.
- 23. Baby Boomers 1940 – 1960 Idade hoje: 64 e 84 anos Principais Características: • São leais e comprometidos; • São competitivos, contestadores e focados em resultado. • Aprenderam a lidar com avanços tecnológicos, mas de uma forma mais gerencial do que aplicada à mudança de hábitos. Mercado de Trabalho Um emprego para vida toda. Valorizam a ascensão profissional. Device Desktop Rede Social Preferida Facebook e e-mail.
- 24. Geração X 1961 – 1980 Idade hoje: 44 e 63 anos Principais Características: • São independentes e empreendedores • Valorizam a estabilidade • Um pouco resistentes a mudanças • Geração equilibrada, que não se precipita na tomada de decisões • Não são nativos digitais mas são experientes e dedicados. Mercado de Trabalho Buscam a ascensão profissional Device Desktop e Laptops Rede Social Preferida Facebook, Linkedin e e-mail.
- 25. Geração Y ou Millenials 1980 – 1995 Idade hoje: 29 e 43 anos Principais Características: • São autônomos, têm múltiplas carreiras e são conhecidos pelo potencial inovador. • Acreditam no trabalho em equipe, são informais e imediatistas. • Têm mais facilidade para assumir riscos, mas buscam recompensas tangíveis. • Alta capacidade de fazer várias coisas ao mesmo tempo, sem perder o foco. • Cresceram com os recursos tecnológicos à disposição. • Estão sempre conectados, mas não abrem mão da comunicação ao vivo. • Grande preparo intelectual e acadêmico. Mercado de Trabalho Valorizam a empresa, mas buscam oportunidades. Tratados de igual para igual, independentemente do nível hierárquico. Remuneração competitiva, atrelada a metas e objetivos muito claros. Device Dispositivos Mobile e Laptops Rede Social Preferida Facebook, Instagram e Twitter.
- 26. Geração Z "zoomers"ou Centennials 1996- 2010 Idade hoje: 14 e 28 anos Principais Características: • São realistas, competitivos e independentes. • Valorizam a consciência coletiva. • Sentem a necessidade de expor suas opiniões • Arriscam mas valorizam a saúde mental • Valorizam ações criativas • Tecnologia inata por isso mais ansiosos. • São considerados Mobile e Social Media natives e transformam a vida amorosa em um jogo de estratégia. • Preocupam-se com o ecosistema, com a sustentabilidade e com os recursos Mercado de Trabalho São desapegados das fronteiras geográficas. A tomada de decisão acontece de forma ágil. Esperam rápida ascensão na carreira, mas não buscam cargos de liderança. Device Dispositivos Mobile Rede Social Preferida TikTok e WhatsApp.
- 27. Geração Alpha 2010-2024 Idade hoje: até 13 anos Principais Características: • Espontaneidade e autonomia. • Poder de adaptação muito acelerado • Interação com a tecnologia desde o nascimento. • Movidos pelos estímulos sensoriais. Mercado de Trabalho ? Device Dispositivos Mobile, wearables, interações tangíveis e multiplas. Rede Social Preferida Devem herdar os comportamentos da Geração Z, desenvolver tecnologias de realidade aumentada em 3 e 4D.
- 28. SXSW
- 33. O que é?
- 34. Quais são os pontos de contato para um visitante se tornar um lead?
- 35. Como é a implementação do Inbound Marketing? Fase 1: Setup • Auditoria e implementação de SEO (Otimização do site para mecanismos de busca) + Setup de ferramentas de análise e Ads; • Identificação do Target / Persona / Público alvo das ações; • Planejamento de conteúdo, calendário editorial, roteiro de vídeos e isca digital. Fase 2: Tráfego • Produção de conteúdo: textos, vídeos, posts, anúncios, iscas, etc; • Atração, geração de tráfego e qualificação dos leads. Esta fase requer investimento em mídia Google Adwords, Facebook Ads e SMTP/e-mail; • Segmentação, engajamento e conversão; • Crescimento de lista de e-mail e lista de remarketing.
- 36. Como é a implementação do Inbound Marketing? Fase 3: Relatório, análise e ajuste • Produção de relatórios; • Análise dos conteúdos mais e menos acessados; • Retorno à Fase 2 com os indicativos apurados na Fase 3. Dicas • As pessoas se sentem mais seguras para comprar coisas de quem elas conhecem; • Ter um canal no YouTube pode criar esta sensação de confiança, autoridade e conexão com quem está do outro lado da tela; • As pessoas estão lendo menos e assistindo cada vez mais vídeos; • SEO – Sites e blogs com vídeos do YouTube são 3X melhor rankeados no Google; • 85 MILHÕES de brasileiros assistem a vídeos online. Destes, 82 MILHÕES assistem pelo YouTube; • Vídeos transmitem sua mensagem de forma mais humana, orgânica e memorável;
- 37. O que precisa entregar? • Portifólio Pessoal • Arquivo em .pdf: • Capa • Breve descritivo do projeto, logo e identidade visual. • Mapa do Site • Wireframe • Cartela de Cores • Tipografias (Títulos e textos) • Estilo de Imagens • Modelo do Bootstrap escolhido
- 38. O que precisa entregar? • Site e/ou App (funcional em HTML / Bootstrap ou XD / Protopie) • Arquivo em .pdf: (aline.okumura@fmu.br) • Capa • Breve descritivo do projeto, logo e identidade visual. • Personas (2 no mínimo) • Jornada do Usuário (infográfico) • Mapa de transmídia (on e off-line e seus contatos) • Mapa do Site / App • Wireframe Site / App • Print da tela do Site / App • Mockup do Site / Redes Sociais / Mídia impressa / App • Nome dos componentes do grupo e divisão de tarefas.
- 39. Cronograma 6º semestre Design Gráfico Avaliação Continuada Apresentação de Seminário - 1,5 – Datas 2,9,16,23/09/2019 Site Pessoal (Portifólio) – 4,0 – Data 30/09/2019 Prova Integrada – 3,0 APS – Curso on-line HTML/CSS - 1,5 – 11/11 Avaliação Regimental Projeto Integrado (UX e UI) - 5,0 - 18/11 Livro - 1,0 - KRUG, Steve. Não me faça pensar.2ºed. Rio de Janeiro: Alta Books, 2006. - 11/11 Prova Prática – 2,0 – 2/12/2019 Prova Teórica – 2,0 – 2/12/2019