Tecnologia em Sistemas para Internet

Componente Curricular: Projeto de Navegação e Interação

03 – 15 lições de Design de Interfaces

Referências

AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 3ª ed. 2012.

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.

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.

Foco no usuário

Sugestões de produtos relacionadosNão é necessário login.

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.

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

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.

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.

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

Pedido Realizado

Aguardando Pagamento

Status do Pedido

Em separação

Enviado para a transportadora

Entregue ao cliente

Pedido Recusado

Mapa do site

Página Inicial

Casa e Jardim

Automotivo

Som

Acessórios

Informática

Notebooks

Impressoras

Acessórios

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.

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.

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.

IBM Connections

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).

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

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!

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!

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!?

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!

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!

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!

Referências e Bibliografia

AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 3ª ed. 2012.

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.

SHNEIDERMAN, Ben. The Eight Golden Rules of Interface Design. Disponível em <https://www.cs.umd.edu/users/ben/goldenrules.html>. Acesso em 20 jul. 2015.