Assessoria: Talita Pagani na @revistaWIDE

A notícia não é nova, mas apenas agora tive acesso ao material. Em novembro de 2010 fui convidada pela Revista WIDE, da Arteccom, a participar da seção Opinião sobre o tema "Todos devem pensar em Usabilidade?". Foi uma ótima experiência poder redigir sobre um assunto interessante para uma revista como a WIDE ("merchan" mode on).
O meu texto foi publicado na edição de Janeiro/Fevereiro deste ano junto à opinião de profissionais de peso como Fred Van Amstel e Felipe Memória. O feedback de amigos, leitores e seguidores no Twitter foi muito bom também. Mas, entre todos que já haviam lido, eu creio que acabei sendo a última, rs.
Comprei a revista diretamente com a Arteccom, fui super bem atendida, mas os Correios possivelmente extraviaram duas vezes o envio da revista. Uma pena.
Mas eis que minha amiga Tati de Alencar tinha a revista e me emprestou esta semana. Então, disponibilizo abaixo para meus leitores a página da revista com meu texto (clique na imagem para ampliar).

15% de desconto para os leitores do blog na @chicorei, VEM GENTE!



Quer um super desconto de 15% em compras na ChicoRei e ainda ajudar a autora deste blog que aqui vos escreve a ganhar um iPad ou XBox 360? Então basta informar o código WDXP em suas compras no site!


Afinal, o que é a Chico Rei?


A Chico Rei é um estúdio de criação que investe em design e moda para fazer camisetas únicas e que permitem uma infinidade de interpretações, mas que têm valor especial para quem veste. Lá você sempre vai encontrar algo que é a sua cara, então fique a vontade.
Quer saber mais sobre a Chico Rei? Você pode encontrá-los passeando pelas redes sociais:
Conheça alguns dos produtos
O mais legal da ChicoRei que ela apresenta produtos super exclusivos, com estampas divertidas e sacadas inteligentes que vão desde cultura pop até referências geeks/nerds. Enfim, tem para todos os gostos! Veja alguns dos produtos:


























A penúltima é a minha favorita. Escolha já a sua!

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.

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 ;)

Tutorial de HTML5

No dia 01/09 eu ministrei um minicurso prático de HTML5 na 1ª JEAUSC - Jornada das Engenharias-Arquitetura-Urbanismo da USC. A atividade prática, ao final do minicurso, abordava os conceitos de Local Storage, Drag and Drop e formulários. Confira abaixo os slides da atividade e baixe os materiais:

Visualizar o Live Demo | Baixar o template para fazer a atividade

Postagens no blog

Twitter Delicious Facebook Digg Stumbleupon Favorites More