MESTRADO
MULTIMÉDIA - ESPECIALIZAÇÃO EM CULTURA E ARTES
ESTRATÉGIAS DE DESIGN
RESPONSIVO
Caso de Es udo: EPR Mul ipla a o ma da Glin
GlobalCa e
!
Ma ia!Camps!
!
!
!
M
2016
FACULDADES!PARTICIPANTES:!
!
!FACULDADE DE ENGENHARIA
FACULDADE DE BELAS ARTES
FACULDADE DE CIÊNCIAS
FACULDADE DE ECONOMIA
FACULDADE DE LETRAS
ÍNDICE
!
ÍNDICE 3
!
LISTA DE FIGURAS 6
!
RESUMO 12
!
ABSTRACT 13
!
AGRADECIMENTOS 14
!
INTRODUÇÃO 15
!
1
!
CONTEXTUALIZAÇÃO 17
!
1.1
!
P oje o 17
!
1.2
!
P oblema e Obje i os da In es igação 17
!
1.3
!
Me odologia da In es igação 18
!
1.3.1
!
Na u eza do Es udo: Mé odo e P opósi o 18
!
1.3.2
!
Técnicas de ecolha e análise de dados 18
!
1.3.2.1
!
En e is as 19
!
1.3.2.2
!
Tes es de Usabilidade e sus A aliação da Expe iência do
U ilizado 19
!
1.3.2.3
!
Regis os de U ilização 20
!
1.3.2.4
!
Técnicas de Amos agem 21
!
1.3.2.5
!
Es u u a da Disse ação 21
!
2
!
FUNDAMENTOS TEÓRICOS PARA A RESPONSIVIDADE 23
!
2.1
!
Design Responsi o 23
!
2.1.1
!
O que é o Design Responsi o? 23
!
2.1.2
!
G elha Responsi a 25
!
2.1.3
!
Imagens e Vídeos Responsi os 27
!
2.1.4
!
Media Que ies 28
!
2.2
!
Mobile Fi s 29
!
2.3
!
Pad ões de Design, Componen es e F amewo ks 33
!
2.3.1
!
Pad ões de Design 33
!
2.3.2
!
Linguagens de Pad ões e Biblio ecas de Pad ões 36
!
2.3.2.1
!
Análise Compa a i a en e Biblio ecas de Pad ões 37
!
2.3.2.1.1
!
Nome 39
!
2.3.2.1.2
!
Ranking 39
!
2.3.2.1.3
!
Con ex o 40
!
2.3.2.1.4
!
Ilus ação 40
!
2.3.2.1.5
!
P oblema 42
!
2.3.2.1.6
!
Fo ças 42
!
2.3.2.1.7
!
Solução 42
!
2.3.2.1.8
!
Diag ama 43
!
2.3.2.1.9
!
Pad ões Relacionados 44
!
2.3.2.1.10
!
Comen á ios 44
!
2.3.2.1.11
!
Exemplos de Código 44
!
2.3.3
!
Componen es de Design 45
!
2.3.4
!
F amewo ks 46
!
2.4
!
Design Cen ado no U ilizado 48
!
2.5
!
Design pa a a Saúde 49
!
2.6
!
Design e Ino ação 51
!
3
!
EPR MULTIPLATAFORMA 54
!
3.1
!
Ap esen ação dos casos de es udo 54
!
3.2
!
EPR Médico Mul ipla a o ma 57
!
3.2.1
!
Funcionalidades: Menus Descon ex ualizado e
Con ex ualizado 57
!
3.2.2
!
O ganog ama Funcional EPR Médico Mul ipla a o ma 59
!
3.3
!
EPR En e magem Mul ipla a o ma 60
!
3.3.1
!
Funcionalidades: Menus Descon ex ualizado e
Con ex ualizado 60
!
3.3.2
!
O ganog ama Funcional EPR En e magem
Mul ipla a o ma 61
!
3.4
!
Na egação no EPR Mul ipla a o ma 63
!
3.5
!
Pad ões de Na egação no EPR Mul ipla a o ma 67
!
3.5.1
!
Con ex o de Na egação 67
!
3.5.2
!
Menu Pe sis en e 68
!
3.5.3
!
Menu Deslizan e 69
!
3.5.4
!
Ba a de Na egação Ho izon al ( opo) 71
!
3.5.5
!
Ba a de Na egação Ho izon al ( odapé) 72
!
3.5.6
!
Lis a Ve ical (com ícones) 74
!
3.5.7
!
I em Ex ensí el 75
!
4
!
METODOLOGIA 77
!
4.1
!
Design Cen ado no U ilizado – comp eende os u ilizado es
e os seus obje i os 77
4.2
!
Técnicas de Recolha de Dados 78
!
4.2.1
!
Análise dos Regis os de U ilização 78
!
4.2.2
!
En e is as 80
!
4.2.2.1
!
En e is as aos U ilizado es Finais 80
!
4.2.2.2
!
En e is as aos p o issionais da Glin 81
!
4.3
!
Ca a e ização das Pe sonas 83
!
4.3.1
!
Pe sona P imá ia 1 84
!
4.3.2
!
Pe sona P imá ia 2 85
!
4.3.3
!
Pe sona secunda ia 86
!
4.3.4
!
Pe sona Complemen a 87
!
4.4
!
Ci cui os Selecionados 88
!
5
!
ESTRATÉGIAS DE RESPONSIVIDADE 89
!
5.1
!
Tes es de Usabilidade 94
!
5.1.1
!
Rela ó io do Tes e de Usabilidade | Fase 1 94
!
5.1.1.1
!
Me odologia 94
!
5.1.1.2
!
Obje i o do Tes e de Usabilidade 94
!
5.1.1.3
!
Pa icipan es 94
!
5.1.1.4
!
Disposi i os 95
!
5.1.1.5
!
Ci cui o Escolhido 95
!
5.1.1.6
!
Resul ados Ob idos 96
!
5.1.1.7
!
Inqué i o Sys em Usabili y Scale (SUS) 97
!
5.1.2
!
Rela ó io do Tes e de Usabilidade | Fase 2 101
!
5.1.2.1
!
Me odologia 101
!
5.1.2.2
!
Obje i o do Tes e de Usabilidade 101
!
5.1.2.3
!
Pa icipan es 101
!
5.1.2.4
!
Disposi i os 102
!
5.1.2.5
!
Ci cui o escolhido 102
!
5.1.2.6
!
Resul ados Ob idos 102
!
5.1.2.7
!
Inqué i o Sys em Usabili y Scale (SUS) 104
!
5.2
!
Wi e ames Finais 108
!
6
!
CONCLUSÃO 116
!
6.1
!
Sa is ação dos Obje i os 116
!
6.2
!
Limi ações e T abalho Fu u o 117
!
BIBLIOGRAFIA 118
!
ANEXOS 122
!
Anexo 1: Tabela Compa a i a en e Biblio ecas de Pad ões 123
!
Anexo 2: Tabela da Solução Clínica EPR Mul ipla a o ma 125
!
Anexo 3: O ganog ama Funcional EPR Médico Mul ipla a o ma 127
!
Anexo 4: O ganog ama Funcional EPR En e magem
Mul ipla a o ma 129
!
Anexo 5: En e is as aos p o issionais da Glin 131
!
Anexo 6: Ci cui os Selecionados 140
!
Anexo 7: Wi e ames Finais 145
!

LISTA DE FIGURAS
Fig. 1 Vá ias dimensões de ec ãs de di e en es disposi i os ( e i ada de
Responsi e Design, Pa e ns and P inciples, 2015). 24
Fig. 2 Exemplo de layou esponsi o ( e i ada de A Lis Apa :
Responsi e Web design, 2010). 26
Fig. 3 Vá ias esoluções de ec ãs ( e i ada de Responsible Responsi e
Design, 2014). 27
Fig. 4 Pon os de queb a do layou e na egação do The Bos on Globe
( e i ada de Responsible Responsi e Design, 2014). 29
Fig. 5 Ilus ação do pad ão S ai Sea s de A Pa e n Language, 1977. 34
Fig. 6 Fo og a ia ilus a i a do pad ão S ai Sea s de A Pa e n
Language, 1977. 34
Fig. 7 Exemplo de es u u a de pad ão de ui-Pa e ns, 2007. 40
Fig. 8 Exemplo de o og a ia e diag ama ilus a i os de A Pa e n
App oach o In e ac ion Design, 2000. 41
Fig. 9 Exemplo de ilus ação de In o Design Pa e ns, 2008. 41
Fig. 10 Exemplo de diag ama de Design Pa e ns, 1995. 44
Fig. 11 Websi e esponsi o da emp esa Vox Media em di e en es
disposi i os ( e i ada de Responsi e Design – Pa e ns and
P inciples, 2015). 47
Fig. 12 Esquema-sín ese da aplicação EPR Mul ipla a o ma
(p oduzida pela au o a). 55
Fig. 13 Ec ã de au en icação na aplicação EPR Mul ipla a o ma em
Desk op (p oduzida pela au o a). 57
Fig. 14 Ec ã descon ex ualizado do médico na aplicação EPR Médico
Mul ipla a o ma em Desk op (p oduzida pela au o a). 58
Fig. 15 Ec ã Con ex ualizado na aplicação EPR Médico Mul ipla a o ma
em Desk op: lis a de doen es, na qual um doen e es á selecionado
(p oduzida pela au o a). 58
Fig. 16 Acesso ao ec ã con ex ualizado do doen e na aplicação EPR
En e magem Mul ipla a o ma em Desk op – Lis a de Doen es
(p oduzida pela au o a). 60
Fig. 17 Ec ã descon ex ualizado do en e mei o na aplicação EPR
En e magem Mul ipla a o ma em Desk op (p oduzida
pela au o a). 61
Fig. 18 Hie a quia da na egação na e en e Médico da aplicação EPR
Mul ipla a o ma, em Desk op (p oduzida pela au o a). 63
Fig. 19 As uncionalidades p incipais p esen es no ec ã an e io , são
subs i uídas pelas uncionalidades con ex ualizadas do doen e
(p oduzida pela au o a). 64
Fig. 20 Hie a quia da na egação na e en e Médico da aplicação EPR
Mul ipla a o ma, em Table (p oduzida pela au o a). 65
Fig. 21 Ec ã descon ex ualizado na e en e en e magem, em Table
e ical e ho izon al (p oduzida pela au o a). 65
Fig. 22 Con ex o da Na egação na e en e médico do EPR
Mul ipla a o ma (p oduzida pela au o a). 67
Fig. 23 Con ex o da Na egação no websi e do The Gua dian UK
( e i ada de Designing o Touch, 2015). 68
Fig. 24 Menu Pe sis en e na e en e médico do EPR
Mul ipla a o ma (p oduzida pela au o a). 68
Fig. 25 Menu Pe sis en e no websi e do designe Rich B own
( e i ada de h p://www. ichb own.in o). 69
Fig. 26 Menu Deslizan e na e en e En e magem da aplicação EPR
Mul ipla a o ma (p oduzida pela au o a). 69
Fig. 27 Exemplo de menu deslizan e no acesso ao Mail no iPad
a a és de um ges o swipe ( e i ada de Designing o Touch,
2015). 70
Fig. 28 Ba a de na egação ho izon al de opo na aplicação EPR
Mul ipla a o ma, e en es médico desk op e en e magem em
able e ical (p oduzida pela au o a). 71
Fig. 29 Exemplo de ba a de na egação ho izon al ( opo) na
aplicação Li es eam ( e i ada de h ps://li es eam.com) 72
Fig. 30 Ba a de na egação ho izon al de odapé na aplicação EPR
Mul ipla a o ma, e en e médico em able ho izon al
(p oduzida pela au o a). 72
Fig. 31 Exemplo de ba a de na egação ho izon al ( odapé e opo) na
aplicação Facebook, espe i amen e pa a iOS e And oid
( e i ada de Designing o Touch, 2015). 73
Fig. 32 Exemplo de lis a e ical (com ícones) na e en e de en e magem
da aplicação EPR Mul ipla a o ma (p oduzida pela au o a). 74
Fig. 33 Exemplo de lis a e ical no websi e The Session ( e i ada de
Designing o Touch, 2015). 75
Fig. 34 Exemplo de i em ex ensí el na aplicação EPR Mul ipla a o ma
(p oduzida pela au o a). 75
Fig. 35 Exemplo de í em ex ensí el na biblio eca de pad ões de
Designing Mobile In e aces, 2011. 76
Fig. 36 Exemplos de esquissos ela i os ao desenho dos ec ãs pa a
sma phone (p oduzida pela au o a). 78
Fig. 37 Quan idade de egis os de u ilização po uncionalidade, no
EPR En e magem (p oduzida pela au o a). 79
Fig. 38 Quan idade de egis os de u ilização po uncionalidade, no
EPR Médico (p oduzida pela au o a). 80
Fig. 39 Exemplo de ec ã do EPR En e magem na ecnologia O acle
Fo ms. 82
Fig. 40 Exemplo de ec ã do EPR Médico na ecnologia D.Ne . 82
Fig. 41 Pe sona P imá ia 1 (p oduzida pela au o a). 84
Fig. 42 Pe sona P imá ia 2 (p oduzida pela au o a). 85
Fig. 43 Pe sona Secundá ia (p oduzida pela au o a). 86
Fig. 44 Pe sona Complemen a (p oduzida pela au o a). 87
Fig. 45 Os polega es são os dedos mais u ilizados na in e ação com
sma phones ( e i ada de Designing o Touch, 2015). 89
Fig. 46 Zonas acessí eis pelos polega es em ec ãs de di e en es
dimensões ( e i ada de Designing o Touch, 2015). 90
Fig. 47 Zona indicada pa a localiza os con olado es em iOS e
And oid. Exemplo da aplicação do Facebook ( e i ada de
Designing o Touch, 2015). 90
Fig. 48 Exemplo de na egação p incipal escondida num bo ão
de menu, no websi e The Session ( e i ada de
Designing o Touch, 2015). 91
Fig. 49 Exemplo de na egação p incipal la e al, na aplicação do
Twi e ( e i ada de Designing o Touch, 2015). 92
Fig. 50 Á eas acessí eis, espe i amen e nos able s, híb idos e comuns
aos dois ipos de disposi i os ( e i ada de Designing
o Touch, 2015). 93
Fig. 51 Pe da de con ex o de na egação no sma phone. 96
Fig. 52 Pe da de con ex o de na egação no able e ical. 97
Fig. 53 Pode ia usa es a aplicação equen emen e (p oduzida pela
au o a). 97
Fig. 54 Achei a aplicação desnecessa iamen e complexa (p oduzida
pela au o a). 98
Fig. 55 Achei que a aplicação e a ácil de usa (p oduzida pela
au o a). 98
Fig. 56 I ia p ecisa do apoio de um écnico pa a se capaz de
u iliza a aplicação (p oduzida pela au o a). 98
Fig. 57 Achei que as á ias unções da aplicação es a am bem
in eg adas (p oduzida pela au o a). 99
Fig. 58 Pa eceu-me ha e mui a inconsis ência na aplicação
(p oduzida pela au o a). 99
Fig. 59 Imagino que a maio ia das pessoas i ia ap ende a u iliza es a
aplicação mui o apidamen e (p oduzida pela au o a). 99
Fig. 60 Achei a aplicação mui o complicada de usa (p oduzida pela
au o a). 100
Fig. 61 Sen i-me mui o con ian e ao usa a aplicação (p oduzida pela
au o a). 100
Fig. 62 P ecisa a de ap ende bas an e an es de pode começa a
usa a aplicação (p oduzida pela au o a). 100
Fig. 63 Melho ia signi ica i a no con ex o de na egação em
sma phone (p oduzida pela au o a). 103
Fig. 64 Uma ez selecionada a “No a Clínica 1”, os u ilizado es
demons a am di iculdade em ol a pa a a lis a "No as Clínicas". 103
Fig. 65 Pode ia usa es a aplicação equen emen e (p oduzida pela
au o a). 104
Fig. 66 Achei a aplicação desnecessa iamen e complexa (p oduzida
pela au o a). 104
Fig. 67 Achei que a aplicação e a ácil de usa (p oduzida pela
au o a). 104
Fig. 68 I ia p ecisa do apoio de um écnico pa a se capaz de
u iliza a aplicação (p oduzida pela au o a). 105
Fig. 69 Achei que as á ias unções da aplicação es a am bem
in eg adas (p oduzida pela au o a). 105
Fig. 70 Pa eceu-me ha e mui a inconsis ência na aplicação
(p oduzida pela au o a). 105
Fig. 71 Imagino que a maio ia das pessoas i ia ap ende a u iliza
es a aplicação mui o apidamen e (p oduzida pela au o a). 106
Fig. 72 Achei a aplicação mui o complicada de usa (p oduzida pela
au o a). 106
Fig. 73 Sen i-me mui o con ian e ao usa a aplicação (p oduzida pela
au o a). 106
Fig. 74 P ecisa a de ap ende bas an e an es de pode começa a
usa a aplicação. 107
Fig. 75 P opos a pa a a página de login da aplicação EPR
Mul ipla a o ma, nos di e en es disposi i os
(p oduzida pela au o a). 108
Fig. 76 A na egação global no sma phone é escondida e e elada,
quando necessá io (p oduzida pela au o a). 109
Fig. 77 Localização da na egação global do nos di e en es disposi i os
(p oduzida pela au o a). 110
ESTRATÉGIAS DE DESIGN RESPONSIVO!
16!
p ojeção de um no o layou (Ma co e 2010).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
17!
1 CONTEXTUALIZAÇÃO
1.1 P oje o
P e endemos desen ol e um es udo ap o undado sob e os p oblemas
encon ados nos casos de es udo GlobalCa e (a aplicação EPR Mul ipla a o ma) e
encon a possí eis soluções pa a a ingi a esponsi idade, melho ando a
expe iência do u ilizado nas pla a o mas. Pa a isso, i emos p ocede à analise das
amewo ks exis en es e assim delinea uma es a égia global pa a a ingi a
esponsi idade. O esul ado dessa pesquisa ma e ializa-se na p odução amewo ks
esponsi as ao ní el dos wi e ames.
1.2 P oblema e Obje i os da In es igação
A p esen e p opos a em como p incipal obje i o encon a soluções possí eis
pa a esol e a ca ência de esponsi idade dos casos de es udo, dois módulos
GlobalCa e.
As ques ões ge ais da in es igação passam pela comp eensão dos p oblemas
de design no con ex o da saúde; pela análise da expe iência do u ilizado da
GlobalCa e; pela ca ac e ização dos u ilizado es inais da GlobalCa e; inalmen e,
p e endemos p oduzi amewo ks mais adequadas aos módulos em causa.
As p incipais ques ões da in es igação deb uçam-se na p ocu a da elação
ideal en e os componen es da in e ace e o es an e con eúdo do na egado ; na
comp eensão da hie a quia dos con eúdos de aco do com os di e en es amanhos de
na egado es, endo semp e como oco a o ganização da es u u a da na egação. Os
obje i os especí icos des e abalho são:
• in es igação sob e compo amen os pad ão pa a o digi al (de inição e
iden i icação de pad ões de design dos ci cui os do EPR Mul ipla a o ma
es udados, endo como oco a na egação);
• desen ol imen o e in es igação em e amen as e amewo ks pa a a
esponsi idade, aplicadas aos módulos GlobalCa e;
• de inição de es a égias de ges ão de mudança.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
18!
Num p imei o momen o, p ocedemos ao es udo exaus i o do concei o de
design esponsi o; seguidamen e, à elabo ação de en e is as a uma amos a da
comunidade de u ilizado es inais da pla a o ma em causa, endo em is a a
comp eensão das suas necessidades; pa alelamen e, analisamos os dados ela i os
aos egis os de u ilização do EPR Mul ipla a o ma; inalmen e, baseando-nos nas
in o mações ecolhidas, p ocedemos à ealização de amewo ks esponsi as pa a os
módulos GlobalCa e.
1.3 Me odologia da In es igação
1.3.1 Na u eza do Es udo: Mé odo e P opósi o
Op ámos po u iliza um mé odo mis o, pelo que a p esen e in es igação em
um ca á e simul aneamen e quali a i o e quan i a i o. A pa i de uma pequena
amos a de u ilizado es dos casos de es udo, p e endemos ecolhe um conjun o de
dados ela i os à esponsi idade dos p odu os es udados. Tal possibili a-nos
desen ol e concei os e chega à comp eensão de enómenos a pa i de pad ões
p o enien es da ecolha de dados, le ando a cabo uma abo dagem quali a i a.
Simul aneamen e, a a és da análise de dados ela i os aos egis os de u ilização do
EPR Mul ipla a o ma, p e endemos ecolhe um conjun o de dados numé icos,
pe mi indo-nos iden i ica quais as uncionalidades mais u ilizadas nos casos de
es udo. Des a o ma, le amos a cabo uma abo dagem quan i a i a.
Rela i amen e ao p opósi o do p esen e abalho, si ua-se no âmbi o de
In es igação e Desen ol imen o, dada a sua na u eza eó ico-p á ica.
1.3.2 Técnicas de ecol ha e anál ise de dados
Na ecolha de dados, i emos eco e a écnicas de ca á e quali a i o
(en e is as e es es de usabilidade) e quan i a i o (análise dos dados ela i os aos
egis os de u ilização do EPR Mul ipla a o ma). O obje i o é euni a maio
di e sidade de in o mação possí el, en iquecendo a nossa ecolha. Des a o ma,
p e endemos comp eende as necessidades eais da amos a em causa: a
comunidade de p o issionais de saúde que u ilizam o EPR Mul ipla a o ma.
Na análise de dados ecolhidos a a és dos egis os de u ilização, i emos
ESTRATÉGIAS DE DESIGN RESPONSIVO!
19!
u iliza a e amen a Excel.
P ocu amos iden i ica e desc e e compo amen os de usabilidade po pa e
dos u ilizado es inais, assim como obje i os p esen es nos p ocessos implemen ação
e de design dos p odu os em causa. Des a o ma, espe amos encon a
conco dâncias e disco dâncias en e os dois polos, pa a se mos capazes de iden i ica
pon os de melho ia na esponsi idade dos p odu os. A u ilização das e e idas
écnicas acompanha odo o p ocesso de in es igação:
Os mé odos de pesquisa são a amen e u ilizados pa a uma única ase –
es es são epe idos, pe mi indo cons ui uma base mais sólida de
conhecimen o, aplicá el a cada obje i o (Jones 2013).2
1.3.2.1 En e is as
Uma das écnicas que u ilizamos é a en e is a, pois pe mi e-nos comp eende
com maio de alhe a pe spe i a do u ilizado . No malmen e são ei as no local onde
o u ilizado usa o so wa e e podem se es u u adas – com um conjun o p é-
de inido de pe gun as – ou não es u u adas. Es e ipo écnica é bas an e lexí el
(Tidwell 2010). Das duas ipologias, op ámos po u iliza a écnica da en e is a
es u u ada, o ien ando o u ilizado de o ma a consegui ex ai um conjun o de
in o mações especí icas ace ca da u ilização do EPR Mul ipla a o ma.
1.3.2.2 Tes es de Usabilidade e sus A aliação da Expe iência do U ilizado
Ou a écnica mui o popula nes e con ex o é a elabo ação de es es de
usabilidade. Os u ilizado es são obse ados ao mesmo empo que en am execu a
uma de e minada a e a. Pa a isso, é-lhes pedido que execu em a e as ípicas do
p odu o em causa, de o ma a que possamos de e a e co igi coisas que o
con undam ou us em. Seguidamen e, são ano adas as di iculdades demons adas
pelos u ilizado es. Os es es de em se ealizados numa ase inicial de p oje o (K ug
2 TA: “Resea ch me hods a e a ely conduc ed once jus o a single phase — hey a e epea ed o build
a deepe base o knowledge applicable o each pu pose (Jones 2013).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
20!
2014).
A comunidade de design em indo a ques iona -se ace ca dos bene ícios de
uma me odologia al e na i a aos es es de usabilidade – a a aliação da expe iência
do u ilizado . Na e dade, ambas êm p ós e con as (K ug 2014).
No li o Don´ Make Me Think, S e e K ug (2014) de ende a impo ância de
elabo a es es de usabilidade. O au o a i ma que es a unciona semp e e que a é
mesmo o pio es e com o u ilizado e ado pode da -nos boas pis as pa a melho a
um si e e p oduz semp e esul ados posi i os.
No a igo, How o Do a UX Re iew, Joe Leech abo da es a ques ão. Apesa de
da p e e ência ao mé odo de es es de usabilidade, o au o apon a os bene ícios da
a aliação da expe iência do u ilizado em elação ao ou o mé odo: os são esul ados
mais ápidos, o cus o é meno do que o dos es es de usabilidade e é mais ácil chega
aos u ilizado es (2015).
No a igo The My h o Usabili y Tes ing, Robe Hoekman J de ende uma
isão opos a à de K ug. O au o e e e que os es es de usabilidade são bons po
á ios mo i os, mas não pa a de e mina as p io idades de uma equipa, a i mando
que es a écnica alha comple amen e na iden i icação de p oblemas. An es,
supo am a obse ação do compo amen o humano, sus en ando os ins in os dos
designe s pa a alida ideias de design (Hoekman 2009).
Das duas abo dagens an e io men e e e idas, a ealização de es es de
usabilidade pa ece-nos se a mais pe inen e pa a o p esen e es udo.
1.3.2.3 Regis os de U ilização
Depa ámo-nos com a impossibilidade de ealiza inqué i os aos u ilizado es
numa escala signi ica i a, pois não hou e ece i idade po pa e das ins i uições de
saúde em causa. Assim, os dados numé icos que sus en am a nossa análise são u o
dos dados o necidos pelos egis os de u ilização do EPR Mul ipla a o ma,
disponibilizados pelo Hospi al da CUF Po o (no que e e e à e en e EPR
En e magem) e pelo Hospi al de Vila F anca de Xi a ( e en e EPR Médico).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
21!
1.3.2.4 Técni cas de Amos agem
Rela i amen e às écnicas de amos agem, eco emos ao uso de mé odos
p obabilís icos, assegu ando que a amos a selecionada é ep esen a i a dos
u ilizado es inais da GlobalCa e. Pa a isso, são analisados egis os de u ilização do
EPR En e magem no Hospi al da CUF do Po o, e e en es ao pe íodo de 1 a 15 de
Ma ço de 2016. Pa alelamen e, são analisados os egis os de u ilização do EPR
Médico, ex aídos no Hospi al de Vila F anca de Xi a, en e Janei o e Junho de 2015.
1.3.2.5 Es u u a da Disse ação
Pa a além da in odução, seguida pelo p esen e capí ulo da con ex ualização, a
p esen e disse ação con ém mais cinco capí ulos.
No capí ulo 2 Fundamen os Teó icos pa a a Responsi idade, são desc i os os
undamen os eó icos e isuais que sus en am o abalho u u o. São explicados os
p incipais concei os necessá ios à comp eensão do que é o design esponsi o, os
pad ões de design, a me odologia de design cen ado no u ilizado , a elação en e
design e ecnologia e, inalmen e, o design no âmbi o da saúde.
No capí ulo 3 EPR Mul ipla a o ma, são ap esen ados os casos de es udo:
e en es Médico e En e magem do EPR Mul ipla a o ma, as suas uncionalidades a
as es u u as hie á quicas que os o ganizam. Seguidamen e, analisamos o
uncionamen o da sua na egação e iden i icamos os seus pad ões de design ao ní el
da na egação. Finalmen e, são iden i icadas as e amen as ecnológicas p esen es
nos mesmos.
No capí ulo 4 Me odologia, é desc i a a me odologia que sus en a a
componen e p á ica do abalho. Inicialmen e, é ap esen ado o concei o de Design
Cen ado no U ilizado ; seguidamen e, são desc i as as écnicas de ecolha de dados
u ilizadas e, po im, a ca a e ização das pe sonas e dos p incipais ci cui os
iden i icados.
O capí ulo 5 Es a égias de Responsi idade, consubs ancia-se na aplicação
dos conhecimen os p e iamen e adqui idos aos casos de es udo, a a és da
delineação de es a égias globais pa a a esponsi idade e da p odução de
amewo ks esponsi as.
Seguidamen e, no capí ulo 6 Conclusão, são desc i as as p incipais conclusões

ESTRATÉGIAS DE DESIGN RESPONSIVO!
22!
ob idas na p esen e in es igação, assim como as possibilidades de abalho u u o.
As úl imas duas secções cons i uem, espe i amen e, a bibliog a ia e os
anexos.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
23!
2 FUNDAMENTOS TEÓRICOS PARA A RESPONSIVIDADE
2.1 Design Responsi o
2.1.1 O que é o Design Responsi o?
O g ande aumen o do núme o de pessoas que in e agem com si es e
aplicações a a és de able s e ele ones ob igou os designe s a p oje a
co e amen e e de uma o ma ap op iada pa a uma ampla a iedade de
amanhos de ec ãs. A abo dagem con empo ânea pa a lida com a
di e sidade de amanhos de ec ãs é comummen e denominada de design
esponsi o (Coope , Reinmann, and C onin 2007).3
Em meados do séc. XX, os designe s g á icos Jan Tschichold, Emil Rude , e
Jose Mülle -B ockmann popula iza am o concei o de g elha ipog á ica, um sis ema
acional de colunas e linhas, a pa i do qual os módulos de con eúdo se o ganizam.
No seu li o, G id Sys ems in G aphic Design, Mülle -B ockmann e e e: “A g elha
di ide um plano bidimensional em campos meno es e um espaço idimensional em
compa imen os meno es (...) A g elha de ine a dimensão cons an e do espaço
(1961)”, adequando as p opo ções da g elha ao amanho de um pedaço de papel
em b anco. Des a o ma, o au o p e endia acili a o p ocesso de abalho dos
designe s. O sis ema de g elha des ina-se a o nece ao designe um ins umen o de
abalho p á ico, ajudando-o a lida com p oblemas isuais e a esol ê-los em e mos
de conceção, o ganização e design, com maio elocidade e con iança (Mulle -
B ockmann 1961).
3 TA: “The huge ise o people in e ac ing wi h websi es and applica ions on able s and phones has
made i c i ical ha designs ende g ace ully and p ope ly on a wide a ie y o sc een sizes. The
con empo a y app oach o handling hese di e en sc een sizes is commonly called esponsi e design
(Coope , Reinmann, and C onin 2007).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
24!
Fig. 1 Vá ias dimensões de ec ãs de di e en es disposi i os ( e i ada de Responsi e Design, Pa e ns
and P inciples, 2015).
O concei o de g elha ipog á ica oi pos e io men e ap op iado pela disciplina
de Web Design, mas com uma di e ença undamen al: a inexis ência de uma página
eal.
O concei o de Design Responsi o pa a Web e e a sua o igem em 2004 quando
o designe e p og amado Came on Adams, au o do a igo Resolu ion Dependen
Layou (2004), demons ou pela p imei a ez o exemplo de um layou de um si e
que se adap a a à la gu a do na egado . Em 2008, uma sé ie de e mos
elacionados, como esponsi o, líquido, luido e elás ico começa am a se u ilizados
pa a desc e e layou s.
No a igo Responsi e Web Design (2010), E han Ma co e in oduz o concei o
de Design Responsi o pa a Web. A a és da obse ação de um conjun o amplo de
es a égias eme gen es, o au o iden i icou uma es a égia subjacen e que, uma ez
nomeada, se o nou uma e e ência na á ea (Lea y 2010).
Ma co e se e-se do exemplo da a qui e u a in e a i a como supo e eó ico,
adap ando esse concei o ao design pa a Web. Pa a isso, az e e ência aos au o es de
In e ac i e A chi ec u e, Michael Fox e Miles Kemp que desc e em uma abo dagem
adap a i a, em que o habi an e e a es u u a se in luenciam mu uamen e (Ma co e
2010). O au o des aca ês elemen os essenciais no e e ido p ocesso me odológico:
1) um layou baseado numa g elha esponsi a; 2) imagens esponsi as; 3) media
que ies.4
E han Ma co e e e e a impo ância e u gência de uma abo dagem esponsi a
no desen ol imen o de design pa a a Web. Em luga da c iação de p oje os
4 Media que ies5 são um módulo especí ico do CSS que pe mi e que o con eúdo se adap e à
ela do
disposi i o que es á a se u ilizado (nomeadamen e às ca ac e ís icas de de inição da mesma)
(Ma co e 2010).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
25!
disconexos, o au o de ende que as di e en es e sões de um de e minado websi e
de em aze pa e da mesma expe iência cogni i a. Pa a isso, o websi e de e se
lexí el e adap á el aos di e en es disposi i os (Ma co e 2011).
2.1.2 G elha Responsi a
Depois de alguns minu os de e lexão sob e a g elha esponsi a, os
bene ícios o nam-se cla os: os designe s ganham uma amewo k acional
e es u u ada pa a o ganiza em os con eúdos e os u ilizado es ganham si es
legí eis e bem o ganizados (Ma co e 2009).5
A p opósi o do p ocesso de abalho com a g elha esponsi a aplicada ao
webdesign, Ma co e e e e que quando pensamos em esponsi idade, p ecisamos
de aduzi o design pa a algo mais luído, mais p opo cional (Ma co e 2011).
Também T en Wal on de ende a mesma isão, a i mando que ao usa mos g elhas
esponsi as, imagens esponsi as e media que ies es amos a cons ui , mais do que
uma página, uma ede de con eúdo que pode se eo ganizada em qualque
na egado , pa a melho ansmi i uma mensagem.
Em ez de pixeis, usamos Viewpo -pe cen age leng hs, compos as pelas w e
h. Des a o ma, o co po de ex o o na-se p opo cional ao amanho da janela de
exibição. Uma unidade w co esponde a 1% da janela de exibição, pelo que pa a
ob e mos a la gu a o al da mesma emos que usa 100 w (Allen 2014).
Depois de a ibui mos esponsi idade ao co po do ex o, passamos pa a a
g elha. Pa a isso, Ma co e e e e que podemos aplica o mesmo ipo de pensamen o
de p opo cionalidade usado no edimensionamen o do ex o, ao layou (Ma co e
2011).
Na sua mais ecen e ob a, Responsi e Design: Pa e ns and P inciples,
Ma co e, ale a pa a a impo ância de p ocu a mos pe cebe p o undamen e como
e po quê um de e minado elemen o de e adap a -se, alegando que de emos pa a
de pensa em e mos de colunas e linhas e começa mos a ala da qualidade dos
nossos designs esponsi os (Ma co e 2015).
5 TA: “A e a ew minu es o g iddy hinking, he bene i s become clea : designe s gain a a ional,
s uc u ed amewo k o o ganizing con en and use s gain well-o ganized, legible si es (Ma co e 2009).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
32!
caó ica do u ilizado pelo seguin e: um mul i- ouchsc een gigan e e de al a-
esolução, um sis ema ope a i o que especi ica con olos sc een- ouch
g andes o su icien e pa a se em usados com sucesso; um conjun o de
in e aces ges uais (hoje icónicas) áceis de descob i e ap ende ; um
conjun o de senso es que e elam in o mação con ex ual sob e a
o ien ação, localização, luz ambien e, e mo imen o, o que eio adiciona
um ex ao diná io ní el de in eligência a uma no a ge ação de aplicações
mó eis (Coope , Reinmann, and C onin 2007).14
A expe iência do u ilizado melho a subs ancialmen e com a adoção da
abo dagem mobile i s . Em ez de duas e sões sepa adas, as duas e sões do
mesmo si e ou aplicação passam a cons i ui uma expe iência coe en e. Segundo
W oblewski, a combinação das expe iências pa a disposi i os mó eis e pa a
desk op esul a em u ilizado es mais iéis aos dois ipos de disposi i os. O au o
ilus a a sua a i mação, dando o exemplo do Facebook, que não pensa na expe iência
pa a disposi i os mó eis como pa e do si e; an es, comp eende-a como uma o ma
de melho a a in ei a expe iência do Facebook (W oblewski 2011).
Pa alelamen e à isão de W oblewski, Ka en McG ane em e o ça a ideia de
que os con eúdos dos di e en es disposi i os de em es a em conco dância, quando
a i ma, na sua ob a Con en S a egy o Mobile, que a es a égia do con eúdo pa a
disposi i os mó eis não de e se pensada como um sa éli e da e são pa a desk op,
mos ando apenas o con eúdo que os u ilizado es dos disposi i os mó eis ão
p ecisa . Tal não signi ica que o con eúdo de a se ap esen ado da mesma o ma,
mas sim que a expe iência de e se a mesma (McG ane 2012).
14 TA: “The mobile de ice use expe ience changed o e e in June o 2007, when Apple in oduced
he iPhone. Almos o e nigh , he de ini ion o wha i mean o be a mobile in o ma ion de ice
expe ienced a adical eboo . (…) The iPhone eplaced his mess o a use expe ience wi h he ollowing: A
gian , high- esolu ion, mul i- ouchsc een, an OS ha speci ied on-sc een con ols big enough o inge s o
use success ully A se o now-iconic ges u al idioms ha we e ela i ely easy o disco e and lea n A se o
senso s deli e ing con ex ual in o ma ion abou o ien a ion, loca ion, ambien ligh , and mo emen ha
added an ex ao dina y le el o in elligence o a new gene a ion o mobile apps (Coope , Reinmann, and
C onin 2007).”

ESTRATÉGIAS DE DESIGN RESPONSIVO!
33!
2.3 Pad ões de Design, Componen es e F amewo ks
Ao longo dos úl imos anos, o deba e em o no do design esponsi o
mudou sub ilmen e, concen ando-se, não na conceção das páginas, mas
sim nos pad ões: na comp eensão dos pequenos elemen os eu ilizá eis que
compõem um sis ema de design maio (Ma co e 2015).15
2.3.1 Pad ões de Design
Pad ões de design são soluções desen ol idas a a és da análise e
sis ema ização de soluções de design eco en es pa a p oblemas conc e os. Es as
soluções não são echadas, podendo se ap op iadas de di e en es o mas na sua
aplicação. “Os pad ões de design de em se su icien emen e abs a os pa a se em
mais ou menos uni e sais na sua u ilidade, mas ao mesmo empo, especí icos o
su icien e pa a e em alguma u ilidade (Ca alhais 2008).”16
O concei o de pad ão de design oi inicialmen e desen ol ido pa a as
disciplinas da a qui e u a e do u banismo. No seu li o A Pa e n Language,
Ch is ophe Alexande ca a e iza os pad ões como soluções possí eis pa a
p oblemas eco en es. Des a o ma, o au o exp essa a elação en e um
de e minado con ex o, um p oblema e uma solução. O au o a i ma que cada pad ão
desc e e um p oblema que oco e epe idamen e num de e minado con ex o e
depois desc e e o âmago da solução pa a esse p oblema, de al o ma que al solução
pode se implemen ada inúme as ezes sem que seja usada duas ezes da mesma
o ma (1977).
15 TA: “O e he las ew yea s, he con e sa ion a ound esponsi e design has shi ed sub ly, ocusing
no on designing pages, bu on pa e ns: unde s anding he small, eusable elemen s ha comp ise a la ge
design sys em (Ma co e 2015).”
16 TA: “Design pa e ns should be su icien ly abs ac o be mo e o less uni e sal in i s use ulness, bu
simul aneously speci ic enough o be o any use (Ca alhais 2008).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
34!
Fig. 5 Ilus ação do pad ão S ai Sea s de A Pa e n Language, 1977.
Fig. 6 Fo og a ia ilus a i a do pad ão S ai Sea s de A Pa e n Language, 1977.
O concei o oi pos e io men e ado ado pelo design de so wa e. No li o
Design Pa e ns, E ich Gamma, Richa d Helm, Ralph Johnson e John Vlissides
de inem pad ões como soluções simples e elegan es pa a p oblemas especí icos na
p og amação o ien ada a obje os. Os au o es a i mam que os pad ões de design
e le em um abalho de desenho e implemen ação que se encon a explíci o na sua
o ma, u o do es o ço de designe s e engenhei os, em busca de uma melho
eu ilização e lexibilidade nas suas aplicações. Re e em ainda que os pad ões de
design cap am es as soluções de uma o ma sucin a e ácil de aplica (Gamma e al.
1994).
Qua o anos depois, Jeni e Tidwell desen ol e o mesmo concei o pa a o
design de in e ação. A au o a a i ma que cada pad ão de ine um con ex o de uso, um
p oblema, um conjun o de o ças17 que apon am pa a di e en es di eções e uma eg a
17 Na sua ob a No es on he Syn hesis o Fo m, Alexande in oduz o concei o de o ças, apliacado à
de inição de pad ões. Es e concei o é mais a de ado ado pela disciplina de design. O au o e e e que: “A
ideia de um diag ama, ou pad ão, é mui o simples. É um pad ão abs a o de elações ísicas que soluciona
um pequeno sis ema de o ças em con li o, sendo independen e de odas as ou as o ças, de odos os
diag amas possí eis (Alexande 1973).”
TA: “The idea o a diag am, o pa e n, is e y simple. I is an abs ac pa e n o physical ela ionships
which esol es a small sys em o in e ac ing and con lic ing o ces, and is independen o all o he o ces,
ESTRATÉGIAS DE DESIGN RESPONSIVO!
35!
p imá ia sob e como essas o ças podem se esol idas pa a encon a a melho
solução pa a um de e minado p oblema. São ambém o necidos bons e maus
exemplos de aplicação (Tidwell 1999).
No li o A Pa e n App oach o In e ac ion Design, Jan O Bo che s e e e que
um pad ão é uma solução comp o ada pa a um p oblema eco en e. Es a dá
especial a enção ao con ex o da sua aplicação, às “ o ças” conco en es que de em
se equilib adas, assim como às consequências posi i as e nega i as da sua aplicação
(2000). Tal como Tidwell, o au o desen ol e o concei o de pad ões pa a design de
in e ação.
Coope , Reimann e C onin, au o es do li o Abou Face, e e em: “Pad ões de
design são o mas de cap u a soluções de design ú eis e gene alizá-las pa a
esponde a p oblemas semelhan es (Coope a al. 2014).”18 Os au o es sublinham
ainda os bene ícios do uso de pad ões pa a: eduzi o empo e es o ço em no os
p oje os; melho a a qualidade de soluções de design; acili a a comunicação
en e designe s e engenhei os de so wa e e educa os designe s enquan o
p o issionais.
Aplicado de o mas di e sas pelas á ias disciplinas que o ado a am, o
concei o de pad ões man e e-se semp e como uma solução abe a e pe meá el à
in e p e ação de quem o ap op ia e u iliza. Ao mesmo empo, e le e a
sis ema ização de p ocessos e mé odos de abalho nas di e en es á eas do sabe :
De ac o, não há azão que impeça a exp essão de expe iências, mé odos
e alo es de qualque domínio do sabe na o ma de pad ão, desde que esse
domínio inclua abalho de design, c ia i idade ou esolução de p oblemas
(Bo che s 2000).19
Ainda assim, impo a esal a que exis e uma di e ença impo an e en e
pad ões de design consoan e a disciplina pa a a qual são desen ol idos. Po
exemplo, se compa a mos os pad ões de design de in e ação e os pad ões de design
a qui e ónico. No design de in e ação, os pad ões espondem não só a ques ões
es u u ais e de o ganização dos elemen os, mas ambém a ques ões dinâmicas
and o all o he possible diag ams (Alexande 1973).”
18 TA: “Design pa e ns a e a means o cap u ing use ul design solu ions and gene alizing hem o
add ess simila p oblems (Coope , Reinmann, and C onin 2007).”
19 TA: “Indeed, he e is no eason why he expe ience, me hods, and alues o any applica ion domain
canno be exp essed in pa e n o m, as long as ac i i y in ha applica ion domain includes some o m o
design, c ea i e, o p oblem-sol ing wo k (Bo che s 2000).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
36!
ela i as a mudanças nos elemen os em espos a à a i idade do u ilizado (Coope ,
Reinmann, and C onin 2007).
2.3.2 Linguagens de Pad ões e Biblio ecas de Pad ões
Uma linguagem de pad ões é cons i uída po um conjun o de pad ões,
en idades que se conec am pa a o ma um conjun o uni á io:
Os elemen os des a linguagem são en idades denominadas pad ões (...)
Cada pad ão conec a-se com os es an es, o mando uma coleção uni á ia,
uma linguagem com in ini as combinações (Alexande 1977).20
O undamen o eó ico necessá io à aplicação da linguagem desc i a po
Alexande é explicado na sua ob a The Timeless Way o Building, publicada em
1979. Também Tidwell desen ol e e ap esen a uma linguagem de pad ões pa a o
design de in e ação. A au o a e e e: “Uma linguagem des e ipo é um conjun o de
pad ões in e ligados, que pa ilham suposições, e minologias, e con ex os.”21 A
p opósi o do mesmo concei o, Bo che s a i ma que es e az e e ência a pad ões de
al o ní el, desc e endo o con ex o da sua aplicação e a pad ões de baixo ní el, que
podem se usados depois dos p imei os, pa a e ina mais p o undamen e a solução.
Es a hie a quia es u u a uma coleção ab angen e de pad ões, o mando uma
linguagem de pad ões (Bo che s 2000).
Segundo Coope e al., “Um e mo mais comum pa a desc e e uma coleção de
pad ões num domínio é biblio eca pad ões ou ca álogo de pad ões (2014).”22Assim,
linguagem de pad ões diz espei o a um conjun o de pad ões que po sua ez es ão
incluídos numa biblio eca de pad ões.
Dada a mul idisciplina idade que ca ac e iza es as biblio ecas, a sua aplicação
em acili a a comunicação en e p o issionais das di e sas disciplinas: “Um
ocabulá io comum pode melho a signi ica i amen e a comunicação den o da
20 TA: “The elemen s o his language a e en i ies called pa e ns (...) Each pa e n connec ed o o he
pa e ns so ha you g asp he collec ion o all 253 pa e ns as a whole, as a language, wi hin which you can
c ea e an in ini e a ie y o combina ions (Alexande 1977).”
21 TA: “A language o his so is a se o in e ela ed pa e ns, which sha e simila assump ions,
e minologies and con ex s (Tidwell 1999).”
22 TA: “A mo e common e m o desc ibe a collec ion o pa e ns in a domain is pa e n lib a y o
pa e n ca alogue (Coope , Reinmann, and C onin 2007).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
37!
equipa (Bo che s 2000).”23
2.3.2.1 Análise Compa a i a en e Biblio ecas de Pad ões
Na sua disse ação Web Design Pa e ns o Mobile De ices, Jo ge Ribei o
(2012) desen ol e uma análise compa a i a en e dezasseis biblio ecas de pad ões,
endo como pon o ulc al a es u u a de ap esen ação dos pad ões nas di e en es
biblio ecas. Pa ece-nos opo uno inclui as suas p incipais conclusões nes a
in es igação, cons uindo assim um enquad amen o mais comple o do concei o em
causa. As biblio ecas escolhidas pa a a cons ução da e e ida análise são:
• A Pa e n Language (Alexande 1977);
• Design Pa e ns: Elemen s o Reusable Objec -O ien ed So wa e
(Gamma e al. 1994);
• Common G ound: A Pa e n Language o Human-Compu e In e ace
Design (Tidwell 1999);
• A Pa e n App oach o In e ac ion Design (Bo che s 2000);
• The Design o Si es: Pa e ns o C ea ing Winning Websi es ( an Duyne,
Douglas K., James A. Landay 2002);
• Yahoo! Design Pa e n Lib a y (Yahoo 2006);
• Pa e ns o Compu e -Media ed In e ac ion (Schümme , Till 2007);
• ui Pa e ns (Toxboe 2007);
• In o Design Pa e ns (Beh ens 2008);
• Pa e n y (Pa e n Fac o y 2009);
• Designing Web In e aces (Sco , Bill 2009);
• Designing Social In e aces (C umlish, Ch is ian 2009);
• Banco de Pad ões de Design (Ins i u o Supe io Técnico 2010);
• Designing In e aces (Tidwell 1999);
• Designing Mobile In e aces (Hoobe , S e en 2011);
• Mobile Design Pa e n Galle y (Neil 2012).
23 TA: “Such a common ocabula y can g ea ly imp o e communica ion wi hin he eam (Bo che s
2000).”

ESTRATÉGIAS DE DESIGN RESPONSIVO!
38!
Pa a além das biblio ecas an e io men e e e idas, op ámos po inclui mais
duas biblio ecas na análise:
• Web Design Pa e ns o Mobile De ices (Ribei o 2012);
• Google Ma e ial Design Pa e ns (Google 2015).
Pa a p ocede mos a uma compa ação mais sis emá ica das biblio ecas,
cons uímos uma abela com as p incipais ca a e ís icas de cada uma delas, de
aco do com os pa âme os seguidamen e ap esen ados ( ide Anexo 1: Tabela
Compa a i a en e Biblio ecas de Pad ões). No e-se que emos como e e ência
base o abalho desen ol ido po Alexande , dada a sua impo ância enquan o
p ecu so do concei o em causa:
A ob a de Ch is ophe Alexande No es on he Syn hesis o Fo m (1964),
é um a ado indispensá el pa a o design. Nes a ob a, Alexande ap esen a
uma abo dagem bas an e sólida, me odológica e sis emá ica sob e os
p oblemas do design. Apesa de não se oca em ques ões ela i as ao
design de sis emas digi ais, ainda assim conside a as di iculdades colocadas
po con ex os ou p oblemas complexos (Ca alhais 2008).24
Alexande ado a uma abo dagem desc i i a, a a és de ex ensos pa ág a os.
Apesa de de alhada, es a o ma de ap esen ação dos pad ões não oi mui o popula ,
apenas o concei o c iado pelo a qui e o. Também Bo che s de ende uma abo dagem
mais desc i i a. Ou os au o es pa em des e concei o, e oluindo pa a e sões com
secções mais pequenas e com nomes mais ilus a i os, pe mi indo uma ápida
lei u a dos con eúdos dos pad ões.
Alexande o ganiza os pad ões de A Pa e n Language po escala espacial
(Cidades, Edi ícios e Cons ução), já que na a qui e u a es e a o é de ex ema
ele ância. No caso dos pad ões de design, á ios au o es en am ambém esponde
a essa p oblemá ica, man endo a ideia de hie a quia na o ganização das biblio ecas.
Van Duyne e al. p opõem uma o ganização em que: “quan o mais cedo o g upo
de pad ões apa ece no esquema, mais cedo de e á se usado no p ocesso de design
24 TA: “Ch is ophe Alexande ’s “No es on he Syn hesis o Fo m” (1964), is an indispensable ea y on
he p ojec o design. In his book Alexande p esen ed a e y solid, me hodical and sys ema ic app oach o
he p oblems o design and, al hough he wasn’ ocusing in he issues o designing o digi al sys ems, he
ne e heless conside ed he di icul ies posed by e y complex con ex s, o p oblems (Ca alhais 2008).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
39!
(2002).”25 Tidwell u iliza um sis ema semelhan e, no qual os pad ões se o ganizam
“pela sua p oximidade de o dem no p og esso do design (2010).”26
2.3.2.1.1 Nome
O Nome dos pad ões é um elemen o undamen al na sua de inição. Alexande
a i ma que a p ocu a po um nome é uma pa e undamen al do p ocesso de c ia e
descob i um pad ão (1977).27Tidwell suge e que não de em se usados nomes
cen ados na disciplina de design, pa a que possam se acilmen e comp eendidos
po ou os p o issionais. Alexande ado a uma no ma em que os nomes dos pad ões
são esc i os com le as maiúsculas. Au o es como Bo che s em A Pa e n App oach
o In e ac ion Design seguem o seu exemplo. Ou os op am po u iliza no mas
dis in as. Em Designing In e aces (Tidwell 2010) os nomes são esc i os em le as
maiúsculas e com co .
Algumas biblio ecas, como A Pa e n Language, u ilizam núme os pa a
iden i ica cada pad ão. Em The Design o Si es ( an Duyne, Douglas K., James A.
Landay 2002) e em Compu e -Media ed In e ac ion (Schümme 2007), são
u ilizados al abe os p óp ios que mis u am le as e núme os, pa a o ganiza os
pad ões. Es a abo dagem é mais comum em abalhos imp essos.
2.3.2.1.2 Ranking
A maio ia das biblio ecas não classi icam os pad ões. Aquelas que o azem,
u ilizam po no ma uma escala de ês pa ama es, baseada na que Alexande u iliza
em A Pa e n Language (como as biblio ecas de Bo che s e Schümme ). A Yahoo!
Design Pa e n Lib a y ado a um sis ema mui o semelhan e ao e e ido, igualmen e
o ganizado em ês pa ama es (T abalho Be a, Solução e Melho P á ica). Des acam-
se duas biblio ecas online que baseam a classi icação dos pad ões nas o ações
25 TA: "(…) he ea lie he pa e n g oup appea s on his scheme, he ea lie i should be used in he
design p ocess ( an Duyne, Douglas K., James A. Landay 2002).”
26 TA: “(…) by hei app oxima e o de in he design p og ession (Tidwell 2010).”
27 TA: “ he sea ch o a name is a undamen al pa o he p ocess o in en ing o disco e ing a pa e n
(Alexande 1977).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
40!
a ibuídas pelos u ilizado es (ui-Pa e ns (Toxboe 2007) e In o Design Pa e ns
(Beh ens 2008)).
Fig. 7 Exemplo de es u u a de pad ão de ui-Pa e ns, 2007.
2.3.2.1.3 Con ex o
Em A Pa e n Language (Alexande 1977), cada pad ão é an ecedido po um
pequeno pa ág a o que o con ex ualiza. Esse ex o in oduz o pad ão, elacionando-o
com ou os da biblio eca. Nou as biblio ecas, os pad ões podem se an ecedidos po
um pequeno ex o desc i i o, mas não com o in ui o de os elaciona com ou os
pad ões.
2.3.2.1.4 Ilus ação
Excep o Common G ound (Tidwell 1999), que ca ece de indicações isuais,
odas as biblio ecas ilus am os pad ões que as compõem. O ipo de ilus ação a ia
consoan e a á ea de es udo em causa. Alexande se e-se de o og a ias de edi ícios e
espaços. No caso das biblio ecas de pad ões de design, a noção de empo é
undamen al pa a sua in e p e ação, já que mos am os á ios es ádios de in e ação
dos u ilizado es com os pad ões. Bo che s usa o og a ias de u ilizado es a in e agi
com o sis ema. Em Pa e ns o Compu e -Media ed In e ac ions (Schümme
ESTRATÉGIAS DE DESIGN RESPONSIVO!
41!
2007), os pad ões são acompanhados de o og a ias que simbolizam os seus nomes.
In o DesignPa e ns, (Beh ens 2008) op a po uma abo dagem o iginal. Na sua
biblio eca, as habi uais imagens es á icas são subs i uídas po in e ações eais,
o e ecendo ao u ilizado a opo unidade de es a os pad ões. Des acamos a Web
Pa e ns o Mobile De ices (Ribei o 2012) que pa a além dos elemen os es u u ais
do pad ão, inclui os ambém elemen os in e a i os que o o mam.
Fig. 8 Exemplo de o og a ia e diag ama ilus a i os de A Pa e n App oach o In e ac ion Design,
2000.
Fig. 9 Exemplo de ilus ação de In o Design Pa e ns, 2008.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
48!
2.4 Design Cen ado no U ilizado
O concei o de In e ace Humano-Máquina su giu na década de 70, e e indo-
se aos aspe os do sis ema com os quais o u ilizado en a em con ac o (Mo an
1981).36 Na sequência do seu apa ecimen o, o concei o In e ação Humano-
Compu ado (daqui em dian e, IHC) oi ado ado em meados dos anos 1980. Os
au o es Baecke e Bux on de inem IHC como um conjun o de p ocessos, diálogos e
ações, a a és dos quais um u ilizado humano in e age com o compu ado (Baecke
& Bux on 1987).37 Pos e io men e, ou os au o es abo da am o mesmo concei o:
In e ação Humano-Compu ado é uma disciplina que a a ques ões de
concepção, a aliação e implemen ação de sis emas de compu ação
in e a i os pa a uso do Homem, assim como os p incipais enómenos que
os ce cam (ACM SIGCHI 1992).38
IHC a a do desenho de sis emas que pe mi am ao u ilizado execu a as suas
a i idades de uma o ma p odu i a e segu a. Es a disciplina em um papel
undamen al no desenho e desen ol imen o de odos os ipos de sis emas, desde
sis emas de con olo do á ego aé eo ou de p ocessamen o nuclea , nos quais a
segu ança é ex emamen e impo an e, a é sis emas que p i ilegiam a p odu i idade
e a sa is ação p o issional dos u ilizado es.
O p incipal obje i o da IHC é desen ol e ou melho a a segu ança, u ilidade,
e icácia e usabilidade de sis emas que incluem compu ado es (1989).39
A Usabilidade é um concei o cha e no con ex o da IHC e aduz-se na c iação
de sis emas áceis de usa . Segundo K ug, se algo é usá el, que se a e de um
websi e, um comando ou uma po a gi a ó ia – al signi ica que uma pessoa de
habilidade e expe iência média (ou mesmo abaixo da media) é capaz de descob i
como a u iliza sem g ande di iculdade (2014).40
36 TA: “(…) hose aspec s o he sys em ha he use comes in con ac wi h (Mo an 1981).”
37 TA: “se o p ocesses, dialogues and ac ions h ough which a human use employs and in e ac s
wi h a compu e (Baecke & Bux on 1987).”
38 TA:” (...) human-compu e in e ac ion is a discipline conce ned wi h he design, e alua ion and
implemen a ion o in e ac i e compu ing sys ems o human use and wi h he s udy o majo phenomena
su ounding hem (ACM SIGCHI 1992).”
39 TA: “ o de elop o imp o e he sa e y, u ili y, e ec i eness, and usabili y o sys ems ha include
compu e s (“In e ac ing wi h Compu e s” 1987).”
40 TA: “I some hing is usable — whe he i ’s a Web si e, a emo e con ol, o a e ol ing doo — i
means ha A pe son o a e age (o e en below a e age) abili y and expe ience can igu e ou how o use he

ESTRATÉGIAS DE DESIGN RESPONSIVO!
49!
Comp eende o âmbi o da IHC é coloca os u ilizado es em p imei o luga . É
em unção das sua necessidades, capacidades e p e e ências que os sis emas são
desenhados, não o con á io.
Donald No man iden i ica dois p incípios cha e que ajudam a assegu a uma
boa IHC: isibilidade (os comandos de em es a bem isí eis) e a o dance (o seu
design de e suge i a sua uncionalidade). Segundo No man, a o dance diz espei o
às p op iedades dos obje os – que ipos de ope ações e manipulações podem se
ei as pa a um de e minado obje o (2013).41 Es e p incípio em um papel
undamen al no design de obje os mas o que mais impo a é a chamada pe cei ed
a o dance, is o é, aquilo que o u ilizado iden i ica como a unção do obje o em
causa.
Pa indo dos p incípios da ICH, a me odologia de Design Cen ado no
U ilizado coloca o u ilizado no cen o do p ocesso de c iação.
2.5 Design pa a a Saúde
O cuidado e o cuidado na saúde dizem espei o ao cuidado da
Humanidade. A saúde é, simul aneamen e, pessoal e uni e sal – al ez o
único alo que impo a a oda a gen e (Jones 2013).42
A saúde é um sis ema de g ande complexidade que depende de duas
componen es opos as: a ins i ucional (hospi ais e ou as ins i uições de saúde) e a
pessoal (os p o issionais, os u en es e os seus amilia es). A na u eza da elação en e
es as duas componen es é em udo imp e isí el.
O c escen e p o agonismo da ecnologia in o má ica nas di e sas á eas,
nomeadamen e na da saúde, associado à complexidade que ca ac e iza es e se o ,
a ibui uma esponsabilidade ex ema ao p ocesso de design. A p á ica de design de
sis emas e se iços de e se p o undamen e in o mada, já que um mau design ai e
epe cussões nega i as no quo idiano de p o issionais e u en es da á ea da saúde. No
seu li o, Design o Ca e, Pe e H. Jones a i ma que a complexidade de aplicações
hing o accomplish some hing wi hou i being mo e ouble han i ’s wo h (K ug 2014).”
41 TA: ”A o dance e e s o he p ope ies o objec s - wha so s o ope a ions and manipula ions can
be done o a pa icula objec (D. No man 2013).”
42 TA: “Ca e, and heal hca e, is abou aking ca e o humani y. Heal h is pe sonal and uni e sal — i
may be he one alue e e yone ca es abou (Jones 2013).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
50!
ecnológicas pa a saúde exige que os designe s açam um comp omisso pessoal,
en ol endo anos de ap endizagem, p á ica e paciência. Espe a-se que os designe s
comp eendam e se adap em à linguagem do domínio da saúde, em de imen o da
linguagem do design e expe iência do u ilizado (2013).
Resol e es a ques ão passa po de ini es a égias pa a a cons ução de uma
linguagem uni á ia: “Se não abalha mos jun os na cons ução de uma es a égia
sis emá ica, podemos es a a con ibui pa a a agmen ação do amo.” (Jones
2013)43 Jones a i ma se necessá io delinea es a égias ao ní el do design pa a
a ingi a ino ação, já que “uma es a égia de design de e mina se os ges o es ão
co e o isco de al e a o signi icado dos se iços de saúde, ou simplesmen e
adap a a ecnologia às p á icas a uais (2013).”44
A di iculdade do p ocesso de design nes a á ea, eside sob e udo na
disc epância en e o p odu o e o e i ó io ao qual es e se des ina. Se po um lado o
design lida com concei os abs a os, a saúde abalha com sujei os conc e os, na
esolução con ínua de p oblemas p á icos (Jones 2013).
Apesa da c escen e impo ância da ecnologia, é necessá io equaciona qual o
papel que es a ocupa no amo da saúde, já que nem odos os sis emas nos cuidados
de saúde são baseados no compu ado . Aqui, as elações humanas con inuam a se
ulc ais. O a endimen o é ealizado po pessoas (desde o diagnós ico e a amen o
dos pacien es, p ocedimen os e cuidados pos e io es, assim como o planeamen o da
assis ência) e ais p ocessos não são au oma izados (Jones 2013).
A abo dagem a ual que p edomina na p á ica do design pa a a saúde coloca o
pacien e como cen o do p oje o. Bi gi Mage , p o esso de design e undado do
Se ice Design Ne wo k, a i ma que pensa no design de se iços “o objec i o é
ga an i que as in e aces sejam ú eis, u ilizá eis e desejá eis do pon o de is a do
clien e, e e icien es e dis in as do pon o de is a do o necedo (Mage , 2007).”45
Simul aneamen e, odos os elemen os con e gem pa a o e ece ao pacien e
um p odu o inal na o ma de se iço clínico. Se iços como os qua os dos hospi ais,
comunicações, assis ência, a amen o e pagamen o, podem se melho ados a a és
de p á icas de design. A implemen ação de me odologias aplicadas ao design pa a a
saúde pode se a solução pa a ans o ma expe iências agmen adas numa única
43 TA: “I we a e no wo king oge he wi h a sys emic s a egy, we may be con ibu ing o he
agmen a ion o he ield (…) (Jones 2013).
44 TA: “A design s a egy de e mines whe he manage s will isk changing he meaning o heal hca e
se ices o me ely adap echnology o cu en p ac ices (Jones 2013).”
45 TA: “(…) add esses he unc ionali y and o m o se ices om he pe spec i e o clien s. I aims o
ensu e ha se ice in e aces a e use ul, usable, and desi able om he clien ’s poin o iew, and e ec i e,
e icien , and dis inc i e om he supplie ’s poin o iew (Mage , 2007).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
51!
expe iência do u ilizado .
John Rhein ank e Shelley E enson suge em que os se iços são hoje
expe iências e que o design enquan o p á ica de e ia e olui acompanhando a essa
endência, p opo cionando aos u en es expe iências emocionais posi i as. O obje i o
do design pa a se iços es á a al e a -se: “(...) mudando do design cen ado no
u ilizado pa a uma cons ução de expe iências signi ica i as cen adas nas suas
capacidades (E enson & Dubbe ly, 2010).”46 Os hospi ais pediá icos são exemplo
da e e ida al e ação. A a és de deco ações colo idas nas pa edes e da c iação de
á eas ec ea i as, conseguem p opo ciona um ambien e mais descon aído aos seus
pacien es.
2.6 Design e Ino ação
As eo ias da ino ação celeb am o alo da ino ação dis up i a como a
mais compe i i a o ma de ino ação. Au o es ligados ao mundo
emp esa ial, alegam que es e ipo de in e enções causam mais impac o e
ge am, po encialmen e, mais luc o, já que quem as p a ica o na-se
encedo em economias de g ande escala. A u u a de p á icas comuns
o nou-se o obje i o da ino ação, se não a sua p óp ia de inição. A ino ação
dis up i a p ome e uma mudança ápida, a pa de in e enções
ecnológicas (Jones 2013).”47
Exis e uma an agonia nos desa ios que o design en en a a ualmen e enquan o
disciplina. Po um lado, há a necessidade de p oje a em unção dos u ilizado es. O
design cen ado no se humano é uma abo dagem que coloca as necessidades,
capacidades e compo amen os humanos em p imei o luga , depois p oje a em
unção dessas necessidades (D. No man 2013).
Ao mesmo empo, é p imo dial que a disciplina acompanhe e es imule o
desen ol imen o ecnológico. No a igo, Lea ning and S udying In e ac ion Design,
Miguel Ca alhais e e e que no con ex o da educação em design, as compe ências
46 TA: “(…) mo ing om ‘use -cen e ed’ design o hings o ‘abili y-cen e ed’ co-cons uc ion o
meaning ul expe iences (E enson & Dubbe ly, 2010).”
47 TA: “Inno a ion heo ies celeb a e he alue o “dis up i e” inno a ion as he mos compe i i e o m
o inno a ion. Business au ho s claim dis up i e in e en ions ha e he mos impac and p o i po en ial,
because dis up i e en an s displace winne s in la ge economies. Dis up ion o cu en p ac ices has
become an aim o inno a ion, i no i s e y de ini ion. Dis up i e o adical inno a ion p omises apid
change wi h echnological in e en ions (…)(Jones 2013).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
52!
pa a o design de in e ação de em se cons uídas sob uma li e acia p ocedimen al
mais ampla que em sido de endida como indispensá el pa a qualque p a ican e
de no os média. O au o de ende a necessidade da al abe ização nos meios a a és
dos quais as a e as in e disciplina es podem se desen ol idas e ealizadas (2008).
Mas al não passa pela obse ação dos compo amen os dos u ilizado es:
Concluímos que o design cen ado no se humano, com ên ase na
obse ação, na ideação e nos es es é ideal pa a a ino ação inc emen al,
sendo imp o á el que conduza à ino ação adical. A ino ação adical
ad ém de al e ações na ecnologia ou no signi icado. A ino ação conduzida
pela ecnologia é equen emen e o iginada po in en o es e au odida as.
Ino ação do signi icado, pelo con á io, pode se po enciada pela pesquisa
na á ea do design, mas apenas se essa pesquisa abo da ques ões
undamen ais de no os signi icados e suas in e p e ações (No man &
Ve gan i 2014). 48
No man e Ve gan i a i mam que a in es igação na á ea do design cen ado no
se humano a amen e, ou nunca, conduz à ino ação ecnológica d amá ica. Tal
acon ece po que a ino ação dos sis emas ecnológicos não esul a da me a
obse ação da p á ica. Assim, o es udo do compo amen o do u ilizado ende a
e o ça p á icas exis en es, já que segue pa âme os como obje i os e de
p odu i idade. Segundo os au o es, de e ia an es basea -se na expe imen ação pa a
alcança p á icas ino ado as .
A cha e pa a a ino ação cul u al passa, segundo No man e Ve gan i, pela
ino ação adical do signi icado. P á icas socio- écnicas podem se e o muladas sem
muda adicalmen e as ecnologias, mas sim a inalidade social. A pe spe i a de
edesenha as p á icas exis en es opõe- se à de au o es como Pe e H. Jones (2013)
que de endem a ino ação adical como obje i o. É necessá io e em causa que a
adoção de no os sis emas e ecnologias exige uma ex ensa análise e a aliação. Es e
ipo de mudanças são ex emamen e mo osas, êm um cus o ele ado e não são
necessa iamen e signi ica i as na expe iência dos u ilizado es (No man & Ve gan i
48 TA: “We conclude ha human-cen e ed design, wi h i s emphasis on i e a ed obse a ion, idea ion,
and es ing is ideally sui ed o inc emen al inno a ion and unlikely o lead o adical inno a ion. Radical
inno a ion comes om changes in ei he echnology o meaning. Technology-d i en inno a ion o en
comes om in en o s and inke e s. Meaning-d i en inno a ion, howe e , has he po en ial o be d i en
h ough design esea ch, bu only i he esea ch add esses undamen al ques ions o new meanings and
hei in e p e a ion (No man & Ve gan i 2014).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
53!
2014).
A elação en e design e ecnologia nunca es e e ão p óxima. Nunca as
endências de design, nomeadamen e no design de in e aces, o am ão
impulsionadas pelas ecnologias eme gen es. No a igo Designing wi h Con as ,
Ma k Mi chell a i ma que hoje assis imos a uma endência de ul a-minimalismo,
onde a es é ica em p io idade sob e legibilidade, acessibilidade e a descobe a. O
au o e e e ainda que al endência não mos a sinais de es a a pe de
popula idade, o que es á p ejudica a nossa expe iência com con eúdos digi ais.
Pa alelamen e, e e e que as no as ecnologias ambém compõem es a endência
(2015).
O au o coloca es a ques ão, ale ando pa a o ac o da disciplina es a a
caminha pa a a adoção de uma abo dagem eli is a: “Co emos o isco de p oje a
salas VIP, onde o cus o de en ada é um Mac com um ec ã Re ina.”49 Ao mesmo
empo, Mi chell a i ma que assis imos a uma epe ição, mui as ezes azia e sem
signi icado, a i mando que as escolhas ipog á icas e co es ão em oga com os
a uais p odu os e se iços digi ais popula es êm pouco em comum com as ma cas
que p e endem ep esen a . Os p oblemas su gem quando nos ocamos no es ilo,
sem con ex o; o ma sem unção; mime ismo como mé odo (2015).
49 TA: “We a e unning he isk o designing VIP lounges whe e he cos o en y is a Mac wi h a Re ina
display (Mi chell 2015).”

ESTRATÉGIAS DE DESIGN RESPONSIVO!
54!
3 EPR MULTIPLATAFORMA
3.1 Ap esen ação dos casos de es udo
O EPR Mul ipla a o ma é uma aplicação Web cons i uída po duas e en es
dis in as: EPR Médico, concebida pa a se usada po médicos e EPR En e magem,
di ecionada ao uso dos en e mei os.
O EPR Médico Mul ipla a o ma é um sis ema de in o mação clínica o ien ado
à mobilidade nas á eas de In e namen o, Consul a Ex e na, Bloco Ope a ó io e
U gência. A aplicação em como base a in o mação exis en e no EPR Médico e no
EPR de En e magem (as duas e en es es ão in e ligadas). A sua p incipal unção é
disponibiliza aos p o issionais de saúde a in o mação clínica necessá ia ao
acompanhamen o adequado do doen e. O EPR Médico oi o imizado pa a unciona ,
simul aneamen e, em Desk op e em Table .
O EPR En e magem Mul ipla a o ma é uma aplicação que oi desen ol ida
pa a se u ilizada em disposi i os mó eis, no egis o dos en e mei os jun o à cama
do doen e. O seu p incipal obje i o é ga an i os egis os de en e magem de o ma
segu a, ápida e e icaz em empo eal, jun o do doen e.
Na Tabela da Solução Clínica EPR Mul ipla a o ma ( ide Anexo 2),
p e endemos sin e iza as duas soluções, no que espei a às suas p incipais
ca a e ís icas. Ambas ep esen am um e olução aplicacional pa a HTML. O pe il do
Médico, encon a a-se maio i a iamen e na ecnologia D.ne . O pe il de
En e magem, e oluiu a pa i da ecnologia O acle Fo ms.
As duas soluções es ão implemen adas em di e en es ins i uições. O EPR
Médico, encon a-se nas seguin es: Hospi al de Vila F anca de Xi a, Hospi al de
San a Ma ia e Hospi al de B aga. B e emen e, se á implemen ado ambém no IPO
do Po o e no Hospi al da P elada (Po o). No caso do EPR En e magem, encon a-
se implemen ado no Hospi al da Cu (Po o) e se á b e emen e implemen ado no
IPO do Po o.
Rela i amen e aos con ex os das soluções, o EPR Médico em dois con ex os
dis in os: o do médico (“ isão descon ex ualizada”) e o do doen e (“ isão
con ex ualizada”); o EPR En e magem segue uma lógica con ex ual semelhan e, que
inclui dois con ex os dis in os: o con ex o do en e mei o ( isão descon ex ualizada) e
o con ex o do doen e ( isão con ex ualizada).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
55!
Fig. 12 Esquema-sín ese da aplicação EPR Mul ipla a o ma (p oduzida pela au o a).
No que espei a às á eas uncionais, o EPR Médico em qua o á eas dis in as,
p esen es na isão descon ex ualizada do médico: Bloco Ope a ó io, Consul a,
In e namen o e U gência. O EPR En e magem con ém a á ea do In e namen o,
associada à isão descon ex ualizada do en e mei o.
Tal como as á eas uncionais, ambém as uncionalidades de ambas as
soluções se di idem po con ex o. No caso do EPR Médico, à isão
descon ex ualizada es ão associadas as seguin es uncionalidades:
• No i icações;
• Rela ó ios;
• Ta e as.
Já à isão con ex ualizada, encon am-se associadas as seguin es:
• His ó ico Clínico;
ESTRATÉGIAS DE DESIGN RESPONSIVO!
56!
• No as Clínicas;
• Diagnós icos e P oblemas;
• eResul s;
• Rela ó ios;
• Moni o izações;
• P opos a Ci ú gica;
• Pedido de In e namen o;
• P esc ição In e na;
• P esc ição Ex e na;
• Regis o e Requisição MCDT50;
• Pedido de Consul a;
• Al a Clínica;
• Ale gias;
• Dados Demog á icos;
• PIM51;
• Ta e as.
O EPR En e magem con ém, na isão descon ex ualizada, as seguin es
uncionalidades:
• Lis a de Doen es;
• Moni o izações;
• Vigilâncias;
• Ca dex.52
Na isão con ex ualizada, encon am-se:
• His ó ico do Doen e;
• Regis o de Consumos;
• Ve i icação P é-ci ú gica;
• Ve i icação Pós-ci ú gica;
50 Meios Complemen a es de Diagnós ico e apêu ico.
51 P esc ição Médica In e na.
52 De inição de Ka dex: (...) pe mi e uma e e ência ápida às necessidades especí icas de cada pacien e
pa a ce os aspec os do cuidado do en e mei o. Pode inclui um ho á io da oma de medicamen os, ní el de
a i idade pe mi ida, capacidade do pacien e de ealiza cuidados básicos a si mesmo, die a, p oblemas
especiais, p og amação de a amen os e p ocedimen os e plano de cuidados. TA: “(...) allows quick
e e ence o he pa icula needs o each pa ien o ce ain aspec s o nu sing ca e (...) may be a schedule o
medica ions, le el o ac i i y allowed, abili y o pe o m basic sel -ca e, die , any special p oblems, a
schedule o ea men s and p ocedu es, and a ca e plan
(Mosby’s Medical Dic iona y 2009).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
57!
• A aliação Inicial;
• Plano do Doen e.
Os obje i os uncionais encon am-se associados às uncionalidades desc i as.
No que espei a à pla a o mas e aos disposi i os, ambas as soluções es ão
desen ol idas em HTML e o imizadas pa a se em u ilizadas em Desk op e Table .
3.2 EPR Médico Mul ipla a o ma
3.2.1 Funcionalidades: Menus Descon ex ualizado e Con ex ualizado
Depois do u ilizado e e ua a au en icação na aplicação ( e ig. 13), em acesso
ao Menu Descon ex ualizado (no e-se que, quando nos e e imos a
“Descon ex ualizado”, e e imo-nos ao con ex o do médico, que se encon a
descon ex ualizado po elação ao doen e). O p imei o ec ã ( e ig. 14), disponibiliza
uma sé ie de á eas uncionais: Bloco Ope a ó io, Consul a, In e namen o e U gência.
Simul aneamen e, o e e ido menu dá acesso às seguin es uncionalidades:
No i icações, Rela ó ios e Ta e as.
Fig. 13 Ec ã de au en icação na aplicação EPR Mul ipla a o ma em Desk op (p oduzida pela
au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
64!
de e minada ca ego ia” (...) ge almen e ap esen a ou as opções no mesmo ní el de
hie a quia, bem como opções da hie a quia seguin e (Kalbach 2008).”56
Ge almen e a na egação global su ge de uma o ma consis en e, semp e na
mesma posição do ec ã, pa a que o u ilizado se consiga si ua no con ex o da
es u u a. Tal não acon ece na aplicação EPR Mul ipla a o ma. A na egação global,
cons i uída pelas uncionalidades p incipais da aplicação, é subi amen e subs i uída
pela na egação local, quando su gem as uncionalidades do doen e ( e ig. 19).
Des a o ma, o u ilizado pe de o con ex o de u ilização, deso ien ando a sua
expe iência de na egação do sis ema. Apesa do cabeçalho ap esen a a in o mação
da uncionalidade p incipal an e io men e selecionada, al acon ece de uma o ma
disc e a que nos pa ece se insu icien e pa a o ien a a expe iência de na egação.
Fig. 19 As uncionalidades p incipais p esen es no ec ã an e io , são subs i uídas pelas
uncionalidades con ex ualizadas do doen e (p oduzida pela au o a).
T adicionalmen e, a na egação de odapé con ém in o mações suplemen a es
não pe inen es ao ema p incipal do si e (…) mas es e ipo de na egação não é
necessa iamen e insigni ican e (Kalbach 2008).” 57 No caso do EPR
56 TA:” Local na iga ion is used o access lowe le els in a s uc u e, below he main na iga ion pages.
The e m "local" implies "wi hin a gi en ca ego y." On a gi en page, local na iga ion gene ally shows o he
op ions a he same le el o a hie a chy, as well as he op ions below he cu en page (Kalbach 2008).”
57 TA: “T adi ionally, oo e na iga ion con ains supplemen a y in o ma ion no pe inen o main
opic o he si e (…) Bu oo e na iga ion doesn' ha e o be insigni ican (Kalbach 2008).”

ESTRATÉGIAS DE DESIGN RESPONSIVO!
65!
Mul ipla a o ma, a na egação de odapé ap esen a in o mações especí icas ela i as
ao doen e selecionado e pe mi e e e ua uma pesquisa sob e odos os doen es.
Fig. 20 Hie a quia da na egação na e en e Médico da aplicação EPR Mul ipla a o ma, em Table
(p oduzida pela au o a).
Fig. 21 Ec ã descon ex ualizado na e en e en e magem, em Table e ical e ho izon al (p oduzida
pela au o a).
A mesma es u u a de na egação epe e-se nas duas e en es da aplicação
EPR. Simul aneamen e, a o ganização dos componen es de na egação pouco a ia
nos di e en es disposi i os, ou de aco do com a sua o ien ação ( e ig. 21). Ao
pe co e a hie a quia do sis ema, o u ilizado pe de con ex o de u ilização, ques ão
que po esol e em odos os disposi i os pa a os quais a aplicação es á
ESTRATÉGIAS DE DESIGN RESPONSIVO!
66!
desen ol ida. É u gen e epensa es as duas ques ões: a al a de con ex o de
na egação na expe iência do u ilizado e a al a de esponsi idade do sis ema.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
67!
3.5 Pad ões de Na egação no EPR Mul ipla a o ma
3.5.1 Con ex o de Na egação
Fig. 22 Con ex o da Na egação na e en e médico do EPR Mul ipla a o ma (p oduzida pela
au o a).
A in o mação e e en e à uncionalidade selecionada no p imei o g au da
hie a quia dá ao u ilizado o seu con ex o de localização no sis ema.
P oblema
O u ilizado p ecisa de sabe qual a sua localização na es u u a hie á quica do
sis ema, pa a consegui ol a a ás pa a um ní el mais ele ado da hie a quia
Solução
É ap esen ada a con ex ualização ela i amen e à uncionalidade da na egação
global an e io men e selecionada pelo u ilizado .
ESTRATÉGIAS DE DESIGN RESPONSIVO!
68!
Exemplo
Fig. 23 Con ex o da Na egação no websi e do The Gua dian UK ( e i ada de Designing o Touch,
2015).
3.5.2 Menu Pe sis en e
Fig. 24 Menu Pe sis en e na e en e médico do EPR Mul ipla a o ma (p oduzida pela au o a).
Es e ipo de menu es á semp e p esen e, ge almen e no lado esque do da
página, ap esen ando odas as opções.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
69!
P oblema
O u ilizado p ecisa de na ega en e as secções p incipais da aplicação.
Solução
O menu con ém uma lis a e ical com as p incipais uncionalidades,
o ien ando o u ilizado na na egação global.
Exemplo
Fig. 25 Menu Pe sis en e no websi e do designe Rich B own ( e i ada de
h p://www. ichb own.in o)
3.5.3 Menu Deslizan e
Fig. 26 Menu Deslizan e na e en e En e magem da aplicação EPR Mul ipla a o ma (p oduzida
pela au o a).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
70!
Es e ipo de menu desliza pa a den o e pa a o a do ec ã, semp e que
necessá io.
P oblema
Nos disposi i os de meno dimensão (como é o caso do Table Ve ical) o
menu pe sis en e ocupa espaço necessá io pa a a isualização dos con eúdos.
Solução
O menu desliza pa a o a do ec ã semp e que necessá io, disponibilizando
espaço pa a a ap esen ação dos con eúdos p incipais da aplicação.
Exemplo
Fig. 27 Exemplo de menu deslizan e no acesso ao Mail no iPad a a és de um ges o swipe ( e i ada
de Designing o Touch, 2015).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
71!
3.5.4 Ba a de Na egação Ho izon al ( opo)
Fig. 28 Ba a de na egação ho izon al de opo na aplicação EPR mul ipla a o ma, e en es médico
desk op e en e magem em able e ical (p oduzida pela au o a).
Es e pad ão de na egação é ipicamen e u ilizado quando exis e uma u ilização
equen e das di e en es is as. No caso do EPR Mul ipla a o ma, dá acesso às
á ias is as sob e o mesmo con eúdo, nomeadamen e, Lis a De alhada, Lis a
No mal, In o mação sob e as legendas e il os, na e en e médico e di e en es
isões da lis a de doen es, na e en e en e magem.
P oblema
Os u ilizado es p ecisam de na ega apidamen e en e di e en es is as de
igual impo ância.
Solução
Pe mi e aos u ilizado es na ega em acilmen e di e en es ca ego ias do
mesmo ní el hie á quico.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
72!
Exemplo
Fig. 29 Exemplo de ba a de na egação ho izon al ( opo) na aplicação Li es eam ( e i ada de
h ps://li es eam.com)
3.5.5 Ba a de Na egação Ho izon al ( odapé)
Fig. 30 Ba a de na egação ho izon al de odapé na aplicação EPR Mul ipla a o ma, e en e
médico em able ho izon al (p oduzida pela au o a).
Es e pad ão de na egação é ipicamen e u ilizado quando exis e uma u ilização
equen e das di e en es is as. No caso da aplicação EPR Mul ipla a o ma,
ap esen a in o mações ela i as ao doen e selecionado. É mui o u ilizado em
disposi i os mó eis, especialmen e em iOS, onde a localização no odapé do ec ã
acili a a e gonomia. Tal a ia consoan e o sis ema ope a i o. No caso do And oid o
ESTRATÉGIAS DE DESIGN RESPONSIVO!
73!
sis ema con ém de aiz bo ões de na egação na ba a de odapé, pelo que é mais
con enien e posiciona a na egação no opo do ec ã. Des a o ma é possí el e i a o
conges ionamen o de bo ões de na egação.
P oblema
Os u ilizado es p ecisam de na ega apidamen e en e di e en es is as de
igual impo ância.
Solução
Pe mi e aos u ilizado es na ega em acilmen e di e en es ca ego ias do
mesmo ní el hie á quico.
Exemplo
Fig. 31 Exemplo de ba a de na egação ho izon al ( odapé e opo) na aplicação Facebook,
espe i amen e pa a iOS e And oid ( e i ada de Designing o Touch, 2015).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
80!
Fig. 38 Quan idade de egis os de u ilização po uncionalidade, no EPR Médico (p oduzida pela
au o a).
4.2.2 En e is as
Uma das componen es de ca á e quali a i o que sus en ou o nosso abalho
oi a ealização de en e is as aos u ilizado es inais da aplicação, pa a comp eende
as suas necessidades no uso do sis ema em causa. Simul aneamen e, com o obje i o
de comp eende a e olução do p ocesso de implemen ação da aplicação,
en e is ámos os p o issionais da Glin .
4.2.2.1 En e is as aos U ilizado es Finais
As en e is as ealizadas aos p o issionais de saúde do IPO do Po o e do
Hospi al de Vila F anca de Xi a, o am undamen ais pa a a ca a e ização dos
u ilizado es inais, no que espei a à o ma como u ilizam o EPR Mul ipla a o ma.
Fo am en e is ados dois en e mei os e dois médicos do IPO do Po o e qua o
médicos do Hospi al de Vila F anca de Xi a.
Tal possibili ou-nos iden i ica qua o pe sonas dis in as, com di e en es
obje i os na u ilização do EPR Mul ipla a o ma. Sendo o nosso p incipal oco a
esponsi idade ao ní el da na egação, as duas pe sonas p imá ias êm obje i os de
u ilização bas an e ele an es no con ex o da mobilidade do EPR Mul ipla a o ma.
No pe il do En e mei o, des acam-se como obje i os p incipais dos
u ilizado es, as uncionalidades associadas a:
• P epa ação dos doen es pa a exame;
• Recob o dos doen es após exame.
No pe il do Médico, des acam-se os seguin es obje i os inais, no uso da
aplicação:
• Funcionalidades da u gência;
• Funcionalidades do in e namen o;
• Visualização de exames.

ESTRATÉGIAS DE DESIGN RESPONSIVO!
81!
4.2.2.2 En e is as aos p o issionais da Glin
As en e is as aos p o issionais da Glin o am ealizadas no pe íodo
comp eendido en e os dias 8 e 15 de Ma ço de 2016, nas ins alações da Glin .
Fo am en e is ados oi o p o issionais (Vide Anexo 5: En e is as aos P o issionais
da Glin ), odos in e enien es no p ocesso de c iação da aplicação EPR
Mul ipla a o ma, com unções dis in as:
• Paulo Co eia, Senio Manage ;
• Mau ícia Cas o, Senio Manage ;
• Miguel Cas o, P oduc Manage ;
• F ancisco Vicen e, So wa e De elope ;
• Rui Gou eia, Senio Consul an ;
• Hélde Pai a, Senio Consul an ;
• Sónia Gomes, Beginne Consul an ;
• José Cas o, Designe .
A a és da ealização das en e is as aos p o issionais da Glin , conseguimos
a e i que:
• As duas e en es da aplicação EPR Mul ipla a o ma cons i uem e oluções
aplicacionais ( e igs. 39 e 40) no que espei a às linguagens em que es ão
desen ol idas: no caso da e en e médico, é uma e olução da ecnologia
D.ne pa a HTML; a e en e de en e magem cons i ui uma e olução da
linguagem de O acle Fo ms, ambém pa a HTML. O ac o da aplicação es a a
se adap ada pa a uma no a linguagem con ibui pa a a des agmen ação da
sua es u u a e da sua iden idade g á ica;
• A e en e Médico da aplicação EPR Mul ipla a o ma oi pensada p imei o
pa a desk op e só pos e io men e começou a se adap ada pa a able
(ho izon al), daí a sua agilidade no que espei a à esponsi idade;
• A e en e de En e magem é mais ecen e, po isso mui os dos ec ãs es ão
ainda em desen ol imen o. Nes a e en e já o am p e is os de aiz ec ãs
pa a desk op e able (ho izon al e e ical);
• A aplicação EPR En e magem oi inicialmen e pensada pa a unciona como
um p og ama s and-alone, só depois se decidiu in eg a oda a solução,
uni o mizando-a pa a c ia o EPR Mul ipla a o ma.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
82!
Fig. 39 Exemplo de ec ã do EPR En e magem na ecnologia O acle Fo ms.
Fig. 40 Exemplo de ec ã do EPR Médico na ecnologia D.Ne .
ESTRATÉGIAS DE DESIGN RESPONSIVO!
83!
4.3 Ca a e ização das Pe sonas
Modelos de u ilizado es ou pe sonas, são a qué ipos de alhados dos
u ilizado es, que ep esen am g upos dis in os de compo amen os,
a i udes, obje i os e mo i ações, obse ados e iden i icados ao longo da
ase de pesquisa (Coope , Reinmann, and C onin 2007).59
As en e is as ealizadas aos u ilizado es da aplicação EPR Mul ipla a o ma e
a ou os p o issionais de saúde que, apesa não ainda se em u ilizado es, ão
começa a u iliza a aplicação b e emen e, oi undamen al pa a a ca a e ização das
pe sonas. As en e is as o am ealizadas no Hospi al de Vila F anca de Xi a e no
IPO do Po o, endo sido en e is ados se e p o issionais de saúde, en e médicos e
en e mei os. Os dados e i ados das e e idas en e is as são de ca á e quali a i o,
que pela na u eza da écnica de ecolha de dados em causa, que pelo ac o da
amos a de en e is ados se eduzida e não ep esen a i a.
Fo am iden i icados ês ipos de pe sonas: duas p imá ias, uma secundá ia e
uma complemen a . Sendo o obje i o da p esen e in es igação es uda da
esponsi idade da aplicação EPR Mul ipla a o ma, o p incipal c i é io pa a a
dis inção dos ipos de pe sonas, oi a u ilização, ou não u ilização de di e en es
disposi i os (desk op e able ).
Cons i uem pe sonas p imá ias, aquelas que u ilizam mais do que um ipo de
disposi i o e, simul aneamen e, êm obje i os mais ab angen es no uso da aplicação.
Secundá ias, as que usam apenas o Desk op nas a e as que execu am, com obje i os
mais es i os. A pe sona complemen a u iliza a aplicação apenas numa pe spe i a
de moni o ização dos p o issionais que di ige, não sendo uma u ilizado a egula da
mesma. As imagens que se seguem ( e igs. 41, 42, 43 e 44) ilus am as pe sonas
iden i icadas, no âmbi o do p esen e p oje o.
Os aspe os comuns às qua o pe sonas iden i icadas são os seguin es:
• São p o issionais de saúde, médicos ou en e mei os;
• Sen em-se à on ade no uso de ecnologias;
• Valo izam a mobilidade e a digi alização de p ocessos;
• Não êm p oblemas cogni i os.
59 TA: “Use models, o pe sonas, a e de ailed, composi e use a che ypes ha ep esen dis inc
g oupings o beha io s, a i udes, ap i udes, goals, and mo i a ions obse ed and iden i ied du ing he
Resea ch phase (Coope , Reinmann, and C onin 2007).”
ESTRATÉGIAS DE DESIGN RESPONSIVO!
84!
4.3.1 Pe sona P imá ia 1
A p imei a pe sona p imá ia que iden i icámos ( e ig. 41) na sequência das
en e is as ealizadas aos p o issionais de saúde das ins i uições an e io men e
e e idas, u iliza a aplicação na e en e EPR Médico. Ca a e iza-se pela u ilização
simul ânea de desk op e de able , associada a uma a iedade de obje i os no uso da
aplicação EPR Mul ipla a o ma.
Tal como as es an es pe sonas, em o obje i o de egis a in o ma icamen e
odas as a e as na aplicação em causa, mas des aca algumas dessas a e as como
sendo mais ele an es, no con ex o da mobilidade:
• Funcionalidades da u gência;
• Funcionalidades do in e namen o;
• Visualização de exames.
Fig. 41 Pe sona P imá ia 1 (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
85!
4.3.2 Pe sona P imá ia 2
A segunda pe sona p imá ia iden i icada ( e ig. 42) u iliza a aplicação na
e en e EPR En e magem. Tal como a pe sona p imá ia 1, ca a e iza-se pela
u ilização simul ânea de desk op e de able , associada a uma a iedade de obje i os
no uso da aplicação EPR Mul ipla a o ma.
Tem como obje i o egis a odas as a e as que execu a in o ma icamen e. No
âmbi o da mobilidade, des acam-se as seguin es:
• P epa ação dos doen es pa a exame;
• Recob o dos doen es após exame.
Fig. 42 Pe sona P imá ia 2 (p oduzida pela au o a).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
86!
4.3.3 Pe sona secunda ia
A pe sona secundá ia que iden i icámos ( e ig. 43) u iliza a aplicação na
e en e do médico e dis ingue-se das duas pe sonas p imá ias po u iliza apenas
um ipo de disposi i o, no con ac o com a aplicação EPR Mul ipla a o ma – o
desk op. Po esse mo i o, a sua u ilização da aplicação é mais limi ada, pois não i a
pa ido da mobilidade. Ainda assim, os seus obje i os de u ilização da aplicação são
ab angen es, designadamen e:
• Na consul a dos doen es da en e ma ia;
• Na consul a dos doen es em u gência;
• Na ges ão dos gabine es.
Fig. 43 Pe sona Secundá ia (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
87!
4.3.4 Pe sona Complemen a
A pe sona complemen a iden i icada ( e ig. 44), u iliza a aplicação na
e en e EPR En e magem. A sua u ilização é me amen e na pe spe i a de
moni o ização dos p o issionais que di ige, não sendo uma u ilizado a egula da
mesma. Po es e mo i o, em uma in e ação bas an e limi ada com a aplicação.
Fig. 44 Pe sona Complemen a (p oduzida pela au o a).
.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
88!
4.4 Ci cui os Selecionados
A de inição dos ci cui os escolhidos pa a uma análise mais de alhada ( ide
Anexo 6: Ci cui os Selecionados), esul ou do c uzamen o dos dados ob idos a a és
da análise dos egis os de u ilização e das en e is as ealizadas aos p o issionais de
saúde. O p esen e es udo em como oco p incipal a esponsi idade exis en e en e
as di e en es pla a o mas (desk op e able ), mo i o pelo qual p i ilegiámos
uncionalidades que izessem sen ido no con ex o da mobilidade, sendo usadas nos
dois ipos de disposi i os.
No con ex o do EPR Médico, cen ámo-nos nas uncionalidades da U gência e
do In e namen o, de inindo um ci cui o di e en e, associado a cada uma das
e e idas uncionalidades:
1. Consul a e adiciona uma no a clínica a um doen e que se encon e em
u gência;
2. Faze uma equisição MCDT a um doen e que se encon e in e nado.
No con ex o do EPR En e magem, cen ámo-nos nas uncionalidades das
Vigilâncias e das Moni o izações, escolhendo igualmen e um ci cui o associado a
cada uma das duas:
1. Al e a igilância associada a um doen e;
2. Al e a moni o ização associada a um doen e.
Como se á explicado no Rela ó io dos Tes e de Usabilidade | Fase 1 ( ide
5.1.1.4 Ci cui o Escolhido), pa a o imiza o empo disponí el pa a a e ição de
esul ados, possibili ando a melho ia da nossa p opos a de abalho e a ealização de
no os es es, oi selecionado um único ci cui o pa a a ealização do es e de
usabilidade – Ci cui o 1: Consul a e Adiciona uma No a Clínica ao Doen e 1 da
Lis a de Doen es em U gência (EPR Médico Mul ipla a o ma).
Dos qua o ci cui os analisados, o Ci cui o 1 é o mais complexo (EPR Médico
em uma es u u a mais densa do que o EPR En e magem); encon a-se menos
comple o no que espei a à esponsi idade dos seus ec ãs; esol e ques ões de
o ganização da na egação numa es u u a uncional complexa (EPR Médico),
pe mi e adap a os esul ados ob idos pa a uma es u u a de meno complexidade
(EPR En e magem).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
89!
5 ESTRATÉGIAS DE RESPONSIVIDADE
No p esen e capí ulo ap esen amos uma p opos a de esponsi idade aplicada
ao Ci cui o 1 – Consul a e adiciona uma no a clínica a um doen e que se encon e
em u gência da e en e médico da aplicação EPR Mul ipla a o ma. O obje i o
p incipal é epensa e melho a a expe iência do u ilizado ao ní el na egação nos
di e sos disposi i os (desk op, able e sma phone).
Pa a além da me odologia de design cen ado no u ilizado , u ilizamos a
me odologia mobile i s , que nos pe mi iu esol e à pa ida um conjun o de
es ições associadas à pequena dimensão do ec ã do sma phone.
Desenha pa a ec ãs ouch implica epensa a o ma como o u ilizado in e age
com o sis ema do disposi i o em causa. Pa a isso, emos conside a quais as zonas
acessí eis, ou não pelos polega es ( ulga men e usados pelos u ilizado es pa a
in e agi com es e ipo de ec ãs).
Fig. 45 Os polega es são os dedos mais u ilizados na in e ação com sma phones ( e i ada de
Designing o Touch, 2015).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
96!
5.1.1.6 Resul ados Ob idos
A obse ação do compo amen o dos u ilizado es quando en a am execu a as
a e as do ci cui o em causa, pe mi iu-nos a e i que:
• A es u u a da na egação es á o ganizada de o ma pouco cla a, sendo
u gen e aze al e ações no sen ido de uma melho ia da sua hie a quia;
• O con ex o do u ilizado pe de-se ao longo dos sucessi os ec ãs. Is o
acon ece especialmen e no caso do sma phone e no able e ical.
Fig. 51 Pe da de con ex o de na egação no sma phone.

ESTRATÉGIAS DE DESIGN RESPONSIVO!
97!
Fig. 52 Pe da de con ex o de na egação no able e ical.
5.1.1.7 Inqué i o Sys em Usabili y Scale (SUS)
Op ou-se po u iliza a Sys em Usabili y Scale, uma escala consensualmen e
usada em Tes es de Usabilidade, pa a a e i a sa is ação dos u ilizado es. Os g á icos
que se seguem ilus am a sua opinião ela i amen e à usabilidade da nossa p opos a
pa a a aplicação EPR Mul ipla a o ma. A escala é g adual e es á comp eendida en e
os alo es 1 (Disco do comple amen e) e 5 (Conco do o almen e).
Fig. 53 Pode ia usa es a aplicação equen emen e (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
98!
Fig. 54 Achei a aplicação desnecessa iamen e complexa (p oduzida pela au o a).
Fig. 55 Achei que a aplicação e a ácil de usa (p oduzida pela au o a).
Fig. 56 I ia p ecisa do apoio de um écnico pa a se capaz de u iliza a aplicação (p oduzida pela
au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
99!
Fig. 57 Achei que as á ias unções da aplicação es a am bem in eg adas (p oduzida pela au o a).
Fig. 58 Pa eceu-me ha e mui a inconsis ência na aplicação (p oduzida pela au o a).
Fig. 59 Imagino que a maio ia das pessoas i ia ap ende a u iliza es a aplicação mui o apidamen e
(p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
100!
Fig. 60 Achei a aplicação mui o complicada de usa (p oduzida pela au o a).
Fig. 61 Sen i-me mui o con ian e ao usa a aplicação (p oduzida pela au o a).
Fig. 62 P ecisa a de ap ende bas an e an es de pode começa a usa a aplicação (p oduzida pela
au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
101!
5.1.2 Rela ó io do Tes e de Usabilidade | Fase 2
5.1.2.1 Me odologia
A segunda ase do es e de usabilidade da nosso p opos a pa a aplicação EPR
Mul ipla a o ma oi ealizada nos dias 7 e 8 de Junho de 2016, nas ins alações da
Glin e em casa de dois pa icipan es anónimos. Pa icipa am nes e es e qua o
elemen os da equipa de Design da Glin e dois es udan es da Faculdade de
Engenha ia da Uni e sidade do Po o.
Tal como na ase 1, o am ealizados es es de ca á e o ma i o, de aco do
com a ase e a na u eza da nossa p opos a ( ide 5.1.1 Rela ó io do Tes e de
Usabilidade | Fase 1, 5.1.1.1 Me odologia).
5.1.2.2 Obje i o do Tes e de Usabilidade
Sendo o nosso oco de es udo a na egação da aplicação EPR Mul ipla a o ma,
p e endemos comp eende de que o ma os u ilizado es in e agem com o sis ema, ao
ní el da na egação do mesmo. Man endo o obje i o do es e ealizado na ase 1,
p e endemos e colma adas as alhas de e adas no deco e do mesmo:
• A es u u a da na egação encon a a-se, numa p imei a ase, o ganizada
de uma o ma pouco cla a. Fo am ei as al e ações na sua es u u a, no
sen ido de uma melho ia da hie a quia da mesma;
• O con ex o do u ilizado pe dia-se ao longo dos sucessi os ec ãs. Tal
acon ecia especialmen e no caso do sma phone.
5.1.2.3 Pa icipan es
Não ha endo possibilidade de ealiza o es e no con ex o eal de u ilização do
EPR Mul ipla a o ma, eco emos, al como na ase 1, à equipa esponsá el pela sua
c iação: ês designe s da Glin HS e uma consul o a, odos elemen os da equipa de
P odu o. Simul aneamen e, pa icipa am no es e em causa dois colegas, es udan es
da Faculdade de Engenha ia da uni e sidade do Po o.
Todos os pa icipan es es ão bas an e à on ade no uso de ecnologias. O

ESTRATÉGIAS DE DESIGN RESPONSIVO!
102!
p imei o g upo de pa icipan es encon a-se amilia izado com a aplicação em causa,
ao con á io do segundo g upo.
5.1.2.4 Disposi i os
Sendo o p incipal obje i o do p esen e abalho o es udo da esponsi idade da
aplicação EPR Mul ipla a o ma, o es e incluiu amewo ks esponsi as do ci cui o
escolhido desenhadas pa a os seguin es disposi i os:
• Sma phone (iPhone);
• Table (iPad ho izon al e e ical);
• Desk op.
5.1.2.5 Ci cui o escolhido
Pa a o imiza o empo disponí el pa a a e ição de esul ados, possibili ando a
melho ia da nossa p opos a de abalho e a ealização de no os es es, oi
selecionado o mesmo pe cu so u ilizado na an e io ase de es es – Ci cui o 1:
Consul a e Adiciona uma No a Clínica ao Doen e 1 da Lis a de Doen es em
U gência (EPR Médico Mul ipla a o ma). Os mo i os pa a a escolha des e ci cui o
man i e am-se ( ide 5.1.1 Rela ó io do Tes e de Usabilidade | Fase 1, 5.1.1.5 Ci cui o
Escolhido).
5.1.2.6 Resul ados Ob idos
A obse ação do compo amen o dos u ilizado es quando en a am execu a as
a e as do ci cui o em causa, pe mi iu-nos a e i que:
• Hou e uma melho ia signi ica i a no con ex o de na egação, pelo que os
u ilizado es já não ap esen am di iculdade em a ingi o obje i o p opos o,
nesse âmbi o;
• Os u ilizado es demons a am alguma di iculdade em descob i o bo ão
e e en e às uncionalidades con ex ualizadas do doen e (pa a acede às
“No as Clínicas” do mesmo);
• Ou a di iculdade demons ada pela gene alidade dos u ilizado es diz
ESTRATÉGIAS DE DESIGN RESPONSIVO!
103!
espei o à ação “Vol a ”, uma ez selecionada a “No a Clínica 1”, pa a
ol a à lis a das No as Clínicas;
• Ao con á io do que se ia de espe a , o am de e adas di iculdades
semelhan es nos dois g upos dis in os de u ilizado es.
Fig. 63 Melho ia signi ica i a no con ex o de na egação em sma phone (p oduzida pela au o a).
Fig. 64 Uma ez selecionada a “No a Clínica 1”, os u ilizado es demons a am di iculdade em ol a
pa a a lis a No as Clínicas.
ESTRATÉGIAS DE DESIGN RESPONSIVO!
104!
5.1.2.7 Inqué i o Sys em Usabili y Scale (SUS)
Os g á icos que se seguem ilus am a opinião dos u ilizado es, ela i amen e à
usabilidade da nossa p opos a pa a a aplicação EPR mul ipla a o ma. A escala é
g adual e es á comp eendida en e os alo es 1 (Disco do comple amen e) e 5
(Conco do o almen e).
Fig. 65 Pode ia usa es a aplicação equen emen e (p oduzida pela au o a).
Fig. 66 Achei a aplicação desnecessa iamen e complexa (p oduzida pela au o a).
Fig. 67 Achei que a aplicação e a ácil de usa (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
105!
Fig. 68 I ia p ecisa do apoio de um écnico pa a se capaz de u iliza a aplicação (p oduzida pela
au o a).
Fig. 69 Achei que as á ias unções da aplicação es a am bem in eg adas (p oduzida pela au o a).
Fig. 70 Pa eceu-me ha e mui a inconsis ência na aplicação (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
112!
Fig. 80 P imei os ní eis de na egação local nos di e en es disposi i os (p oduzida pela au o a)
O úl imo ní el da na egação local diz espei o a ações especí icas das
uncionalidades selecionadas. Localiza-se la e almen e, em desk op e able
ho izon al e no undo do ec ã, em able e ical e sma phone ( e ig. 81). Pa a
esol e as condicionan es in ínsecas ao sma phone, designadamen e o pouco
espaço de ec ã disponí el, op ámos esconde a na egação local num bo ão que a
e ela quando necessá io ( e ig. 82).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
113!
Fig. 81 Úl imo ní el da na egação local nos di e en es disposi i os (p oduzida pela au o a).
Fig. 82 P opos a de solução pa a “mais ações” em sma phone: bo ão que expande, mos ando mais
opções de ações possí eis (p oduzida pela au o a).
Quando a uncionalidade “No a Clínica” é selecionada, es a unciona como um
i em ex ensí el, e elando as suas in o mações sem sai da lis a e ical que a inclui
( e ig. 83).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
114!
Fig. 83 P opos a de solução pa a o ec ã “No a Clínica Selecionada” (p oduzida pela au o a).
Fig. 84 P opos a de ec ã “Adiciona No a Clínica” nos di e en es disposi i os (p oduzida pela
au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
115!
A p opos a inal cons i ui uma melho ia signi ica i a ela i amen e às duas
an e io es. Consegue soluciona :
• A o ganização da hie a quia da na egação, que se ap esen a de uma
o ma cla a;
• A con ex ualização do u ilizado , que em semp e e e ência dos
sucessi os ní eis de na egação selecionados, localizando-se;
• A e gonomia nos di e en es ec ãs, pois odos es ão desenhados pa a que
os bo ões sejam acessí eis aos polega es.
O ci cui o comple o, nos di e en es disposi i os, pode se acedido aqui:
iPhone: h ps://ma elapp.com/1bhbde8
iPad Ho izon al: h ps://ma elapp.com/22a4j7e
iPad Ve ical: h ps://ma elapp.com/67a74eg
Desk op: h ps://ma elapp.com/67a dcg
ESTRATÉGIAS DE DESIGN RESPONSIVO!
116!
6 CONCLUSÃO
6.1 Sa is ação dos Obje i os
A p esen e disse ação em como obje i o p incipal delinea es a égias de
esponsi idade pa a um caso de especí ico: a aplicação web EPR Mul ipla a o ma,
da Glin Globalca e. A aplicação em causa não oi concebida de aiz pa a se adap a
a di e en es disposi i os nem às suas esoluções, con endo ec ãs desenhados de
o ma semelhan e pa a os di e en es supo es. Pa indo do es udo ap o undado dos
concei os de design esponsi o e de pad ões de design e sus en ando-nos numa
me odologia de design cen ado no u ilizado , omos capazes de analisa e iden i ica
pon os de melho ia no caso de es udo.
O p imei o pon o de melho ia iden i icado diz espei o à es u u a de
na egação do caso de es udo. A a és da análise da es u u a da sua hie a quia
uncional, iden i icámos seis ní eis hie á quicos na e en e médico e cinco, na
e en e de en e magem. Ambas as e en es da aplicação es ão o ganizadas
segundo es u u as densas que con êm mui a quan idade de in o mação. A
na egação es á o ganizada de uma o ma pouco cla a e in ui i a, já que os sucessi os
ní eis da hie a quia ão subs i uindo os an e io es.
O segundo pon o que iden i icámos oi a descon ex ualização do u ilizado . A
al a de hie a quia na es u u a de na egação em epe cussões signi ica i as na
expe iência do u ilizado . O a o de na egação o na-se con uso, já que o u ilizado
pe de con ex o à medida que pe co e os di e en es ní eis hie á quicos da aplicação.
En e is as ealizadas a ce ca de oi o u ilizado es inais da aplicação ie am ajuda a
con i ma ais agilidades.
Ou a necessidade de melho ia iden i icada oi a de desenha os di e sos ec ãs
pa a a in e ação a a és do oque. De ac o, os elemen os de na egação não es ão
colocados de o ma e gonómica, já que es ão semp e na mesma posição
independen emen e do disposi i o em causa ou da sua o ien ação.
Com o obje i o de esol e os pon os a ás iden i icados, ealizámos uma
p opos a p á ica pa a o Ci cui o 1: Consul a e Adiciona uma No a Clínica ao
Doen e 1 da Lis a de Doen es em U gência (EPR Médico Mul ipla a o ma). Dada a
complexidade do ci cui o escolhido, assim como a es u u a base da aplicação, é
possí el aplica es a o ganização aos es an es ci cui os do EPR Mul ipla a o ma.
A me odologia de design cen ado no u ilizado e elou-se essencial pa a a
cons ução da p opos a inal. Os es es de usabilidade ealizados com os u ilizado es
ESTRATÉGIAS DE DESIGN RESPONSIVO!
117!
o am de e minan es pa a iden i ica pon os de melho ia, e le indo-se numa
cons an e e olução das sucessi as ases de abalho. Pa alelamen e, a adoção da
me odologia de design mobile i s , pe mi iu-nos o imiza o empo de abalho,
iden i icando os maio es cons angimen os numa ase inicial da p opos a p á ica.
A p opos a inal es á cons uída de aco do com as seguin es linhas condu o as:
o ganiza a na egação semp e e le indo a hie a quia do sis ema em causa; cla i ica
o con ex o do u ilizado , p i ilegiando a sua o ien ação à medida que pe co e os
di e sos ní eis da hie a quia; u iliza pad ões de design esponsi os no desenho dos
elemen os uncionais que compõem os di e sos ec ãs; localiza os elemen os de
na egação em zonas e gonómicas, p epa ando odos os disposi i os pa a a in e ação
a a és do oque.
As es a égias a ás iden i icadas cons i uem linhas o ien ado as que podem
se aplicadas a qualque sis ema. A aplicação de di e izes esponsi as, assim como
de uma me odologia cen ada no u ilizado , e elam-se undamen ais pa a melho a
a expe iência do u ilizado .
6.2 Limi ações e T abalho Fu u o
As p incipais limi ações encon adas ao longo do p esen e p oje o de
in es igação o am a impossibilidade de ealiza inqué i os e es es de usabilidade
aos u ilizado es inais do EPR Mul ipla a o ma. Simul aneamen e, o limi e de
empo impediu-nos de eplica a p opos a dos wi e ames inais nos es an es
ci cui os selecionados. Pa ece-nos que a p opos a poe se acilmen e adap ada aos
mesmos, no en an o, al hipó ese não oi es ada.
O p esen e abalho cen ou-se numa ques ão especí ica da abo dagem
esponsi a: a na egação. Seguindo a mesma linha condu o a, u u amen e pode iam
se ap o undadas ou as p oblemá icas, designadamen e: a inse ção e edição de
dados no sis ema ou a iconog a ia.
Seguindo um io condu o di e en e, mas igualmen e ele an e no âmbi o do
design enquan o disciplina, se ia a comp eensão da e olução da ecnologia
enquan o condicionan e do design. A a és da análise da e olução da aplicação ao
longo das suas di e en es e sões, es abelece um pa alelismo en e design e
ecnologia, disse ando sob e a sua in e dependência.

BIBLIOGRAFIA
ACM SIGCHI. 1992. Cu icula o Human-Compu e In e ac ion. New Yo k, New
Yo k: The Associa ion o Compu ing Machine y.
Adams, Came on. 2004. “Resolu ion Dependen Layou .”
h p://www. hemaninblue.com/w i ing/pe spec i e/2004/09/21/. 29 de Dezemb o
2015.
Alexande , Ch is ophe . 1973. No es on he Syn hesis o Fo m. London: Ox o d
Uni e si y P ess. doi:64-13417.
———. 1977. A Pa e n Language: Towns, Buildings, Cons uc ion. New Yo k, New Yo k:
Ox o d Uni e si y P ess.
Allen, Ryan. 2014. “Responsi e Type and Mo e Wi h Only CSS.”
h ps://medium.com/@ yanallen_com/ esponsi e- ype-wi h-only-css-
82b846370cc9#.x41sd x8. 22 de Junho 2016.
Apple Inc. “Designing o iOS.” ios Human In e ace Guidelines,
h ps://de elope .apple.com/lib a y/ios/documen a ion/Use Expe ience/Concep u
al/MobileHIG/. 22 de Junho 2016.
Baecke & Bux on. 1987. “Readings in Human-Compu e In e ac ion: A
Mul idisciplina y App oach.” San Ma eo: Mo gan Kau mann Publishe s.
Beh ens, Ch is ian. 2008. “In o Design Pa e ns.”
h p://www.niceone.o g/in odesignpa e ns/index.php5#/pa e ns.php5. 4 de
Janei o 2016.
Bo che s, Jan O. 2000. “A Pa e n App oach o In e ac ion Design.” New Yo k.
h ps://hci. w h-aachen.de/ma e ials/publica ions/bo che s2000a.pd . 4 de
Janei o 2016.
Boul on, Ma k. 2012. “A New Canon.”
h p://www.ma kboul on.co.uk/jou nal/anewcanon. 4 de Janei o de 2016.
Ca alhais, Miguel. 2008. “Lea ning and S udying In e ac ion Design h ough Design
Pa e ns. In oduc ion & Con ex .” PLoP. Nash ille, TN.
Cla k, Josh. 2015. Designing o Touch. The Mobile Book. New Yo k, New Yo k: A Book
Apa .
Coope , Alan, Robe Reinmann and Da id C onin. 2007. Abou Face 3.0: The
Essen ials o In e ac ion Design. In o ma ion Visualiza ion. 4 h ed. Vol. 3.
Indianopolis, Indiana: John Wiley & Sons, Inc. doi:10.1057/palg a e.i s.9500066.
C umlish, Ch is ian and E in Malone. 2009. Designing Social In e aces:
P inciples, Pa e ns, and P ac ices o Imp o ing he Use Expe ience. Sebas opol,
Cali o nia: O’Reilly Media, Inc.
"Ema ke ee ". 2014. h p://www.ema ke e .com/A icle/Sma phone-Use s-
Wo ldwide-Will-To al-175-Billion-2014/1010536. 22 de Junho 2016.
Gamma, E ich, Richa d Helm, Ralph Johnson and John Vlissides. 1994.
Design Pa e ns: Elemen s o Reusable Objec -O ien ed So wa e. Edi ed by
Addison-Wesley P o essional. 1s ed. Massachuse s. doi:10.1093/ca cin/bgs084.
Google. 2015. “Google Ma e ial Design Guidelines.” 2016.
h ps://www.google.com/design/spec/pa e ns/da a- o ma s.h ml#. 22 de Junho
2016.
Hoekman, J . Robe . ·. 2009. “The My h o Usabili y Tes ing.” Usabili y, Use
Resea ch . h p://alis apa .com/a icle/ he-my h-o -usabili y- es ing. 22 de Junho
2016.
Hoobe , S e en, and E ic Be kman. 2011. Designing Mobile In e aces. Sebas opol,
Cali o nia: O’Reilly Media, Inc.
Ins i u o Supe io Técnico. 2010. “Banco de Pad ões de Design.”
doi:h p://bpd.is .u l.p /. 1 de janei o 2016.
“In e ac ing wi h Compu e s.” 1987. In e ac ing wi h Compu e s.
h ps://iwc.ox o djou nals.o g. 22 de Junho 2016.
Jones, Pe e H. 2013. Design o Ca e: Inno a ing Heal hCa e Expe ience. Edi ed by
Rosen eld Media. B ooklyn, New Yo k: Louis Rosen eld. www. osen eldmedia.com.
Kalbach, James. 2008. Designing Web Na iga ion. Sebas opol, Cali o nia: O’Riley
Media.
K ug, S e e. 2014. Don’ Make Me Think, Re isi ed: A Common Sense App oach o
Web Usabili y. Edi ed by Elisabe h Bayle. Thi d. US. www.new ide s.com.
Lea y, B ian. 2010. “Design Thinking – a New Men al Model o Value Inno a ion.”
S a egy & Leade ship 38 (3). S an o d Social Inno a ion Re iew [In e ne ]: 5–14.
doi:10.1108/10878571011042050.
Leech, Joe. 2015. “How o Do a UX Re iew.” UX.
h ps://24ways.o g/2015/how- o-do-a-ux- e iew/. 22 de Junho 2016.
Ma co e, E han. 2009. “Uns opabble Robo Ninja - Fluid Images.”
h p://uns oppable obo ninja.com/en y/ luid-images/. 22 de Junho 2016.
———. 2010. “A Lis Apa - Responsi e Web Design.”
h p://alis apa .com/a icle/ esponsi e-web-design. 22 de Junho 2016.
———. 2011. Responsi e Web Design. New Yo k: A Book Apa .
———. 2015. Responsi e Web Design: Pa e ns and P inciples. New Yo k: A Book Apa .
McG ane, Ka en. 2012. Con en S a agy Fo Mobile. New Yo k: A Book Apa .
Mi chell, Ma k. 2015. “Designing wi h Con as .” Design .
h ps://24ways.o g/2015/designing-wi h-con as /. 22 de Junho 2016.
Mo an, Thomas. 1981. “Thomas P. Mo an The Command Language G amma : A
Rep esen a ion o he Use In e ace o In e ac i e Compu e Sys ems.”
In e na ional Jou nal o Man-Machine S udies.
Mosby’s Medical Dic iona y. 2009. Else ie .
Mulle -B ockmann, Jose . 1961. G id Sys ems In G aphic Design: A Visual
Communica ion Manual o G aphic Designe s, Typog aphe s and Th ee
Dimensional Designe s.
h p://schola .google.com/schola ?hl=en&b nG=Sea ch&q=in i le:G id+Sys ems+i
n+G aphic+Design#8 nh p://schola .google.com/schola ?hl=en&b nG=Sea ch&q
=in i le:G id+Sys ems+In+G aphic+Design#8. 23 de dezemb o 2015.
Neil, The esa. 2012. Mobile Design Pa e n Galle y. Sebas opol, Cali o nia: O’Riley
Media.
No man, Don. 2013. The Design o E e yday Things. New Yo k, New Yo k: Basic
Books.
No man, Donald and Robe o Ve gan i. 2014. “Inc emen al and Radical
Inno a ion: Design Resea ch Ve sus Technology and Meaning Change Robe o
Ve gan i -Bio.” Design Issues, 30(1), 78-96. www. e gan i.com.
Pa e n Fac o y. 2009. “Pa e n y Open Lib a y.” h p://pa e n y.com. 22 de Junho
2016.
Ribei o, Jo ge. 2012. “Web Design Pa e ns o Mobile De ices,” no. July: 158.
h p:// eposi o io-abe o.up.p /handle/10216/64860. 22 de Junho 2016.
Schümme , Till, and S ephan Lukosch. 2007. Pa e ns o Compu e -Media ed
In e ac ion. Chiches e , England: Wiley Publishing.
Sco , Bill, and The esa Neil. 2009. Designing Web In e aces: P inciples and
Pa e ns o Rich In e ac ions. Sebas opol, Cali o nia: O’Reilly Media.
Tidwell, Jeni e . 1999. “Common G ound: A Pa e n Language o Human-Compu e
In e ace Design.” h p://www.mi .edu/~j idwell/common_g ound.h ml.
———. 2010. Designing In e aces. Canada: O’Reilly Media.
Toxboe, Ande s. 2007. “UI Pa e ns.” h p://ui-pa e ns.com/.
an Duyne, Douglas K., James A. Landay, and Jason I. Hong. 2002. The Design
o Si es: Pa e ns o C ea ing Winning Websi es. 2nd ed. New Je sey: Uppe
Saddle Ri e .
W3C. 2012. “Media Que ies: W3C Recommenda ion 19 June 2012.”
h p://www.w3.o g/TR/css3-mediaque ies/. 22 de Junho 2016.
———. 2015. “G ace ul Deg ada ion e sus P og essi e Enhancemen .”
h ps://www.w3.o g/wiki/G ace ul_deg ada ion_ e sus_p og essi e_enhancemen
. 22 de Fe e ei o de 2015.
W oblewski, Luke. 2011. Mobile Fi s . 6 h ed. New Yo k: A Book Apa .
Yahoo. 2006. “Yahoo Design Pa e n Lib a y.”
h ps://de elope .yahoo.com/ypa e ns/abou /. 22 de Junho 2016.
Página de Login
EPR Médico EPR En e magem
Bloco
Ope a ó io Consul a In e namen o U gência No ificações Rela ó ios Ta e as
Á R E A S F U N C I O N A I S F U N C I O N A L I D A D E S
Lis a de Doen es
em Bloco
Ope a ó io
Lis a de Doen es
em
In e namen o
Lis a de
No ificações
Lis a de Doen es
em
Consul a
Lis a de Doen es
em
U gência
Lis a de
Rela ó ios
Lis a de
Ta e as
Doen e
Selecionado
Lemb e es
Adicionados
Ta e a
Selecionada
Doen e
Selecionado
Doen e
Selecionado
Doen e
Selecionado
Ta e as
do Doen e
V I S Ã O C O N T E X T U A L I Z A D A
V I S Ã O D E S C O N T E X T U A L I Z A D A
Rela ó ios His ó ico
Clínico
No as
Clínicas
P opos a
Ci ú gica
Pedido
de
In e namen o
P esc ição
Ex e na
Diagnós ico
e P oblemas
P esc ição
In e na
Requisição
MCDT
Pedido
de Consul a
P óxima
Consul a
Al a
Clínica
Regis o
MCDT Ale gias Dados
Demog áficos PIM Ta e as
V I S Ã O D E S C O N T E X T U A L I Z A D A
V I S Ã O C O N T E X T U A L I Z A D A
Lis a de
Episódios do
Doen e
Especificação
dos
Episódios
No as Clínicas
do
Doen e
Lis a de
P oblemas do
Doen e
eResul s Moni o izações
Lis a de
Documen os
disponí eis no
eposi ó io eResul s
Lis a das
Moni o izações
do Doen e
Lis a das
P opos as
Ci ú gicas
do Doen e
In o mação
Clínica
In o mação
Ge al Ou os
Lis a dos
Pedidos de
In e namen o
P esc ição
de
disposi i os
Lis a
de
Requisições
Dados
Ge ais da
P esc ição
Resumo Medicamen os
I ems
não
medicamen os
Die a
Lis a
de MCDTs
egis ados
Lis a
de Pedidos
de Consul a
Ma cação
de Consul as
Finalização da
Al a Clínica
Em
desen ol imen o
Em
desen ol imen o
Dados
demog áficos
do Doen e
Ta e as
associadas ao
Doen e
Lis a de
Ta e as de odos
os Doen es
Associa no a
a e a ao
Doen e
Especificação
dos
P oblemas
Lis a de
Rela ó ios do
Doen e
In o mação
Ge al
Especificação
dos
Pedidos
Especificação
das
Requisições
Fig. 87 O ganog ana Funcional EPR Médico Mul ipla a o ma (p oduzida pela au o a).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
129!
Anexo 4: O ganog ama Funcional EPR En e magem Mul ipla a o ma
Página de Login
EPR En e magem EPR Médico
Lis a
de Doen es Ca déx Moni o izações Vigilâncias
Doen e
Selecionado
Lis a da
Medicação
a se alidada
de odos os Doen es
Lis a de
Moni o izações
de odos os Doen es
Lis a de
Vigilâncias
de odos os Doen es
SOS Ho as Camas
His ó ico
Clínico
Plano do
Doen e
Regis o de
Consumos
A aliação
Inicial
Ve ificação
P é-Ci ú gica
Ve ificação
Pós-Ci ú gica
Lis a de
Episódios do
Doen e
Episódio
Selecionado
Lis a de
Medicações do
Doen e
Não
Adminis ação Adminis ação Em cu so Obse ações Anula
Lis a de
Ta e as
Pós-Ci ú gicas
Documen os
Associados
Lis a de
Ta e as
P é-Ci ú gicas
Documen os
Associados
Inse i
Consumos
do Doen e
In o mação
do
Doen e
In o mação
Clínica
Ma ca Código P odu o
V I S Ã O D E S C O N T E X T U A L I Z A D A
V I S Ã O D E S C O N T E X T U A L I Z A D A
V I S Ã O C O N T E X T U A L I Z A D A
V I S Ã O C O N T E X T U A L I Z A D A
Fig. 88 O ganog ama Funcional EPR En e magem Mul ipla a o ma (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
131!
Anexo 5: En e is as aos p o issionais da Glin
ESTRATÉGIAS DE DESIGN RESPONSIVO!
132!
Fig. 89 En e is a a Paulo Co eia (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
133!
Fig. 90 En e is a a Mau ícia Cas o (p oduzida pela au o a).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
134!
Fig. 91 En e is a a Miguel Cas o (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
135!
Fig. 92 En e is a a F ancisco Vicen e (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
136!
Fig. 93 En e is a a Rui Gou eia (p oduzida pela au o a).
ESTRATÉGIAS DE DESIGN RESPONSIVO!
137!
Fig. 94 En e is a a Hélde Pai a (p oduzida pela au o a).
Página de Login
EPR En e magem
EPR Médico
SOS Ho as Camas
V I S Ã O D E S C O N T E X T U A L I Z A D A
V I S Ã O D E S C O N T E X T U A L I Z A D A
V I S Ã O C O N T E X T U A L I Z A D A
V I S Ã O D E S C O N T E X T U A L I Z A D A
Moni o izações
Lis a de
Moni o izações
de odos os Doen es
Fig. 100 Ci cui o 2 EPR En e magem: Al e a moni o ização associada a um doen e (p oduzida pela au o a).

ESTRATÉGIAS DE DESIGN RESPONSIVO!
145!
Anexo 7: Wi e ames Finais
Fig. 101 P opos a pa a a página de login do EPR Mul ipla a o ma (p oduzida pela au o a).
Fig. 102 P opos a pa a a página inicial de uncionalidades, do EPR Mul ipla a o ma (p oduzida pela au o a).
Fig. 103 P opos a pa a a página de uncionalidades “doen es em u gência”, do EPR Mul ipla a o ma
(p oduzida pela au o a).
Fig. 104 P opos a pa a a página “doen e em u gência selecionado” do EPR Mul ipla a o ma
(p oduzida pela au o a).

Fig. 105 P opos a pa a página “No as Clínicas do doen e selecionado” da aplicação EPR Mul ipla a o ma
(p oduzida pela au o a).
Fig. 106 P opos a pa a a página “No a Clínica selecionada” da aplicação EPR Mul ipla a o ma
(p oduzida pela au o a).
Fig. 107 P opos a pa a página “Vol a No as Clínicas” do EPR Mul ipla a o ma (p oduzida pela au o a).
Fig. 108 P opos a de sucessão de ec ãs em sma phone “Mais ações” do EPR Mul ipla a o ma (p oduzida pela
au o a).