Projeto de desenvolvimento web site aplicando parâmetros de design. www.seligaconcordia.com.br

1. MINISTÉRIO DA EDUCAÇÃO – MEC
SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA – SETEC
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
CATARINENSE – CÂMPUS CONCÓRDIA
CURSO TÉCNICO EM INFORMÁTICA
Gefferson Vivan
Se Liga Concórdia
CONCÓRDIA-SC
2013

2. Resumo Executivo
Avaliar aparência, design e comunhão de itens e estilos nos torna
pessoas mais criteriosas, de bom gosto.
Desenvolve um ser crítico, capaz de avaliar diferentes ambientes,
buscando a harmonia com cores, formas e conceitos.

3. Descrição do projeto
Construir um web site, utilizando como base o design, a arquitetura da
informação e noções básicas de planejamento visual para otimizar a
experiência do usuário.
Exemplo de interação:
O usuário acessa o web site obtendo agradável experiência de
navegação, onde elementos, fontes, cores e imagens se relacionam com
consistência, facilitando a (IHC) Interação Homem Computador.
Obs. Todos os conceitos citados neste trabalho foram aplicados ao projeto
www.seligaconcordia.com.br

4. SUMÁRIO
1 Design para quem não é design .................................................................................... 4
1.1 Os quatro princípios básicos .................................................................................. 4
1.1.1 Contraste ................................................................................................................... 4
1.1.2 Repetição................................................................................................................... 6
1.1.3 Alinhamento ............................................................................................................. 6
1.1.4 Proximidade .............................................................................................................. 8
2 Não me faça pensar........................................................................................................ 10
2.1 As três leis de krug ................................................................................................. 10
2.1.1 Não me faça pensar ............................................................................................... 10
2.1.2 Não importa quantas vezes eu tenha que clicar, desde que cada clique
seja uma escolha óbvia e não ambígua ........................................................................ 10
2.1.3 Livre-se da metade das palavras de cada página. Depois livre-se da
metade do que sobrou ................................................................................................... 10
2.2 Práticas Útilizadas ...................................................................................................... 11
2.2.1 Uso de hierarquia ................................................................................................... 11
2.2.2 Uso de convenções ................................................................................................ 12
2.2.3 Links óbvios ............................................................................................................. 12
2.3 Teste de usabilidade .................................................................................................. 14
2.4 Resumo teste de usabilidade ................................................................................... 15
3 Ergo Design e a arquitetura da informação ............................................................ 16
3.1 Como melhoramos a usabilidade ............................................................................ 16
3.1.1 Consistência ............................................................................................................ 16
3.1.2 O controle é do usuário ........................................................................................ 16
3.1.3 Na cabeça 7 mais ou menos 2 .............................................................................. 16
3.1.4 Conheça o usuário .................................................................................................. 17
3.1.5 Tempo de resposta ................................................................................................ 17
Conclusão............................................................................................................................. 18
Referências ........................................................................Erro! Indicador não definido.9

5. Design para quem não é design.
Robin Willians
Neste livro Robin Willians cita dicas de como criar um bom design
aplicando quatro princípios básicos: Contraste, Repetição, Alinhamento e
Proximidade.
Estes princípios podem ser utilizados na criação de vários tipos de
matérias, desde flyers, cartões de visitas, informativos de empresas ou, neste
caso, web sites, partindo de um plano de organização, colocando elementos
em uma forma visual amigável para o público em geral.
1.1 Os quatro princípios básicos.
1.1.1 Contraste
Conforme ilustrado na figura 01, se obtém o contraste quando os
elementos são diferentes. Observe a tarja preta do menu em relação ao link
do web site Se Liga Concórdia na cor branca. A diferença entre os dois é
nitidamente percebida, então, neste caso aplicamos o princípio do contraste.
O contraste aplicado corretamente cria um interesse a mais no
material, faz com que nossos olhos se voltem para ele, como sugere o
exemplo na figura 01 quando temos o começo da frase em uma cor, seguida
pelo resto dela em outra, sugerindo que seja um link a ser clicado.
Na figura 01 também temos um exemplo de aplicação que sugere
contraste, mas não é. No background da página foi aplicado um tom de cinza
suave, sem a intenção de chamar a atenção do usuário. Também foi aplicado
ao assunto central um retângulo para contorná-lo, com fundo em branco. Esta
variação de cores sugere um contraste, mas segundo Robin Willians, ‘cria-se
contraste quando dois elementos são diferentes. Se eles diferem um pouco, mas
não muito, não acontecerá contraste, mas sim conflito’. E de fato ocorre
conflito, pois os elementos não chamam a atenção do olhar, mas sim os
confundem por serem cores parecidas.
4

6. Figura 01
Na figura 02 encontramos outros exemplos de como o contraste pode
ser obtido. Em uma linha fina, outra grossa. Em uma fonte bold e outra
normal. Em cores frias com cores quentes.
Para alcançar o contraste desejado não se pode ser tímido, colocando
cores próximas, como citado no exemplo anterior. É necessário ousar e
mostrar que de fato existe uma diferença entre os elementos, mesmo eles
sendo da mesma família.
Figura 02
5

7. 1.1.2 Repetição
Não seria agradável acessar cada página de nosso projeto e ver um
menu diferenciado em cada uma delas. Seria uma experiência ruim, fazendo
parecer que cada página é um novo site acessado.
O propósito da repetição é unificar o site, neste caso, fazendo várias
páginas pertencerem ao mesmo projeto.
Na figura 03 foram adotados vários exemplos de repetição, tais como
menu e rodapé no mesmo tamanho e cor, tipos de fontes e repetição de cores
em determinados elementos, fazendo que eles pareçam unidos, sugerindo
familiaridade ao acessar o site.
Figura 03
1.1.3 Alinhamento
O que aconteceria se simplesmente jogássemos elementos em nosso
projeto,
não
interligando-os
visualmente,
deixando-os
de
forma
desorganizada? Para arrumar esta bagunça toda, o princípio do alinhamento
sugere que cada item deva ter conexão visual com algo na página.
Ilustrando a organização da página, na figura 04 elementos são
colocados de forma alinhada, sendo que os textos estão alinhados cada qual
com sua coluna. O retângulo central utilizado para separar o assunto
6

8. secundário está alinhado ao centro da página, e internamente o texto
alinhado ao centro do retângulo. Fugindo a regra de todo iniciante no campo
do designer de tentar alinhar tudo ao centro, temos o ícone do Facebook que
está alinhado à direita do retângulo, sugerindo um visual diferenciado, mas
não desconectado visualmente com o retângulo ao qual ele está contido.
Mesmo não estando próximos na página, elementos estão relacionados
pelo seu posicionamento.
Figura 04
Na figura 05, o princípio do alinhamento continua ativo no projeto,
deixando o menu na mesma linha. Também deve-se prestar atenção ao texto
‘Comentários ofensivos sujeitos a moderação’ que foi alinhado à direita da
página, mas que continua pertencendo a mesma caixa de texto, pois está
alinhado com a linha que o divide, e também com a caixa de texto
‘comentários’ a sua esquerda.
Cada novo comentário efetuado pelo usuário é posto dentro de uma
caixa de texto, com nome, data do comentário e assunto alinhados à
esquerda, dando ideia de organização interna do comentário e cada caixa de
comentário é alinhado com seu anterior.
7

9. Figura 05
1.1.4 Proximidade
Para se obter este princípio, alguns ítens do projeto que são
relacionados entre si foram agrupados. Eles não devem ser espalhados pelo
layout somente para preencher espaços vazios, isto causa um desagrado
visual e informações não ficam claras para o usuário.
Na figura 06, o princípio de proximidade foi aplicado nos assuntos
comuns entre si, organizando e deixando de forma clara itens que se
relacionam na página.
8

10. Figura 06
9

11. Não me faça pensar.
Steve Krug
O que pensamos quando acessamos uma página web? Olhamos
primeiro para o que nos chama a atenção? Observamos se cores, fontes e
conteúdos nos agradam?
Várias vezes nos deparamos com páginas difíceis de navegar, com erros
não percebidos por programadores que as criam, devido ao seus vícios e
rotinas de desenvolvimento. Não me faça pensar, de Steve Krug relata
abordagens de bom senso à usabilidade da web, citando regras e conceitos
que ajudaram na criação de nosso projeto.
2.1 As três leis de Krug:
2.1.1 - 1° Não me faça pensar.
Quando acessamos o projeto Se Liga Concórdia, sabemos claramente
qual é o seu propósito, sendo autoexplicativo e evitando que o usuário tenha
que adivinhar, pensar ou não entender sua serventia ou como realizar ações.
Levando em consideração a primeira lei de Krug, o site deve ser claro e
objetivo quanto a sua finalidade.
2.1.2 - 2° Não importa quantas vezes eu tenha que clicar, desde que cada
clique seja uma escolha óbvia e não ambígua.
Esta lei aborda como os desenvolvedores devem organizar seus links,
levando o usuário a caminhos óbvios e necessários a ele. O fato de se ter
vários atalhos ou caminhos para se chegar aonde deseja dificulta e não é
confortável para o usuário iniciante. Em excesso e sem a necessidade
complica, mas se é vital o uso, que o leve onde quer chegar.
2.1.3 - 3° Livre-se da metade das palavras de cada página. Depois livre-se da
metade do que sobrou.
O conceito de querer explicar, esmiuçar e deixar tudo mastigado para o
usuário nos leva ao pecado do exagero. O consentimento de um primeiro
10

12. texto vem carregado de informações desnecessárias, ambíguas e que de fato
não interessam ao leitor. Pessoas não tem o hábito de ler textos longos.
Mesmo sendo interessantes, elas desistem no primeiro parágrafo, seja pela
falta de tempo, cansaço mental ou outros motivos.
No projeto Se Liga Concórdia não foi diferente. Sua primeira forma veio
carregada de palavras dispensáveis, sem utilidade e que somavam tempo e
peso ao esquema. O argumento de menos é mais, para livrar-se da metade das
palavras e depois da metade do que sobrou foi alcançada com o teste de
usabilidade proposta por Krug, citada no decorrer deste trabalho.
2.2 Práticas utilizadas
2.2.1 Uso de hierarquia
Ordenar as informações conforme sua importância, deixando assuntos
pertinentes claros e de fácil acesso ao usuário. No projeto Se Liga Concórdia,
conforme demonstrado na figura 07, as informações foram colocadas logo
abaixo do menu principal, sendo mostradas imediatamente quando o web site
é acessado.
Figura 07
11

13. 2.2.2 Uso de convenções
Convenções estão presentes em nosso dia a dia. Não há nenhum
problema em fazer uso das convenções, porque para quem visita é mais claro
entendê-las.
No projeto Se liga Concórdia foi utilizada uma convenção na palavra
Sobre, conforme demonstrado na figura 08, sendo ela empregada em todo o
início de frase e também diferenciada por outra cor do resto da frase.
Figura 08
2.2.3 Links óbvios
A utilização de links óbvios torna o projeto Se Liga Concórdia de fácil
entendimento. Ao clicar no assunto, conforme demonstrado na figura 09, o
usuário é levado para outra página, onde encontra um breve resumo sobre o
mesmo. Também pode ler comentários efetuados por outros usuários e
comentar, conforme figura 10.
12

14. Figura 09
Figura 10
13

15. 2.3 Teste de Usabilidade
Segundo Krug, o teste de usabilidade deve ser aplicado para três ou
quatro usuários, se possível, desde o início do projeto.
O teste de usabilidade ajuda a encontrar imperfeições, excessos, erros,
entre outros conflitos que possam estar ocorrendo em seu projeto. Eles são
notados por serem apresentados a pessoas que não participam do seu
desenvolvimento, estando de mente limpa, podendo apontar defeitos e falhas
para correção posterior.
No projeto Se Liga Concórdia, o teste de usabilidade foi aplicado em
quatro pessoas, com características e níveis diferentes de usabilidade da
internet.
Foram feitas as seguintes questões, com respostas para sim ou não.
01 – Quanto ao domínio SeLigaConcordia.com.br:
- Gostou?
- De fácil memorização?
- Passa a proposta do site?
Reposta:
03 pessoas gostaram do domínio. 01 não.
04 pessoas acharam o domínio de fácil memorização.
03 pessoas acharam que o domínio passa a proposta do site. 01 não.
02 – Layout:
- É agradável?
- Limpo?
- As cores e fontes seguem uma estética limpa e objetiva?
Resposta:
04 pessoas acharam o layout agradável.
04 pessoas acharam o layout limpo.
03 pessoas acharam que as cores e fontes estão de acordo com uma estética
limpa e objetiva. 01 não.
14

16. 03 – Para efetuar comentários surgiram dificuldades?
Resposta:
04 pessoas não acharam dificuldades para efetuar comentários.
04 – Comentaria como usuário?
Resposta:
03 pessoas comentariam como usuário. 01 não.
05 – Fácil entendimento?
Resposta:
04 pessoas acharam o site de fácil entendimento.
06 – Entendeu a proposta do site?
Resposta:
03 pessoas entenderam a proposta do site. 01 não.
07 – Nota de 0 a 10 do projeto como um todo.
Resposta:
Média de nota atribuída ao site: 8.75
08 – Indicaria para um amigo?
Resposta:
04 pessoas indicariam ao seus amigos.
2.4 Resumo teste de usabilidade
Com a aplicação do teste, somando-se a leitura do livro: A Startup
Enxuta (2012), pode-se pivotar após extrair opiniões e pontos de vista do
usuário comum, atribuindo conteúdo e funções que não estavam presentes,
aplicando um produto mínimo viável ao usuário.
15

17. Ergo Design e a arquitetura da informação.
Luiz Agner
Na projeto Se liga Concórdia foram levados em consideração vários
fatores, tais como elementos, conteúdo, cores e outros que devem ser
considerados.
Também foi cobrada a sua eficiência, proposta por Luiz Agner que
explica o que é a arquitetura da informação e como usa seus princípios para
aperfeiçoar projetos web com foco no usuário.
3.1 Como melhoramos a usabilidade.
3.1.1 Consistência
Construir uma página com consistência tem a ver com o princípio de
repetição, de Robin Willians, citado no capítulo anterior. Repetir elementos,
cores, tipologia, a mesma em todas as páginas, cria uma identidade visual.
3.1.2 O controle é do usuário
Repassamos ao usuário a sensação de que ele está no controle. De que
ao executar uma ação, o site responde. Principalmente na área de
comentários, onde não existem validadores de e-mails, sendo postada
automaticamente sua opinião após o envio.
3.1.3 Na cabeça 7 mais ou menos 2
Neste conceito, Agner comenta o fato de que o ser humano tem
memória de curto prazo, dificultando lembrar de todas as funções existentes
em seu site.
Por isso recomenda o uso de até 09 elementos por página e evitar a
aplicação de botões dropdown, pois eles criam muitos atalhos e prejudicam na
memorização da página.
16

18. 3.1.4 Conheça o usuário
Descobrir o que o público alvo pensa, o que quer e como age. O projeto
deve sem centrado no usuário, não levando em consideração o modelo de
gerenciamento da empresa ou opiniões de gerentes. O senso comum não
deve ser utilizado para definir layout, mas sim feedback usuário. Isto pode ser
alcançado com análise de log e teste de usabilidade proposto por Steve Krug
e também por Agner.
Ele também aconselha adequar a home para a navegação. Ela deve dar
suporte ao objetivo do website, aonde o usuário iniciante é favorecido.
3.1.5 Tempo de resposta
Todo site deve ter o tempo máximo de resposta de não mais que 10
segundos.
A demora desestimula o usuário, fazendo-o não retornar.
17

19. Conclusão
Aplicar métricas de design no início, meio e fim de um projeto implica
em
um
maior
entendimento
e
melhor
implementação
para
seu
desenvolvimento.
Buscar conciliar informações consiste em obter melhores resultados
junto ao usuário final, agregando valor, satisfação e entendimento diante da
proposta repassada a ele.
Ter consciência de que o design influencia em nosso dia a dia nos faz
buscar o aprimoramento, satisfazendo os anseios humanos, evoluindo nos
conceitos aplicados.
18

20. Referências
WILLIAMS, Robin. Design para quem não é designer. Ed. 3ª Ed. Callis, 1995.
KRUG, Steve. Não me faça pensar. Ed. 2ª São Paulo: Ed. Market Books, 2006.
AGNER, Luiz. Ergodesign e arquitetura da informação: trabalhando com o
usuário. Ed. 2ª Rio de JANEIRO: Quartet, 2006.
RIES, Eric. A Startup Enxuta. Ed. 1ª São Paulo: Ed.Lua de Papel, 2012.
19