[pt-br] Resenha: "Princípios do Web Design Maravilhoso"

Livro: Princípios do Web Design Maravilhoso (Principles of Beautiful Web Design)

Autor: Jason Beaird

Ano: 2008

Editora: Alta Books / Site Point

Como fazer um design agradável? Quais cores escolher e como combiná-las? A tipografia pode fazer uma grande diferença para transmitir a ideia do site?

Estas e outras indagações pode ser respondidas através de "Princípios do Web Design Maravilhoso", mais um título da Site Point, que vem se consolidando com suas publicações sobre design e desenvolvimento web. É um obra essencialmente sobre design (composição, cor, textura, tipografia e imagens) e justamente bem focado nestes tópicos.

O livro mostra que um bom design é aquele que atende bem os usuários em termos de funcionalidade e também apresente um visual atrativo, equacionando o lado estético e funcional como uma unidade. Em grande parte do livro, o autor traz abordagens do design gráfico de modo aplicado ao design pra web através de uma visão mais objetiva.

O primeiro capítulo apresenta conceitos de composição do layout. São descritos os elementos mais comuns que compõem uma página web e qual sua função, como trabalhar com grids e aspectos de teoria de design (especialmente relacionados com a gestalt) como unidade, proporção e equilíbrio. Mas também são abordados conceitos mais específicos do design para a web, como resolução de telas, layouts líquidos e fixos. Os capítulos seguintes tratam de tópicos mais específicos: cor, textura, tipografia e imagem, passeando pela teoria e prática de uma forma bem fluida.

A linguagem utilizada é de fácil compreensão e propicia uma leitura agradável. Os gráficos são bons, com ilustrações mais abstratas nos primeiros capítulos para demonstração dos conceitos de teoria do design, mas também há ilustrações mais objetivas exemplificadas em screenshots de websites. O livro é recheado de referências a artigos e possui dicas de vários sites e ferramentas online que estendem o conteúdo apresentado.

Como tantos outros títulos, o livro também é orientado a projeto e a cada capítulo o layout utilizado como exemplo ganha forma e possibilita fixar a teoria vista no capítulo. O livro mostra também de uma forma sutil como se atentar a detalhes e como o refinamento do processo de design está atrelado a estes detalhes que fazem toda a diferença.

Recomendo para web designers que desejam se aprofundar em aspectos teóricos do design ou desenvolvedores front-end e programadores que desejem compreender melhor o design além do CSS e Photoshop.

Um dos únicos problemas do livro talvez seja a tradução do título, que promete mais do que o livro realmente oferece, mas não chega a ser algo crítico, apenas pode decepcionar o que forem ler o livro com grandes expectativas.

No final, pode-se ver que "Princípios do Web Design Maravilhoso" não trata o design somente como um aspecto para melhorar a estética de um website, mas como um artefato para aprimorar a comunicação do site com o público-alvo e transmitir melhor a ideia do site.

Leia mais sobre [pt-br] Resenha: "Princípios do Web Design Maravilhoso" »

[pt-br] Resenha: "Use a cabeça! Web Design"

Livro: Use a Cabeça! Web Design (Head First Web Design)
Autores: Ethan Watrall e Jeff Siarto
Ano: 2009
Editora: Alta Books / O'Reilly

O livro "Use a Cabeça! Web Design" cobre de modo inteligente e divertido vários aspectos do design de um website, desde o levantamento de informações até a acessibilidade.

Ao longo dos capítulos, são simuladas situações utilizando personagens que representam clientes e profissionais com um determinado problema de design, onde você deve encontrar uma solução. E este é um dos pontos fortes do livro: as atividades práticas, onde você deve tomar notas e pensar em soluções para problemas que, em sua maioria, são pertinentes à rotina de web designers. Algumas destas atividades também permite que você faça uma reflexão de questões apresentadas. Praticamente todas as atividades têm solução, mas o interessante é fazê-las e botar a cabeça pra funcionar.

Com uma linguagem simples e prática, Watrall e Siarto explanam e exemplificam o processo de criação de um website, começando pelo levantamento de informações e arquitetura de informação e depois passando pela prototipação de layout, conceitos básicos de web writing, acessibilidade, navegação e usabilidade. Estes conceitos não são abordados com um nível de profundidade que teria em um livro específico sobre cada assunto, mas a cobertura dada aos tópicos juntamente com as atividades práticas conferem uma boa noção sobre cada aspecto.

Apesar da linguagem simples, o livro tem diversos erros de tradução, como "um livro Web Design" ("um livro de Web Design"), "classificação de fichas" ("cardsorting" já é um termo consolidado, a tradução não facilita a identificação) e certas expressões traduzidas de forma literal que não fazem sentido.

Além disso, no início do livro, perdem-se muitas páginas explicando o que é o método "Head First" da série homônima e como o livro deve ser utilizado pelo leitor que o tem em mãos. Não sei como este capítulo é disposto nos demais títulos da série, mas acredito que não sejam necessárias tantas explicações sobre metacognição, como treinar seu cérebro e como utilizar o livro. Estas informações podem ser importantes como um complemento e, portanto, poderiam ser resumidas durante a introdução e serem apresentadas de modo mais intuitivo ao longo das atividades do livro.

Grande parte das ilustrações se encontram em preto e branco, o que acaba deixando algumas passagens um pouco desinteressantes, mas há uma seção de imagens coloridas ao final do livro. Felizmente, o capítulo sobre cores é totalmente colorido, mas fica inconsistente com o restante da obra, todos os capítulos poderiam ser assim.

Tirando estes pequenos percalços, o livro trata de questões bem atuais e esclarecem muitas dúvidas que permeiam a cabeça dos web designers iniciantes, como frameworks CSS e jQuery. Em todos os capítulos há a seção "Não existem perguntas idiotas", justamente com as dúvidas mais comuns.

É preciso ressaltar que "Use a Cabeça! Web Design" não é para aqueles que não possuem conhecimento em XHTML e CSS (aliás, é um pré-requisito explicitado no livro), mas sim para quem deseja aprender o processo de design de websites. Também não é um livro para ler de um dia para outro, em virtude dos exercícios práticos, mas indico como primeira leitura àqueles que estão começando na área e querem aprender web design de modo prático e com uma linguagem acessível.

Um ponto bem interessante aos novatos no final do livro: definição dos diferentes tipos de profissionais web (Designer Front-End, Arquiteto de Informação, Designer de Experiência do Usuário, Designer Gráfico, Redator e Programador). Logo após, há um pequeno teste, ainda que superficial, que pode lhe ajudar a descobrir qual função com a qual você mais se identifica.

Leia mais sobre [pt-br] Resenha: "Use a cabeça! Web Design" »

[en-us] Optimize Mobile UX with short URLs

Everyone who likes read about best practices in usability and user experience (UX) may remember that heuristic by Jakob Nielsen: Recognition than recall and this include make URLs more easy to recognize and remember.
On Information Architecture articles and books, good URLs are frequently associate with friendly URLs, like the URL of this blog posts instead of, as example, "http://www.myblog.com/post.php?id=1235652".
However, as more users are accessing websites from mobile devices, friendly URLs may not enough to represent good URLs by two main factors:

• Input field to type URLs is too small. So, URL must short to be seen, so the user can check spell easily and correct it if needed;
• Even with QWERTY keyboards and touch screen, type words in a small screen still needs more effort than a desktop/notebook screen. So, type the URL must be less tiring as possible.

Thus, the popularization of URL shortener website like tinyurl.com, migre.me, 1l.to, bit.ly and so many others is not only helpful to share links on microblogs or even present a short links to friends. It can be as a solution to adapt the concept of friendly URL to a mobile context.
This can improve UX by:

• Reduce time to complete the task of type a URL
• Make this task less stressing
• Make URLs more easy to see and more easy to remember

Mobile websites and applications introduce new paradigms and challenges for UX. It's time to get out of the comfort zone and keep make researches in order to evolve UX concepts.
This is just my initial thought of this issue but I want to know how we can expand the discussion of URLs for mobile devices or even more mobile UX aspects that need discussion.
:)

Leia mais sobre [en-us] Optimize Mobile UX with short URLs »

[en-us] Five Myths about Documentation

I always emphasizes the development of a good documentation for interfaces, because I see that many people still reject the idea of document their interfaces design, by believing that it's too complex, unnecessary or "nobody will read".
However, I found a good article on the Human-Computer Interface website. I would like to share it with you all and ask: do you agree?

Documentation isn’t important because people don’t read it anyway

It is true that people don’t read a manual if it is poorly designed, because it is easier to telephone the customer technical support department than find the answer in the manual.

However, research shows that customers do appreciate good documentation. With hi-tech products or computer software the manual is usually the first thing the user looks for, after unpacking the product, to get them up and running.

You need to have designed the product to write the documentation

The person who designed the product is often the worst person to explain how to use it, because they are too familiar with it, and cannot appreciate what users find hard to understand.

The designer will tend to think in terms of “how does the product work” rather than “how do I do this with the product”, which is what the user needs.

There is no point spending money on producing good documentation because the customer has already bought the product by that stage

Every good salesman knows that your relationship with your customer doesn’t end when you’ve sold them your product.

Good documentation adds value to your product by enabling people to use it fully, and it helps create customer loyalty by reaffirming that they made the correct purchase.

Well-designed products don’t need manuals

Are there any questions that your customers might need to have answered about how to set up, use, or maintain your product?

If the answer is yes, then however well designed your product is, it needs a manual. If not, then your product is either very intuitive, or very simple.

On-line help makes printed manuals unnecessary

Inexperienced users find it easier to learn about using a product from a printed manual, because it is less intimidating, and can explain concepts more effectively.

On-line help is ideal for providing reference information, and it has the advantage that users can look up the answer to a question while they are working with your product.

Documentation should be provided both as a printed manual and as on-line help, to cater for individual preferences.

Leia mais sobre [en-us] Five Myths about Documentation »

[pt-br] Cinco mitos sobre documentações

Sempre gosto de enfatizar o desenvolvimento de uma boa documentação de interface, pois vejo que muitas pessoas ainda rejeitam a ideia de uma documentar seus projetos de interface, por considerar complexo, desnecessário ou simplesmente utilizar a máxima de que "ninguém lê".
Desta vez, encontrei um artigo interessante apontando os 5 mitos sobre documentações de modo geral e resolvi traduzí-lo. Confiram abaixo e me respondam: vocês concordam?

Documentação não é importante porque as pessoas não lêem

É verdade que as pessoas não lêem um manual se ele for mal projetado, porque é mais fácil telefonar para o departamento de suporte técnico do que encontrar respostas no manual.
Porém, pesquisas mostram que os clientes apreciam uma boa documentação. Com produtos de tecnologia e softwares, o manual é normalmente a primeira coisa que os usuários procuram, depois de desembrulhar o produto, para fazê-los funcionar.

Você precisa ter projetado o produto para escrever a documentação

A pessoa que projetou o produto é freqüentemente a pior pessoa para explicar como usá-lo, porque eles estão muito familiarizados, e não pode apreciar o que usuários acham difícil entender.
O designer tenderá a pensar em termos como "como o produto funciona" ao invés de "como eu faço isso com o produto", que é o que os usuários precisam.

Não há sentido em gastar dinheiro para produzir uma boa documentação, pois o cliente já comprou o produto nesse estágio

Todo bom vendedor sabe que sua relação com o cliente não termina quando você vende o produto.
Uma boa documentação adiciona valor ao seu produto permitindo que as pessoas o utilizem completamente e isto ajuda a criar uma lealdade com o cliente reafirmando que eles fizeram uma aquisição correta.

Produtos bem projetados não precisam de manual

Há alguma pergunta que seus clientes poderiam precisar de respostas sobre como configurar, usar, ou manter seu produto?
Se a resposta é sim, então mesmo você tendo projetado bem seu produto, ele precisa de uma manual. Se não, então seu produto é muito intuitivo ou muito simples.

Ajuda on-line faz o manual impresso desnecessário

Usuários inexperientes acham mais fácil aprender a utilizar um produto pelo manual impresso, porque ele é menos intimidante, e pode explicar os conceitos mais efetivamente.
Ajuda on-line é ideal para prover informação de referência, e tem a vantagem que os usuários podem procurar a resposta de uma pergunta enquanto eles estiverem trabalhando com seu produto.
Documentação deveria ser provida tanto por manual impresso* quanto ajuda online, satifazendo necessidades individuais.

*nota pessoal: este manual impresso pode ser substituído também por um PDF com a documentação geral do sistema e que pode ser impresso.

Leia mais sobre [pt-br] Cinco mitos sobre documentações »

[en-us] A simple solution for CSS transparency without hack

Within modern browsers, we feel free to add transparency on DIVs and other contents throught CSS3. For web designers, it increases de possibilities do compose more complex and refined layouts. We can control transparency with CSS properties like opacity.
However, some browsers still doesn't offer support for this feature and frequently we need to use some hack to make it work cross-browser.
There is a simple solution to treat this issue. It make the transparency works for browsers that support transparency and, for browser who doesn't, it still keel your layout elegant, even without transparency.

• Create a PNG transparent image with the desired opacity. The PNG can be 1px x 1px or, if it has some gradient effect, 1px width x correspondent height;
• On your CSS, add a rule like
  element { background: (images/bg_transparent.png) [repetition] [horizontal-position] [vertical-position]; }
  Ex.: .header { background: (images/bg_transparent.png) repeat-x 0 0; }

That's it! If the browser didn't suport the PNG transparency, you can still see your layout with background image. Have doubts if it really works? Check WWF website.
;)

Leia mais sobre [en-us] A simple solution for CSS transparency without hack »

[en-us] New portfolio, new blog, new language

Hello People! As I presented my new portfolio this week, I decided to also redesign my blog and introduce a few changes.
First, I apologize my brazillian readers, I haven't writing since July 2009 due to my Completion of Course Work. Fortunately, everything gone good and I was successfully approved! Now, I'm a master student at the Federal University of Sao Carlos, working with Human-Computer Interaction.
Now, I fix a commitment to post articles regularly on the new blog. Oh, and the great change: now it will be bilingual! I don't know if Blogspot has some translator plugin, but for now I'll be indicating the language on the blog title (i.e.: [en-us] Title; [pt-br] Title). Not all posts will be in both languages (image-based posts may be published only in english).
I'll be also importing the posts from the older blog to this blog.
Well, that's it for now, "stay tuned" ;)

Leia mais sobre [en-us] New portfolio, new blog, new language »