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 »

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 »

Livros sobre Design de Interfaces Web

Frequentemente alguém me pede dicas de livros sobre Design de Interfaces e eu, que tenho/leio vários, nunca consigo listar de imediato, sempre me pegam de surpresa. Por isso, resolvi vascular com calma a minha "mini biblioteca pessoal" (bom, a maioria dos livros deste post estão lá) e indicar boas opções de livros sobre design de interface e usabilidade, desde o básico até o avançado.

Design para Quem Não é Designer
Robin Williams, 2005, Editora Callis


Review do Submarino:

O livro introduz ao design e a diagramação, através dos 4 princípios básicos do design: proximidade, alinhamento, repetição e contraste. Usando exemplos de "antes" e "depois", estimula o leitor a fazer suas próprias experiências. Traz também o básico sobre: tipologia, serifa, estilo, peso, tamanho.

Não Me Faça Pensar
Steve Krug, 2007 (2ª Edição), Editora Alta Books

Uma leitura muio agradável e divertida para quem deseja conhecer a usabilidade, contendo diversos exemplos práticos de como abordar a usabilidade em seus projetos. A segunda edição também aborda a questão da acessibilidade e algumas "receitas de bolo" para lidar com os caprichos do chefe que podem acabar prejudicando a usabilidade.

Design para a Internet: Projetando a Experiência Perfeita
Felipe Memória, 2005, Editora Campus/Elsevier

Um excelente livro do designer Felipe Memória que vai desde a arquitetura de informação até alguns princípios do design de interação, passando por padrões de interface e formatação de conteúdo. O livro contém estudos de casos da BBC, Ideo e, principalmente, da Globo.com, onde ele trabalhava na época.

Ergodesign e Arquitetura de Informação: Trabalhando com o Usuário
Luiz Agner, 2006, Editora Quartet

Este livro é uma coletânea de artigos acadêmicos do Luiz Agner sobre arquitetura de informação, design de interface e usabilidade. Apresenta um conteúdo excelente e leitura agradável que não fica redundante acerca de um único assunto, por tratar de várias questões referentes a arquitetura de informação, usabilidade e design em diferentes escopos, sendo uma leitura recomedada tanto para designers quando para gerentes de TI.

Usabilidade na Web: Projetando Websites com Qualidade
Jakob Nielsen; Hoa Loranger, 2007, Editora Campus

Livros do Jakob Nielsen são leitura obrigatória para quem deseja trabalhar com usabilidade e design de interfaces. Neste livro, Nielsen e Loranger abordam vários tópicos sobre a usabilidade de interfaces web, entre eles: experiência do usuário, arquitetura de informação, navegação, busca, tipografia, redação. Este conceitos podem ser utilizados como diretrizes tanto por designer quanto por analistas de usabilidade.

The Smashing Book
Smashing Magazine, 2009, Editora Smashing Media GmbH

O Smashing Book que eu possuo é a primeira edição (eles lançaram a segunda no início deste ano), mas há conteúdo excelente e, arrisco dizer, atemporal. Ele aborda vários conceitos acerca do design, desde CSS até marketing, passando por design de aplicações, tipografia, usabilidade, cores e SEO.

Designing Interfaces: Patterns for Effective Interaction Design
Jenifer Tidwell, 2005, Editora O'Reilly Media

O livro trata sobre o design de interface e de interação por meio de padrões (patterns) e possuir exemplos reais categorizados de interface patterns para aplicações desktop, website, mobile, entre outros. A segunda edição já foi lançada e conta com novos padrões e um novo site para apresentação de alguns destes padrões.

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

Não deixe de conferir também a resenha de outros livros sobre Web Design feitas aqui no blog:
Princípios do Web Design Maravilhoso
Use a Cabeça! Web Design

Leia mais sobre Livros sobre Design de Interfaces Web »

5 Ferramentas gratuitas para a criação de mapas mentais

Mind map ou mapa mental é um diagrama usado para representar palavras, idéias, tarefas ou outros itens ligados e dispostos em torno de uma palavra chave ou idéia central. Os mapas mentais são usados para gerar, visualizar, estruturar e classificar idéias e ajudam a estudar e organizar informações e textos, resolver problemas e tomar decisões.
Quantas vezes precisamos escrever um texto, organizar as tarefas que temos a fazer ou mesmo fazer um brainstorming sobre um projeto e não sabemos por onde começar? Para isso, o mapa mental é uma excelente forma de colocar tudo isso em ordem. Sempre utilizo mapas mentais, seja para escrever um post ou fazer algum trabalho da faculdade.

1. FreeMind
O FreeMind é uma ferramenta desktop desenvolvida em Java. É de fácil utilização e permite exportar em imagem, PDF ou .ODT (formato de texto para OpenOffice).

2. Mindomo
Fui apresentada à esta ferramenta recentemente no mestrado. É uma ferramenta online para a criação de mapas mentais e brainstorming, possuindo também uma versão desktop. A versão gratuita possui diversos recursos e poucas limitações e os planos pagos são bem acessíveis. É preciso fazer um pequeno cadastro para poder utilizar a ferramenta.

3. Freeplane
Idealizada por um dos criadores do FreeMind, o Freeplane é uma derivação do FreeMind e mantém compatibilidade com o mesmo, porém, com maior quantidade de recursos, inclusive análise SWOT.

4. SciPlore MindMapping
O SciPlore MindMapping é uma ferramenta de mapa mental escrita em Java e também derivada do FreeMind. O foco da SciPlore está em combinar mapas mentais com PDF e gestão de referência, sendo especialmente adequado às necessidades de pesquisadores e cientistas, uma vez que oferece recursos como adição de referências manuais ou BibTeX e monitoramento de PDF (quando um PDF é adicionado à pasta do mapa mental, ele é listado neste mapa).

5. XMIND
O XMind é uma ferramenta de gerenciamento de projeto e gerenciamento de conhecimento que permite não somente a criação de mapas mentais, mas também, diagramas de causa e efeito, organogramas, diagramas em árvore a até planilhas. Ele possui compatibilidade com o FreeMind e a versão Pro pode exportar para Microsoft Word, PowerPoint, PDF e Mindjet MindManager.

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

Mag+: uma interface conceitual de revista eletrônica baseada em tablets

Hoje em dia, com tablets como o iPad, não é difícil imaginar como seria ler e folhear uma revista em um dispositivo touch screen. Mas nem por isso a ideia do Mag+, desenvolvida há cerca de 2 anos deixa de ser interessante por trazer um conceito de design de interação focado em uma experiência natural entre usuário e interface.

O Mag+ (mag plus) é uma plataforma flexível para a criação de mídia editorial para dispositivos tablet touch screen. Ele foi desenvolvido como um projeto de pesquisa corporativa iniciada pela Bonnier R&D em colaboração com a Berg. O projeto visava elaborar e verificar a experiência de ler revistas em dispositivos portáteis digitais.
A plataforma foi pensada para capturar e reproduzir a interação natural que as pessoas há decadas têm ao ler uma revista como, por exemplo, folhear o conteúdo e passar facilmente de uma página à outra, porém, com os recursos que a tecnologia oferece para tornar a interação mais rica entre o conteúdo.
O conceito usa o poder da mídia digital para criar uma experiência rica e significativa, mantendo algumas características de revistas impressas. Ele foi projetado para um mundo em que a interatividade, o excesso de informação e opções ilimitadas podem ser percebido tanto como intrusivas quanto impressionantes.
E é importante ressaltar que ele é uma plataforma tanto para editores quanto leitores.
O vídeo abaixo, de 2009, é uma amostra conceitual de como o Mag+ funciona:

Mag+ from Bonnier on Vimeo.

Leia mais sobre Mag+: uma interface conceitual de revista eletrônica baseada em tablets »

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" »