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

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.

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

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

4

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.

5

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

6

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

7

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.

8

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.

9

Figura 06

10

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

11

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

12

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.

13

Figura 09

Figura 10

14

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.

15

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.

16

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.

17

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.

18

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.

19

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.