MPIII - Aula 6 - Interfaces e sua utilização em MVC (1.ª parte)
Projeto de Interfaces - Aula 03
-
Upload
carlos-rosemberg-maia-de-carvalho -
Category
Documents
-
view
2.872 -
download
2
description
Transcript of Projeto de Interfaces - Aula 03
![Page 1: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/1.jpg)
Projeto de Interfaces
Especialização em Engenharia de Software com Ênfase em Padrões de Software Universidade Estadual do Ceará
AULA 03
Carlos Rosemberg
![Page 2: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/2.jpg)
Onde estamos
Aula 1 Porque estamos aqui?Aula 2 Entendendo o problemaAula 3 Criando soluçõesAula 4 Avaliando o que foi criado
![Page 3: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/3.jpg)
Aula 3
Criando Soluções
Dando forma e conteúdo à experiência do usuário
!
![Page 4: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/4.jpg)
Processo de desenvolvimento da experiência do usuário
Recapitulando...
![Page 5: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/5.jpg)
Um processo cíclico e evolutivo
Conceito Produto (experiência) Final
1Analisar
2Fazer3Avaliar
![Page 6: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/6.jpg)
Aula de hoje
1Analisar
2Fazer3Avaliar
![Page 7: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/7.jpg)
Praticando o
design de experiência
![Page 8: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/8.jpg)
MEX : Modelo Genérico de Experiência do Usuário
Relembrando os elementos de uma experiência
![Page 9: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/9.jpg)
O design de experiência procura entender como esses elementos agem ou podem agir durante a experiência.
Depois, tenta controlá-los ou influenciá-los através da manipulação de seus atributos.
![Page 10: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/10.jpg)
Artefatos e interações
são os elementos mais prováveis de se controlar, pois tratam-se das coisas que nós desenvolvemos.
![Page 11: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/11.jpg)
Interações
Como o usuário interage com os artefatos em sua volta?Quais estímulos ocorrem? Que sentidos são envolvidos?
![Page 12: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/12.jpg)
Trabalhando com os 5 sentidos
Seu produto deve reforçar os estímulos corretos e
minimizar os que atrapalham a experiência!
Entenda quais e como os sentidos do indivíduo são afetados visão, audição, olfato, paladar e tato
Entenda como os artefatos interagem entre si, inclusive quando afetam a performance do seu produto.Sujeira, barulho, distrações, etc
![Page 13: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/13.jpg)
Quais os objetos que compõem a experiência?Quais suas as características?
Artefatos
![Page 14: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/14.jpg)
Produtos Softwares, roupas, equipamentos eletrônicos, etc
Conceitos e idéiasMarcas (Nokia, Apple, Fiat, etc), ideologias, etc
Demais objetos presentes na experiênciaNão são o principal artefato, mas interferem no que está acontecendo. Ex: teclado de um computador com teclas defeituosas durante a redação de uma monografia.
Artefatos são...
![Page 15: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/15.jpg)
1Funcionalidades
2Estétic
a
3Usabilidade
4Significado
As 4 dimensões de um artefato
Status social,valor sentimental,
metáforas, etc
Utilidade
Apelo aos sentidos
Facilidade de uso
![Page 16: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/16.jpg)
1Funcionalidades
2Estétic
a
3Usabilidade
4Significado
Status social,valor sentimental,
metáforas, etc
Utilidade
Apelo aos sentidos
Facilidade de uso
As 4 dimensões de um artefato
![Page 17: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/17.jpg)
1Funcionalidades
2Estétic
a
3Usabilidade
4Significado
Status social,valor sentimental,
metáforas, etc
Utilidade
Apelo aos sentidos
Facilidade de uso
Posicione seu
produto aqui!
As 4 dimensões de um artefato
![Page 18: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/18.jpg)
1: Funcionalidades
As 4 dimensões de um artefato
![Page 19: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/19.jpg)
Ofereça o que o usuário realmente precisa ou deseja.Nada mais, nada menos.
![Page 20: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/20.jpg)
2: Estética
As 4 dimensões de um artefato
![Page 21: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/21.jpg)
Um passeio pelos
Princípios básicos do design
ContrasteRepetiçãoAlinhamento Proximidade
![Page 22: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/22.jpg)
Contraste
![Page 23: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/23.jpg)
Repetição
![Page 24: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/24.jpg)
Alinhamento
![Page 25: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/25.jpg)
Proximidade
![Page 26: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/26.jpg)
3: Usabilidade
As 4 dimensões de um artefato
![Page 27: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/27.jpg)
Usabilidade“A facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa”
Wikipedia
![Page 28: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/28.jpg)
Metas da Experiência do Usuário X
Metas da Usabilidade
Experiência do usuárioSatisfatório Agradável Divertido Interessante Útil Motivador Esteticamente apreciável Incentivador de criatividade CompensadorEmocionalmente adequado
UsabilidadeEficaz Eficiente Seguro Útil Fácil de aprender Fácil de se lembrar como se usa
![Page 29: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/29.jpg)
Heurísticas de usabilidade
1. Visibilidade do status do sistema2. Metáforas com o mundo real3. Controle do usuário e liberdade4. Consistência e padrões5. Prevenção de erros6. Reconhecer ao invés de lembrar7. Flexibilidade e eficiência de uso8. Design e estética minimalista9. Ajudar aos usuários a reconhecer, diagnosticar e sair de erros10. Ajuda e documentação
![Page 30: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/30.jpg)
4: Significado
As 4 dimensões de um artefato
![Page 31: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/31.jpg)
![Page 32: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/32.jpg)
A esta altura, já temos o mínimo de informação sobre a experiênca do usuário para começar a
meter a mão na massa.
![Page 33: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/33.jpg)
Prototipação!
Não tem segredo. O negócio é...
![Page 34: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/34.jpg)
ProtótipoGrego πρωτότυπος (prototypos): “original, primitivo”.
Prévia de um produto usada para simular parte de suas cacterísticas finais, para fins de avaliação ou comunicação.
![Page 35: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/35.jpg)
Tipos de prototipação
Quanto ao reusoDescartávelEvolucionário
Quanto à fidelidadeBaixaMédiaAlta
![Page 36: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/36.jpg)
Descartável
![Page 37: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/37.jpg)
Evolucionário
![Page 38: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/38.jpg)
Baixa fidelidade
![Page 39: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/39.jpg)
Média fidelidade
![Page 40: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/40.jpg)
Alta fidelidade
![Page 41: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/41.jpg)
O que faz variar a fidelidade
Detalhamento gráfico
Funcionalidades cobertas
Verticalmente (mostra muito de uma funcionalidade)
Horizontalidade (mostra pouco de várias funcionalidades)
Interatividade
![Page 42: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/42.jpg)
Benefícios da prototipação
O cliente vê algo concreto já no início do processo
Incentiva a colaboração e o aproveitamento de idéias
Melhora a comunicação interna e externa
Reduz o risco
Possibilita testes mais cedo
Guia o desenvolvimento
... De uma maneira geral, melhora a eficiência.
![Page 43: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/43.jpg)
Dedicar tempo demais à prototipação
Escolhar erroneamente a fidelidade do protótipo
Utilizar protótipos descartáveis na implementação
Problemas comuns
![Page 44: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/44.jpg)
Como obter o melhor da prototipação
Definir claramente os objetivosAprovação interna? Aprovação do cliente? Qual o perfil do cliente (técnico ou executivo) ? Testes com usuários? Provas de conceito? Vai ser reaproveitado para implementação?
Identificar o tipo de prototipação mais adequado para o projeto, podendo, inclusive, variar para cada fase
Escolher a mídia, ambiente e tecnologia
Escolher a ferramenta
![Page 45: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/45.jpg)
Voltemos a trabalhar em equipe!
![Page 46: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/46.jpg)
Para o sistema proposto...
Revise os cenários e requisitos da aula passada, identificando os principais fluxos (funcionalidades) do seu sistema.
Depois, faça alguns protótipos em papel dessas funcionalidades, detalhando suas principais interações.
Na próxima aula, traga esses protótipos impressos, convertidos para média fidelidade (powerpoint, visio, etc).
![Page 47: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/47.jpg)
Vale 3 pontos para compor a nota final.
O melhor trabalho ganha 4 pontos.
![Page 48: Projeto de Interfaces - Aula 03](https://reader035.fdocumentos.com/reader035/viewer/2022062704/555b2f7dd8b42afc348b4ad0/html5/thumbnails/48.jpg)
Obrigado e até a próxima aula.