Tecnologia em Sistemas para Internet. Componente Curricular: Projeto de Navegação e Interação lições de Design de Interfaces

Transcrição

1 Tecnologia em Sistemas para Internet Componente Curricular: Projeto de Navegação e Interação lições de Design de Interfaces

2 Referências AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 3ª ed CAMARGO, Liriane Soares de Araújo de; VIDOTTI, Silvana Aparecida Borsetti Gregorio. Arquitetura da Informação: uma abordagem prática para o tratamento de conteúdo e interface em ambientes informacionais digitais. Rio de Janeiro: LTC, 2011.

3 Lição nº 01: Foco no Usuário Construa sites e interfaces para seus usuários e clientes, não para si próprio. Utilize ferramentas de Analytics para mapear o comportamento do usuário. Usuário logado? É claro que ele possui suas preferências, menus mais acessados, itens mais vistos, postagens mais comentadas, etc. Use essas informações para manter o foco sempre no usuário. Questionários e entrevistas também são válidos.

4 Sugestões de produtos relacionados Não é necessário login. Foco no usuário

5 Lição nº 02: Comunicação Instantânea A lógica da interação: Web 1.0 VS Web 2.0 Um portal corporativo deve fornecer comunicação instantânea (ou quase) ao seu cliente. Evitar burocracias, aplicativos desnecessários e procedimentos complexos; Monitore as redes sociais: Facebook, Twitter, Instagram e outros não podem ser meras vitrines. Utilize ferramentas de chat integradas ao portal.

6 Lição nº 03 Avaliação do Sucesso Analisar logs de servidores já não são mais suficientes, pois são análises quantitativas: Número de acessos; Datas e horas de acessos; Cookies; Região geográfica; Etc... Utilize ferramentas de Analytics: Quanto tempo o usuário ficou numa página? Qual é a Taxa de rejeição? Qual é a Taxa de conversão? Entrevistas

7

8 Lição nº 04 A primeira página A home page deve conter informações que interessam ao usuário. Evite publicações dirigidas aos funcionários e parceiros comerciais. Não coloque notícias inúteis, siglas e símbolos desconhecidos, alertas genéricos enfim, despreze todas as informações desnecessárias e inúteis para o usuário.

9 Landing Page: pense nisso! A home page não é e não pode ser o único ponto de acesso ou chegada ao seu site. Landing: aterrisagem página em que o usuário entra no seu site. Usando técnicas de SEO e arquitetura da informação, crie landing pages estratégicas para o seu negócio.

10

11

12 Lição nº 05: Modelos Mentais Modelos de negócios são complexos e o usuário não precisa (e não quer) saber disso. A organização das informações no site não pode ser um espelho do organograma (hierarquia) da empresa. Organize as informações de modo que façam sentido para o usuário, de acordo com as tarefas que ele vai ou precisa executar. Exemplos: Carrinho de compra Pagamentos Status de pedidos Fluxograma

13 Status do Pedido Pedido Realizado Aguardando Pagamento Em separação Pedido Recusado Enviado para a transportadora Entregue ao cliente

14 Mapa do site Casa e Jardim Página Inicial Automotivo Informática Som Notebooks Acessórios Impressoras Acessórios

15 Lição nº 6: Tempos de resposta Tempo de resposta para que o fluxo do pensamento humano permaneça ininterrupto: 1 segundo! (Blocos de 1 segundo) Tempo máximo para que o usuário permaneça concentrado em um diálogo: 10 segundos. Após isso o usuário se distrai com outras tarefas. Cuidado com: Animações incríveis Efeitos impactantes Uso inadequado de áudio e/ou vídeo Se a página inicial demora muito para abrir (devido a muitas tecnologias e efeitos que devem ser carregados) o usuário poderá se desmotivar.

16 Lição nº 7: Senso comum Cuidado com o senso comum Clientes do mundo físico são iguais aos clientes do mundo virtual: MENTIRA! Conheça seus usuários e tome suas decisões de design baseadas no que você aprendeu sobre eles. Usuários mobile são diferentes de usuários Web.

17 Lição nº 8: Internet VS Intranet Intranet: funcionários e executivos trocam experiências, compartilham informações estratégicas, realizam treinamento, enfim, realizam diversas atividades relacionadas diretamente ao negócio Extranet: conexão com fornecedores e colaboradores Internet: usuário final Focos diferentes, usuários diferentes e, finalmente, diferentes decisões de design.

18 IBM Connections

19 Lição nº 09: Estilo de redação Atenção para as técnicas de webwriting. Passar o máximo de informações com o mínimo de texto. Os textos, inclusive os links, devem fazer sentido para o usuário. Se os links atrapalham e/ou não fazem sentido para o usuário, o mesmo irá evadir-se da página. Correção ortográfica e gramatical. Semântica no texto e na estrutura (HTML).

20 Lição nº 10: Padrões estéticos Há diferenças entre o desenho impresso e desenho para Web. Certas práticas de design só fazem sentido em mídias impressas: Variedade de fontes; Alta resolução nas imagens Grandes qtdes de informações Etc... Layout bonito e pouca interação VS Layout pobre e muita interação: encontre o equilíbrio

21 Lição nº 11: Subsites Dividir para conquistar! Um site pode ser grande e, ao mesmo tempo, simples! Utilizar subsites para criar áreas específicas para cada tipo de usuário é uma boa sacada: Sites mais usáveis Fácil navegação Foco no usuário! Não apenas sites corporativos!

22 Lição nº 12: Tarefas As páginas precisam dar suporte ao usuário na execução de uma tarefa. Focar as tarefas do usuário é uma abordagem coerente, pois a maioria dos usuário estão no site para completar uma tarefa: Comprar um produto Baixar o manual de um produto Saber mais sobre um determinado serviço Comparar produtos Envolva o usuário no processo!

23 Lição nº 13: Equipes Diversos tipos de profissionais: Gerente de projetos Webdesigners Programadores SEO Redatores Especialistas em Marketing Etc, etc, etc... E, finalmente o... Usuário. Sim, você leu corretamente! O usuário deve fazer parte da equipe, pois o foco é ele, lembra!?

24 Lição nº 14: Usuários avançados Usuários avançados querem velocidade Usuários avançados entendem o mecanismo de palavras-chave A página inicial deve fornecer mecanismos de buscas Usuários avançados sabem usar atalhos, explore esse recurso!

25 Lição nº 15: Usuários iniciantes Usuários iniciantes possuem dificuldades para entender a web. Usabilidade e Intuição. Acessibilidade. Não faça um usuário iniciante pensar demais!

26 Para concluir... As 15 lições: Não são regras; Não são verdades absolutas; Visam promover o debate e a discussão sobre o design de interface Lembre-se sempre: foco no usuário!

27 Referências e Bibliografia AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 3ª ed CAMARGO, Liriane Soares de Araújo de; VIDOTTI, Silvana Aparecida Borsetti Gregorio. Arquitetura da Informação: uma abordagem prática para o tratamento de conteúdo e interface em ambientes informacionais digitais. Rio de Janeiro: LTC, SHNEIDERMAN, Ben. The Eight Golden Rules of Interface Design. Disponível em < Acesso em 20 jul