Curso Avançado Curso Avançado
Quantos produtos interativos existem em nossas vidas?
(Pense um instante)
Curso Avançado Curso Avançado
Produtos de todo o diaAparelhos celulares, players de música, DVDs,
calculadoras, computadores....
Curso Avançado Curso Avançado
Dificuldades de todo diaQuando algum produto deixou você na mão? Qual
deles não são assim tão fáceis de usar?
Curso Avançado Curso Avançado
Atividades SimplesAlgumas coisas corriqueiras as vezes são
complicadas. Em um elevador qual botão te leva para o primeiro andar? O “T” o “P”o “ZERO” ou o “1”
?
Curso Avançado Curso Avançado
Facilitando o Dia-a-DiaUm grande shopping center, abortou os números e
letras, adotou frutas para fazer a relação entre andares. Nesse caso, a imagem da fruta foi utilizada
para auxiliar a memória.
Curso Avançado Curso Avançado
Memória VisualÉ a comunicação que vem pelos olhos e é
responsável por cerca de 75% do que se grava na memória. A comunicação através da memória visual
pode ser captada por quatro formas diferentes.
MEMÓRIA
ESCRITA GRÁFICACOMUNICAÇÃO
VISUALAUDIOVISUAL
Curso Avançado Curso Avançado
Memória EscritaÉ a comunicação que vem através de um documento escrito, em papel
ou em tela.
MEMÓRIA
ESCRITA GRÁFICACOMUNICAÇÃO
VISUALAUDIOVISUAL
Curso Avançado Curso Avançado
Memória GráficaÉ a comunicação que vem através de símbolos, desenhos, plantas, diagramas, ícones, fotos ou outros recursos gráficos isoladamente. É o caso da maioria das
placas de trânsito, onde um único símbolo tenta traduzir o que a placa representa, de forma rápida e eficaz.
MEMÓRIA
ESCRITA GRÁFICACOMUNICAÇÃO
VISUALAUDIOVISUAL
Curso Avançado Curso Avançado
Comunicação VisualÉ a comunicação que vem da junção da comunicação gráfica com a
escrita, onde um símbolo, desenho, etc., vem acompanhado de palavras-chave ou textos que complementam o símbolo, desenho, etc.
Usando o mesmo exemplo de placas de trânsito, há uma placa que significa "cuidado, pista derrapante" mas que pode vir acompanhado da
expressão "Em dias de chuva".
MEMÓRIA
ESCRITA GRÁFICACOMUNICAÇÃO
VISUALAUDIOVISUAL
Curso Avançado Curso Avançado
Memória Áudio VisualJunta a Comunicação Visual com a auditiva. É considerada a mais eficiente de todas. O dispositivo cognitivo do cérebro ativa os dois
principais sentidos, chegando a um índice de cerca de 84% de eficiência.
MEMÓRIA
ESCRITA GRÁFICACOMUNICAÇÃO
VISUALAUDIOVISUAL
Curso Avançado Curso Avançado
O que faz um bom design?Produtos utilizáveis, fáceis de aprender, eficazes e
que proporcionam uma experiência agradável.
Curso Avançado Curso Avançado
O que faz um mau design?Produtos irritantes, confusos, ineficientes, com muitos
passos, difíceis de usar, não óbvios e que podem induzir o usuário ao erro.
Curso Avançado Curso Avançado
Onde entra a Usabilidade?As boas práticas de usabilidade devem otimizar as interações com sistemas, de forma que a execução de uma atividade seja quase intuitiva, ajudando as
pessoas.
Curso Avançado Curso Avançado
Metas e Objetivos
As três principais metas de usabilidade são eficiência, memorização e aprendizado.
EficiênciaAprendizado
Memorização
Curso Avançado Curso Avançado
Metas de EficiênciaQual o grau de dificuldade que os seus clientes
encontram para comprar em seu site?
Curso Avançado Curso Avançado
Metas de eficáciaUsando o exemplo de comércio eletrônico, as
perguntas seriam:
Qual é a taxa de conversão? (do total de visitas, quantas pessoas efetivamente
concluem uma transação)?
Qual a taxa de abandono de carrinho?(do total de itens incluídos no carrinho,
quantos são abandonados no decorrer do processo)?
Curso Avançado Curso Avançado
Metas de AprendizadoQuanto tempo os seus usuários demoram
para aprender a interagir com o seu website?
Curso Avançado Curso Avançado
Metas de AprendizadoO seu site é auto-explicativo? Existe alguma área que
estimule o aprendizado sobre a utilização do seu produto ?
Curso Avançado Curso Avançado
Metas de AprendizadoUsando o exemplo de comércio eletrônico, as
perguntas seriam:
Qual o tempo médio que as pessoas gastampara finalizar um pedido?
Curso Avançado Curso Avançado
Metas de MemorizaçãoDepois que os seus clientes entram no seu site, eles conseguem lembrar como executaram uma tarefa?
Curso Avançado Curso Avançado
Metas de MemorizaçãoA memorização pode se tornar um índice de
fidelização de clientes, após eles conseguirem concluir uma tarefa de maneira agradável,
certamente irão retornar.
Perguntas
O seu site utiliza ícones para facilitara memória visual?
Curso Avançado Curso Avançado
O que são Ícones?Ícone é uma imagem que mantém uma relação de
semelhança ou propriedade com um determinando objeto. Um ícone é uma abstração de algo que é do nosso
conhecimento e apresenta pelo menos um traço em comum com o objeto representado.
Curso Avançado Curso Avançado
Princípios sobre design
Antes de entender mais sobre usabilidade, é necessário entender alguns princípios do design. São eles:
• Visibilidade
• Feedback
• Restrições
• Mapeamento
• Consistência
• Affordance
Curso Avançado Curso Avançado
VisibilidadeQuanto mais visível for algo mais os usuários vão
saber como proceder.
Curso Avançado Curso Avançado
FeedBackApós uma ação, existe a resposta visual do sistema.Ao pressionar o acelerador, o ponteiro de velocidade
se altera.
Curso Avançado Curso Avançado
RestriçõesDelimita o tipo de interação que pode ocorrer em
determinado momento, ou seja, o que o usuário pode ou não fazer.
Curso Avançado Curso Avançado
MapeamentosRelação entre controle e seus efeitos no mundo,
geralmente seguindo alguma convenção. Como por exemplo, os ícones que representam as funções de
pause, play e eject de um sistema de som.
Curso Avançado Curso Avançado
ConsistênciaManter padrões de interface para as operações semelhantes facilita o aprendizado e a memorização e proporciona segurança para o usuário
Curso Avançado Curso Avançado
AffordanceUm objeto deve sugerir a ação que deve ser tomada,
um botão deve pedir para ser clicado.
Curso Avançado Curso Avançado
Analisando sitesCom os conceitos de necessidade, memorização e
os princípios de design, é possível analisar se determinado site ou produto atende à essas questões
básicas de usabilidade
Curso Avançado Curso Avançado
O ícone aproxima todas as funções relacionadas a
personalização, facilitando a memorização e mantendo a
consistência.
Curso Avançado Curso Avançado
a seta sugere que algo ocorrerá após uma ação do
mouse.Isso é sinalização com
FeedBack.
Curso Avançado Curso Avançado
A área “aprenda sobre” é muito importante para o
aprendizado dos novos usuários
Curso Avançado Curso Avançado
A visibilidade das principais funções do site
induzem o usuário a navegar corretamente.
Curso Avançado Curso Avançado
o mapeamento é a convenção das funções, nesse
caso o player interativo, se aproxima das funções dos players mais tradicionais.
Curso Avançado Curso Avançado
A distância entre a área do
clique e o FeedBack do site podem dificultar o
entendimento do usuário
Curso Avançado Curso Avançado
Por não haver uma
restrição coerente, o usuário pode cometer erros,
como escolher a data de volta, anterior a data de ida.
Curso Avançado Curso Avançado
Criando protótiposAntes de começar a fazer um site é feito um
“wireframe” funcional, que nada mais é que um protótipo do produto final, remetendo a definição de
toda a arquitetura de informação.
Curso Avançado Curso Avançado
Como testar?Para conseguir melhores índices de satisfação do
usuário final, o website deve ser testado. E para cada objetivo existe um método.
Curso Avançado Curso Avançado
Definição do PúblicoA seleção de pessoas que contemplem a abrangência do público-alvo do produto é crucial para obter uma
amostragem satisfatória.
Alguns deles são:
• Faixa salarial
• Idade
• Ocupação
Curso Avançado Curso Avançado
Tarefas do TestePara o teste de usabilidade algumas tarefas são
definidas para que o público do site avalie o produto na prática. As tarefas devem:
• Testar as ações cruciais do teste
• Colocar o usuário em situação de dificuldade
• Estimular que o usuário recorra ao auxilio do próprio site
Curso Avançado Curso Avançado
Avaliação de AmostragemÉ possível testar um protótipo através de uma
pequena amostragem.
Curso Avançado Curso Avançado
O teste é realizado em uma sala de teste onde 4 a 6 pessoas executam uma lista de tarefas pré-definidas.
A partir daí é possível tirar conclusões sobre os pontos fortes e os pontos fracos de um produto.
Curso Avançado Curso Avançado A sala de testes geralmente é dividida em duas
áreas. De um lado ficam o usuário e o avaliador. O avaliador é quem conduz as tarefas sem dar nenhum
suporte as possíveis dificuldades do usuário.
Curso Avançado Curso Avançado
Do outro lado ficam os projetistas do produto, que fazem suas pré-considerações sobre o que deve ser
mantido, deletado ou aperfeiçoado.
Curso Avançado Curso Avançado
Eyetracking / Mapa de CalorO desenvolvimento de tarefas também pode ser
monitorado pelo comportamento do olhar.
Curso Avançado Curso Avançado
Com o eyetracking é possível analisar os caminhos mais freqüentes percorridos pelo olho do usuário.
Essa informação permite aos projetistas re-organizar informações importantes de um site.
Curso Avançado Curso Avançado
Card SortingCategorizar o site é uma tarefa complexa. Utilizar o usuário no processo de classificação pode reduzir o
ruído de entendimento.
Curso Avançado Curso Avançado
Avaliando os ResultadosApós testar um site / protótipo alguns pontos
devem ser levados em consideração.
• Percentual de acertos das tarefas
• Número de passos para cada tarefa
• Tempo despendido em cada tarefa
• Números de cliques por tarefa
Curso Avançado Curso Avançado
Teste de Comparação e Validação
Após a avaliação do primeiro teste e levar em consideração os feedbacks dos usuários, é
importante fazer um segundo teste, com o objetivo de comparar e validar os resultados.
Curso Avançado Curso Avançado
Relatório de SatisfaçãoApós a conclusão dos testes, é realizado um relatório
constando todas as métricas de avaliação, considerando todos os indicadores, incluindo a comparação entre o teste inicial e a validação.
Curso Avançado Curso Avançado
DicasUm conjunto de dicas que melhoram
consideravelmente o desempenho de web sites.
Curso Avançado Curso Avançado
Onde estou, para onde vou?É importante informar ao usuário exatamente aonde
ele está situado dentro de um processo.
Curso Avançado Curso Avançado
Sem SaídaNão deixe o seu usuário sem saída. Se ele cometer algum erro, deixe alguma área de escape para ele
retornar ou tentar novamente.
Curso Avançado Curso Avançado
Boas VindasSe for possível, disponha de uma área para os
navegantes de primeira viagem em seu website.
Curso Avançado Curso Avançado
Aproxime as InformaçõesEstruture a interface aproximando as informações em
grupo.
Curso Avançado Curso Avançado
Formulários CurtosEvite formulários longos. Já somos obrigados a
preencher tanta coisa, seja sintético nos formulários de cadastro.
Curso Avançado Curso Avançado
Induza ao AcertoAuto-complete é um recurso que induz o usuário
a tomar o caminho certo.
Curso Avançado Curso Avançado
Usabilidade e Design de Interação para construir
marcas.É possível fazer da usabilidade um diferencial
competitivo?
Curso Avançado Curso Avançado
Para cada ocasião um produto
Em casa, na academia, no trabalho, qual é o melhor?
Curso Avançado Curso Avançado
Uma Década Simplificando.A amazon é a maior varejista on-line do mundo.
O foco no usuário fez com que a navegação do seu site acompanhasse a evolução do seu sortimento.
Curso Avançado Curso Avançado
1998 Tudo começou com livros, e logo foi necessário adaptar as abas para suportar outras categorias
como, música, vídeos e presentes.
Curso Avançado Curso Avançado
1998 - 1999 Já em 1999, outras categorias como, eletrônicos e brinquedos, começaram a fazer parte do leque de
produtos oferecidos pela loja.
Curso Avançado Curso Avançado
1999 - 2001 As primeiras tentativas para simplificar a categorização que não parava de crescer.
Curso Avançado Curso Avançado
Novos Formatos de InteraçãoO que está mudando na maneira como interagimos,
entre nós mesmos e com as máquinas?