CIENCIA DA COMPUTAÇÃO | 1º SEM 2024

INTERFACE HOMEM COMPUTADOR – IHC

INTERFACES E USABILIDADE
 DESENVOLVIMENTO DE UM SITE (SOFTWARE)
▪ Os sites web são produtos de software.
▪ Todo produto de software tem uma metodologia para ser desenvolvido e passa por uma
serie de passos (será estudado a fundo na disciplina de Engenharia de Software).

▪ As atividades básicas (também conhecidas como etapas ou fases) do processo de

desenvolvimento de um software são:

1 – Analise de Requisitos
2 – Especificação / Projeto
3 – Implementação
4 – Validação / Testes
5 – Manutenção

2
 ANÁLISE DE REQUISITOS
▪ Identificam-se as necessidades (requisitos) de um cliente.
▪ Engloba investigação, definição e escopo de novos sistemas ou alterações de sistemas
existentes.

3
 ANÁLISE DE REQUISITOS
COMO APLICAR NO SEU PROJETO DE SITE:

▪ Deve-se coletar as informações necessárias para o desenvolvimento do site.

▪ Serve para ter maior entendimento do projeto (tanto para o analista de requisitos quanto
para o cliente)
▪ Em função as respostas do cliente, deve existir uma interação com o cliente para
presentar a melhor apresentação do site segundo o analista/engenheiro de requisitos:
navegação, posicionamento dos objetos, entre outros.
▪ As soluções propostas para o cliente dependeram do público alvo, conteúdo, quantidade
de textos e fotos, etc.

4
 ANÁLISE DE REQUISITOS
DETALHES A SER CONSIDERADOS:

▪ PROPÓSITO: qual o propósito do site? Fornecer informações, serviços, propaganda,

vendas...?
▪ METAS: Quais as expectativas em relação ao site? Fazer dinheiro ou compartilhar
informações? Tem concorrentes?
▪ PÚBLICO ALVO: Qual o grupo de pessoas que ajudarão a alcançar as metas? Qual é o tipo
de pessoa que quer que visite o site? Idade, sexo, interesses são fatores importantes no
desenvolvimento de um bom design.
▪ CONTEÚDO: Qual o tipo de informação para o público alvo? Algum assunto específico,
um produto ou serviço, algum requisito..?
▪ MATERIAL DISPONÍVEL: fotos, textos, identidade visual do cliente etc?
▪ DETALHES VISUAIS: preferência de cores
▪ PRAZOS E OUTROS: Quanto mais detalhado, mais fácil será o desenvolvimento.

5
 ESPECIFICAÇÃO / PROJETO
▪ Tarefa de descrever precisamente o software que será escrito.
▪ É a definição do que se espera que um programa de computador faça, orientado a
cumprir objetivos e sujeito a limites.

▪ Alguns aspectos devem ser considerados nessa fase de projeto do sistema, como:
arquitetura do sistema, linguagem de programação utilizada, Sistema Gerenciador de
Banco de Dados (SGBD) utilizado, padrão de interface gráfica, entre outros.

6
 ESPECIFICAÇÃO / PROJETO
COMO APLICAR NO SEU PROJETO DE SITE:

▪ Para especificar um site devemos planejar diversos detalhes como:

▪ O "mapa do site" é feito com os tópicos mais importantes e seus sub-tópicos, se tiver. Ele
é um índice para um fácil entendimento da navegação do projeto.

▪ As informações de um site são ligadas através de links e um menu principal. Uma

navegação efetiva é intuitiva, ou seja, a pessoa que entrar no site não precisa ficar
procurando pela informação desejada. Exemplo: não seria correto colocar no link de
contato um ícone de casinha.

▪ Nessa etapa também será decidida a tecnologia usada para o desenvolvimento: HTML,
Ajax, flash, php etc. E você que dará a melhor solução para o cliente.

7
 ESPECIFICAÇÃO / PROJETO
DESIGN:

▪ A primeira etapa de um design é desenhar um primeiro rascunho. Após ter especificado o

que é preciso, é melhor começar a desenhar uma versão em rascunho. Dessa forma
podem se mostrar rascunhos para o cliente e ele pode acompanhar o processo (para não
ter que repetir tudo desde o começo).

▪ Com a aprovação do rascunho pode se implementar o primeiro layout. É recomendável

que o cliente acompanhe o processo e veja cada layout para fazer mudanças no começo
do desenvolvimento e evitar o retrabalho.

8
 IMPLEMENTAÇÃO
▪ O sistema é codificado a partir da descrição computacional da fase de projeto em uma
outra linguagem.

▪ É a implementação do sistema em uma linguagem de computador.

9
 IMPLEMENTAÇÃO
COMO APLICAR NO SEU PROJETO DE SITE:

▪ Após ter os layouts deve-se implementar as funcionalidades.

▪ Geralmente esse desenvolvimento começa da página inicial indo para as internas.
▪ Deixe o código bem identado, de fácil entendimento e use os padrões atuais dos web
standards, isso ajudará na manutenção.
▪ Não coloque códigos ou animações desnecessárias.
▪ O mais importante nessa fase: desenvolva um site que seja bem visualizado em diversos
navegadores com versões diferentes e com diferentes plataformas. O usuário final pode
acessar o site de qualquer plataforma.
▪ Lembre-se de separar o conteúdo/estrutura (html) da parte visual (css) e do
comportamento (scripts). Faça chamadas externas.

10
 VALIDAÇÃO / TESTES
▪ A realização de testes para verificar a presença de erros e comportamento adequado a
nível das funções e módulos básicos do sistema.

▪ A verificação da interação entre módulos e um produto de software quando operando

em conjunto.

11
 VALIDAÇÃO / TESTES
COMO APLICAR NO SEU PROJETO DE SITE:

▪ Devem-se testar as diversas partes e funcionalidades do site.

▪ Faça teste nos links para ver se não estão direcionando para lugares errados.
▪ Verifique a compatibilidade dos navegadores quanto à visualização, resolução de tela,
usabilidade (pessoas com daltonismo vão conseguir identificar um link no site?).

▪ Publicação: Finalmente, após de concertar os erros achados nos testes e receber a

aprovação do cliente, é hora de publicar o site. Deve se registrar um domínio e escolher
uma hospedagem caso o cliente ainda não tenha.

▪ Devem ser feitos testes finais com o site no ar.

12
 MANUTENÇÃO
▪ Processo de melhoria e otimização de um software já desenvolvido, como também reparo
de defeitos.

▪ A maioria das manutenções é para ampliar os sistemas para novas funcionalidades, as

quais, de diversas formas, podem ser consideradas um novo trabalho

13
 MANUTENÇÃO
COMO APLICAR NO SEU PROJETO DE SITE:

▪ Somente o desenvolvimento do site não é o suficiente.

▪ Usualmente existe um longo caminho pela frente.
▪ Nesta etapa se atualiza, ou incrementa funcionalidades ao site.
▪ É preciso atualizar a página com novos produtos, serviços, informações.
▪ Além disso, o uso de ferramentas de análises podem ser feitas para acompanhar o
desempenho do site quanto ao número de visitantes, se o usuário está vindo de link
direto ou se vem de alguma outra fonte.

14
 MANUTENÇÃO
▪ Processo de melhoria e otimização de um software já desenvolvido, como também reparo
de defeitos.

▪ A maioria das manutenções é para ampliar os sistemas para novas funcionalidades, as

quais, de diversas formas, podem ser consideradas um novo trabalho

15
MOTIVAÇÃO

16
UM PROCESSO DE INTERAÇÃO

17
 UM PROCESSO DE INTERAÇÃO
EXEMPLO:

▪ Professor deve preparar uma aula

▪ Professor decide que vai fazer uma apresentação via computador
▪ Programa utilizado para preparar apresentação: LibreOffice
▪ O professor prepara as aulas em sua casa
▪ Utiliza um computador Desktop, com dois monitores LCD antigos (um de 22’’, e outro de
15’’), teclado e mouse.

18
 UM PROCESSO DE INTERAÇÃO
EXEMPLO:

19
 UM PROCESSO DE INTERAÇÃO
EXEMPLO:

Elementos envolvidos na interação:

▪ Usuário: Professor
▪ Contexto de uso: casa
▪ Sistema: LibreOffice, versão para Linux
▪ Objetivo: preparar aula

20
 UM PROCESSO DE INTERAÇÃO
EXEMPLO:

21
 UM PROCESSO DE INTERAÇÃO
EXEMPLO:

▪ Agora o professor vai dar a sua aula

▪ Ao invés de um monitor de LCD, será utilizado um datashow (projetor).
▪ O professor vai utilizar o seu notebook para apresentar as aulas.
▪ A utilização do notebook é similar a do desktop, mas as cores e o brilho são alterados pelo
tipo de datashow.
▪ O contexto de uso é bem diferente: agora temos uma aula.

22
 INTERAÇÃO
▪ Existem várias definições possíveis de interação entre usuário e sistema.
▪ As primeiras visões da área definiam a interação usuário-sistema como operação de
uma máquina
▪ Posteriormente, o foco mudou para uma forma de comunicação com a máquina
▪ Quatro perspectivas possíveis:

23
 INTERAÇÃO
▪ Existem várias definições possíveis de interação entre usuário e sistema.
▪ As primeiras visões da área definiam a interação usuário-sistema como operação de uma
máquina
▪ Posteriormente, o foco mudou para uma forma de comunicação com a máquina
▪ Quatro perspectivas possíveis:

24
 PERSPECTIVAS DA INTERAÇÃO HUMANO-COMPUTADOR
▪ Perspectiva de Sistema: usuário trabalha com a máquina de forma similar a
outra máquina.
▪ Exemplo: interação com o sistema operacional através de um console de
comandos (no
Linux, o terminal, por exemplo).

25
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR
▪ Outro exemplo de perspectiva de sistema: limitação da interação do
usuário.

26
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR

VANTAGENS DA PERSPECTIVA DE SISTEMAS:

▪ Usuários especializados tendem a ter uma performance muito boa
DESVANTAGENS DA PERSPECTIVA DE SISTEMAS:
PERSPECTIVAS DA INTE
RAÇO
▪ Usuários iniciantes têm muita HUMANO-
dificuldade em trabalhar com esse tipo de interface
COMPUTADOR
OUTRA POSSIBILIDADE:

▪ Computador como parceiro do discurso.

▪ Exemplo: um chatbot

27
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR

VANTAGENS DA PERSPECTIVA DE SISTEMAS:

▪ Usuários especializados tendem a ter uma performance muito boa

DESVANTAGENS DA PERSPECTIVA DE SISTEMAS:

▪ Usuários iniciantes têm muita dificuldade em trabalhar com esse tipo de interface
OUTRA POSSIBILIDADE:

▪ Computador como parceiro do discurso.

▪ Exemplo: um chatbot

28
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR

29
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR

VANTAGENS DA PERSPECTIVA DE SISTEMAS:

▪ É muito simples de ser utilizado por usuários pouco experientes

▪ Diminui a ansiedade com relação a operação de sistemas computacionais
DESVANTAGENS:

▪ A construção desses sistemas é complexa (esse é um tipo de problema complexo da

área de Inteligência Artificial)
▪ Podem haver problemas de comunicação com o usuário (problemas de
interpretação)
▪ Usuários avançados podem reclamar da abordagem...

30
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR
OUTRA POSSIBILIDADE:

COMPUTADOR COMO UMA FERRAMENTA.

▪ Exemplo: Programas de automação de escritório, como o MS Word e MS Excel.

▪ Nesses casos, o usuário quer normalmente executar uma tarefa em um contexto de
um projeto.

PERSPECTIVA DE MÍDIA

▪ Exemplo: sistemas no qual o foco está na comunicação, redes sociais, etc.

31
PERSPECTIVAS DA INTERAÇO HUMANO-COMPUTADOR
COMPARAÇÃO DAS ABORDAGENSC:

32
 INTERFACE
▪ Interface não é o mesmo que interação
▪ Interação é o processo que ocorre durante o uso (Barbosa e Silva, 2010)
▪ Interface é o que o usuário entra em contado, seja de forma física ou de forma conceitual.

INTERFACE – CONTATO FISICO:

• Dispositivos de entrada: teclado, mouse, microfone, etc

• Dispositivos de saída: monitor, impressora, alto-falante, etc
• Exemplo: “clicar” com o mouse sobre o “x” de uma janela (o mouse é o hardware), e ter
como resultado o término da execução (resultado vindo do software).

INTERFACE – CONTATO CONCEITUAL:

▪ Envolve o que o usuário interpreta através do contato físico com os dispositivos de entrada
e de saída do sistema.
▪ E da interpretação das respostas que o usuário vai planejar nas próximas interações com o
sistema.
33
 AFFORDANCE
▪ Características de um objeto (ou interface) que funcionam como “dicas” de como algo
funciona.
▪ No caso de uma interface, os botões evidenciam o fato de que podem ser pressionados, e
um ícone evidencia quais ações ele pode levar (através do desenho).
▪ Ajuda o usuário, guiando suas ações e mostrando o que o sistema é capaz de fazer.
▪ Cuidados: o designer não deve dar “falsas dicas” de como uma interface funciona.
▪ Exemplo: colocar uma informação não editável em um campo editável.

34
 QUALIDADE DE UMA IHC
▪ Como poderíamos identificar as qualidades de uma IHC?
▪ Quais seriam as características de uma interação e de uma interface que poderíamos dizer
que são de “qualidade”?

OS PRINCIPAIS CRITÉRIOS SÃO UTILIZADOS SÃO:

1. Usabilidade
2. Experiência do usuário
3. Acessibilidade
4. Comunicabilidade

35
 USABILIDADE
▪ A usabilidade é um termo utilizado para caracterizar a facilidade de aprendizado e de uso
de uma ferramenta ou programa.
▪ Também engloba a satisfação do usuário com o uso da ferramenta (ou programa).
▪ No caso de um software: está relacionada a eficiência, eficácia e satisfação no contexto de
uso do software em questão.
▪ Um exemplo, no caso de uma ferramenta: a chave de fenda.

36
 USABILIDADE
▪ O usuário deve ser capaz de utilizar o sistema para atingir seus objetivos com eficácia,
eficiência e satisfação.

▪ EFICÁCIA: alcançar seus objetivos corretamente

▪ EFICIÊNCIA: recursos necessários para a interação, como tempo, mão de obra e materiais.

37
 EXPERIÊNCIA DO USUÁRIO (UX)
▪ A experiência do usuário engloba outros aspectos que a usabilidade não está diretamente
preocupada, como as emoções e sentimentos dos usuários durante o uso da interface.

▪ A norma ISO 9241-210 define a experiência do usuário como “a percepção da pessoa e

suas respostas vindas do uso ou da antecipação do uso de um produto, sistema ou
serviço.”

FATORES DE USUABILIDADE:

▪ Facilidade de aprendizado
▪ Facilidade de recordação
▪ Eficiência
▪ Segurança no uso
▪ Satisfação do usuário
38
 EXPERIÊNCIA DO USUÁRIO (UX)
ACESSIBILIDADE:

▪ A acessibilidade está relacionada a remoção de barreiras para a utilização de um

sistema.

▪ O objetivo deve ser garantir acesso direto (ou seja, sem ajuda) ou indireto (ou seja,
com o uso de alguma tecnologia auxiliar ou de outra pessoa) ao sistema, ferramenta,
local ou serviço.

39
 EXPERIÊNCIA DO USUÁRIO (UX)
COMUNICABILIDADE:

▪ Capacidade de que o design da IHC comunique sua forma de funcionamento para o

usuário.

▪ Auxilia o usuário na forma como ele vai interagir e planejar o uso da IHC.

▪ Do ponto de vista do usuário, significa mais clareza e organização.

▪ Do ponto de vista do designer, tornar claro o funcionamento de cada parte da IHC.

40
 T
TRABALHO PARA ENTREGAR
VALOR:

▪ Estudar para a prova do dia 01/04.

▪ Lá no final do semestre, caso você
precise de uma ajuda para ser
promovido,
eu irei buscar a ajuda neste trabalho.

41