Curso de Elaboração de Material    Didático para a DiversidadeBoas Práticas e Técnicas no Design de Interfaces para Materi...
Design de Interfaces para Material Didático                                                                        Você es...
Mapa de estudo                                                                  Você está em:    Design de Interfaces->Map...
Design de Interfaces - Interação                          Você está em:   Design de Interfaces->Interação->Apresentação   ...
Interação – Desdobramento e Menu                                     Você está em:   Design de Interfaces->Interação->Desd...
Design de Interfaces - Usabilidade                                         Você está em:    Design de Interfaces->Usabilid...
Usabilidade- Parte 1                       (Estado, Compatibilidade, Reconhecimento, Menos é Mais)                        ...
Usabilidade- Parte 2                      (Padrões e Proximidade)                                          Você está em:  ...
Design de Interfaces - Navegação                                  Você está em:   Design de Interfaces->Navegação->Apresen...
Navegação- Acessibilidade e Percurso                                       Você está em:   Design de Interfaces->Navegação...
Design de Interfaces - Gráficos                                        Você está em:   Design de Interfaces->Gráficos->Apr...
Gráficos- Classificação dos Gráficos                                                          Você está em:     Design de ...
Voltar para                                GráficosInício   Mapa   Anterior   Próximo
Gráficos- Aprofundando (Parte 1)                                             Você está em:   Design de Interfaces->Gráfico...
Gráficos- Aprofundando (Parte 2)                                  Você está em:   Design de Interfaces->Gráficos->Aprofund...
Design de Interfaces – Capítulo Especial                               Você está em:    Design de Interfaces->Capítulo Esp...
Capítulo Especial – Objetos de Aprendizagem (OA)                                                      Você está em:   Desi...
Objetos de Aprendizagem-Aprofundando                               Você está em:   Design de Interfaces->Capítulo Especial...
Capítulo Especial – Cores                            Você está em:   Design de Interfaces->Capítulo Especial->Cores->Apres...
Cores – Aprofundando                                          Você está em:   Design de Interfaces->Capítulo Especial->Cor...
Capítulo Especial – Tipografia                            Você está em:   Design de Interfaces->Capítulo Especial->Tipogra...
Tipografia -Aprofundando                Você está em:   Design de Interfaces->Capítulo Especial->Tipografia->Aprofundando ...
Capítulo Especial – Storyboards                                                    Você está em:    Design de Interfaces->...
Voltar para                               StoryboardInício   Mapa   Anterior   Próximo
Referências Bibliográficas•   Barker, P. & Tan, C. M. The use of Mixed metaphor Systems for Delivery of Instructional    M...
Próximos SlideShares
Carregando em…5
×

Interfaces

344 visualizações

Publicada em

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
344
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Interfaces

  1. 1. Curso de Elaboração de Material Didático para a DiversidadeBoas Práticas e Técnicas no Design de Interfaces para Material Didático Profa Luciana Nunes Ferreira Início Mapa Próximo
  2. 2. Design de Interfaces para Material Didático Você está em: Design de Interface->Página InicialO Design de Interfaces de um material didático, se bem planejado, é uma estratégia queoferece ao aluno interpretar, compreender e construir/reconstruir conhecimentos de formapotencial. 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 odomínio em estudo”. Princípios Gerais do Design de Interfaces Link direto: http://www.slideshare.net/mar_twinkle/princpios-gerais-para-o-design-de-interfaces Início Mapa Anterior Próximo
  3. 3. Mapa de estudo Você está em: Design de Interfaces->Mapa de estudo CapítuloInteração Usabilidade Navegação Gráficos Especial Objetos de Desdobramento Estado Acessibilidade Ilustração Aprendizagem Menu Compatibilidade Percurso Fotografia Cores Reconhecimento Modelagem Tipografia Menos é Mais Animação Storyboards Padrões Vídeo Proximidade Realidade Virtual O conteúdo desse Mapa foi adaptado do Livro Design Instrucional na Prática de Andrea Filatro. Início Mapa Anterior Próximo
  4. 4. Design de Interfaces - Interação Você está em: Design de Interfaces->Interação->Apresentação 1 2Desdobramento Menu Interação Planejamento da interação homem-máquina. Início Mapa Anterior Próximo
  5. 5. Interação – Desdobramento e Menu Você está em: Design de Interfaces->Interação->Desdobramento | Menu Clique no ícone abaixo1 – Desdobramento para ouvir sobre este conteúdo. 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. 2 - Menu  Classificação e níveis do menu – os Links no conteúdo principal – elementos mais acessados devem estratégia para desdobrar a “saltar aos olhos do aluno”, ou seja, informação em pequenas unidades sempre perceptíveis ao ângulo de de estudo. visão da tela.  Posição do Menu – visível em todas Voltar Links para a próxima tela – de forma as telas e não pode ocultar os seus para Interação que os textos mais extensos sejam itens e nem os demais elementos da distribuídos em várias telas, tela. chamados pela interação do aluno  Redução do passos do aluno – com a máquina. utilize a regra dos “3 cliques”, ou seja, o aluno deve ir de um ponto para outro em no máximo 3 cliques. Início Mapa Anterior Próximo
  6. 6. Design de Interfaces - Usabilidade Você está em: Design de Interfaces->Usabilidade->Apresentação 2 1 3 Compatibilidad Estado Reconhecimento e 6 4Proximidade Usabilidade Menos é Mais 5 Padrões 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.” Início Mapa Anterior Próximo
  7. 7. Usabilidade- Parte 1 (Estado, Compatibilidade, Reconhecimento, Menos é Mais) Você está em: Design de Interfaces->Usabilidade->Parte 1 1 – Estado Clique no ícone abaixo para ouvir sobre este  O material deve apresentar a conteúdo. 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 4 – Menos é Mais público alvo do material didático. 3 – Reconhecimento  Evite distrair o aluno com  Faça uso de textos, objetos e ícones, Voltar para informações desnecessárias. O belo Usabilidade comuns ao universo do aluno para tem que caminhar com o importante. que o mesmo interaja com o material Foque em apresentar elementos que didático de forma fluida. Deixe o corroborem para uma aprendizagem cérebro do aluno reservado para significativa do aluno. Mantenha processar apenas os conhecimentos ativa esta poderosa máquina que o que precisam ser construídos. seu aluno possui, o cérebro. Início Mapa Anterior Próximo
  8. 8. Usabilidade- Parte 2 (Padrões e Proximidade) Você está em: Design de Interfaces->Usabilidade->Parte 2 Clique no ícone abaixo para ouvir sobre este conteúdo.. 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”. 6 – Proximidade Voltar para  Mecânica – manter a mesma Usabilidade estrutura de navegação.  O texto e o gráfico que o ilustra devem estar próximos. De forma que  Conceitual – manter o mesmo estilo fique explícita a relação entre de linguagem e de diálogo. ambos. Início Mapa Anterior Próximo
  9. 9. Design de Interfaces - Navegação Você está em: Design de Interfaces->Navegação->Apresentação 2 1 PercursoAcessibilidade individual Navegação " Não há vento favorável para aquele que não sabe aonde vai. "(Sêneca) Início Mapa Anterior Próximo
  10. 10. Navegação- Acessibilidade e Percurso Você está em: Design de Interfaces->Navegação->Acessibilidade | Percurso1 – Acessibilidade Clique no ícone abaixo para ouvir sobre este conteúdo. 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 2 – Percurso individual informações. Trilhas e migalha de pão – mostram o Elementos posicionais – Botões de caminho percorrido até o momento Avanço, Retorno , Página Inicial, da consulta. Saída e outros Atalhos que facilitem a navegação no conteúdo. Nomes de links descritivos – é um texto Passeio guiado – é uma normal, porém grifado como demonstração de como o aluno pode hiperlink, que contém uma breve Voltar para aproveitar ao máximo os recursos descrição do conteúdo que o aluno Navegação do material didático. Um video- terá acesso ao clicar nesta tutorial é uma excelente estratégia informação. Você pode utilizar frases didática para elaboração de um como “Clique aqui”e “Saiba Mais” passeio guiado. O Camstudio é o para aguçar a atenção do aluno, software recomendado para gravar porém, devem ser seguidas de uma um vídeo-tutorial. breve descrição da informação que será exibida quando o link for acessado.Mapa Início Anterior Próximo
  11. 11. Design de Interfaces - Gráficos Você está em: Design de Interfaces->Gráficos->Apresentação 1 2 3 Ilustração Fotografia Modelagem 6 4Realidade Virtual Gráficos Animação 5 Vídeo Início Mapa Anterior Próximo
  12. 12. Gráficos- Classificação dos Gráficos Você está em: Design de Interfaces->Gráficos->ClassificaçãoQuadro 1 - Classificação dos gráficos conforme a sua superfície Clique no ícone abaixo para ouvir sobre este conteúdo. Clique na imagem para visualizá-la em Voltar para seu tamanho real Gráficos Fonte:Filatro (2008.p.78) Início Mapa Anterior Próximo
  13. 13. Voltar para GráficosInício Mapa Anterior Próximo
  14. 14. Gráficos- Aprofundando (Parte 1) Você está em: Design de Interfaces->Gráficos->Aprofundando (Parte 1)Exemplo de Vídeo Exemplo de Animação Flash – Clique em “Play”http://www.youtube.com/watch?v=NJsacDCsiPg ao acessar este link. http://www.albinoblacksheep.com/flash/animatorExemplo de Ilustraçãohttp://www.youtube.com/watch?v=vVe-oNzbDdM Base de Dados de Fotografia - clique emExemplo de Desenho de Animação “Explorar ” e obtenha as melhores fotos dohttp://www.youtube.com/watch?v=4ft-A-PZ0ks mundo http://www.flickr.com Clique no ícone abaixo Voltar paraExemplo de Modelagem /Simulação para ouvir sobre este Gráficoshttp://www.youtube.com/watch?v=nrmRllR7yUI conteúdo. Início Mapa Anterior Próximo
  15. 15. Gráficos- Aprofundando (Parte 2) Você está em: Design de Interfaces->Gráficos->Aprofundando (Parte 2) Clique no ícone abaixoExemplo de Realidade Virtual Aumentada para ouvir sobre este conteúdo.http://www.youtube.com/watch?v=XqLzR4_0ttYSaiba 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 Voltar paracomece o seu teste. Gráficoshttp://www.realidadeaumentada.com.br/home/#abaixo Início Mapa Anterior Próximo
  16. 16. Design de Interfaces – Capítulo Especial Você está em: Design de Interfaces->Capítulo Especial->Apresentação 1 2 3Tipografia Cores Objetos de Aprendizagem Capítulo 4 Storyboards Especial Início Mapa Anterior Próximo
  17. 17. Capítulo Especial – Objetos de Aprendizagem (OA) Você está em: Design de Interfaces->Capítulo Especial->Objetos de Aprendizagem Clique no ícone abaixo para ouvir sobre o conteúdo desta tela. 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 para CapítuloFigura 1: Tela principal do Banco Internacional de Objetos de Aprendizagem. EspecialFonte: MEC. Disponível on-line: http://objetoseducacionais2.mec.gov.br/ Início Mapa Anterior Próximo
  18. 18. Objetos de Aprendizagem-Aprofundando Você está em: Design de Interfaces->Capítulo Especial->Objetos de Aprendizagem ->AprofundandoFigura 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 Repositórios de Objetos de aprendizagem - http://www.latec.ufrj.br/educaonline/index.php?option=com_Objetos de aprendizagem - aprofundamento Voltar parahttp://www.latec.ufrj.br/revistas/index.php?journal=hipertexto&page=article&op=view&path[]=201 de Objetos Aprendizagem Início Mapa Anterior Próximo
  19. 19. Capítulo Especial – Cores Você está em: Design de Interfaces->Capítulo Especial->Cores->Apresentação Clique no ícone ao lado para ouvir sobreCores Primárias este conteúdo.Vermelho: É a cor mais quente. Indicada para dar vitalidade, energia ecoragem. Pode ser usada em qualquer situação relacionada aemergência.Amarelo: Alegre e clara, é a cor do otimismo. O amarelo está relacionadoao sol.Azul: É a cor da concentração, da fé e da firmeza de propósitos. Melhoranossa concentração e aguça a mente. Cores Neutras Voltar para Capítulo Especial Con“fusão” das Paleta de Cores cores Início Mapa Anterior Próximo
  20. 20. Cores – Aprofundando Você está em: Design de Interfaces->Capítulo Especial->Cores->AprofundandoCores na prática 1- paleta de cores A influência das coreshttp://www.colourlovers.com/patterns/new/all-time/meta?page=7 http://www.mundoeducacao.com.br/saude-bem-estar/a-Cores na prática 2- mais paletas de cores Exemplos de combinações de coreshttp://www.colourlovers.com/palettes/new/all-time/meta?page=2 http://www.ladodesign.com.br/inspiracao/exemplos-de- Voltar para Cores Início Mapa Anterior Próximo
  21. 21. Capítulo Especial – Tipografia Você está em: Design de Interfaces->Capítulo Especial->Tipografia->ApresentaçãoTipografia é a arte e o processo de criação na composição de um texto, físicaou digitalmente. (Wikipedia) Clique no ícone ao lado para ouvir sobre este conteúdo.Atenção:Fontes indicadas para Apresentação são as “sem Serifa”: Arial, Verdana eTahoma, por exemplo.Times New Roman não é indicada para materiais multimídia, somente paramateriais impressos. Voltar para Capítulo Especial Início Mapa Anterior Próximo
  22. 22. Tipografia -Aprofundando Você está em: Design de Interfaces->Capítulo Especial->Tipografia->Aprofundando Tipografia – Noções Básicas http://www.slideshare.net/pedrocs/tipografia-noes-bsicas As 42 melhores fontes para a WEB http://www.webdesignblog.com.br/downloads/42-melhores-fontes-clean-para-usar Dicas para escolher a fonte correta para as suas apresentações http://www.colaborativo.org/blog/2007/08/03/dicas-para-palestras-e-apresentacoe Voltar para Tipografia Início Mapa Anterior Próximo
  23. 23. Capítulo Especial – Storyboards Você está em: Design de Interfaces->Capítulo Especial->Storyboards>ApresentaçãoÉ um roteiro em formato textual ougráfico que especifica com riqueza O Storyboard e o Designer Educacionalde detalhes como será produzida http://www.designeducacional.com.br/o-storyboard-e-o-desuma cena ou um material multimídia. Clique no ícone ao lado para ouvir sobre este conteúdo. Clique na imagem O Storyboard no Cinema e na Televisão para visualizá-la em http://www.abcine.org.br/servicos/?id=158&/storyboard seu tamanho real Site do Livro Designer Instrucional na Prática – vários exemplos de Storyboards e outros documentos http://wps.prenhall.com/br_filatro_1/87/22398/5734016.cw Exemplo de Storyboards profissionais Voltar para http://www.x-orion.com.br/storyboards/ Capítulo Especial Figura 3: Elementos do Storyboard. Fonte:Filatro (2008.p.63) Início Mapa Anterior Próximo
  24. 24. Voltar para StoryboardInício Mapa Anterior Próximo
  25. 25. 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. Início Mapa Anterior

×