SEQUÊNCIA PICTÓRICA DE PROCEDIMENTOS ANIMADA …pdf.blucher.com.br.s3-sa-east-1.amazonaws.com/designproceedings/16... · pacientes [SPINILLO, 2016]. O uso de animação para representar

16° Ergodesign – Congresso Internacional de Ergonomia e Usabilidade de Interfaces Humano Tecnológica: Produto, Informações Ambientes Construídos e Transporte 16° USIHC – Congresso Internacional de Ergonomia e Usabilidade de Interfaces Humano Computador CINAHPA | 2017 – Congresso Internacional de Ambientes Hipermídia para Aprendizagem.

SEQUÊNCIA PICTÓRICA DE PROCEDIMENTOS ANIMADA (SPPA)

SOBRE USO DE MEDICAMENTOS: PROPOSTA DE GUIA DIGITAL

PARA DESENVOLVEDORES

ANIMATED PROCEDURAL PICTORIAL SEQUENCE (PPS): PROPOSAL

OF A DIGITAL GUIDE FOR DEVELOPERS

Carla Galvão Spinillo1, PhD

Amanda Rutiquewiski Gomes2, Ba.

Larissa Yumi Asami3, Ba

(1) UFPR- Universidade Federal do Paraná(Instituição)

e-mail: [email protected]

(2) UFPR- Universidade Federal do Paraná


(3) UFPR- Universidade Federal do Paraná


Animação, Medicamentos, Tutorial

Este artigo apresenta o guia interativo digital para o design de animações sobre preparação e uso de medicamentos,

desenvolvido com base em princípios e diretrizes de design e usabilidade. Este foi avaliado com 20 participantes

especialistas e desenvolvedores de animação. Os resultados mostraram deficiências na interface gráfica e

apresentação do conteúdo.

Animation, Medicines, Tutorial

This article introduces the interactive digital guide to design animations about medicine preparation and use, which

was developed based on principles and guidelines of design and usability. It was assessed by 20 expert participants

and animation developers. The results showed deficiencies in the graphic interface and presentation of content.

1 Introdução

O acesso à informação sobre uso de medicamentos

é fundamental para evitar o mal uso de fármacos

por usuários/pacientes, o que colocaria em risco o

tratamento de doenças [SILVA ET AL., 2000;

LENTZ ET AL. 2014; WAARDE, 2016]. As

estatísticas sobre intoxicação e mortes por uso

indevido de medicamentos são alarmantes no

Brasil. Segundo dados do Sistema Nacional de


Informações Tóxico-Farmacológicas [SINITOX,

2017] da Fundação Oswaldo Cruz no período de

2000 a 2013 (último levantamento realizado)

foram registrados 271.737 casos de intoxicação por

medicamentos no Brasil. Medicamento é o

segundo agente de causas de intoxicação e óbitos

no país, atrás apenas dos agrotóxicos de uso

agrícola. Só em 2013 o índice de óbitos por o uso

indevido de fármacos chegou a 22% do total de

óbitos registrados. Estes dados apontam a urgência

de maior atenção e atuação governamental para

modificar este quadro. Indo além, Aquino [2008]

discute a necessidade de participação dos atores

sociais/stakeholders do processo de legislação,

produção, prescrição, aquisição e uso de fármacos

para a promoção do uso racional de medicamentos

no Brasil.

No âmbito a bula torna-se documento crucial, visto

que sua produção é sujeita à regulamentação

específica, está relacionada à prescrição médica, é

parte do processo de aquisição de fármaco, e é a

principal fonte de informação legal sobre uso de

medicamentos para pacientes. A bula assim,

destaca-se como o veículo essencial na

comunicação dos fabricantes com

pacientes/usuários sobre uso de fármacos, sendo

portanto, mais que um documento legal,

obrigatório da indústria farmacêutica. Desta forma,

a informação disponibilizada na bula deve ser

compreendida pelos usuários/pacientes a fim de

dar suporte à tarefa de uso do medicamento.

A bula de medicamentos no Brasil é

disponibilizada em formato digital através de

consulta ao bulário eletrônico no portal do

Ministério da Saúde, ANVISA

[www4.anvisa.gov.br/BularioEletronico] e/ou nas

páginas dos laboratórios farmacêuticos na

internete. Estas estão disponibilizadas conforme na

bula impressa de forma estática, não se valendo

dos recursos tecnológicos do meio digital, como a

animação e a interação, que podem otimizar a

comunicação de conteúdos para usuários, no caso,

pacientes [SPINILLO, 2016]. O uso de animação

para representar instruções de uso de

medicamentos na bula eletrônica pode ser um

facilitador na visualização da informação por

pacientes, podendo assim otimizar a compreensão

de informações em bulas de medicamentos.

Partindo desta premissa, foi realizada pesquisa

sobre design de SPPAs - sequências pictóricas de

procedimentos animadas para uso de

medicamentos com enfoque na bula de

medicamentos eletrônica da ANVISA, a fim de

propor recomendações para a produção deste tipo

de animação instrucional. O presente artigo reporta

o desenvolvimento e avaliação do guia interativo

digital para design de SPPAs sobre uso de

medicamentos resultante desta pesquisa. Para isto,

inicialmente são apresentados aqui conceitos e

requisitos oriundos da literatura sobre o design de

artefatos digitais. Em seguida, são apresentados o

desenvolvimento do guia, e a síntese da avaliação

do mesmo por especialistas em design gráfico/da

informação e por desenvolvedores de animação.

2 SPPAs e as bases para desenvolvimento do

guia

O uso de animação com fins instrucionais e

educacionais tem sido considerado um facilitador

no aprendizado de conteúdos [e.g., MAYER, 2003;

AINSWORTH, 2008; ALVES ET. AL., 2012]. No

âmbito de animações instrucionais, tem-se as

sequências pictóricas de procedimentos animadas -

SPPAs empregadas para comunicar passo-a-passo

em material instrucional digital para usuários de

produtos e serviços. No que concerne o uso de

fármacos, SPPAs visam facilitar o entendimento e

a realização das tarefas de preparação e uso destes.

A animação permite uma representação realista de

passos/ações (e.g., representação de velocidade ao

misturar suspensão oral, força ao abrir tampa de

medicamento) e a interatividade possível no

ambiente digital (e.g., parar, avançar).

Todavia, a compreensão de SPPAs não depende

apenas do quanto a representação é fiel à descrição

do passo/tarefa. Para o efetivo design de SPPAs,

devem ser considerados aspectos relativos ao

usuário/paciente, ao contexto/ambiente de

realização da tarefa, e à tecnologia [BUBA, 2008;

POTTES, 2012; SPINILLO, 2016, 2017]. Dentre

os aspectos tecnológicos no desenvolvimento da

SPPA tem-se o tipo de suporte/equipamento para

visualização da animação, e o nível de


interatividade a ser oferecido ao usuário.

Diferentes tamanhos de tela do equipamento

(tablet, smartphone, laptop, desktop) influenciam a

visualização de passos em SPPAs [POTTES,

2012], demandando decisões diferenciadas na

representação da tarefa. Já o nível de interatividade

da SPPA determinará o quanto o usuário/paciente

poderá interagir com a instrução visual animada,

tendo controle sobre, por exemplo: velocidade da

animação, parar-avançar-voltar passos, e manipular

aproximação com a imagem (zoom).

Os aspectos acima mencionados foram

contemplados no conteúdo do guia interativo

digital para design de SPPAs sobre o uso de

medicamentos, juntamente com requisitos da

literatura para a produção de artefatos instrucionais

no âmbito de design da informação e de interação.

Neste sentido, Seraf e Wong [2012] em estudo

sobre de aplicativos com fins educacionais

propõem recomendações para o design de

interação destes, visando a otimização do

aprendizado de conteúdos pelos usuários. De

acordo com os autores, um aplicativo deve:

• Ser de fácil apreendizado e amigável (user-

friendly)

• Minimizar frequentemente a rolagem na página

• Ter navegação clara, simples e consistente

• Manter ações e elementos similares na mesma

posição (e.g., botões, ícones) na página

• Apresentar flexibilidade do display no design da

interface (responsivo)

• Fornecer ao usuário apenas as informações

necessárias

• Representar preferencialmente a informação

através de animação e de imagens/gráficos, do

que por meio de textos, e

• Permitir controle do usuário.

Também preocupado com a qualidade de artefatos

gráficos - quer impressos ou digitais - Pettersson

[2007] propõe uma série de princípios baseados em

pesquisas e em boas práticas do design gráfico e da

informação. Os princípios de design propostos por

pelo autor visam auxiliar a projetar mensagens e

materiais informacionais que sejam compatíveis

com o público de interesse, e dar suporte ao

raciocínio e reflexões durante o processo de

design. O autor categoriza os princípios de design

como funcionais, estéticos, cognitivos e de gestão.

Em geral, os princípios funcional e estético

enfocam à representação da informação em um

artefato comunicacional, enquanto os princípios

cognitivos enfocam o usuário/receptor da

mensagem, e os princípios de gestão enfocam o

processo de design/produção do artefato (Figura

1).

Figura 1: Diagrama dos Princípios de Design com base

em Pettersson [2007].

De acordo com Pettersson [2007] tem-se:

Princípios funcionais

• Definição do problema: identificar aspectos

referentes a demandas, limitações e

características do produtor da mensagem, da

mensagem, da mídia/artefato comunicacional,

do receptor/usuário, e do contexto de uso

da/acesso à mensagem/artefato.

• Estrutura: organização/hierarquia dos elementos

no espaço de forma a facilitar a identificação de

grupos funcionais (níveis e tipos de informação)

e a navegação no artefato ou sistema

informacional.

• Clareza: apresentação dos elementos de forma

legível, não ambígua, de modo que o usuário

possa ler e distinguir as diferentes partes da

mensagem.

• Simplicidade: concisão, consistência e precisão

de forma a melhorar o fluxo de leitura e o

entendimento de imagens e texto.

• Ênfase: destaque visual dos elementos mais

importantes para atrair, direcionar e manter a


atenção do usuário quando interagindo com o

material instrucional.

• Unidade: coerência global, elementos parecem

pertencer a um mesmo nível/tipo de informação,

conjunto de artefatos (manual, guia).

Princípios estéticos

• Harmonia: organização dos elementos de forma

agradável e integrada visualmente.

• Proporção estética: manter a proporção gráfica

entre os elementos, evitando excesso ou peso

visual.

Princípios cognitivos

• Atenção: recursos que promovam o

direcionamento do foco de concentração/olhar

do usuário/leitor.

• Percepção: recursos que promovam a facilidade

de detecção e identificação de informações.

• Processamento: recursos que promovam o fluxo

da informação para entendimento da mensagem

a partir de conexões explícitas entre os

elementos gráficos pictóricos e textuais.

• Memória: recursos que promovam a

retenção/armazenamento de informações

visuais/verbais.

Princípios de gestão

• Acesso à informação: consideração do acesso

externo (e.g., sistemas de armazenamento,

normas técnicas e de segurança) e interno (e.g.,

sistema de busca, visualização de estrutura do

documento) para produção do artefato

comunicacional.

• Custo: consideração dos custos de planejamento,

produção, distribuição e armazenamento, assim

como de revisões e monitoramento do artefato e

seu uso.

• Ética: respeito aos direitos autorais e à

regulamentação/diretrizes éticas.

• Qualidade da informação: estabelecimento de

controle de diferentes versões do artefato

produzido, revisão do artefato para garantir a

credibilidade da informação, terminologia,

estrutura e estilo antes da produção técnica do

mesmo, e a avaliação do artefato com usuários.

Os princípios e as recomendações mencionados

nortearam o desenvolvimento do guia interativo

digital para design de SPPAs sobre o uso de

medicamentos, o qual é apresentado a seguir.

3 Guia interativo digital para design de

SPPAs sobre uso de medicamentos

O guia é direcionado a desenvolvedores de SPPAs

sobre o uso de medicamentos, servindo como

material auxiliar para o design de instruções

visuais animadas. Ele apresenta informações para o

desenvolvimento de animações relativas ao

conteúdo e apresentação gráfica das SPPAs

considerando as necessidades dos

usuários/pacientes. Além disto, apresenta sugestões

de como avaliar as SPPAs produzidas para uma

melhor comunicação sobre preparação/uso de

medicamentos.

O guia foi desenvolvido a partir de princípios,

diretrizes da literatura aqui mencionada

[PETTERSSON, 2007; SERAF & WONG, 2012].

Buscou-se integrar teoria e pesquisa empírica

numa perspectiva prática, aliada também à

experiência profissional da equipe de designers do

guia. De forma complementar, foram empregados

os seguintes requisitos propostos por Spinillo e

Perozza [2015] para guias práticos para design de

SPPAs:

• Ser prático, de fácil acesso e apreensão do

conteúdo

• Ser de uso individual,

• Ter exemplos visuais como apoio de

aprendizagem dos conteúdos,

• Ter conteúdo informacional focado na

apresentação gráfica e organizado em tópicos

hierárquicos,

• Ter navegação estruturada para seguir passo-a-

passo o conteúdo informacional,

• Apresentar versão de impressão do guia para

acesso fácil das diretrizes no ambiente de

trabalho do desenvolvedor.

• Disponibilizar documentos de apoio que

reforcem as diretrizes e que colaborem no

processo de design.

Em relação aos aspectos de design da informação e


interação, foram definidos no desenvolvimento do

o guia para SPPAs sobre uso de medicamentos:

• Arquitetura da informação hierárquica e de rede;

• Sistema de navegação global, local e contextual;

• Rótulos de links textuais,

• Uso de imagem e botões,

• Grid único;

• Uso de tipografia com boa legibilidade, fundo e

cabeçalho;

• Consistência do conteúdo por contraste e

uniformidade

Sobre o conteúdo do guia, foram empregadas

diretrizes de forma articulada, norteando as

decisões durante o processo de design, sendo:

Diretrizes gerais para o conteúdo do Guia

• Apresentar as informações de maneira concisa

para evitar volume desnecessário de conteúdo, o

que pode desmotivar o usuário/desenvolvedor da

SPPA;

• Apresentar o conteúdo em linguagem clara,

evitando o uso de jargões técnicos, promovendo

assim a compreensibilidade;

• Apresentar visualmente a estrutura dos

conteúdos em abas e menus para facilitar a

busca por informação do usuário/desenvolvedor;

• Apresentar conteúdo textual em grupos de

informação (e.g. listas, parágrafos), para facilitar

o processamento cognitivo;

• Empregar recursos tipográficos (e.g., tamanho

do corpo, negrito, itálico) forma clara e

consistente para indicar hierarquia e ênfase

• Empregar espaço vertical (margens e recuo de

parágrafos) e espaço horizontal (entre

parágrafos) para promover a legibilidade e

conforto visual;

Diretrizes para o conteúdo procedimental

• Representar o conteúdo procedimental de

maneira concisa, usando apenas os passos

necessários para o desenvolvimento da SPPA;

• Representar graficamente situações condicionais

sobe o design da SPPA(caso hajam) para torná-

las explícitas para o usuário-desenvolvedor.

Diretrizes para o conteúdo não- procedimental

• Apresentar apenas informações não-

procedimentais necessárias para o

desenvolvimento da SPPA.

• Usar títulos que informem sobre o tópico do

procedimento para auxiliar o processo de

decisão do usuário-desenvolvedor no design da

SPPA

• Apresentar advertências de forma diferenciada

dos demais tipos de informação a fim de facilitar

a visualização destas.

Estrutura e interface do guia

De acordo com os requisitos e as diretrizes

adotadas, foi definida a estrutura dos conteúdo do

guia através de tópicos e sub-tópicos, conforme a

seguir.

• Apresentação (o que é o guia e como usar)

• SPPAs (conceito e características)

• Problemas em SPPAs sobre medicamentos

• Processo de design de SPPAs centrado nos

usuários

• Diretrizes/Recomendações

- Para apresentação do texto

- Para apresentação de imagens

- Para temporização da animação

• Como avaliar SPPAs (protocolo e instruções)

• Lista de literatura de interesse (resumos/links)

• Mapa do guia

• Home (menu secundário)

• Sobre o projeto de pesquisa (menu secundário)

• Equipe do guia e do projeto de pesquisa (menu

secundário)

• Contato (menu secundário)

Definida a estrutura do guia, foram produzidos os

textos para cada tópico/sub-tópico buscando

linguagem clara e objetiva e sua alocação nos

menus. Em seguida foi desenvolvida a interface e

navegação do guia com base. A interface possui

uma grid única apresentando campos definidos

para menus, texto principal, e elementos de

navegação. Estruturou-se a navegação do sistema

para que o conteúdo fosse seguido linearmente,

através de menu principal no canto esquerdo da

tela, apresentando até dois níveis. Na parte


superior da tela encontra-se o menu secundário

com ícones referentes a informações sobre o

projeto e equipe (Figura 2).

Figura 2: Grid estrutural do protótipo gerado na fase de

produção

Com relação às áreas clicáveis, optou-se por duas

formas de interação: a primeira onde o usuário

clica em um link para acessar os exemplos

ilustrados das diretrizes, e a segunda ele clica em

parte destacada do exemplo, visualizando um

detalhe (quando pertinente). Ao final foram

definidas a paleta de cores, sendo esta a mesma das

SPPAs desenvolvidas no projeto de pesquisa, e a

fonte tipográfica Verdana, por ser de boa

legibilidade em tela. A figura a seguir mostra

exemplo de tela do guia.

Figura 3: Exemplo de tela com conteúdo textual

A fim de possibilitar aos desenvolvedores a

averiguação da compreensão da SPPA junto aos

pacientes/usuários de medicamentos, o guia

disponibiliza exemplo de protocolo de testagem e

um checklist com itens a serem

considerados/checados na produção das SPPAs.

Assim, através do link ‘Instruções gerais para

testes de compreensão de SPPAs’ é fornecido um

documento em pdf sobre como preparar o roteiro

de questões para o teste, selecionar os

participantes, realizar o teste, e tratar os resultados.

É ainda disponibilizado em pdf um modelo de

Protocolo de Compreensão e Satisfação com a

SPPA sobre uso de medicamento. Vale salientar

que o guia explicita que após verificar a

compreensão da SPPA pelos usuários/pacientes,

esta deverá ser ajustada a partir dos resultados

obtidos.

Considerando o conteúdo e abrangência do guia,

este pode ser empregado em diferentes fases do

processo de design de SPPAs sobre preparo e uso

de medicamentos. Na fase inicial (pré-design) o

guia auxilia na tomada de decisão sobre o conteúdo

da SPPA e a apresentação gráfica da animação,

através das diretrizes/recomendações de design e

do checklist de atendimento às mesmas. Na fase de

realização do design gráfico da SPPA e de sua

avaliação, o guia apresenta protocolos e instruções

para o teste. Na fase final do processo de design

(pós-design) o checklist disponibilizado no guia

poderá auxiliar a rever/editar a SPPA antes de sua

publicação. O diagrama a seguir (Figura 4) mostra

o emprego do guia no processo de design de

SPPAs sobre preparação e uso de medicamentos.

Figura 4: Possibilidades de uso do guia durante o

processo de design de SPPAs

A seguir é apresentado de forma breve, a avaliação

do guia sobre o design de SPPAs junto a

especialistas e usuários/desenvolvedores, assim

como os ajustes oriundos da avaliação.

4 Avaliação do guia para design de SPPAs

Para avaliação do guia para design de SPPAs sobre

preparação e uso de medicamentos foi produzido

um protótipo de alta fidelidade através de

programas da Adobe (Photoshop e Illustrator) para


edição das imagens; Brackets para a programação

do guia; e a prototipagem foi realizada na

plataforma online InVision

[https://www.invisionapp.com/]. A avaliação se

deu através de consulta a um total de 20

participantes divididos em amostras independentes

de 10 especialistas em design gráfico/da

informação e 10 desenvolvedores de animação,

potenciais usuários do guia.

Material e procedimento

Especialistas: O material utilizado foi computador

laptop apresentando o guia e protocolo de coleta de

dados com 29 heurísticas/recomendações da

literatura para o design de artefatos interativos

digitais. Cada especialista, de forma individual e

isolada, foi solicitado a navegar pelo guia

livremente e em seguida preencher o protocolo de

avaliação do mesmo, observando o atendimento às

heurísticas. Após o preenchimento, foram

solicitados a entregar o protocolo ao pesquisador.

Desenvolvedores: O material utilizado foi

computador laptop apresentando o guia e protocolo

de coleta de dados. Este constou de questões

abertas e fechadas, e sentenças em escala Likert

para indicação de concordância (1: discordo

totalmente a 5: concordo totalmente) sobre a

navegação e interface do guia. Cada participante,

de forma individual e isolada, foi solicitado

interagir com guia livremente e em seguida realizar

tarefas de busca de informação neste. Após isto, foi

realizada entrevista semiestruturada sobre as

tarefas e impressões sobre o uso do guia. As

respostas foram registradas através de anotações

escritas.

Os resultados desta fase foram analisados

qualitativamente a fim de identificar contribuições

diversas para o aprimoramento do guia, sendo

números empregados aqui apenas com finalidade

de ilustrar tendências nas respostas dos

participantes.

5 Síntese dos resultados e ajustes a serem

realizados no guia

De forma geral, os resultados referentes a

especialistas e desenvolvedores revelaram

deficiências na interface e navegabilidade do guia

para design de SPPAs, entre os quais:

• Ausência de botão “entrar” na tela de abertura;

• Problemas no agrupamento de informações;

• Setas de navegação que confundem o usuário; e

• Necessidade de padronizar e destacar elementos

interativos (links externos, pop-ups e vídeos das

SPPAs-modelo).

Não foram identificadas deficiências no conteúdo

informacional do guia, e as diretrizes e

recomendações de design foram consideradas

suficientes e claras. No entanto, os blocos de texto

foram considerados extensos e com falta de

exemplos pictóricos, o que prejudicou a satisfação

dos desenvolvedores entrevistados.

Em relação aos resultados com especialistas, em

geral, estes consideraram que o guia atende a

maioria os requisitos de design da informação e

usabilidade, visto que do total de 290 respostas

para as 29 heurísticas, 240 foram afirmativas.

Todos os participantes especialistas (N=10)

consideraram que o guia atende às heurísticas de

posicionamento de cabeçalhos e menus, e

agrupamento visual na composição das telas.

Ainda, a maioria (N=9 de 10) considerou que:

• Os elementos das telas são úteis e não

repetitivos;

• O uso do guia é econômico em termos de ações

e tempo;

• Os cabeçalhos e rodapés estão devidamente

separados do restante do conteúdo das telas;

• Os botões de ação estão próximos dos ítens a

que se referem;

• É disponibilizada área para mapa do guia;

• A navegação parece fácil de aprender e mostra o

contexto global e local;

• O design da interface é simples, claro e

intuitivo;

• Há consistência na apresentação dos ícones e

suas funções, e da informação e navegação; e

por fim,

• A cor é sutil, exceto quando usada para atenção

a detalhes.

https://www.invisionapp.com/


Por outro lado, a maioria dos especialistas (N=6 de

10 participantes) considerou como heurísticas

menos atendidas aquelas referentes à clareza da

terminologia (uso de jargões) e consistência na

apresentação das áreas clicáveis. Todos os

especialistas fizeram sugestões para melhoria do

guia, a exemplo: de rever o termo ápresentação´

para não confundir com Home (terminologia),

melhorar a visualização do mapa (interface); não

usar sublinhado para texto para não confundir com

links, rever uso de setas para navegação

(navegação).

Quanto à avaliação com desenvolvedores, usuários

potenciais do guia (N=10), em geral, a avaliação

foi positiva. As tarefas de interação foram

realizadas com sucesso pela maioria dos

participantes, os quais encontraram o exemplo de

como deve ser uma SPPA (N=8); o formulário para

avaliação de SPPA (N=8); e a seção de problemas

de design de SPPAs (N=9). Todos os participantes

ainda forneceram satisfatoriamente exemplos de

como aplicariam as diretrizes apresentadas pelo

guia no design de uma SPPA sobre medicamentos.

Em relação à avaliação do guia, nove dos 10

desenvolvedores consideraram: a navegação fácil;

as diretrizes para o design de SPPA claras, e o

conteúdo suficiente; o agrupamento das

informações por conteúdo coerente; e as imagens

adequadas ao conteúdo. Todavia, apenas seis

participantes avaliaram a interface como amigável

e intuitiva, e o caminho percorrido como de fácil

visualização. Este mesmo número de participantes

declarou que diferença de nomenclatura entre as

palavras-chaves na barra lateral das telas e os

títulos dos tópicos dificultou a interação e

navegação no guia.

Além disto, a metade dos desenvolvedores

participantes (N=5) considerou o uso de imagens

restrito, com ausência de animações para alguns

conteúdos; e a relação entre conteúdo e rótulos das

seções pouco clara. Porém, consideraram o layout

das telas como facilitador da interação com o

sistema (N=5). Como decorrência, apenas quatro

dos 10 participantes se declararam totalmente

satisfeitos com o guia e três satisfeitos. Apesar

destes números somados indicarem uma positiva

satisfação (N=7 de 10), os participantes explicitam

a necessidade de melhorias no guia para atender às

expectativas dos usuários desenvolvedores de

SPPAs. Estes deram sugestões para melhoria do

guia, como: empregar mais imagens ilustrando as

recomendações; colocar botão éntrar´ na tela de

abertura; e evidenciar as áreas clicáveis.

Com base nos resultados da avaliação com

especialistas e usuários desenvolvedores foram

identificados e ajustados os seguintes aspectos no

design do guia:

• Adição de mais imagens e animações para

ilustrar as recomendações

• Mudança do termo Ápresentação´ para não

confundir com Home

• Melhoria da visualização do mapa na interface

• Retirada de recurso de sublinhado no texto para

não confundir com links

• Reconsideração do uso de setas para navegação

• Inclusão de botão Éntrar´ na tela de abertura

• Destaque das áreas clicáveis

6 Conclusões e considerações

Em geral, pode se concluir que os resultados com

usuários desenvolvedores e especialistas estão em

consonância, tanto em relação aos aspectos

positivos como às deficiências identificadas. O não

atendimento satisfatório do guia para design de

SPPAs a algumas das heurísticas de design da

informação e usabilidade mostram o quanto isto

afeta negativamente a interação e a satisfação com

o uso do artefato.

Apesar do desenvolvimento do guia ter sido

norteado por requisitos, princípios e diretrizes de

design [PETTERSSON, 2007; SERAF & WONG,

2012; SPINILLO & PEROZZA, 2015], algumas

das decisões tomadas para a representação gráfica

dos conteúdos e para a forma de interação foram

ineficientes ou mesmo deficientes. Estas

acarretaram dificuldades e insatisfação nos

usuários participantes da avaliação. Isto demonstra

o quanto a aplicação de requisitos, princípios e

diretrizes de design - ainda que por profissionais da

área – não é suficiente para garantir boa

usabilidade de artefatos. Assim, ratifica-se a


necessidade de verificação empírica com usuários

potenciais para atingir a qualidade devida de

artefatos instrucionais, como o guia para design de

SPPAs sobre preparação e uso medicamentos.

Por fim, espera-se que este estudo, assim como o

guia aqui apresentado, possam vir a contribuir para

integração entre as áreas de design e saúde, tanto

no âmbito acadêmico-científico (e.g., métodos,

protocolos, resultados) como na prática

profissional com a produção de animações sobre o

uso de medicamentos.

Referências

AINSWORTH, S. How do animations influence

learning? In D. Robson & G. Schraw (Eds) Curent

perspectives on cognition, learning and

instruction: Research innovations in educational

technology that facilitate student learning. pp. 37-

67. Charlotte, NC: Information Age Publishing,

2008.

ALVES, M.; BATAIOLLA, A.; SPINILLO C.

Design de animações educacionais: levantamento

de situações e motivos. Anais do 10º P&D-

Congresso Brasileiro de Pesquisa e

Desenvolvimento em Design. São Luis (MA),

2012.

AQUINO, D. S. da; Por que o uso racional de

medicamentos deve ser uma prioridade? Ciência

& Saúde Coletiva, v.13, pp.733–736, 2008.

BUBA, D. Instruções visuais animadas para a

indústria automotiva: Uma abordagem analítica

em design informacional. Monografia de

Especialização em design informacional -

Pontifícia Universidade Católica do Paraná, 2008.

LENTZ, L.; MAAT, H. P. & DOST, D. An

evidence-based template proposal for patient

informtion leaflets. Information Design Journal,

vol 21. No. 3, pp. 225-243, 2014.

MAYER, R. E. Elements of a science of e-

learning. Journal of Educational Computing

Research, v. 29, n.3, p. 297-313, 2003

PETTERSSON, R. It Depends: ID – Principles

and Guidelines. Tullinge: Institute for Infology,

2007.

POTTES, A. Animação Multimídia de Instrução

(AMI) visualizada em Dispositivo de Interação

Móvel (DIM): Um estudo exploratório acerca da

influência da flexibilidade de interação sobre a

visualização da informação e a realização da tarefa. Dissertação de Mestrado, Departamento de Design.

Universidade Federal do Paraná, UFPR, 2012.

SERAF, M; WONG, C. Y. A Study of User

Interface Design Principles and Requirements for

Developing a Mobile Learning Prototype.

Proceedings of the International Conference on

Computer & Information Science (ICCIS) pp.

1014-1019, 2012.

SILVA, T.; DAL-PIZZOL, F.; BELLO, C.M.;

MENGUE, S.S.; SCHENKEL, E. P. Bulas de

medicamentos e a informação adequada ao

paciente. Revista de Saúde Pública, v. 34, n. 2, p.

184-189, 2000.

SPINILLO, C. G; PEROZZA, R. An interactive

guide to design animated visual instructions in

Brazil. In: A. Marcus (Ed) DUXU Design, User

Experience, and Usability: Users and

Interactions, Part II LNCS 9187. Springer

International Publishing, pp 374- 381, 2015.

SPINILLO, C. G. Animation on How to Take

Medicines: A Study of Electronic Patient Leaflets

in Brazil. In: A. Marcus (Ed) DUXU Design, User

Experience, and Usability: Novel User

Experiences, Part II LNCS 9747. Springer

International Publishing, pp 647- 654, 2016.

SPINILLO, C. G. Using animation to help

communication in e-PILS in Brazil. In: Alison

Black, Paul Luna, Ole Lund, Sue Walker (Eds).

Information Design: Research and Practice, p

701-714. Routledge- Taylor and Francis, 2017.

SINITOX-Sistema Nacional de Informações

Tóxico-Farmacológicas. Dados Nacionais.

Disponível em: http://sinitox.icict.fiocruz.br/dados-

nacionais. Acessado em 18/03/2017. 2017

WAARDE. K. The design of information about

http://sinitox.icict.fiocruz.br/dados-nacionais

http://sinitox.icict.fiocruz.br/dados-nacionais


Ibuprofen: A minor headache? Information

Design Journal. Vol. 22 n. 3 pp. 281-196, 2017

Agradecimentos

As autoras agradecem às agências de fomento:

CNPq e Fundação Araucária-PR pela concessão de

bolsas para o projeto de pesquisa que possibilitou o

desenvolvimento deste artigo. Agradecimentos

também são devidos às bolsistas de iniciação

científica Elissandra Grabriela Pereira, Rafaella

Raboni Sabatke e Thatianne de Jesus Ferreira pela

valiosa participação na pesquisa, e a Bruno Saad,

Gustavo Amorim e Leandro Albuquerque pela

generosa contribuição na produção das animações

apresentadas no guia.

Documents

SEQUÊNCIA PICTÓRICA DE PROCEDIMENTOS ANIMADA …pdf.blucher.com.br.s3-sa-east-1.amazonaws.com/designproceedings/16... · pacientes [SPINILLO, 2016]. O uso de animação para representar