SlideShare uma empresa Scribd logo
Usabilidade Visão e processo para implementar projetos com foco no usuário
Por que propusemos tratar do tema Usabilidade neste encontro? Ela foi revisitada? Suas formulações teóricas não fazem mais sentido? Descobrimos que Jakob Nielsen é um estudioso ultrapassado? A web 2.0 implodiu os principais conceitos da disciplina? USABILIDADE:  de novo esse tema?
NADA DISSO JUSTIFICA! O motivo que nos traz aqui para falar um pouco mais sobre o tema é o fato de a Internet ser considerada, cada vez mais, um ambiente de relacionamento e comunicação para as mais diversas audiências. E isto aponta que: A disciplina precisa ser considerada no desenvolvimento de projetos com uma atenção jamais vista! USABILIDADE:  de novo esse tema?
Vamos então brevemente recapitular o conceito....
http://br.youtube.com/watch?v=sYahB9Ib_SY
“ 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.” A TAL USABILIDADE
“ 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.” celulares softwares televisão A maçaneta da minha casa A TAL USABILIDADE
“ 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.” telespectadores ouvintes internautas Os motoristas A TAL USABILIDADE
“ 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.” Hora de ler meus e-mails Acompanhar o sobe e desce da Bolsa de Valores Chegar ao vigésimo andar de elevador A TAL USABILIDADE
“ 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 .” Comprei os ingressos com antecedência pela internet. É baba, vai lá. Esse mapa do metrô não ajuda em nada. E agora, não sei falar japonês?! Filho, como eu faço pra esse celular parar de tocar? A TAL USABILIDADE
É por isso que os profissionais que desenvolvem produtos interativos (e eles estão ao nosso redor a todo instante) precisam ter o foco na necessidade do usuário: Em seu jeito de agir Seus hábitos adquiridos ao longo do tempo A sua herança comportamental O que eles querem/esperam da vida Mas nem sempre nossos “usuários” são bem cuidados. Por essas e outras, eu digo: O mundo é difícil de usar A TAL USABILIDADE
O mundo de quem precisa lavar as mãos é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=xdoc4LaTu_Q
O mundo de quem quer sair dos lugares é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=66ShiGK21TA
O MUNDO É DIFÍCIL... O mundo de quem quer polivitamínicos também é difícil.
O mundo de quem quer comprar TV por assinatura é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=zG3wCr7_DWw
Para implementar projetos com foco no interesse do usuário e que leve em consideração boas práticas de usabilidade é importante o alinhamento entre 2 profissionais. ATERRISANDO NA WEB... Os arquitetos de informação Os designers
OS ARQUITETOS.... Pegam briefings com cliente e entram na dinâmica de seus produtos e serviços. São responsáveis por organizar os conteúdos. O arquiteto é quem veste a fantasia do usuário prevendo seu comportamento de navegação. Ele monta árvores de navegação (info-estruturas), esboços gráficos da página (wireframes) e fluxogramas de processos. Em seu desktop sempre estão abertos o Visio, o PowerPoint, o Mind Manager. É ele quem entrega ao designers páginas que vão precisar ser desenhadas.
OS ARQUITETOS.... Um pouco da sua produção: Infoestrutura Wireframes
OS DESIGNERS... São repletos de referências visuais. Têm o papel de traduzir visualmente as estratégias digitais do cliente, seja em um site, hotsite, campanha. Definem conceitos de imagens, tipologias, texturas e grafismos. Trabalham ora com referências rígidas de seus clientes (o que muitas vezes gera um certo grau de insatisfação), ora com liberdade total (o job que todos querem!). Na sua mesa, é fácil encontrar uma tablet pra desenhar. No desktop, o Photoshop, o Flash, o Ilustrator, às vezes o 3D Studio Max. Às vezes, o Second Life!
OS DESIGNERS... Um pouco da sua produção:
E é do encontro entre estes profissionais que nasce as implementações de Usabilidade. Juntos, eles têm a missão de promover: Facilidade de aprendizado  - o usuário rapidamente consegue explorar o sistema e realizar suas tarefas;  Eficiência de uso  - tendo aprendido a interagir com o sistema, o usuário atinge níveis altos de produtividade na realização de suas tarefas;  Facilidade de memorização  - após um certo período sem utilizá-lo, o usuário não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele;  Baixa taxa de erros  - o usuário realiza suas tarefas sem maiores transtornos e é capaz de recuperar erros, caso ocorram;  Satisfação subjetiva  - o usuário considera agradável à interação com o sistema e se sente subjetivamente satisfeito com ele. O ENCONTRO
O ENCONTRO Quando esse encontro traz bons furtos: Comportamento de menus: Uma aplicação para demonstrar que clique vai levar a página interna (>>) Na outra aplicação (com marcador) fica demonstrado o comportamento de sub-menu (>) Além disso o marcador recebe uma diferenciação de indicação E sub-itens apresentados ganham BG escurecido.
Quando esse encontro traz bons furtos: Utilização de ALT’s como forma de: Complementar o label disponível Oferecer uma espécie de preview ao que vai ser encontrado O ENCONTRO
Quando esse encontro traz bons furtos: Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 1: Página de erro do browser. Pouco atrativa! O ENCONTRO
Quando esse encontro traz bons furtos: Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 2: Maior receptividade. Possibilidade de novos caminhos de navegação e interesse. O ENCONTRO
Quando esse encontro traz bons furtos: Formas clássicas indicativas de ação: Símbolos de mais e menos. O ENCONTRO
Quando esse encontro traz bons furtos: Mecanismo de paginação: Clara identificação de: páginas existentes (4) Quantidade de itens (214) Botões de próximo e anterior “ Over” no botão uma vez que o usuário faz uma determinada ação. O ENCONTRO
O ENCONTRO Quando esse encontro traz bons furtos: Utilização de ícones: PONTO POSITIVO: Quando as identificações são de uso popular PONTO NEGATIVO: Ao adotar uma linha visual amparada na criação de ícones, e se começa a expandir para a invenção de formas para os mais diversos temas.
Quando esse encontro traz bons furtos: Navegação por abas Bastante positivo para facilitar a visualização de conteúdos numa mesma página. Plataformas desenvolvidas em AJAX permitem que o usuário não carregue a página inteira a cada clique. O ENCONTRO
Quando esse encontro traz bons furtos: Consistência e padrões Elementos visuais padronizados ao longo de todo o site, bem como de toda as linhas de produtos da marca corporativa. Menus, Destaques, Brand Image, Padrão de links, Marcadores ect Diminui a curva de aprendizagem do usuário Garante experiência positiva de acessos futuros homepage Ferramentas elétricas Tecnologia automotiva O ENCONTRO
Quando esse encontro traz bons furtos: Títulos e boxes A marca-mãe em primeiro plano agregando a ela o nome do serviço/produto a ser apresentado. Garante uniformidade ao longo de toda a navegação. Para o usuário fica “claro” o que são os destaques do site. O ENCONTRO
Quando esse encontro traz bons furtos: Identificação por cores Além do menu identificado por cores, o Globo.com traz seus destaques relacionados às áreas também na mesma cor. Com o tempo, o usuário se acostuma com o tom de cada área e se movimenta melhor pelo site. O ENCONTRO
Quando esse encontro traz bons furtos: Testeiras (headers) Além de trazer uma experiência mais agradável em termos visuais, ajuda o usuário a se localizar. O ENCONTRO
Quando esse encontro traz bons furtos: Agrupamento temáticos Visando orientar a busca por informações. O ENCONTRO
O ENCONTRO Quando esse encontro traz bons furtos: Busca por Cloud Tags Para o usuário que deseja fazer uma busca de menor foco, as  cloud tags  permitem que ele obtenha um overview do que é mais popular dentro de um determinado tema.
O ENCONTRO Quando esse encontro traz bons furtos: Dashboard Aplicações de novas tecnologias requerem uma nova curva de aprendizado nova. Uma vez aprendidas, estes novos features só trazem ganhos para os usuários, uma vez que permitem a personalização de sites.
Quando esse encontro traz bons furtos: Google Desktop Os documentos vão sendo apresentados a cada nova letra digitada. Permite fazer relações que nem mesmo o usuário imaginasse que pudesse ser feita. O ENCONTRO
O DESENCONTRO
O DESENCONTRO Agrupamento lógico O Atendimento on-line ao lado do Crédito parcelado? Por que? E essa distância das ações até o footer?
O DESENCONTRO Organização visual Para onde ir?
O DESENCONTRO Scrol Dois scrolls verticais? Que confusão é essa?
O DESENCONTRO Indefinição Escolha uma maneira e vá com ela até o fim!
O DESENCONTRO Tela de resposta ao digitar uma palavra-chave na busca e clicar "enter", o usuário vê uma resposta sobre login e senha, referente a outro campo de preenchimento.
O DESENCONTRO Perda de navegação Depois de selecionar um deles, o usuário perde toda a navegação.
O DESENCONTRO Visualização O Submarino não deixa ordenar por preço.  Deixa ordenar por fabricante, por mais vendido, por nome do produto.
O DESENCONTRO Labels “ Site index”, neste caso, é o mesmo de “mapa do site”
O DESENCONTRO Formulários o usuário tem que usar a tecla tab ou clicar com o mouse para mudar de campo no preenchimento da data.
PARA EVITAR... PAPER PROTOTYPE EYE TRACKING CARD SORTING TESTE DE USABILIDADE ANÁLISE HEURÍSTICA 1 2 3 4 5 Com a profissionalização da disciplina e a descoberta de sua importância, o mercado desenvolveu produtos para medir a satisfação do usuário em termos de facilidade de acesso ao site.
PARA EVITAR... ANÁLISE HEURÍSTICA 1 Formuladas em 1993 por  Jakob Nielsen , este conjunto de descobertas são ainda hoje fundamentais para se identificar falhas de usabilidade. Em geral, este teste é feito por especialistas no assunto, e listam uma série de problemas identificadas em grau de importância. Construir diálogos simples e naturais Falar a linguagem do usuário Minimizar a necessidade de memorização do usuário Manter a consistência Oferecer feedback Identificar claramente as “saídas” Oferecer atalhos Elaborar boas mensagens de erro Evitar a ocorrência de erros Prover ajuda e documentação de apoio
PARA EVITAR... TESTE DE USABILIDADE 2 Podem ser realizados em diversas circunstâncias: Teste de usabilidade presencial individual Teste de usabilidade presencial em grupo Teste de usabilidade via telefone Teste de usabilidade via chat
PARA EVITAR... TESTE DE USABILIDADE 2 Como se dá: Entrevistador apresenta cenário e tarefas. Usuários discutem melhor forma para realizar atividades propostas. Observador faz anotações e registra comentários.
PARA EVITAR... CARD SORTING 3 O processo é feito geralmente antes do início das atividades de Arquitetura de Informação. Os pesquisados são convidados a montarem suas árvores de navegação. Constroem de forma a facilitar o acesso à informação desejada. Considerado altamente eficaz na relação custo x benefício.
CARD SORTING ... para um site
CARD SORTING ... para um aparelho celular da Apple. http://br.youtube.com/watch?v=RTwfz9x98A8
PARA EVITAR... PAPER PROTOTYPE 4 O teste é feito ainda em estágio de wireframes. As páginas impressas são submetidas aos usuários, que registram suas opiniões sobre a formatação das mesmas. Ou, ainda, é possível disponibilizar a ele “elementos de página” e solicitar que o próprio faça a montagem.
PARA EVITAR... PAPER PROTOTYPE 4
PARA EVITAR... PAPER PROTOTYPE 4
PARA EVITAR... PAPER PROTOTYPE 4
PARA EVITAR... EYE TRACKING 5 Certamente, o tipo de teste de maior investimento. Mediante tarefas oferecidas ao usuário, ele observa o site com tendo o movimento de seus olhos monitorados. Alta eficiência! Algumas conclusões dos estudos (modelo  F ): Usuário primeiro lê um movimento horizontal, geralmente a parte de conteúdo superior.  Próximo, usuários descem um pouco e lêem o segundo movimento horizontal  Em seguida, scaneiam o conteúdo da esquerda em um movimento vertical
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5
PARA EVITAR... EYE TRACKING 5 Algumas recomendações: Usuários não lêem seu texto inteiramente palavra-por-palavra . Leitura exaustiva é rara! Os dois primeiros parágrafos devem conter informações mais importantes   Técnica da pirâmide invertida : Inicie cabeçalhos e parágrafos com informações chaves que conduza usuários a escanear verticalmente o conteúdo.
http://www.guilhermo.com/ http://tadificil.wordpress.com/ http://www.dontclick.it/ http://www.usability.com.br/usabilidade.html http://www.usabilidoido.com.br/ http://www.boxesandarrows.com/ ALGUNS LINKS
OBRIGADO! Maurício Moreira [email_address] [email_address]

Mais conteúdo relacionado

Mais procurados

Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
Gustavo Gil
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
Luis Fernando Justus
 
Projetando além da usabilidade
Projetando além da usabilidadeProjetando além da usabilidade
Projetando além da usabilidade
fmemoria
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
Simone Cervantes
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
Vítor Teixeira
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
Victor Rubens
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
Marcelo Vianna
 
Capitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenCapitulo 11 Livro Nielsen
Capitulo 11 Livro Nielsen
Luiz Agner
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
Richard Jesus
 
User experience
User experienceUser experience
User experience
Rafael Souza
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
Tuia
 
Engenharia de Usabilidade
Engenharia de UsabilidadeEngenharia de Usabilidade
Engenharia de Usabilidade
Tiago Souza
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
Ana Migowski
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
Diego Moraes
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
Renato Melo
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
Edu Agni
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
Renato Melo
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrir
UXPA-Rio
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
Edu Agni
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
Jane Vita
 

Mais procurados (20)

Usabilidade e Experiencia do Usuario
Usabilidade e Experiencia do UsuarioUsabilidade e Experiencia do Usuario
Usabilidade e Experiencia do Usuario
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
 
Projetando além da usabilidade
Projetando além da usabilidadeProjetando além da usabilidade
Projetando além da usabilidade
 
Metodologia para Avaliação de Sites
Metodologia para Avaliação de SitesMetodologia para Avaliação de Sites
Metodologia para Avaliação de Sites
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Capitulo 11 Livro Nielsen
Capitulo 11 Livro NielsenCapitulo 11 Livro Nielsen
Capitulo 11 Livro Nielsen
 
UX para agências de publicidade
UX para agências de publicidadeUX para agências de publicidade
UX para agências de publicidade
 
User experience
User experienceUser experience
User experience
 
UX para Startups
UX para StartupsUX para Startups
UX para Startups
 
Engenharia de Usabilidade
Engenharia de UsabilidadeEngenharia de Usabilidade
Engenharia de Usabilidade
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
UX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOSUX - UI DESIGN / MÉTODOS
UX - UI DESIGN / MÉTODOS
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrir
 
Natural User Interface Design
Natural User Interface DesignNatural User Interface Design
Natural User Interface Design
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 

Semelhante a 12° Encontro de WebDesign (usabilidade)

Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
guest479a40
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
Ana Paula Batista
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...
Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...
Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...
Luiz Agner
 
Ux pt2
Ux pt2Ux pt2
O que é user experience
O que é user experienceO que é user experience
O que é user experience
Andersom Alves Laranja
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
Jane Vita
 
Web Standards
Web StandardsWeb Standards
Web Standards
Pedro Tavares
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
eudisnet
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
Renato Melo
 
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Impacta Eventos
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
Ana Paula Coelho Barbosa
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
Horácio Soares
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
iMasters
 
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
Renato Melo
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
Renato Melo
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
Daniel Lugondi
 
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
 
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
Renato Melo
 
Desenvolvendo o produto
Desenvolvendo o produtoDesenvolvendo o produto
Desenvolvendo o produto
Laura Lopes
 

Semelhante a 12° Encontro de WebDesign (usabilidade) (20)

Web 2.0 + Foco no Usuário
Web 2.0 + Foco no UsuárioWeb 2.0 + Foco no Usuário
Web 2.0 + Foco no Usuário
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...
Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...
Jornalismo para plataformas móveis: uma avaliação interdisciplinar de comunic...
 
Ux pt2
Ux pt2Ux pt2
Ux pt2
 
O que é user experience
O que é user experienceO que é user experience
O que é user experience
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
 
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01
 
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)Palestra Experiência do Usuário no contexto do negócio (UX Expert)
Palestra Experiência do Usuário no contexto do negócio (UX Expert)
 
Curso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula CoelhoCurso Marketing Digital Ana Paula Coelho
Curso Marketing Digital Ana Paula Coelho
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester AraujoDesign UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
 
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019UX e UI no Webdesign - Aula 08 - Webdesign - 2019
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
 
UX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuárioUX e UI - Experiência e Interface aplicada no usuário
UX e UI - Experiência e Interface aplicada no usuário
 
Workshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos MóveisWorkshop - Design de Interfaces para Dispositivos Móveis
Workshop - Design de Interfaces para Dispositivos Móveis
 
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
 
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020UX e UI no Webdesign - Aula 02 - Webdesign - 2020
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
 
Desenvolvendo o produto
Desenvolvendo o produtoDesenvolvendo o produto
Desenvolvendo o produto
 

12° Encontro de WebDesign (usabilidade)

  • 1. Usabilidade Visão e processo para implementar projetos com foco no usuário
  • 2. Por que propusemos tratar do tema Usabilidade neste encontro? Ela foi revisitada? Suas formulações teóricas não fazem mais sentido? Descobrimos que Jakob Nielsen é um estudioso ultrapassado? A web 2.0 implodiu os principais conceitos da disciplina? USABILIDADE: de novo esse tema?
  • 3. NADA DISSO JUSTIFICA! O motivo que nos traz aqui para falar um pouco mais sobre o tema é o fato de a Internet ser considerada, cada vez mais, um ambiente de relacionamento e comunicação para as mais diversas audiências. E isto aponta que: A disciplina precisa ser considerada no desenvolvimento de projetos com uma atenção jamais vista! USABILIDADE: de novo esse tema?
  • 4. Vamos então brevemente recapitular o conceito....
  • 6. “ 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.” A TAL USABILIDADE
  • 7. “ 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.” celulares softwares televisão A maçaneta da minha casa A TAL USABILIDADE
  • 8. “ 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.” telespectadores ouvintes internautas Os motoristas A TAL USABILIDADE
  • 9. “ 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.” Hora de ler meus e-mails Acompanhar o sobe e desce da Bolsa de Valores Chegar ao vigésimo andar de elevador A TAL USABILIDADE
  • 10. “ 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 .” Comprei os ingressos com antecedência pela internet. É baba, vai lá. Esse mapa do metrô não ajuda em nada. E agora, não sei falar japonês?! Filho, como eu faço pra esse celular parar de tocar? A TAL USABILIDADE
  • 11. É por isso que os profissionais que desenvolvem produtos interativos (e eles estão ao nosso redor a todo instante) precisam ter o foco na necessidade do usuário: Em seu jeito de agir Seus hábitos adquiridos ao longo do tempo A sua herança comportamental O que eles querem/esperam da vida Mas nem sempre nossos “usuários” são bem cuidados. Por essas e outras, eu digo: O mundo é difícil de usar A TAL USABILIDADE
  • 12. O mundo de quem precisa lavar as mãos é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=xdoc4LaTu_Q
  • 13. O mundo de quem quer sair dos lugares é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=66ShiGK21TA
  • 14. O MUNDO É DIFÍCIL... O mundo de quem quer polivitamínicos também é difícil.
  • 15. O mundo de quem quer comprar TV por assinatura é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=zG3wCr7_DWw
  • 16. Para implementar projetos com foco no interesse do usuário e que leve em consideração boas práticas de usabilidade é importante o alinhamento entre 2 profissionais. ATERRISANDO NA WEB... Os arquitetos de informação Os designers
  • 17. OS ARQUITETOS.... Pegam briefings com cliente e entram na dinâmica de seus produtos e serviços. São responsáveis por organizar os conteúdos. O arquiteto é quem veste a fantasia do usuário prevendo seu comportamento de navegação. Ele monta árvores de navegação (info-estruturas), esboços gráficos da página (wireframes) e fluxogramas de processos. Em seu desktop sempre estão abertos o Visio, o PowerPoint, o Mind Manager. É ele quem entrega ao designers páginas que vão precisar ser desenhadas.
  • 18. OS ARQUITETOS.... Um pouco da sua produção: Infoestrutura Wireframes
  • 19. OS DESIGNERS... São repletos de referências visuais. Têm o papel de traduzir visualmente as estratégias digitais do cliente, seja em um site, hotsite, campanha. Definem conceitos de imagens, tipologias, texturas e grafismos. Trabalham ora com referências rígidas de seus clientes (o que muitas vezes gera um certo grau de insatisfação), ora com liberdade total (o job que todos querem!). Na sua mesa, é fácil encontrar uma tablet pra desenhar. No desktop, o Photoshop, o Flash, o Ilustrator, às vezes o 3D Studio Max. Às vezes, o Second Life!
  • 20. OS DESIGNERS... Um pouco da sua produção:
  • 21. E é do encontro entre estes profissionais que nasce as implementações de Usabilidade. Juntos, eles têm a missão de promover: Facilidade de aprendizado - o usuário rapidamente consegue explorar o sistema e realizar suas tarefas; Eficiência de uso - tendo aprendido a interagir com o sistema, o usuário atinge níveis altos de produtividade na realização de suas tarefas; Facilidade de memorização - após um certo período sem utilizá-lo, o usuário não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele; Baixa taxa de erros - o usuário realiza suas tarefas sem maiores transtornos e é capaz de recuperar erros, caso ocorram; Satisfação subjetiva - o usuário considera agradável à interação com o sistema e se sente subjetivamente satisfeito com ele. O ENCONTRO
  • 22. O ENCONTRO Quando esse encontro traz bons furtos: Comportamento de menus: Uma aplicação para demonstrar que clique vai levar a página interna (>>) Na outra aplicação (com marcador) fica demonstrado o comportamento de sub-menu (>) Além disso o marcador recebe uma diferenciação de indicação E sub-itens apresentados ganham BG escurecido.
  • 23. Quando esse encontro traz bons furtos: Utilização de ALT’s como forma de: Complementar o label disponível Oferecer uma espécie de preview ao que vai ser encontrado O ENCONTRO
  • 24. Quando esse encontro traz bons furtos: Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 1: Página de erro do browser. Pouco atrativa! O ENCONTRO
  • 25. Quando esse encontro traz bons furtos: Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 2: Maior receptividade. Possibilidade de novos caminhos de navegação e interesse. O ENCONTRO
  • 26. Quando esse encontro traz bons furtos: Formas clássicas indicativas de ação: Símbolos de mais e menos. O ENCONTRO
  • 27. Quando esse encontro traz bons furtos: Mecanismo de paginação: Clara identificação de: páginas existentes (4) Quantidade de itens (214) Botões de próximo e anterior “ Over” no botão uma vez que o usuário faz uma determinada ação. O ENCONTRO
  • 28. O ENCONTRO Quando esse encontro traz bons furtos: Utilização de ícones: PONTO POSITIVO: Quando as identificações são de uso popular PONTO NEGATIVO: Ao adotar uma linha visual amparada na criação de ícones, e se começa a expandir para a invenção de formas para os mais diversos temas.
  • 29. Quando esse encontro traz bons furtos: Navegação por abas Bastante positivo para facilitar a visualização de conteúdos numa mesma página. Plataformas desenvolvidas em AJAX permitem que o usuário não carregue a página inteira a cada clique. O ENCONTRO
  • 30. Quando esse encontro traz bons furtos: Consistência e padrões Elementos visuais padronizados ao longo de todo o site, bem como de toda as linhas de produtos da marca corporativa. Menus, Destaques, Brand Image, Padrão de links, Marcadores ect Diminui a curva de aprendizagem do usuário Garante experiência positiva de acessos futuros homepage Ferramentas elétricas Tecnologia automotiva O ENCONTRO
  • 31. Quando esse encontro traz bons furtos: Títulos e boxes A marca-mãe em primeiro plano agregando a ela o nome do serviço/produto a ser apresentado. Garante uniformidade ao longo de toda a navegação. Para o usuário fica “claro” o que são os destaques do site. O ENCONTRO
  • 32. Quando esse encontro traz bons furtos: Identificação por cores Além do menu identificado por cores, o Globo.com traz seus destaques relacionados às áreas também na mesma cor. Com o tempo, o usuário se acostuma com o tom de cada área e se movimenta melhor pelo site. O ENCONTRO
  • 33. Quando esse encontro traz bons furtos: Testeiras (headers) Além de trazer uma experiência mais agradável em termos visuais, ajuda o usuário a se localizar. O ENCONTRO
  • 34. Quando esse encontro traz bons furtos: Agrupamento temáticos Visando orientar a busca por informações. O ENCONTRO
  • 35. O ENCONTRO Quando esse encontro traz bons furtos: Busca por Cloud Tags Para o usuário que deseja fazer uma busca de menor foco, as cloud tags permitem que ele obtenha um overview do que é mais popular dentro de um determinado tema.
  • 36. O ENCONTRO Quando esse encontro traz bons furtos: Dashboard Aplicações de novas tecnologias requerem uma nova curva de aprendizado nova. Uma vez aprendidas, estes novos features só trazem ganhos para os usuários, uma vez que permitem a personalização de sites.
  • 37. Quando esse encontro traz bons furtos: Google Desktop Os documentos vão sendo apresentados a cada nova letra digitada. Permite fazer relações que nem mesmo o usuário imaginasse que pudesse ser feita. O ENCONTRO
  • 39. O DESENCONTRO Agrupamento lógico O Atendimento on-line ao lado do Crédito parcelado? Por que? E essa distância das ações até o footer?
  • 40. O DESENCONTRO Organização visual Para onde ir?
  • 41. O DESENCONTRO Scrol Dois scrolls verticais? Que confusão é essa?
  • 42. O DESENCONTRO Indefinição Escolha uma maneira e vá com ela até o fim!
  • 43. O DESENCONTRO Tela de resposta ao digitar uma palavra-chave na busca e clicar "enter", o usuário vê uma resposta sobre login e senha, referente a outro campo de preenchimento.
  • 44. O DESENCONTRO Perda de navegação Depois de selecionar um deles, o usuário perde toda a navegação.
  • 45. O DESENCONTRO Visualização O Submarino não deixa ordenar por preço. Deixa ordenar por fabricante, por mais vendido, por nome do produto.
  • 46. O DESENCONTRO Labels “ Site index”, neste caso, é o mesmo de “mapa do site”
  • 47. O DESENCONTRO Formulários o usuário tem que usar a tecla tab ou clicar com o mouse para mudar de campo no preenchimento da data.
  • 48. PARA EVITAR... PAPER PROTOTYPE EYE TRACKING CARD SORTING TESTE DE USABILIDADE ANÁLISE HEURÍSTICA 1 2 3 4 5 Com a profissionalização da disciplina e a descoberta de sua importância, o mercado desenvolveu produtos para medir a satisfação do usuário em termos de facilidade de acesso ao site.
  • 49. PARA EVITAR... ANÁLISE HEURÍSTICA 1 Formuladas em 1993 por Jakob Nielsen , este conjunto de descobertas são ainda hoje fundamentais para se identificar falhas de usabilidade. Em geral, este teste é feito por especialistas no assunto, e listam uma série de problemas identificadas em grau de importância. Construir diálogos simples e naturais Falar a linguagem do usuário Minimizar a necessidade de memorização do usuário Manter a consistência Oferecer feedback Identificar claramente as “saídas” Oferecer atalhos Elaborar boas mensagens de erro Evitar a ocorrência de erros Prover ajuda e documentação de apoio
  • 50. PARA EVITAR... TESTE DE USABILIDADE 2 Podem ser realizados em diversas circunstâncias: Teste de usabilidade presencial individual Teste de usabilidade presencial em grupo Teste de usabilidade via telefone Teste de usabilidade via chat
  • 51. PARA EVITAR... TESTE DE USABILIDADE 2 Como se dá: Entrevistador apresenta cenário e tarefas. Usuários discutem melhor forma para realizar atividades propostas. Observador faz anotações e registra comentários.
  • 52. PARA EVITAR... CARD SORTING 3 O processo é feito geralmente antes do início das atividades de Arquitetura de Informação. Os pesquisados são convidados a montarem suas árvores de navegação. Constroem de forma a facilitar o acesso à informação desejada. Considerado altamente eficaz na relação custo x benefício.
  • 53. CARD SORTING ... para um site
  • 54. CARD SORTING ... para um aparelho celular da Apple. http://br.youtube.com/watch?v=RTwfz9x98A8
  • 55. PARA EVITAR... PAPER PROTOTYPE 4 O teste é feito ainda em estágio de wireframes. As páginas impressas são submetidas aos usuários, que registram suas opiniões sobre a formatação das mesmas. Ou, ainda, é possível disponibilizar a ele “elementos de página” e solicitar que o próprio faça a montagem.
  • 56. PARA EVITAR... PAPER PROTOTYPE 4
  • 57. PARA EVITAR... PAPER PROTOTYPE 4
  • 58. PARA EVITAR... PAPER PROTOTYPE 4
  • 59. PARA EVITAR... EYE TRACKING 5 Certamente, o tipo de teste de maior investimento. Mediante tarefas oferecidas ao usuário, ele observa o site com tendo o movimento de seus olhos monitorados. Alta eficiência! Algumas conclusões dos estudos (modelo F ): Usuário primeiro lê um movimento horizontal, geralmente a parte de conteúdo superior. Próximo, usuários descem um pouco e lêem o segundo movimento horizontal Em seguida, scaneiam o conteúdo da esquerda em um movimento vertical
  • 60. PARA EVITAR... EYE TRACKING 5
  • 61. PARA EVITAR... EYE TRACKING 5
  • 62. PARA EVITAR... EYE TRACKING 5
  • 63. PARA EVITAR... EYE TRACKING 5
  • 64. PARA EVITAR... EYE TRACKING 5 Algumas recomendações: Usuários não lêem seu texto inteiramente palavra-por-palavra . Leitura exaustiva é rara! Os dois primeiros parágrafos devem conter informações mais importantes Técnica da pirâmide invertida : Inicie cabeçalhos e parágrafos com informações chaves que conduza usuários a escanear verticalmente o conteúdo.
  • 65. http://www.guilhermo.com/ http://tadificil.wordpress.com/ http://www.dontclick.it/ http://www.usability.com.br/usabilidade.html http://www.usabilidoido.com.br/ http://www.boxesandarrows.com/ ALGUNS LINKS
  • 66. OBRIGADO! Maurício Moreira [email_address] [email_address]