Disciplina: TCC em Sistemas da Informação

Aula 3: Projeto de interfaces

Apresentação

Nesta aula, vamos definir o modelo de interação mais adequado ao seu sistema. O modelo de interação revela como se dará
a troca entre o usuário e o sistema, para que o usuário possa realizar suas tarefas. Estamos falando, então, da interface do
sistema.

Dessa forma, precisamos considerar tanto as habilidades dos usuários em lidar com tecnologias quanto com o que as
tarefas demandam. Ao definir o modelo de interação, será necessário a construção do diagrama geral de navegação do
sistema, o layout e funcionamento dos principais elementos de cada janela (tela ou formulário) necessária ao sistema, para a
concretização de seus objetivos.

O projeto de interface define como cada interação se dará e assim usaremos os diagramas de sequência e as especificações
de casos de uso (onde podem haver detalhes que orientem a definição da interação e layout da interface).

Objetivos

Reconhecer a importância da interface e do modelo de interação do sistema;

Construir o diagrama de estados de navegação;

Definir o layout e os elementos de cada janela e de cada saída do sistema.

Importância da interface
A interface é composta por elementos de software e hardware.

O software da interface implementa os processos computacionais para.

1. Controle dos objetivos do hardware

2. Apresentação dos objetos da interface que possibilitem

2.1. A ação do usuário

2.2. Geração de informações aos usuários

2.3. Interpretação dos comandos do usuário

De uma forma geral, uma interface interliga dois

sistemas: homem e computador.

A interface é o meio e o processo de

comunicação entre o usuário e sistema.
Segundo Baranauskas e Rocha (2003), para o
usuário, a interface é o próprio software.

Cabe contextualizar que o usuário utiliza o

sistema para realizar as suas tarefas, e a
interface deve representar uma adequada
interação, suportando os elementos corretos
para que essas tarefas sejam realizadas com
eficiência.

Sendo assim, uma interface é de extrema

relevância a um software, dada a sua
capacidade de fazer o usuário se envolver ou
abandonar o uso do sistema.
Dica

Comparando dois sistemas com as mesmas funcionalidades e custos semelhantes, a interface pode fazer a diferença na hora da
aquisição. O sistema que apresentar a interface mais eficiente, vai cair “nas graças do usuário”.

Ou seja, a interface é um fator relevante para a escolha de um software, podendo ser, inclusive, determinante na sua aquisição.

Usabilidade da interface
Um termo que ganhou destaque quando se fala em qualidade de uma interface chama-se usabilidade, que abrange a maneira
pela qual o usuário se comunica com o sistema e como a tecnologia suporta a interação com o usuário, considerando as
seguintes habilidades, de acordo com a norma ISO 9241:

1 2

Facilidade de aprendizado Facilidade de memorização

A utilização da interface deve demandar pouco treinamento e Mesmo que fique algum tempo sem usar o sistema, o usuário
ser fácil de aprender a usar. sempre deve lembrar-se de como usar a sua interface.

Maximização da produtividade
A interface deve permitir que o usuário realize a tarefa de
forma rápida e eficiente.
 4 5

Minimização da taxa de erro Maximizar a satisfação do usuário

Caso aconteçam erros no sistema, a interface deve avisar o O usuário deve ficar, subjetivamente, satisfeito com o uso do
usuário e permitir a correção de modo fácil. sistema, sentindo-se seguro e confiante.

Dica

Os conceitos de usabilidade se aplicam a qualquer tipo de projeto de interface e ganham contornos de destaque pela criticidade
do projeto.

Assim, quanto mais crítico for o sistema, maiores serão as perdas e problemas, caso a interface tenha baixa usabilidade e não
propicie satisfação (no uso) a seus usuários.

Design responsivo

Trata-se da técnica que promove a adaptação de um mesmo conteúdo para qualquer navegador e dispositivo, zelando pela
qualidade da interação, independentemente do dispositivo.

Em outras palavras, é a adequação do layout de uma mesma página a diferentes telas, dos diferentes dispositivos, sem prejudicar
o acesso a todas as informações.

Estratégia em projeto de interfaces

Um projeto de interface deve considerar:
 1 2

O tipo de sistema O tipo de dispositivo a ser usado

Por exemplo, se exige respostas muito rápidas. Como desktop, tablet, smartphone e outros.

3 4

As habilidades dos usuários As tarefas dos usuários que o sistema vai

Em lidar com dispositivos computacionais e sistemas. automatizar
E as interações necessárias.

Um projeto de interfaces deve zelar pela usabilidade da interface. Caso haja

necessidade do sistema operar em diferentes dispositivos móveis, o design
responsivo deve ser o caminho.

Tipo de sistema
Veja algumas diferenças entre os sistemas:

1. Funcionam online, pela internet.

2. Prezam pela velocidade de cálculo, dado o grande volume de dados a serem processados.

3. Demandam uma interface diferenciada.

4. Operam determinados equipamentos (como elevadores, catracas, garagens) e não necessitam de tanta interação humana.

5. Operam sob sensores (IoT, Internet das coisas) oferecendo serviços diferenciados.

Notamos, assim, que nem todo sistema demanda a mesma necessidade de interação humana.

Quanto mais interação humana um sistema demandar, mais bem elaborada precisa ser a
interface e precisa também estar bem alinhada ao cognitivo do usuário.

Outro aspecto a ser considerado é o tipo de interface que se vai projetar:

 1 2

Site Aplicativo mobile

3 4

Aplicativo desktop Aplicativo para um wearable (Apple Watch, Android Wear)

Aplicativo que rode no servidor

Tipo de dispositivo
Os dispositivos computacionais hoje têm diferentes tamanhos e resoluções. A densidade de elementos em uma janela varia entre
esses dispositivos, que vão desde TVs com resolução 4K de 70” até telas de 5” de smartphones.

Quanto menor o tamanho da tela, maior será a dificuldade de interação. Portanto, devemos,
por exemplo, minimizar os cliques.

Assim sendo, alguns cuidados com as telas de

menores dimensões se fazem necessários no
projeto da interface de um aplicativo móvel:
 Menos cliques;

Menos uso de scroll;

Carregamento rápido da tela.

Veja algumas diretrizes para projetos mobile:


Navegação clara

Menu relevante
Com funcionalidades para completar as tarefas prioritárias Sempre a vista, com lista mais curtas e outras mais lentas.
(funcionalidade primárias). Foco na tarefa e na lógica.


Navegação lateral
Para a próxima tela.


Rápido cadastro do usuário

Destaque na opção e critérios de busca
Lembrando que os primeiros resultados da busca devem ser
os mais relevantes.
As habilidades dos usuários com tecnologias
Quanto mais experiência e expertise em interação possuir um usuário, mais facilmente ele vai interagir e adaptar-se à interface.

Lembre-se de que esse usuário precisa já estar familiarizado com os dispositivos de entrada (mouse e teclado) e saída (monitor,
impressora a etc.) para melhor performance em suas tarefas automatizadas.

Clique nos botões para ver as informações.

Questionário 

Para identificarmos o perfil dos usuários, em relação a sua expertise de interação com a interface dos sistemas
computacionais, estabelecemos um questionário e o aplicamos eletronicamente aos diferentes usuários, oportunamente,
quando da realização do levantamento dos requisitos ou antes de iniciar o projeto da interface.

O questionário deve conter questões que evidenciem a proficiência do usuário com os dispositivos de mouse, teclado e com
os elementos de uma interface moderna.

Lembre-se de que a interface deve adequar-se ao perfil do usuário.

As tarefas que o sistema vai automatizar

As tarefas dos usuários que serão automatizadas representam as funcionalidades do sistema.

Assim sendo, é preciso tanto conhecê-las quanto saber como elas devem ser realizadas, para poder projetar a interface
adequadamente, de forma que o usuário não perca tempo e tenha janelas que ajudem na realização das tarefas.

Deve-se alinhar:

Especificação do caso de uso associado à tarefa do usuário; e

O diagrama de sequência, que conta a mesma história descrita na especificação do caso de uso, porém apontando as
classes envolvidas.

Por meio desses dois documentos, podemos identificar os dados de entrada e saída de cada
interface.

Diagramas do projeto de interfaces

Para o seu projeto de TCC, você deve especificar e modelar:
 Clique nos botões para ver as informações.
Diagrama de Estados de Navegação 

Indica as janelas do sistema e as possibilidades de navegação entre elas. Cada evento que acarreta transição será
associado a um controle (como um botão, um item de menu etc.) na janela de origem da transição.

Projeto gráfico (layout) das janelas 

Exibe seus elementos, associando os elementos de controle aos eventos de navegação, operações do sistema, consultas e
operações de controle de transação.

Atenção

É importante, ao projetar as janelas e a navegação entre elas, que você considere a comunicação que deseja realizar com usuário,
em função de sua expertise com uso de sistemas, as tecnologias envolvidas e ainda as características da tarefa.

Veja um exemplo <galeria/aula3/docs/uso_adequado_elementos_interface.pdf> de como o uso adequado de elementos da

interface altera a forma de comunicação com o usuário, através do software.

Diagrama de estados de navegação

Chegou o momento de pensar nos detalhes das janelas do sistema de seu TCC.

O primeiro passo é construir o diagrama de estados de navegação.

A base para a construção desse diagrama tem os seguintes documentos:

1. Diagrama de casos de uso, onde minimamente, para cada caso de uso, teremos ao menos uma janela (tela).

2. Especificações de casos de uso.

3. Diagrama de sequência.

Exemplo

Veja o exemplo de sistema de controle de empréstimo e devolução de exemplares de livros de uma biblioteca universitária
<galeria/aula3/docs/sistema_controle_emprestimo_devolucao_exemplares_livros_biblioteca_universitaria.pdf> .

Layout das janelas do sistema

Cada janela constante de seu diagrama de navegação precisa ter seu layout especificado, associando a seus elementos o acesso
à(s) funcionalidade(s) na respectiva janela.

Veja agora como especificar detalhes dos elementos da interface da tela de login:
Saiba mais

A tabela a seguir mostra Como especificar cada elemento da janela

<galeria/aula3/docs/como_especificar_cada_elemento_da_janela.pdf> .

A janela cadastro, para cadastramento de um novo usuário, é apresentada a seguir:

Saiba mais

Veja o Detalhamento do layout da janela. <galeria/aula3/docs/detalhamento_layout_janela.pdf> .

Abaixo, veja uma janela de login projetada para um dispositivo de celular.

Saiba mais

A tabela a seguir mostra Como especificar cada elemento da janela – login celular
<galeria/aula3/docs/como_especificar_cada_elemento_da_janela_login_celular.pdf> .

Veja mais um exemplo de definição de layout da tela abaixo de manutenção (inclusão, alteração e exclusão) de clientes.

Saiba mais

A tabela a seguir mostra Cadastro de clientes <galeria/aula3/docs/cadastro_clientes.pdf> .

Projeto de saídas do sistema
A última atividade pertinente ao projeto de interface é definir cada saída do sistema, com seu respectivo layout e elementos. As
saídas são representadas pelas consultas e/ou relatórios impressos.

Muito provavelmente as consultas e relatórios, como funcionalidade do sistema, devem estar representados por casos de uso
específicos.

Assim sendo, para elaboração dessa atividade, devemos avaliar os seguintes documentos:

1. Diagrama de casos de uso.

2. Especificação de cada caso de uso de interesse (que demanda uma saída).

3. Diagrama de sequência ou colaboração correspondente ao cenário de uso de geração da consulta/relatório.

Para cada saída (consulta ou relatório impresso), deve-se especificar o seu layout, com cada dado.

Para cada centro de custo, apresentar:

1 2

Descrição do material Código do material

3 4

Quantidade Valor unitário

Valor total
 Data: 20/10/2018 | Relatório de Entrada e Saídas de Materiais | Página: 01

Centro de Custo: Almoxarifado

Descrição Material Código Material Quantidade Valor Unitário Valor Total

As Brumas de Avallon EXP0020 7 87,90 615,30

O Destino de Poseidon EXP0092 12 67,90 814,80

A volta dos que não foram EXP0938 19 56,90 1.081,10

Um homem uma mulher uma criança EXP1093 13 89,90 115,70

Uma noite de Verão EXP1293 34 45,00 1.530,00

Estrutura de dados e algoritmos em C# EXP1093 12 14,67 176,04

Brasil nunca mais EXP9383 19 12,90 245,10

O amor nos tempos do cólera EXP4949 32 83,90 2.684,00

Total (Valor): 6.180,94

Exemplo completo
Vamos mostrar como consultar e integrar os documentos citados, na construção do projeto de entradas (janelas) e saídas
(consultas e relatórios).

Vamos supor um sistema de controle de uma biblioteca universitária, tendo como usuários alunos e professores.

Diagrama de casos de uso

Atente que o leitor (ator) interage diretamente com o sistema, em totem com computador instalado na biblioteca.

Foco
Emprestar exemplar. Veja a especificação de caso de uso a seguir:
Caso de uso: Emprestar exemplar
Ator: Leitor
CENÁRIO PRINCIPAL
1. Leitor informa sua identificação (matrícula);

2. Sistema localiza leitor;

3. Sistema localiza pendências de empréstimos anteriores;

4. Sistema mostra nome e situação do leitor;

5. Sistema inicializa empréstimo;

6. Para cada exemplar a ser emprestado FAÇA:

6.1. Leitor informa código do exemplar;

6.2. Sistema localiza exemplar;

6.3. Sistema calcula a data de devolução do exemplar;

6.4. Sistema mostra nome e código do exemplar e data de devolução;

6.5. Leitor confirma empréstimo do exemplar;

6.6. Sistema registra empréstimo do exemplar;

7. Leitor confirma empréstimo;

8. Sistema registra empréstimo;

9. Sistema emite nota de empréstimo.

CENÁRIOS ALTERNATIVOS
2.a) Leitor não localizado;

2.a.1) Sistema informa “Leitor não localizado. Entre novamente”;

2.a.2) Sistema retorna ao passo 1 do cenário principal;

3.a) Leitor com pendências de empréstimos anteriores;

3.a.1) Sistema informa “O leitor deve devolver exemplares pendentes. Não emprestar”;

3.a.2) Sistema encerra o caso de uso;

5.2.a) Exemplar não registrado;

5.2.a.1) Sistema informa “Código de exemplar não localizado”;

5.2.a.2) Sistema retorna ao passo 5.1 do cenário principal;

5.5.a) Cancelar exemplar não emprestado;

5.5.a.1) Sistema retira dados do exemplar da lista de empréstimos;

5.5.a.2) Sistema retorna ao passo 5.1 do cenário principal;

6.a) Empréstimo não confirmado;

 6.a.1) Sistema informa “empréstimo não confirmado”;

6.a.2) Sistema encerra caso de uso.

Agora, vamos construir um diagrama de sequência para o cenário principal do caso de uso “emprestar exemplar”.
O cenário de uso aponta o uso de uma janela (Empréstimo) que precisa ser projetada.

Dica

Para elaboração do layout acima, usamos o aplicativo Free Balsamic Mockups3 <https://balsamiq.com/download/> .

Veja um exemplo de Empréstimo de exemplar <galeria/aula3/docs/emprestimo_exemplar.pdf> .

Outras mensagens
Além da janela “Empréstimo”, os cenários alternativos apontam para um conjunto de mensagens diferentes, que precisam ser
enviadas ao usuário.

Essas janelas precisam ser especificadas, mas de forma padronizada, variando apenas a mensagem. Portanto, projete uma janela
modal, que exiba mensagens aos usuários.
O cenário de uso aponta a necessidade de projetar uma saída. Veja a “Nota de Empréstimo” abaixo:

Empréstimo número 0001 de 30/10/2018

Leitor: MAT039402 - Joaqui José da Silva Xavier

Exemplar Cod Data Devolução

As Brumas de Avallon EXP0020 13/11/2018

O Destino de Poseidon EXP0092 14/11/2018

A volta dos que não foram EXP0938 13/11/2018

Um homem uma mulher uma criança EXP1093 14/11/2018

Uma noite de Verão EXP1293 14/11/2018

Estrutura de dados e algoritmos em C# EXP1093 14/11/2018

Brasil nunca mais EXP9383 14/11/2018

Atividade
1. Avalie cada assertiva referente aos conceitos e à importância da interface para o projeto do software:

I. A interface não tem interferência na qualidade do software, que depende exclusivamente da qualidade e eficiência dos
algoritmos;

II. A interface pode ser preponderante para a escolha de softwares com funcionalidades equivalentes, pois, para o usuário, a
interface é o próprio software;

III. A usabilidade demanda: a interface deve falar a linguagem de seus usuários;

IV. A expertise dos usuários no manejo com software e tecnologias afins pouco interfere no modelo da interação.

Assinale a opção com as assertivas CORRETAS:

a) I, II, III e IV
b) II e III apenas
c) III apenas
d) II apenas
e) II, III e IV apenas

2. Avalie as duas assertivas a seguir, sobre diagrama de navegação de estados aplicado ao contexto de projetos de interface:

I. O projeto de interfaces exige que usemos o diagrama de estados de navegação para uma visão geral das janelas do sistema.

PORQUE

II. O diagrama de estados de navegação exibe as janelas do sistema e a navegação possível entre elas.

Avalie a relação de causa e efeito entre as assertivas I e II e marque a opção CORRETA:

a) As 2 assertivas são verdadeiras e a assertiva II justifica a assertiva I.

b) As 2 assertivas são falsas.
c) A assertiva I é verdadeira e a assertiva II é falsa.
d) A assertiva I é false e a assertiva II é verdadeira.
e) As 2 assertivas são verdadeiras e a assertiva II não justifica a assertiva I.

3. No detalhamento do layout de uma janela do sistema, NÃO deve constar:

a) Informação de como cada elemento da janela é inicializado.

b) Especificação das ações a serem dispararas ao clicar em cada botão.
c) Tamanho e obrigatoriedade de preenchimento de cada campo.
d) Eventual máscara de preenchimento dos campos de edição.
e) Linha de código em linguagem de programação para o comportamento de cada elemento da janela.
4. Por que devemos especificar o layout das saídas do sistema?
Referências

BARANAUSKAS, Cecília; ROCHA, Heloísa. Design e avaliação de interfaces humano-computador. Campinas: NIED/UNICAMP,
2003.

BEZERRA, Eduardo. Princípios de Análise e Projeto de Sistemas com UML. 3. Ed. Rio de Janeiro: Elsevier, 2015.

CYBIS, W.; BETIOL, A. H.; FAUST, R. Ergonomia e Usabilidade: Conhecimentos, Métodos e Aplicações. São Paulo: Novatec
Editora, 2007.

MORAN, T. “The Command Language Grammars: a representation for the user interface of interactive computer systems”.
International Journal of Man-Machine Studies, 15, 3-50, 1981.

Próxima aula

Relevância do diagrama de estados;

Elementos e construção do diagrama de estados;

Diagrama de estados para as classes necessárias, em seu sistema.

Explore mais

Leia os textos:

Introdução à IHC <https://irlabr.wordpress.com/apostila-de-ihc/parte-1-ihc-na-pratica/introducao-a-interacao-entre-homem-

e-computador-ihc/> ;

10 regras de usabilidade para melhorar sua interface <//catarinasdesign.com.br/10-regras-de-usabilidade-para-melhorar-sua-

interface/> ;

ISO 9241 <https://en.wikipedia.org/wiki/ISO_9241> ;

Padrões de Projeto de Interfaces de Usuário <https://sites.google.com/a/liesenberg.biz/interfaces/Home/padroes-de-

projeto-de-interfaces-de-usuario> ;

Os Princípios de UX para Aplicativos em Dispositivos Móveis <//storage.googleapis.com/think/intl/ALL_br/docs/mobile-app-

ux-principles_articles.pdf> .