• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Se Liga Concórdia
 

Se Liga Concórdia

on

  • 195 views

Projeto de desenvolvimento web site aplicando parâmetros de design.

Projeto de desenvolvimento web site aplicando parâmetros de design.

www.seligaconcordia.com.br

Statistics

Views

Total Views
195
Views on SlideShare
195
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Se Liga Concórdia Se Liga Concórdia Document Transcript

    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Figura 06 9
    • 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
    • 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
    • 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
    • Figura 09 Figura 10 13
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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