Você está na página 1de 18

Fbrica de Stios

Poder Executivo do Estado de Alagoas

Web para Designers

Secretaria do Planejamento e do Oramento

itec
Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas

Web para Designers

Estado de Alagoas
Teotnio Vilela Filho Governador de Alagoas Jos Wanderley Neto Vice-Governador de Alagoas Jlio Srgio de Maya Pedrosa Moreira Secretrio de Estado do Planejamento e do Oramento Antnio Carlos Sampaio Quintiliano Secretrio Adjunto do Planejamento e do Oramento Luiz Eugnio de Castro Barroca Diretor-presidente do Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC Nelson Oliveira Menezes Filho Superintendente de Tecnologia da Informao e Comunicao do ITEC Thiago Jos Tavares vila Diretor de Tecnologia da Informao do ITEC Raymundo Sampaio Fernandes Diretor de Infra-Estrutura e Operaes do ITEC

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

O web design uma extenso da prtica do design, onde o foco do projeto a criao de web sites e documentos disponveis no ambiente da web. O web design tende multidisciplinaridade, uma vez que a construo de pginas web requer subsdios de diversas reas tcnicas, alm do design propriamente dito. reas como a arquitetura da informao, programao, usabilidade, acessibilidade entre outros. A preocupao fundamental do webdesigner agregar os conceitos de usabilidade com o planejamento da interface, garantindo que o usurio final atinja seus objetivos de forma agradvel e intuitiva. Este manual Web para Designers, so conceitos tericos e dicas sobre as melhores prticas de desenvolvimento para portais e sites na web.

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

O que design.............................................................................................................06 reas de Atuao........................................................................................................06 Princpios de design...................................................................................................07 Diagramao................................................................................................................08 Hierarquia da Informao...........................................................................................08 Cores............................................................................................................................09 Harmonizao..............................................................................................................10 Contraste.......................................................................................................................11 Links..............................................................................................................................11 Tipografia......................................................................................................................11 Equilbrio.......................................................................................................................11 Tratamento de Imagens...............................................................................................12 Interface........................................................................................................................12 Arquitetura da Informao..........................................................................................13 Menu e sub-menu........................................................................................................13 cones...........................................................................................................................14 Usabilidade e Navegao...........................................................................................15 De onde vim? Onde estou? Para onde vou?............................................................16 Sites sobre Usabilidade..............................................................................................16 Referncias Bibliogrficas..........................................................................................17

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

Web para Designers

Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers

Web para Designers O que design?


Design projetar conceitos, equilibrando esttica e funcionalidade. Segundo a ICSID - The International Council of Societies of Design, numa definio mais abrangente: Design uma atividade cuja finalidade estabelecer as qualidades multifacetadas de objetos, processos, servios e seus sistemas, compreendendo todo seu ciclo de vida. Portanto, design o fator central da humanizao inovadora de tecnologias e o fator crucial para o intercmbio econmico e cultural.

reas de atuao
Os principais grupos de atuao disciplinar da rea web: Design de Interfaces - O profissional desta rea projeta interfaces grficas de sistemas operacionais, softwares e games, animao 2D e 3D, sites (neste caso tambm conhecido como webdesigner) etc. objetivando o conforto do usurio. Design Grfico - um campo de atuao bastante amplo e criativo, cujas atividades englobam criao de logotipos, identidades corporativas, editorao (revistas, jornais, livros), embalagens, cartazes etc. Interface Digital - Responsvel por planejar a experincia do usurio, desde caminhos a serem percorridos por ele, at a definio de todos os elementos de interao utilizados (menus, botes, campos de texto). Abrange o uso da mdia eletrnica para a concepo de elementos visuais e grficos: Cds, concepo e diagramao de sites, produo de telas, slides, realidade virtual. Manipulao de Imagens - Uso da informtica na elaborao de imagens: ilustrao digital e foto digital. Tipografia - Estuda os problemas de visibilidade e leitura, bem como os aspectos culturais e estruturais do caractere ou smbolo a ser criado. Arquitetura de Informao - Responsvel pela organizao de todo o contedo disponvel no site/sistema digital. extremamente importante que ele veja com os olhos do usurio, pois sua tarefa fazer com que tudo esteja disponvel da maneira mais fcil, natural e transparente possvel.

6
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers Princpios do design


Para comear a projetar deve-se estar sempre atento aos princpios do design, como: conceito, originalidade, simplicidade, pregnncia da forma e legibilidade. Eles so importantes para a fundamentao dos seus projetos. Conceito O conceito nada mais do que um conjunto de informaes representadas por elementos grficos (como cor, tipografia, imagens, etc.) e que, juntos, transmitem uma idia. Originalidade A originalidade pode ser percebida em diversos aspectos, num layout diferenciado, na navegao, no uso de uma nova tecnologia. Rena um grande nmero de idias, sem se preocupar com a qualidade. Depois, basta selecionar as melhores e organiz-las at se chegar soluo ideal. Simplicidade Esta aplicao caracterizada pela organizao, harmonia e sntese visual, gerando boa pregnncia da forma. Pregnncia da forma Este um dos conceitos mais importantes da Gestalt. Ele demonstra que todas as formas tendem a ser percebidas em seu carter mais simples: uma espada e um escudo podem tornar-se uma reta e um crculo. Quanto melhor for a organizao visual da forma do objeto, em termos de facilidade de compreenso, rapidez de leitura e interpretao, melhor ser o seu grau de pregnncia. A teoria da Gestalt, gerada atravs de grande pesquisa e experimentao, sugere uma resposta ao porqu de umas formas agradarem mais e outras no. Ela afirma tambm que o crebro s consegue perceber, decodificar e assimilar uma imagem ou um conceito pela sua totalidade e no pelas partes separadas que formam este todo. Legibilidade Ao diagramar um site, principalmente pginas internas, onde h maior quantidade de textos, faa-o ficar o mais confortvel possvel de se ler. Geralmente, usurios lem na tela 'decompondo' as pginas: seus olhos selecionam automaticamente frases em destaque, grficos ou tpicos. Dificilmente lem um texto corrido na tela do computador. No livro 'A Prtica da Simplicidade', Jakob Nielsen, considerado um dos 'papas' da usabilidade, cita que a tima legibilidade requer o texto escuro em fundo claro, o que ele denomina como 'texto positivo'. Ex.: fundo bege e texto vinho. O contrrio, ou seja, texto claro em fundo escuro, chamado 'texto negativo', causa quase a mesma eficcia de leitura. Ex.: fundo azul-marinho e texto cinza claro. Entretanto, o autor diz que esta inverso de cores gera no usurio uma certa desacelerao ao ler. Elementos grficos de fundo, principalmente quando muito coloridos, podem interferir na capacidade de reconhecer as formas das palavras.

7
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers


Recursos que facilitam a legibilidade :: Destaque palavras-chave utilizando cor ou fonte diferentes. :: Divida o texto o mximo que puder com ttulos, subttulos e resumos significativos. :: Faa listas por tpicos (como esta) :: D preferncia a vrios pargrafos pequenos no lugar de poucos, porm, grandes. :: Use, aproximadamente, a metade do nmero de palavras que voc usaria em um texto impresso. :: Ilustre o texto com imagens relativas ao assunto, deixando-o mais dinmico e leve. :: Procure utilizar na fonte do texto uma cor que contraste e se sobressaia em relao cor do fundo. :: Utilize o recurso de hipertexto.

Diagramao
Na realidade do webdesigner, o site o espao onde seriam organizados os elementos gr?cos (textos, imagens, etc.) com os quais voc far sua composio.

Alinhamento
importante que todo o site (home e pginas internas) apresente o mesmo tipo de alinhamento de texto. Faa sua escolha (alinhado esquerda, justificado ou centralizado) e aplique em todas as pginas. O alinhamento se transforma em mais uma caracterstica da identidade visual do site. :: O alinhamento ESQUERDA visualmente mais confortvel, pois resulta em comprimentos diferentes para cada linha e facilita o usurio a no se perder na leitura. :: O alinhamento DIREITA deve ser utilizado apenas para pargrafos bem curtos, por alguma opo esttica, e no, aleatoriamente. :: O alinhamento JUSTIFICADO, ou blocado, tambm deve ser utilizado somente se o projeto pedir uma massa de texto quadrada ou retangular. :: O alinhamento CENTRALIZADO deve ser evitado para textos longos, pois dificulta bastante a leitura.

Hierarquia da Informao
Hierarquizar informaes em um site significa destacar ou priorizar alguns elementos em relao a outros. No caso de um texto, isso pode ser feito atravs de recursos, como: - texto grifado (negrito, itlico ou sublinhado); - aumentar o corpo do texto que deseja destacar; - utilizar uma segunda cor; - utilizar caixa alta (letras maisculas). Outra forma de destaque utilizar as reas privilegiadas do site (ver esquema ao lado). Na cultura ocidental, o processo de leitura consiste em uma varredura da esquerda para a direita e de cima para baixo. Por isso, a parte considerada mais privilegiada do site (para onde o usurio olha primeiro) o canto superior esquerdo. O lado esquerdo tambm bastante importante, assim como a parte superior (cabealho). Informaes no relevantes podem ficar abaixo da dobra do site (quando o usurio precisa rolar a pgina).

8
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers Cores


Ao criar o layout de um site, todos os elementos, inclusive as cores, devem visar que a experincia do usurio seja a mais eficiente e confortvel possvel. O bom uso das cores em um site determinante para uma usabilidade satisfatria. Antes de tudo, preciso saber se existe uma cor institucional que deve ser usada e como integr-la com as demais cores do layout. O importante que a cor mantenha as caractersticas do negcio do cliente e que a interface permanea perfeitamente funcional. A quantidade de cores usadas na web, ao contrrio dos impressos, no representa qualquer aumento de custo no projeto, o que pode levar ao seu uso excessivo e indiscriminado. No abuse, ou seu site vai virar um verdadeiro carnaval! Psicologia das Cores Lembre-se sempre de que, ao escolher uma determinada cor para seu projeto, esta provocar reaes, sensaes nos usurios que navegarem no site. : Fique atento aos efeitos :: Branco: considerada a melhor cor para demonstrar limpeza, ofuscante, levando a um certo cansao mental. O ideal sempre combin-la com outra cor. Sugere pureza. Cria uma impresso de vazio e de infinito. Ex.: ordem, simplicidade, luz, paz, higiene, casamento, hospital, neve, harmonia. :: Preto: utilizado sozinho austero e confere isolamento. Associado ao branco sugere um ar moderno. As composies do preto com outras cores podem ser bem alegres e esportivas. Quando brilhante, confere nobreza, distino e elegncia. Cor preponderantemente masculina. Ex.: noite, nobreza, pessimismo, tristeza, dor, silncio, morte. :: Cinza: a expresso de um estado de alma duvidosa e neutra. Smbolo da indeciso e da ausncia de energia. Quanto mais sombrio, mais conota desnimo, monotonia. Ex.: chuva, mquinas, seriedade, velhice, desnimo, sabedoria. : Vermelho: significa fora, virilidade, masculinidade, dinamismo. uma cor exalante e at enervante. Impe-se sem discrio. uma cor essencialmente quente, transbordante de vida e de agitao. Ex.: cereja, morango, sangue, desejo, sexo, agressividade, fogo, fome, perigo, guerra, fora, energia, fria, dinamismo, paixo. :: Laranja: transborda irradiao e expanso. acolhedor, quente, ntimo. Ex.: outono, pr-do-sol, festa, comida, movimento. :: Amarelo: estimula a criatividade, uma cor vibrante e alegre. Incentiva a conversao. Em excesso, cansativa. uma cor luminosa e muito forte para atrair a ateno. Ex.: luz, angstia, esperana, ateno. :: Verde: cor universal da natureza. Tem frescor, harmonia e equilbrio. Cor calma, que no se dirige para nenhuma direo, nem encerra algum elemento de alegria, tristeza ou eficincia. Ex.: floresta, natureza, bem estar, tranqilidade, juventude, umidade, sade, tapete de jogos. :: Azul: transmite segurana e confiana, alm de tranqilidade. Em exagero, pode deprimir as pessoas. Cor profunda, calma. Marca uma certa maturidade. Mais claro, provoca uma sensao de frescura e higiene, principalmente quando na presena de branco. Ex.: frio, cu, mar, tranqilidade, paz, infinito, meditao, credibilidade. 9 : Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers


: Roxo: equivale a um pensamento meditativo e mstico, mistrio. Assim como o preto, remete nobreza e ao poder. Ex.: sonho, mistrio, egosmo, nobreza, fantasia, profundidade, doena. :: Marrom: emana a impresso de algo macio, denso, compacto. Sugere segurana e solidez. Ex.: terra, outono, chocolate. :: Rosa: de pouca vitalidade e sugere feminilidade e afeio. uma cor ntima, de doura melosa e romntica. Ex.: feminilidade, delicadeza. Obs.: estes significados podem variar de acordo com a cultura de cada pas. Segundo estudos de Albert Badre, professor da Escola de Psicologia da Georgia Institute of Technology, enquanto vermelho significa perigo ou pare, nos EUA, na China, denota felicidade. Verde significa fertilidade e fora no Egito, enquanto, nos EUA, significa seguro ou prossiga e, na Frana, representa criminalidade. Por isso, torna-se to importante o estudo do pblico-alvo do site em relao percepo do uso de cores.

Harmonizao
Na hora de escolher as cores em um projeto, leve em considerao alguns princpios fundamentais como similaridade, familiaridade, equilbrio, ordem e ambigidade. Dicas para harmonizar as cores no seu layout, com base no crculo cromtico (trata-se de uma representao das cores atravs de um crculo onde so dispostas as variaes do espectro visvel pelo olho humano): :: Usar diferentes valores de luminncia (brilho) de uma mesma cor. Ex.: azul-marinho, azul-mdio e azul claro. :: Utilizar duas cores opostas do crculo cromtico. Este um esquema a ser analisado com cuidado, como no caso do uso de vermelho e verde. Pode-se ter uma rea maior com uma cor fria, deixando a rea menor com sua cor complementar quente. :: Utilizar duas cores vizinhas e uma terceira oposta a elas no crculo cromtico. Neste caso, importante determinar qual ser a cor predominante, aquela que chamar mais ateno na interface. Evite que a cor dominante ocupe a maior rea da tela. :: Imagine um tringulo eqiltero sobre o crculo cromtico e utilize as cores que esto nos vrtices. :: Faa composies baseadas na temperatura das cores, com cores frias (violetas, azuis, verdes) ou quentes (vermelho, laranja, amarelo). recomendvel o uso de branco como cor de alvio no texto, separadores, reas de respirao ou elementos acessrios, principalmente se forem utilizadas cores quentes. :: Outra preocupao com o equilbrio visual. Elementos escuros tendem a ser 'engolidos' visualmente por um fundo claro, parecendo menores. :: Se as reas forem igualmente distribudas entre uma cor quente e uma cor fria de igual luminncia, a cor quente predominar. :: Em uma interface em que prevalecem cores frias, as cores quentes chamam ateno, atraindo o olhar. :: Em uma interface em que predominam cores escuras, as cores mais claras atrairo o olhar. Isso provoca um efeito de ordenao na leitura. Usadas incorretamente, estes tipos de contrastes podem provocar disperso no usurio.

10
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers Contraste


Considerando-se que o contraste, cromtico ou luminoso, o que nos permite distinguir um objeto de outro ou do fundo em que ele est inserido, a utilizao de cores contrastantes ressalta a presena de um determinado elemento no layout. A viso do usurio se volta para os contrastes mais extremos. Estudos demonstram que um olhar imediatamente atrado para as partes de uma interface que so extremamente diferentes do que est a sua volta.

Links
importante lembrar tambm a importncia de saber trabalhar com as cores nos links. Geralmente, os links j visitados pelo usurio so diferenciados dos que ainda no foram vistos pelo uso de outras cores. Quando no respeitada essa regra, o visitante pode ficar perdido, e a navegao, ineficiente. Determinar uma escala cromtica e utiliz-la em todo o site ajuda a manter a coerncia e a identidade visual do projeto, familiarizando o usurio durante toda a sua visita.

Tipografia
O termo 'tipografia' significa o emprego de fontes, que nada mais so do que desenhos, representaes do alfabeto. Atravs de recursos grficos, as letras podem fornecer outras informaes sobre o contexto da mensagem, atravs de seu contorno, propores, peso, cor etc. Dependendo do tratamento tipogrfico, um simples alfabeto pode transmitir humor, dramaticidade e uma srie de outras emoes. Em meios digitais, a tipografia deve ser adequada baixa resoluo das telas, ao brilho dos monitores e distncia de leitura. Nos sites com grande quantidade de texto ou nos projetos onde seja preciso otimizar a busca por informaes, a legibilidade exerce maior influncia na opo do tipo. Produzir um texto legvel, impresso ou digital, requer habilidade e sensibilidade do programador visual. Ao escolher uma determinada tipografia para seu site, procure sempre proporcionar uma leitura rpida, confortos visual e cognitivo. Alm de ler facilmente, preciso tambm compreender facilmente a mensagem, o conceito que se quer passar ao usurio. Dicas :: Usar fontes fantasia ('desenhadas' ou temticas) apenas para ttulos. :: Para textos corridos, no devem ser utilizadas as fontes fantasia. D preferncia a fontes nativas do Windows que podem ser visualizadas em qualquer computador, como Verdana, Tahoma e Arial. Evite as fontes com serifa. :: Atualmente, uma grande variedade de fontes digitais vm sendo desenvolvidas. So fontes desenhadas especialmente para visualizao na tela do computador, o que requer um tratamento grfico diferenciado. Fontes para meios digitais normalmente apresentam formas mais simples, baseadas nas limitaes de resoluo dos monitores, e levam em conta a emisso de luz para que percebamos suas formas.

Equilbrio
Um website deve estar visualmente harmnico e equilibrado. Isso significa que, ao diagramar, deve-se distribuir os elementos e informaes de maneira homognea pelo site, evitando a concentrao de informaes em um determinado espao ou um grande vazio em outro, exceto quando o conceito do prprio site exigir uma diagramao mais assimtrica propositadamente. Em uma composio, a proporo das partes, juntas, deve transmitir a mensagem visual como um todo. Desenvolvido pela Fbrica de Stos - ITEC

11

Web para Designers Tratamento de Imagens


De acordo com o objetivo da empresa, a homepage um bom espao para valorizar produtos ou servios que precisam se destacar no mercado. Para apresentar produtos, faa um corte de modo que sejam eliminados elementos no-informativos, suprfluos e que realce as informaes importantes. Cuidado com a reduo, ela pode deixar a sua imagem abstrata. Voc pode pegar fotos de bancos de imagens gratuitas ou at fazer sua prpria produo. Utilize o mesmo tratamento grfico para todas as imagens e cuide para que o zoom seja o mesmo. Caso voc decida recortar as imagens (eliminando o fundo) ou utilizar molduras, (algum filtro do Photoshop), faa o mesmo com todas as fotografias.O importante que imagens, fotografias ou ilustraes tenham as mesmas caractersticas entre si. Esteja certo do seu objetivo e, caso necessrio, destaque apenas um produto ou servio. No concorra com voc mesmo. Quanto mais elementos destacados, menos importncia ser dada a cada um. Por isso, pense no seu objetivo para fazer o seu layout, valorizando os pontos mais importantes.

Interface
Caractersticas da web Para projetar, precisamos conhecer a base em que estamos trabalhando, verificar os limites e as possibilidades do meio e assim gerar um projeto bastante consciente e adequado s necessidades do cliente. Antes de projetar para web, devemos estar familiarizados com as suas caractersticas para desenvolver projetos coerentes com a mdia, explorando suas particularidades. Caractersticas da web 1. Interatividade Interagir trocar informaes. assistir e agir, no estar passivo ao recebimento de informaes 2. Atualizao Se comparada a livros, folders e portflios, o meio com o menor custo de levar informaes atualizadas ao usurio 3. Alinearidade Os usurios de um site decidem em qual direo desejam seguir. Um site no linear como a TV, por exemplo, que j tem uma programao pronta. 4. Hipertexto Possibilidade de interligar diversas informaes: internas ao site (diferentes nveis), continuao de textos ncora e referncias adicionais 5. Multimdia Integrao entre animao, udio, imagem, texto e vdeo 6. Adimensionalidade O espao na internet praticamente gratuito se comparado ao espao em qualquer mdia impressa. Porm, quanto maior o nmero de informaes, melhor deve ser trabalhada a hierarquia entre elas 7. Personalizao As informaes de um site podem ser expostas de acordo com o que o usurio deseja visualizar. Ou seja, vrias sees podem ser personalizadas para tornar a navegao mais rpida e eficiente para cada usurio.

12
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers


8. Acessibilidade A informao on-line, alm de atingir qualquer pessoa que se interesse pelo assunto, possui certos benefcios perante a passagem de informao off-line: usurios deficientes visuais podem converter o texto para fala com um browser que l textos; pequenas deficincias visuais podem ser contornadas se aumentado o tamanho da fonte original. Fonte: compilao de conceitos presentes nos livros Projetando Websites (Jakob Nielsen), No me faa pensar (Steve Krug) e design/web/design: 2 (Luli Radfahrer)

Arquitetura da Informao
At ento, vnhamos falando da parte visual, da esttica do site. Partiremos, agora, para um elemento no menos relevante, pelo contrrio, de suma importncia: o contedo. Esta, sim, a matria-prima do designer, e este profissional que determina a melhor forma de apresent-lo, facilitando seu acesso pelos usurios. Afinal, de que vale um site super atraente, se o usurio entra e no acha a informao que procura, perdendo-se no meio de tantos cliques? Para que isso no acontea, deve-se organizar e distribuir o contedo pelas pginas de maneira clara e objetiva, construindo uma boa Arquitetura de Informao. Pode-se dizer que ela uma ferramenta para que o site alcance uma boa usabilidade. Assim, o usurio facilmente encontrar o que procura, atingindo seu objetivo. Coloque-se sempre no lugar do visitante: pense em quais seriam suas expectativas ao entrar no site, o que gostaria de encontrar logo na pgina inicial, o que pode estar em 'segundo plano', o que menos importante etc. Assim, voc distribuir o contedo em nveis, desenhando o mapa do site.

Estruturando
Estruturar informaes significa formar grupos com base na identidade, semelhana entre essas informaes, permitindo que o usurio as encontre facilmente. Realizar essa estruturao desde o incio do projeto evita falhas que podem ocorrer na definio da arquitetura e que podem exigir, futuramente, a remodelagem do site. Exemplificando: imagine que os cardpios dos restaurantes, ao invs de apresentarem os pratos divididos em entradas, carnes, aves, peixes e massas, os classificassem em grelhados, ensopados e assados. Ora, se voc quisesse um fil de frango com batatas fritas, teria que procurar em 'grelhados', no meio de peixes e carnes. Muito mais demorado, no acha? Ao estruturar o contedo de um site, pense nisso: o usurio no quer parar e pensar onde precisa clicar para achar o que deseja, nem tem tempo para isso. preciso disponibilizar as informaes de forma que o usurio encontre-as quase intuitivamente.

Menu e sub-menu
O lado esquerdo do site o espao mais utilizado para o menu (menu vertical). Caso a quantidade de servios ou produtos oferecidos aumentem, o layout se adapta facilmente. Se utilizarmos a barra superior do site (menu horizontal), o espao torna-se limitado, pois no de costume o uso da rolagem horizontal. O usurio sempre passar seus olhos pelo menu, buscando o que deseja. Quanto maior o nmero de itens, menor a possibilidade de eles serem lidos, por isso, seja sucinto. J os sub-menus podem ter mais itens, pois estes, provavelmente, no estaro vista de incio, disputando sua ateno com o restante das informaes. Eles devem estar, de preferncia, 13 acessveis na prpria pgina inicial. Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers


Assim, fica mais fcil para o usurio se certificar de que o que ele procura est mesmo naquela seo, evitando tambm o desperdcio de tempo com o carregamento de uma pgina intermediria errada. Dicas :: Se o menu tiver poucos itens, o melhor classific-los por ordem de importncia. Se for muito extenso, melhor utilizar a ordem alfabtica. O importante usar o bom senso para fazer uma classificao coerente, pois cada caso um caso. :: Mantenha a mesma organizao do menu por todo o site. Modific-lo pode ser fatal para a navegao. :: Voc pode utilizar cones para substituir as palavras no menu (o famoso envelope que simboliza 'contato'), ou apenas para ilustr-las, mas so convenientes apenas em menus pequenos (at cinco itens). E cuidado com desenhos muito subjetivos: o usurio no conseguir identific-lo e no saber o que encontrar naquele item. Nesse caso, os testes de usabilidade so muito teis. :: Em alguns sites verticais, que utilizam barra de rolagem, o menu principal repetido no rodap da pgina a fim de que o usurio no precise voltar ao topo para acess-lo. :: O rodap pode ser usado tambm para informaes menos relevantes, como: contato com o suporte, marca do sistema de segurana utilizado na pgina, publicidade, copyright e crditos. :: Se o menu for inevitavelmente grande, agrupe os itens, dando ttulos aos grupos. :: Padronize: ordene hierrquica ou alfabeticamente, no seja aleatrio. Mantenha tambm a mesma tipografia, corpo do texto, letras maisculas ou minsculas. :: Demonstre a hierarquia entre os menus. D ao mais importante uma localizao privilegiada (topo ou lado esquedo), cor ou formato diferenciados, etc.

cones
O que um cone? cone, para a Semiologia, uma imagem que mantm com um determinando objeto uma relao de semelhana ou propriedade. Um cone uma abstrao de algo que do nosso conhecimento e apresenta, pelo menos, um trao em comum com o objeto representado. Quando utilizado no meio digital, o cone deve ser compreendido com clareza e objetividade. Esse o primeiro passo antes de aplicar diferentes cones num site. O objetivo final de um cone no esttico e sim de ajudar o usurio a navegar, atravs da cognio dos smbolos, tornando o meio digital mais humanizado. Deve-se levar em considerao que valores estticos e funcionais no devem competir entre si no site. Se o signo que voc escolher para representar determinada seo no for universal ou de simples assimilao da idia, h um grande risco de no ser compreendido pelo usurio e comprometer a usabilidade do seu projeto. Se h necessidade esttica no layout que estiver preparando, o ideal utilizar variaes grficas dos cones universais ou ter certeza absoluta da compreenso visual. Assim, voc alcana o objetivo grfico sem comprometer a funcionalidade de seu site.

14
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers Usabilidade e navegao Usabilidade


Usabilidade diz respeito ao grau de satisfao do usurio ao interagir com um produto ou interface. Um site com boa usabilidade aquele que proporciona uma experincia agradvel aos visitantes, permitindo que eles naveguem e atinjam seus objetivos com facilidade e conforto. Steve Krug, em seu livro 'No me faa pensar', diz que nem todos pensam como voc, sabem o que voc sabe, nem usam a web como voc. Ou seja, a usabilidade na grande rede consiste em estruturar um site pensando nas necessidades do usurio final e no nas suas. O maior desafio justamente entender o que o visitante quer da sua pgina. Feito isso, eliminam-se as barreiras entre a informao e o usurio. As chances de ele ir para um site concorrente diminuem, garantindo bons resultados para seu site.

Navegao
Navegao um termo bastante amplo. Na web, ela se d pelo movimento atravs de espaos virtuais pela busca de informao. centrada em objetivos e aes, e compreender este conceito-chave primordial para realizar um bom projeto de navegao. O foco da navegao dar suporte s tarefas do usurio. Para isso, voc precisa compreender aspectos como o que as pessoas querem fazer e como elas se comportam, assim voc poder prever suas reaes e comportamentos diante do site, elaborando, a partir da, uma navegao adequada. Todos sabemos que a base da navegao so os links. clicando neles que passeamos pelas sees, pulamos de uma pgina a outra. Porm, a navegao tambm conduzida por todos os elementos visuais presentes na pgina. O design aplicado nas interfaces tem, alm do valor esttico, o valor funcional, ou seja, ele deve contribuir para a navegabilidade do projeto. No existe uma receita pronta para se projetar uma navegao bem-sucedida, mas algumas consideraes podem ajudar: :: A navegao deve ser facilmente aprendida. Se os visitantes forem obrigados a gastar tempo aprendendo como se utiliza um mecanismo complexo, no tero energia para absorver o contedo. :: Para completar tarefas, as pessoas precisam ter ferramentas adequadas em mos; para tomar decises sobre movimentos e caminhos a percorrer, precisam ter orientao. Os elementos de navegao devem estar sempre visveis, quando necessrios. :: Os usurios so diferentes, desde o equipamento at as suas preferncias. Portanto, dependendo do pblico- alvo, deve-se apresentar diferentes alternativas, como verses para diferentes conexes (discada ou banda larga). :: Mapas e/ou mecanismos de busca podem ajudar. :: Evite o excesso de nveis hierrquicos (ou pginas intermedirias) em que o usurio tenha que completar um grande nmero de passos para alcanar contedos importantes. :: Na mdia impressa, a navegao est implcita e existe um vocabulrio conhecido, como ndices, sumrios etc. Entretanto, na web, essas convenes no existem ainda, estamos diante de um vocabulrio visual, onde cada elemento grfico tem um significado. :: A navegao deve ser adequada aos objetivos da empresa e tambm aos usurios. Um site de comrcio no deve ter o mesmo tipo de soluo de navegao que um site de entretenimento. No primeiro, o internauta provavelmente ter pouco tempo para gastar e ir direto ao produto de interesse. J no segundo, estar disposto a navegar livremente, sem pressa.

15
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers De onde vim? Onde estou? Para onde vou?
As respostas dessas trs perguntas devem sempre estar bem claras para quem navega. A sensao de segurana o que mantm o usurio no site. Ningum gosta de se sentir perdido. Para que isso no acontea, podem ser usadas algumas tcnicas: Cores diferenciadas Caso o site tenha um cabealho, por exemplo, que mude de cor a cada seo, o visitante memoriza mais facilmente que seo ele j visitou. Essa tcnica deve ser mais utilizada quando o menu no for grande, no tiver mais que cinco itens, pois depende da memorizao do usurio Migalhas de po (breadcrumbs) Consiste em mostrar ao visitante as pginas que ele visitou at chegar na qual ele est. Como se perdidos numa selva, jogssemos migalhas de po no cho para no perdermos o caminho de volta. Apresenta-se, em seqncia, os nomes das sees. Ex.: Pgina Inicial > Empresa > Equipe > Palavra do Presidente Links visitados Outra forma de no deixar o visitante perdido aplicar uma cor diferenciada nos links j visitados: poupa o tempo do usurio em carregar uma pgina j vista. Teste a interatividade de seu site quando ocorre uma reao, como uma resposta imediata a uma ao feita pelo usurio. Na internet, a troca de informaes entre o site (empresa) e o usurio (cliente) perfeitamente possvel. Porm, timidamente explorada. A maioria dos sites s dispe de um canal de contato com o cliente: o e-mail, ou um formulrio de cadastro. Enquetes e testes tambm so considerados recursos interativos.

Sites sobre usabilidade


:: Acessibilidade Brasil (www.acessobrasil.org.br) :: Usabilidade.com (www.usabilidade.com.br) :: LabIUtil (www.labiutil.inf.ufsc.br) :: Usabilidadebr (www.usabilidadebr.com.br) :: WdUse (www.10minutos.com.br/wduse) :: Usabilidade en la web (www.desarrolloweb.com/manuales/5) :: Usability News (psychology.wichita.edu/surl/usability_news.html) :: Useit.com (www.useit.com) :: UsableNet (www.usablenet.com) :: Usability Professionals'Association (www.upassoc.org/index.html) :: The Usability Methods Toolbox (jthom.best.vwh.net/usability) :: W3C (www.w3.org)

16
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers Referncias Bibliogrficas


ARTECCOM - Revista WebDesign http://www.arteccom.com.br WIKIPDIA - A enciclopdia livre http://pt.wikipedia.org/wiki/Webdesign

17
Desenvolvido pela Fbrica de Stos - ITEC

Web para Designers


Disponibilizado por:
Leide Isabel Fernandes Coelho Gerente de Governo Eletrnico e Incluso Digital - GGE Diretoria de Tecnologia da Informao - DTI Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC E-mail: gge.dti@itec.al.gov.br

Produzido por:
Alcimeire Alessandra Costa Analista Web Gerncia de Governo Eletrnico e Incluso Digital - GGE Diretoria de Tecnologia da Informao - DTI Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC

itec
Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas

Estado de Alagoas Instituto de Tecnologia em Informtica e Informao do Estado de Alagoas - ITEC Rua Dr. Cincinato Pinto, 503 - Centro - Macei-Alagoas-Brasil - CEP.: 57020-050 Telefone: +55 (82) 3315-1557 - Fax: +55 (82) 3315-1560 E-mail info@itec.al.gov.br

Desenvolvido pela Fbrica de Stos - ITEC