¹ – 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

¹ – Para quem não entendeu, a frase diz: “seria demasiado difícil entender cada frase escrita”.

Pois é, assim como nossos antepassados pensaram inteligentemente ao desenvolver nossa grafia com espaçamento entre as palavras, nós, designers, também precisamos pensar inteligentemente ao dispor texto em um design. A dica aqui não vale só para o webdesign: qualquer forma de design com elementos textuais pode se valer dessa prática.

Espaço em branco como elemento do design

Um estudo realizado em 2004 mostra o quão importante é a correta utilização dos espaços em branco. No estudo, foram realizados testes de performace de leitura por usuários levando em conta quatro tipos de layout compostos de texto. De todos os layouts, o que compunha uma melhor definição tipográfica (margens e espaço entre linhas) foi, indiscutivelmente, a melhor solução de disposição de texto em performace de leitura e em capacidade de compreensão pelos leitores. Para os textos sem margens (aqueles que ficam colados nas laterais da viewport do browser, por exemplo), a peformace de leitura caiu substancialmente.

Espaço em branco, na realidade, é uma alusão aos espaços sem preenchimento textual e/ ou de imagem – que não compõe o design – que podem ser utilizados para melhor organizar a área ativa do site, ou seja, é toda área que é parte do design (seja em branco ou não) que não influe na interação com o usuário.

Usar espaço em branco não necessariamente é ter falta de conteúdo

É notório que quanto menos conteúdo, mais fácil se torna organizar os componentes de um layout. Conseqüentemente, mais fácil se torna, também, separar estes componentes em toda a área do layout. Acredito que esta realidade acaba por contaminar o pensamento que alguns webdesigners têm sobre layouts de muito conteúdo, fazendo com que sites do gênero sejam criados com dados enfileirados e empilhados, sem a preocupação com a segmentação e, principalmente, a separação destes. É importante lembrar que, quanto mais conteúdo se têm a diagramar, mais cuidado se deve tomar com a separação deste no layout. Nestes casos, os espaços em branco passam de parte meramente decorativa do layout, para parte imprescindível na construção de uma boa usabilidade e acessibilidade do mesmo. ;)

Atualização 2007/01/09: Mark Boulton acada de postar um artigo sobre espaços em branco no A List Apart. Vale a pena dar uma conferida.

Hora de Wireframes

Os wireframes, atrelado ao Design de Interação definido na fase de escopo, são, acredito eu, os principais elementos de qualquer projeto.

O Design de Interação trata de relacionar todo o fluxo que as páginas do projeto terão e os wireframes vêm como uma transformação visual para o diagrama criado. Tendo a base das páginas que serão necessárias (Design de Interação), agora é só desenhar uma estrutura visual para o conteúdo das páginas (wireframes), colocando os elementos do layout em locais específicos, levando em conta sua importância e relevância.

Costumo desenhar meus wireframes inicialmente em papel e depois prototipar estes desenhos em XHTML e CSS. Defino, assim, alguns mockup’s e templates para o projeto.

Os wireframes em XHTML são mais amplos por possibilitarem a definição de fatores que os em gráfico não possibilitam. O estudo da tipografia e a implementação das cores são alguns destes fatores.

Desenhar Wireframes é uma arte, pois deve-se tomar muito cuidado no posicionamento de cada elemento no canvas do layout. É importante sempre levar em conta fatores como Acessibilidade e Usabilidade.

Modelando o Banco de Dados

A fase de modelagem de banco de dados é outra que poderia ser adiantada, porém fazer uma modelagem logo no início pode causar sérios transtornos (não tenha dúvidas que depois de desenhar os wireframes muitas coisas mudam na estrutura de banco de dados). Um campo que nasce, uma chave que se move, sempre há o que reavaliar.

Os wireframes darão boa base para a estrutura que o banco de dados deve ter. Então, basta organizar as tuplas que porventura já estiverem criadas, adicionar as tuplas que nasceram no meio do caminho e definir os campos para cada uma delas. Costumo fazer esse processo também desenhando à mão, mas depois é sempre bom passar tudo isso para um DER mais bem detalhado.

Apresentando resultados

A cara do projeto acaba de nascer! Temos wireframes em papel ou em gráfico, templates e a modelagem do banco de dados. Chegou a hora de apresentar resultados.

Quando o trabalho se trata de um freelance, cuidados na apresentação devem ser tomados. Talvez não seja interessante mostrar wireframes em papel, a não ser que os desenhos tenham uma boa cara. De qualquer forma, acho mais interessante apresentar os templates em XHTML. Já no meio corporativo, onde os resultados podem ser discutidos entre os colegas e a chefia, vale qualquer um dos papéis, desde que bem organizados.

Neste momento um ciclo se inicia até a chegada num consenso para a apresentação ideal que o projeto deve ter. Revisões naturalmente podem surgir.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento

Preocupe-se mais com sua consciência do que com a sua reputação. Porque a sua consciência é o que você é e a sua reputação é o que os outros pensam de você. E o que os outros pensam, é problema deles!

Autor desconhecido

Tanto na Web quanto do outro lado da janela estamos sempre preocupados com a aparência; sobre qual será nossa imagem perante os outros. Eu não me preocupo com isso, aliás, concordo com o quote acima, mas em se tratando de Web, inevitavelmente, temos que tratar a reputação de nossos projetos com muito cuidado.

Na vida somos o que somos e as impressões externas (positivas ou negativas) vêm para moldar aquilo que somos, para que possamos crescer como pessoa e agregar, cada vez mais, valores positivos. Já na Web o processo é praticamente o inverso. Aquilo que criamos deve ser, logo de cara, exatamente como os outros querem ver. Isso pode ser difícil às vezes, mas nós devemos aprender a lidar com essa relação “quem sou” versus “o que devo ser”.

Ao criar, não necessariamente precisamos nos desvincular de nosso estilo (acho até imprescindível ter um). Basta que saibamos adequar o nosso campo de visão pessoal e criativa para aquilo que o usuário final gostaria de ver, ou precisa encontrar, ao entrar num site. Acredito que isso até ajuda na identificação dos requisitos e na implementação. O estudo da área ao qual o trabalho será inserido é importante para delimitar onde termina o Life Style do criador e começa a Arquitetura da Informação.

E a usabilidade, onde entra nisso tudo?

A usabilidade está no clique; está no olhar. O usuário costuma ser muito crítico (eu, como usuário, também o sou). Na primeira rolagem já somos capazes de definir vários pontos positivos e negativos para os locais que visitamos. É a primeira impressão que temos, será sempre assim.

O que criamos é o que sentimos de forma externalizada. Na Web é importante que, ao criar, também sejamos capazes de tentar sentir o que os outros sentem e pensar como os outros pensam. A criação deve ser algo de muita empatia. Uma troca visual e textual entre criador e utilizador que merece toda uma sintonia. Isso pode garantir uma boa relação e fazer com que o usuário volte sempre. ;)

Com base no diagrama do processo de criação web postado no artigo anterior, apresento as características da primeira fase.

Coleta de dados

É o primeiro contato com o cliente. Essa fase inicial acaba tendo uma cara de palestra, porque à medida que o cliente vai passando seus desejos, nós temos que mostrar quais serão as formas que eles podem ser criados e, naturalmente, o que pode ou não ser criado, mas como diz o ditado que o cliente pode tudo, eu troco por o que deve ou não ser criado.

A parte de coleta de dados, por ser o início de tudo, deve ser capaz de adquirir o maior número de informação possível do negócio do cliente. Depois, com todos os pontos identificados e organizados, começamos a pensar na forma de criação das próximas etapas.

Natureza do projeto

Projetos mais simples nos dão mais liberdade de fala, assim conseguimos agregar idéias ao cliente com mais facilidade, já com projetos mais robustos, não há outro jeito, reuniões e entrevistas serão necessárias para definir os pontos de implementação.

Caso de uso

O caso de uso é algo que costumo usar para melhor documentar o projeto. Mostrar ao cliente tudo aquilo que foi entendido nos encontros é uma forma de passar comprometimento com aquilo que deve ser feito. A apresentação do caso de uso serve para acertar os desencontros de informação.

Arquitetura da Informação nesse processo

A Arquitetura da Informação é item essencial no desenvolvimento de qualquer projeto no decorrer de todas as suas fases. Nesta parte inicial, de declaração de escopo e identificação de funcionalidades, a Arquitetura da Informação, através do Design da Informação, serve como um meio de melhor apresentação de tudo aquilo que foi coletado.

A AI, basicamente, é o estudo da Ciência da Informação e da Interação Humano-Computador, ou seja, o ato de focar o trabalho na forma com que o usuário irá interagir com o produto final. Isso inclui Usabilidade e Acessibilidade por exemplo.

Criar um Design de Interação também é fator de suma importância, pois ele é responsável pelo link entre Arquitetura da Informação e o Design Gráfico (área verde do Diagrama do processo de criação web).

Bom… O que importa nesta etapa inicial é o bom senso. Escutando tudo o que o cliente tem a dizer e mostrando os prós e contras de implementar este ou aquele recurso.

Relacionados

• Processo de criação web
• Processo de criação web: o escopo
• Processo de criação web: a identidade
• Processo de criação web: a diagramação
• Processo de criação web: o desenvolvimento