Descrição

Nessa discussão e atividade on-line, os participantes exploram e experimentam como o design visual funciona na Web e como os web designers usam suas habilidades para estimular determinados comportamentos. Os participantes comparam e contrastam os elementos visuais e interativos de diferentes páginas e plataformas. Em pares, eles narram e documentam as “jornadas do usuário” por meio de um site – um processo que os web designers da vida real usam para testar e melhorar sites.

Objetivos da Aprendizagem

• Explicar como o design visual funciona na web
• Identificar como os elementos de web design são usados para incentivar determinado comportamento
• Criticar e documentar reações a um site

Tempo Necessário

45 minutos a 1 hora, dependendo do tamanho do grupo

Público-alvo

Pode ser adaptado para públicos de 13 anos ou mais; com níveis variados de experiência com a web.

Materiais

• Notas autoadesivas
• Lápis, marcadores
• Notebook com conexão à Internet

Habilidades de Alfabetização Web

• Design
• Pesquisa
• Navegação

Habilidades do Século XXI

• Comunicação
• Colaboração
• Solução de problemas

Ganhando Emblemas Digitais

Os emblemas digitais capturam a evidência e são a demonstração do conhecimento e da realização. Cada Atividade Principal abrange múltiplas habilidades de alfabetização web. A conclusão de todas as Atividades Principais permitirá que qualquer um ganhe todos os emblemas da alfabetização web e habilidades do século XXI. Assim, encorajamos você a concluir todas as Atividades Principais e ganhar emblemas para capturar o que aprendeu. A Digitalme está oferecendo emblemas de alfabetização web através do Open Badges Academy.

Introdução

[10 min] O(A) facilitador(a) introduz a ideia de que a web é um espaço projetado. Tudo o que você experimenta na web é resultado de uma decisão humana e uma intenção humana: * Um botão ou barra de pesquisa em um determinado local * Texto em um determinado tamanho * Escolhas de cores * Imagens, texto, etc.

• O(A) facilitador(a) pergunta aos participantes, o que significa projetar algo?
  • Vamos pensar em design no mundo físico. Vamos pegar os edifícios, por exemplo (o(a) facilitador(a) escolhe dois exemplos contrastantes):
    • casa assombrada/prédio do governo/boate
    • vs. chácara aconchegante/creche/biblioteca?
  • Você já esteve em espaços como estes? Como esses ambientes podem ser ou parecer diferentes?
  • Quais são os sentimentos diferentes que você deseja que os usuários do seu prédio tenham?
  • Quais são as diferentes ações que você deseja que os usuários de seu edifício tomem?
• Designers fazem escolhas para criar um resultado – em ação ou sentimento para o usuário. Todos os designers têm planos e intenções.
• Como usuário, você responde ao design com sentimentos e ações (ou não).
• O(A) facilitador(a) conecta a discussão sobre os espaços físicos com a Web: como um espaço físico, a maioria dos sites é projetada com uma intenção – há algo que o designer deseja que os usuários façam.
• Discuta com os participantes ou faça uma atividade de pensar/dupla/compartilhar sobre as seguintes perguntas:
  • Quais sites você usa com mais frequência? Cada participante pensa em um site (YouTube, Facebook, Google, Amazon, site da biblioteca, etc.)
  • Qual é o objetivo do site? O que o criador do site pretende que você faça? (Pode ser: comprar coisas, ver anúncios, etc)
  • O que você está fazendo aí? O que você quer fazer?
  • O seu objetivo é diferente do que o designer do site quer? Se sim, como?
  • Você já teve uma experiência de visitar um site com a intenção de fazer uma coisa e acabar fazendo algo diferente? Como ou por que isso aconteceu?
  • Você já teve a experiência de visitar um site e não ser capaz de fazer ou encontrar algo lá?
• O(A) facilitador(a) explica que quanto melhor o design do site, maior a probabilidade de você fazer o que o designer pretende.

Elementos de Design Visual

[5 min]

• Para muitos usuários da Web (com exceção de usuários com deficiência visual, aqueles que usam leitores de tela), os sites têm um forte componente visual. Pergunte aos usuários: quais são alguns elementos do design visual?

  Dica! Aqui, você pode usar um exemplo para começar os aprendizes ou criar uma lista juntos primeiro. Alguns elementos podem incluir:

  • Cor
  • Tamanho
  • Forma
  • Espaço
  • Posição (alinhamento, proximidade)
  • Repetição
  • Variedade
  • Harmonia

• Veja exemplos – qual é a intenção do site? como o design é usado?
• Para cada exemplo, o que você vê? O que você vê primeiro? Quais elementos de design visual estão lá? O que se destaca?
• Dois exemplos para comparar e contrastar:

• Deixe os participantes olhar e discutir. Aqui estão algumas das coisas que eles ou o(a) facilitador(a) podem mencionar:
  • No exemplo do Google:
    • O foco é a barra de pesquisa – é quase a única coisa na página.
    • O logotipo colorido do Google aparece contra o fundo branco.
    • Muito espaço em branco na página nos ajuda a focar.
  • No exemplo da Amazon:
    • Tantas coisas para ver e clicar –
    • Algumas coisas são maiores: o anúncio do Echo Dot recebe muito espaço, por isso é importante.
    • O botão pop-up “LOG IN” está flutuando em cima do resto do design, chamando a atenção para si.
    • O botão “Explore” também aparece visualmente.
    • A barra de pesquisa é proeminente e fácil de encontrar – veja a lupa amarela.
    • Os círculos repetidos dão aos usuários a sensação de que podem escolher entre muitos agrupamentos de produtos para comprar.
    • As pequenas imagens dos produtos no topo são lúdicas e divertidas, elas são uniformemente dimensionadas, você tem a sensação de que há muitas delas.

Elementos Interativos de Design

[5 min]

• Pergunte aos usuários: quais elementos tornam um site interativo?
• Os exemplos podem incluir: Links, formulários, barras de pesquisa, botões “curtir”, botões “Comprar agora”, caixas de comentários, caixas de atualização de status, listas de itens a serem percorridos, _mouse-overs_ para pop-ups
• Veja alguns exemplos com os participantes e discuta o que eles vêem. Pergunte aos participantes: como os elementos de design visual (como tamanho, cor, forma, posicionamento) funcionam com elementos de interação?
• Os participantes podem perceber que os designers usam cor, tamanho e posicionamento para chamar a atenção para os botões que desejam que os usuários pressionem, ou uma barra de pesquisa, etc.

Dica! Se estiver navegando on-line, você pode tentar alternar para o modo de design responsivo (Ferramentas> Desenvolvedor da Web> Modo de design responsivo), que permite ver como o site aparecerá em diferentes dispositivos.

• Quais elementos do site desaparecem quando o espaço da tela é menor e quais ainda estão presentes?
• Ver um site nesse modo pode ajudar os participantes a entender quais aspectos do site o designer considera mais importantes.

Objetivos do Usuário, Metas do Site

[5 minutos]

• Vamos considerar as metas que um site (ou a empresa/organização que o site representa) tem para interações em seus sites, em comparação com as metas do usuário. Selecione um site real como um exemplo.

  Dica! Escolha alguns sites comuns, como o Amazon.com, o YouTube.com ou quaisquer sites usados com frequência na comunidade do seu público. Você pode atribuir os sites ou permitir que os participantes selecionem.

• Pergunte aos participantes:
  • Quais são os objetivos que os usuários podem ter relacionados ao site?
  • Quais são as metas que o site/empresa/organização pode ter?
• Tente listar três ou mais metas potenciais para cada um. Por exemplo:
  • O YouTube.com pode ter o objetivo de incentivar os usuários a assistir muito conteúdo. Um objetivo secundário pode ser para os usuários verem cliques em anúncios. Um terceiro objetivo pode ser incentivar os usuários a comentarem sobre vídeos.
  • Um usuário do YouTube.com pode assistir a apenas um único vídeo específico. Ou um usuário também pode querer encontrar muitos vídeos sobre um assunto. E um usuário pode querer enviar seu próprio conteúdo para o YouTube.
• Os objetivos dos usuários e do site estão em conflito? Como?
• O que acontece quando as metas do usuário e do site estão em conflito?
• Explique aos participantes que, ao documentar sua experiência com sites, eles podem ver como o design do site funciona para atingir as metas dos sites e as metas dos usuários… ou não!

Investigações e Jornadas

[15 minutos]

• Nesta atividade, os participantes se emparelharão e trabalharão juntos para documentar suas próprias jornadas de usuário com um site específico. O objetivo é perceber como eles estão interagindo com o design do site. Idealmente, cada dupla de participantes deve ter um computador para trabalhar.
• O(A) facilitador(a) divide o grupo em duplas. O(A) facilitador(a) pode selecionar sites para os participantes trabalharem, ou os participantes podem selecionar seus próprios sites.
• Peça aos participantes para irem ao site com uma intenção ou objetivo em mente.
  • Por exemplo: estou indo para a Amazon para pesquisar livros sobre gatinhos; Vou procurar uma aula de introdução ao HTML no YouTube.
• Uma pessoa da dupla é o usuário que está navegando pelo site e falando em voz alta/contando a história do que está fazendo “ou seja. Vou digitar “gatinhos” na barra de pesquisa ou “vou descer e ler esses comentários”
• O outro membro do dupla está ouvindo/documentando a jornada do usuário. O ouvinte deve notar e/ou tomar notas sobre a experiência do usuário.
• Por exemplo, o ouvinte deve documentar:
  • Qual é o plano ou objetivo do usuário ao usar o site?
  • Qual é a primeira coisa que eles veem no site? O que aparece?
  • Aonde eles clicam?
  • Eles olham/assistem/ouvem conteúdo que não estavam procurando (anúncios, vídeos ou itens sugeridos, etc.)?
  • Por que isso aconteceu?
  • Como o site se sente? frio, simpático, chique, elegante, etc
  • O que os incomodou? O que foi divertido?
  • Eles mantiveram seu objetivo original para a sessão, ou foram desviados?
  • No que eles gastaram mais tempo fazendo no site?
• Cada participante deve levar de 5 a 7 minutos navegando em um site como usuário e de 5 a 7 minutos documentando a experiência do parceiro(a) como ouvinte/anotador(a).

  Dica! A versão off-line da atividade acima: Os(As) facilitadores podem imprimir uma página web para os participantes marcarem. É possível fornecer uma página interna e a página inicial do site (para investigar se a página interna ajuda efetivamente o usuário a navegar pelo restante do site). Como consequência, os participantes podem usar uma folha de papel em branco para criar um protótipo de uma página web que efetivamente resolve quaisquer problemas que eles vêem nos folhetos fornecidos.

Reflexão e Revisão

[5 min]

• O(A) facilitador(a) conduz uma breve sessão de discussão/reflexão sobre jornadas do usuário.
• O(A) facilitador(a) explica que as jornadas do usuário são uma ferramenta que os designers usam quando testam sites e aplicativos – eles podem fazer com que os usuários tentem usar o site e documentem o que fazem em cada etapa do processo para ajudar a refinar o design.
• O que os participantes descobriram no exercício da jornada do usuário?
• O que você notou durante a atividade? O que era novo, inesperado?
• Você percebeu que o design visual ou elementos de design de interação desempenham um papel no seu comportamento?
• Você notou alguma tensão entre as coisas que queria fazer ou obter da sua experiência no site e o que o design do site estava sugerindo que você fizesse?
• Como isso faz você se sentir?
• Você acha que perceberá ou fará algo diferente quando estiver navegando no futuro?

Reflexão da Experiência de Aprendizagem

[5 min]

• O que você gostou sobre esta atividade?
• Se você puder ensinar essa atividade a um público específico, o que você mudaria no processo, estrutura ou conteúdo para melhor atender às necessidades desse público?

Deixe a sua opinião sobre o Currículo Principal

• Conte-nos como e onde você está usando o currículo e o que você aprendeu e o que você gostaria de mudar.

próximo: Marcação Básica