Em cada novo sistema web que desenvolvo, seja um simples administrador de website¹ ou um sistema mais rico, sempre procuro aprimorar a forma como desenho a interface das telas. Vários serviços online que utilizo acabam me aguçando as ideias. No final das contas, descubro que antes de qualquer coisa preciso me sentir um usuário do projeto que estou desenvolvendo e me sentir confortável em utilizá-lo.

¹ – Defino website como qualquer tipo de site, hotsite, blog ou portal; apesar de alguns portais terem características de sistema agregados.

Conceitos de User Experience e User Interface

UX ou UE é, basicamente, a forma de criação da arquitetura e das interfaces de um produto com foco na Experiência do Usuário, como o próprio nome se refere. Ou seja, trata de todos os aspectos de interação do usuário com o produto. Aí entra o papel da UI: tranformar a UX em algo visualmente atrativo e eficiente.

Confesso que é deveras complicado chegar numa construção de Design UX/UI que seja agradável ao usuário tanto pela usabilidade, quanto pela aparência. Mas é aí que entra a parte interessante da história: experimentar!

Agora, as comparações

1. Masthead

Em sistemas web, o Masthead define um menu horizontal na parte superior direita da tela. É uma forma rápida e prática para apresentar links de perfil de usuário e saída do sistema. Estes links podem ser encontrados, por exemplo, em qualquer serviço Google, como o Gmail.

Em websites a coisa muida de figura, já que é difícil encontrar um cenário em que o masthead se encaixe. O link “pular para conteúdo” pode ser uma boa “simulação” de um masthead. Este link, inclusive, pode ser encontrado neste meu blog.

2. Boxes (ou caixas)

Os boxes (ou caixas) são uma forma muito interessante de organizar várias seções de um sistema numa mesma tela. O administrador do WordPress utiliza muito deste conceito.

O interessante é que a utilização de boxes pode ser muito similar nos websites. Portais jornalísticos utilizam muito deste conceito também.

3. Largura do layout

Descobri — depois de muitas experimentações — que o layout fluido (ou elástico) é a melhor pedida para desenvolver sistemas web. Este formato abre o leque de possibilidades para a criação de controles, boxes adicionais e formulários. Além disso, é possível incluir uma sidebar fixa que se movimenta junto com o tamanho do canvas do browser do usuário.

Em websites a largura do layout é um assunto um pouco polemizado, porém ao meu ver é algo muito simples de imaginar: basta saber a característica do negócio. Um blog talvez tenha uma interface mais bem trabalhada numa estrutura fixa e não tão larga. Já um portal jornalístico (como pode ser visto acima) necessita de um layout mais amplo, visto a quantidade de informação que precisa ser organizada.

4. Iconografia

Penso ser indispensável a utilização de ícones em sistemas web², mas em suas devidas proporções. É importante deixar claro para o usuário que tipo de informação ele vai encontrar em determinado link (um menu por exemplo).

² – Acho fantástica a iconografia incluída no WordPress 2.7, no estilo barra de ferramentas do PhotoShop.

Para utilizar ícones em websites também é preciso — assim como na escolha da largura do layout — entender a característica do negócio. É muito comum websites não utilizarem ícones e ainda assim serem usuais. Porém é importante levar em conta questões como contraste nas cores e no tamanho da fonte dos títulos que compõem a tipografia, por exemplo.

5. E por falar em tipografia…

Uma boa tipografia dá elegância a qualquer projeto. Por conta disso não há uma regra que me faça comparar as tipografias de sistemas web e websites, exceto em dois aspectos:

• Sistemas web podem ter seções com fonte de tamanho reduzido e os parágrafos não precisam ter o line-height acentuado, já que é rara a utilização de textos longos.
• Websites precisam receber maior cuidado na separação dos textos (veja este meu artigo que trata um pouco disso).

6. Footer

Alguns webdesigners não se preocupam muito com ele, mas ao meu ver o footer (rodapé) tem tanta importância quanto o header (cabeçalho) de um website. Em sistemas web ele pode ser mais discreto.

O footer talvez seja a seção que tenha mais diferenças entre os dois cenários deste artigo. Um website com um footer rico melhora — e muito — a navegabilidade. Já num sistema web praticamente todos os recursos estão dispostos acima dele, o que dispensa sua incrementação.

Considerações finais

Os cenários deste artigo são fruto de experimentações que fiz (e faço) ao longo do tempo. De qualquer forma, não tomo estes conceitos como regra: sou a favor da flexibilidade. Cada projeto é um projeto e tudo é válido na construção de uma interface usual, bonita e agradável ao usuário final. :D

Tags: interface, ria, sistemas, ui, ux, web