Faculdade de Tecnologia de Sorocaba

Tecnologia em Análise e Desenvolvimento de Sistemas

INTERAÇÃO HUMANO-COMPUTADOR: GUIDELINES

ATIVIDADE 3

Prof.º Sergio Moraes

Disciplina: Interação Humano-Computador

Andressa Vieira Couto 0030482023038

Byanca de Araujo Santos 0030481921016
Willian Martins 0030482023012

Sorocaba
Agosto/2021
Sumário
1. Introdução ............................................................................................................. 3
2. Definição de Guidelines ........................................................................................ 4
2.1 Modelo de Schneiderman ...................................................................................... 4
2.2. Conceito de guidelines (geral e específico para IHC)........................................... 6
2.3 Exemplos de Guidelines na area de TI: ANDROID .............................................. 6
2.4 Exemplos de Guidelines fora de TI ..................................................................... 10
3. Conclusão ........................................................................................................... 11
4. Referencias......................................................................................................... 13
1. Introdução

A interface gráfica se analisada com um ponto de vista técnico e acadêmico,

nos mostra diversos conceitos amplamente utilizados na construção de interfaces de
qualidade. As guidelines são exemplos desses conceitos. Seu uso não é obrigatório,
porém elas nos ajudam a identificar quais são e como devem ser os elementos de
nossas interfaces, tem objetivo de ajudar a garantir uma boa usabilidade. São feitas
na fase inicial do projeto e o designer a faz normalmente de maneira generalizada.
Elas são utilizadas em um dos processos do modelo de Shneiderman, mais
especificamente na fase inicial do modelo, sendo inclusive utilizadas por grandes
empresas como Microsoft, Apple, Google, Yahoo, IBM, entre outras para definir a
identidade visual da interface entre outras especificações, e garantir consistência tanto
no produto quanto entre produtos de um determinado fabricante.
O objetivo deste trabalho é apresentar o tema Guidelines, falando sobre qual é
o conceito, quais suas finalidades segundo autores como Shneiderman (2005), e
Rocha e Baraunaskas (2003). Será apresentado o modelo de 3 pilares de
Shneiderman (2005), e alguns exemplos de guidelines dentro de empresas de T.I e
empresas de outros ramos.
A metodologia utilizada para compor este trabalho foi a pesquisa bibliográfica.
2. Definição de Guidelines

Segundo Rocha e Baranauskas (2003), podemos dizer que guidelines são

orientações ou recomendações que devem ser consideradas na elaboração e
avaliação de um software com o objetivo de ajudar a garantir uma boa usabilidade.
São criadas principalmente a partir do senso comum e da experiência na elaboração
de outros projetos de software. O uso de guidelines não deve ser entendido como algo
obrigatório no design, mas sim como algo que nos orienta melhor na criação do
mesmo. A aplicação de guidelines embora não seja trivial ajuda o designer a focar no
que é necessário e a lidar com restrições e compromissos do design.

2.1 Modelo de Schneiderman

Segundo Shneiderman (2005), os guidelines são documentos que ajudam a

desenvolver uma linguagem comum e, em seguida, promover a consistência entre
múltiplos projetos em termos de aparência, terminologia e sequências de ação. O
guideline registra as melhores práticas derivadas da experiência prática com
exemplos e contraexemplos apropriados. Segundo ele, a criação de um guideline
engaja a comunidade de design em uma discussão de formatos de entrada ou de
saída, sequências de ação, terminologia e dispositivos de hardware.
Para Shneiderman (2005), os guidelines prescrevem a cura para problemas de
design, o cuidado contra os perigos e fornece lembretes úteis. Alguns dos guidelines
citados por Shneiderman (2005) são a navegação da interface, organização de
exibição, atração da atenção do usuário e facilidade na entrada de dados.
O Modelo de Shneiderman é baseado em 3 pilares:
1. Guidelines (gerados pelo designer no início do processo);
2. Ferramentas de prototipagem;
3. Inspeção de usabilidade (teste com usuários).
 Figura 1: Diagrama representativo do modelo de interfaces baseado em 3 pilares de
Shneiderman

No início do processo o designer deve gerar um conjunto de guidelines. As

guidelines são métodos que orientam o designer na tomada de decisões consistentes
através dos elementos que constituem o produto (ex. conteúdo, apresentação,
funções, etc.), e devem ser entendidas e aplicadas de forma contextualizada, ou seja,
aplicáveis. (Rocha e Baranauskas, 2003)
O segundo pilar do modelo de Shneiderman (ferramentas de prototipagem), é
o momento em que o designer cria o protótipo do sistema, como ele deve ser, e
submete a aprovação do usuário ou grupo de usuários finais, sendo que o ideal é que
esses protótipos sejam feitos rapidamente, para economizar no tempo e no custo,
provendo feedback imediato.
O terceiro pilar do modelo de Shneiderman que trata da inspeção de
usabilidade, é a fase onde o designer verifica a consistência do sistema, no que diz
respeito a falhas, através de um conjunto de massa de testes, etc. Segundo Rocha e
Baranauskas (2003), possuem formas variadas, várias origens e são muito utilizados
por fabricantes que definem uma certa identidade à marca.
 Segundo elas, os guidelines devem ser entendidos e aplicados de forma
contextualizada e não deve ser entendido como uma “receita de design”, mas sim
como um conjunto de princípios utilizados parar orientar o design.
Elas afirmam que a aplicação de guidelines ajuda o designer a focar no que é
necessário e a lidar com restrições e compromissos de design. A definição de
guidelines a serem utilizadas no design de determinado sistema deve ser
acompanhada de exemplificação de seu uso, exceções e dados psicológicos que a
justificam. Alguns dos guidelines citados por Rocha e Baranauskas (2003) são falar a
língua do usuário, reduzir a carga cognitiva, criar para o erro e manter consistência.

2.2 Conceito de guidelines (geral e específico para IHC)

Guidelines são de, modo geral, orientações ou recomendações que devem ser
consideradas na elaboração e avaliação de um determinado projeto ou de uma tarefa.
São elaboradas seguindo o senso comum e na experiência em outros trabalhos,
principalmente. Traduzindo o termo, são diretrizes, ou seja, um conjunto de regras que
devem ser levadas em consideração no assunto que está sendo abordado.
No caso de IHC, guidelines auxiliam na elaboração do software, garantindo
uma boa usabilidade. O uso de guidelines deve ser aplicado como um conjunto de
princípios que norteiam o design. Neste caso, podemos dividir em três conceitos:
Princípios do design: são mais genéricas, exigem uma interpretação antes de
ser aplicada. Manter o site simples, por exemplo.
Regras de design: possuem um nível mais detalhado, como por exemplo não
oferecer uma opção de busca em toda a rede.
Guia de estilo: importante para manter o padrão visual definido previamente
pelo fabricante ou pelo programador, garantindo uma consistência entre os produtos
da mesma empresa.

2.3 Exemplos de Guidelines na área de TI: ANDROID

Os exemplos usados para guidelines na área de TI foram retirados do site para

desenvolvedor Android.
Guideline 1: Notificação de informações básicas.
<https://developer.android.com/guide/topics/ui>
Exemplo: A notificação de informações básicas aparece no momento em que seu app envia a
notificação e desaparece após alguns instantes, mas permanece visível na gaveta de
notificações, como de costume.

Figura 2. Uma notificação de informações básicas aparece na frente do app em primeiro

plano.
Justificativa: Esse comportamento se aplica a notificações importantes que o usuário precisa ver
imediatamente e só aparece se o dispositivo estiver desbloqueado.
Guideline 2: Tela de Bloqueio.
<https://developer.android.com/guide/topics/ui>
Exemplo: Os usuários podem usar as configurações do sistema para escolher o nível de detalhes
visíveis nas notificações da tela de bloqueio, incluindo a opção de desativar todas as
notificações dessa tela.

Figura 3. Notificações na tela de bloqueio com conteúdo sensível oculto.

Justificativa: Esse comportamento se aplica a notificações importantes que o usuário escolhe ativar ou
desativar na tela de bloqueio quando o celular está bloqueado. Geralmente informações
que eles dão preferência em visualizar imediatamente e de forma breve.

Guideline 3: Menu Popup.

<https://developer.android.com/guide/topics/ui>
Exemplo: O Menu Popup é um menu modal ancorado a uma View. Ele aparece sob a visualização
de âncora, se tiver espaço, ou sobre a visualização.

Figura 4. Um menu pop-up no app do Gmail, ancorado ao botão flutuante no canto

superior direito.
Justificativa: Fornecer um menu de estilo de estouro para ações que se relacionam com o conteúdo
específico; fornecer uma segunda parte de uma sentença de comando (como um botão
marcado como "Add" que produz um menu pop-up com opções diferentes de "Add") e,
fornecer uma lista suspensa semelhante a Spinner que não retenha uma seleção
persistente.
Guideline 4: Importância de uma Notificação.
<https://developer.android.com/guide/topics/ui>
Exemplo: O Android usa a importância de uma notificação para determinar o nível em que ela pode
interromper o usuário (visual e sonoramente).

Figura 5. Os usuários podem alterar a importância de cada canal no Android

Justificativa: Quanto mais importante, mais a notificação poderá causar interrupções.
Os possíveis níveis de importância são os seguintes:
Urgente: emite um som e aparece como uma notificação de informações básicas.
Alta: emite um som.
Média: sem som.
Baixa: sem som e não aparece na barra de status.

Guideline 5: Tema Escuro e Claro.

<https://developer.android.com/guide/topics/ui>
Exemplo: Essa opção se aplica para ajudar os usuários poderem escolher qual tema usar, mesmo
saindo de fábrica o modo claro padrão.

Figura 6. Os usuários podem alterar o tema de tela do Android.

Justificativa: Ajuda muito aos usuários terem uma experiência visual mais confortável
 2.4 Exemplos de Guidelines fora área de TI

Guideline 1: Filtro de Pesquisa.

Empresa: Submarino
Site: <https://www.submarino.com.br/>.
Exemplo: Filtro em barra lateral onde se seleciona as condições desejadas, como valor mínimo,
máximo, categoria, marca, tipo, etc.

Justificativa: Facilitar a busca por produtos que o usuário procura, permitindo uma personalização
flexível de seus critérios para o resultado da pesquisa, e estando em um espaço
estratégico lateralmente onde possui fácil acesso e localização sem atrapalhar a
visualização principal que seria os produtos retornados da busca e organizado de maneira
que cada elemento esteja separado de forma a facilitar a navegação pelo filtro

Guideline 2: Ícones intuitivos

Empresa: Submarino
Site: <https://www.submarino.com.br/>.
Exemplo: Ícone para acessar o carrinho compras, ícone para acessar os produtos favoritos, ícone
para logar na conta, etc.
Justificativa: Evitar a utilização de passagem de informação textual, utilizando a visual ao invés disso,
tornando a passagem de informação mais rápida e intuitiva devido os modelos mentais
que o cliente já tem previamente ao utilizar o site, ao ver o ícone de coração já entende-
se que se trata dos favoritos, sem ter de estar escrito, além de a informação ter sido
passada mais rapidamente, bastando olhar, também não cansa a vista evitando ler o
tempo todo, assim funciona para todos os ícones disponíveis no site.

Guideline 3: Sacola ou Carrinho.

Empresa: Magazine Luiza
Site: <https://www.magazineluiza.com.br/>
Exemplo:

Justificativa: O usuário pode selecionar diversos itens para a compra no site para então ir ao menu
chamado Sacola (em alguns sites este mesmo menu aparece com o nome de “Carrinho”)
que faz menção as compras em lojas físicas nas quais os clientes colocam suas compras
em sacolas e carrinhos para as levar, fato é que esse menu auxilia na finalização da
compra de diversos itens no mesmo site.

Guideline 4: Compras
Empresa: Mercado Livre
Site: <https://www.mercadolivre.com.br/ >
Exemplo:

Justificativa: Um menu interativo no qual o usuário pode acompanhar suas compras ainda em
trânsito e verificar todo o histórico de compras feitas no site com informações muito
úteis como: item comprado, preço pago, data, número de itens comprados, etc.
Guideline 5: Pesquisa por Voz
Empresa: Youtube
Site: <https://www.youtube.com/ >
Exemplo:

Justificativa: O ícone de um microfone junto a barra de pesquisa de um site geralmente estará ligado
a função “Pesquisa por Voz”, na qual ao clicar no ícone o dispositivo de entrada de som
captará os próximos sons e converterá em texto para efetuar a pesquisa.

3. Conclusão

O design de uma interface é muito importante para o usuário, pois os usuários

ficam mais confortáveis em interagir com interfaces que são fáceis de usar e entender
e façam com que eles consigam realizar suas tarefas com o mínimo de frustração.
A aparência de uma interface e o modo de navegação podem afetar uma
pessoa de várias formas. Por sua vez, se forem confusas e ineficientes, dificultarão
para as pessoas realizarem as tarefas que gostariam, ou dependendo da aplicação,
dificultará que as pessoas façam seus trabalhos ou cometam erros. Interfaces mal
projetadas podem fazer com que pessoas se afastem do sistema permanentemente,
fiquem frustradas e podem aumentar o nível de stress.
Para a importância de um bom design pode ser demonstrada de uma maneira
interessante se tratando em termos financeiros. Para as empresas, boas interfaces,
no contexto deste trabalho corresponde a presença das recomendações de
usabilidade, podem trazer benefícios como satisfação do trabalhador e maior
produtividade.
Economicamente, isso pode trazer benefícios como custos mais baixos,
levando em conta que sistemas mais fáceis de usar requerem menos treinamento.
Daí a importância de serem definidas as guidelines de uma empresa, pois
somente assim a interação com o usuário pode ser tratada na sua real importância
dentro dos objetivos da empresa.
4. Referências

ROCHA, Heloisa Vieira da; BARANAUSKAS, Maria Cecília C. Design e Avaliação de

Interfaces Humano-Computador. Campinas, SP:NIED/CAMPINAS, 2003.p. 122 - 124.

SHNEIDERMAN, B.; PLAISANT, C. Designing the User Interface: Strategies for

Effective Human-Computer Interaction, 4/E, Addison-Wesley, 2005.

ANDROID. IU e navegação. Disponível em:

<https://developer.android.com/guide/topics/ui>. Acesso em: 27 de agosto de 2021.