Informações sobre a segunda parte da disciplina de Design de Interação e Interface para Dispositivos Móveis (20h) ministrada na especialização em App Development na PUCPR (Curitiba-PR) em novembro e dezembro de 2018 pelo professor Rodrigo Freese Gonzatto.
.
Ementa:
AULA 1: Dia 1 (manhã) O que é isto, a Interação + Metáforas. Apresentação da disciplina e do professor. O que se projeta quando interações são projetadas: diferença entre interface e interação. Interação reativa e mútua. Quatro abordagens sobre a interação, dos mainframes aos smartphones. Metáforas de interface, skeumorfismo e flat design.
- MATERIAL: slides1 (aula1-manha) o-que-e-interacao_historia
- MATERIAL: slides2 (aula1-manha) metaforas-flat-skeumorfism
- EM AULA: Foram apresentados conteúdos dos slides (anexo) e debate sobre as temáticas.
AULA 2: Dia 1 (tarde) Padrões de interface e interação + Gestalt aplicada a interfaces + Guidelines de interação. Dos padrões de interface aos padrões de interação. Relações entre patterns e Interface Guidelines (iOS e Android). Princípios da teoria da Gestalt para design de interfaces (UI).
Na aula: Foram apresentados conteúdos dos slides (anexo), debatidos diversos links de guidelines para interface e interação (ver lista de links, ferramentas e materiais) e realizados os Exercícios #1 e #2.
- MATERIAL: slides3 (aula1-tarde) patterns-padroes-usequalities
- MATERIAL: slides4 (aula1-tarde) gestalt-ler-imagens
- EM AULA: Foram apresentados conteúdos dos slides (anexo), debatidos diversos links de guidelines para interface e interação (ver lista de links, ferramentas e materiais) e realizados os Exercícios #1 e #2.
- EXERCÍCIO #1: Identificação dos princípios da Gestalt em interfaces.
- EXERCÍCIO #2: Aplicação dos princípios da Gestalt em Interfaces.
AULA 3: Dia 2 (manhã) Arquitetura de Informação. Prototipação. O que é um aplicativo? Aplicativo como ação. Affordances. Fundamentos da prototipação. Sketches (protótipo em baixa fidelidade) e Wireframe (protótipo média fidelidade). Prototipação de interfaces e protótipos interativos.
- EM AULA: Foram debatidos temas com slides. Início de PROJETO de app seguindo metodologia de UX de Jesse James Garrett. Começamos o projeto realizando uma pesquisa conjunta de informações (entrevista, netografia, SWOT) sobre NETFLIX, e os resultado estão nesses slides. Depois definimos uma proposta de interação. Então criados sketches, de modo a iniciar a Execução da atividade: Projeto (etapa 1): Criação de protótipo interativo.
- EM AULA: Foram debatidos temas com slides. Continuidade do PROJETO de app iniciado na aula anterior: etapa de avaliação: prática de avaliação heurística e de teste de usabilidade (ágil / de baixo orçamento).
Avaliação
A avaliação consiste na execução e apresentação de uma série de 5 atividades. As quatro primeiras atividades foram realizadas em sala de aula durante a disciplina. A quinta e última é a única atividade a ser concluída após a disciplina.
Informações detalhadas na plataforma Blackboard. TOTAL: 10,0
- 2,0 Exercício #1: Identificação dos princípios da Gestalt em Interfaces (INDIVIDUAL)
- 2,0 Exercício #2: Aplicação dos princípios da Gestalt em Interfaces (INDIVIDUAL)
- 3,0 Projeto (etapa 2): Relatório dos resultados da avaliação heurística e o teste de usabilidade (GRUPOS)
- 3,0 Projeto (etapa 1): Criação de protótipo interativo interativo de baixa fidelidade (DUPLAS)
Textos-base introdução à área de Design de Interação
- Interaction Design – brief intro, por Jonas Löwgren (capítulo da The Encyclopedia of Human-Computer Interaction, 2nd Ed.)
- Human Computer Interaction – brief intro, por John M. Carroll (capítulo da The Encyclopedia of Human-Computer Interaction, 2nd Ed.)
- Philosophy of Interaction, por Dag Svanaes (capítulo da The Encyclopedia of Human-Computer Interaction, 2nd Ed.)
Definições de Design de Interação
- Interaction Design – brief intro, por Jonas Löwgren (capítulo da The Encyclopedia of Human-Computer Interaction, 2nd Ed.)
- A Definition of Interaction Design, por Dan Saffer, 2004 (Blog)
- Afinal, o que é Design de Interação?, por Frederick van Amstel, 2006 (Blog)
- Foundations of Interaction Design, por Dave Malouf, 2007 (Blog)
- So you want to be an interaction designer, Robert Reinmann, 2008 (Blog)
Materiais
- Links para ferramentas online de Design de Interação: para diagramas, mapas, documentação, gerencia, analise, testes, wireframes, etc.
- Avaliação de usabilidade sem usuários: Jakob Nielsen’s 10 Usability Heuristics for User Interface Design e casos com exemplos
- Avaliação de usabilidade sem usuários: Revisão de heurísticas para mobile
- Avaliação de usabilidade sem usuários: 6 Design Principles for Usability by Don Norman
- Avaliação de usabilidade sem usuários: Princípios de Design de Interação
- artigo Design better forms (formulários para aplicativos – dispositivos móveis)
- Wiki: Corais.org – Árvore do Conhecimento (Métodos, Documentos e Técnicas de Design de Interação)
Materiais para Design: Android
- Android Developer
- Guia de Design
- Guia do Desenvolvedor
- Material Design: https://material.io/
- Material Design > Design
- Princípios de Projeto
- Material Guidelines
- Cards
- Google Design
- A física do Material Design
- Google Design > Resources
- Google Design Sprint
- Mais: [Vários links bons aqui de ferramentas para Material Design]
- Outras referências: Android UX
Materiais para Design: Apple iOS
- Developer
- Design
- Human Interface Guidelines
- Apple Design Resources
- Human Interface Guidelines > Princípios
- UI Design Do’s and Don’ts
- Guidelines and Resources
- Marketing Resources and Identity Guidelines
- App Store Review Guidelines
- App Review
- Common App Rejections
- Outros: The biggest library of iOS templates
- Outros: The iOS Design Guidelines
Outros textos
- Textos introdutórios ao Design de Interação, por Rodrigo Gonzatto
- O controle do tempo e do espaço, por Rodrigo Gonzatto
- Just How Far Beyond HCI is Interaction Design?, por Jonas Löwgren
- Blog de Rodrigo Freese Gonzatto
- Enciclopédia de HCI da Interaction-Design
- Vocabulário Visual, de Jesse James Garrett
Texto atualizado em 22 de janeiro de 2018.