interfaces

Boas Práticas e Técnicas no Design de Interfaces para Material Didático

Profa Luciana Nunes Ferreira

Curso de Elaboração de Material Didático para a Diversidade

PróximoInício Mapa

Design de Interfaces para Material Didático

O Design de Interfaces de um material didático, se bem planejado, é uma estratégia que oferece ao aluno interpretar, compreender e construir/reconstruir conhecimentos de forma potencial. Barker & Tan (1996) reforçam esse pensamento quando definem que: “Há necessidade de usarmos técnicas e metodologias para o desenvolvimento de produtos que estimulem, motivem e permitam aos usuários desenvolver estruturas cognitivas relevantes relacionadas com o domínio em estudo”.

Princípios Gerais do Design de InterfacesLink direto: http://www.slideshare.net/mar_twinkle/princpios-gerais-para-o-design-de-interfaces

PróximoAnteriorInício Mapa

Você está em: Design de Interface->Página Inicial

Mapa de estudo

Interação Usabilidade Navegação Gráficos Capítulo Especial

Menu

Desdobramento Estado

Compatibilidade

Reconhecimento

Menos é Mais

Padrões

Proximidade

Acessibilidade

Percurso

Ilustração

Fotografia

Modelagem

Animação

Vídeo

Tipografia

Cores

Objetos deAprendizagem

Storyboards

Realidade Virtual


Você está em: Design de Interfaces->Mapa de estudo

O conteúdo desse Mapa foi adaptado do Livro Design Instrucional na Prática de Andrea Filatro.

Design de Interfaces - Interação

1Desdobramen

to

2Menu


Interação

Planejamento da interação homem-máquina.

Você está em: Design de Interfaces->Interação->Apresentação

Interação – Desdobramento e Menu

1 – Desdobramento

Pouco conteúdo por tela – distribua a informação por meio de links. A hipertextualidade deixa o conteúdo mais atrativo. Evite a linearidade (informação sequencial) sempre que possível.

Links no conteúdo principal – estratégia para desdobrar a informação em pequenas unidades de estudo.

Links para a próxima tela – de forma que os textos mais extensos sejam distribuídos em várias telas, chamados pela interação do aluno com a máquina.

2 - Menu Classificação e níveis do menu – os

elementos mais acessados devem “saltar aos olhos do aluno”, ou seja, sempre perceptíveis ao ângulo de visão da tela.

Posição do Menu – visível em todas as telas e não pode ocultar os seus itens e nem os demais elementos da tela.

Redução do passos do aluno – utilize a regra dos “3 cliques”, ou seja, o aluno deve ir de um ponto para outro em no máximo 3 cliques.

Você está em: Design de Interfaces->Interação->Desdobramento | Menu


Voltar para

Interação

Clique no ícone abaixo para ouvir sobre este conteúdo.

Design de Interfaces - Usabilidade

1Estado

2Compatibilida

de

Usabilidade

5Padrões

3Reconheciment

o

4Menos é Mais

6Proximidade

Você está em: Design de Interfaces->Usabilidade->Apresentação


Segundo a norma ISO/IEC 9126, o termo usabilidade tem a seguinte definição: “Capacidade do produto de software de ser compreendido, aprendido, operado e atraente ao usuário, quando usado sob condições especificadas.”

Usabilidade- Parte 1 (Estado, Compatibilidade, Reconhecimento, Menos é Mais)

1 – Estado O material deve apresentar a

localização do aluno em relação ao material didático em estudo e as possíveis rotas a seguir.

2 – Compatibilidade

Aproximar a linguagem do material didático ao mundo real do aluno. Evitar uso de termos técnicos ou pouco utilizados no dia a dia do público alvo do material didático.

3 – Reconhecimento Faça uso de textos, objetos e

ícones, comuns ao universo do aluno para que o mesmo interaja com o material didático de forma fluida. Deixe o cérebro do aluno reservado para processar apenas os conhecimentos que precisam ser construídos.

4 – Menos é Mais

Evite distrair o aluno com informações desnecessárias. O belo tem que caminhar com o importante. Foque em apresentar elementos que corroborem para uma aprendizagem significativa do aluno. Mantenha ativa esta poderosa máquina que o seu aluno possui, o cérebro.

Você está em: Design de Interfaces->Usabilidade->Parte 1


Voltar paraUsabilidade


Usabilidade- Parte 2 (Padrões e Proximidade)

5 – Padrões

Manter o padrão com outras interfaces conhecidas pelo aluno - Ex.: aproveitar os ícones de aplicativos conhecidos como Youtube, Google, entre outros, sempre que fizer referência aos mesmos.

Visual – toda tela deve ter o mesmo “rosto”.

Mecânica – manter a mesma estrutura de navegação.

Conceitual – manter o mesmo estilo de linguagem e de diálogo.

Você está em: Design de Interfaces->Usabilidade->Parte 2

Clique no ícone abaixo para ouvir sobre este conteúdo..


Voltar paraUsabilidade

6 – Proximidade

O texto e o gráfico que o ilustra devem estar próximos. De forma que fique explícita a relação entre ambos.

Design de Interfaces - Navegação

1Acessibilidade

2Percurso individual

Navegação

" Não há vento favorável para aquele que não sabe aonde vai. "(Sêneca)


Você está em: Design de Interfaces->Navegação->Apresentação

Navegação- Acessibilidade e Percurso

1 – Acessibilidade

Mapa do curso – nortear o aluno quanto às informações presentes no material didático. Pode ser de forma gráfica ou textual. É importante exibir neste ítem a hierarquia e o relacionamento entre as informações.

Elementos posicionais – Botões de Avanço, Retorno , Página Inicial, Saída e outros Atalhos que facilitem a navegação no conteúdo.

Passeio guiado – é uma demonstração de como o aluno pode aproveitar ao máximo os recursos do material didático. Um video-tutorial é uma excelente estratégia didática para elaboração de um passeio guiado. O Camstudio é o software recomendado para gravar um vídeo-tutorial.

2 – Percurso individual

Trilhas e migalha de pão – mostram o caminho percorrido até o momento da consulta.

Nomes de links descritivos – é um texto normal, porém grifado como hiperlink, que contém uma breve descrição do conteúdo que o aluno terá acesso ao clicar nesta informação. Você pode utilizar frases como “Clique aqui”e “Saiba Mais” para aguçar a atenção do aluno, porém, devem ser seguidas de uma breve descrição da informação que será exibida quando o link for acessado.


Você está em: Design de Interfaces->Navegação->Acessibilidade | Percurso


Voltar paraNavegação

Design de Interfaces - Gráficos

1Ilustração

2Fotografia

Gráficos

5Vídeo

3Modelagem

4Animação

6Realidade

Virtual

Você está em: Design de Interfaces->Gráficos->Apresentação


Gráficos- Classificação dos Gráficos

Quadro 1 - Classificação dos gráficos conforme a sua superfície

Fonte:Filatro (2008.p.78)

Você está em: Design de Interfaces->Gráficos->Classificação


Voltar paraGráficos


Clique na imagem para visualizá-la em seu tamanho real

Gráficos- Aprofundando (Parte 1)

Você está em: Design de Interfaces->Gráficos->Aprofundando (Parte 1)

Exemplo de Ilustraçãohttp://www.youtube.com/watch?v=vVe-oNzbDdM

Exemplo de Vídeohttp://www.youtube.com/watch?v=NJsacDCsiPg

Exemplo de Animação Flash – Clique em “Play” ao acessar este link.http://www.albinoblacksheep.com/flash/animator

Base de Dados de Fotografia - clique em “Explorar ” e obtenha as melhores fotos do mundo http://www.flickr.com

Exemplo de Desenho de Animação http://www.youtube.com/watch?v=4ft-A-PZ0ks

Exemplo de Modelagem /Simulaçãohttp://www.youtube.com/watch?v=nrmRllR7yUI




Você está em: Design de Interfaces->Gráficos->Aprofundando (Parte 2)

Exemplo de Realidade Virtual Aumentadahttp://www.youtube.com/watch?v=XqLzR4_0ttY

Gráficos- Aprofundando (Parte 2)

Saiba como funcionam os vídeos games de última geraçãohttp://plugcitarios.com/2013/01/novo-projeto-de-realidade-aumentada-do-xbox-360/

Aprenda praticando Realidade Aumentada – Clique em “Permitir”, imprima a imagem e comece o seu teste.http://www.realidadeaumentada.com.br/home/#abaixo




Design de Interfaces – Capítulo Especial

1Tipografia

2Cores

CapítuloEspecial

3Objetos de

Aprendizagem

4Storyboards


Você está em: Design de Interfaces->Capítulo Especial->Apresentação

Capítulo Especial – Objetos de Aprendizagem (OA)

Figura 1: Tela principal do Banco Internacional de Objetos de Aprendizagem.Fonte: MEC. Disponível on-line: http://objetoseducacionais2.mec.gov.br/

Clique no ícone abaixo para ouvir sobre o conteúdo desta tela.

Você está em: Design de Interfaces->Capítulo Especial->Objetos de Aprendizagem

De acordo com o Learning Objects Metadata Workgroup, objetos de aprendizagem (Learning Objects) podem ser definidos por "qualquer entidade, digital ou não digital, que possa ser utilizada, reutilizada ou referenciada durante o aprendizado suportado por tecnologias".


Voltar paraCapítulo Especial

Figura 2: Tipos de Gráficos disponíveis no Banco Internacional de Objetos de Aprendizagem.Fonte: MEC. Disponível on-line: http://objetoseducacionais2.mec.gov.br/

Objetos de Aprendizagem - um panoramahttp://www.youtube.com/watch?v=M7aHFTxX1pQ

Objetos de aprendizagem - aprofundamentohttp://www.latec.ufrj.br/revistas/index.php?journal=hipertexto&page=article&op=view&path[]=201

Objetos de Aprendizagem-Aprofundando

Você está em: Design de Interfaces->Capítulo Especial->Objetos de Aprendizagem ->Aprofundando


Voltar paraObjetos de

Aprendizagem

Repositórios de Objetos de aprendizagem - http://www.latec.ufrj.br/educaonline/index.php?option=com_content&view=article&id=308:lista-de-repositorios-e-referatorios-de-objetos-de-aprendizagem&catid=30:biblioteca-virtual&Itemid=63

Cores Primárias

Vermelho: É a cor mais quente. Indicada para dar vitalidade, energia e coragem. Pode ser usada em qualquer situação relacionada a emergência.Amarelo: Alegre e clara, é a cor do otimismo. O amarelo está relacionado ao sol.Azul: É a cor da concentração, da fé e da firmeza de propósitos. Melhora nossa concentração e aguça a mente.

Capítulo Especial – Cores

Cores Neutras

Paleta de Cores

Você está em: Design de Interfaces->Capítulo Especial->Cores->Apresentação

Con“fusão” das cores



Clique no ícone ao lado para ouvir sobre este conteúdo.

Cores – Aprofundando

Cores na prática 1- paleta de coreshttp://www.colourlovers.com/patterns/new/all-time/meta?page=7

Cores na prática 2- mais paletas de coreshttp://www.colourlovers.com/palettes/new/all-time/meta?page=2

A influência das cores http://www.mundoeducacao.com.br/saude-bem-estar/a-influencia-cor.htm

Exemplos de combinações de coreshttp://www.ladodesign.com.br/inspiracao/exemplos-de-combinacoes-de-cores-perfeitas-no-web-design/


Voltar paraCores

Você está em: Design de Interfaces->Capítulo Especial->Cores->Aprofundando

Atenção:Fontes indicadas para Apresentação são as “sem Serifa”: Arial, Verdana e Tahoma, por exemplo.

Times New Roman não é indicada para materiais multimídia, somente para materiais impressos.

Tipografia é a arte e o processo de criação na composição de um texto, física ou digitalmente. (Wikipedia)



Capítulo Especial – Tipografia

Você está em: Design de Interfaces->Capítulo Especial->Tipografia->Apresentação


Tipografia -Aprofundando


Voltar paraTipografia

Tipografia – Noções Básicashttp://www.slideshare.net/pedrocs/tipografia-noes-bsicas

As 42 melhores fontes para a WEBhttp://www.webdesignblog.com.br/downloads/42-melhores-fontes-clean-para-usar-em-seus-projetos/

Dicas para escolher a fonte correta para as suas apresentaçõeshttp://www.colaborativo.org/blog/2007/08/03/dicas-para-palestras-e-apresentacoes-como-escolher-a-fonte-correta/

Você está em: Design de Interfaces->Capítulo Especial->Tipografia->Aprofundando

Capítulo Especial – Storyboards

O Storyboard e o Designer Educacionalhttp://www.designeducacional.com.br/o-storyboard-e-o-designer-educacional-parte-1/

O Storyboard no Cinema e na Televisãohttp://www.abcine.org.br/servicos/?id=158&/storyboard

Site do Livro Designer Instrucional na Prática – vários exemplos de Storyboards e outros documentoshttp://wps.prenhall.com/br_filatro_1/87/22398/5734016.cw/index.html

Figura 3: Elementos do Storyboard.Fonte:Filatro (2008.p.63)

Clique na imagem para visualizá-la em seu tamanho real

É um roteiro em formato textual ou gráfico que especifica com riqueza de detalhes como será produzida uma cena ou um material multimídia.



Você está em: Design de Interfaces->Capítulo Especial->Storyboards>Apresentação

Exemplo de Storyboards profissionaishttp://www.x-orion.com.br/storyboards/



Voltar paraStoryboard

Referências Bibliográficas

• Barker, P. & Tan, C. M. The use of Mixed metaphor Systems for Delivery of Instructional Material. 13th International Conference on Technology and Education. Proceedings. Lousiana. USA. March. 1996.

• FILATRO, Andrea. Design Instrucional na prática. São Paulo. Editora Pearson. 2008.

• Jonassen, D. H. Evaluating Constructivistic Learning in Duffy, T. M. & Jonassen, D. H. Construtivism and the Technology of Instruction - A Conversation. LEA Publishers. 1992.

AnteriorInício Mapa

interfaces

Documents

hierarquia e o

o crebro

interfaces interaovoc

interfaces navegaovoc

o aluno deve ir

padres e proximidadevoc

telas e

estudovoc est em