![Page 1: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/1.jpg)
USER INTERFACE USER INTERFACE DESIGNDESIGN
Engenharia de SoftwareEngenharia de Software
Elaborado por: Pedro Fernandes, nº3322
Patrício Januário, nº3314
João Ferro Pelica, nº3428
![Page 2: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/2.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
22
IntroduçãoIntrodução
A Interacção Pessoa-Computador estuda a troca de informação entre as pessoas e os computadores. O seu objectivo é que esta troca seja o mais eficiente possível, ou seja, minimiza os erros, aumenta a satisfação, diminui a frustração e ao fim e ao cabo, faz mais produtivas as tarefas que envolvem as pessoas e os computadores.
![Page 3: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/3.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
33
Em que consiste?Em que consiste?
Analisar as tarefas e recolher as exigências da Analisar as tarefas e recolher as exigências da pessoa com o objectivo de criar uma interacção pessoa com o objectivo de criar uma interacção ideal entre a pessoa e o interface.ideal entre a pessoa e o interface.
![Page 4: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/4.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
44
ObjectivosObjectivos
Principais pontos na comunicação entre o interface Principais pontos na comunicação entre o interface e o utilizador:e o utilizador:
UtilidadeUtilidade SegurançaSegurança ProdutividadeProdutividade UsabilidadeUsabilidade FuncionalidadeFuncionalidade InteractividadeInteractividade Facilidade de usoFacilidade de uso Facilidade de aprendizagemFacilidade de aprendizagem
![Page 5: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/5.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
55
Aspectos Importantes:Aspectos Importantes:
Meio envolventeMeio envolvente Características humanasCaracterísticas humanas Características tecnológicasCaracterísticas tecnológicas
Processo de desenvolvimentoProcesso de desenvolvimento
![Page 6: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/6.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
66
Meio envolventeMeio envolvente
Meio social e de trabalhoMeio social e de trabalho
Áreas de aplicaçãoÁreas de aplicação- Para cada necessidade, uma aplicação - Para cada necessidade, uma aplicação
Interacção Homem-MáquinaInteracção Homem-Máquina- Interagir com os sentidos (audição, visão tacto)- Interagir com os sentidos (audição, visão tacto)
- Tutorais- Tutorais
- Documentação- Documentação
- Ajuda On-Line- Ajuda On-Line
![Page 7: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/7.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
77
Características Humanas Humanas
Capacidades CognitivasCapacidades Cognitivas Linguagem, Comunicação, InteracçãoLinguagem, Comunicação, Interacção ErgonomiaErgonomia
![Page 8: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/8.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
88
Características HumanasCaracterísticas Humanas
Capacidades Capacidades CognitivasCognitivas
Linguagem, Linguagem, Comunicação, Comunicação, InteracçãoInteracção
ErgonomiaErgonomia
Cada ser Humano tem diferentes capacidades que o influenciam no uso com o computador:
- Percepção - Aprendizagem - Acesso à informação - Memória
Nível de experiência de cada Nível de experiência de cada utilizador utilizador
![Page 9: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/9.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
99
Características HumanasCaracterísticas Humanas
Capacidades Capacidades CognitivasCognitivas
Linguagem, Linguagem, Comunicação, Comunicação, InteracçãoInteracção
ErgonomiaErgonomia
Linguagem simples e Linguagem simples e objectivaobjectiva
Imagens, sons …Imagens, sons … Mensagens destinadas Mensagens destinadas
ao utilizadorao utilizador Organização no ecrãOrganização no ecrã
![Page 10: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/10.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1010
Características HumanasCaracterísticas Humanas
Capacidades Capacidades CognitivasCognitivas
Linguagem, Linguagem, Comunicação, Comunicação, InteracçãoInteracção
ErgonomiaErgonomia
Estuda como o design do Estuda como o design do produto afecta as pessoas: produto afecta as pessoas:
-Estuda as -Estuda as capacidades capacidades humanas e humanas e suas imitações suas imitações na na obtenção de obtenção de ferramentas ferramentas maismais adequadas para adequadas para que no que no trabalho trabalho aumente a aumente a produtividade (QWL)produtividade (QWL)
Antropometria - Antropometria - Ciência que estuda as medidas do corpo.
![Page 11: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/11.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1111
Características HumanasCaracterísticas Humanas
Capacidades Capacidades CognitivasCognitivas
Linguagem, Linguagem, Comunicação, Comunicação, InteracçãoInteracção
ErgonomiaErgonomia
Ambiente:Ambiente:- Luminosidade - Luminosidade
adequadaadequada- Temperatura - Temperatura
ambienteambiente- Nível de ruído- Nível de ruído- Colocação dos - Colocação dos periféricosperiféricos- Mobília - Mobília
confortávelconfortável
![Page 12: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/12.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1212
Características HumanasCaracterísticas Humanas
Capacidades Capacidades CognitivasCognitivas
Linguagem, Linguagem, Comunicação, Comunicação, InteracçãoInteracção
ErgonomiaErgonomia
Software:Software:
- Prestável- Prestável
- Claro- Claro
- Seguro- Seguro
- Coerente- Coerente
- Versátil- Versátil
- Expressivo- Expressivo
![Page 13: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/13.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1313
Características Características TecnológicasTecnológicas
Hardware Deve-se ter em conta a funcionalidade
pretendida e os utilizadores:
- Teclado- Touch Screen- Trackers tridimensionais- Dispositivos de entrada por voz- Saída Visual (ecrã,…)- Vídeo Conferencia (Web Cam,
Telemóveis 3G)
![Page 14: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/14.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1414
Características Características TecnológicasTecnológicas
Software
- Entrada de Comandos- Menus- Diálogos Questão/Resposta- Formulários- Manipulação directa
![Page 15: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/15.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1515
Características Características TecnológicasTecnológicas
Software
Boa qualidade:- Útil- Fácil de Utilizar- Eficaz na sua utilização
- Satisfação e Conforto
- Saúde e bem-estar
- Mais Produtividade
Leva a:
![Page 16: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/16.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1616
Características Características TecnológicasTecnológicas
Software
Má qualidade:- Desconhecimento da Desconhecimento da actividadeactividade- Desconhecimento do Desconhecimento do utilizador e das utilizador e das características humanascaracterísticas humanas- Desinteresse pela Desinteresse pela lógica de utilizaçãológica de utilização
- Aborrecimentos e Aborrecimentos e frustraçõesfrustrações
- Stress
- Desperdício e Desperdício e abandono do abandono do sistemasistema
Leva a:
![Page 17: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/17.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1717
Processo de Processo de desenvolvimentodesenvolvimento
Factores a levar em contaFactores a levar em contaUtilizadores::
Tecnologias: Funcionais:
Características individuais (idade, sexo, formação, cultura, experiência, etc...);
Elementos de hardware disponíveis para a utilização e adequa-los aos factores anteriores; Suportes disponíveis para a equipa de desenho;
Projectar o sistema antes do modelo final (Protótipos); Através da conversação e representação, o utilizador terá um sistema adequado a si e terá uma melhor percepção do sistema;
![Page 18: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/18.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1818
Processo de Processo de desenvolvimentodesenvolvimento
Aspectos importantes:
- Visualização - Multimédia - Interacção Homem-Máquina- Usabilidade- Informação do sistema- Ajuda on-line
![Page 19: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/19.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
1919
Processo de Processo de desenvolvimentodesenvolvimento
Visualização:
-Gráficos melhoram o desempenho de trabalho
-Gráficos alcançam os que não lêem e são facilmente memorizados-Visão é o nosso sentido dominante-Uma imagem supera as limitações do texto
![Page 20: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/20.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2020
Processo de Processo de desenvolvimentodesenvolvimento
Multimédia:
Como criar interfaces interactivos?
-Bom design de interacção-Gifs animados-Vídeo clips e outras animações-Integrar objectos multimédia no software-Inovar o design, utilizando flash, etc…
![Page 21: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/21.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2121
Processo de Processo de desenvolvimentodesenvolvimento
Homem-Máquina:
-Psicologia Cognitiva
-Factores Humanos (ergonomia)
Usabilidade:
-Desenvolver o Software mais fácil de usar para os utilizadores
-É uma fase bastante importante no ciclo de desenvolvimento
![Page 22: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/22.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2222
Processo de Processo de desenvolvimentodesenvolvimento
Técnicas:
- Prover ajudas e janelas de aconselhamento
- Prover video-clips e treino de maneira a integrar o utilizador com o sistema
- Usar o XML que modulariza pequenas partes do conhecimento integra-o em aplicações
![Page 23: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/23.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2323
Processo de Processo de desenvolvimentodesenvolvimento
Interacção no Processo de DesenvolvimentoInteracção no Processo de Desenvolvimento O desenho de Interface consiste essencialmente em O desenho de Interface consiste essencialmente em
actualizações sucessivas resultantes das constantes actualizações sucessivas resultantes das constantes avaliações e modificações, sendo uma consequência das avaliações e modificações, sendo uma consequência das apreciações dos utilizadores ou clientes.apreciações dos utilizadores ou clientes.
![Page 24: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/24.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2424
Processo de Processo de desenvolvimentodesenvolvimento
Modelo CascataModelo Cascata
![Page 25: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/25.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2525
Processo de Processo de desenvolvimentodesenvolvimento
Técnicas de desenvolvimento de software:
-Estudo de documentos do cliente ou utilizador-Entrevistas (obtenção de dados)-Estudo estatístico (para software de distribuição)-Protótipo
-Fase que permite uma antevisão do interface e do funcionamento do sistema
-Partindo do protótipo desenvolvido comprova-se, ou não, a satisfação e o cumprimento das necessidades do cliente/utilizador
![Page 26: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/26.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2626
Palette demonstrativa do Palette demonstrativa do UIDUID
![Page 27: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/27.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2727
ExemplosExemplos
![Page 28: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/28.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2828
![Page 29: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/29.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
2929
![Page 30: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/30.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
3030
Relação com a Relação com a Engenharia de SoftwareEngenharia de Software
No âmbito da análise e do design podemos relacionar a Engenharia de Software e o UID, pois em ambas existe uma obtenção de requisitos (Engenharia de Requisitos). Finalizada a primeira fase do desenvolvimento, passamos à interacção entre o utilizador e o interface (Design).
![Page 31: USER INTERFACE DESIGN Engenharia de Software Elaborado por: Pedro Fernandes, nº3322 Patrício Januário, nº3314 João Ferro Pelica, nº3428](https://reader035.vdocuments.mx/reader035/viewer/2022062512/552fc0fc497959413d8ba26a/html5/thumbnails/31.jpg)
João Pelica, Patrício Januário e PeJoão Pelica, Patrício Januário e Pedro Fernandesdro Fernandes
3131
ReferênciasReferências
http://www.chesco.com/~cmarion/Design/UIDesign.html
http://www.cs.uga.edu/~eileen/4900/Notes/evaluation/index.htm
http://www.uidesigns.com/
http://www.di.uevora.pt/~aed/ihm0304.html