Componentes de Usabilidade

Jakob Nielsen, considerado pelo jornal The New York Times como “o guru da usabilidade em páginas de Internet”, definiu Usabilidade em cinco componentes diferentes:

• Capacidade de Aprendizagem: Facilidade para os utilizadores realizarem tarefas básicas na primeira vez que encontram o site;
• Eficiência: Rapidez com que os utilizadores podem executar tarefas depois de terem compreendido o design;
• Memória: Facilidade com que os utilizadores conseguem ser eficientes quando voltam ao site, após um período de tempo sem o utilizar;
• Erros: Quantos erros os utilizadores fazem, qual a sua gravidade e como conseguem os utilizadores recuperar desses erros;
• Satisfação: Grau de satisfação dos utilizadores ao utilizar o site.

Principio de George A. Miller’s

Deve-se seguir o princípio dos 7+-2 que surgiu fruto dos estudos de George A. Miller’s, onde é defendido que os humanos apenas conseguem reter entre 5 a 9 coisas na sua memória de curta duração. Assim, por exemplo deve-se, tipicamente, procurar limitar o número de opções dos menus a 7 opções distintas.

Regra dos 3 cliques

A regra dos 3 cliques defende que os utilizadores deixam de utilizar um site de Internet se com 3 cliques não conseguirem encontrar a informação que procuram. O mecanismo de navegação e estrutura hierárquica dos sites a construir deve ser pensado tendo em conta esta regra. Esta regra pode, contudo, não ser obrigatoriamente cumprida, caso o utilizador saiba onde está em cada momento da sua navegação e tenha uma percepção completa de como o sistema funciona.

Fitt’s Law

Identificada por Paul Fitts em 1954, a Fitt’s Law é um modelo que estuda o tempo para chegar a uma determinada área em função da sua distância e tamanho do alvo. Esta lei defende que, quanto mais distante e mais pequeno o alvo for, mais tempo é necessário a atingir esse alvo. Esta lei faz todo o sentido quando se trabalha com movimentos de rato e quando se pretende chegar do ponto A ao ponto B. De forma a respeitar este modelo, devem-se, por exemplo, usar botões de tamanho relativamente grande e em localizações próximas de onde o utilizador supostamente estará com o rato posicionado.

Simplicidade e facilidade de interacção

Aquando da primeira vez que os utilizadores interagem com um site, normalmente apreciam um design visual pormenorizado e imagens complexas. Contudo, posteriormente a essa visita, eles apenas pretendem utilizar esse site de uma forma rápida e que responda em conformidade com as suas rotinas.

Se uma interface web for de uso difícil, se for confusa, se não transmitir a mensagem chave da aplicação, se não permitir entender o que existe naquela aplicação, se for cansativa e mal organizada, entre outras questões, o visitante não irá continuar a navegar. Relativamente a sites de venda de produtos ou de promoção de empresas, o volume de negócios da empresa pode ser bastante prejudicado caso exista uma fraca Usabilidade.

Design de interfaces

Com os seus estudos ao nível do design de interfaces, Ben Shneiderman propôs um conjunto de princípios que derivam da experiência dos utilizadores e que se podem aplicar à maioria dos sistemas interactivos, podendo também ser aplicados no Web Design.

• Procurar ser consistente;
• Permitir aos utilizadores utilizar atalhos;
• Oferecer feedback informativo;
• Desenhar de forma a ser-se autocontido;
• Oferecer mensagens de erro simplificadas;
• Permitir a correcção de acções efectuadas;
• Dar a noção de controlo ao utilizador;
• Reduzir a informação de curta duração ao utilizador;

Testes de Usabilidade

Jakob Nielsen comprovou que o número de problemas de usabilidade encontrados num teste de usabilidade seguia a fórmula: , onde é o número total de problemas de usabilidade, a percentagem de problemas descobertos por um utilizador de testes e o número de utilizadores de teste. Sabendo que o número tem tipicamente o valor de 31% e traçando o gráfico da função rapidamente se chega à conclusão que 5 é o valor ideal para o número de utilizadores de teste.

Assim, devem ser utilizados apenas 5 utilizadores de teste procurando evitar feedback repetitivo sobre os problemas de usabilidade e procurando manter uma equipa de testes mais coesa.

Existem mais conceitos importantes relativos a este tema, estas são apenas algumas das noções que procuro seguir quando desenvolvo sites para a Internet.

Imagem retirada do site 72dpi.

A tipografia pode ser considerada como uma arte, que tem como principal objectivo esculpir a informação escrita, procurando melhorar a comunicação entre o escritor e o leitor. A tipografia tem, claramente, um papel fundamental na passagem da mensagem pretendida.

As fontes a utilizar

Relativamente à tipografia na Web, não tem interesse ter-se uma grande quantidade de fontes para se utilizarem na construção de um site, uma vez que o número de fontes suportadas, por defeito, nos diferentes sistemas operativos é muito reduzido, sendo posteriormente essas as fontes tipicamente disponíveis aos visitantes das páginas. Esta lista de fontes suportadas em todos os sistemas operativos é vulgarmente conhecida por “the safe list”. Existem formas de utilizar fontes fora desta lista. Contudo, estes métodos ainda não são suportados por alguns browsers de Internet.

É tipicamente recomendável o uso de uma “font stack“ por forma a manter um design constante em diferentes sistemas operativos e em diferentes browsers.

Comprimento da linha

Para além do tipo de fonte, é também importante o comprimento da linha do texto. Linhas de texto curtas ou demasiado longas podem causar irritação ou um elevado grau de distracção para o leitor. Linhas demasiado curtas apenas devem ser utilizadas para textos muito pequenos, porque para textos grandes forçam o leitor a exageradas mudanças de linha o que acaba por ser um obstáculo à leitura. Relativamente a linhas excessivamente longas, estas tornam difícil a localização da próxima linha a ler, quando o leitor termina de ler a linha anterior. Para os principais conteúdos deverá ser respeitada uma medida entre 40 a 80 caracteres (incluindo espaços) para cada uma das linhas. Idealmente deve-se tentar atingir uma medida na ordem dos 65 caracteres.

Contraste

O contraste do texto é também muito importante para uma correcta leitura do seu conteúdo. Um aspecto importante a evitar é a utilização de cores complementares para as combinações entre o texto e seu respectivo fundo. Cores complementares são as cores que se situam do lado oposto uma da outra nos sistemas de cores. No sistema HSV são facilmente identificadas as cores complementares.

Tamanho da letra

O tamanho é outro aspecto a ter em conta. Existem alguns sites na Internet, inclusivamente já na era da Web 2.0, que insistentemente utilizam fontes muito pequenas em algumas porções de texto ou inclusivamente no texto todo. Se existe texto numa página, então deve-se conseguir ler facilmente o seu conteúdo, sendo que a adopção de fontes de tamanho muito pequeno em nada ajuda à leitura. Por conseguinte, sempre que possível, é aconselhável a utilização de tamanhos de fonte grandes e nunca abaixo dos 11 pixels.

Hierarquia

A hierarquia ao nível da importância de cada pedaço de texto presente numa página é um aspecto de grande influência na mensagem que se pretende passar ao visitante. Os diferentes tamanhos permitem, por um lado, evidenciar os elementos mais importantes numa página e, por outro, possibilitar a visualização de algo muito semelhante a um sumário sobre os assuntos que trata o site. Isto porque mesmo através de um simples piscar de olhos conseguem ser focados os temas e ideias principais de uma forma automaticamente estruturada pelo visitante. É aconselhável que o tamanho seja consistente ao longo de todas as páginas do site para manter alguma uniformização entre o mesmo tipo de componentes.

A localização dos conteúdos

Os visitantes reagem também de forma diferente aos textos conforme a sua localização na página. Tipicamente os textos colocados no corpo principal da página terão um impacto superior aos encontrados numa barra-lateral. Contudo, se pretendermos captar uma maior atenção do leitor para a barra-lateral, poderemos compensar, por exemplo, com um aumento do tamanho da letra nesta mesma barra-lateral. Particularmente neste aspecto da localização, é importante seguir algumas das convenções utilizadas na Internet de modo ao utilizador agir de forma instintiva ao primeiro contacto com a página.

A regra de Gutenberg dá algumas indicações importantes sobre este assunto, é possível ler alguma informação (em Inglês) sobre esta regra no site da NuvoGraphics.

Dar espaço para o texto respirar

O texto deve conseguir respirar e para isso deve ter espaço. Esse espaço permite focalizar a atenção do visitante no próprio texto que acaba por ser o mais importante para transmitir a mensagem. Uma regra seguida por muitos webdesigners é estabelecer, através do CSS, um espaçamento entre linhas de 140% o tamanho do texto.

Estes são alguns dos aspectos que penso serem importantes na âmbito da tipografia na Internet, se tiverem outros que considerem relevantes não hesitem em partilhar.

Programa

Terça 06 Abril, 17h

JOSÉ BÁRTOLO (Teoria e Crítica do Design)
http://reactor-reactor.blogspot.com
“Tomadas de Posição: Manifestos e Design”

JOANA E MARIANA (Design de Comunicação)
http://www.joanaemariana.com
(Comunicação sem título definido)

::::::::::::::::::::::::::::::::::::::::::::::::::

Quarta 14 Abril, 17h

ALEXANDRE ESTRELA (Imagem)
http://www.alexandreestrela.com
(Comunicação sem título definido)

JOÃO FONTE SANTA (Pintura)
http://www.vpfcreamart.com/joaofontesanta.swf
“O Desenho como Desporto Radical”

::::::::::::::::::::::::::::::::::::::::::::::::::

Terça 20 Abril, 17h

PATRÍCIA GOUVEIA (Cultura, Artes e Jogos Digitais)
http://mouseland.blogs.ca.ua.pt
“Estética e Design da Experiência Lúdica Digital”

DINO DOS SANTOS (Tipografia)
http://www.dstype.com
“Tipos para Editorial: Mandamentos para um Processo Tipográfico”

::::::::::::::::::::::::::::::::::::::::::::::::::

Terça 27 Abril, 17h

ANTÓNIO SILVEIRA GOMES (Design de Comunicação)
http://www.barbarasays.com
“Barbara says… Projecto Próprio”

MIGUEL NEIVA (Design de Comunicação)
http://www.coloradd.net
“ColorADD – Sistema de Identificação de Cores para Daltónicos”

Para uma informação mais detalhada, consultar: https://www.uc.pt/fctuc/design-e-multimedia/cicloconversas/Cicloconversas2010.

Foi inicialmente pensado para criar ligações que apontassem para as palavras entre as tags de headings do HTML (h1, h2, h3…), contudo é possível utilizar este plugin para outros tipos de tags.

O plugin foi elaborado para dar resposta a uma necessidade imediata e por isso pode apresentar alguns aspectos menos elegantes ou optimizados, pelo que agradeço todas as eventuais correcções ou sugestões que possam fazer.

Podem consultar a página do plugin e efectuar o seu download no seguinte link: http://wordpress.org/extend/plugins/anchors-menu.

O logótipo pretende representar graficamente uma determinada marca e para isso faz uso de um desenho, de uma tipografia específica ou de uma fusão de ambos. Neste artigo são listadas as fontes utilizadas nos logótipos de algumas das empresas mais influentes na era da Web 2.0 e são também recomendadas mais 10 fontes, gratuitas, que penso serem adequadas à criação de logótipos semelhantes aos dessas empresas.

É possível visualizar aqui um conjunto com cerca de 400 destes logótipos de empresas da Web 2.0. Os logótipos destas empresas caracterizam-se por usar cores fortes e alegres como o azul, laranja ou verde. Relativamente às fontes existe uma grande diversidade, desde fontes futuristas a outras mais tradicionais, um ponto em comum é a maior utilização de fontes suaves e sem serifas. A lista encontra-se de seguida, com o link para cada uma das fontes utilizada.

• Twitter: Pico Alphabet (modificada)
• Last.fm: National (modificada)
• Vimeo: Black Rose
• Flickr: Frutiger Black
• Facebook: Klavika (modificada)
• Digg: FFF Forward (modificada)
• Cork’d: Triplex
• Grooveshark: FF Nuvo
• Envato: Agenda Italic
• Tuts+ Network: Lubalin Graph
• Technorati: Neo Sans Medium
• Purevolume: Avenir Book
• Youtube: Alternate Gothic No. 2
• Basecamp: Whitney
• Google: Catull BQ
• Yahoo: Yahoo Font
• Hulu: Futura MDd BT (modificada)
• Bebo: Neuropol (modificada)
• TMZ: Amelia
• The ONION: Eagle Bold
• Mapquest: Cheap Motel
• Linkedin: Myriad Pro Bold
• Skype: Helvetica Rounded Bold
• Revision 3: VAG Rounded Black

É possível obter mais algumas informações sobre este assunto num artigo do site da FontFeed que foi publicado no ano de 2006, mas que ainda consegue permanecer bastante actual.

As fontes, gratuitas, que considero bastante interessantes para projectos com a “vertente” Web 2.0 encontram-se mencionadas de seguida. Algumas destas fontes são gratuitas apenas para uso pessoal, por isso é sempre importante consultar as suas licenças antes de serem utilizadas em projectos comerciais.

• Alte Haas Grotesk
• Arista
• Delicious
• Folks-Light
• Fontin Sans
• Miso
• Moderna
• Quicksand
• Rezland
• Tondo

Se conhecerem outras fontes que se enquadrem com as que foram aqui referidas comentem este artigo e partilhem comigo.


Fonte: Fonts Used In Logos of Popular Websites

A maior parte das optimizações normalmente efectuadas a websites é feita nos processos de geração do documento HTML, traduzindo-se maioritariamente por ajustes e melhorias ao nível de servidores web e sistemas de gestão de bases de dados. Contudo é de realçar que as optimizações a esse nível apenas vão incidir em cerca de 20% do tempo total de resposta do documento até que este chegue ao utilizador. É pois facilmente compreensível que é de extrema importância optimizar os outros 80% do tempo de resposta, é aqui que surge o conceito de front-end optimization associado a páginas de Internet. Neste artigo estão descritas 20 boas práticas que devem ser tidas em conta de forma a efectuar-se correctamente este tipo de optimizações.

Esta lista não tem a pretensão de enumerar todas as boas práticas que devem ser seguidas no desenvolvimento de um site de Internet, pretende apenas chamar a atenção para algumas delas cabendo ao leitor deste documento ter a devida precaução quanto a outros aspectos que poderão eventualmente ser relevantes. As primeiras 14 boas práticas foram retiradas do livro do Steve Souders com o título de High Performance Web Sites.

1 – Fazer menos HTTP requests

Apenas entre 10% a 20% do tempo de resposta de uma página de Internet é gasto na resposta do ficheiro HTML sendo os restantes 80% a 90% gastos em HTTP requests de todos os componentes da página (imagens, scripts, folhas-de-estilo, Flash…) que se encontram referenciadas no documento HTML. Assim este é provavelmente o aspecto que caso seja correctamente optimizado irá causar maiores melhorias no desempenho de uma determinada página de Internet. A remoção de componentes da página iria proporcionar uma melhoria automática no desempenho, contudo também iria comprometer o design final da página. O ideal é manter o design desejado e ao mesmo tempo diminuir o número de HTTP requests, para isso podem-se seguir um conjunto de simples técnicas que conseguem melhorar o tempo de resposta de algumas páginas para metade ou até menos.

A ideia principal por detrás dessas técnicas passa por a fusão de conteúdos de forma a que um elevado número de HTTP requests possa ser transformado num número mais reduzido. Para imagens existem variadas técnicas que permitem essa união, nomeadamente: Image Maps ou CSS Sprites, de seguida encontram-se dois pequenos exemplos destes mecanismos. Existe também para imagens uma técnica que permite eliminar os pedidos de HTTP dessas mesmas imagens denominado de Inline Images, ainda que este método não se encontra disponível na versão actual de alguns browsers incluindo o Internet Explorer. Relativamente a outros ficheiros que não sejam imagens o principio a aplicar deverá ser o mesmo, e sendo assim ficheiros como folhas-de-estilo ou JavaScripts devem na medida do possível serem fundidos num menor número.

Image Maps

Image Maps – Server side – Não aconselhável

<a href="navbar.cgi"><img ismap src="imagemap.gif"></a>

Utilizador envia as coordenadas do clique: http://…/navbar.cgi?127,13.

Image Maps – Client side – Recomendável

O mecanismo de Image Map do lado do cliente é preferível essencialmente por permitir ser utilizado independentemente da localização do rato estar ou não numa determinada zona.

<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
  <area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
   …
</map>

CSS Sprites

Atenção: Não é suportado em alguns browsers mais antigos como é o caso do Opera 6!

<span style="
  background-image: url('sprites.gif');
  background-position: -260px -90px;">
</span>

2- Usar uma Content Delivery Network

As Content Delivery Networks conseguem fornecer um factor de proximidade bastante apetecível do utilizador final, conseguindo-se tempos de resposta melhorados. Além disso as CDN permitem servir como cópias-de-segurança, aumentar a capacidade de storage, permitir mecanismos de caching mais precisos e absorver picos de tráfego.
Maioritariamente as CDN são utilizadas para servir conteúdos estáticos, como imagens, scripts, Flash, etc… Isto acontece porque os ficheiros estáticos têm poucas dependências. Por outro lado os conteúdos dinâmicos estão dependentes de um conjunto variado de factores como ligação a base de dados, autenticação, optimizações a nível do hardware e do Sistema Operativos entre outros aspectos.

3 – Adicionar cabeçalhos de expiração

A promoção da utilização de mecanismos de cache para conteúdos que mudam pouco frequentemente pode trazer significativas melhorias. Para o conseguir pode-se fazer uso dos mecanismos de header expires e max-age. Em conteúdos que mudam mais frequentemente também se podem utilizar estes mecanismos mas com o cuidado de usar tempos de cache mais reduzidos ou então mudar o nome do ficheiro a ser alterado (por exemplo recorrendo à numeração numérica de versões do ficheiro) . Como é compreensível estes mecanismos só trazem melhorias quando a cache do utilizador se encontra preenchida pelo que da primeira vez que ele visita a página as melhorias são inexistentes.

4 – Compressão G-Zip

Reduzir o tempo da resposta HTTP pode ser alcançado reduzindo o tamanho dessa mesma resposta, uma vez que assim o tempo de transferência diminui visto que menos pacotes de informação têm de ser transferidos para o utilizador.
Como a maior parte dos browsers suportam esta forma de compressão de resposta HTTP é aconselhável instalar os módulos nos servidores web e activar este mecanismo em todos os tipos de ficheiros que se encontram no servidor, não esquecendo os scripts e folhas-de-estilo.

Num servidor Apache 1.3 deve-se utilizar o mod_gzip, já num servidor Apache 2.x deve ser usado o mod_deflate.

5 – Colocar as folhas-de-estilo no topo

Ao colocar as folhas-de-estilo no topo do documento HTML permite com que a página seja reenderizada de forma progressiva. Assim o utilizador não fica perante uma simples página em branco durante um elevado período de tempo, o que caso acontecesse poderia fazer com que o utilizador ficasse impaciente e saísse da página. Com a folha-de-estilo no topo o browser consegue ler o estilo da página inicialmente e ir mostrando correctamente os vários componentes à medida que os vai recebendo. A colocação da folha-de-estilo no fundo impede o browser de mostrar os conteúdos sem que a folha-de-estilo tenha sido completamente descarregada.

6 – Colocar os JavaScripts externos no fundo

Relativamente aos JavaScripts a regra é a oposta à das folhas-de-estilo, devendo neste caso serem colocados no fundo do documento HTML. Tal regra é recomendada porque o download destes scripts bloqueia o paralelismo que se processa ao nível do download dos outros vários componentes da página. Ficando o mecanismo de reenderização progressivo da página fortemente prejudicada quando a ligação para estes scripts se encontra no topo da página.

7 – Evitar as expressions do CSS

Devem ser evitadas ao máximo expressions do CSS uma vez que estas expressões são analisadas não apenas quando a página é carregada mas também com bastante frequência noutras situações, inclusivamente quando se faz scroll na página ou se move o rato. Esta análise constante destas expressões causa um overhead que provoca uma degradação do desempenho na visualização das páginas de Internet.

Assim deve-se fazer um esforço para evitar expressões deste tipo:

width: expression( 
  document.body.clientWidth < 600 ? 
  “600px” : “auto” );

8 – Utilizar o Javascript e o CSS em ficheiros externos

Geralmente sempre que possível deverá optar-se pela utilização de ficheiros Javascript e CSS externos por forma a promover a utilização da memoria cache, uma vez que normalmente estes ficheiros são utilizados em diversas páginas ao longo do mesmo site de Internet. Apesar de se estar a aumentar o número de pedidos HTTP (a ir contra a regra número 1 da redução dos pedidos HTTP) normalmente a utilização de ficheiros externos nesta situação é compensatória.

Deve ser sempre usada a directiva LINK em vez de ser usada a directiva @import, para efectuar a importação do ficheiro CSS.

9 – Reduzir os DNS lookups

A Internet está fortemente dependente do conceito de DNS lookups onde o nome de um determinado site é convertido para uma sequência numérica, designada por IP, que define qual a máquina onde está alojada a página. Esta conversão acarreta um custo temporal ainda considerável, tipicamente entre os 20 e os 120 milissegundos. Sabendo que o browser não consegue descarregar nada sem que o DNS lookup tenha sido efectuado facilmente se percebe que por cada DNS lookup se está a impor um travão à reenderização progressiva da página. Assim e na medida em que for possível deve-se procurar reduzir ao máximo o número de DNS lookups.

10 – Minificar o Javascript

A minificação é um conceito que traduz a tentativa de redução do tamanho dos ficheiros através da remoção de espaços e outros caracteres desnecessários, permitindo assim a optimização do seu tempo de carregamento. Neste caso em particular permite uma melhoria do tempo de resposta uma vez que o tamanho do ficheiro Javascript se torna mais pequeno. As melhorias do tempo de resposta são tipicamente entre 15% e 30% quando se utiliza este método.

Um compressor gratuito e on-line: http://www.minifyjavascript.com.

11 – Evitar Reendereçamento

Um reendereçamento é usado para encaminhar um utilizador de um determinado URL para outro URL distinto. Existem variadíssimas situações em que os reendereçamentos são utilizados, nomeadamente website redesign, controlo de fluxo de tráfego ou tradução em URLS mais facilmente memorizáveis.
Acontece que muitas vezes o reendereçamento é utilizado para carregar alguns componentes dentro de um documento HTML. Facilmente se percebe que até que o reendereçamento esteja completo nada relativo a esse componente poderá ser descarregado. Esta situação é muito utilizada em mecanismos publicitários dentro de páginas de Internet.
Assim devem ser usados os mecanismos de reendereçamento com especial cuidado e devem ser evitados ao máximo.

12 – Remover scripts duplicados

Existem muitas situações, por estranho que possa parecer, onde na mesma página é carregado o mesmo script por mais do que uma vez. Isto acontece tipicamente porque os websites são construídos por grandes e diferentes equipas onde os mecanismos de sincronização entre elas por vezes não funcionam da melhor forma.
Esta situação acarreta pedidos HTTP desnecessários para o caso do Internet Explorer se os scripts não estiverem em cache. Assim como execução de Javascript desnecessária e redundante em todos o browsers actuais. É pois perceptível que esta situação causa um overhead desnecessário.

13 – Configurar Entity tags (ETags)

Como já foi expresso a redução do número de pedidos de HTTP é o factor que melhor permite acelerar a experiência de utilização para o utilizador. Ao maximizar a capacidade do browser para colocar em cache componentes está-se automaticamente a reduzir o número de pedidos de HTTP. A maximização dessa capacidade é uma das características das ETags uma vez que permite validar se um componente em cache é válido ou não.
Ainda assim este mecanismo deve ser utilizado com cuidados redobrados uma vez que não funciona caso exista alteração do servidor a utilizar. Alem disso a não utilização deste mecanismo permite obter cabeçalhos de resposta HTTP mais pequenos.
Em situações convencionais é aconselhável desligar este mecanismo. No Apache este sistema pode ser desligado adicionando FileETag none ao ficheiro de configuração do Apache. Para desligar no IIS deve consultar o seguinte link.

14 – Permitir a permanência em cache do Ajax

Com o surgimento do conceito de Web 2.0 os websites para além de ganharem uma dimensão mais social também sofreram grandes alterações ao nível dos interfaces e da agregação de informação através de diferentes serviços web. De facto as páginas de Internet tornaram-se mais em aplicações com os conceitos de input e output bem definidos. O DHTML e o Ajax vieram facilitar a implementação desse novo paradigma.
Apesar do Ajax ser uma tecnologia que permite que os pedidos sejam feitos num formato assíncrono, o utilizador pode acabar na mesma por ficar à espera da resposta. É verdade que graças ao Ajax os utilizadores não são forçados a efectuar um reload à página e que o interface continua a responder mesmo quando o utilizador está à espera. Ainda assim o utilizador pode (e continua muitas vezes) ter de ficar à espera que os resultados sejam mostrados antes de tomar qualquer nova acção. É importante esclarecer que um evento ser assíncrono é diferente de um evento ser instantâneo.
Basicamente para melhorar o desempenho devem-se permitir entradas na cache do utilizador para os pedidos activos do Ajax, pois são estes os principais responsáveis por causar o maior impacto na experiência do utilizador. Outras das regras já apresentadas anteriormente também podem ser aplicadas ao pedidos do Ajax, entre elas estão a compressão GZip, a redução dos DNS lookups ou a minificação dos Javascripts.

Bónus – 15 – Promover download ficheiros Javascript em paralelo

Nota: Este mecanismo de paralelismo deve ser usado com precaução, uma vez que se a página a ser carregada necessite de código de um dos ficheiros que seja carregado paralelamente e se esse ficheiro ainda não tiver sido totalmente descarregado irão ocorrer problemas.

É possível descarregar ficheiros Javascript em paralelo, tirando partido da cada vez mais vulgar banda larga e da sua tipicamente elevada velocidade de acesso à Internet. Seguem-se dois pequenos excertos de código HTML que mostra como o fazer.

Sem paralelismo:

(...)
<script type="text/javascript" src="Script1.js"></script>
<script type="text/javascript" src="Script2.js"></script>
(...)

Com paralelismo:

(...)
<script type="text/javascript">
  document.writeln("<script type='text/javascript' src='Script1.js'><" + "/script>");
  document.writeln("<script type='text/javascript' src='Script2.js'><" + "/script>");
</script>
(...)

Bónus – 16 – Utilizar favicon.ico pequeno e armazenável em cache

O favicon.ico é uma pequena imagem que tipicamente é apresentada na barra onde se encontra o endereço do site em que o utilizador se encontra. Mesmo que opte por não utilizar favicon.ico no desenvolvimento da sua página o browser vai sempre realizar um request à sua procura. Caso o icon não esteja presente o resultado devolvido pelo servidor irá ser um 404 Not Found e não aparecerá nenhum icon ao utilizador.
Como o custo associado ao request do icon não pode ser evitado é recomendável que faça proveito desta oportunidade e coloque um icon com um tamanho reduzido de forma a reforçar a identidade da sua página. Tipicamente o tamanho do icon não deverá ultrapassar 1kbyte por forma a não prejudicar o desempenho. É ainda possível definir o parâmetro expires com um valor elevado, por exemplo na ordem dos 4 meses, de forma a esse icon permanecer na cache dos utilizadores.

Bónus – 17 – Não redimensionar imagens em HTML

Ao diminuir o tamanho de imagens recorrendo a código em HTML está-se a exigir o download de um ficheiro de maior tamanho do que aquele que será efectivamente visualizado. Como é facilmente perceptível esta situação acarreta um overhead desnecessário, sendo que as reduções de tamanho das imagens devem sempre ser realizadas no próprio ficheiro da imagem.

Bónus – 18 – Utilizar o formato de ficheiro de imagens correcto

Existem diversos formatos com que as imagens podem ser guardados, uma escolha adequada desse mesmo formato pode fazer com que essa imagem se torne mais leve, ocupando menos espaço, sem que exista perda perceptível da sua qualidade para o utilizador.

Bónus – 19 – Declarar sempre as dimensões das imagens

Deve-se sempre declarar a altura e o comprimento dos diferentes componentes como imagens ou vídeos uma vez que isso evita que o browser tenha que “adivinhar” o tamanho desses objectos fazendo com que o carregamento da página demore mais. Além disso assim o browser ao reservar automaticamente o respectivo espaço para esses componentes faz com que o carregamento da página seja muito mais consistente.

Bónus – 20 – Codificar as folhas-de-estilo mais pequenas possíveis

É possível codificar as folhas-de-estilo recorrendo a código mais sucinto sem que isso traga alterações ao resultado final. Deixo alguns exemplos.

Exemplo 1:

O código:

#div_xpto {
  padding-top:15px;
  padding-bottom:10px;
  padding-left:13px;
  padding-right:0px;
}

produz exactamente o mesmo resultado do que:

#div_xpto {padding: 15px 0 10px 13px;}

Exemplo 2:

O código:

div {
  background-image:url("fundo.jpg");
  background-color:#ffffff;
  background-repeat:repeat-x;
  background-position:top center;
}

produz exactamente o mesmo resultado do que:

div {
  background:url("fundo.jpg") #fff top center repeat-x;
}

Também é recomendável comprimir o código CSS, tal poderá ser feito neste compressor gratuito e on-line: http://www.cssdrive.com/index.php/main/csscompressor.

Para um estudo mais aprofundado sobre todo este tema recomendo vivamente a leitura do livro onde fui buscar inspiração para este artigo. Como referi inicialmente estas são apenas algumas das boas práticas que devem ser seguidas para optimização de websites ao nível do seu front-end, se tiverem mais algumas partilhem comentando este artigo.

Clicar aqui para ver a imagem no tamanho original. Também é possível descarregar no formato pdf.

Sucessão de Fibonacci

Na segunda metade do século XII, por volta do ano 1175, nasceu em Itália um dos mais importantes matemáticos da Idade Média. Leonardo de Pisa (1170 – 1250), mais tarde conhecido por Fibonacci. O seu pai era comerciante, actividade que exigia bastantes conhecimentos de cálculo. Curioso e atento ao que o rodeava Fibonacci cedo manifestou interesse em aprender os segredos da Matemática. Acompanhou o pai nas suas viagens o que lhe permitiu contactar com o sistema de numeração árabe quando na Europa Ocidental ainda se utilizava a numeração romana para efectuar registos de cálculos.

No ano de 1202 publicou Liber Abaci, o livro do ábaco, onde explicava a utilização dos algarismos nas operações aritméticas. Nesta obra é também apresentado, entre outros assuntos, um problema que ganhou lugar de destaque na história da Matemática. O problema dos coelhos.

Num recinto é colocado um casal de coelhos que acabou de nascer. Supondo que em cada mês, a partir do segundo mês de vida, um casal de coelhos dá origem a outro casal de coelhos, quantos casais de coelhos existem no recinto no início de cada mês?

A solução do problema recebeu o nome de sucessão de Fibonacci. O primeiro e segundo termo da sucessão é 1 e todos os outros são obtidos pela soma dos dois termos precedentes.

Sucessão de Fibonacci: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, …

Divina proporção e o web design

A sucessão de Fibonacci, aplicada no campo da geometria, permite construir uma espiral utilizando quadrados cuja medida dos lados são 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, … Esta espiral é bastante famosa e tem aplicações práticas em diversas áreas que vão desde a ciência até às artes.

Contudo e no âmbito deste artigo o que é realmente saliente e fascinante é o facto da sucessão definida pela razão entre cada termo da sucessão e o termo anterior convergir para um limite. O valor deste limite é um número irracional. Um número ao qual é dada a designação de razão de ouro, representada pela letra grega Phi.

A razão de ouro é curiosamente facilmente encontrada na natureza, arquitectura, música, economia e em muitas outras áreas. É até considerada por alguns como obra de Deus devido à sua elevada abundância em diversas áreas no Universo sendo inclusivamente intitulada de proporção divina.

Ao trabalhar em design tendo em conta esta proporção estão-se automaticamente a desenvolver obras que seguem princípios sobre os quais o cérebro humano já está familiarizado criando assim uma linguagem mais natural que o cérebro compreende e reconhece mais facilmente. Seguem-se duas situações onde é possível aplicar esta proporção na área do web design na tentativa de criar um design mais agradável.

Layout de duas colunas

Uma forma de criar obras segundo esta razão é por exemplo numa página de Internet que utilize duas colunas. Ao definir a largura do conteúdo de uma determinada página de Internet dividir essa largura por Phi (1.618) e assim obter o valor da coluna principal da página a desenvolver. Consequentemente ao se subtrair à largura total a largura da coluna principal também se obtém a largura da coluna secundária.

Exemplo:

Largura de conteúdo = 760px
Largura coluna principal = 760px / 1.618 ~= 470px
Largura coluna secundária = 760px – 470px = 290px

Elementos rectangulares

Outro aspecto prende-se com a proporção dos diferentes típicos elementos rectangulares que existem nas páginas de Internet. É recomendável que esses elementos como, por exemplo, a navegação do site ou o espaço de publicidade também tenham em conta a razão de ouro nos seus tamanhos. Ao se definir uma das medidas (altura ou a largura) de um determinado elemento deve-se procurar aproximar a outra das medidas através da razão de ouro.

Exemplo:

Altura do elemento = 300px
Largura do elemento = 300px / 1.618 ~= 185px

Esta razão já foi utilizada à muito tempo atrás por diversos artistas e em diversas situações e por isso não é nada de novo. Contudo parece-me importante relembrar e adaptar estes conceitos para as novas formas de arte e comunicação como por exemplo a Internet.

1. Inspiração

A inspiração para um determinado trabalho pode até surgir espontaneamente mas para que tal aconteça é importante cultivar essa inspiração que todos temos dentro de nós. Para promover essa inspiração podem-se consultar trabalhos de outros web designers. Consultar não significa copiar, consultar significa ver ideias, padrões, técnicas e estilos que podem ser interessantes. Essa nova informação pode até não ser particularmente útil para o trabalho actual mas ajuda a ganhar sensibilidade para as últimas tendências o que pode ser bastante benéfico no futuro. Também se pode adquirir inspiração através de outras formas que não estão directamente relacionadas com o web design. Assim podem-se simplesmente consultar fotografias, livros de pintura, simples revistas, ver um filme ou ouvir um bom álbum de música. Outra maneira é simplesmente sair do escritório e dar um simples passeio, ao conviver com outras pessoas ou simplesmente admirar a natureza consegue-se adquirir bastante inspiração.

Links:

• 60 More Places to Get Design Inspiration – Online and Off
• 2008 Design Trends
• 50 Must-Read Resources For Incredible Web Design

2. Pedir opiniões

Não se deve ter receio de pedir opiniões sobre o trabalho desenvolvido. Tal pode ser feito a pessoas da área do web design mas também a pessoas exteriores a esse universo, que por vezes conseguem ter uma visão de mais alto nível que poderá ser bastante útil. Em algumas situações podem inclusivamente ser usadas as redes sociais como por exemplo o twitter ou o flickr para se conseguirem contactar um maior número de pessoas que normalmente são bastante colaborativas e poderão dar algumas sugestões.

3. Simplicidade

Um bom design atinge-se apenas quando todos os elementos que estão presentes têm uma função indispensável e bem definida. Ser simples pode tornar-se um desafio bastante interessante e complexo. Outro aspecto prende-se com a necessidade de deixar os diferentes elementos respirar pelo que o espaço vazio é normalmente um forte aliado de um bom design.

Links:

• minimalsites
• Keep It Simple, Stupid!
• 50 Minimal Sites

4. Conhecer o cliente

Só porque o web designer acredita que o resultado do trabalho está bom não significa que o cliente irá aprovar esse trabalho. É importante conhecer e interpretar a atitude e a postura do cliente, assim como é imprescindível que sejam definidos claramente os objectivos que se pretendem alcançar com o trabalho a desenvolver. É importante criar e saber manter um equilíbrio saudável entre as vontades e necessidades do cliente e as opiniões e convicções do web designer.

5. Estar actualizado

Estar actualizado é fundamental na actividade do web design, estar a par do que se passa na industria é uma obrigação. Novas tecnologias e novas aplicações estão constantemente a surgir pelo que é importante não ficar estagnado ao que já se conhece. Existem diversas fontes de informação na Internet, desde tutoriais até a informação sobre as últimas tendências. Ir a conferências e encontros de web design e tecnologia é importante para conviver com outros web designers e entusiastas de forma a trocar ideias para que todos possam aprender uns com os outros.

Links:

• web design Alltop
• corkdump
• delicious.com – tag: webdesign

• Eventos TIC, NT & Informática
• Barcamp Portugal
• SHiFT

6. Criar uma caixa de ferramentas

É bastante útil ter guardado um conjunto de pedaços de código, imagens, icons e outros tipos de materiais. Este material pode ser organizado em directorias pelo seu tipo, por exemplo: CSS, PHP, XHTML, Flash, Vectors, Icons, etc… Desta forma organizada quando se necessitar de algum material específico é muito mais rápida a sua localização.

7. Pensar no papel

Tomar notas por vezes pode ser bastante útil, especialmente nas fases iniciais de desenvolvimento, uma vez que facilita o desenho da estrutura das páginas, a anotação de simples ideias ou o esboço de elementos gráficos. Começar a escrever e a desenhar tudo o que vem à cabeça consegue geralmente gerar um bom conjunto de material que posteriormente pode ser trabalhado no computador. Este processo acaba por ser algo instintivo mas passa geralmente por 4 etapas distintas.

1. Olhar: Ver a realidade como ela é e não fazendo julgamentos. Tipicamente é quando é apresentado ao web designer o trabalho a desenvolver;
2. Ver: Interpretar essa realidade de acordo com os seus padrões principais e objectivos. É a fase onde é necessário simplificar e pensar esquematicamente;
3. Imaginar: Tentar descobrir a partir das coisas que vemos outros novos dados. É quando tipicamente se deve apelar à inspiração;
4. Desenhar: Caso se cumpram correctamente as etapas anteriores o esboço no papel irá surgir naturalmente.

Links:

• The Role of Sketching in the Design Process
• Back of the Napkin
• The Joy of Sketch : explorations in hand-crafted visuals

8. Procurar evoluir

Não se deve ficar preso sempre às mesmas metodologias e deve-se sempre tentar evoluir. Isto aplica-se tanto em termos de práticas de trabalho como de tecnologias usadas. Por vezes é importante desafiarmo-nos a nós próprios, olhar no horizonte e dar um passo em frente. Inclusivamente se não o fizermos podemos ficar presos a padrões ultrapassados e com forte carga pessoal e nunca mais conseguir pensar criativamente.

9. Dominar áreas imprescindíveis

A actividade de web design engloba um vasto conjunto de competências que vão muito mais além do que o simples acto de programar. Assim existem algumas áreas que são um indispensável complemento à actividade de web design. Dentro dessas competências destaco particularmente 3 áreas: teoria das cores, tipografia e usabilidade devendo ser feito um esforço contínuo para aprender e dominar estas áreas.

Links:

• Teoria das cores:
• Colour Lovers
• kuler
• Color Scheme Designer
• Tipografia:
• I Love Typography
• dafont
• The Elements of Typographic Style Applied to the Web
• Usabilidade:
• the ultimate webdesign usability checklist
• Usability.gov
• 30 Usability Issues To Be Aware Of

10. Aproveitar a oportunidade

No fundo não é apenas trabalho, o web design é um veículo que permite ao web designer usar a sua criatividade e expressar as suas emoções ao mundo. É também uma oportunidade de contribuir positivamente para a sociedade construindo soluções que melhor sirvam as necessidades de todos nós.