Design e Usabilidade na Web

Marcelo Vianna Design e Usabilidade na Web

Design e Usabilidade na Web Projetando interfaces que funcionam

Marcelo Vianna


O que vamos ver?

•  Conceitos

•  Metas da Usabilidade

•  Principais Técnicas e Metodologias

•  Arquitetura de Informação

•  Design de Interface

•  Princípios Aplicados à Web

•  Boas Práticas para um Design Efetivo na Web

•  Perguntas


Conceitos


Conceitos

“A capacidade de um sistema interativo oferecer a um usuário, em um determinado contexto de operação, a realização de tarefas de maneira eficaz, eficiente e agradável.”

O que é Usabilidade?

É a capacidade em termos funcionais humanos de um sistema ser usado facilmente e com eficiência pelo usuário.

Shackel (1992)

Usabilidade está diretamente ligada ao diálogo na interface. É a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema

Scapin (1993)

Outras definições


Conceitos

É a facilidade de utilização, quer seja de uma página Web, um software ou qualquer outro sistema que possua interface de interação com o usuário.

A usabilidade de interação refere-se à qualidade ou capacidade de um sistema ou software de ser compreendido, aprendido, utilizado e de ser atrativo ao usuário, em condições específicas de utilização.

E o que é Usabilidade de Interação?


Ergonomia

Conceitos

Ergonomia Identifica fatores humanos referentes à eficiência de utilização de sistemas por parte dos usuários

IHC Interação Humano-computador é uma área de pesquisa dedicada a estudar fenômenos de comunicação entre pessoas e sistemas computacionais

Usabilidade

IHC


Conceitos

Por quê a Usabilidade na Web é tão importante?

•  Se um site for difícil de usar, o usuário sai.

•  Se a homepage não for clara o suficiente para mostrar o que a empresa oferece e o que é possível fazer, o usuário também sai.

•  Se o usuário se perder, ele sai.

•  Se demorar para carregar, ele definitivamente sai.


Metas da Usabilidade


•  O usuário tem que conseguir usar •  O usuário tem que querer voltar a usar




1.  Facilidade de aprendizagem O usuário consegue rapidamente explorar o sistema e realizar suas tarefas

2.  Efetividade Aumento de produtividade em função da curva de aprendizado

3.  Memorização Os usuários precisam memorizar as suas tarefas sem sobrecarregar suas interações

4.  Flexibilidade O sistema e a interface devem ser flexíveis aos erros dos usuários

5.  Eficiência Menos trabalho, mais resultado

6.  Satisfação Conforto, segurança e felicidade subjetiva



É o número de vezes em que ele é completado, dividido pelo número de vezes em que é procurado. O sucesso depende, entre outras coisas, de o usuário conseguir:

•  Localizar o serviço que deseja

•  Reconhecer o serviço como necessário

•  Reconhecer a informação necessária para realizá-lo

•  Efetuar sem erros a transação

•  Obter o resultado desejado

Índice de Sucesso do Serviço


Principais Técnicas e Metodologias


•  Análise Heurística

•  Benchmark

•  Questionário Online

•  Card Sorting

•  Monitoramento Estratégico

•  Workshop de Usabilidade

•  Testes de Usabilidade

•  Análise Contextual

•  Avaliação de Acessibilidade

Principais Técnicas e Metodologias


Benefícios Mensuráveis da Usabilidade


Sites mais usáveis, resultados mensuráveis

São muitos os benefícios que o emprego de boas práticas da usabilidade pode proporcionar a um projetos na Web

Quantificar esses resultados, permite uma clara percepção do seu impacto sobre o sistema de interação

•  Menor custo de desenvolvimento

•  Menor custo de manutenção

•  Aumento de vendas

•  Retenção de consumidores

•  Aumento na taxa de sucesso (menos abandono)

•  Aumento na eficácia

•  Maior eficiência (mais tarefas em menos tempo)

•  Menor custo de treinamento


Arquitetura de Informação



Arquitetura de informação não se trata apenas de mapas ou diagramas, mas de Comunicação

O que é?

Organizar a informação de um ambiente de forma que seus usuários encontrem com facilidade a informação que procuram

Para que serve?

Arquiteto de Informação

Quem é o responsável?



Em geral um arquiteto de informação está envolvido com as seguintes etapas:

1. Pesquisa com o usuário O que as pessoas precisam saber e encontrar em um website?

2. Definição de conteúdo e funcionalidades Textos, imagens, buscas, menus, botões, etc.

3. Desenvolvimento e organização de esquemas Como o site será dividido e organizado? Como o usuário navegará pelo site?

4. Desenvolvimento de interface Integração com o designer gráfico ou designer de interfaces.

O que o AI faz?



O mais típico deliverable do arquiteto de informação é o Mapa de Arquitetura. Nele são definidos a estrutura e organização dos grupos de informações do site, a fim de suprir as necessidades dos usuários e os objetivos do negócio

O que ele entrega?

•  Mapas de AI, Diagramas de Fluxo e Story Boards

•  Inventário de Conteúdo

•  Lista de funcionalidades

•  Lista de keywords (palavras-chave)

•  Lista de paths (ou fluxos)

•  Checklist de padrões

Os deliverables mais comuns são:


Design de Interface


Design de Interface

É o planejamento físico e organizacional dos elementos de interface com o usuário

O que é?

Desenvolver graficamente a representação da diagramação e organização espacial dos componentes e elementos de interface

Para que serve?

Designer de Interfaces

Quem é o responsável?


Design de Interface

•  Wireframes especificados, incluindo mensagens de erro, mouse overs, animações, respostas de sistema e até comportamentos temporários.

•  Layouts com todas as definições gráficas e visuais de todos os elementos de interface, incluindo cores, tipografias, botões, menus, cabeçalhos, rodapés, banners, etc.

•  Modelos básicos em HTML (templates) e

imagens tratadas e otimizadas para serem aplicados nas interfaces do site ou sistema

•  Manuais e guias de aplicação de padrões e estilos visuais

O que ele entrega?


Design de Interface

Objetos bem desenhados devem ser fáceis de interpretar e compreender.

O desenho de uma interface ou produto deve buscar alcançar os objetivos propostos.

Objetivos


Princípios Aplicados à Web


Os hábitos dos usuários na Web não são muito diferentes dos hábitos de um consumidor numa loja ou supermercado. Dão uma olhada geral em cada página e clicam no primeiro link ou imagem que capture seu interesse ou que se pareça com o que está procurando. De fato, boa parte da página não é nem vista. A maioria dos usuários procura algo interessante ou útil para clicar. Assim que encontra algo promissor, ele clica. Se o resultado não supre sua expectativa, ele volta e continua procurando ou sai

Como o Usuário Pensa?

Entendendo o Usuário


1.  O Usuário aprecia qualidade e credibilidade O conteúdo é mais importante que o design que o apoia

2.  O Usuário não lê...“scaneia” Ele corre os olhos a procura de referências que o guiem

3.  O Usuário é impaciente e quer gratificação imediata Site “lento” ou pouco objetivo tem alta taxa de abandono

4.  O Usuário não escolhe nem navega linearmente Tende a clicar na primeira opção mais provável ou notável

5.  O Usuário segue a intuição Não importa “como” funciona, desde que ele consiga usar

6.  O Usuário quer ter o controle da navegação Utiliza os recursos do browser e rejeita pop-ups surpresa

Entendendo o Usuário

Como o Usuário Pensa?


10 Princípios Básicos para um Design Efetivo na Web


1.  Não faça o usuário pensar


www.twitter.com A página inicial do twitter deixa claro, de imediato e em diversos idiomas, para que serve o site, permite que o visitante faça buscas e acesse alguns perfis em destaque, mesmo antes de se cadastrar. Além disso, oferece ao visitante um formulário bem simples para que ele se cadastre rapidamente ou para que o usuário já cadastrado faça logon e acesse seu perfil.



2.  Não abuse da paciência do usuário


www.facebook.com A página inicial do facebook é um excelente exemplo de página de alta performance, carregamento rápido, informação clara e objetiva, e acesso rápido ao logon do usuário e um formulário para cadastramento de novos visitantes




3.  Mantenha o foco de atenção do usuário


www.humanized.com Software GRÁTIS pode ser uma grande motivação para o usuário. Não é coincidência que o maior elemento neste página seja a palavra FREE e logo ao lado um botão verde para fazer o download





4.  Destaque os recursos e benefícios


www.netmovies.com.br A página inicial deixa claro rapidamente sobre o que trata o site e destaca as principais características, vantagens, promoções e atrações






5.  Faça uso de texto objetivo


www.mozilla.org/pt-BR/firefox O Texto na Web precisa ser direto e sintetizado e dar a informação de forma objetiva e sem rodeios. A mensagem principal deve estar sempre em maior destaque na página e sempre que possível usar tópicos e links curtos e claros







6.  Valorize e priorize a simplicidade


www.wikipedia.org O Wikipedia tem uma interface extremamente simples, totalmente focada na riqueza de conteúdo e na sua natureza colaborativa







6.  Valorize e Priorize a simplicidade

7.  Não tenha medo de espaços brancos


www.dropbox.com O design limpo e quase minimalista da interface dá clareza e objetividade, levando o usuário a uma de três ações possíveis: logon se for usuário, assistir a um vídeo sobre o sistema ou fazer logo o download do programa









8.  Comunique-se com “linguagem visual”


www.skype.com O Site do Skype possui uma interface com cores bem vivas e imagens de pessoas jovens sorridentes usando o computador ou o telefone. Com um ar visualmente alegre e colorido, passa a idéia de que usar o sistema é divertido e gratificante










9.  Convenções são nossas amigas


www.amazon.com O uso de convenções reduz a curva de aprendizado porque preconiza a experiência anterior do usuário na utilização de recursos e simbologias estabelecidas e popularizadas. O site da Amazon é um bom exemplo de site inovador que, ao mesmo tempo, faz intenso uso de convenções maduras de e-commerce










9.  Convenções são nossas amigas

10. Teste antes, teste depois, teste sempre



10 Boas Práticas Que Você Deve Sempre Ter em Mente


10 Boas Práticas Que Você Deve Sempre Ter em Mente

1.  Não use janelas pop-up ou frames

2.  Não mude o tamanho da janela do usuário

3.  Garanta legibilidade e não use fontes muito pequenas

4.  Use links curtos, claros, objetivos e URLs amigáveis

5.  Não tenha links mortos ou sem saída

6.  Procure ter apenas uma animação por página

7.  Facilite as formas de contato e comunicação

8.  Empregue imagens para apoio ao conteúdo e não para decoração

9.  Evite a necessidade de plug-ins principalmente para navegar

10.  Evite links abrindo novas janelas


Perguntas?


Grato pela atenção! Marcelo Vianna

[email protected]

Technology

Design e Usabilidade na Web