A (falta de) usabilidade presente no cotidiano

Utensílios domésticos, portas, tubo de pasta de dente, entre outros. Quantas coisas do nosso cotidiano apresentam, vez ou outra, dificuldade de utilização? Pois é, a usabilidade, termo tão usual para os profissionais de TI, também deve ser levada em conta para os produtos de nosso dia-a-dia.
E foi justamente pensando nesta falta de usabilidade que Michael J. Darnell criou o BadDesigns.com. O site é uma coletânea de exemplos ilustrados de coisas que são difíceis de utilizar por que elas não seguem os princípios de fatores humanos.
Selecionei algumas "pérolas" de má concepção de itens do nosso cotidiano.

Coisas que não funcionam do jeito que você esperava
Portas são minhas inimigas, por isso selecionei em primeiro lugar justamente essa, rs. Creio que muitos já tenham passado por essa situação, de tentar abrir a porta pelo puxado que está saliente, mas descobre que ela tem uma maçaneta pouco evidente. Pelo senso comum, tendemos a abrir a porta pelo puxador, pois na maioria das portas ele também atua como maçaneta. Outro problema relatado neste exemplo é cada uma das portas funciona de uma maneira. A primeira você precisa puxar para abrir e a segunda precisa empurrar! Ou seja, totalmente inconsistente.

http://www.baddesigns.com/doors.html

Coisas diferentes que são muito similares
Ah, quem nunca teve problemas em encaixar o conector USB do lado certo? Devido a similaridade dos lados do USB, frequentemente erramos ao tentar conectá-lo, mesmo que o fabricante coloque uma indicação de "top" ou o símbolo do USB (que às vezes é difícil de enxergar.

http://baddesigns.com/USB.html

Se o conector pudesse funcionar de qualquer lado ou se fosse assimétrico como o mini-USB (que eu acho bem intuitivo), este problema poderia ser resolvido.

Mini-USB - http://baddesigns.com/USB.html

Coisas que são difíceis de enxergar
Eu já tropecei muitas vezes em locais como os da imagem abaixo, tanto em um degrau de desnível, quanto em escadas que apresentam este mesmo problema. Notem que é quase imperceptível este desnível entre o chão e o palco e este aviso não é uma das melhores soluções. O ideal seria colocar uma sinalização neste degrau.

http://baddesigns.com/step.html

Coisas que não funcionam bem juntas
Um problema recorrente com carregadores de determinados dispositivos é que eles são tão grandes que, em alguns casos, é difícil acertar o encaixe na tomada, principalmente se essa tomada não estiver bem posicionada (há uma tomada em casa junto com interruptores que, toda vez que coloco o carregador do meu tablet, ele apaga ou acende a luz). Na imagem abaixo, não é possível conectar o secador de cabelos porque há um espelho muito próximo da tomada.

http://baddesigns.com/plug.html

Coisas que ficam no caminho

A imagem abaixo mostra a vista da porta de um prédio para a porta de outro. Várias pessoas andam entre estas duas portas. Quem desenhou este pátio tinha em mente que as passagens deveriam ser em torno de ambos os lados do pátio.
Porém, observe o caminho de terra entre as duas portas. As pessoas têm usado este caminho, passando por cima do muro e atravessando o que costumava ser a grama. Este caminho mostra onde a passagem deveria ser.

http://baddesigns.com/path.html

Rótulos que parecem botões
Um problema com controles de elevadores é que os rótulos na linha de baixo de baixo deste exemplo parecem botões. Então, quando você deseja abrir a porta do elevador, você acidentalmente pressionar o rótulo "Door Open" ao invés do botão ao lado. A linha superior de teclas não parecem ter este problema.

http://baddesigns.com/elecon.html

Controles com sugestões conflitantes

Você está sentado em frente à TV, e quer abaixar o som. Você pegar o controle remoto, procura pelo o botão com a seta para baixo e aperta-o. O volume da TV fica mais alto! Você apertou o botão de seta para cima em vez do botão de seta para baixo. Por quê?
A letra "V" para o volume é usada para os dois botões de controle de volume. Apesar de os botões serem em forma de setas para cima e para baixo (para aumentar e diminuir o volume, respectivamente), a letra "V" se parece com uma seta para baixo. Quando você está procurando uma seta para baixo, você vê o "V" como uma seta para baixo, e o pressione. Infelizmente, o primeiro "V" que você vê é a seta para cima!
Uma solução seria utilizar o indicativo de "Vol" ao invés de apenas "V".

http://baddesigns.com/remote.html

Confira mais exemplos no site do BadDesigns.

Leia mais sobre A (falta de) usabilidade presente no cotidiano »

9 técnicas para tabelas mais usáveis no HTML

Este artigo foi originalmente publicado no site UXMovement em 9 Useful Techniques for User-Friendly Table e traduzido livremente.

Tabelas são excelentes para disponibilizar informações. Mas torná-las mais usáveis é um desafio. Uma das razões pela qual é tão desafiador deve-se ao fato de que a grid de uma tabela limita a quantidade informação que você pode disponibilizar em uma célula. Isto significa que você tem que descobrir como exibir as informações que o usuário precisa sem exibir muitas informações (paradoxo, não?). Além disso, quando os usuários leem tabelas, elas precisam mover os olhos na vertical e na horizontal para fazer a varredura da informação. Se na sua tabela não é fácil de fazer a varredura, os usuários podem facilmente perder o foco de leitura entre as linhas e colunas.

As seguintes técnicas de design ajudam a solucionar esses desafios para que os usuários possam ler e processar os dados de suas tabelas com facilidade.

1. Abreviação de Dados

Uma tabela usualmente tem várias colunas, então você não pode fazer com que suas colunas sejam muito extensas. Se fizer isso, você terá uma tabela muito ampla que os usuários terão que rolar horizontalmente para ler. A largura da coluna limita a quantidade de informação que você pode exibir em uma célula da tabela. Este é o lugar onde as abreviações de dados de trabalho de forma brilhante.

É desnecessário mostrar todos os dígitos de um número. Você pode abreviar grandes números, como $ 104.000 para US$ 104k. Você também pode arredondar números grandes, como 45,139% para 45%. Em determinadas situações, abrevie palavras também, como quilos para kg ou horas para h. Isso economiza espaço nas células para que você possa fazer suas colunas mais compactas e a tabela mais fácil de ler.

2. Tool Tip para Valores Exatos

As abreviação de dados ajuda a condensar as informações. Mas às vezes os usuários precisarão de ver o valor exato de um número, ou o resto de uma palavra truncada. Esta é a situação onde tool tips são úteis. Como os usuários passam o mouse em mais de uma célula, uma tool tip pode exibir o valor exato de um número arredondado, sem ocupar espaço. Eles também podem exibir o texto completo para as células com as palavras truncadas.

3. Setas para a Exibição de Linhas Ocultas

É importante fazer com que as colunas sejam mais compactar, mas também é importante tornar as linhas curtas. Incluindo informações demais nas linhas da tabela pode tornar a sua tabela demasiadamente longa e desanimadora de ler. Use setas para a exibição de linhas ocultas como forma encurtar a altura de suas linhas e a quantidade de informações exibidas. Os usuários verão primeiro as informações de alto nível em uma linha. Mais informações serão exibidas quando o usuário solicitar clicando na seta desta linha para exibir o conteúdo aninhado.

4. Cabeçalhos Persistentes

Outra coisa ruim sobre tabelas extensas é que você perde os cabeçalhos de coluna quando você realiza a rolagem. É difícil para os usuários saber qual a informação que eles estão lendo sem ver o cabeçalho da coluna. Cabeçalhos persistentes resolvem este problema. Na rolagem, os cabeçalhos persistentes permanecem visível ao usuário para que ele possa consultá-la sem ter que percorrer todo o caminho de volta ao topo.

5. Linhas "Zebradas"

Quando os usuários leem uma determinada linha, seu olhar podem facilmente se perder e, acidentalmente, cair em uma linha adjacente. O usuário precisa de um guia visual para ajudá-los a permanecer na sua linha que ele está lendo. Linhas zebradas ajudam os usuários a guia a forma com a qual eles movem os olhos em cada linha. Cada linha alternada apresenta uma tonalidade diferente para que os usuários não troque a linha que ele está olhando para uma linha adjacente.

6. Numere Cada Linha

Você pode tornar sua tabela ainda fácil ler numerando cada linha. Isso permite aos usuários referir-se a uma linha pelo seu número. Ela também ajuda os usuários a verificar as linhas sem perder o seu lugar à medida que progridem na leitura. Linhas numeradas informam aos usuários quantas linhas há na tabela para que eles possam ter uma noção da densidade de informação presente.

7. Agrupe Linhas em Categorias

Quanto mais informações você tiver em sua tabela, mais linhas você terá inevitavelmente. Uma outra dica para melhorar essa questão é agrupar as linhas em categorias. As categorias podem inclusive apresentar setas para que os usuários possam mostrar e ocultar linhas para economizar espaço.

8. Setas de Ordenação

Setas para exibição de linhas aninhadas permitem aos usuários controlar a quantidade de informação que a tabela exibe. Mas setas de ordenação permitem aos usuários controlar a forma como a tabela classifica e ordena a informação. Use as setas nos cabeçalhos das colunas para que os usuários possa classificar cada coluna por ordem ascendente ou descendente. Isso permite aos usuários ver os dados do número maior para o menor, ou dados de texto por ordem alfabética. As setas devem reordenar uma coluna quando o usuário clica no cabeçalho da coluna (importante: não fazer apenas o ícone clicável, mas toda a coluna).

9. Acessibilidade


A maioria das tabelas são difíceis para os usuários lerem. Mas elas são ainda mais difícil para os usuários com deficiência se elas não forem acessíveis a leitores de tela. Quando você torna suas tabelas acessíveis, os usuários com deficiência poderão ler as informações da tabela em uma ordem adequada e compreensível.

Para isso, comece adicionando o atributo summary e a tag caption. Estes elementos fornecem aos usuários uma visão geral do conteúdo da tabela. O atributo summary provê uma ampla descrição da tabela, e a tag caption provê o título da tabela. Eles devem ser a primeira informação a ser inserida logo depois da tag table.

Indique os cabeçalhos de linha e coluna usando determinadas tags e também de células de dados usando tags apropriadas. Depois disso, você vai precisar para associar as células com os cabeçalhos correspondentes. Use o atributo scope para isso. O atributo scope diz o leitor de tela que tudo sob uma coluna se relaciona com o cabeçalho no topo, e tudo à direita de um cabeçalho de linha se relaciona com esse cabeçalho.

Conclusões

Há muitos desafios envolvendo o design de tabelas. As técnicas apresentadas são tudo que você precisa para tornar suas tabelas mais usáveis e fáceis de ler. Quando os usuários são capazes de usar sua tabela e obter a informação que necessitam sem aborrecimentos, isso torna-as mais produtivas e eficientes. E é exatamente isso que um bom design deve possibilitar.

Leia mais sobre 9 técnicas para tabelas mais usáveis no HTML »

Minicurso de prototipação em papel na Jornada de Informática da UNESP-Bauru

A Faculdade de Ciências da Unesp, campus de Bauru, por meio do Departamento de Computação, promoverá a XII Jornada de Informática. O evento será realizado entre nos dias 21, 22, 23 de setembro na FunDeB (Fundação para o Desenvolvimento de Bauru) e no LEPEC (Laboratório de Ensino, Pesquisa e Extensão em Computação) situados no campus da Unesp de Bauru.

O objetivo da jornada é apresentar por meio de palestras e minicursos novas técnicas e metodologias desenvolvidas atualmente proporcionando a todos contato com novas tecnologias e a integração com o mercado de trabalho.

Eu estarei participando da Jornada juntamente com a Livia Gabos ministrando um minicurso de prototipação em papel no dia 23/09 das 19h às 22h40.

Entre os demais destaques da programação, haverá palestras e minicursos com a Cissa Gatto (GarotasCPBr), Junia Anacleto (minha orientadora de mestrado da UFSCar), Bruno Penteado (MSTech), Maurício Alegretti e outros.

Fique atento à abertura das inscrições e participem ;)

Leia mais sobre Minicurso de prototipação em papel na Jornada de Informática da UNESP-Bauru »

O que é IHC? - parte III

Nas partes I e II, foram delineadas as definições, princípios e critérios da IHC. A identificação destes critérios deve ser realizada nas etapas de modelagem da interface, que veremos nesta última parte da série.

Modelagem de IHC

A modelagem de IHC compreende os processos para o projeto das interfaces, visando especificar os requisitos e descrever a interface através de um protótipo (OLIVEIRA NETTO, 2004).


Modelo de Tarefa

Fonte: http://www.foviance.com/what-we-do/usability-services/usability/

O modelo de tarefa propõe-se a formalizar e mapear as tarefas na interface a serem realizadas pelos usuários de acordo com a visão deles (OLIVEIRA NETTO, 2004). Este mapeamento geralmente envolve:

• A identificação das metas do usuário no sistema;
• A identificação da sequência de passos para atingir a metas;
• As eventuais condições que definem qual passo deve ser seguido.

Modelo de Interação

O modelo de interação confere a sequência da modelagem de tarefa. Enquanto o modelo de tarefa mapeia das atividades que os usuários realizarão no sistema, o modelo de interação define como a condução para a realização destas tarefas deve ser projetada na interface para permitir que seja eficiente e de fácil utilização. Nesta etapa, é necessário compreender qual o design apropriado para atender as necessidades do usuário na utilização do sistema (PREECE; ROGERS; SHARP, 2002).

Os modelos de interação focam no design da interface de sistemas interativos e como eles irão responder e se comunicar reciprocamente com o usuário, de modo a permitir que ele realize as tarefas de modo fácil, intuitivo e eficiente.

Modelo de Conteúdo

O modelo de conteúdo refere-se ao modo como os fragmentos de conteúdo presentes na interface estarão organizados e interconectados de modo coeso e lógico. Ele deve fazer com que a arquitetura de informação aplicada a cada um destes fragmentos gere uma unidade de informações que, em conjunto, formem o contexto da interface (MORVILLE; ROSENFELD, 2007).

A grande quantidade de conteúdo em uma interface pode ser facilmente acumulada, porém, vincular este conteúdo de modo útil é extremamente difícil. Portanto, os modelos de conteúdo compreendem conjuntos consistentes de objetos e a conexão lógica que há entre eles para que possam funcionar (MORVILLE; ROSENFELD, 2007).

Isto envolve definir como as informações serão apresentadas, qual a quantidade e os tipos de recursos de hipermídia necessários e como ela conduz a navegação para outras páginas e conteúdos.

A intenção é fazer com que todo conteúdo importante seja fácil de encontrar e possa estar visivelmente relacionado a outros conteúdos da aplicação permitindo ao usuário uma fluidez na navegação e no percurso entre as páginas.

Modelo de Interface

O modelo de interface consiste na representação gráfica dos componentes de interface, suas telas e seu modelo de navegação. Envolve também a prototipagem rápida das janelas e diálogos da interface (CYBIS; BETIOL; FAUST, 2007). A intenção da modelagem de interface é esboçar os principais componentes gráficos necessários para orientar o usuário na realização de suas tarefas e comunicar a mensagem do sistema ao usuário.

Referências

AGNER, L. Ergodesign e arquitetura de informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 2006. 176 p.

CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.

HEWETT, T., et al. ACM SIGCHI Curricula for Human-Computer Interaction, [S.l.], 1992. Chapter 2: Human-Computer Interaction, Disponível em: http://old.sigchi.org/cdg/cdg2.html

HITOSHI. Departamento de Ciência da Computação da Universidade de São Paulo. [S.l.], 2005. Princípios da Interação Humano-Computador. Disponível em: http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf

MORVILLE, P.; ROSENFELD, L. Information Architecture for the World Wide Web. 3. ed. Sebastopol, California: O’Reilly Media, 2007. 504p.

NIELSEN, J. UseIt. [S.l.], 2005. Ten Usability Heuristics. Disponível em:  http://www.useit.com/papers/heuristic/heuristic_list.html

NIELSEN, J.; LORANGER, H. Usabilidade na Web: Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.

OLIVEIRA NETTO, A. A. IHC – Interação Humano Computador: Modelagem e Gerência de Interfaces com o Usuário. Florianópolis: VisualBooks, 2004. 120p.

PREECE, J.; ROGERS; Y.; SHARP, H. Interaction Design: Beyond Human-Computer Interaction. New York: John Wiley & Sons, Inc., 2002. 551p.

ROCHA, H. R.; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces Humano-Computador. Campinas: Universidade Estadual de Campinas, 2007.

Leia mais sobre O que é IHC? - parte III »

O que é IHC? - parte II

Na primeira parte desta série de artigos, abordei as definições da Interação Humano-Computador. Neste artigo, apresento um pouco mais sobre os princípios da IHC.

Princípios da Interação Humano-Computador

Fonte: http://taylandiaalmeida.blogspot.com/

Os princípios de IHC focam principalmente na facilidade de uso dos sistemas computacionais interativos. A diversidade destes princípios definidos por Nielsen e Loranger (2007), Nielsen (2005) e Cybis, Betiol e Faust (2007) podem ser resumidas nos seguintes critérios estabelecidos pela ISO 9241 (HITOSHI, 2005), que, não coincidentemente, são os mesmos da usabilidade:

• Facilidade de aprendizado: a utilização requer pouco treinamento;
• Fácil de memorizar: o usuário deve lembrar como utilizar a interface depois de algum tempo;
• Maximizar a produtividade: a interface deve permitir que o usuário realize a tarefa de forma rápida e eficiente;
• Minimizar a taxa de erros: caso aconteçam erros, a interface deve avisar o usuário e permitir a correção de modo fácil;
• Maximizar a satisfação do usuário: a interface deve dar-lhe confiança e segurança.

Com a diversidade existentes de usuários, é necessário que a interface possam abordar estes critérios de modo individualizado segundo o perfil de cada utilizador, pois determinados fatores podem ser mais críticos para um grupo específico de usuários de um sistema interativo. A identificação destes critérios deve ser realizada nas etapas de modelagem da interface.

Referências

AGNER, L. Ergodesign e arquitetura de informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 2006. 176 p.

CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.

HEWETT, T., et al. ACM SIGCHI Curricula for Human-Computer Interaction, [S.l.], 1992. Chapter 2: Human-Computer Interaction, Disponível em: http://old.sigchi.org/cdg/cdg2.html

HITOSHI. Departamento de Ciência da Computação da Universidade de São Paulo. [S.l.], 2005. Princípios da Interação Humano-Computador. Disponível em: http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf

MORVILLE, P.; ROSENFELD, L. Information Architecture for the World Wide Web. 3. ed. Sebastopol, California: O’Reilly Media, 2007. 504p.

NIELSEN, J. UseIt. [S.l.], 2005. Ten Usability Heuristics. Disponível em:  http://www.useit.com/papers/heuristic/heuristic_list.html

NIELSEN, J.; LORANGER, H. Usabilidade na Web: Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.

OLIVEIRA NETTO, A. A. IHC – Interação Humano Computador: Modelagem e Gerência de Interfaces com o Usuário. Florianópolis: VisualBooks, 2004. 120p.

PREECE, J.; ROGERS; Y.; SHARP, H. Interaction Design: Beyond Human-Computer Interaction. New York: John Wiley & Sons, Inc., 2002. 551p.

ROCHA, H. R.; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces Humano-Computador. Campinas: Universidade Estadual de Campinas, 2007.

Leia mais sobre O que é IHC? - parte II »

O que é IHC? - parte I

A Interação Humano-Computador (IHC) é uma disciplina que diz respeito ao design, avaliação e implementação de sistemas de computação interativos para uso humano em um contexto social e com os estudos dos principais fenômenos que os cercam (HEWETT et al, 1992).

A IHC atualmente é uma ciência multidisciplinar, que engloba diversas áreas como: Ciência da Computação, Psicologia Cognitiva, Psicologia Organizacional e Social, Ergonomia e Fatores Humanos, Engenharia, Design, Antropologia, Sociologia, Filosofia, Linguística e Inteligência Artificial (PREECE, 1994 apud OLIVEIRA NETTO, 2004). O conjunto de todas estas áreas visa apoiar de forma sistemática diversas etapas e procedimentos das metodologias de Interação Humano-Computador, uma vez que esta é uma área que trabalha tanto com aspectos de competência da ciências exatas (os sistemas computacionais) quanto com os aspectos físicos, psicológicos e comportamentais dos indivíduos, considerando também o contexto social em que um determinado sistema se insere para seus usuários.

Fonte: http://www.deepamehta.de/docs/hci.html

O principal objetivo da IHC é estudar e definir métodos para o projeto de sistemas ou dispositivos que sejam de fácil utilização, eficientes, eficazes e que possibilitem conforto aos indivíduos que irão utilizá-los. Ela visa compreender como e porque uma pessoa utiliza determinada tecnologia (AGNER, 2006), considerando fatores culturais, cognitivos, emocionais, sensoriais e intelectuais (CYBIS; BETIOL; FAUST, 2007).

O estudo da IHC ainda envolve quais os impactos de uma determinada tecnologia na vida das pessoas e como a interação deve ser abordada para oferecer conforto, bem-estar e facilidade de uso (PREECE; ROGERS; SHARP, 2002).

Portanto, um dos princípios da IHC é tratar como o usuário se comunica com a máquina e como a tecnologia responde à interação do usuário. Além disso, Rocha e Baranauskas (2007) apontam como meta da IHC o desenvolvimento e aprimoramento de sistemas computacionais nos aspectos de segurança, usabilidade, efetividade e utilidade.

Pode-se considerar que o enfoque da IHC se concentra em três principais aspectos (OLIVEIRA NETTO, 2004; CYBIS; BETIOL; FAUST, 2007; PREECE; ROGERS; SHARP, 2002; ROCHA; BARANAUSKAS, 2007):

• Usabilidade: os fatores que tornam um produto de fácil utilização, sendo a característica que mensura o grau de satisfação de um usuário ao interagir com uma interface humano-computador;
• Critérios Ergonômicos de interface: fatores humanos aplicados à interface humano-computador, sendo o ajuste ao suporte físico do usuário. Abrange o conforto físico e psicológico dos suportes interativos e caracteriza-se por adequar as tarefas à necessidade do homem, de modo a trazer conforto e segurança em uma interação agradável;
• Design de Interação: aprofunda o conceito da facilidade de uso e ergonomia de interfaces, com foco em prover uma experiência agradável e de fácil aprendizado considerando onde e por quem a tecnologia será utilizada. O objetivo principal no projeto de interfaces é permitir que o usuário realize as tarefas de maneira fácil e que a interface responda de modo esperado dentro da expectativa do usuário.

A intersecção destas três abordagens compõe os principais paradigmas de IHC da atualidade.


Referências

AGNER, L. Ergodesign e arquitetura de informação: trabalhando com o usuário. Rio de Janeiro: Quartet, 2006. 176 p.

CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações. São Paulo: Novatec Editora, 2007. 344p.

HEWETT, T., et al. ACM SIGCHI Curricula for Human-Computer Interaction, [S.l.], 1992. Chapter 2: Human-Computer Interaction, Disponível em: http://old.sigchi.org/cdg/cdg2.html

HITOSHI. Departamento de Ciência da Computação da Universidade de São Paulo. [S.l.], 2005. Princípios da Interação Humano-Computador. Disponível em: http://www.cefet-to.org/~focking/Projeto%20de%20Interfaces/aula01-Introducao.pdf

MORVILLE, P.; ROSENFELD, L. Information Architecture for the World Wide Web. 3. ed. Sebastopol, California: O’Reilly Media, 2007. 504p.

NIELSEN, J. UseIt. [S.l.], 2005. Ten Usability Heuristics. Disponível em:  http://www.useit.com/papers/heuristic/heuristic_list.html

NIELSEN, J.; LORANGER, H. Usabilidade na Web: Projetando Websites com qualidade. Rio de Janeiro: Elsevier, 2007. 406p.

OLIVEIRA NETTO, A. A. IHC – Interação Humano Computador: Modelagem e Gerência de Interfaces com o Usuário. Florianópolis: VisualBooks, 2004. 120p.

PREECE, J.; ROGERS; Y.; SHARP, H. Interaction Design: Beyond Human-Computer Interaction. New York: John Wiley & Sons, Inc., 2002. 551p.

ROCHA, H. R.; BARANAUSKAS, M. C. C. Design e Avaliação de Interfaces Humano-Computador. Campinas: Universidade Estadual de Campinas, 2007.

Leia mais sobre O que é IHC? - parte I »

5 Ferramentas gratuitas para a criação de wireframes

Os wireframes são artefatos da etapa inicial de Arquitetura de Informação e definição da interface, sendo um componente importante para apresentar a disposição do conteúdo e os links para as principais páginas de um website.
Eles provêem uma visão da organização do conteúdo na interface do website. É possível notar através deles o comportamento do menu de navegação e a distribuição dos principais conteúdos que compõem a interface, porém, sem muito detalhe a nível gráfico.
As ferramentas mais conhecidas para a construção de wireframes são proprietárias: Microsoft Office Visio, Omnigraffle e Axure. Mas nos último anos têm surgido ótimas alternativas gratuitas e, inclusive, online. Selecionei 5 (versões de) ferramentas gratuitas e profissionais para que você possa construir wireframes de qualidade e aproveitar o potencial que eles possuem para o projeto de websites.

1. MockFlow
A melhor ferramenta online que eu testei. Fácil de usar, com diversos recursos e componentes. Permite o compartilhamento do wireframe, utilização de grid, guias, régua e exportação como blueprint (formato semelhante àquelas plantas azuis de engenharia) e preto e branco. Infelizmente a versão gratuita permite criar apenas um mockup, porém, com múltiplas páginas. Possui também a versão stand-alone.

2. Mockingbird
O Mockinbird é uma ferramenta online que facilita a criação, visualização e compartilhamento dos wireframes de seu site ou aplicação.

3. Lovely Charts
É uma ferramenta online disponível para instalação no Chrome que permite não somente a criação de wireframes, mas também de sitemaps, fluxogramas, organogramas, e muito mais. A única desvantagem é que nessa versão gratuita você pode salvar apenas 1 gráfico editável, mas pode exportar ilimitadamente.

4. Balsamiq Mockups
O Balsamiq é uma ferramenta bem conhecida. A versão paga é desenvolvida em Adobe Air, mas você pode testar uma versão de demonstração online que permite exportar para PNG, PDF e XML.

5. Cacoo
Cacoo é uma ferramenta com interface amigável, uma boa quantidade de recursos e versão em português. Assim como o Lovely Charts, ele também permite a criação de diversos tipos de diagramas, inclusive UML e é completamente free.

Tem alguma dica? Publique nos comentários, quem sabe não sai a parte 2 ;)

Não deixe de conferir também outras opções neste post do Mashable que eu encontrei ontem.

Leia mais sobre 5 Ferramentas gratuitas para a criação de wireframes »

Divulgação: Minicursos sobre HTML5 e Prototipação de Interfaces

Caros leitores,
Tenho abandonado estado ausente do blog, pois o mestrado tem tomado todo o meu tempo, pelo menos neste primeiro semestre onde há mais créditos de disciplinas.
Mas volto brevemente com boas notícias. Entre os dias 18 e 20 de maio estarei ministrando 2 minicursos. Será um na UNESP de São José do Rio Preto e outro na USC em Bauru (minha terrinha querida, da qual sinto saudades imensas durante a semana #emofeelings). Confiram mais detalhes abaixo.

Avaliação interfaces com o usuário através de prototipação

Evento: XXI Semana da Computação
Onde: UNESP - São José do Rio Preto
Data: 18 de Maio de 2011 (quarta-feira), das 18h30 às 22h30
Site do evento: http://www.semac.sjrp.unesp.br/
Sobre o minicurso: Protótipos são esquematizações ou desenhos de um produto que serverm para avaliarmos, antes de ir para a produção,se existe algum problema ou mudança a ser feita. Economizando tempo e dinheiro de qualquer tipo de projeto. A construção de protótipos permite avaliar se a interface atende aos requisitos do projeto e se ela é de fácil utilização pelos usuários, sendo um artefato de grande importância para testes de usabilidade. Neste minicurso serão abordados conceitos de usabilidade, prototipação de interfaces e como avaliar o protótipo com moderação de testes através de uma atividade prática. A idéia é que, ao final, os participantes saibam construir um protótipo e verificar a qualidade do projeto com usuários finais, através dos teste de usabilidade.
Este minicurso é uma parceria entre eu e Livia Gabos, analista de testes na MSTech e amiga de longa data, desde os tempos de estágio nos Correios.

HTML 5 e as novas tecnologias de desenvolvimento web

Evento: Jornada de Informática

Onde: USC (Universidade do Sagrado Coração) - Bauru

Data: 20 de Maio de 2011 (sexta-feira), das 19h às 22h15, Laboratório F15

Site do evento: http://www.usc.br/eventos_usc/jornadadeinformatica/index.html

Sobre o minicurso: O HTML 5 é a nova especificação do HTML em desenvolvimento pelo W3C e propõe melhorias à semântica, uso de hipermídia, usabilidade e acessibilidade de páginas web, juntamente com outras linguagens como CSS e JavaScript. Neste minicurso serão abordadas as principais mudanças semânticas de elementos e atributos, o que muda com o HTML 5 em termos de padrões web, as tecnologias adjacentes que atuam em conjunto com a linguagem e alguns exemplos de aplicações e jogos desenvolvidos em HTML 5, além de um exercício prático.

Os dois eventos têm palestras e minicursos muito interessantes, é uma grande oportunidade de aprendizado e networking!

Até a próxima pessoAll!

Leia mais sobre Divulgação: Minicursos sobre HTML5 e Prototipação de Interfaces »

Bibliotecas de Padrões de Interface: fontes de pesquisa e inspiração

Certa vez, em uma discussão do meu grupo de pesquisa da UFSCar a respeito da definição de "patterns", minha orientadora finalizou com o seguinte: "Pessoal, pattern é uma solução de sucesso para um problema recorrente". Até então nunca tinha ouvido uma definição tão pontual e objetiva sobre pattern. Esta é uma proposição - resumida - advinda do livro "Design Patterns: Elements of Reusable Object-Oriented Software" (Gamma et al., 1995), que se refere a padrão de projeto de software orientado a objetos mas é perfeitamente aplicável ao design de interface (design pattern possui uma tradução ambígua: padrão de projeto ou padrão de desenho/design).

Pattern difere de "standard", que também significa "padrão", mas remete à um modelo normativo. Um pattern não é exatamente uma norma, mas sim uma solução comprovada para um problema conhecido e recorrente e é usualmente composto pelo problema, o contexto (ou cenário) de ocorrência do problema, o contexto de aplicação da solução (quando usar) e a solução proposta.

Bibliotecas de patterns para design de interface/interação são úteis como fonte de inspiração e pesquisa quando precisamos projetar um determinado recurso ou elemento da interface. É uma base de conhecimentos onde podemos ter um norteamento sobre soluções que atendem às expectativas do usuário e proporcionam boas experiências de uso. Existem diversos sites que catalogam patterns para interface, alguns são colaborativos e abertos a qualquer pessoa que deseja constribuir com um patterns, enquanto outros são desenvolvidos por uma comunidade mais restrita de especialistas.

Abaixo listei 5 bibliotecas de padrões de interface que são bem conhecidas e as melhores, na minha opinião, por terem bons exemplos e explanações.

UI Patterns

Patternry

Pattern Tap

O site possui bons exemplos mas não tem textos explicando o uso dos padrões enviados.

Yahoo! Design Pattern Library

Designing Interfaces

Este é o site do livro "Designing Interfaces - Patterns for Effective Interaction Design" de Jenifer Tidwell e contém praticamente todos os patterns apresentados no livro que, aliás, é muito bom :)

Para saber mais sobre Design Patterns de forma geral:

http://www.slideshare.net/gscheibel/design-patterns
http://wiki.sintectus.com/bin/view/GrupoJava/IntroducaoArquiteturaDeCamadas

Leia mais sobre Bibliotecas de Padrões de Interface: fontes de pesquisa e inspiração »

Nova enciclopédia online de Design de Interação, Usabilidade e Experiência do Usuário

Fiquei sabendo deste site através da minha orientadora de mestrado da UFSCar. O site Interaction-Design.org acabou de lançar uma enciclopédia online disponível gratuitamente que aborda Design de Interação, Usabilidade  e Experiência do Usuário.

Diferentemente do Corais.org (plataforma brasileira onde qualquer pessoa pode compartilhar seus conhecimentos sobre Design) e da Wikipédia, a enciclopédia do Interaction-Design.org toma o caminho inverso: todos as entradas são escritas por figuras renomadas que inventaram ou contribuíram significativamente para cada tópico. A enciclopédia também conta com recursos de vídeos.

Segundo o Interaction-Design.org, a intenção é democratizar o acesso a materiais educativos.

Gostei desta iniciativa e os tópicos ainda contam com links para outros recursos online, livros, artigos científicos e, em alguns casos, até históricos de conferências sobre o assunto. Ainda há poucos tópicos disponíveis, mas espero que eles insiram novos tópicos, afinal, assunto é o que não falta quando se fala em Design de Interação e áreas correlatas.

Leia mais sobre Nova enciclopédia online de Design de Interação, Usabilidade e Experiência do Usuário »

Tutorial de Prototipagem em Papel

Para quem ficou interessado em saber mais sobre como fazer prototipagem em papel, depois de ler sobre a Oficina de Design de Interação na CPBr, dêem uma olhada no vídeo abaixo, preparado pelo pessoal do LTIA-Unesp (Laboratório de Tecnologia da Informação Aplicada), aqui de Bauru. É um tutorial muito interessante, rápido e divertido. Dá para ter uma boa noção de como fazer e aplicar testes em protótipo de papel.

Recebi esse vídeo pelo Henrique Perticarati, estudante da Unesp-Bauru e membro do LTIA. Até o tio Jakob Nielsen (ou Jakozão, como diria o designer Felipe Memória) assistiu a este vídeo, que foi enviado a ele pelos estudantes.

Leia mais sobre Tutorial de Prototipagem em Papel »

Direto da Campus Party 2011 - Oficina "Design de Interação - além do lápis e papel"

A melhor oficina que participei na Campus Party foi, sem dúvida, "Design de Interação - além do lápis e papel", ministrada por Tássia Spinelli e Rafaela Rei, ambas arquitetas de informação no iG.

Para chamar a atenção do público, primeiro elas mostraram um slide com imagem do iPhone, clichê em muitas apresentações, mas logo elas explicaram porque. o iPhone é característico pela sua facilidade de uso e, por este e outros motivos, é desejo de consumo de muitas pessoas. Isto porque ele foi planejado, projetado, desenhado e prototipado.

A importância do protótipo em papel, segundo Spinelli e Rei, é que ele se apresenta uma forma simples, rápida e barata para testar e garantir bons resultados, além de ser uma das melhores ferramentas para desenhar ótimas experiências de uso. Os principais benefícios são: fácil execução; forma rápida de incorporar feedback no momento de produção; os participantes dos testes se sentem mais à vontade criticando um protótipo em papel; há economia de tempo e dinheiro. E tem a grande vantagem de que você não precisa se preocupar com a fidelidade do design. Isso acaba tirando o foco do usuário durante o teste, ele acaba se preocupando em apontar mais questões de design do que problemas de funcionalidade. O foco do protótipo é analisar o fluxo de interação e a dificuldade de realização de tarefas, permitindo maior abstração destes quesitos.

O protótipo em papel é um ambiente simples para testar usabilidade, mas também deve ter uma planejamento. É preciso definir o público, as interfaces a serem testadas e as atividades a serem realizadas. Depois, os protótipos são desenhados e os testes são aplicados sob a supervisão do moderador e do observador. Para ter uma noção mais clara, as oficineiras exibiram o vídeo Paper Prototyping at Work.

Elas também deixaram claro o que não é protótipo:

• Quadro branco: é mais utilizado pra brainstorming, não é interativo e apenas apresenta um rascunho de ideias. Protótipo não é um rascunho, não é a primeira ideia que vem em mente, é um refinamento destas ideias sob um planejamento;
• Storyboard: apenas narra a ideia de interação. Mesmo que seja feito em papel, protótipo é funcional apenas é testado com o usuário e a intenção do storyboard não é essa;
• Prancha;
• Wireframe: são mais demorados e mais elaborados, geralmente não servem muito bem em outras etapas, pois há grande preocupação com detalhes de estrutura e fonte. Se for impresso, pode até servir como um protótipo funcional.

Os seguintes mitos também foram derrubados durante a oficina:

1. Protótipo deve ser bonito: não. Antes de tudo, um protótipo é uma simulação de interface, tem que ser vivo, não tem que ser bonito;
2. "Só sei desenhar direto no layout";
3. "Não parece profissional": profissional é envolver as pessoas desde o início do projeto, não fazer um protótipo de alta fidelidade;
4. "Meu chefe não irá entender";
5. "Prototipar depende da plataforma";
6. "Impossível simular interatividade com papel": é possível sim e muito bem :)

E para começar a fazer o protótipo é preciso pensar que a proposta da prototipação é propor ideias e trazer feedback mais rapidamente. Respondendo à algumas dúvidas da plateia, Spinelli e Rei esclareceram que o protótipo e seu benefício não são mensuráveis como um produto entregável. Elas também responderam que a responsabilidade sobre do protótipo ou wireframe é de toda a equipe, deve envolver todos os profissionais, não há "quem fale mais alto" nesse momento, é um processo de negociação com designers, arquitetos de informação e programadores.

Ao final da oficina foi proposta uma atividade prática pra prototipar um aplicativo do iG para iPhone. Ninguém se manifestou na plateia, acredito que todo mundo tenha ficado um pouco receoso de não conseguir dar conta, pois eu também fiquei assim. Conforme o pessoal foi saindo, eu continuei na plateia e fui chamada, junto com um pessoal para fazer a atividade. Estávamos em 6 pessoas e dividimos em 2 grupos de 3. Cada grupo teria que prototipar o aplicativo do canal Zoom para o iPhone e depois cada grupo elegeria o moderador e o observador para testar até 2 atividades do aplicativo com um "usuário" do outro grupo.

Quebramos muito a cabeça para definir uma interface simples e que pudesse refletir as principais ações desejadas pelos usuários no aplicativo. É interessante como o trabalho de prototipação é mais complexo, pois você precisa desenhar todo o fluxo de interação, por exemplo, "se o usuário clicar aqui, mostro a tela X, se na tela X ele clicar no botão Y, vai para Z, se clicar no W, vai para o K" e assim por diante. Spinelli e Rei foram super atenciosas e nos orientaram muito bem durante o teste com usuário, dando dicas do que não pode ser falado durante o teste com moderação, como apresentar o protótipo para o usuário, como incentivá-lo a narrar a interação, etc.

O mais surpreendente foi ver como cada equipe pensou a interface de forma completamente diferente. E, pra completar, eu e os colegas de oficina, novos amigos, fomos rachar uma pizza depois da oficina e no sábado também.

Leia mais sobre Direto da Campus Party 2011 - Oficina "Design de Interação - além do lápis e papel" »

Direto da Campus Party 2011 - Palestra "Social Interface Design"

Logo após a oficina sobre CSS3, Eduardo Agni apresentou a palestra "Social Interface Design", uma abordagem mais humana sobre o design de interface, visando aproximar as pessoas e permitir que elas interajam sobre um conteúdo ou um produto.

Passado um histórico sobre a evolução da interação entre usuários e computadores, Agni chegou na usabilidade, a área de estudos sobre facilidade de uso entre humanos e interfaces de software/hardware. Enquanto a usabilidade ainda trata mais a interação baseada em tarefas, os seres humanos, na verdade, respondem socialmente em suas interação com as máquinas, independente da facilidade de uso. O Napster foi um dos softwares mais utilizados durante a sua época e, apesar de ter falhas de usabilidade e uma interface confusa, ganhou a adesão da comunidade por possibilitar uma interação entre pessoas, através do compartilhamento de arquivos. O importante não era o software em si e a realização das tarefas, mas a cooperação e interação entre os usuários, que torna a interface transparente, pois ela se torna apenas um artefato de intermédio entre a interação humano-humano.

É o mesmo caso do Facebook. Mark Zuckerberg não entendia de interfaces, mas ele observava as interações sociais, que informações as pessoas queriam saber umas das outras e tinha a preocupação de que o Facebook fosse um ambiente legal para as pessoas, oferecendo interações que as pessoas desejavam. O Flickr, a rede social de fotografia mais utilizada no mundo, tinha componentes sociais que seus concorrentes na época não possuiam, o que possibilitou o destaque sobre estas outras ferramentas. No Mercado Livre, mais do que estar atento aos produtos, é poder ver a reputação do vendedor que está oferecendo este produto, e esta reputação é construída pelos outros compradores e as pessoas compram de quem tem a melhor reputação.

A usabilidade é muito importante, mas se um aplicativo faz o que as pessoas querem, mesmo tendo uma interface difícil, ele ainda será um sucesso. Se uma aplicação é fácil de usar, mas não faz o que as pessoas querem, ele será um fracasso. Mas a usabilidade é um diferencial. Se temos duas aplicações que fazem exatamente a mesma coisa, mas uma tem uma interface mais fácil e menos intrusiva, com certeza o sucesso dela será maior, basta observar sites como o Facebook e Flickr, que, além da funcionalidade, também tem o cuidado com a facilidade de uso. Mercado Livre já se encaixa dentro da categoria de interfaces que fazem o que os usuários querem, mas tem uma interface ruim, rsrs.

Mas é preciso que sejam tratadas as questões de mediação entre pessoas, pois as necessidades sociais dos usuários são: expressão e identidade; status e auto-estima; dar e receber ajuda; pertencer a grupos e afiliações; ter um senso de pertença à comunidade. A principal diferença em aplicações que trabalham o design de interface social é que elas ajudam a sociedade a ter sucesso, mesmo que isso signifique que o usuário tem que falhar. No design de interfaces convencional, orientado a tarefas, a usabilidade trabalha com o design defensivo, dizendo ao usuário o que ele fez de errado e como ele de pode corrigir isso.

Algumas considerações quando se trabalha com o design de interface social: dar recompensas pela realização de uma tarefa, podendo ser o desbloqueio de uma função ou fornecendo um badge (qualificações, insígnias, como vemos no Foursquare e, mais recentemente, no Orkut); avisar o usuário sobre atualizações de conteúdo; fornecer opções de compartilhamento. Mas lembrando de não ser intrusivo, mandando mensagens não solicitadas tentando forjar uma interação ou uma adesão à determinada rede social, como fazem o QuePasa e o Badoo (esse eu recebo e-mails frequentemente e isso não me motiva nem um pouco a querer ingressar na rede).

Como leitura recomendada, Agni destacou o livro Cultura da Interface, de Steve Johnson. Eu vou garantir o meu, e você?

Leia mais sobre Direto da Campus Party 2011 - Palestra "Social Interface Design" »