Ah, se fosse tão mágico calcular o preço de um site

O quanto cobrar por um site é uma questão que perturba não somente os iniciantes. Várias pessoas já me pedirar uma indicação de quanto deveriam cobrar por determinado projeto, mas a verdade é que eu não creio que há uma fórmula exata para isso. Há muitas sugestões, parâmetros e tabelas de referência. A ADEGRAF (Associação de Designers Gráficos do Distrito Federal) possui, em sua tabela referencial de valores, uma referência para valores do layout de um site de acordo com a complexidade (baixa, média, alta). Esta complexidade é definida por determinados parâmetros, que eu particularmente achei questionáveis.

Em um artigo intitulado "How Much Should a Web Site Cost?", eles disponibilizam uma calculadora com 8 critérios cujos valores podem ser ajustados por sliders e que oferece um orçamento com a opção do custo mais baixo e mais alto para os serviços adquiridos. Achei legal, mas é muito genérico e não vejo isso funcionando na prática.

O valor de um site na verdade depende de outros parâmetros, mais contextuais do que de serviços. Pode variar de acordo com o poder aquisitivo da região (você não vai querer cobrar em Borá o que uma pessoa cobraria em São Paulo, não é mesmo?), o porte do cliente para o qual você está realizando o trabalho (uma empresa pequena local certamente irá requerer recursos mais simples, mesmo porque tem um orçamento reduzido, ao contrário de uma multinacional), a complexidade do que ele está pretendendo fazer de acordo com uma análise de requisitos feita junto ao cliente/empresa, etc.

O que eu julgo ser o balanço ideal: tenha um valor de trabalho por hora condizente com o mercado de sua região (mas não nivele por baixo!), faça um orçamento para o cliente com um valor de base (piso) de acordo com uma quantidade média de horas que o projeto pode levar baseado nos requisitos levantados e, na proposta, deixe claro o valor/hora caso exceda esse tempo. Calcular com base no valor por hora, a meu ver, é a forma mais justa para ambos os lados.

E então, o que acham?

Leia mais sobre Ah, se fosse tão mágico calcular o preço de um site »

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:

• Facebook
• Twitter
• YouTube

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!

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

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 »

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

HTML5 Hands On

View more presentations from Talita Pagani

Leia mais sobre Tutorial de HTML5 »

Apresentação: Construindo Layout de Sites com CSS

Leia mais sobre Apresentação: Construindo Layout de Sites com CSS »

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 »

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.

Leia mais sobre Resenha: Linguagens do Web Design »

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 »

Hoje é Dia do Webdesigner e... WHAT?!

Sim, hoje, 24 de fevereiro é Dia do Webdesigner, uma profissão que hoje está muito bem consolidada e, para quem está iniciando na área, conta com uma vasta literatura e bons cursos que focam mais em aspectos de design e experiência do usuário do que em ferramentas. Muita coisa mudou ao longo dos últimos 15 anos, os profissionais são muito mais conscientes e comprometidos com a estética aliada a uma boa experiência de uso, entre outras questões, e os "sobrinhos" têm cada vez menos espaço no mercado. Porém, ironicamente hoje, recebo a seguinte correspondência em minha casa:

Reparem dos trechos destacados. Idade a partir de 9 anos e o programa do curso para Web Designer cobre praticamente só ferramentas, algumas, inclusive, já obsoletas, como é o caso do FrontPage. Não abrange CSS, conceitos de tipografia, cores, gestalt, usabilidade. Não culpo quem faz um curso destes, pois geralmente as pessoas não têm informações precisas sobre a nossa profissão e elas realmente acreditam que estão sendo capacitadas de acordo com as exigências do mercado de trabalho. Não vamos entrar no mérito do quanto uma criança/adolescente irá cobrar para fazer um site depois de ter feito o curso. Na minha adolescência, eu fiz estes cursos "profissionalizantes", mas depois eu comecei a estudar por conta (livros, blogs, revistas especializadas) e fazer cursos que realmente agregassem o conhecimento necessário. Por experiência própria, sei o quando este tipo de curso é descartável.
No interior há poucos opções de cursos que contém um conteúdo programático adequado às necessidades do profissional e do mercado de trabalho. Mas felizmente, pelos menos em Bauru, as empresas e faculdades da região têm percebido esta lacuna e frequentemente temos workshops, palestras e cursos de capacitação, mas ainda não chegam a todas as pessoas.
Portanto, para quem está começando, tome cuidado com este tipo de curso. Procure se informar sobre o grade do curso, peça referências a outros profissionais.

Leia mais sobre Hoje é Dia do Webdesigner e... WHAT?! »

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 »