top of page

Considerações para o Design de Tela

Foto do escritor: Instituto DIInstituto DI

Projetar uma tela para aprendizagem on-line não é o mesmo que projetar uma página da Web ou uma apresentação de slides. Embora muitos componentes sejam os mesmos, a criação de uma experiência de aprendizagem interativa tem algumas considerações exclusivas em termos de design de tela.

Durante o processo de design, uma das primeiras coisas a considerar são as áreas funcionais da tela - sua finalidade em seu curso, sua colocação no layout e seu design.

Claro, há uma grande variedade de abordagens para o design de tela. Mesmo assim, podemos constatar que há cinco áreas principais da tela que são funcionalmente importantes e frequentemente presentes nos cursos de eLearning, embora não correspondam necessariamente a esse layout. Estes são numerados na ilustração abaixo. Com cada área funcional, há certas coisas a serem consideradas.


Áreas Funcionais da Tela

# 1 identificador de localização

Os usuários de um curso devem ser facilmente orientados para sua localização nele. As pessoas têm mentes errantes, recebem telefonemas e compram um café com leite - bem no meio do seu curso! Quando eles recuperam a consciência, por assim dizer, é bom lembrá-los de onde eles estão. Portanto, uma pequena referência ao local, como o nome de um módulo, lição ou tópico, serve como um dispositivo de orientação.

Há também uma vantagem cognitiva em usar um identificador de localização porque funciona como um organizador conceitual. Quando o conteúdo do curso é organizado em módulos e lições que fazem sentido lógico e instrucional, a exibição do local pode ajudar um aluno a organizar internamente as informações. Uma boa organização interna pode ajudar as pessoas a recuperar conhecimento quando precisam.

É extremamente comum colocar um logotipo de empresa ou editor na parte superior da tela também

# 2 área de título

Se você pensar em uma tela como tela, verá que nem toda tela requer um título. Na narração de histórias, cenários e muitos outros contextos, a área do título não é um requisito. Mas se o seu conteúdo requer um título, como em abordagens mais técnicas e didáticas ao eLearning, então o topo ou o canto superior esquerdo é um local convencional para ele. Há uma razão para isso.

Quando as pessoas olham para uma tela, seus olhos tendem a cair na parte superior esquerda dela. Algumas pesquisas mostram, no entanto, que os olhos podem inicialmente pousar em outras partes da tela, particularmente aquelas áreas com alto impacto visual ou complexidade fascinante.É por isso que é um bom lugar para o título e o identificador de local, se você optar por usá-los.

Como você sabe, o título é tipicamente uma frase que resume ou leva ao ponto-chave. Mas por que não usar uma frase completa? Em seu artigo, Como o Design de Manchetes em Slides de Apresentação Afeta a Retenção de Audiência, o pesquisador Michael Alley mostra que declarar todo o ponto principal na área do título como uma sentença completa pode aumentar a retenção. Uma razão pela qual isso é eficaz é porque o título está em uma fonte grande, tornando-o extremamente notável e memorável.

# 3 Área de Conteúdo

A área de conteúdo é onde residem suas interações, mídia visual e texto. O layout e o design da área de conteúdo podem causar muita ansiedade. E por um bom motivo. Quando essa área é confusa ou quando ela salta muito de uma tela para outra, os alunos ficam confusos. Quando a área de conteúdo permanece a mesma de tela para tela, ela se torna entediante. Alguma novidade e criatividade são necessárias aqui, mas se você passar por cima, poderá perder pessoas. É estressante.

Para facilitar a consistência e permitir a criatividade, muitos projetistas criam vários modelos para diferentes tipos de telas e os usam repetidamente. Isso fornece tanto repetição quanto variedade. Por exemplo, haverá um design de tela para vídeo, um para interações semelhantes, um para uma tela dividida com texto e gráficos e um para uma tela que tenha várias seleções.

Ao projetar essa área, considere como cada tela pode abranger apenas um ponto principal. Isso dá aos alunos a chance de processar as informações. Pense também na hierarquia visual, para que você possa fazer com que os elementos de aprendizado mais importantes sejam o foco por meio de cor e tamanho ou outros recursos que fornecem impacto. Por fim, tente simplificar a área de conteúdo para que seja fácil perceber e entender.

# 4 instruções da interface do usuário

As instruções da interface do usuário ajudam o usuário a executar uma ação. Estas instruções, que fazem parte da sua microcópia , devem estar sempre presentes, porque ajudam os alunos a saber o que fazer a seguir. Ao escrevê-las, considere como as palavras serão compreendidas pelo seu público. Escreva com clareza, brevidade e precisão. Existem várias convenções para onde colocar as instruções na tela. Embora muitas vezes você esteja na parte inferior da tela, eles também são comuns na área de conteúdo, especialmente quando a instrução faz parte do treinamento em si.

# 5 Navegação e Controles

Se você puder controlar a área de navegação do seu curso, precisará considerar a funcionalidade necessária, onde colocar a navegação e as convenções de design a serem usadas. Em cursos com conteúdo linear, as barras de navegação são normalmente, mas nem sempre, colocadas na parte inferior da tela. Em culturas que são lidas da esquerda para a direita, parece natural colocar os botões Avançar e Voltar no canto inferior direito, refletindo como lemos e transformamos uma página. Cursos com conteúdo não linear podem precisar de nada além de um menu pop-up, pois eles acabam com o conceito de virada de página. Em muitos casos, a ferramenta de autoria define o local para você.

Um exemplo

Usando as áreas funcionais discutidas neste artigo, este exemplo mostra um design de tela finalizado para um curso fictício ensinando aos donos de gatos novos e despretensiosos o que está reservado para eles. Todas as áreas da tela funcional estão no lugar. Essa parte superior esquerda muito importante da tela foi deixada para o título, para enfatizar o ponto.

O identificador de local para esse curso curto (e fictício) foi delegado no canto superior direito, pois não é tão importante quanto o título aqui, mas ajuda a organizar as informações. Em outros cursos, como um curso de 10 módulos sobre questões legais, o identificador de local como um elemento organizacional seria mais importante.


Como o ponto principal é simples, uma frase curta mas completa para o título funciona bem. A área de conteúdo é assumida pelos alimentos para gatos selecionáveis. Não há área de texto porque imaginei que os usuários ouviriam a voz do gato enquanto ela expressava suas reclamações ao selecionar cada alimento. Por fim, as instruções da tela principal são integradas ao conteúdo do curso para que ele seja exibido na área de conteúdo. As instruções de "como continuar" e os controles de navegação estão na parte inferior, uma das várias convenções de design de tela de e-Learning aceitas.

O que você considera ao projetar uma tela? O que funciona e o que não funciona?

IDI Instituto de Desenho Instrucional

0 visualização0 comentário

Posts recentes

Ver tudo
bottom of page