INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web – Web Design Ensino Médio Integrado Ana Paula Alves de Lima.

Apresentação em tema: "INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web – Web Design Ensino Médio Integrado Ana Paula Alves de Lima."— Transcrição da apresentação:

1 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína Aplicativos Web – Web Design Ensino Médio Integrado Ana Paula Alves de Lima 1

2 Usabilidade – Onde Estou? Desorientação causa insegurança. Basta chegar numa cidade desconhecida para perceber. Placas e mais placas apontando onde é o aeroporto, o bairro xy, os museus, as praças, os nomes das ruas...

3 Estamos sempre cercados de marcações e placas de orientação. Sem isso nos sentimos perdidos.

4 Agora imagine isso acontecendo quando entramos num site desconhecido.

5 Ao entrar na primeira página não temos essa noção de profundidade. Não sabemos o que vamos encontrar exatamente em cada página. Vamos abrindo uma porta por vez para descobrir o que existe do outro lado.

6 E quantas vezes entramos no site, vimos a primeira página e não entendemos sobre qual assunto o site se refere?

7 Vamos na prática... Acessem e Observem por 2 minutos... http://www.pudim.com.br/ http://www.fatosdesconhecidos.com.br/os-20- sites-mais-estranhos-e-sem-nocao-da-internet/

8 Não me faça pensar "Qual a coisa mais importante que eu devo fazer se quiser me assegurar que meu site seja fácil de usar?”

9 A resposta é simples. "NÃO ME FAÇA PENSAR".

10 Steve Krug No seu livro "Não me faça pensar", mostra, através de testes de usabilidade, que o usuário na maioria das vezes clica sem pensar antes de tomar essa atitude.

11 Ao criar um site, você deve tentar sempre se livrar dessas perguntas - Qual a coisa mais importante que eu devo fazer se quiser me assegurar que meu site seja fácil de usar. Crie sempre perguntando para você mesmo, colocando-se no lugar do usuário.

12 Um exemplo típico de dificuldade... nomes das seções - Quando tentam reinventar um nome já conhecido. Vejam esse layout antigo do jornal cearense O Povo. Pergunto: onde estão os classificados do jornal?

13

14 O nome dos classificados do jornal O Povo se chama POPULARES. Veja lá no topo azul, um botão verde entre "esportes" e "contato". Encontrou?

15 Somente damos uma olhada nas páginas, na maioria das vezes. Mas porquê? Geralmente estamos com pressa.

16 Se você tem um cachorro, percebe quando ele olha pra você quando você fala com ele. Um exemplo

17

18 É por isso que seu cachorro fica olhando pra você. Ele não entende nada, claro, ele não fala a sua língua, mas fica atento as palavras que lhe interessam, no caso, seu próprio nome.

19 Na realidade esse é o olhar mais comum quando entramos num site procurando por classificados: Note que

20 Note que os olhos do usuário no exemplo só enxergam o que ele quer ver. No caso, classificados. O resto não interessa, o que interessa é o que ele procura. Mas poderia estar procurando qualquer outra coisa. Sempre entramos procurando alguma coisa.

21 Existem algumas palavras que se destacam nesse meio embaçado por ser de interesse de todos. Palavras como "grátis", "sexo", "promoção“ normalmente despertam a atenção por ser um interesse de uma maioria o tempo inteiro.

22 Teste da Usabilidade Para que o usuário possa sentir a profundidade do site e saber onde ele está a qualquer momento, há uma série de padrões e mecanismos para que o cliente não se sinta perdido pelas páginas.

23 Um mecanismo muito importante para sites de grande profundidade é a ferramenta de busca. A busca serve como um balcão de informações.

24 Como somos ocidentais, lemos da esquerda pra direita, de cima para baixo. Por isso a área mais nobre do site está no topo, à esquerda. E é por isso também que normalmente encontramos ali o logotipo do site.

25 O logo também faz parte da navegação do site pois além de identificar em qual site o usuário está, serve como ponto de fuga, pois já há uma padronização de que clicando ali, volta-se para a home do site.

26 Imagine um logotipo de um site no lado direito ou no centro...

27 Esse tipo de padronização como vemos com os logos dos sites ocorre também no supermercado. Quando você não encontra uma seção, você olha pra onde? Provavelmente pra cima, buscando as placas identificadoras das seções.

28 O objetivo de toda capa de site é chamar a atenção do usuário para dentro do site.

29 Por isso devemos economizar palavras na home e falar somente o que interessa, com chamadas para as páginas internas. Palavras que não interessam como “seja bem-vindo” devem ser evitadas. Procure palavras que realmente provoquem algum tipo de efeito e que mereçam estar ali.

30 Não há problema em colocar um menu no topo e outro igual no rodapé. Procure alinhar os elementos do menu vertical, com todas as opções iniciando do mesmo ponto.

31 utilizar a migalha de pão ou breadcrumbs. Este recurso mostra ao usuário por onde ele passou até chegar ali, tudo utilizando links que dá a possibilidade do usuário voltar. Por exemplo: home > a empresa > valores

32 Outro item importante é colocar em destaque o nome da página da qual se está acessando. Se o usuário entrar na página “A Empresa” deve constar em local visível e de fácil leitura o título “A Empresa”.

33 Não se esqueça que nem sempre começamos a visualizar uma página a partir da página inicial. Quantas vezes fazemos uma busca pelo Google e ao encontrar um resultado caimos dentro de uma página interna do site?

34 EM DUPLA Exercite esse teste seguindo os seguintes passos: 1. Pegue a página impressa do site. 2. Segure à distância de um braço ou incline-a de modo que não possa estudá-la de perto. 3. Tão rapidamente quanto possível, tente encontrar e circule cada item da lista abaixo ( você não encontrará todos os itens em todas as páginas )

35 Circule: 1. A identificação do site 2. O nome da página As seções e subseções 4. A navegação 5. Indicadores "você está aqui» 6. A pesquisa Veja o exemplo:

36

37 Exercício – 2,0 pontos Abra o paint, e cole a imagem dos sites e circule os elementos citados: http://www.agricultura.gov.br/ Circule: 1. A identificação do site 2. O nome da página As seções e subseções 4. A navegação 5. Indicadores "você está aqui» 6. A pesquisa

38 Referencias Bibliográficas APOSTILA DO CURSO DE DESIGN WEB, BRUNO ÁVILA, 2005

39 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína

40 INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA TOCANTINS Campus Araguaína EXERCÍCIO PRÁTICO EM DUPLA Aplicando o exercício feito durante a semana, e as dicas para criação de um layout, crie o Layout no firewoks, photoshop ou paint da página inicial de um site a sua escolha um tema (moda,capricho, supermercados, restaurantes).