Programação

de Sistemas
Profª Karien Barbosa
  O que é uma interface gráfica?
 Interação: essa interação passou da linha de comando, em modo
texto, para desktops em três dimensões e softwares que aceitam
comandos por voz ou gestos com o propósito de facilitar e tornar
mais intuitiva a utilização das máquinas.
Introdução  A interface gráfica do usuário (GUI) é o conteúdo gráfico mediante o
qual se visualiza uma informação do equipamento em uma tela.
Quase todos os programas possuem algum tipo de interface visual,
que serve ao mesmo tempo para mostrar informação ao usuário e
como um mapa de navegação entre diferentes comandos.
  O que é uma interface gráfica?
 O termo “interface” significa “o elemento que proporciona uma
ligação física ou lógica entre dois sistemas ou partes de um sistema
que não poderiam estar conectados diretamente”. Analisando esse
contexto, podemos dizer que é a interface gráfica que faz a ligação
Introdução do ser humano com a máquina (computadores, smartphones...).
 Em um ambiente digital, a interface é o elemento que “separa dois
espaços absolutamente diferentes e que de alguma maneira
coexistem” (contato entre o ser humano e a máquina).
  O que é uma interface gráfica?
 No universo das mídias digitais, é o ambiente gráfico do produto
digital, o canal de comunicação do usuário final com o conteúdo de
forma geral. É na interface gráfica que acontece a relação do usuário
com o sistema, sendo a interface o elemento que faz a transição
Introdução entre o real e o digital.
 Frequentemente chamada de interface gráfica de usuário (gui, do
inglês, graphic user interface), consiste nos elementos presentes
num sistema com os quais os usuários entram em contato, seja
fisicamente, perceptível ou conceitualmente.
  O design da interface faz a mediação da interação das pessoas
com os mais diversos dispositivos tecnológicos como
smartphones, tablets, notebooks, computadores, além de caixas
Interface eletrônicos de banco, smart tvs e uma grande gama de novos
dispositivos que são lançados a cada dia. Vivemos em uma
Gráfica sociedade mediada pelas interfaces gráficas.
  Os usuários interagem com os sistemas de muitas formas
diferentes, apertando botões e ícones, tocando em uma tela,
movimentando um mouse, clicando no botão do mouse,
Interface manipulando uma barra de rolagem, etc. Do ponto de vista da
percepção, eles interagem com um sistema por intermédio do que
Gráfica elas podem ver, ouvir e tocar. Os aspectos visuais do design de
interface apresentam um design que permita às pessoas ver,
perceber e interagir com os elementos em uma tela, seja esta tela
dos mais diversos formatos.
  Conceitualmente, os usuários interagem com sistemas e
dispositivos utilizando o conhecimento e a percepção do que eles
podem fazer e de como podem fazer. É justamente por intermédio
das interfaces gráficas que os usuários manipulam os mais
Interface diversos sistemas. Seja um editor de texto, um aplicativo de envio
de mensagens instantâneas ou até um game.
Gráfica  O conceito de interatividade é bastante antigo, e pelo menos
metaforicamente, toda obra de arte de qualidade traz em si o potencial
interativo. No entanto, com o advento das novas tecnologias, aparece
uma maior ênfase num determinado tipo de interatividade. No caso
específico da hipermídia, podemos pontuar que a obra em si só se torna
obra no momento em que ela é fruída pelo leitor. Enfim, a leitura é
elemento constitutivo na realização do trabalho. (leão, 2001, p. 34)
Interface Gráfica
Interface
Gráfica
  Quais os principais tipos de interface de usuário?
1. Interface gráfica do utilizador: o comando vem de dispositivos
como teclado, mouse, tela (touchscreen) e a saída ou resposta é
dada no próprio monitor.
Interface
Gráfica Um exemplo disso são os sistemas dos computadores, como o
próprio Windows, da Microsoft.
  Quais os principais tipos de interface de usuário?
2. Interface de linha de comando: Executada por meio da digitação
Interface de textos que são impressos no monitor.
Exemplo para essa interface são os prompt de comando dos
Gráfica computadores.
  Interface de voz (VUI)
3. Funciona por meio do comando de voz e a saída pode acontecer
Interface em formato de texto, gráfico ou áudio.

Gráfica Não há exemplo melhor do que os assistentes

virtuais que temos hoje nos celulares, como o próprio
Google Assistant, Alexa ou a Siri.
  Interface cérebro-computador
Interface 4. Essa é a interface mais inovadora e vem sendo usada para
controlar próteses biônicas e transmitir comandos à softwares por
Gráfica meio de ondas cerebrais.
  Características de uma Interface do Usuário de um Site
1. Clareza
Ao acessarem o seu sistema, as pessoas precisam saber
exatamente como utilizá-lo e o seu objetivo deve ser fazer com
Interface que isso aconteça o mais rápido possível.
Por isso, é importante que você dispense o excesso de
Gráfica informações e faça com que ela não se sintam confusas ao
acessá-lo.
Alguns recursos como botões de ação, conhecidos como call to
action (CTA) também são muito bem-vindos nesse contexto,
para orientar a ação do usuário.
  Características de uma Interface do Usuário de um Site
2. Consistência na usabilidade
Os usuários desenvolvam um padrão de uso em sua plataforma.
Você deve “educá-los” para se entenderem da melhor forma com
o seu sistema, fazendo com que eles aprendam as funções dos
diferentes botões e comandos disponíveis. Por isso, padronize os
seus comandos ao máximo.
Interface
Gráfica 3. Adaptabilidade
A interface também precisa ser flexível a ponto de fornecer
informações de instrução quando o usuário errar o comando, por
exemplo. Outro ponto importante é que, em caso de páginas na
internet, elas sejam adaptáveis
aos diferentes dispositivos, como monitores de diferentes
tamanhos,
tablets e telas de celular.
  Características de uma Interface do Usuário de um Site
4. Familiaridade
A interface deve ser intuitiva para que o usuário desenvolva a
habilidade para utilizá-la naturalmente. Ou seja, sua página ou
sistema deve ser familiar, semelhante a algo com o qual ele já
esteja acostumado, não adianta tentar quebrar padrões e
radicalizar nas diferenças se o seu cliente não conseguir fazer o
Interface devido uso da interface.

Gráfica 5. Objetividade
Evite textos longos e, sempre que possível, vá direto ao ponto.
Nem todo mundo tem tempo a perder buscando informações
escondidas ou tentando
entender um determinado produto, então busque fornecer as
informações
essenciais de forma bem simples.
  Características de uma Interface do Usuário de um Site
6. Atratividade
Além de investir em clareza e objetividade, o design também
deve ser atrativo aos olhos do usuário, de modo que a
experiência de acessar o seu site, aplicativo ou sistema seja de
alguma forma também prazerosa. Saiba combinar as cores, os
gráficos e as imagens ou contrate um serviço especializado
Interface nisso, pode ter certeza que fará a diferença.

Gráfica 7. Eficiência
De nada adianta ter uma interface de usuário bonita e atrante
se ela não cumpre o que promete, por isso antecipe-se em
conhecer as demandas dos seus clientes para que você possa
resolver os problemas deles. Além disso, opte por fazer isso da
maneira mais prática possível!
Um exemplo disso, são as redes sociais.
  Características de uma Interface do Usuário de um Site
8. Compreensão
Entenda que eventualmente, mesmo com todos esses esforços,
algumas pessoas ainda poderão ter dificuldades ao utilizar sua
Interface interface.
Portanto, busque fornecer instruções sobre o que fazer,
Gráfica principalmente em caso de erros.

Cuide para que sua interface saiba direcionar e tratar bem as

pessoas mesmo quando elas cometerem erros.
  Características de uma Interface do Usuário de um Site
1. Evite incluir informações desnecessárias e poluir a visão do
usuário. Seu objetivo é chamar a atenção dele para o que
Interface 2.
interessa, portanto, esqueça os pormenores menos importantes.
Utilize uma estrutura de layout inteligente, chame atenção para a
Gráfica ação que você quer que ele execute.
3. Conte com a ajuda de especialistas para escolher cores, imagens,
texturas, fontes e demais detalhes da aparência, afinal nem
sempre é simples fazer essas combinações.
  Escolhendo elementos de design de interface do usuário
 Geralmente os usuários esperam que uma interface funcione e se
comporte de uma maneira específica. Ao projetar uma interface, é
recomendável que ela seja previsível, concisa e consistente. Isso
melhora sua eficiência na conclusão de tarefas e, finalmente, reforça
a satisfação do usuário.

Interface  Vários elementos constituem uma interface de usuário funcional.

Eles podem ser:
Gráfica
1. Controles de entrada, como botões, alternâncias e caixas de seleção,
entre muitos outros.
2. Componentes de navegação, por exemplo trilha de navegação,
controles deslizantes, campos de pesquisa, ícones etc.
3. Componentes de informações, por exemplo, dicas de ferramentas,
4. notificações, caixas de mensagens e barras de progresso, entre
outros.
5. Chamadas à ação.
  Erros para evitar ao pensar no design de interface do usuário
1. Não implementar um design centrado no usuário: é
fácil ignorar esta parte, pois é um dos aspectos
importantes do design da interface do usuário. Ao
projetar, lembre-se das necessidades, preferências e
problemas dos visitantes. Evitar fazer isso pode ter
um impacto negativo nos seus negócios e causar o
Interface colapso.
Gráfica 2. Não aprender mais sobre o público-alvo: Novamente,
este ponto ilustra mais sobre o que acabamos de falar.
Em vez de projetar com suas próprias preferências e
gostos, crie um design como se você fosse o cliente.
Basta pensar no que o cliente adoraria e, se possível,
realizar uma pesquisa ou entrevistar alguns clientes
em potencial para realmente entender
o que eles precisam.
  Erros para evitar ao pensar no design de interface do usuário
3. Uso excessivo de efeitos dinâmicos: Usar muitos
efeitos de animações não é sinônimo de um ótimo
design. Portanto, evitar animações decorativas
excessivas pode ajudar a otimizar a experiência do
usuário.
4. Não explorar o design: a pressão de cumprir os prazos
Interface e a pesada carga de trabalho podem fazer com que o
designer evite explorar outras possibilidades de se
Gráfica inspirar e ser mais criativo antes de elaborar seu plano
de design.
5. Criar muito antecipadamente: Especialmente no
estágio inicial, queremos apenas ter em mente a
imagem certa do design e começar a trabalhar. No
entanto, essa concepção nem sempre é eficiente.
Às vezes, explorar outras fontes.
  O que é Interface Humano-Computador?
 Entender como as pessoas usam os computadores e fazer a

IHC investigação de outras formas de interação.

 Tem como objetivo proporcionar uma comunicação entre usuário e
sistema computacional mais natural, semelhante à comunicação
entre seres humanos.
  O que é Interface Humano-Computador?
 Os objetivos da Interação Humano–Computador (IHC) são os de
produzir sistemas usáveis, seguros e funcionais. Esses objetivos
podem ser resumidos como desenvolver ou melhorar a segurança,
utilidade, efetividade e usabilidade de sistemas que incluem
IHC computadores. Nesse contexto, o termo sistemas se refere não
somente ao hardware e software, mas a todo o ambiente que usa ou
é afetado pelo uso da tecnologia computacional. Durante o projeto
de interface é necessário que se faça uma análise mais detalhada,
como especificação de requisitos, módulo de qualidade e perfil dos
usuários.
  O que é Interface Humano-Computador?
 Estudar a interação sob o ponto de vista do usuário envolve
investigar as pessoas usando sistemas (Silva & Barbosa, 2010, p.10).

 Entender, explicar e prever fenômenos da interação entre usuários e

IHC computadores e, como consequência, fornecer meios para projetar
interfaces adequadas ao contexto e às necessidades dos usuários:
adequando os sistemas às necessidades, capacidades e
características dos usuários, tornando os softwares mais úteis e
fáceis de serem usados e proporcionando uma experiência de uso de
qualidade (Baranauskas & Rocha, 2003).
IHC

 O que é Interface Humano-Computador?

 Projetar uma experiência de uso de qualidade envolve incorporar fatores subjetivos, pessoais, de cada
usuário; isto é, sentimentos, emoções, estado de espírito e sensações decorrentes da interação do
usuário com o sistema. Assim, uma experiência de qualidade promove bons sentimentos e emoções
nos usuários, evitando provocar sensações e emoções desagradáveis, indo um pouco a mais de um
sistema usável e abrangendo todos os aspectos envolvidos na interação do usuário (Silva & Barbosa,
2010; Preece et alii, 2005).

 Para Prates & Barbosa (2003, p.3), a qualidade de uso está estreitamente relacionado com a
capacidade e a facilidade
os usuários atingirem suas metas com eficiência e satisfação.
IHC

 Em um sistema computacional a interface com o usuário é o conjunto completo de aspectos que

torna explícito o processo de interação e inclui de forma resumida os seguintes elementos:
1. dispositivos de entrada e saída de dados;
2. informação apresentada ao usuário ou enviada pelo usuário;
3. retorno oferecido pelo sistema ao usuário;
4. comportamento do sistema;
5. ações do usuário com respeito a todos estes aspectos.
IHC

 Qualquer objeto possui uma interface que permite processos de interação:

IHC

Recursos de Interação
 Os muitos recursos de interação permitem combinação diversas de interfaces e
ações. Teclado, monitor, elementos virtuais, entre outros motivam pesquisas de todo
tipo.
 A interface gráfica com o usuário GUIs (Graphical User Interface) oferece soluções
para o uso de elementos gráficos como menus, janelas, paletas, ícones, etc.
 As pesquisa sobre o projeto do produto tecnológico envolvem conceitos de
ergonomia – que sugere capacidades humanas para a utilização de interfaces físicas –
processo de projeto, testes entre outros.
 Na década de 1980 e 1990 novos recursos surgiam e o mercado para a pesquisa
multidisciplinar ampliava com descobertas de
interface e interativas como reconhecimento de voz,
multimídia, realidade virtual, ambientes de
aprendizagem (treinamento e educação) e rede sem fio.
  Profissões decorrentes da IHC
1. Analista com especialidade em projeto centrado no
usuário;
IHC 2.
3.
Arquiteto de informação;
WebDesigner;
4. Especialista em usabilidade;
5. Testador/Avaliador;
IHC

 Exemplos
IHC

 Exemplos
IHC

 Exemplos
IHC

 Exemplos
IHC

 Exemplos
IHC

 Exemplos
  Conclusão
 Para um bom sistema de Interação Humano Computador é
fundamental que bons níveis de usabilidade sejam atingidos,
IHC considerando primeiramente a utilidade do produto. Com
isso, a participação do usuário no desenvolvimento desse
produto torna-se essencial, no sentido de se buscar o que
deseja, avaliar e mensurar os componentes e fatores que
facilitarão a sua interação com o sistema.
  Descreva como você poderia abordar o projeto do serviço de
compras em supermercado. Não faça o projeto; pense na
proposta do design. Ele tem questões de eficiência, segurança,
ética e sustentabilidade que precisam ser consideradas?

Exercício
  Passe algum tempo navegando pelos sites de corporações como
Samsung, Sony e Apple. Não olhe apenas o design do site (embora
isso possa ser útil); veja também os produtos sobre os quais eles
estão falando e a filosofia de sua proposta de design. Pense em
toda a gama de questões sobre o site: qual a sua aparência, o
quanto ele é fácil de usar, o quanto seu conteúdo é relevante, com
que clareza ele está organizado, qual a 'sensação' geral que o site
proporciona.

Exercício