SlideShare uma empresa Scribd logo
1 de 42
Heurística, Princípios e 
Técnicas da 
Usabilidade da Web 
Prof. Daniel dos Santos Brandão
IFPB Campus Cabedelo 
Sumário 
1. Conceito de Usabilidade; 
2. Usabilidade na Web; 
3. Princípios da Heurística; 
4. Conceitos sobre Ergonomia Contemporânea; 
5. Design de interação e a Experiência 
do Usuário (UX) 
6. Considerações Finais.
INTRODUÇÃO 
1. CONCEITO DE USABILIDADE 
IFPB Campus Cabedelo
1. Conceito de Usabilidade 
 Usabilidade pode ser definida como: a facilidade com que 
as pessoas podem empregar uma ferramenta ou 
objeto a fim de realizar uma tarefa específica e 
importante. 
 Fácil aprendizagem, permitir uma utilização eficiente e 
apresentar poucos erros, são os aspectos fundamentais 
para a percepção da boa usabilidade por parte do usuário. 
1/3 
IFPB Campus Cabedelo
1. Conceito de Usabilidade 
 A usabilidade está diretamente ligada ao diálogo na 
interface e a capacidade do software em permitir que 
o usuário alcance suas metas de interação com o 
sistema. 
2/3 
IFPB Campus Cabedelo
1. Conceito de Usabilidade 
 O QUE É INTERFACE? 
Vários autores definem interface como todo e qualquer 
dispositivo que ofereça interação entre dois sistemas diferentes: 
 Um painel de um carro, por exemplo, é uma interface. 
 O controle remoto é uma interface. 
 A tela do seu celular touchscreen é uma interface. E um site 
também é uma interface. 
3/3 
IFPB Campus Cabedelo
2. USABILIDADE NA WEB 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 Objetivo: tornar a tarefa a ser realizada pelo usuário o mais 
simples e eficiente possível. 
 O design de interfaces deve equilibrar a funcionalidade e 
elementos visuais de modo a facilitar a tarefa do usuário 
sem chamar a atenção para si. 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 Como saber se estamos acertando? 
1/2 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 Como saber se estamos acertando? 
A pesquisa é um ótimo meio 
de sabermos se estamos aten-dendo 
nossos objetivos. 
É sempre importante saber sobre a cultura, o nível de 
escolaridade, os interesses e as aptidões dos usuários. E o 
melhor jeito é realizando testes. 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 #EXEMPLO 1: A evolução do Sistema Windows 
Tomando como exemplo, as telas de inicialização das diversas 
versões do Windows, que tiveram várias evoluções na riqueza 
das formas, cores e equilíbrio. 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 #EXEMPLO 1: A evolução do Sistema Windows 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 #EXEMPLO 1: A evolução do Sistema Windows 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 #EXEMPLO 1: A evolução do Sistema Windows 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 RESUMINDO: 
O grande foco é pensar sempre que o usuário deve ter uma 
interface amigável e para isso é necessário ter objetos que 
indiquem seu caminho, como exemplo, uma estrada bem 
sinalizada. Outro ponto é manter o usuário sempre 
informado do status da página, onde ele está e o que está 
acontecendo... 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 #EXEMPLO 2: site de pesquisas do Google 
1/2 
IFPB Campus Cabedelo
2. Usabilidade na Web 
 #EXEMPLO 2: site de pesquisas do Google 
 Visual Limpo 
 Navegação intuitiva 
 Liberdade ao usuário 
IFPB Campus Cabedelo
3. PRINCÍPIOS DA HEURÍSTICA 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Heurística: Segundo Jacob Nilsen¹ 
“é um método de verificação científico, geralmente 
documentado, sobre as qualidades ergonômicas das 
interfaces e são realizadas por especialistas em 
ergonomia, que diagnosticam problemas que o usuário 
poderá ter em uma interação.” 
 ¹ Jacob Nilsen é um dinamarquês cientista da computação, com 
Ph.D. em interação homem-máquina. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 O termo avaliação heurística foi 
introduzido no início da década de 
90 por Jakob Nielsen e Rolf Molich, 
que desenvolveram métodos e 
padrões previamente testados que 
fornecem recursos para deixar as 
interfaces mais fáceis de serem 
utilizadas por seus usuários. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Heurística na prática: 
Para realizar os teste são selecionados de 3 a 5 avaliadores 
que submetem as partes do projeto, sejam sites 
institucionais, portal de conteúdo, e-commerces, sites para 
dispositivos móveis, protótipos, entre outros. 
 Aos princípios heurísticos, é possível realizar comparativos 
entre o que foi projetado na interface e o que realmente é 
necessário para um modelo sólido e consistente. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Avaliação Heurística de Nielsen 
Para realizar os teste são selecionados de 3 a 5 avaliadores 
que submetem as partes do projeto, sejam sites 
institucionais, portal de conteúdo, e-commerces, sites para 
dispositivos móveis, protótipos, entre outros. 
Vejamos os princípios da heurística de Nilsen 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Diálogo simples e natural: Os diálogos não devem conter 
informações que sejam irrelevantes ou que sejam 
raramente necessárias. Cada unidade extra da informação 
em um diálogo compete com as unidades relevantes da 
informação e diminui sua visibilidade relativa. 
 Linguagem do usuário: O dialogo deve ser expressado 
claramente em palavras, frases e conceitos familiares ao 
usuário ao invés dos termos originados do sistema. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Mais reconhecimento que recordação: Minimizar a carga 
da memória do usuário permitindo a visualização de 
objetos, ações, e opções. O usuário não deve ter que 
lembrar informações de uma parte do diálogo para outra. 
 Coerência e padrões: Os usuários não devem ter que saber 
se palavras, situações, ou ações diferentes significam a 
mesma coisa. O sistema deve seguir as convenções da 
plataforma. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Feedback: O sistema deve sempre manter os usuários 
informados sobre o que está ocorrendo, com respostas 
apropriadas e dentro do tempo razoável. 
 Saídas claramente marcadas: Usuários normalmente 
escolhem algumas funções no sistema por engano e 
precisarão de saída emergências bem demarcadas para sair 
do estado indesejado sem passar por um longo caminho. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Atalhos: Os atalhos, não vistos pelos usuários novatos, 
podem normalmente acelerar a navegação para usuários 
experientes, de tal modo que o sistema deve conciliar 
usuários experientes e inexperientes. 
 Boa mensagem de erro: As mensagens de erro devem ser 
expressas de forma clara (sem códigos), indicar 
precisamente o problema, e sugerir construtivamente uma 
solução. 
IFPB Campus Cabedelo
3. Princípios da Heurística 
 Prevenção de erro: Por melhor que seja a mensagem de erro, 
um cuidadoso projeto de interface é o que impede a ocorrência 
dos problemas em primeiro lugar. Eliminar circunstâncias que 
sejam propícias aos erros, ou verificá-las e apresentar ao usuário 
uma opção de confirmação antes que incidam no erro. 
 Ajuda e documentação: Pode ser necessário que o sistema 
forneça ajuda e documentação, apesar de ser melhor quando o 
sistema é usado sem documentação. A informação deve ser fácil 
de ser encontrada, focada nas tarefas do usuário. Devem ser 
listados passos concretos a serem seguidos, e não ser muito 
extenso. 
IFPB Campus Cabedelo
4. CONCEITOS SOBRE ERGONOMIA 
CONTEMPORÂNEA 
IFPB Campus Cabedelo
4. Conceitos sobre a Ergonomia 
contemporânea 
 Ergonomia: 
É a ciência que estuda a atividade de um trabalhador e/ou 
usuário de produtos, no sentido de definir as condições de 
realização dessa atividade e garantir a sua segurança, 
saúde, conforto e, se necessário, a produtividade em 
termos qualitativos e/ou quantitativos. 
É possível chegar a bons resultados através de pesquisas e 
questionários. Vejamos algumas questões: 
IFPB Campus Cabedelo
4. Conceitos sobre a Ergonomia 
contemporânea 
 Presteza: verifique se o sistema informa e conduz o 
usuário durante a interação; 
 Agrupamento por localização: verifique se a distribuição 
espacial dos itens traduz as relações entre as informações; 
 Agrupamento por formato: verifique os formatos dos itens 
como meio de transmitir associações e diferenças; 
IFPB Campus Cabedelo
4. Conceitos sobre a Ergonomia 
contemporânea 
 Flexibilidade: verifique se o sistema permite personalizar 
as apresentações e os diálogos; 
 Legibilidade: verifique a legibilidade das informações 
apresentadas nas telas do sistema; 
 Compatibilidade: verifique a compatibilidade do sistema 
com as expectativas e necessidades do usuário em sua 
tarefa. 
IFPB Campus Cabedelo
5. DESIGN DE INTERAÇÃO E A 
EXPERIÊNCIA DO USUÁRIO (UX) 
IFPB Campus Cabedelo
5. Design de interação e a Experiência do 
Usuário (UX) 
 Design de interação: 
Em tempos de modismo tecnológico, é importante saber: 
tecnologia não é fim, é meio. 
 Identificando as necessidades e as rotinas das pessoas 
alcançamos maiores chances de êxito, já que elas tornam-se 
co-autoras de um produto e não apenas usuários. 
IFPB Campus Cabedelo
5. Design de interação e a Experiência do 
Usuário (UX) 
 Ciclo da criação de um Design Interativo: 
estudos e 
pesquisas 
ideação 
prototipação 
IFPB Campus Cabedelo 
avaliação
5. Design de interação e a Experiência do 
Usuário (UX) 
 Design de interação “tem a ver com conectar as 
pessoas por meio dos produtos e serviços que elas 
usam” (Bill Moggridge). 
IFPB Campus Cabedelo
5. Design de interação e a Experiência do 
Usuário (UX) 
 Design de interação “tem a ver com conectar as 
pessoas por meio dos produtos e serviços que elas 
usam” (Bill Moggridge). 
 Envolve criar experiências que melhorem e ampliem o 
modo como as pessoas trabalham, se comunicam e 
interagem. 
IFPB Campus Cabedelo
5. Design de interação e a Experiência do 
Usuário (UX) 
 Experiência do Usuário ou UX (sigla em inglês): 
Diz respeito à forma como 
as pessoas se sentem ao 
utilizar um serviço ou um 
produto, ao interagir com 
um sistema web. 
IFPB Campus Cabedelo
Revisão 
CONSIDERAÇÕES FINAIS 
IFPB Campus Cabedelo
Considerações finais 
 Foi visto que USABILIDADE é: 
A forma facilitada como as pessoas podem interagir um 
uma ferramenta ou sistema 
 A INTERFACE pode ser: 
Desde o painel de um carro, um site ou um controle 
remoto 
 A USABILIDADE na web: 
Tem por objetivo facilitar a vida do usuário em utilizar e 
acessar o conteúdo que lhe interesse. 
IFPB Campus Cabedelo
Considerações finais 
 A HEURÍSTICA é: 
Um método científico de pesquisar e testar um sistema 
para melhorar a vida do usuário do produto final. 
 Ainda sobre a HEURÍSTICA: 
Nilsen, um dos co-criadores do termo, utiliza um check-list 
para avaliação da usabilidade 
 A ERGONOMIA é: 
A ciência que estuda a atividade de um trabalhador e/ou 
usuário de produtos, no sentido de definir as condições de 
realização dessa atividade 
IFPB Campus Cabedelo
Considerações finais 
 Design de INTERAÇÃO é: 
Conectar as pessoas por meio dos produtos e serviços que 
elas usam. 
 A Experiência do Usuário ou UX: 
É forma como as pessoas se sentem ao utilizar um serviço 
ou um produto, ao interagir com um sistema web, por 
exemplo. 
IFPB Campus Cabedelo
Muito obrigado pela atenção! 
 Responda aos exercícios entregues no começo 
da aula para fixação do conteúdo. 
IFPB Campus Cabedelo

Mais conteúdo relacionado

Mais procurados

Internet, Ciberespaço e Cibercultura
Internet, Ciberespaço e CiberculturaInternet, Ciberespaço e Cibercultura
Internet, Ciberespaço e Cibercultura
Michele Pó
 
1ª aula introdução a informática
1ª aula introdução a informática1ª aula introdução a informática
1ª aula introdução a informática
socrahn
 
Aula 01 fundamentos da informática
Aula 01   fundamentos da informáticaAula 01   fundamentos da informática
Aula 01 fundamentos da informática
Gilberto Campos
 
Projecto multimédia
Projecto multimédiaProjecto multimédia
Projecto multimédia
Nuno Cardoso
 
Pesquisa Qualitativa e Quantitativa
Pesquisa Qualitativa e QuantitativaPesquisa Qualitativa e Quantitativa
Pesquisa Qualitativa e Quantitativa
jlpaesjr
 

Mais procurados (20)

Sistemas operacionais
Sistemas operacionaisSistemas operacionais
Sistemas operacionais
 
Internet, Ciberespaço e Cibercultura
Internet, Ciberespaço e CiberculturaInternet, Ciberespaço e Cibercultura
Internet, Ciberespaço e Cibercultura
 
Banco de questões qualidade de software
Banco de questões qualidade de softwareBanco de questões qualidade de software
Banco de questões qualidade de software
 
Computação Ubíqua e Pervasiva
Computação Ubíqua e PervasivaComputação Ubíqua e Pervasiva
Computação Ubíqua e Pervasiva
 
Resumo básico de introdução à informática
Resumo básico de introdução à informáticaResumo básico de introdução à informática
Resumo básico de introdução à informática
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Palestra - Heurísticas e Usabilidade
Palestra - Heurísticas e UsabilidadePalestra - Heurísticas e Usabilidade
Palestra - Heurísticas e Usabilidade
 
Informática Básica - Aula 05 - Sistema Operacional Windows
Informática Básica - Aula 05 - Sistema Operacional WindowsInformática Básica - Aula 05 - Sistema Operacional Windows
Informática Básica - Aula 05 - Sistema Operacional Windows
 
1ª aula introdução a informática
1ª aula introdução a informática1ª aula introdução a informática
1ª aula introdução a informática
 
Introdução à Programação
Introdução à ProgramaçãoIntrodução à Programação
Introdução à Programação
 
Aula 01 fundamentos da informática
Aula 01   fundamentos da informáticaAula 01   fundamentos da informática
Aula 01 fundamentos da informática
 
Modelos de base de dados
Modelos de base de dadosModelos de base de dados
Modelos de base de dados
 
Módulo 1 - Noções Básicas de Hardware e Software
Módulo 1 - Noções Básicas de Hardware e SoftwareMódulo 1 - Noções Básicas de Hardware e Software
Módulo 1 - Noções Básicas de Hardware e Software
 
Informática Básica - Aula 04 - Software
Informática Básica - Aula 04 - SoftwareInformática Básica - Aula 04 - Software
Informática Básica - Aula 04 - Software
 
CMM e CMMI
CMM e CMMICMM e CMMI
CMM e CMMI
 
Projecto multimédia
Projecto multimédiaProjecto multimédia
Projecto multimédia
 
Aula - Metodologia, Método e Técnicas (conceitos básicos)
Aula - Metodologia, Método e Técnicas (conceitos básicos)Aula - Metodologia, Método e Técnicas (conceitos básicos)
Aula - Metodologia, Método e Técnicas (conceitos básicos)
 
Pesquisa Qualitativa e Quantitativa
Pesquisa Qualitativa e QuantitativaPesquisa Qualitativa e Quantitativa
Pesquisa Qualitativa e Quantitativa
 
Aula 1 - Introdução a Engenharia de Software
Aula 1 -  Introdução a Engenharia de SoftwareAula 1 -  Introdução a Engenharia de Software
Aula 1 - Introdução a Engenharia de Software
 
Aula Lógica de Programação - cap1
Aula Lógica de Programação - cap1 Aula Lógica de Programação - cap1
Aula Lógica de Programação - cap1
 

Destaque

Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
Alan Vasconcelos
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
Tersis Zonato
 

Destaque (20)

IHC Parte2
IHC Parte2IHC Parte2
IHC Parte2
 
IHC Parte1
IHC Parte1IHC Parte1
IHC Parte1
 
Encapsulamento em Orientação a Objetos
Encapsulamento em Orientação a ObjetosEncapsulamento em Orientação a Objetos
Encapsulamento em Orientação a Objetos
 
Fórmulas Condicionais em Excel
Fórmulas Condicionais em ExcelFórmulas Condicionais em Excel
Fórmulas Condicionais em Excel
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Arrays (vetores) em Java
Arrays (vetores) em JavaArrays (vetores) em Java
Arrays (vetores) em Java
 
Excel - Fórmulas Básicas
Excel -  Fórmulas BásicasExcel -  Fórmulas Básicas
Excel - Fórmulas Básicas
 
Aula 01 - Introdução ao Sistema de Informação
Aula 01 - Introdução ao Sistema de InformaçãoAula 01 - Introdução ao Sistema de Informação
Aula 01 - Introdução ao Sistema de Informação
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Aula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas CondicionaisAula03 PHP - Estruturas Condicionais
Aula03 PHP - Estruturas Condicionais
 
As 10 heurísticas de Nielsen
As 10 heurísticas de NielsenAs 10 heurísticas de Nielsen
As 10 heurísticas de Nielsen
 
Aula 02 - Principios da Orientação a Objetos (POO)
Aula 02 - Principios da Orientação a Objetos (POO)Aula 02 - Principios da Orientação a Objetos (POO)
Aula 02 - Principios da Orientação a Objetos (POO)
 
Slides Usabilidade
Slides UsabilidadeSlides Usabilidade
Slides Usabilidade
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
 
Usabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de NielsenUsabilidade: as 10 heurísticas de Nielsen
Usabilidade: as 10 heurísticas de Nielsen
 
PHP Aula 06 - Include, Require e Querystring
PHP Aula 06 - Include, Require e QuerystringPHP Aula 06 - Include, Require e Querystring
PHP Aula 06 - Include, Require e Querystring
 
Aula 02 - Sistemas, Dados, Informação
Aula 02 - Sistemas, Dados, InformaçãoAula 02 - Sistemas, Dados, Informação
Aula 02 - Sistemas, Dados, Informação
 
Métodos de avaliação de IHC
Métodos de avaliação de IHCMétodos de avaliação de IHC
Métodos de avaliação de IHC
 
Aula 04 Sistema de Informação - Processo e Requisitos de Sistemas
Aula 04 Sistema de Informação - Processo e Requisitos de SistemasAula 04 Sistema de Informação - Processo e Requisitos de Sistemas
Aula 04 Sistema de Informação - Processo e Requisitos de Sistemas
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 

Semelhante a Heurística, Principios e Usabilidade na web

Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
guest5ccda
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
JulioCesar371362
 
MPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeMPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - Usabilidade
Alan Vasconcelos
 

Semelhante a Heurística, Principios e Usabilidade na web (20)

Seminario Lep Ibge Slideshare
Seminario Lep Ibge SlideshareSeminario Lep Ibge Slideshare
Seminario Lep Ibge Slideshare
 
Usabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGEUsabilidade: Palestra no auditório do IBGE
Usabilidade: Palestra no auditório do IBGE
 
Palestra no auditório do IBGE - Arquitetura de Informação
Palestra no auditório do IBGE - Arquitetura de InformaçãoPalestra no auditório do IBGE - Arquitetura de Informação
Palestra no auditório do IBGE - Arquitetura de Informação
 
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de NielsenInteração Humano-Computador - História, Conceitos e Heurísticas de Nielsen
Interação Humano-Computador - História, Conceitos e Heurísticas de Nielsen
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
Aula 1
Aula 1Aula 1
Aula 1
 
My Report - Usability Tests
My Report - Usability TestsMy Report - Usability Tests
My Report - Usability Tests
 
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
O Desafio da Usabilidade - Seminário de Metodologia do IBGE 2014
 
Análise de usabilidade do Facebook com base na heurística de Jakob Nielsen
Análise de usabilidade do Facebook com base na heurística de Jakob NielsenAnálise de usabilidade do Facebook com base na heurística de Jakob Nielsen
Análise de usabilidade do Facebook com base na heurística de Jakob Nielsen
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
 
User experience
User experienceUser experience
User experience
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
USABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVELUSABILIDADE DA WEB MÓVEL
USABILIDADE DA WEB MÓVEL
 
Ergonomia e experiência do usuário: O que eu ganho com isso?
Ergonomia e experiência do usuário: O que eu ganho com isso?Ergonomia e experiência do usuário: O que eu ganho com isso?
Ergonomia e experiência do usuário: O que eu ganho com isso?
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
Apostial i.h.c - apostila oficial
Apostial   i.h.c - apostila oficialApostial   i.h.c - apostila oficial
Apostial i.h.c - apostila oficial
 
Desenvolvimento em tempos de UX - Versão 3.0
Desenvolvimento em tempos de UX - Versão 3.0Desenvolvimento em tempos de UX - Versão 3.0
Desenvolvimento em tempos de UX - Versão 3.0
 
MPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - UsabilidadeMPP-III - Aula 08 - Usabilidade
MPP-III - Aula 08 - Usabilidade
 
Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & Usabilidade
 

Mais de Daniel Brandão

Mais de Daniel Brandão (19)

Aula 2 - POO: Fundamentos da linguagem Java
Aula 2 - POO: Fundamentos da linguagem JavaAula 2 - POO: Fundamentos da linguagem Java
Aula 2 - POO: Fundamentos da linguagem Java
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
 
Sapiens - Feedback de Prática Docente com Google Forms
Sapiens - Feedback de Prática Docente com Google FormsSapiens - Feedback de Prática Docente com Google Forms
Sapiens - Feedback de Prática Docente com Google Forms
 
{Palestra} Criação Web com Frameworks Front-end
{Palestra} Criação Web com Frameworks Front-end{Palestra} Criação Web com Frameworks Front-end
{Palestra} Criação Web com Frameworks Front-end
 
PHP Aula 05 - E-mails, Cookies e Sessoes
PHP Aula 05 - E-mails, Cookies e SessoesPHP Aula 05 - E-mails, Cookies e Sessoes
PHP Aula 05 - E-mails, Cookies e Sessoes
 
Aula 04 PHP - Utilizando Funções e Manipulando Arquivos
Aula 04 PHP - Utilizando Funções e Manipulando ArquivosAula 04 PHP - Utilizando Funções e Manipulando Arquivos
Aula 04 PHP - Utilizando Funções e Manipulando Arquivos
 
Aula 3 Sistemas de Informação - Tipos de SI
Aula 3 Sistemas de Informação - Tipos de SIAula 3 Sistemas de Informação - Tipos de SI
Aula 3 Sistemas de Informação - Tipos de SI
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Introdução à informática
Introdução à informáticaIntrodução à informática
Introdução à informática
 
Programação Orientação a Objetos - Herança
Programação Orientação a Objetos - HerançaProgramação Orientação a Objetos - Herança
Programação Orientação a Objetos - Herança
 
Palestra - Profissão: Desenvolvedor
Palestra - Profissão: DesenvolvedorPalestra - Profissão: Desenvolvedor
Palestra - Profissão: Desenvolvedor
 
Aula 03 - Definições da linguagem Java
Aula 03 - Definições da linguagem JavaAula 03 - Definições da linguagem Java
Aula 03 - Definições da linguagem Java
 
Incluir para evoluir - Palestra
Incluir para evoluir - PalestraIncluir para evoluir - Palestra
Incluir para evoluir - Palestra
 
Criação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material DesignCriação Web com Bootstrap e Material Design
Criação Web com Bootstrap e Material Design
 
Banco de dados - Aula 1 SQL
Banco de dados - Aula 1 SQLBanco de dados - Aula 1 SQL
Banco de dados - Aula 1 SQL
 
Banco de dados - Mapeamento MER - Relacional
Banco de dados - Mapeamento MER - RelacionalBanco de dados - Mapeamento MER - Relacional
Banco de dados - Mapeamento MER - Relacional
 
Servlets e JSP
Servlets e JSPServlets e JSP
Servlets e JSP
 
Introdução a Informática
Introdução a InformáticaIntrodução a Informática
Introdução a Informática
 
Funções e Fórmulas em Excel 2010
Funções e Fórmulas em Excel 2010Funções e Fórmulas em Excel 2010
Funções e Fórmulas em Excel 2010
 

Heurística, Principios e Usabilidade na web

  • 1. Heurística, Princípios e Técnicas da Usabilidade da Web Prof. Daniel dos Santos Brandão
  • 2. IFPB Campus Cabedelo Sumário 1. Conceito de Usabilidade; 2. Usabilidade na Web; 3. Princípios da Heurística; 4. Conceitos sobre Ergonomia Contemporânea; 5. Design de interação e a Experiência do Usuário (UX) 6. Considerações Finais.
  • 3. INTRODUÇÃO 1. CONCEITO DE USABILIDADE IFPB Campus Cabedelo
  • 4. 1. Conceito de Usabilidade  Usabilidade pode ser definida como: a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante.  Fácil aprendizagem, permitir uma utilização eficiente e apresentar poucos erros, são os aspectos fundamentais para a percepção da boa usabilidade por parte do usuário. 1/3 IFPB Campus Cabedelo
  • 5. 1. Conceito de Usabilidade  A usabilidade está diretamente ligada ao diálogo na interface e a capacidade do software em permitir que o usuário alcance suas metas de interação com o sistema. 2/3 IFPB Campus Cabedelo
  • 6. 1. Conceito de Usabilidade  O QUE É INTERFACE? Vários autores definem interface como todo e qualquer dispositivo que ofereça interação entre dois sistemas diferentes:  Um painel de um carro, por exemplo, é uma interface.  O controle remoto é uma interface.  A tela do seu celular touchscreen é uma interface. E um site também é uma interface. 3/3 IFPB Campus Cabedelo
  • 7. 2. USABILIDADE NA WEB IFPB Campus Cabedelo
  • 8. 2. Usabilidade na Web  Objetivo: tornar a tarefa a ser realizada pelo usuário o mais simples e eficiente possível.  O design de interfaces deve equilibrar a funcionalidade e elementos visuais de modo a facilitar a tarefa do usuário sem chamar a atenção para si. IFPB Campus Cabedelo
  • 9. 2. Usabilidade na Web  Como saber se estamos acertando? 1/2 IFPB Campus Cabedelo
  • 10. 2. Usabilidade na Web  Como saber se estamos acertando? A pesquisa é um ótimo meio de sabermos se estamos aten-dendo nossos objetivos. É sempre importante saber sobre a cultura, o nível de escolaridade, os interesses e as aptidões dos usuários. E o melhor jeito é realizando testes. IFPB Campus Cabedelo
  • 11. 2. Usabilidade na Web  #EXEMPLO 1: A evolução do Sistema Windows Tomando como exemplo, as telas de inicialização das diversas versões do Windows, que tiveram várias evoluções na riqueza das formas, cores e equilíbrio. IFPB Campus Cabedelo
  • 12. 2. Usabilidade na Web  #EXEMPLO 1: A evolução do Sistema Windows IFPB Campus Cabedelo
  • 13. 2. Usabilidade na Web  #EXEMPLO 1: A evolução do Sistema Windows IFPB Campus Cabedelo
  • 14. 2. Usabilidade na Web  #EXEMPLO 1: A evolução do Sistema Windows IFPB Campus Cabedelo
  • 15. 2. Usabilidade na Web  RESUMINDO: O grande foco é pensar sempre que o usuário deve ter uma interface amigável e para isso é necessário ter objetos que indiquem seu caminho, como exemplo, uma estrada bem sinalizada. Outro ponto é manter o usuário sempre informado do status da página, onde ele está e o que está acontecendo... IFPB Campus Cabedelo
  • 16. 2. Usabilidade na Web  #EXEMPLO 2: site de pesquisas do Google 1/2 IFPB Campus Cabedelo
  • 17. 2. Usabilidade na Web  #EXEMPLO 2: site de pesquisas do Google  Visual Limpo  Navegação intuitiva  Liberdade ao usuário IFPB Campus Cabedelo
  • 18. 3. PRINCÍPIOS DA HEURÍSTICA IFPB Campus Cabedelo
  • 19. 3. Princípios da Heurística  Heurística: Segundo Jacob Nilsen¹ “é um método de verificação científico, geralmente documentado, sobre as qualidades ergonômicas das interfaces e são realizadas por especialistas em ergonomia, que diagnosticam problemas que o usuário poderá ter em uma interação.”  ¹ Jacob Nilsen é um dinamarquês cientista da computação, com Ph.D. em interação homem-máquina. IFPB Campus Cabedelo
  • 20. 3. Princípios da Heurística  O termo avaliação heurística foi introduzido no início da década de 90 por Jakob Nielsen e Rolf Molich, que desenvolveram métodos e padrões previamente testados que fornecem recursos para deixar as interfaces mais fáceis de serem utilizadas por seus usuários. IFPB Campus Cabedelo
  • 21. 3. Princípios da Heurística  Heurística na prática: Para realizar os teste são selecionados de 3 a 5 avaliadores que submetem as partes do projeto, sejam sites institucionais, portal de conteúdo, e-commerces, sites para dispositivos móveis, protótipos, entre outros.  Aos princípios heurísticos, é possível realizar comparativos entre o que foi projetado na interface e o que realmente é necessário para um modelo sólido e consistente. IFPB Campus Cabedelo
  • 22. 3. Princípios da Heurística  Avaliação Heurística de Nielsen Para realizar os teste são selecionados de 3 a 5 avaliadores que submetem as partes do projeto, sejam sites institucionais, portal de conteúdo, e-commerces, sites para dispositivos móveis, protótipos, entre outros. Vejamos os princípios da heurística de Nilsen IFPB Campus Cabedelo
  • 23. 3. Princípios da Heurística  Diálogo simples e natural: Os diálogos não devem conter informações que sejam irrelevantes ou que sejam raramente necessárias. Cada unidade extra da informação em um diálogo compete com as unidades relevantes da informação e diminui sua visibilidade relativa.  Linguagem do usuário: O dialogo deve ser expressado claramente em palavras, frases e conceitos familiares ao usuário ao invés dos termos originados do sistema. IFPB Campus Cabedelo
  • 24. 3. Princípios da Heurística  Mais reconhecimento que recordação: Minimizar a carga da memória do usuário permitindo a visualização de objetos, ações, e opções. O usuário não deve ter que lembrar informações de uma parte do diálogo para outra.  Coerência e padrões: Os usuários não devem ter que saber se palavras, situações, ou ações diferentes significam a mesma coisa. O sistema deve seguir as convenções da plataforma. IFPB Campus Cabedelo
  • 25. 3. Princípios da Heurística  Feedback: O sistema deve sempre manter os usuários informados sobre o que está ocorrendo, com respostas apropriadas e dentro do tempo razoável.  Saídas claramente marcadas: Usuários normalmente escolhem algumas funções no sistema por engano e precisarão de saída emergências bem demarcadas para sair do estado indesejado sem passar por um longo caminho. IFPB Campus Cabedelo
  • 26. 3. Princípios da Heurística  Atalhos: Os atalhos, não vistos pelos usuários novatos, podem normalmente acelerar a navegação para usuários experientes, de tal modo que o sistema deve conciliar usuários experientes e inexperientes.  Boa mensagem de erro: As mensagens de erro devem ser expressas de forma clara (sem códigos), indicar precisamente o problema, e sugerir construtivamente uma solução. IFPB Campus Cabedelo
  • 27. 3. Princípios da Heurística  Prevenção de erro: Por melhor que seja a mensagem de erro, um cuidadoso projeto de interface é o que impede a ocorrência dos problemas em primeiro lugar. Eliminar circunstâncias que sejam propícias aos erros, ou verificá-las e apresentar ao usuário uma opção de confirmação antes que incidam no erro.  Ajuda e documentação: Pode ser necessário que o sistema forneça ajuda e documentação, apesar de ser melhor quando o sistema é usado sem documentação. A informação deve ser fácil de ser encontrada, focada nas tarefas do usuário. Devem ser listados passos concretos a serem seguidos, e não ser muito extenso. IFPB Campus Cabedelo
  • 28. 4. CONCEITOS SOBRE ERGONOMIA CONTEMPORÂNEA IFPB Campus Cabedelo
  • 29. 4. Conceitos sobre a Ergonomia contemporânea  Ergonomia: É a ciência que estuda a atividade de um trabalhador e/ou usuário de produtos, no sentido de definir as condições de realização dessa atividade e garantir a sua segurança, saúde, conforto e, se necessário, a produtividade em termos qualitativos e/ou quantitativos. É possível chegar a bons resultados através de pesquisas e questionários. Vejamos algumas questões: IFPB Campus Cabedelo
  • 30. 4. Conceitos sobre a Ergonomia contemporânea  Presteza: verifique se o sistema informa e conduz o usuário durante a interação;  Agrupamento por localização: verifique se a distribuição espacial dos itens traduz as relações entre as informações;  Agrupamento por formato: verifique os formatos dos itens como meio de transmitir associações e diferenças; IFPB Campus Cabedelo
  • 31. 4. Conceitos sobre a Ergonomia contemporânea  Flexibilidade: verifique se o sistema permite personalizar as apresentações e os diálogos;  Legibilidade: verifique a legibilidade das informações apresentadas nas telas do sistema;  Compatibilidade: verifique a compatibilidade do sistema com as expectativas e necessidades do usuário em sua tarefa. IFPB Campus Cabedelo
  • 32. 5. DESIGN DE INTERAÇÃO E A EXPERIÊNCIA DO USUÁRIO (UX) IFPB Campus Cabedelo
  • 33. 5. Design de interação e a Experiência do Usuário (UX)  Design de interação: Em tempos de modismo tecnológico, é importante saber: tecnologia não é fim, é meio.  Identificando as necessidades e as rotinas das pessoas alcançamos maiores chances de êxito, já que elas tornam-se co-autoras de um produto e não apenas usuários. IFPB Campus Cabedelo
  • 34. 5. Design de interação e a Experiência do Usuário (UX)  Ciclo da criação de um Design Interativo: estudos e pesquisas ideação prototipação IFPB Campus Cabedelo avaliação
  • 35. 5. Design de interação e a Experiência do Usuário (UX)  Design de interação “tem a ver com conectar as pessoas por meio dos produtos e serviços que elas usam” (Bill Moggridge). IFPB Campus Cabedelo
  • 36. 5. Design de interação e a Experiência do Usuário (UX)  Design de interação “tem a ver com conectar as pessoas por meio dos produtos e serviços que elas usam” (Bill Moggridge).  Envolve criar experiências que melhorem e ampliem o modo como as pessoas trabalham, se comunicam e interagem. IFPB Campus Cabedelo
  • 37. 5. Design de interação e a Experiência do Usuário (UX)  Experiência do Usuário ou UX (sigla em inglês): Diz respeito à forma como as pessoas se sentem ao utilizar um serviço ou um produto, ao interagir com um sistema web. IFPB Campus Cabedelo
  • 38. Revisão CONSIDERAÇÕES FINAIS IFPB Campus Cabedelo
  • 39. Considerações finais  Foi visto que USABILIDADE é: A forma facilitada como as pessoas podem interagir um uma ferramenta ou sistema  A INTERFACE pode ser: Desde o painel de um carro, um site ou um controle remoto  A USABILIDADE na web: Tem por objetivo facilitar a vida do usuário em utilizar e acessar o conteúdo que lhe interesse. IFPB Campus Cabedelo
  • 40. Considerações finais  A HEURÍSTICA é: Um método científico de pesquisar e testar um sistema para melhorar a vida do usuário do produto final.  Ainda sobre a HEURÍSTICA: Nilsen, um dos co-criadores do termo, utiliza um check-list para avaliação da usabilidade  A ERGONOMIA é: A ciência que estuda a atividade de um trabalhador e/ou usuário de produtos, no sentido de definir as condições de realização dessa atividade IFPB Campus Cabedelo
  • 41. Considerações finais  Design de INTERAÇÃO é: Conectar as pessoas por meio dos produtos e serviços que elas usam.  A Experiência do Usuário ou UX: É forma como as pessoas se sentem ao utilizar um serviço ou um produto, ao interagir com um sistema web, por exemplo. IFPB Campus Cabedelo
  • 42. Muito obrigado pela atenção!  Responda aos exercícios entregues no começo da aula para fixação do conteúdo. IFPB Campus Cabedelo