FrontIn Londrina acontece neste fim de semana, 10 e 11 de dezembro!

topo

Para quem ainda não sabe, estarei em Londrina neste sábado, 10/12, como palestrante do evento FrontIn Londrina, franquia do evento FrontIn que já ocorreu em Belo Horizonte e Rio de Janeiro.

O FrontInLondrina será uma oportunidade para desenvolvedores Front-end de Londrina e região buscarem aprimoramento, maior valorização e profissionalização do mercado. Um espaço para a troca de experiências e a interação em benefício de todos nós, desenvolvedores Front-end.

Você pode se inscrever em todas as palestras pelo preço promocional de R$ 39,90 até esta quarta, 07/12, então corram! Aproveite e faça também um mini-curso por apenas mais R$ 29,00. Haverá emissão de certificado e sorteio de brindes!

Confiram abaixo a programação:

Palestras (Sábado - 10/dez - 8h-18h)
  • A Nova Semântica do HTML 5 com Elvis Detona (GoNow)
  • HTML5 Storage API com Jean Nascimento (Desconferência)
  • Navegabilidade em Dispositivos Móveis com Talita Pagani (Tableless)
  • Animações com CSS 3 com Felipe Moura (Terra/Desconferência)
  • Marketing na Web com Paulo Henrique Ferreira (Clickweb)
  • Fazendo Web Mobile com Clécio Bachini (Soyuz)

Mini-cursos (Domingo - 11/Dez 9h-12h)
  • Criação e Recorte de Layout para Web com Vagner Iancoski e Rennan Martini (ICOMP)
  • Banco de Dados NoSQL com Jean Nascimento (Desconferência)
  • Miniblog com PHP e Ajax com Bruno Gonçalves e Thiago Augustus (Clickweb)
  • Marketing nas Redes Sociais (LA Publicidade)
Gostou? acompanhe e divulge:
facebook | twitter | site do evento

Nos vemos lá ;)

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

Kinect e Natural User Interfaces - Trilha .NET - TDC 2011

O Maurício Alegretti é Microsoft Xbox Most Valuable Professional (MVP), consultor de arquitetura de sistemas com mais de 15 anos de experiência e empresário nas áreas de desenvolvimento de software. Ele ministra regularmente palestras em eventos técnicos e de comunidade sobre Kinect, Natural User Interface, Xbox e Windows Phone 7 no mercado brasileiro, tanto que nestes últimos meses já passou por Bauru, São Paulo (TDC2011) e volta a Bauru agora em setembro para uma palestra na Jornada de Informática da Unesp, onde também darei um minicurso (info em breve) e terei a oportunidade de conhecê-lo pessoalmente.
Para quem quiser conhecer um pouco sobre os tópicos que ele aborda em suas palestras, confira abaixo o vídeo da palestra que ele fez no TDC2011, disponibilizada pela GoNow.

1ª JEAU - Jornada das Engenharias-Arquitetura-Urbanismo da USC



A Universidade Sagrado Coração (USC-Bauru) realiza do dia 01 a 03 de Setembro a 1ª JEAU - Jornada das Engenharias-Arquitetura-Urbanismo, com palestras e minicursos voltadas para as seguintes áreas de formação:
  • Arquitetura e Urbanismo
  • Engenharia Ambiental
  • Engenharia Agronômica
  • Engenharia Civil
  • Engenharia de Computação
  • Engenharia de Produção
  • Engenharia Química
A Elaine Cecília Gatto, coordenadora do curso de Engenharia da Computação da USC, líder do grupo GarotasCPBr e minha amiga é uma das organizadoras do evento.

Eu participarei do JEAU ministrando um minicurso prático de HTML5 quinta-feira, dia 01/09/2011, das 14:00 às 18:00. VEM GENTE!

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 Web3. 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.

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 Web3. 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.

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.

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

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.


Resenha: Linguagens do Web Design

Livro: Linguagens do Web Design
Autor: Fátima Aparecida dos Santos
Ano: 2008
Editora: Blucher Acadêmico

As resenhas apresentadas neste blog até o momento são de livre e espontânea vontade e não foram patrocinadas nem possuem vínculo com a editora ou os autores da publicação. A intenção é apenas trazer uma descrição minuciosa de títulos da área que sejam de interesse da comunidade de web design.

O livro "Linguagens do Web Design" é resultado da dissertação de mestrado de Santos, defendida em 2002 pela Pontifícia Universidade Católica (PUC-SP). É um título diferenciado sobre web design pois resulta de uma produção científica e deve ser analisado como tal.
No livro, a autora traduz o web design de outra forma, quase como um acerto de contas com a literatura apoiada sob uma reflexão acerca do que constitui o web design. Esta reflexão é conduzida por meio de uma investigação científica, cuja metodologia visa conectar o design em sua concepção original com a web e os aspectos de linguagem e comunicação.
O resultado desta investigação científica situa, em princípio, a internet com elemento midiático que converge características de vários meios de comunicação e que, portanto, possui uma linguagem própria para se comunicar. Esta linguagem não é arbitrária, mas sim uma miscelânea e códigos e signos que deve ser compreendida para que a mensagem seja corretamente transmitida.
O livro instiga o leitor a desvendar melhor este outro ponto de vista sobre o web design, enquanto sendo uma metodologia para projetar um artefato de comunicação, traçando o web design como meio de transmissão de mensagens e abordando o usuário como receptor desta mensagem que deve falar a linguagem de seus intérpretes para destrinchar s web sob uma perspectiva semiótica. Esta perspectiva semiótica é importante para que este conhecimento se faça entender, demonstrando que o design deve tratar o uso correto dos códigos de diferentes linguagens de comunicação para trazer significado à mensagem.
A autora distingue que o conjunto de códigos e processos de transmissão de mensagem e recursos multimídia são diferentes de outros meios e pode ter perda de contexto.
Alguns pontos em que a autora peca é justamente sobre a linguagem. Possivelmente ela não domina aspectos relacionados à programação e comete alguns enganos, especialmente no Capítulo 1, mas que podem ser facilmente ignorados. Aparecem gafes como "linguagem de programação ou sistema de orientação a objetos" (o correto é programação orientada a objetos e o termo não é análogo à linguagem de programação), "programar significa prever o que o usuário fará, quais serão as regiões que o atrairão" (isto tem muito mais a ver com design e usabilidade do que com programação), "essa programação articula-se com a condição 'if' (se)" (quando na verdade a programação possui também outras estruturas de controle).
Porém, isto não abala o conceito geral sobre o livro, que é inteligível a designers, profissionais de comunicação, redatores e demais profissionais, sejam de web ou não, que desejam entender o papel do design no projeto de comunicação e como ele tem mais a oferecer do que apenas aspectos visuais e interativos. Mas prepare-se: 90% do livro é apenas texto, contando com ilustrações pontuais que aparecem a partir do final do Capítulo 2.
A autora conclui o livro com a exemplificação do design de diversos sites, descompondo os diversos códigos presentes em cada um e qual a sua semântica cognitivas e contextualização semiótica, evidenciando e descrevendo o enlace destas linguagens.

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.

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.

Assessoria: "talitapagani.com" em galerias de web design

Já havia visto o meu portfólio como destaque em alguns sites que listam designs interessantes de websites. Mas, ao realizar uma pesquisa no Google e receber algumas mentions via Twitter, me surpreendi por ver que meu site aparece em mais galerias e blogs do que eu imaginava.
Confiram abaixo a seleção de galerias e posts (clique na imagem para acessar o site).

CSS Mania


101 Best HTML5 Sites


.CSS{Mayo}


HTML5 Gallery


One Extra Pixel


Web3Mantra


Land of Web


Reencoded




DesignDim


Most Inspired

Postagens no blog

Twitter Delicious Facebook Digg Stumbleupon Favorites More