UNIVERSIDADE FEDERAL DE SANTA CATARINA

INE5624 – Engenharia de Usabilidade

Prof. Dr. rer. nat. Christiane Gresse Von Wangenheim, PMP

Projeto de Interface

App: Sistema de Assinatura Digital de Documentos (SADD)

Equipe: Artur Antonio Dal Prá (13204558),

Bruno Heiden Matos (13200990),
Karla Aparecida Justen (15100746)

Data: 15/06/2018

Resumo

O aplicativo proposto chamado de Sistema de Assinatura Digital de Documentos

(SADD) é um sistema de envio e recebimentos de documentos para assinatura
para resolver qualquer processo burocrático. Com o aplicativo o usuário poderá
solicitar a assinatura de um documento; aceitar a solicitação de uma assinatura
num documento; e rejeitar a solicitação de uma assinatura num documento.
Finalmente, criaram-se protótipos de ​design de interface que direcionaram a
elaboração do modelo de alta fidelidade. Em seguida, realizados os testes de
usabilidade, o protótipo foi revisto e elaborou-se a documentação.

Sumário

Abreviações e siglas 2

1. Análise 2

2. Síntese 3
2.1 Objetivo da tarefa escolhida 3
2.2 Sketches e sequência de navegação 3
2.2.1 Alternativa 1 3
2.2.2 Alternativa 2 5
2.2.3 Alternativa 3 6
2.3 Protótipos de baixa fidelidade 7
2.3.1 Protótipos de baixa fidelidade/wireframes (v1.0) 7
2.3.2 Avaliação dos protótipos de baixa fidelidade/wireframes 8
2.3.2.1 Processo da avaliação 8
2.3.2.2 Resultados da avaliação 9
2.4 Design gráfico e Protótipos de alta fidelidade 9
 2.4.1 Design gráfico 9
2.4.2 Protótipos de alta fidelidade 9

3. Síntese e Avaliação do projeto de interface 12

3.1 Definição da avaliação 12
3.1.1 Objetivo da avaliação 12
3.1.2 Perguntas de pesquisa da avaliação 12
3.1.3 Material da avaliação 13
3.2 Execução da avaliação 13
3.3 Resultados da avaliação 14

Referências bibliográficas 17

Anexo A 18

Anexo B 20

Abreviações e siglas
APP - ​Application​ (aplicativo, em específico para celulares)
SADD - Sistema de Assinatura Digital de Documentos
SUS - ​System ​Usability ​Scale (Questionário para medir satisfação de usuários
quanto à usabilidade)

1. Análise

Este trabalho seguiu alinhado ao que foi desenvolvido na etapa A2, não havendo
modificações de conteúdo. Demais considerações relevantes são destacadas no
andamento deste trabalho.

Tem-se por objetivo a criação de protótipos de interface do aplicativo proposto,

partindo dos resultados da análise anterior (etapa A2). Um último objetivo é a
realização e documentação do teste de usabilidade.

O grupo partiu do entendimento que a principal tarefa é a criação da solicitação.

Por uma questão de simplicidade, notadamente em razão da principal tarefa
representar a maioria das atividades do aplicativo, os ​sketches ​e ​wireframes
tratados adiante consideraram todas as telas do aplicativo.

Em seguida, elaboraram-se perguntas para as entrevistas que, em conjunto com o

questionário SUS, validarão os resultados. Os entrevistados foram submetidos a
um termo de consentimento.
2. Síntese

2.1 Objetivo da tarefa escolhida

A tarefa escolhida foi a criação da solicitação. Esta tarefa precede a etapa das
assinaturas. Para tanto, desenvolveram-se mapas de telas, ​sketches e um
wireframe​, conforme será demonstrado a seguir.

2.2 Sketches e sequência de navegação

Nesta seção serão apresentadas três alternativas de protótipos de interfaces

em desenho (​sketches​) elaboradas pela equipe.

2.2.1 Alternativa 1

Esta alternativa (Figura 1) seguiu a ótica da criação da atividade, seguida das

opções de:

a) realizar o upload de um documento, obter um código que tem sua

finalidade de possibilitar a ação dos outros responsáveis pela assinatura e
assinar;

b) analisar um documento, então através de um código que foi recebido,

poderá visualizar o documento e posteriormente aceitar (ou não), tendo a
opção de justificar sua atitude.

O mapa de telas da figura abaixo representa este ​sketch​.

 Figura 1 - ​Sketch ​(baixa fidelidade) da alternativa 1

Figura 2 - Mapa de telas da alternativa 1

A partir deste ​sketch​, pode ser estabelecida uma sequência de atividades que o
usuário precisará realizar, conforme a figura abaixo.
 Figura 3 - Sequência de atividades (Sketch 1)

2.2.2 Alternativa 2

A segunda alternativa (Figuras 4 e 5) priorizou a interação entre o usuário e o

aplicativo, então haveria um espaço destinado exclusivamente ao
gerenciamento das diversas solicitações, dando a opção ao usuário ter um
histórico e controle dos documentos já recebidos.

Figura 4 - ​Sketch ​(baixa fidelidade) da alternativa 2

 Figura 5 - ​Sketch ​(baixa fidelidade) da alternativa 2

2.2.3 Alternativa 3

A alternativa 3 (Figura 6) tem semelhanças com a alternativa 2, onde o enfoque

se dá em abranger o conjunto das atividades, desde a fase de controle dos
documentos, anexar e elaborar a mensagem, finalizando com a opção de
assinar (ou não) o documento. Nota-se um mapa de telas coeso e bem
estruturado (Figura 7).

Figura 6 - ​Sketch ​(baixa fidelidade) da alternativa 3

Este foi escolhido pelo grupo como o melhor ​sketch​, e dele pode-se observar um
mapa de tela com todas as tarefas, que segue exposto (Figura 7). O grupo teve
o entendimento que esta alternativa traz menores dificuldades ao usuário para o
manuseio do aplicativo.

Figura 7 - Mapa de telas com todas as tarefas

Deste mapa de telas que possui todas as tarefas do APP, segue adiante a
porção referente à tarefa escolhida, disposta na Figura 8.

Figura 8 - Mapa de telas da tarefa escolhida (criação da solicitação)

2.3 Protótipos de baixa fidelidade

2.3.1 Protótipos de baixa fidelidade/​wireframes​ (v1.0)

A partir do ​sketch escolhido, um ​wireframe ​foi desenvolvido (Figura 9) como

parte do processo de evolução da interface, este é caracterizado por utilização
de uma ferramenta para criar a principal estrutura gráfica ou esqueleto das telas
do aplicativo com botões, pop-ups de mensagens e delimitações de
componentes.
 Figura 9 - ​Wireframe

2.3.2 Avaliação dos protótipos de baixa fidelidade/​wireframes

2.3.2.1 Processo da avaliação
 Os protótipos foram avaliados quanto à possibilidade de melhor
atendimento ao usuário através de um percurso cognitivo.

2.3.2.2 Resultados da avaliação

As três alternativas foram comparadas entre si e obteve-se como

resultado que o melhor ​sketch é aquele da alternativa 3, em razão
de apresentar um mapa de telas que conduz a menores
dificuldades ao usuário para o manuseio do aplicativo.

2.4 Design gráfico e Protótipos de alta fidelidade

2.4.1 Design gráfico

O design gráfico seguiu as orientações ministradas nas aulas da
disciplina de Engenharia de Usabilidade, o uso do ​software online
draw.io ​favoreceu a estilização por já trazer um conteúdo relevante
padrão ​Android ​para a formatação das telas.

2.4.2 Protótipos de alta fidelidade

Baseada na terceira alternativa, foi criado o protótipo de tela de

alta fidelidade (Figura 10).
O visual intuitivo funciona como um passo a passo e dispensa
treinamento, então um usuário iniciante pode facilmente entender a
utilização do ​app ​e perfeitamente desempenhar o manuseio.
 Figura 10 - Primeira versão protótipo de alta fidelidade

Com o protótipo pronto, o grupo realizou a avaliação de percurso cognitivo,

houve a evolução do protótipo para um protótipo final, eleito pelo grupo.

No percurso cognitivo notou-se a possibilidade dos usuários na tela do

documento aberto clicar primeiro no local de interesse em assinar antes de
selecionar o botão “assinatura” ou “rubrica”. Por causa dessa situação, foi criada
uma nova tela (Figura 11) que possibilita escolher entre “assinatura” ou “rubrica”.

Figura 11 - Nova tela adicionada

Destacam-se por pontos fortes o uso direcionado ao objetivo, então o usuário

visualiza a tela e possui clareza quanto ao que precisa fazer. As telas conduzem
a um passo a passo, então o usuário tem uma noção da evolução das
atividades.

Não foram encontradas fragilidades ou pontos fracos no modelo final proposto

(Figura 12), em razão do modelo ser projetado para suprir as dificuldades
encontradas nos modelos iniciais.
 Figura 12 - Versão final do protótipo de alta fidelidade

3. Síntese e Avaliação do projeto de interface

Esta síntese parte dos resultados obtidos na etapa A2 do projeto. Assim, as três
prototipagens adicionais conduziram a um protótipo de design de interface
referente a tarefa escolhida: a tarefa de nova solicitação.

3.1 Definição da avaliação

3.1.1 Objetivo da avaliação

A avaliação tem como objetivo testar a interface do aplicativo com os
usuários-alvo para que sejam identificadas possíveis inconsistências na interface
que venham a influenciar negativamente na execução do fluxo da tarefa de
solicitar uma nova assinatura.

3.1.2 Perguntas de pesquisa da avaliação

Para a avaliação do teste, foram selecionadas 3 métricas e,
posteriormente, uma questão para se avaliar cada uma delas conforme as metas
estabelecidas:

● Eficácia: Qual a porcentagem de usuários que conseguiram

realizar a tarefa?
○ Meta: No mínimo 65% dos usuários precisam conseguir
realizar a tarefa proposta.
 ● Eficiência: Qual o tempo médio que os usuários levaram para
executar a tarefa?
○ Meta: O tempo para se completar a tarefa não deve ser de,
no máximo, 8 minutos.

● Satisfação: Qual a média de pontos obtidos na aplicação do

questionário SUS?
○ Meta: Atingir, no mínimo, 70 pontos no SUS para uma
satisfação considerada aceitável.

3.1.3 Material da avaliação

A equipe elaborou uma documentação (​Anexo A​) para realizar a
avaliação, este é constituído por: um texto introdutório; a apresentação de uma
tarefa representando o requisito selecionado em que os participantes iriam
navegar pelo protótipo de interface materializado em telas estáticas do aplicativo
impressas em papel; um termo de consentimento explicando as questões éticas
incluindo a permissão da utilização de uma imagem para comprovar a realização
do teste e o questionário SUS para que pudesse ser mensurada a satisfação
dos usuários.

3.2 Execução da avaliação

Na fase de planejamento do teste de usabilidade, foram selecionados 3 potenciais

usuários do aplicativo para realizarem a simulação: uma aposentada, um cientista e
um gerente de mercado.

Cada um dos participantes alocou um tempo de sua rotina para realizar o teste, o
qual ocorreu em uma sala particular para maior facilidade dos mesmos.
Para a execução do teste de usabilidade, um dos integrantes da equipe atuou como
moderador, este foi responsável por apresentar o contexto do aplicativo, a tarefa a
ser desempenhada, o termo de consentimento e cronometrar o tempo que cada um
dos participantes levou para executar a tarefa navegando através das interfaces do
sistema.

O fluxo do desenvolvimento do teste começou pela apresentação do contexto e da

tarefa, seguido da leitura e assinatura do termo de consentimento dando margem
para o início do teste com as telas do aplicativo impressas em papel no qual os
usuários navegaram entre as telas com o auxílio do moderador, todo o percurso foi
cronometrado para posterior avaliação e por fim, os participantes preencheram o
questionário de satisfação SUS referente ao aplicativo.
 Figuras 13 - Imagens capturadas durante a execução da simulação de teste.

3.3 Resultados da avaliação

Os seguintes resultados foram obtidos no teste de usabilidade conforme a

documentação desenvolvida para a coleta de dados apresentada na seção 3.1:

Usuário 1:
Conseguiu realizar a tarefa? Sim.
Tempo estimado para uso: 3 minutos e 40 segundos.
Pontuação SUS: 100%.

Usuário 2:
Conseguiu realizar a tarefa? Sim.
Tempo estimado para uso: 7 minutos e 57 segundos.
Pontuação SUS: 95%.

Usuário 3:
Conseguiu realizar a tarefa? Sim.
Tempo estimado para uso: 4 minutos e 26 segundos.
Pontuação SUS: 95%.
 ● Qual a porcentagem de usuários que conseguiram realizar a
tarefa?

Do ponto de vista do moderador, integrante da equipe que acompanhou e gerenciou

o processo de simulação de teste do aplicativo, a eficácia foi excelente, pois 100%
dos participantes conseguiram realizar a tarefa proposta.

A média do tempo gasto pelos participantes para a execução da tarefa proposta foi
de 5 minutos e 35 segundos, valor considerado adequado visto que o limite máximo
pré-estabelecido para se completar a tarefa era de 8 minutos.

No quesito de satisfação, o aplicativo foi considerado extremamente satisfatório,

uma vez que o valor médio da pontuação SUS foi de 96,7% ultrapassando os 70%
previamente definido como valor mínimo a ser considerado aceitável.

O processo de marcação do local do documento e a marcação de quem se quer a

assinatura (Figura 14), demonstrou ser intuitivo aos usuários caracterizando
importantes pontos fortes resultantes de uma preocupação com a criação de uma
interface que fosse extremamente intuitiva para os usuários.

Figura 14 - Telas de adição de componentes de assinaturas e rubricas à documentos

Como ponto negativo cita-se a dificuldade em que os três entrevistados tiveram em

reconhecer o botão redondo com o símbolo de "lápis" na tela inicial (Figura 15)
como sendo o botão a ser pressionado para se criar uma solicitação.
 Figura 15 - Tela da caixa de entrada das solicitações de assinatura

Como melhoria para o aplicativo é válido ressaltar a alteração da aparência do

botão de criação de solicitações para um botão com o rótulo "Criar".

O anexo B da NBR 9.241-11 / 2002 traz medidas de usabilidade em termos de

usabilidade global, foram escolhidas medidas de eficácia (% de usuários
completando a tarefa com sucesso, porcentagem de objetivos alcançados), e
eficiência (tempo para completar uma tarefa, tarefa completadas por unidade de
tempo), e medidas de satisfação (escala de satisfação).

Não houve custo monetário para a realização das tarefas, os participantes o fizeram
de maneira gratuita.

Quanto à carga de trabalho, que é citada no anexo B.5.2.1 da NBR 9.241-11 / 2002,
é válido ressaltar que as tarefas que o usuário foi submetido são poucas tarefas e
são curtas, sendo oportuno ressaltar que não houve tédio ou falta de vigilância, de
maneira que seus efeitos sobre a obtenção dos dados podem ser ignorados.

Caso este fosse um produto comercial, a equipe envolvida na especificação dos

requisitos de usabilidade envolveria outros profissionais, tais como um especialista
em marketing, um gerente de produto, um analista de sistemas e até um
especialista em ergonomia.
Referências bibliográficas

ASSOCIAÇÃO BRASILEIRA DE NORMAS TÉCNICAS. ​NBR 9.241-11​: Requisitos

Ergonômicos para Trabalho de Escritórios com Computadores - parte 11:
Orientações sobre Usabilidade. Rio de Janeiro, 2002.

GRESSE, C. A. v W. ​Engenharia de Usabilidade​. Slides da disciplina, Curso de

Graduação em Sistemas de Informação. Universidade Federal de Santa Catarina,
2018. Disponível em <https://moodle.ufsc.br/pluginfile.php/2358602/mod_resource
/content/9/INE5624-Aula6-Analise2018-1.pdf> Acesso em jun.18.

OLIVEIRA, R. ​Proposta de um questionário pós-teste para medir usabilidade de

aplicativos de celulares ​touchscreen​. ​2013. 122 p. Trabalho de Conclusão de
Curso (Graduação) - Universidade Federal de Santa Catarina, Florianópolis (SC),
2013. Disponível em <www.gqs.ufsc.br/wp-content/uploads/2011/11/TCC-Rafael-
Oliveira-Final.pdf> Acesso em jun.18.
Anexo A
Documentação desenvolvida para o teste de usabilidade​:

Olá participante.
Eu estou trabalhando no projeto Sistema de Assinatura Digital de Documentos (SADD).
Este projeto visa desenvolver um novo sistema de sistema de envio e recebimentos de
documentos para assinatura digital. Estamos realizando este teste para analisar a
experiência do uso do protótipo do sistema. O objetivo é testar a interface do sistema e não
você. Se você tiver dificuldades em usar o sistema, provavelmente outras pessoas também
terão, assim é importante identificar questões que precisam ser melhoradas. Então é
importante deixar claro que não é você que está sendo avaliado, mas sim o design do
nosso projeto. Se você se sentir desconfortável, você pode parar em qualquer momento
durante o teste. Uma foto será tirada durante o teste para fins acadêmicos. Você tem
alguma dúvida?

Primeiro gostaríamos que você lesse e confirmasse este termo de consentimento livre e
esclarecido.

Eu _______________________________________________________ estou sendo

convidado a participar de um estudo denominado Aplicativo de assinaturas digitais
realizado pelos ​alunos da disciplina de Engenharia de Usabilidade (curso de Sistemas
de Informação da UFSC)​, cujo objetivos são: ​verificar viabilidade de desenvolvimento
do aplicativo de assinaturas digitais​. A minha participação no referido estudo será no
sentido de ​responder o formulário e realizar simulação de uma tarefa do aplicativo​.
Recebi, esclarecimentos sobre a pesquisa e estou ciente de que minha privacidade será
respeitada, ou seja, meu nome ou qualquer outro dado ou elemento que possa, de qualquer
forma, me identificar, será mantido em sigilo. Fui informado de que posso me recusar a
participar do estudo, ou retirar meu consentimento a qualquer momento, sem precisar
justificar. É assegurada a assistência durante toda pesquisa. Autorizo o uso da minha
imagem a ser tirada durante o teste para fins acadêmicos. Manifesto meu livre
consentimento em participar.

Florianópolis (SC), ____ de abril de 2018

_____________________________________________________________
Nome e assinatura do participante
_____________________________________________________________
Nome(s) e assinatura(s) do(s) pesquisador(es)

Descrição de tarefa​:
Imagina que você precisa de assinaturas em um Compromisso de Estágio. Então você
precisa carregar o documento, selecionar os locais do documentos em que queres as
assinaturas e selecionar as pessoas que precisam assinar. Serão necessárias 4 assinaturas
da Ana, João, Maria e José.

Roteiro do Moderador​:
Horário de Início: ______________________
Horário de Fim: ______________________

O entrevistado conseguiu realizar a tarefa? ( ) Sim ( ) Não

Questionário​:

Discordo Concordo
Totalmente Plenamente

1 2 3 4 5

1 - Eu penso que usarei este sistema com

frequência

2 - Acho o sistema desnecessariamente

completo

3 - Penso que o sistema é fácil de usar

4 - Acho que vou precisar de ajuda de um

técnico para usar este sistema

5 - Acho as funções deste sistema bem

integradas

6 - Encontro muitas inconsistências neste

sistema

7 - Imagino que as pessoas aprenderão

rapidamente a usar este sistema

8 - Acho o sistema imprático de usar

9 - Senti-me confiante ao usar o sistema

10 - Precisei aprender muitas coisas antes de

usar o aplicativo
Anexo B
Sketch final