Estratégias de Design Responsivo - Caso de Estudo: EPR Multiplataforma da Glintt Globalcare

MESTRADO MULTIMÉDIA - ESPECIALIZAÇÃO EM CULTURA E ARTES ESTRATÉGIAS DE DESIGN RESPONSIVO Caso de Estudo: EPR Multiplataforma da Glintt GlobalCare ! Maria!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 ! Projeto 17 ! 1.2 ! Problema e Objetivos da Investigação 17 ! 1.3 ! Metodologia da Investigação 18 ! 1.3.1 ! Natureza do Estudo: Método e Propósito 18 ! 1.3.2 ! Técnicas de recolha e análise de dados 18 ! 1.3.2.1 ! Entrevistas 19 ! 1.3.2.2 ! Testes de Usabilidade versus Avaliação da Experiência do Utilizador 19 ! 1.3.2.3 ! Registos de Utilização 20 ! 1.3.2.4 ! Técnicas de Amostragem 21 ! 1.3.2.5 ! Estrutura da Dissertação 21 ! 2 ! FUNDAMENTOS TEÓRICOS PARA A RESPONSIVIDADE 23 ! 2.1 ! Design Responsivo 23 ! 2.1.1 ! O que é o Design Responsivo? 23 ! 2.1.2 ! Grelha Responsiva 25 ! 2.1.3 ! Imagens e Vídeos Responsivos 27 ! 2.1.4 ! Media Queries 28 ! 2.2 ! Mobile First 29 ! 2.3 ! Padrões de Design, Componentes e Frameworks 33 ! 2.3.1 ! Padrões de Design 33 ! 2.3.2 ! Linguagens de Padrões e Bibliotecas de Padrões 36 ! 2.3.2.1 ! Análise Comparativa entre Bibliotecas de Padrões 37 ! 2.3.2.1.1 ! Nome 39 ! 2.3.2.1.2 ! Ranking 39 ! 2.3.2.1.3 ! Contexto 40 ! 2.3.2.1.4 ! Ilustração 40 ! 2.3.2.1.5 ! Problema 42 ! 2.3.2.1.6 ! Forças 42 ! 2.3.2.1.7 ! Solução 42 ! 2.3.2.1.8 ! Diagrama 43 ! 2.3.2.1.9 ! Padrões Relacionados 44 ! 2.3.2.1.10 ! Comentários 44 ! 2.3.2.1.11 ! Exemplos de Código 44 ! 2.3.3 ! Componentes de Design 45 ! 2.3.4 ! Frameworks 46 ! 2.4 ! Design Centrado no Utilizador 48 ! 2.5 ! Design para a Saúde 49 ! 2.6 ! Design e Inovação 51 ! 3 ! EPR MULTIPLATAFORMA 54 ! 3.1 ! Apresentação dos casos de estudo 54 ! 3.2 ! EPR Médico Multiplataforma 57 ! 3.2.1 ! Funcionalidades: Menus Descontextualizado e Contextualizado 57 ! 3.2.2 ! Organograma Funcional EPR Médico Multiplataforma 59 ! 3.3 ! EPR Enfermagem Multiplataforma 60 ! 3.3.1 ! Funcionalidades: Menus Descontextualizado e Contextualizado 60 ! 3.3.2 ! Organograma Funcional EPR Enfermagem Multiplataforma 61 ! 3.4 ! Navegação no EPR Multiplataforma 63 ! 3.5 ! Padrões de Navegação no EPR Multiplataforma 67 ! 3.5.1 ! Contexto de Navegação 67 ! 3.5.2 ! Menu Persistente 68 ! 3.5.3 ! Menu Deslizante 69 ! 3.5.4 ! Barra de Navegação Horizontal (topo) 71 ! 3.5.5 ! Barra de Navegação Horizontal (rodapé) 72 ! 3.5.6 ! Lista Vertical (com ícones) 74 ! 3.5.7 ! Item Extensível 75 ! 4 ! METODOLOGIA 77 ! 4.1 ! Design Centrado no Utilizador – compreender os utilizadores e os seus objetivos 77 4.2 ! Técnicas de Recolha de Dados 78 ! 4.2.1 ! Análise dos Registos de Utilização 78 ! 4.2.2 ! Entrevistas 80 ! 4.2.2.1 ! Entrevistas aos Utilizadores Finais 80 ! 4.2.2.2 ! Entrevistas aos profissionais da Glintt 81 ! 4.3 ! Caraterização das Personas 83 ! 4.3.1 ! Persona Primária 1 84 ! 4.3.2 ! Persona Primária 2 85 ! 4.3.3 ! Persona secundaria 86 ! 4.3.4 ! Persona Complementar 87 ! 4.4 ! Circuitos Selecionados 88 ! 5 ! ESTRATÉGIAS DE RESPONSIVIDADE 89 ! 5.1 ! Testes de Usabilidade 94 ! 5.1.1 ! Relatório do Teste de Usabilidade | Fase 1 94 ! 5.1.1.1 ! Metodologia 94 ! 5.1.1.2 ! Objetivo do Teste de Usabilidade 94 ! 5.1.1.3 ! Participantes 94 ! 5.1.1.4 ! Dispositivos 95 ! 5.1.1.5 ! Circuito Escolhido 95 ! 5.1.1.6 ! Resultados Obtidos 96 ! 5.1.1.7 ! Inquérito System Usability Scale (SUS) 97 ! 5.1.2 ! Relatório do Teste de Usabilidade | Fase 2 101 ! 5.1.2.1 ! Metodologia 101 ! 5.1.2.2 ! Objetivo do Teste de Usabilidade 101 ! 5.1.2.3 ! Participantes 101 ! 5.1.2.4 ! Dispositivos 102 ! 5.1.2.5 ! Circuito escolhido 102 ! 5.1.2.6 ! Resultados Obtidos 102 ! 5.1.2.7 ! Inquérito System Usability Scale (SUS) 104 ! 5.2 ! Wireframes Finais 108 ! 6 ! CONCLUSÃO 116 ! 6.1 ! Satisfação dos Objetivos 116 ! 6.2 ! Limitações e Trabalho Futuro 117 ! BIBLIOGRAFIA 118 ! ANEXOS 122 ! Anexo 1: Tabela Comparativa entre Bibliotecas de Padrões 123 ! Anexo 2: Tabela da Solução Clínica EPR Multiplataforma 125 ! Anexo 3: Organograma Funcional EPR Médico Multiplataforma 127 ! Anexo 4: Organograma Funcional EPR Enfermagem Multiplataforma 129 ! Anexo 5: Entrevistas aos profissionais da Glintt 131 ! Anexo 6: Circuitos Selecionados 140 ! Anexo 7: Wireframes Finais 145 ! LISTA DE FIGURAS Fig. 1 Várias dimensões de ecrãs de diferentes dispositivos (retirada de Responsive Design, Patterns and Principles, 2015). 24 Fig. 2 Exemplo de layout responsivo (retirada de A List Apart: Responsive Web design, 2010). 26 Fig. 3 Várias resoluções de ecrãs (retirada de Responsible Responsive Design, 2014). 27 Fig. 4 Pontos de quebra do layout e navegação do The Boston Globe (retirada de Responsible Responsive Design, 2014). 29 Fig. 5 Ilustração do padrão Stair Seats de A Pattern Language, 1977. 34 Fig. 6 Fotografia ilustrativa do padrão Stair Seats de A Pattern Language, 1977. 34 Fig. 7 Exemplo de estrutura de padrão de ui-Patterns, 2007. 40 Fig. 8 Exemplo de fotografia e diagrama ilustrativos de A Pattern Approach to Interaction Design, 2000. 41 Fig. 9 Exemplo de ilustração de Info Design Patterns, 2008. 41 Fig. 10 Exemplo de diagrama de Design Patterns, 1995. 44 Fig. 11 Website responsivo da empresa Vox Media em diferentes dispositivos (retirada de Responsive Design – Patterns and Principles, 2015). 47 Fig. 12 Esquema-síntese da aplicação EPR Multiplataforma (produzida pela autora). 55 Fig. 13 Ecrã de autenticação na aplicação EPR Multiplataforma em Desktop (produzida pela autora). 57 Fig. 14 Ecrã descontextualizado do médico na aplicação EPR Médico Multiplataforma em Desktop (produzida pela autora). 58 Fig. 15 Ecrã Contextualizado na aplicação EPR Médico Multiplataforma em Desktop: lista de doentes, na qual um doente está selecionado (produzida pela autora). 58 Fig. 16 Acesso ao ecrã contextualizado do doente na aplicação EPR Enfermagem Multiplataforma em Desktop – Lista de Doentes (produzida pela autora). 60 Fig. 17 Ecrã descontextualizado do enfermeiro na aplicação EPR Enfermagem Multiplataforma em Desktop (produzida pela autora). 61 Fig. 18 Hierarquia da navegação na vertente Médico da aplicação EPR Multiplataforma, em Desktop (produzida pela autora). 63 Fig. 19 As funcionalidades principais presentes no ecrã anterior, são substituídas pelas funcionalidades contextualizadas do doente (produzida pela autora). 64 Fig. 20 Hierarquia da navegação na vertente Médico da aplicação EPR Multiplataforma, em Tablet (produzida pela autora). 65 Fig. 21 Ecrã descontextualizado na vertente enfermagem, em Tablet vertical e horizontal (produzida pela autora). 65 Fig. 22 Contexto da Navegação na vertente médico do EPR Multiplataforma (produzida pela autora). 67 Fig. 23 Contexto da Navegação no website do The Guardian UK (retirada de Designing for Touch, 2015). 68 Fig. 24 Menu Persistente na vertente médico do EPR Multiplataforma (produzida pela autora). 68 Fig. 25 Menu Persistente no website do designer Rich Brown (retirada de http://www.richbrown.info). 69 Fig. 26 Menu Deslizante na vertente Enfermagem da aplicação EPR Multiplataforma (produzida pela autora). 69 Fig. 27 Exemplo de menu deslizante no acesso ao Mail no iPad através de um gesto swipe (retirada de Designing for Touch, 2015). 70 Fig. 28 Barra de navegação horizontal de topo na aplicação EPR Multiplataforma, vertentes médico desktop e enfermagem em tablet vertical (produzida pela autora). 71 Fig. 29 Exemplo de barra de navegação horizontal (topo) na aplicação Livestream (retirada de https://livestream.com) 72 Fig. 30 Barra de navegação horizontal de rodapé na aplicação EPR Multiplataforma, vertente médico em tablet horizontal (produzida pela autora). 72 Fig. 31 Exemplo de barra de navegação horizontal (rodapé e topo) na aplicação Facebook, respetivamente para iOS e Android (retirada de Designing for Touch, 2015). 73 Fig. 32 Exemplo de lista vertical (com ícones) na vertente de enfermagem da aplicação EPR Multiplataforma (produzida pela autora). 74 Fig. 33 Exemplo de lista vertical no website The Session (retirada de Designing for Touch, 2015). 75 Fig. 34 Exemplo de item extensível na aplicação EPR Multiplataforma (produzida pela autora). 75 Fig. 35 Exemplo de ítem extensível na biblioteca de padrões de Designing Mobile Interfaces, 2011. 76 Fig. 36 Exemplos de esquissos relativos ao desenho dos ecrãs para smartphone (produzida pela autora). 78 Fig. 37 Quantidade de registos de utilização por funcionalidade, no EPR Enfermagem (produzida pela autora). 79 Fig. 38 Quantidade de registos de utilização por funcionalidade, no EPR Médico (produzida pela autora). 80 Fig. 39 Exemplo de ecrã do EPR Enfermagem na tecnologia Oracle Forms. 82 Fig. 40 Exemplo de ecrã do EPR Médico na tecnologia D.Net. 82 Fig. 41 Persona Primária 1 (produzida pela autora). 84 Fig. 42 Persona Primária 2 (produzida pela autora). 85 Fig. 43 Persona Secundária (produzida pela autora). 86 Fig. 44 Persona Complementar (produzida pela autora). 87 Fig. 45 Os polegares são os dedos mais utilizados na interação com smartphones (retirada de Designing for Touch, 2015). 89 Fig. 46 Zonas acessíveis pelos polegares em ecrãs de diferentes dimensões (retirada de Designing for Touch, 2015). 90 Fig. 47 Zona indicada para localizar os controladores em iOS e Android. Exemplo da aplicação do Facebook (retirada de Designing for Touch, 2015). 90 Fig. 48 Exemplo de navegação principal escondida num botão de menu, no website The Session (retirada de Designing for Touch, 2015). 91 Fig. 49 Exemplo de navegação principal lateral, na aplicação do Twitter (retirada de Designing for Touch, 2015). 92 Fig. 50 Áreas acessíveis, respetivamente nos tablets, híbridos e comuns aos dois tipos de dispositivos (retirada de Designing for Touch, 2015). 93 Fig. 51 Perda de contexto de navegação no smartphone. 96 Fig. 52 Perda de contexto de navegação no tablet vertical. 97 Fig. 53 Poderia usar esta aplicação frequentemente (produzida pela autora). 97 Fig. 54 Achei a aplicação desnecessariamente complexa (produzida pela autora). 98 Fig. 55 Achei que a aplicação era fácil de usar (produzida pela autora). 98 Fig. 56 Iria precisar do apoio de um técnico para ser capaz de utilizar a aplicação (produzida pela autora). 98 Fig. 57 Achei que as várias funções da aplicação estavam bem integradas (produzida pela autora). 99 Fig. 58 Pareceu-me haver muita inconsistência na aplicação (produzida pela autora). 99 Fig. 59 Imagino que a maioria das pessoas iria aprender a utilizar esta aplicação muito rapidamente (produzida pela autora). 99 Fig. 60 Achei a aplicação muito complicada de usar (produzida pela autora). 100 Fig. 61 Senti-me muito confiante ao usar a aplicação (produzida pela autora). 100 Fig. 62 Precisava de aprender bastante antes de poder começar a usar a aplicação (produzida pela autora). 100 Fig. 63 Melhoria significativa no contexto de navegação em smartphone (produzida pela autora). 103 Fig. 64 Uma vez selecionada a “Nota Clínica 1”, os utilizadores demonstraram dificuldade em voltar para a lista "Notas Clínicas". 103 Fig. 65 Poderia usar esta aplicação frequentemente (produzida pela autora). 104 Fig. 66 Achei a aplicação desnecessariamente complexa (produzida pela autora). 104 Fig. 67 Achei que a aplicação era fácil de usar (produzida pela autora). 104 Fig. 68 Iria precisar do apoio de um técnico para ser capaz de utilizar a aplicação (produzida pela autora). 105 Fig. 69 Achei que as várias funções da aplicação estavam bem integradas (produzida pela autora). 105 Fig. 70 Pareceu-me haver muita inconsistência na aplicação (produzida pela autora). 105 Fig. 71 Imagino que a maioria das pessoas iria aprender a utilizar esta aplicação muito rapidamente (produzida pela autora). 106 Fig. 72 Achei a aplicação muito complicada de usar (produzida pela autora). 106 Fig. 73 Senti-me muito confiante ao usar a aplicação (produzida pela autora). 106 Fig. 74 Precisava de aprender bastante antes de poder começar a usar a aplicação. 107 Fig. 75 Proposta para a página de login da aplicação EPR Multiplataforma, nos diferentes dispositivos (produzida pela autora). 108 Fig. 76 A navegação global no smartphone é escondida e revelada, quando necessário (produzida pela autora). 109 Fig. 77 Localização da navegação global do nos diferentes dispositivos (produzida pela autora). 110 ESTRATÉGIAS DE DESIGN RESPONSIVO! 16! projeção de um novo layout (Marcotte 2010). ESTRATÉGIAS DE DESIGN RESPONSIVO! 17! 1 CONTEXTUALIZAÇÃO 1.1 Projeto Pretendemos desenvolver um estudo aprofundado sobre os problemas encontrados nos casos de estudo GlobalCare (a aplicação EPR Multiplataforma) e encontrar possíveis soluções para atingir a responsividade, melhorando a experiência do utilizador nas plataformas. Para isso, iremos proceder à analise das frameworks existentes e assim delinear uma estratégia global para atingir a responsividade. O resultado dessa pesquisa materializa-se na produção frameworks responsivas ao nível dos wireframes. 1.2 Problema e Objetivos da Investigação A presente proposta tem como principal objetivo encontrar soluções possíveis para resolver a carência de responsividade dos casos de estudo, dois módulos GlobalCare. As questões gerais da investigação passam pela compreensão dos problemas de design no contexto da saúde; pela análise da experiência do utilizador da GlobalCare; pela caracterização dos utilizadores finais da GlobalCare; finalmente, pretendemos produzir frameworks mais adequadas aos módulos em causa. As principais questões da investigação debruçam-se na procura da relação ideal entre os componentes da interface e o restante conteúdo do navegador; na compreensão da hierarquia dos conteúdos de acordo com os diferentes tamanhos de navegadores, tendo sempre como foco a organização da estrutura da navegação. Os objetivos específicos deste trabalho são: • investigação sobre comportamentos padrão para o digital (definição e identificação de padrões de design dos circuitos do EPR Multiplataforma estudados, tendo como foco a navegação); • desenvolvimento e investigação em ferramentas e frameworks para a responsividade, aplicadas aos módulos GlobalCare; • definição de estratégias de gestão de mudança. ESTRATÉGIAS DE DESIGN RESPONSIVO! 18! Num primeiro momento, procedemos ao estudo exaustivo do conceito de design responsivo; seguidamente, à elaboração de entrevistas a uma amostra da comunidade de utilizadores finais da plataforma em causa, tendo em vista a compreensão das suas necessidades; paralelamente, analisamos os dados relativos aos registos de utilização do EPR Multiplataforma; finalmente, baseando-nos nas informações recolhidas, procedemos à realização de frameworks responsivas para os módulos GlobalCare. 1.3 Metodologia da Investigação 1.3.1 Natureza do Estudo: Método e Propósito Optámos por utilizar um método misto, pelo que a presente investigação tem um caráter simultaneamente qualitativo e quantitativo. A partir de uma pequena amostra de utilizadores dos casos de estudo, pretendemos recolher um conjunto de dados relativos à responsividade dos produtos estudados. Tal possibilita-nos desenvolver conceitos e chegar à compreensão de fenómenos a partir de padrões provenientes da recolha de dados, levando a cabo uma abordagem qualitativa. Simultaneamente, através da análise de dados relativos aos registos de utilização do EPR Multiplataforma, pretendemos recolher um conjunto de dados numéricos, permitindo-nos identificar quais as funcionalidades mais utilizadas nos casos de estudo. Desta forma, levamos a cabo uma abordagem quantitativa. Relativamente ao propósito do presente trabalho, situa-se no âmbito de Investigação e Desenvolvimento, dada a sua natureza teórico-prática. 1.3.2 Técnicas de recol ha e anál ise de dados Na recolha de dados, iremos recorrer a técnicas de caráter qualitativo (entrevistas e testes de usabilidade) e quantitativo (análise dos dados relativos aos registos de utilização do EPR Multiplataforma). O objetivo é reunir a maior diversidade de informação possível, enriquecendo a nossa recolha. Desta forma, pretendemos compreender as necessidades reais da amostra em causa: a comunidade de profissionais de saúde que utilizam o EPR Multiplataforma. Na análise de dados recolhidos através dos registos de utilização, iremos ESTRATÉGIAS DE DESIGN RESPONSIVO! 19! utilizar a ferramenta Excel. Procuramos identificar e descrever comportamentos de usabilidade por parte dos utilizadores finais, assim como objetivos presentes nos processos implementação e de design dos produtos em causa. Desta forma, esperamos encontrar concordâncias e discordâncias entre os dois polos, para sermos capazes de identificar pontos de melhoria na responsividade dos produtos. A utilização das referidas técnicas acompanha todo o processo de investigação: Os métodos de pesquisa são raramente utilizados para uma única fase – estes são repetidos, permitindo construir uma base mais sólida de conhecimento, aplicável a cada objetivo (Jones 2013).2 1.3.2.1 Entrevistas Uma das técnicas que utilizamos é a entrevista, pois permite-nos compreender com maior detalhe a perspetiva do utilizador. Normalmente são feitas no local onde o utilizador usa o software e podem ser estruturadas – com um conjunto prédefinido de perguntas – ou não estruturadas. Este tipo técnica é bastante flexível (Tidwell 2010). Das duas tipologias, optámos por utilizar a técnica da entrevista estruturada, orientando o utilizador de forma a conseguir extrair um conjunto de informações específicas acerca da utilização do EPR Multiplataforma. 1.3.2.2 Testes de Usabilidade versus Avaliação da Experiência do Utilizador Outra técnica muito popular neste contexto é a elaboração de testes de usabilidade. Os utilizadores são observados ao mesmo tempo que tentam executar uma determinada tarefa. Para isso, é-lhes pedido que executem tarefas típicas do produto em causa, de forma a que possamos detetar e corrigir coisas que o confundam ou frustrem. Seguidamente, são anotadas as dificuldades demonstradas pelos utilizadores. Os testes devem ser realizados numa fase inicial de projeto (Krug 2 TA: “Research methods are rarely conducted once just for a single phase — they are repeated to build a deeper base of knowledge applicable to each purpose (Jones 2013).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 20! 2014). A comunidade de design tem vindo a questionar-se acerca dos benefícios de uma metodologia alternativa aos testes de usabilidade – a avaliação da experiência do utilizador. Na verdade, ambas têm prós e contras (Krug 2014). No livro Don´t Make Me Think, Steve Krug (2014) defende a importância de elaborar testes de usabilidade. O autor afirma que testar funciona sempre e que até mesmo o pior teste com o utilizador errado pode dar-nos boas pistas para melhorar um site e produz sempre resultados positivos. No artigo, How to Do a UX Review, Joe Leech aborda esta questão. Apesar de dar preferência ao método de testes de usabilidade, o autor aponta os benefícios da avaliação da experiência do utilizador em relação ao outro método: os são resultados mais rápidos, o custo é menor do que o dos testes de usabilidade e é mais fácil chegar aos utilizadores (2015). No artigo The Myth of Usability Testing, Robert Hoekman Jr defende uma visão oposta à de Krug. O autor refere que os testes de usabilidade são bons por vários motivos, mas não para determinar as prioridades de uma equipa, afirmando que esta técnica falha completamente na identificação de problemas. Antes, suportam a observação do comportamento humano, sustentando os instintos dos designers para validar ideias de design (Hoekman 2009). Das duas abordagens anteriormente referidas, a realização de testes de usabilidade parece-nos ser a mais pertinente para o presente estudo. 1.3.2.3 Registos de Utilização Deparámo-nos com a impossibilidade de realizar inquéritos aos utilizadores numa escala significativa, pois não houve recetividade por parte das instituições de saúde em causa. Assim, os dados numéricos que sustentam a nossa análise são fruto dos dados fornecidos pelos registos de utilização do EPR Multiplataforma, disponibilizados pelo Hospital da CUF Porto (no que refere à vertente EPR Enfermagem) e pelo Hospital de Vila Franca de Xira (vertente EPR Médico). ESTRATÉGIAS DE DESIGN RESPONSIVO! 21! 1.3.2.4 Técni cas de Amostragem Relativamente às técnicas de amostragem, recorremos ao uso de métodos probabilísticos, assegurando que a amostra selecionada é representativa dos utilizadores finais da GlobalCare. Para isso, são analisados registos de utilização do EPR Enfermagem no Hospital da CUF do Porto, referentes ao período de 1 a 15 de Março de 2016. Paralelamente, são analisados os registos de utilização do EPR Médico, extraídos no Hospital de Vila Franca de Xira, entre Janeiro e Junho de 2015. 1.3.2.5 Estrutura da Dissertação Para além da introdução, seguida pelo presente capítulo da contextualização, a presente dissertação contém mais cinco capítulos. No capítulo 2 Fundamentos Teóricos para a Responsividade, são descritos os fundamentos teóricos e visuais que sustentam o trabalho futuro. São explicados os principais conceitos necessários à compreensão do que é o design responsivo, os padrões de design, a metodologia de design centrado no utilizador, a relação entre design e tecnologia e, finalmente, o design no âmbito da saúde. No capítulo 3 EPR Multiplataforma, são apresentados os casos de estudo: vertentes Médico e Enfermagem do EPR Multiplataforma, as suas funcionalidades a as estruturas hierárquicas que os organizam. Seguidamente, analisamos o funcionamento da sua navegação e identificamos os seus padrões de design ao nível da navegação. Finalmente, são identificadas as ferramentas tecnológicas presentes nos mesmos. No capítulo 4 Metodologia, é descrita a metodologia que sustenta a componente prática do trabalho. Inicialmente, é apresentado o conceito de Design Centrado no Utilizador; seguidamente, são descritas as técnicas de recolha de dados utilizadas e, por fim, a caraterização das personas e dos principais circuitos identificados. O capítulo 5 Estratégias de Responsividade, consubstancia-se na aplicação dos conhecimentos previamente adquiridos aos casos de estudo, através da delineação de estratégias globais para a responsividade e da produção de frameworks responsivas. Seguidamente, no capítulo 6 Conclusão, são descritas as principais conclusões ESTRATÉGIAS DE DESIGN RESPONSIVO! 22! obtidas na presente investigação, assim como as possibilidades de trabalho futuro. As últimas duas secções constituem, respetivamente, a bibliografia e os anexos. ESTRATÉGIAS DE DESIGN RESPONSIVO! 23! 2 FUNDAMENTOS TEÓRICOS PARA A RESPONSIVIDADE 2.1 Design Responsivo 2.1.1 O que é o Design Responsivo? O grande aumento do número de pessoas que interagem com sites e aplicações através de tablets e telefones obrigou os designers a projetar corretamente e de uma forma apropriada para uma ampla variedade de tamanhos de ecrãs. A abordagem contemporânea para lidar com a diversidade de tamanhos de ecrãs é comummente denominada de design responsivo (Cooper, Reinmann, and Cronin 2007).3 Em meados do séc. XX, os designers gráficos Jan Tschichold, Emil Ruder, e Josef Müller-Brockmann popularizaram o conceito de grelha tipográfica, um sistema racional de colunas e linhas, a partir do qual os módulos de conteúdo se organizam. No seu livro, Grid Systems in Graphic Design, Müller-Brockmann refere: “A grelha divide um plano bidimensional em campos menores e um espaço tridimensional em compartimentos menores (...) A grelha define a dimensão constante do espaço (1961)”, adequando as proporções da grelha ao tamanho de um pedaço de papel em branco. Desta forma, o autor pretendia facilitar o processo de trabalho dos designers. O sistema de grelha destina-se a fornecer ao designer um instrumento de trabalho prático, ajudando-o a lidar com problemas visuais e a resolvê-los em termos de conceção, organização e design, com maior velocidade e confiança (MullerBrockmann 1961). 3 TA: “The huge rise of people interacting with websites and applications on tablets and phones has made it critical that designs render gracefully and properly on a wide variety of screen sizes. The contemporary approach for handling these different screen sizes is commonly called responsive design (Cooper, Reinmann, and Cronin 2007).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 24! Fig. 1 Várias dimensões de ecrãs de diferentes dispositivos (retirada de Responsive Design, Patterns and Principles, 2015). O conceito de grelha tipográfica foi posteriormente apropriado pela disciplina de Web Design, mas com uma diferença fundamental: a inexistência de uma página real. O conceito de Design Responsivo para Web teve a sua origem em 2004 quando o designer e programador Cameron Adams, autor do artigo Resolution Dependent Layout (2004), demonstrou pela primeira vez o exemplo de um layout de um site que se adaptava à largura do navegador. Em 2008, uma série de termos relacionados, como responsivo, líquido, fluido e elástico começaram a ser utilizados para descrever layouts. No artigo Responsive Web Design (2010), Ethan Marcotte introduz o conceito de Design Responsivo para Web. Através da observação de um conjunto amplo de estratégias emergentes, o autor identificou uma estratégia subjacente que, uma vez nomeada, se tornou uma referência na área (Leavy 2010). Marcotte serve-se do exemplo da arquitetura interativa como suporte teórico, adaptando esse conceito ao design para Web. Para isso, faz referência aos autores de Interactive Architecture, Michael Fox e Miles Kemp que descrevem uma abordagem adaptativa, em que o habitante e a estrutura se influenciam mutuamente (Marcotte 2010). O autor destaca três elementos essenciais no referido processo metodológico: 1) um layout baseado numa grelha responsiva; 2) imagens responsivas; 3) media queries.4 Ethan Marcotte refere a importância e urgência de uma abordagem responsiva no desenvolvimento de design para a Web. Em lugar da criação de projetos 4 Media queries5 são um módulo específico do CSS que permite que o conteúdo se adapte à tela do dispositivo que está a ser utilizado (nomeadamente às características de definição da mesma) (Marcotte 2010). ESTRATÉGIAS DE DESIGN RESPONSIVO! 25! disconexos, o autor defende que as diferentes versões de um determinado website devem fazer parte da mesma experiência cognitiva. Para isso, o website deve ser flexível e adaptável aos diferentes dispositivos (Marcotte 2011). 2.1.2 Grelha Responsiva Depois de alguns minutos de reflexão sobre a grelha responsiva, os benefícios tornam-se claros: os designers ganham uma framework racional e estruturada para organizarem os conteúdos e os utilizadores ganham sites legíveis e bem organizados (Marcotte 2009).5 A propósito do processo de trabalho com a grelha responsiva aplicada ao webdesign, Marcotte refere que quando pensamos em responsividade, precisamos de traduzir o design para algo mais fluído, mais proporcional (Marcotte 2011). Também Trent Walton defende a mesma visão, afirmando que ao usarmos grelhas responsivas, imagens responsivas e media queries estamos a construir, mais do que uma página, uma rede de conteúdo que pode ser reorganizada em qualquer navegador, para melhor transmitir uma mensagem. Em vez de pixeis, usamos Viewport-percentage lengths, compostas pelas vw e vh. Desta forma, o corpo de texto torna-se proporcional ao tamanho da janela de exibição. Uma unidade vw corresponde a 1% da janela de exibição, pelo que para obtermos a largura total da mesma temos que usar 100 vw (Allen 2014). Depois de atribuirmos responsividade ao corpo do texto, passamos para a grelha. Para isso, Marcotte refere que podemos aplicar o mesmo tipo de pensamento de proporcionalidade usado no redimensionamento do texto, ao layout (Marcotte 2011). Na sua mais recente obra, Responsive Design: Patterns and Principles, Marcotte, alerta para a importância de procurarmos perceber profundamente como e porquê um determinado elemento deve adaptar-se, alegando que devemos parar de pensar em termos de colunas e linhas e começarmos a falar da qualidade dos nossos designs responsivos (Marcotte 2015). 5 TA: “After a few minutes of griddy thinking, the benefits become clear: designers gain a rational, structured framework for organizing content and users gain well-organized, legible sites (Marcotte 2009).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 32! caótica do utilizador pelo seguinte: um multi-touchscreen gigante e de altaresolução, um sistema operativo que especifica controlos screen-touch grandes o suficiente para serem usados com sucesso; um conjunto de interfaces gestuais (hoje icónicas) fáceis de descobrir e aprender; um conjunto de sensores que revelam informação contextual sobre a orientação, localização, luz ambiente, e movimento, o que veio adicionar um extraordinário nível de inteligência a uma nova geração de aplicações móveis (Cooper, Reinmann, and Cronin 2007).14 A experiência do utilizador melhora substancialmente com a adoção da abordagem mobile first. Em vez de duas versões separadas, as duas versões do mesmo site ou aplicação passam a constituir uma experiência coerente. Segundo Wroblewski, a combinação das experiências para dispositivos móveis e para desktop resulta em utilizadores mais fiéis aos dois tipos de dispositivos. O autor ilustra a sua afirmação, dando o exemplo do Facebook, que não pensa na experiência para dispositivos móveis como parte do site; antes, compreende-a como uma forma de melhorar a inteira experiência do Facebook (Wroblewski 2011). Paralelamente à visão de Wroblewski, Karen McGrane vem reforçar a ideia de que os conteúdos dos diferentes dispositivos devem estar em concordância, quando afirma, na sua obra Content Strategy for Mobile, que a estratégia do conteúdo para dispositivos móveis não deve ser pensada como um satélite da versão para desktop, mostrando apenas o conteúdo que os utilizadores dos dispositivos móveis vão precisar. Tal não significa que o conteúdo deva ser apresentado da mesma forma, mas sim que a experiência deve ser a mesma (McGrane 2012). 14 TA: “The mobile device user experience changed forever in June of 2007, when Apple introduced the iPhone. Almost overnight, the definition of what it meant to be a mobile information device experienced a radical reboot. (…) The iPhone replaced this mess of a user experience with the following: A giant, high-resolution, multitouchscreen, an OS that specified on-screen controls big enough for fingers to use successfully A set of now-iconic gestural idioms that were relatively easy to discover and learn A set of sensors delivering contextual information about orientation, location, ambient light, and movement that added an extraordinary level of intelligence to a new generation of mobile apps (Cooper, Reinmann, and Cronin 2007).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 33! 2.3 Padrões de Design, Componentes e Frameworks Ao longo dos últimos anos, o debate em torno do design responsivo mudou subtilmente, concentrando-se, não na conceção das páginas, mas sim nos padrões: na compreensão dos pequenos elementos reutilizáveis que compõem um sistema de design maior (Marcotte 2015).15 2.3.1 Padrões de Design Padrões de design são soluções desenvolvidas através da análise e sistematização de soluções de design recorrentes para problemas concretos. Estas soluções não são fechadas, podendo ser apropriadas de diferentes formas na sua aplicação. “Os padrões de design devem ser suficientemente abstratos para serem mais ou menos universais na sua utilidade, mas ao mesmo tempo, específicos o suficiente para terem alguma utilidade (Carvalhais 2008).”16 O conceito de padrão de design foi inicialmente desenvolvido para as disciplinas da arquitetura e do urbanismo. No seu livro A Pattern Language, Christopher Alexander carateriza os padrões como soluções possíveis para problemas recorrentes. Desta forma, o autor expressa a relação entre um determinado contexto, um problema e uma solução. O autor afirma que cada padrão descreve um problema que ocorre repetidamente num determinado contexto e depois descreve o âmago da solução para esse problema, de tal forma que tal solução pode ser implementada inúmeras vezes sem que seja usada duas vezes da mesma forma (1977). 15 TA: “Over the last few years, the conversation around responsive design has shifted subtly, focusing not on designing pages, but on patterns: understanding the small, reusable elements that comprise a larger design system (Marcotte 2015).” 16 TA: “Design patterns should be sufficiently abstract to be more or less universal in its usefulness, but simultaneously specific enough to be of any use (Carvalhais 2008).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 34! Fig. 5 Ilustração do padrão Stair Seats de A Pattern Language, 1977. Fig. 6 Fotografia ilustrativa do padrão Stair Seats de A Pattern Language, 1977. O conceito foi posteriormente adotado pelo design de software. No livro Design Patterns, Erich Gamma, Richard Helm, Ralph Johnson e John Vlissides definem padrões como soluções simples e elegantes para problemas específicos na programação orientada a objetos. Os autores afirmam que os padrões de design refletem um trabalho de desenho e implementação que se encontra explícito na sua forma, fruto do esforço de designers e engenheiros, em busca de uma melhor reutilização e flexibilidade nas suas aplicações. Referem ainda que os padrões de design captam estas soluções de uma forma sucinta e fácil de aplicar (Gamma et al. 1994). Quatro anos depois, Jeniffer Tidwell desenvolve o mesmo conceito para o design de interação. A autora afirma que cada padrão define um contexto de uso, um problema, um conjunto de forças17 que apontam para diferentes direções e uma regra 17 Na sua obra Notes on the Synthesis of Form, Alexander introduz o conceito de forças, apliacado à definição de padrões. Este conceito é mais tarde adotado pela disciplina de design. O autor refere que: “A ideia de um diagrama, ou padrão, é muito simples. É um padrão abstrato de relações físicas que soluciona um pequeno sistema de forças em conflito, sendo independente de todas as outras forças, de todos os diagramas possíveis (Alexander 1973).” TA: “The idea of a diagram, or pattern, is very simple. It is an abstract pattern of physical relationships which resolves a small system of interacting and conflicting forces, and is independent of all other forces, ESTRATÉGIAS DE DESIGN RESPONSIVO! 35! primária sobre como essas forças podem ser resolvidas para encontrar a melhor solução para um determinado problema. São também fornecidos bons e maus exemplos de aplicação (Tidwell 1999). No livro A Pattern Approach to Interaction Design, Jan O Borchers refere que um padrão é uma solução comprovada para um problema recorrente. Esta dá especial atenção ao contexto da sua aplicação, às “forças” concorrentes que devem ser equilibradas, assim como às consequências positivas e negativas da sua aplicação (2000). Tal como Tidwell, o autor desenvolve o conceito de padrões para design de interação. Cooper, Reimann e Cronin, autores do livro About Face, referem: “Padrões de design são formas de capturar soluções de design úteis e generalizá-las para responder a problemas semelhantes (Cooper a tal. 2014).”18 Os autores sublinham ainda os benefícios do uso de padrões para: reduzir o tempo e esforço em novos projetos; melhorar a qualidade de soluções de design; facilitar a comunicação entre designers e engenheiros de software e educar os designers enquanto profissionais. Aplicado de formas diversas pelas várias disciplinas que o adotaram, o conceito de padrões manteve-se sempre como uma solução aberta e permeável à interpretação de quem o apropria e utiliza. Ao mesmo tempo, reflete a sistematização de processos e métodos de trabalho nas diferentes áreas do saber: De facto, não há razão que impeça a expressão de experiências, métodos e valores de qualquer domínio do saber na forma de padrão, desde que esse domínio inclua trabalho de design, criatividade ou resolução de problemas (Borchers 2000).19 Ainda assim, importa resalvar que existe uma diferença importante entre padrões de design consoante a disciplina para a qual são desenvolvidos. Por exemplo, se compararmos os padrões de design de interação e os padrões de design arquitetónico. No design de interação, os padrões respondem não só a questões estruturais e de organização dos elementos, mas também a questões dinâmicas and of all other possible diagrams (Alexander 1973).” 18 TA: “Design patterns are a means of capturing useful design solutions and generalizing them to address similar problems (Cooper, Reinmann, and Cronin 2007).” 19 TA: “Indeed, there is no reason why the experience, methods, and values of any application domain cannot be expressed in pattern form, as long as activity in that application domain includes some form of design, creative, or problem-solving work (Borchers 2000).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 36! relativas a mudanças nos elementos em resposta à atividade do utilizador (Cooper, Reinmann, and Cronin 2007). 2.3.2 Linguagens de Padrões e Bibliotecas de Padrões Uma linguagem de padrões é constituída por um conjunto de padrões, entidades que se conectam para formar um conjunto unitário: Os elementos desta linguagem são entidades denominadas padrões (...) Cada padrão conecta-se com os restantes, formando uma coleção unitária, uma linguagem com infinitas combinações (Alexander 1977).20 O fundamento teórico necessário à aplicação da linguagem descrita por Alexander é explicado na sua obra The Timeless Way of Building, publicada em 1979. Também Tidwell desenvolve e apresenta uma linguagem de padrões para o design de interação. A autora refere: “Uma linguagem deste tipo é um conjunto de padrões interligados, que partilham suposições, terminologias, e contextos.”21 A propósito do mesmo conceito, Borchers afirma que este faz referência a padrões de alto nível, descrevendo o contexto da sua aplicação e a padrões de baixo nível, que podem ser usados depois dos primeiros, para refinar mais profundamente a solução. Esta hierarquia estrutura uma coleção abrangente de padrões, formando uma linguagem de padrões (Borchers 2000). Segundo Cooper e tal., “Um termo mais comum para descrever uma coleção de padrões num domínio é biblioteca padrões ou catálogo de padrões (2014).”22Assim, linguagem de padrões diz respeito a um conjunto de padrões que por sua vez estão incluídos numa biblioteca de padrões. Dada a multidisciplinaridade que caracteriza estas bibliotecas, a sua aplicação vem facilitar a comunicação entre profissionais das diversas disciplinas: “Um vocabulário comum pode melhorar significativamente a comunicação dentro da 20 TA: “The elements of this language are entities called patterns (...) Each pattern connected to other patterns so that you grasp the collection of all 253 patterns as a whole, as a language, within which you can create an infinite variety of combinations (Alexander 1977).” 21 TA: “A language of this sort is a set of interrelated patterns, which share similar assumptions, terminologies and contexts (Tidwell 1999).” 22 TA: “A more common term to describe a collection of patterns in a domain is pattern library or pattern catalogue (Cooper, Reinmann, and Cronin 2007).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 37! equipa (Borchers 2000).”23 2.3.2.1 Análise Comparativa entre Bibliotecas de Padrões Na sua dissertação Web Design Patterns for Mobile Devices, Jorge Ribeiro (2012) desenvolve uma análise comparativa entre dezasseis bibliotecas de padrões, tendo como ponto fulcral a estrutura de apresentação dos padrões nas diferentes bibliotecas. Parece-nos oportuno incluir as suas principais conclusões nesta investigação, construindo assim um enquadramento mais completo do conceito em causa. As bibliotecas escolhidas para a construção da referida análise são: • A Pattern Language (Alexander 1977); • Design Patterns: Elements of Reusable Object-Oriented Software (Gamma et al. 1994); • Common Ground: A Pattern Language for Human-Computer Interface Design (Tidwell 1999); • A Pattern Approach to Interaction Design (Borchers 2000); • The Design of Sites: Patterns for Creating Winning Websites (van Duyne, Douglas K., James A. Landay 2002); • Yahoo! Design Pattern Library (Yahoo 2006); • Patterns for Computer-Mediated Interaction (Schümmer, Till 2007); • ui Patterns (Toxboe 2007); • Info Design Patterns (Behrens 2008); • Patternry (Pattern Factory 2009); • Designing Web Interfaces (Scott, Bill 2009); • Designing Social Interfaces (Crumlish, Christian 2009); • Banco de Padrões de Design (Instituto Superior Técnico 2010); • Designing Interfaces (Tidwell 1999); • Designing Mobile Interfaces (Hoober, Steven 2011); • Mobile Design Pattern Gallery (Neil 2012). 23 TA: “Such a common vocabulary can greatly improve communication within the team (Borchers 2000).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 38! Para além das bibliotecas anteriormente referidas, optámos por incluir mais duas bibliotecas na análise: • Web Design Patterns for Mobile Devices (Ribeiro 2012); • Google Material Design Patterns (Google 2015). Para procedermos a uma comparação mais sistemática das bibliotecas, construímos uma tabela com as principais caraterísticas de cada uma delas, de acordo com os parâmetros seguidamente apresentados (vide Anexo 1: Tabela Comparativa entre Bibliotecas de Padrões). Note-se que temos como referência base o trabalho desenvolvido por Alexander, dada a sua importância enquanto precursor do conceito em causa: A obra de Christopher Alexander Notes on the Synthesis of Form (1964), é um tratado indispensável para o design. Nesta obra, Alexander apresenta uma abordagem bastante sólida, metodológica e sistemática sobre os problemas do design. Apesar de não se focar em questões relativas ao design de sistemas digitais, ainda assim considera as dificuldades colocadas por contextos ou problemas complexos (Carvalhais 2008).24 Alexander adota uma abordagem descritiva, através de extensos parágrafos. Apesar de detalhada, esta forma de apresentação dos padrões não foi muito popular, apenas o conceito criado pelo arquiteto. Também Borchers defende uma abordagem mais descritiva. Outros autores partem deste conceito, evoluindo para versões com secções mais pequenas e com nomes mais ilustrativos, permitindo uma rápida leitura dos conteúdos dos padrões. Alexander organiza os padrões de A Pattern Language por escala espacial (Cidades, Edifícios e Construção), já que na arquitetura este fator é de extrema relevância. No caso dos padrões de design, vários autores tentam também responder a essa problemática, mantendo a ideia de hierarquia na organização das bibliotecas. Van Duyne e tal. propõem uma organização em que: “quanto mais cedo o grupo de padrões aparece no esquema, mais cedo deverá ser usado no processo de design 24 TA: “Christopher Alexander’s “Notes on the Synthesis of Form” (1964), is an indispensable treaty on the project of design. In this book Alexander presented a very solid, methodical and systematic approach to the problems of design and, although he wasn’t focusing in the issues of designing for digital systems, he nevertheless considered the difficulties posed by very complex contexts, or problems (Carvalhais 2008).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 39! (2002).”25 Tidwell utiliza um sistema semelhante, no qual os padrões se organizam “pela sua proximidade de ordem no progresso do design (2010).”26 2.3.2.1.1 Nome O Nome dos padrões é um elemento fundamental na sua definição. Alexander afirma que a procura por um nome é uma parte fundamental do processo de criar e descobrir um padrão (1977).27Tidwell sugere que não devem ser usados nomes centrados na disciplina de design, para que possam ser facilmente compreendidos por outros profissionais. Alexander adota uma norma em que os nomes dos padrões são escritos com letras maiúsculas. Autores como Borchers em A Pattern Approach to Interaction Design seguem o seu exemplo. Outros optam por utilizar normas distintas. Em Designing Interfaces (Tidwell 2010) os nomes são escritos em letras maiúsculas e com cor. Algumas bibliotecas, como A Pattern Language, utilizam números para identificar cada padrão. Em The Design of Sites (van Duyne, Douglas K., James A. Landay 2002) e em Computer-Mediated Interaction (Schümmer 2007), são utilizados alfabetos próprios que misturam letras e números, para organizar os padrões. Esta abordagem é mais comum em trabalhos impressos. 2.3.2.1.2 Ranking A maioria das bibliotecas não classificam os padrões. Aquelas que o fazem, utilizam por norma uma escala de três patamares, baseada na que Alexander utiliza em A Pattern Language (como as bibliotecas de Borchers e Schümmer). A Yahoo! Design Pattern Library adota um sistema muito semelhante ao referido, igualmente organizado em três patamares (Trabalho Beta, Solução e Melhor Prática). Destacamse duas bibliotecas online que baseam a classificação dos padrões nas votações 25 TA: "(…) the earlier the pattern group appears on this scheme, the earlier it should be used in the design process (van Duyne, Douglas K., James A. Landay 2002).” 26 TA: “(…) by their approximate order in the design progression (Tidwell 2010).” 27 TA: “the search for a name is a fundamental part of the process of inventing or discovering a pattern (Alexander 1977).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 40! atribuídas pelos utilizadores (ui-Patterns (Toxboe 2007) e Info Design Patterns (Behrens 2008)). Fig. 7 Exemplo de estrutura de padrão de ui-Patterns, 2007. 2.3.2.1.3 Contexto Em A Pattern Language (Alexander 1977), cada padrão é antecedido por um pequeno parágrafo que o contextualiza. Esse texto introduz o padrão, relacionando-o com outros da biblioteca. Noutras bibliotecas, os padrões podem ser antecedidos por um pequeno texto descritivo, mas não com o intuito de os relacionar com outros padrões. 2.3.2.1.4 Ilustração Excepto Common Ground (Tidwell 1999), que carece de indicações visuais, todas as bibliotecas ilustram os padrões que as compõem. O tipo de ilustração varia consoante a área de estudo em causa. Alexander serve-se de fotografias de edifícios e espaços. No caso das bibliotecas de padrões de design, a noção de tempo é fundamental para sua interpretação, já que mostram os vários estádios de interação dos utilizadores com os padrões. Borchers usa fotografias de utilizadores a interagir com o sistema. Em Patterns for Computer-Mediated Interactions (Schümmer ESTRATÉGIAS DE DESIGN RESPONSIVO! 41! 2007), os padrões são acompanhados de fotografias que simbolizam os seus nomes. Info DesignPatterns, (Behrens 2008) opta por uma abordagem original. Na sua biblioteca, as habituais imagens estáticas são substituídas por interações reais, oferecendo ao utilizador a oportunidade de testar os padrões. Destacamos a Web Patterns for Mobile Devices (Ribeiro 2012) que para além dos elementos estruturais do padrão, inclui os também elementos interativos que o formam. Fig. 8 Exemplo de fotografia e diagrama ilustrativos de A Pattern Approach to Interaction Design, 2000. Fig. 9 Exemplo de ilustração de Info Design Patterns, 2008. ESTRATÉGIAS DE DESIGN RESPONSIVO! 48! 2.4 Design Centrado no Utilizador O conceito de Interface Humano-Máquina surgiu na década de 70, referindose aos aspetos do sistema com os quais o utilizador entra em contacto (Moran 1981).36 Na sequência do seu aparecimento, o conceito Interação HumanoComputador (daqui em diante, IHC) foi adotado em meados dos anos 1980. Os autores Baecker e Buxton definem IHC como um conjunto de processos, diálogos e ações, através dos quais um utilizador humano interage com o computador (Baecker & Buxton 1987).37 Posteriormente, outros autores abordaram o mesmo conceito: Interação Humano-Computador é uma disciplina que trata questões de concepção, avaliação e implementação de sistemas de computação interativos para uso do Homem, assim como os principais fenómenos que os cercam (ACM SIGCHI 1992).38 IHC trata do desenho de sistemas que permitam ao utilizador executar as suas atividades de uma forma produtiva e segura. Esta disciplina tem um papel fundamental no desenho e desenvolvimento de todos os tipos de sistemas, desde sistemas de controlo do tráfego aéreo ou de processamento nuclear, nos quais a segurança é extremamente importante, até sistemas que privilegiam a produtividade e a satisfação profissional dos utilizadores. O principal objetivo da IHC é desenvolver ou melhorar a segurança, utilidade, eficácia e usabilidade de sistemas que incluem computadores (1989).39 A Usabilidade é um conceito chave no contexto da IHC e traduz-se na criação de sistemas fáceis de usar. Segundo Krug, se algo é usável, quer se trate de um website, um comando ou uma porta giratória – tal significa que uma pessoa de habilidade e experiência média (ou mesmo abaixo da media) é capaz de descobrir como a utilizar sem grande dificuldade (2014).40 36 TA: “(…) those aspects of the system that the user comes in contact with (Moran 1981).” 37 TA: “set of processes, dialogues and actions through which a human user employs and interacts with a computer (Baecker & Buxton 1987).” 38 TA:” (...) human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them (ACM SIGCHI 1992).” 39 TA: “to develop or improve the safety, utility, effectiveness, and usability of systems that include computers (“Interacting with Computers” 1987).” 40 TA: “If something is usable — whether it’s a Web site, a remote control, or a revolving door — it means that A person of average (or even below average) ability and experience can figure out how to use the ESTRATÉGIAS DE DESIGN RESPONSIVO! 49! Compreender o âmbito da IHC é colocar os utilizadores em primeiro lugar. É em função das sua necessidades, capacidades e preferências que os sistemas são desenhados, não o contrário. Donald Norman identifica dois princípios chave que ajudam a assegurar uma boa IHC: visibilidade (os comandos devem estar bem visíveis) e affordance (o seu design deve sugerir a sua funcionalidade). Segundo Norman, affordance diz respeito às propriedades dos objetos – que tipos de operações e manipulações podem ser feitas para um determinado objeto (2013).41 Este princípio tem um papel fundamental no design de objetos mas o que mais importa é a chamada perceived affordance, isto é, aquilo que o utilizador identifica como a função do objeto em causa. Partindo dos princípios da ICH, a metodologia de Design Centrado no Utilizador coloca o utilizador no centro do processo de criação. 2.5 Design para a Saúde O cuidado e o cuidado na saúde dizem respeito ao cuidado da Humanidade. A saúde é, simultaneamente, pessoal e universal – talvez o único valor que importa a toda a gente (Jones 2013).42 A saúde é um sistema de grande complexidade que depende de duas componentes opostas: a institucional (hospitais e outras instituições de saúde) e a pessoal (os profissionais, os utentes e os seus familiares). A natureza da relação entre estas duas componentes é em tudo imprevisível. O crescente protagonismo da tecnologia informática nas diversas áreas, nomeadamente na da saúde, associado à complexidade que caracteriza este setor, atribui uma responsabilidade extrema ao processo de design. A prática de design de sistemas e serviços deve ser profundamente informada, já que um mau design vai ter repercussões negativas no quotidiano de profissionais e utentes da área da saúde. No seu livro, Design for Care, Peter H. Jones afirma que a complexidade de aplicações thing to accomplish something without it being more trouble than it’s worth (Krug 2014).” 41 TA: ”Affordance refers to the properties of objects - what sorts of operations and manipulations can be done to a particular object (D. Norman 2013).” 42 TA: “Care, and healthcare, is about taking care of humanity. Health is personal and universal — it may be the one value everyone cares about (Jones 2013). ESTRATÉGIAS DE DESIGN RESPONSIVO! 50! tecnológicas para saúde exige que os designers façam um compromisso pessoal, envolvendo anos de aprendizagem, prática e paciência. Espera-se que os designers compreendam e se adaptem à linguagem do domínio da saúde, em detrimento da linguagem do design e experiência do utilizador (2013). Resolver esta questão passa por definir estratégias para a construção de uma linguagem unitária: “Se não trabalharmos juntos na construção de uma estratégia sistemática, podemos estar a contribuir para a fragmentação do ramo.” (Jones 2013)43 Jones afirma ser necessário delinear estratégias ao nível do design para atingir a inovação, já que “uma estratégia de design determina se os gestores vão correr o risco de alterar o significado dos serviços de saúde, ou simplesmente adaptar a tecnologia às práticas atuais (2013).”44 A dificuldade do processo de design nesta área, reside sobretudo na discrepância entre o produto e o território ao qual este se destina. Se por um lado o design lida com conceitos abstratos, a saúde trabalha com sujeitos concretos, na resolução contínua de problemas práticos (Jones 2013). Apesar da crescente importância da tecnologia, é necessário equacionar qual o papel que esta ocupa no ramo da saúde, já que nem todos os sistemas nos cuidados de saúde são baseados no computador. Aqui, as relações humanas continuam a ser fulcrais. O atendimento é realizado por pessoas (desde o diagnóstico e tratamento dos pacientes, procedimentos e cuidados posteriores, assim como o planeamento da assistência) e tais processos não são automatizados (Jones 2013). A abordagem atual que predomina na prática do design para a saúde coloca o paciente como centro do projeto. Birgit Mager, professor de design e fundador do Service Design Network, afirma que pensar no design de serviços “o objectivo é garantir que as interfaces sejam úteis, utilizáveis e desejáveis do ponto de vista do cliente, e eficientes e distintas do ponto de vista do fornecedor (Mager, 2007).”45 Simultaneamente, todos os elementos convergem para oferecer ao paciente um produto final na forma de serviço clínico. Serviços como os quartos dos hospitais, comunicações, assistência, tratamento e pagamento, podem ser melhorados através de práticas de design. A implementação de metodologias aplicadas ao design para a saúde pode ser a solução para transformar experiências fragmentadas numa única 43 TA: “If we are not working together with a systemic strategy, we may be contributing to the fragmentation of the field (…) (Jones 2013). 44 TA: “A design strategy determines whether managers will risk changing the meaning of healthcare services or merely adapt technology to current practices (Jones 2013).” 45 TA: “(…) addresses the functionality and form of services from the perspective of clients. It aims to ensure that service interfaces are useful, usable, and desirable from the client’s point of view, and effective, efficient, and distinctive from the supplier’s point of view (Mager, 2007).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 51! experiência do utilizador. John Rheinfrank e Shelley Evenson sugerem que os serviços são hoje experiências e que o design enquanto prática deveria evoluir acompanhando a essa tendência, proporcionando aos utentes experiências emocionais positivas. O objetivo do design para serviços está a alterar-se: “(...) mudando do design centrado no utilizador para uma construção de experiências significativas centradas nas suas capacidades (Evenson & Dubberly, 2010).”46 Os hospitais pediátricos são exemplo da referida alteração. Através de decorações coloridas nas paredes e da criação de áreas recreativas, conseguem proporcionar um ambiente mais descontraído aos seus pacientes. 2.6 Design e Inovação As teorias da inovação celebram o valor da inovação disruptiva como a mais competitiva forma de inovação. Autores ligados ao mundo empresarial, alegam que este tipo de intervenções causam mais impacto e geram, potencialmente, mais lucro, já que quem as pratica torna-se vencedor em economias de grande escala. A rutura de práticas comuns tornou-se o objetivo da inovação, se não a sua própria definição. A inovação disruptiva promete uma mudança rápida, a par de intervenções tecnológicas (Jones 2013).”47 Existe uma antagonia nos desafios que o design enfrenta atualmente enquanto disciplina. Por um lado, há a necessidade de projetar em função dos utilizadores. O design centrado no ser humano é uma abordagem que coloca as necessidades, capacidades e comportamentos humanos em primeiro lugar, depois projeta em função dessas necessidades (D. Norman 2013). Ao mesmo tempo, é primordial que a disciplina acompanhe e estimule o desenvolvimento tecnológico. No artigo, Learning and Studying Interaction Design, Miguel Carvalhais refere que no contexto da educação em design, as competências 46 TA: “(…) moving from ‘user-centered’ design of things to ‘ability-centered’ co-construction of meaningful experiences (Evenson & Dubberly, 2010).” 47 TA: “Innovation theories celebrate the value of “disruptive” innovation as the most competitive form of innovation. Business authors claim disruptive interventions have the most impact and profit potential, because disruptive entrants displace winners in large economies. Disruption of current practices has become an aim of innovation, if not its very definition. Disruptive or radical innovation promises rapid change with technological interventions (…)(Jones 2013).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 52! para o design de interação devem ser construídas sob uma literacia procedimental mais ampla que tem sido defendida como indispensável para qualquer praticante de novos média. O autor defende a necessidade da alfabetização nos meios através dos quais as tarefas interdisciplinares podem ser desenvolvidas e realizadas (2008). Mas tal não passa pela observação dos comportamentos dos utilizadores: Concluímos que o design centrado no ser humano, com ênfase na observação, na ideação e nos testes é ideal para a inovação incremental, sendo improvável que conduza à inovação radical. A inovação radical advém de alterações na tecnologia ou no significado. A inovação conduzida pela tecnologia é frequentemente originada por inventores e autodidatas. Inovação do significado, pelo contrário, pode ser potenciada pela pesquisa na área do design, mas apenas se essa pesquisa abordar questões fundamentais de novos significados e suas interpretações (Norman & Verganti 2014). 48 Norman e Verganti afirmam que a investigação na área do design centrado no ser humano raramente, ou nunca, conduz à inovação tecnológica dramática. Tal acontece porque a inovação dos sistemas tecnológicos não resulta da mera observação da prática. Assim, o estudo do comportamento do utilizador tende a reforçar práticas existentes, já que segue parâmetros como objetivos e de produtividade. Segundo os autores, deveria antes basear-se na experimentação para alcançar práticas inovadoras . A chave para a inovação cultural passa, segundo Norman e Verganti, pela inovação radical do significado. Práticas socio-técnicas podem ser reformuladas sem mudar radicalmente as tecnologias, mas sim a finalidade social. A perspetiva de redesenhar as práticas existentes opõese à de autores como Peter H. Jones (2013) que defendem a inovação radical como objetivo. É necessário ter em causa que a adoção de novos sistemas e tecnologias exige uma extensa análise e avaliação. Este tipo de mudanças são extremamente morosas, têm um custo elevado e não são necessariamente significativas na experiência dos utilizadores (Norman & Verganti 48 TA: “We conclude that human-centered design, with its emphasis on iterated observation, ideation, and testing is ideally suited for incremental innovation and unlikely to lead to radical innovation. Radical innovation comes from changes in either technology or meaning. Technology-driven innovation often comes from inventors and tinkerers. Meaning-driven innovation, however, has the potential to be driven through design research, but only if the research addresses fundamental questions of new meanings and their interpretation (Norman & Verganti 2014).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 53! 2014). A relação entre design e tecnologia nunca esteve tão próxima. Nunca as tendências de design, nomeadamente no design de interfaces, foram tão impulsionadas pelas tecnologias emergentes. No artigo Designing with Contrast, Mark Mitchell afirma que hoje assistimos a uma tendência de ultra-minimalismo, onde a estética tem prioridade sobre legibilidade, acessibilidade e a descoberta. O autor refere ainda que tal tendência não mostra sinais de estar a perder popularidade, o que está prejudicar a nossa experiência com conteúdos digitais. Paralelamente, refere que as novas tecnologias também compõem esta tendência (2015). O autor coloca esta questão, alertando para o facto da disciplina estar a caminhar para a adoção de uma abordagem elitista: “Corremos o risco de projetar salas VIP, onde o custo de entrada é um Mac com um ecrã Retina.”49 Ao mesmo tempo, Mitchell afirma que assistimos a uma repetição, muitas vezes vazia e sem significado, afirmando que as escolhas tipográficas e cores tão em voga com os atuais produtos e serviços digitais populares têm pouco em comum com as marcas que pretendem representar. Os problemas surgem quando nos focamos no estilo, sem contexto; forma sem função; mimetismo como método (2015). 49 TA: “We are running the risk of designing VIP lounges where the cost of entry is a Mac with a Retina display (Mitchell 2015).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 54! 3 EPR MULTIPLATAFORMA 3.1 Apresentação dos casos de estudo O EPR Multiplataforma é uma aplicação Web constituída por duas vertentes distintas: EPR Médico, concebida para ser usada por médicos e EPR Enfermagem, direcionada ao uso dos enfermeiros. O EPR Médico Multiplataforma é um sistema de informação clínica orientado à mobilidade nas áreas de Internamento, Consulta Externa, Bloco Operatório e Urgência. A aplicação tem como base a informação existente no EPR Médico e no EPR de Enfermagem (as duas vertentes estão interligadas). A sua principal função é disponibilizar aos profissionais de saúde a informação clínica necessária ao acompanhamento adequado do doente. O EPR Médico foi otimizado para funcionar, simultaneamente, em Desktop e em Tablet. O EPR Enfermagem Multiplataforma é uma aplicação que foi desenvolvida para ser utilizada em dispositivos móveis, no registo dos enfermeiros junto à cama do doente. O seu principal objetivo é garantir os registos de enfermagem de forma segura, rápida e eficaz em tempo real, junto do doente. Na Tabela da Solução Clínica EPR Multiplataforma (vide Anexo 2), pretendemos sintetizar as duas soluções, no que respeita às suas principais caraterísticas. Ambas representam um evolução aplicacional para HTML. O perfil do Médico, encontrava-se maioritariamente na tecnologia D.net. O perfil de Enfermagem, evoluiu a partir da tecnologia Oracle Forms. As duas soluções estão implementadas em diferentes instituições. O EPR Médico, encontra-se nas seguintes: Hospital de Vila Franca de Xira, Hospital de Santa Maria e Hospital de Braga. Brevemente, será implementado também no IPO do Porto e no Hospital da Prelada (Porto). No caso do EPR Enfermagem, encontrase implementado no Hospital da Cuf (Porto) e será brevemente implementado no IPO do Porto. Relativamente aos contextos das soluções, o EPR Médico tem dois contextos distintos: o do médico (“visão descontextualizada”) e o do doente (“visão contextualizada”); o EPR Enfermagem segue uma lógica contextual semelhante, que inclui dois contextos distintos: o contexto do enfermeiro (visão descontextualizada) e o contexto do doente (visão contextualizada). ESTRATÉGIAS DE DESIGN RESPONSIVO! 55! Fig. 12 Esquema-síntese da aplicação EPR Multiplataforma (produzida pela autora). No que respeita às áreas funcionais, o EPR Médico tem quatro áreas distintas, presentes na visão descontextualizada do médico: Bloco Operatório, Consulta, Internamento e Urgência. O EPR Enfermagem contém a área do Internamento, associada à visão descontextualizada do enfermeiro. Tal como as áreas funcionais, também as funcionalidades de ambas as soluções se dividem por contexto. No caso do EPR Médico, à visão descontextualizada estão associadas as seguintes funcionalidades: • Notificações; • Relatórios; • Tarefas. Já à visão contextualizada, encontram-se associadas as seguintes: • Histórico Clínico; ESTRATÉGIAS DE DESIGN RESPONSIVO! 56! • Notas Clínicas; • Diagnósticos e Problemas; • eResults; • Relatórios; • Monitorizações; • Proposta Cirúrgica; • Pedido de Internamento; • Prescrição Interna; • Prescrição Externa; • Registo e Requisição MCDT50; • Pedido de Consulta; • Alta Clínica; • Alergias; • Dados Demográficos; • PIM51; • Tarefas. O EPR Enfermagem contém, na visão descontextualizada, as seguintes funcionalidades: • Lista de Doentes; • Monitorizações; • Vigilâncias; • Cardex.52 Na visão contextualizada, encontram-se: • Histórico do Doente; • Registo de Consumos; • Verificação Pré-cirúrgica; • Verificação Pós-cirúrgica; 50 Meios Complementares de Diagnóstico terapêutico. 51 Prescrição Médica Interna. 52 Definição de Kardex: (...) permite uma referência rápida às necessidades específicas de cada paciente para certos aspectos do cuidado do enfermeiro. Pode incluir um horário da toma de medicamentos, nível de atividade permitida, capacidade do paciente de realizar cuidados básicos a si mesmo, dieta, problemas especiais, programação de tratamentos e procedimentos e plano de cuidados. TA: “(...) allows quick reference to the particular needs of each patient for certain aspects of nursing care (...) may be a schedule of medications, level of activity allowed, ability to perform basic self-care, diet, any special problems, a schedule of treatments and procedures, and a care plan (Mosby’s Medical Dictionary 2009).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 57! • Avaliação Inicial; • Plano do Doente. Os objetivos funcionais encontram-se associados às funcionalidades descritas. No que respeita à plataformas e aos dispositivos, ambas as soluções estão desenvolvidas em HTML e otimizadas para serem utilizadas em Desktop e Tablet. 3.2 EPR Médico Multiplataforma 3.2.1 Funcionalidades: Menus Descontextualizado e Contextualizado Depois do utilizador efetuar a autenticação na aplicação (ver fig. 13), tem acesso ao Menu Descontextualizado (note-se que, quando nos referimos a “Descontextualizado”, referimo-nos ao contexto do médico, que se encontra descontextualizado por relação ao doente). O primeiro ecrã (ver fig. 14), disponibiliza uma série de áreas funcionais: Bloco Operatório, Consulta, Internamento e Urgência. Simultaneamente, o referido menu dá acesso às seguintes funcionalidades: Notificações, Relatórios e Tarefas. Fig. 13 Ecrã de autenticação na aplicação EPR Multiplataforma em Desktop (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 64! determinada categoria” (...) geralmente apresenta outras opções no mesmo nível de hierarquia, bem como opções da hierarquia seguinte (Kalbach 2008).”56 Geralmente a navegação global surge de uma forma consistente, sempre na mesma posição do ecrã, para que o utilizador se consiga situar no contexto da estrutura. Tal não acontece na aplicação EPR Multiplataforma. A navegação global, constituída pelas funcionalidades principais da aplicação, é subitamente substituída pela navegação local, quando surgem as funcionalidades do doente (ver fig. 19). Desta forma, o utilizador perde o contexto de utilização, desorientando a sua experiência de navegação do sistema. Apesar do cabeçalho apresentar a informação da funcionalidade principal anteriormente selecionada, tal acontece de uma forma discreta que nos parece ser insuficiente para orientar a experiência de navegação. Fig. 19 As funcionalidades principais presentes no ecrã anterior, são substituídas pelas funcionalidades contextualizadas do doente (produzida pela autora). Tradicionalmente, a navegação de rodapé contém informações suplementares não pertinentes ao tema principal do site (…) mas este tipo de navegação não é necessariamente insignificante (Kalbach 2008).” 57 No caso do EPR 56 TA:” Local navigation is used to access lower levels in a structure, below the main navigation pages. The term "local" implies "within a given category." On a given page, local navigation generally shows other options at the same level of a hierarchy, as well as the options below the current page (Kalbach 2008).” 57 TA: “Traditionally, footer navigation contains supplementary information not pertinent to main topic of the site (…) But footer navigation doesn't have to be insignificant (Kalbach 2008).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 65! Multiplataforma, a navegação de rodapé apresenta informações específicas relativas ao doente selecionado e permite efetuar uma pesquisa sobre todos os doentes. Fig. 20 Hierarquia da navegação na vertente Médico da aplicação EPR Multiplataforma, em Tablet (produzida pela autora). Fig. 21 Ecrã descontextualizado na vertente enfermagem, em Tablet vertical e horizontal (produzida pela autora). A mesma estrutura de navegação repete-se nas duas vertentes da aplicação EPR. Simultaneamente, a organização dos componentes de navegação pouco varia nos diferentes dispositivos, ou de acordo com a sua orientação (ver fig. 21). Ao percorrer a hierarquia do sistema, o utilizador perde contexto de utilização, questão que por resolver em todos os dispositivos para os quais a aplicação está ESTRATÉGIAS DE DESIGN RESPONSIVO! 66! desenvolvida. É urgente repensar estas duas questões: a falta de contexto de navegação na experiência do utilizador e a falta de responsividade do sistema. ESTRATÉGIAS DE DESIGN RESPONSIVO! 67! 3.5 Padrões de Navegação no EPR Multiplataforma 3.5.1 Contexto de Navegação Fig. 22 Contexto da Navegação na vertente médico do EPR Multiplataforma (produzida pela autora). A informação referente à funcionalidade selecionada no primeiro grau da hierarquia dá ao utilizador o seu contexto de localização no sistema. Problema O utilizador precisa de saber qual a sua localização na estrutura hierárquica do sistema, para conseguir voltar atrás para um nível mais elevado da hierarquia Solução É apresentada a contextualização relativamente à funcionalidade da navegação global anteriormente selecionada pelo utilizador. ESTRATÉGIAS DE DESIGN RESPONSIVO! 68! Exemplo Fig. 23 Contexto da Navegação no website do The Guardian UK (retirada de Designing for Touch, 2015). 3.5.2 Menu Persistente Fig. 24 Menu Persistente na vertente médico do EPR Multiplataforma (produzida pela autora). Este tipo de menu está sempre presente, geralmente no lado esquerdo da página, apresentando todas as opções. ESTRATÉGIAS DE DESIGN RESPONSIVO! 69! Problema O utilizador precisa de navegar entre as secções principais da aplicação. Solução O menu contém uma lista vertical com as principais funcionalidades, orientando o utilizador na navegação global. Exemplo Fig. 25 Menu Persistente no website do designer Rich Brown (retirada de http://www.richbrown.info) 3.5.3 Menu Deslizante Fig. 26 Menu Deslizante na vertente Enfermagem da aplicação EPR Multiplataforma (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 70! Este tipo de menu desliza para dentro e para fora do ecrã, sempre que necessário. Problema Nos dispositivos de menor dimensão (como é o caso do Tablet Vertical) o menu persistente ocupa espaço necessário para a visualização dos conteúdos. Solução O menu desliza para fora do ecrã sempre que necessário, disponibilizando espaço para a apresentação dos conteúdos principais da aplicação. Exemplo Fig. 27 Exemplo de menu deslizante no acesso ao Mail no iPad através de um gesto swipe (retirada de Designing for Touch, 2015). ESTRATÉGIAS DE DESIGN RESPONSIVO! 71! 3.5.4 Barra de Navegação Horizontal (topo) Fig. 28 Barra de navegação horizontal de topo na aplicação EPR multiplataforma, vertentes médico desktop e enfermagem em tablet vertical (produzida pela autora). Este padrão de navegação é tipicamente utilizado quando existe uma utilização frequente das diferentes vistas. No caso do EPR Multiplataforma, dá acesso às várias vistas sobre o mesmo conteúdo, nomeadamente, Lista Detalhada, Lista Normal, Informação sobre as legendas e filtros, na vertente médico e diferentes visões da lista de doentes, na vertente enfermagem. Problema Os utilizadores precisam de navegar rapidamente entre diferentes vistas de igual importância. Solução Permite aos utilizadores navegarem facilmente diferentes categorias do mesmo nível hierárquico. ESTRATÉGIAS DE DESIGN RESPONSIVO! 72! Exemplo Fig. 29 Exemplo de barra de navegação horizontal (topo) na aplicação Livestream (retirada de https://livestream.com) 3.5.5 Barra de Navegação Horizontal (rodapé) Fig. 30 Barra de navegação horizontal de rodapé na aplicação EPR Multiplataforma, vertente médico em tablet horizontal (produzida pela autora). Este padrão de navegação é tipicamente utilizado quando existe uma utilização frequente das diferentes vistas. No caso da aplicação EPR Multiplataforma, apresenta informações relativas ao doente selecionado. É muito utilizado em dispositivos móveis, especialmente em iOS, onde a localização no rodapé do ecrã facilita a ergonomia. Tal varia consoante o sistema operativo. No caso do Android o ESTRATÉGIAS DE DESIGN RESPONSIVO! 73! sistema contém de raiz botões de navegação na barra de rodapé, pelo que é mais conveniente posicionar a navegação no topo do ecrã. Desta forma é possível evitar o congestionamento de botões de navegação. Problema Os utilizadores precisam de navegar rapidamente entre diferentes vistas de igual importância. Solução Permite aos utilizadores navegarem facilmente diferentes categorias do mesmo nível hierárquico. Exemplo Fig. 31 Exemplo de barra de navegação horizontal (rodapé e topo) na aplicação Facebook, respetivamente para iOS e Android (retirada de Designing for Touch, 2015). ESTRATÉGIAS DE DESIGN RESPONSIVO! 80! Fig. 38 Quantidade de registos de utilização por funcionalidade, no EPR Médico (produzida pela autora). 4.2.2 Entrevistas Uma das componentes de caráter qualitativo que sustentou o nosso trabalho foi a realização de entrevistas aos utilizadores finais da aplicação, para compreender as suas necessidades no uso do sistema em causa. Simultaneamente, com o objetivo de compreender a evolução do processo de implementação da aplicação, entrevistámos os profissionais da Glintt. 4.2.2.1 Entrevistas aos Utilizadores Finais As entrevistas realizadas aos profissionais de saúde do IPO do Porto e do Hospital de Vila Franca de Xira, foram fundamentais para a caraterização dos utilizadores finais, no que respeita à forma como utilizam o EPR Multiplataforma. Foram entrevistados dois enfermeiros e dois médicos do IPO do Porto e quatro médicos do Hospital de Vila Franca de Xira. Tal possibilitou-nos identificar quatro personas distintas, com diferentes objetivos na utilização do EPR Multiplataforma. Sendo o nosso principal foco a responsividade ao nível da navegação, as duas personas primárias têm objetivos de utilização bastante relevantes no contexto da mobilidade do EPR Multiplataforma. No perfil do Enfermeiro, destacam-se como objetivos principais dos utilizadores, as funcionalidades associadas a: • Preparação dos doentes para exame; • Recobro dos doentes após exame. No perfil do Médico, destacam-se os seguintes objetivos finais, no uso da aplicação: • Funcionalidades da urgência; • Funcionalidades do internamento; • Visualização de exames. ESTRATÉGIAS DE DESIGN RESPONSIVO! 81! 4.2.2.2 Entrevistas aos profissionais da Glintt As entrevistas aos profissionais da Glintt foram realizadas no período compreendido entre os dias 8 e 15 de Março de 2016, nas instalações da Glintt. Foram entrevistados oito profissionais (Vide Anexo 5: Entrevistas aos Profissionais da Glintt), todos intervenientes no processo de criação da aplicação EPR Multiplataforma, com funções distintas: • Paulo Correia, Senior Manager; • Maurícia Castro, Senior Manager; • Miguel Castro, Product Manager; • Francisco Vicente, Software Developer; • Rui Gouveia, Senior Consultant; • Hélder Paiva, Senior Consultant; • Sónia Gomes, Beginner Consultant; • José Castro, Designer. Através da realização das entrevistas aos profissionais da Glintt, conseguimos aferir que: • As duas vertentes da aplicação EPR Multiplataforma constituem evoluções aplicacionais (ver figs. 39 e 40) no que respeita às linguagens em que estão desenvolvidas: no caso da vertente médico, é uma evolução da tecnologia D.net para HTML; a vertente de enfermagem constitui uma evolução da linguagem de Oracle Forms, também para HTML. O facto da aplicação estar a ser adaptada para uma nova linguagem contribui para a desfragmentação da sua estrutura e da sua identidade gráfica; • A vertente Médico da aplicação EPR Multiplataforma foi pensada primeiro para desktop e só posteriormente começou a ser adaptada para tablet (horizontal), daí a sua fragilidade no que respeita à responsividade; • A vertente de Enfermagem é mais recente, por isso muitos dos ecrãs estão ainda em desenvolvimento. Nesta vertente já foram previstos de raiz ecrãs para desktop e tablet (horizontal e vertical); • A aplicação EPR Enfermagem foi inicialmente pensada para funcionar como um programa stand-alone, só depois se decidiu integrar toda a solução, uniformizando-a para criar o EPR Multiplataforma. ESTRATÉGIAS DE DESIGN RESPONSIVO! 82! Fig. 39 Exemplo de ecrã do EPR Enfermagem na tecnologia Oracle Forms. Fig. 40 Exemplo de ecrã do EPR Médico na tecnologia D.Net. ESTRATÉGIAS DE DESIGN RESPONSIVO! 83! 4.3 Caraterização das Personas Modelos de utilizadores ou personas, são arquétipos detalhados dos utilizadores, que representam grupos distintos de comportamentos, atitudes, objetivos e motivações, observados e identificados ao longo da fase de pesquisa (Cooper, Reinmann, and Cronin 2007).59 As entrevistas realizadas aos utilizadores da aplicação EPR Multiplataforma e a outros profissionais de saúde que, apesar não ainda serem utilizadores, vão começar a utilizar a aplicação brevemente, foi fundamental para a caraterização das personas. As entrevistas foram realizadas no Hospital de Vila Franca de Xira e no IPO do Porto, tendo sido entrevistados sete profissionais de saúde, entre médicos e enfermeiros. Os dados retirados das referidas entrevistas são de caráter qualitativo, quer pela natureza da técnica de recolha de dados em causa, quer pelo facto da amostra de entrevistados ser reduzida e não representativa. Foram identificados três tipos de personas: duas primárias, uma secundária e uma complementar. Sendo o objetivo da presente investigação estudar da responsividade da aplicação EPR Multiplataforma, o principal critério para a distinção dos tipos de personas, foi a utilização, ou não utilização de diferentes dispositivos (desktop e tablet). Constituem personas primárias, aquelas que utilizam mais do que um tipo de dispositivo e, simultaneamente, têm objetivos mais abrangentes no uso da aplicação. Secundárias, as que usam apenas o Desktop nas tarefas que executam, com objetivos mais restritos. A persona complementar utiliza a aplicação apenas numa perspetiva de monitorização dos profissionais que dirige, não sendo uma utilizadora regular da mesma. As imagens que se seguem (ver figs. 41, 42, 43 e 44) ilustram as personas identificadas, no âmbito do presente projeto. Os aspetos comuns às quarto personas identificadas são os seguintes: • São profissionais de saúde, médicos ou enfermeiros; • Sentem-se à vontade no uso de tecnologias; • Valorizam a mobilidade e a digitalização de processos; • Não têm problemas cognitivos. 59 TA: “User models, or personas, are detailed, composite user archetypes that represent distinct groupings of behaviors, attitudes, aptitudes, goals, and motivations observed and identified during the Research phase (Cooper, Reinmann, and Cronin 2007).” ESTRATÉGIAS DE DESIGN RESPONSIVO! 84! 4.3.1 Persona Primária 1 A primeira persona primária que identificámos (ver fig. 41) na sequência das entrevistas realizadas aos profissionais de saúde das instituições anteriormente referidas, utiliza a aplicação na vertente EPR Médico. Carateriza-se pela utilização simultânea de desktop e de tablet, associada a uma variedade de objetivos no uso da aplicação EPR Multiplataforma. Tal como as restantes personas, tem o objetivo de registar informaticamente todas as tarefas na aplicação em causa, mas destaca algumas dessas tarefas como sendo mais relevantes, no contexto da mobilidade: • Funcionalidades da urgência; • Funcionalidades do internamento; • Visualização de exames. Fig. 41 Persona Primária 1 (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 85! 4.3.2 Persona Primária 2 A segunda persona primária identificada (ver fig. 42) utiliza a aplicação na vertente EPR Enfermagem. Tal como a persona primária 1, carateriza-se pela utilização simultânea de desktop e de tablet, associada a uma variedade de objetivos no uso da aplicação EPR Multiplataforma. Tem como objetivo registar todas as tarefas que executa informaticamente. No âmbito da mobilidade, destacam-se as seguintes: • Preparação dos doentes para exame; • Recobro dos doentes após exame. Fig. 42 Persona Primária 2 (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 86! 4.3.3 Persona secundaria A persona secundária que identificámos (ver fig. 43) utiliza a aplicação na vertente do médico e distingue-se das duas personas primárias por utilizar apenas um tipo de dispositivo, no contacto com a aplicação EPR Multiplataforma – o desktop. Por esse motivo, a sua utilização da aplicação é mais limitada, pois não tira partido da mobilidade. Ainda assim, os seus objetivos de utilização da aplicação são abrangentes, designadamente: • Na consulta dos doentes da enfermaria; • Na consulta dos doentes em urgência; • Na gestão dos gabinetes. Fig. 43 Persona Secundária (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 87! 4.3.4 Persona Complementar A persona complementar identificada (ver fig. 44), utiliza a aplicação na vertente EPR Enfermagem. A sua utilização é meramente na perspetiva de monitorização dos profissionais que dirige, não sendo uma utilizadora regular da mesma. Por este motivo, tem uma interação bastante limitada com a aplicação. Fig. 44 Persona Complementar (produzida pela autora). . ESTRATÉGIAS DE DESIGN RESPONSIVO! 88! 4.4 Circuitos Selecionados A definição dos circuitos escolhidos para uma análise mais detalhada (vide Anexo 6: Circuitos Selecionados), resultou do cruzamento dos dados obtidos através da análise dos registos de utilização e das entrevistas realizadas aos profissionais de saúde. O presente estudo tem como foco principal a responsividade existente entre as diferentes plataformas (desktop e tablet), motivo pelo qual privilegiámos funcionalidades que fizessem sentido no contexto da mobilidade, sendo usadas nos dois tipos de dispositivos. No contexto do EPR Médico, centrámo-nos nas funcionalidades da Urgência e do Internamento, definindo um circuito diferente, associado a cada uma das referidas funcionalidades: 1. Consultar e adicionar uma nota clínica a um doente que se encontre em urgência; 2. Fazer uma requisição MCDT a um doente que se encontre internado. No contexto do EPR Enfermagem, centrámo-nos nas funcionalidades das Vigilâncias e das Monitorizações, escolhendo igualmente um circuito associado a cada uma das duas: 1. Alterar vigilância associada a um doente; 2. Alterar monitorização associada a um doente. Como será explicado no Relatório dos Teste de Usabilidade | Fase 1 (vide 5.1.1.4 Circuito Escolhido), para otimizar o tempo disponível para aferição de resultados, possibilitando a melhoria da nossa proposta de trabalho e a realização de novos testes, foi selecionado um único circuito para a realização do teste de usabilidade – Circuito 1: Consultar e Adicionar uma Nota Clínica ao Doente 1 da Lista de Doentes em Urgência (EPR Médico Multiplataforma). Dos quatro circuitos analisados, o Circuito 1 é o mais complexo (EPR Médico tem uma estrutura mais densa do que o EPR Enfermagem); encontra-se menos completo no que respeita à responsividade dos seus ecrãs; resolver questões de organização da navegação numa estrutura funcional complexa (EPR Médico), permite adaptar os resultados obtidos para uma estrutura de menor complexidade (EPR Enfermagem). ESTRATÉGIAS DE DESIGN RESPONSIVO! 89! 5 ESTRATÉGIAS DE RESPONSIVIDADE No presente capítulo apresentamos uma proposta de responsividade aplicada ao Circuito 1 – Consultar e adicionar uma nota clínica a um doente que se encontre em urgência da vertente médico da aplicação EPR Multiplataforma. O objetivo principal é repensar e melhorar a experiência do utilizador ao nível navegação nos diversos dispositivos (desktop, tablet e smartphone). Para além da metodologia de design centrado no utilizador, utilizamos a metodologia mobile first, que nos permitiu resolver à partida um conjunto de restrições associadas à pequena dimensão do ecrã do smartphone. Desenhar para ecrãs touch implica repensar a forma como o utilizador interage com o sistema do dispositivo em causa. Para isso, temos considerar quais as zonas acessíveis, ou não pelos polegares (vulgarmente usados pelos utilizadores para interagir com este tipo de ecrãs). Fig. 45 Os polegares são os dedos mais utilizados na interação com smartphones (retirada de Designing for Touch, 2015). ESTRATÉGIAS DE DESIGN RESPONSIVO! 96! 5.1.1.6 Resultados Obtidos A observação do comportamento dos utilizadores quando tentaram executar as tarefas do circuito em causa, permitiu-nos aferir que: • A estrutura da navegação está organizada de forma pouco clara, sendo urgente fazer alterações no sentido de uma melhoria da sua hierarquia; • O contexto do utilizador perde-se ao longo dos sucessivos ecrãs. Isto acontece especialmente no caso do smartphone e no tablet vertical. Fig. 51 Perda de contexto de navegação no smartphone. ESTRATÉGIAS DE DESIGN RESPONSIVO! 97! Fig. 52 Perda de contexto de navegação no tablet vertical. 5.1.1.7 Inquérito System Usability Scale (SUS) Optou-se por utilizar a System Usability Scale, uma escala consensualmente usada em Testes de Usabilidade, para aferir a satisfação dos utilizadores. Os gráficos que se seguem ilustram a sua opinião relativamente à usabilidade da nossa proposta para a aplicação EPR Multiplataforma. A escala é gradual e está compreendida entre os valores 1 (Discordo completamente) e 5 (Concordo totalmente). Fig. 53 Poderia usar esta aplicação frequentemente (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 98! Fig. 54 Achei a aplicação desnecessariamente complexa (produzida pela autora). Fig. 55 Achei que a aplicação era fácil de usar (produzida pela autora). Fig. 56 Iria precisar do apoio de um técnico para ser capaz de utilizar a aplicação (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 99! Fig. 57 Achei que as várias funções da aplicação estavam bem integradas (produzida pela autora). Fig. 58 Pareceu-me haver muita inconsistência na aplicação (produzida pela autora). Fig. 59 Imagino que a maioria das pessoas iria aprender a utilizar esta aplicação muito rapidamente (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 100! Fig. 60 Achei a aplicação muito complicada de usar (produzida pela autora). Fig. 61 Senti-me muito confiante ao usar a aplicação (produzida pela autora). Fig. 62 Precisava de aprender bastante antes de poder começar a usar a aplicação (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 101! 5.1.2 Relatório do Teste de Usabilidade | Fase 2 5.1.2.1 Metodologia A segunda fase do teste de usabilidade da nosso proposta para aplicação EPR Multiplataforma foi realizada nos dias 7 e 8 de Junho de 2016, nas instalações da Glintt e em casa de dois participantes anónimos. Participaram neste teste quatro elementos da equipa de Design da Glintt e dois estudantes da Faculdade de Engenharia da Universidade do Porto. Tal como na fase 1, foram realizados testes de caráter formativo, de acordo com a fase e a natureza da nossa proposta (vide 5.1.1 Relatório do Teste de Usabilidade | Fase 1, 5.1.1.1 Metodologia). 5.1.2.2 Objetivo do Teste de Usabilidade Sendo o nosso foco de estudo a navegação da aplicação EPR Multiplataforma, pretendemos compreender de que forma os utilizadores interagem com o sistema, ao nível da navegação do mesmo. Mantendo o objetivo do teste realizado na fase 1, pretendemos ver colmatadas as falhas detetadas no decorrer do mesmo: • A estrutura da navegação encontrava-se, numa primeira fase, organizada de uma forma pouco clara. Foram feitas alterações na sua estrutura, no sentido de uma melhoria da hierarquia da mesma; • O contexto do utilizador perdia-se ao longo dos sucessivos ecrãs. Tal acontecia especialmente no caso do smartphone. 5.1.2.3 Participantes Não havendo possibilidade de realizar o teste no contexto real de utilização do EPR Multiplataforma, recorremos, tal como na fase 1, à equipa responsável pela sua criação: três designers da Glintt HS e uma consultora, todos elementos da equipa de Produto. Simultaneamente, participaram no teste em causa dois colegas, estudantes da Faculdade de Engenharia da universidade do Porto. Todos os participantes estão bastante à vontade no uso de tecnologias. O ESTRATÉGIAS DE DESIGN RESPONSIVO! 102! primeiro grupo de participantes encontra-se familiarizado com a aplicação em causa, ao contrário do segundo grupo. 5.1.2.4 Dispositivos Sendo o principal objetivo do presente trabalho o estudo da responsividade da aplicação EPR Multiplataforma, o teste incluiu frameworks responsivas do circuito escolhido desenhadas para os seguintes dispositivos: • Smartphone (iPhone); • Tablet (iPad horizontal e vertical); • Desktop. 5.1.2.5 Circuito escolhido Para otimizar o tempo disponível para aferição de resultados, possibilitando a melhoria da nossa proposta de trabalho e a realização de novos testes, foi selecionado o mesmo percurso utilizado na anterior fase de testes – Circuito 1: Consultar e Adicionar uma Nota Clínica ao Doente 1 da Lista de Doentes em Urgência (EPR Médico Multiplataforma). Os motivos para a escolha deste circuito mantiveram-se (vide 5.1.1 Relatório do Teste de Usabilidade | Fase 1, 5.1.1.5 Circuito Escolhido). 5.1.2.6 Resultados Obtidos A observação do comportamento dos utilizadores quando tentaram executar as tarefas do circuito em causa, permitiu-nos aferir que: • Houve uma melhoria significativa no contexto de navegação, pelo que os utilizadores já não apresentam dificuldade em atingir o objetivo proposto, nesse âmbito; • Os utilizadores demonstraram alguma dificuldade em descobrir o botão referente às funcionalidades contextualizadas do doente (para aceder às “Notas Clínicas” do mesmo); • Outra dificuldade demonstrada pela generalidade dos utilizadores diz ESTRATÉGIAS DE DESIGN RESPONSIVO! 103! respeito à ação “Voltar”, uma vez selecionada a “Nota Clínica 1”, para voltar à lista das Notas Clínicas; • Ao contrário do que seria de esperar, foram detetadas dificuldades semelhantes nos dois grupos distintos de utilizadores. Fig. 63 Melhoria significativa no contexto de navegação em smartphone (produzida pela autora). Fig. 64 Uma vez selecionada a “Nota Clínica 1”, os utilizadores demonstraram dificuldade em voltar para a lista Notas Clínicas. ESTRATÉGIAS DE DESIGN RESPONSIVO! 104! 5.1.2.7 Inquérito System Usability Scale (SUS) Os gráficos que se seguem ilustram a opinião dos utilizadores, relativamente à usabilidade da nossa proposta para a aplicação EPR multiplataforma. A escala é gradual e está compreendida entre os valores 1 (Discordo completamente) e 5 (Concordo totalmente). Fig. 65 Poderia usar esta aplicação frequentemente (produzida pela autora). Fig. 66 Achei a aplicação desnecessariamente complexa (produzida pela autora). Fig. 67 Achei que a aplicação era fácil de usar (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 105! Fig. 68 Iria precisar do apoio de um técnico para ser capaz de utilizar a aplicação (produzida pela autora). Fig. 69 Achei que as várias funções da aplicação estavam bem integradas (produzida pela autora). Fig. 70 Pareceu-me haver muita inconsistência na aplicação (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 112! Fig. 80 Primeiros níveis de navegação local nos diferentes dispositivos (produzida pela autora) O último nível da navegação local diz respeito a ações específicas das funcionalidades selecionadas. Localiza-se lateralmente, em desktop e tablet horizontal e no fundo do ecrã, em tablet vertical e smartphone (ver fig. 81). Para resolver as condicionantes intrínsecas ao smartphone, designadamente o pouco espaço de ecrã disponível, optámos esconder a navegação local num botão que a revela quando necessário (ver fig. 82). ESTRATÉGIAS DE DESIGN RESPONSIVO! 113! Fig. 81 Último nível da navegação local nos diferentes dispositivos (produzida pela autora). Fig. 82 Proposta de solução para “mais ações” em smartphone: botão que expande, mostrando mais opções de ações possíveis (produzida pela autora). Quando a funcionalidade “Nota Clínica” é selecionada, esta funciona como um item extensível, revelando as suas informações sem sair da lista vertical que a inclui (ver fig. 83). ESTRATÉGIAS DE DESIGN RESPONSIVO! 114! Fig. 83 Proposta de solução para o ecrã “Nota Clínica Selecionada” (produzida pela autora). Fig. 84 Proposta de ecrã “Adicionar Nota Clínica” nos diferentes dispositivos (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 115! A proposta final constitui uma melhoria significativa relativamente às duas anteriores. Consegue solucionar: • A organização da hierarquia da navegação, que se apresenta de uma forma clara; • A contextualização do utilizador, que tem sempre referência dos sucessivos níveis de navegação selecionados, localizando-se; • A ergonomia nos diferentes ecrãs, pois todos estão desenhados para que os botões sejam acessíveis aos polegares. O circuito completo, nos diferentes dispositivos, pode ser acedido aqui: iPhone: https://marvelapp.com/1bhbde8 iPad Horizontal: https://marvelapp.com/22a4j7e iPad Vertical: https://marvelapp.com/67a74eg Desktop: https://marvelapp.com/67afdcg ESTRATÉGIAS DE DESIGN RESPONSIVO! 116! 6 CONCLUSÃO 6.1 Satisfação dos Objetivos A presente dissertação tem como objetivo principal delinear estratégias de responsividade para um caso de específico: a aplicação web EPR Multiplataforma, da Glintt Globalcare. A aplicação em causa não foi concebida de raiz para se adaptar a diferentes dispositivos nem às suas resoluções, contendo ecrãs desenhados de forma semelhante para os diferentes suportes. Partindo do estudo aprofundado dos conceitos de design responsivo e de padrões de design e sustentando-nos numa metodologia de design centrado no utilizador, fomos capazes de analisar e identificar pontos de melhoria no caso de estudo. O primeiro ponto de melhoria identificado diz respeito à estrutura de navegação do caso de estudo. Através da análise da estrutura da sua hierarquia funcional, identificámos seis níveis hierárquicos na vertente médico e cinco, na vertente de enfermagem. Ambas as vertentes da aplicação estão organizadas segundo estruturas densas que contêm muita quantidade de informação. A navegação está organizada de uma forma pouco clara e intuitiva, já que os sucessivos níveis da hierarquia vão substituindo os anteriores. O segundo ponto que identificámos foi a descontextualização do utilizador. A falta de hierarquia na estrutura de navegação tem repercussões significativas na experiência do utilizador. O ato de navegação torna-se confuso, já que o utilizador perde contexto à medida que percorre os diferentes níveis hierárquicos da aplicação. Entrevistas realizadas a cerca de oito utilizadores finais da aplicação vieram ajudar a confirmar tais fragilidades. Outra necessidade de melhoria identificada foi a de desenhar os diversos ecrãs para a interação através do toque. De facto, os elementos de navegação não estão colocados de forma ergonómica, já que estão sempre na mesma posição independentemente do dispositivo em causa ou da sua orientação. Com o objetivo de resolver os pontos atrás identificados, realizámos uma proposta prática para o Circuito 1: Consultar e Adicionar uma Nota Clínica ao Doente 1 da Lista de Doentes em Urgência (EPR Médico Multiplataforma). Dada a complexidade do circuito escolhido, assim como a estrutura base da aplicação, é possível aplicar esta organização aos restantes circuitos do EPR Multiplataforma. A metodologia de design centrado no utilizador revelou-se essencial para a construção da proposta final. Os testes de usabilidade realizados com os utilizadores ESTRATÉGIAS DE DESIGN RESPONSIVO! 117! foram determinantes para identificar pontos de melhoria, refletindo-se numa constante evolução das sucessivas fases de trabalho. Paralelamente, a adoção da metodologia de design mobile first, permitiu-nos otimizar o tempo de trabalho, identificando os maiores constrangimentos numa fase inicial da proposta prática. A proposta final está construída de acordo com as seguintes linhas condutoras: organizar a navegação sempre refletindo a hierarquia do sistema em causa; clarificar o contexto do utilizador, privilegiando a sua orientação à medida que percorre os diversos níveis da hierarquia; utilizar padrões de design responsivos no desenho dos elementos funcionais que compõem os diversos ecrãs; localizar os elementos de navegação em zonas ergonómicas, preparando todos os dispositivos para a interação através do toque. As estratégias atrás identificadas constituem linhas orientadoras que podem ser aplicadas a qualquer sistema. A aplicação de diretrizes responsivas, assim como de uma metodologia centrada no utilizador, revelam-se fundamentais para melhorar a experiência do utilizador. 6.2 Limitações e Trabalho Futuro As principais limitações encontradas ao longo do presente projeto de investigação foram a impossibilidade de realizar inquéritos e testes de usabilidade aos utilizadores finais do EPR Multiplataforma. Simultaneamente, o limite de tempo impediu-nos de replicar a proposta dos wireframes finais nos restantes circuitos selecionados. Parece-nos que a proposta poe ser facilmente adaptada aos mesmos, no entanto, tal hipótese não foi testada. O presente trabalho centrou-se numa questão específica da abordagem responsiva: a navegação. Seguindo a mesma linha condutora, futuramente poderiam ser aprofundadas outras problemáticas, designadamente: a inserção e edição de dados no sistema ou a iconografia. Seguindo um fio condutor diferente, mas igualmente relevante no âmbito do design enquanto disciplina, seria a compreensão da evolução da tecnologia enquanto condicionante do design. Através da análise da evolução da aplicação ao longo das suas diferentes versões, estabelecer um paralelismo entre design e tecnologia, dissertando sobre a sua interdependência. BIBLIOGRAFIA ACM SIGCHI. 1992. Curricula for Human-Computer Interaction. New York, New York: The Association for Computing Machinery. Adams, Cameron. 2004. “Resolution Dependent Layout.” http://www.themaninblue.com/writing/perspective/2004/09/21/. 29 de Dezembro 2015. Alexander, Christopher. 1973. Notes on the Synthesis of Form. London: Oxford University Press. doi:64-13417. ———. 1977. A Pattern Language: Towns, Buildings, Construction. New York, New York: Oxford University Press. Allen, Ryan. 2014. “Responsive Type and More With Only CSS.” https://medium.com/@ryanallen_com/responsive-type-with-only-css82b846370cc9#.x41sdrvx8. 22 de Junho 2016. Apple Inc. “Designing for iOS.” ios Human Interface Guidelines, https://developer.apple.com/library/ios/documentation/UserExperience/Conceptu al/MobileHIG/. 22 de Junho 2016. Baecker & Buxton. 1987. “Readings in Human-Computer Interaction: A Multidisciplinary Approach.” San Mateo: Morgan Kaufmann Publishers. Behrens, Christian. 2008. “Info Design Patterns.” http://www.niceone.org/infodesignpatterns/index.php5#/patterns.php5. 4 de Janeiro 2016. Borchers, Jan O. 2000. “A Pattern Approach to Interaction Design.” New York. https://hci.rwth-aachen.de/materials/publications/borchers2000a.pdf. 4 de Janeiro 2016. Boulton, Mark. 2012. “A New Canon.” http://www.markboulton.co.uk/journal/anewcanon. 4 de Janeiro de 2016. Carvalhais, Miguel. 2008. “Learning and Studying Interaction Design through Design Patterns. Introduction & Context.” PLoP. Nashville, TN. Clark, Josh. 2015. Designing for Touch. The Mobile Book. New York, New York: A Book Apart. Cooper, Alan, Robert Reinmann and David Cronin. 2007. About Face 3.0: The Essentials of Interaction Design. Information Visualization. 4th ed. Vol. 3. Indianopolis, Indiana: John Wiley & Sons, Inc. doi:10.1057/palgrave.ivs.9500066. Crumlish, Christian and Erin Malone. 2009. Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience. Sebastopol, California: O’Reilly Media, Inc. "Emarketeer". 2014. http://www.emarketer.com/Article/Smartphone-UsersWorldwide-Will-Total-175-Billion-2014/1010536. 22 de Junho 2016. Gamma, Erich, Richard Helm, Ralph Johnson and John Vlissides. 1994. Design Patterns: Elements of Reusable Object-Oriented Software. Edited by Addison-Wesley Professional. 1st ed. Massachusetts. doi:10.1093/carcin/bgs084. Google. 2015. “Google Material Design Guidelines.” 2016. https://www.google.com/design/spec/patterns/data-formats.html#. 22 de Junho 2016. Hoekman, Jr. Robert. ·. 2009. “The Myth of Usability Testing.” Usability, User Research . http://alistapart.com/article/the-myth-of-usability-testing. 22 de Junho 2016. Hoober, Steven, and Eric Berkman. 2011. Designing Mobile Interfaces. Sebastopol, California: O’Reilly Media, Inc. Instituto Superior Técnico. 2010. “Banco de Padrões de Design.” doi:http://bpd.ist.utl.pt/. 1 de janeiro 2016. “Interacting with Computers.” 1987. Interacting with Computers. https://iwc.oxfordjournals.org. 22 de Junho 2016. Jones, Peter H. 2013. Design for Care: Innovating HealthCare Experience. Edited by Rosenfeld Media. Brooklyn, New York: Louis Rosenfeld. www.rosenfeldmedia.com. Kalbach, James. 2008. Designing Web Navigation. Sebastopol, California: O’Riley Media. Krug, Steve. 2014. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability. Edited by Elisabeth Bayle. Third. US. www.newriders.com. Leavy, Brian. 2010. “Design Thinking – a New Mental Model of Value Innovation.” Strategy & Leadership 38 (3). Stanford Social Innovation Review [Internet]: 5–14. doi:10.1108/10878571011042050. Leech, Joe. 2015. “How to Do a UX Review.” UX. https://24ways.org/2015/how-to-do-a-ux-review/. 22 de Junho 2016. Marcotte, Ethan. 2009. “Unstopabble Robot Ninja - Fluid Images.” http://unstoppablerobotninja.com/entry/fluid-images/. 22 de Junho 2016. ———. 2010. “A List Apart - Responsive Web Design.” http://alistapart.com/article/responsive-web-design. 22 de Junho 2016. ———. 2011. Responsive Web Design. New York: A Book Apart. ———. 2015. Responsive Web Design: Patterns and Principles. New York: A Book Apart. McGrane, Karen. 2012. Content Stratagy For Mobile. New York: A Book Apart. Mitchell, Mark. 2015. “Designing with Contrast.” Design . https://24ways.org/2015/designing-with-contrast/. 22 de Junho 2016. Moran, Thomas. 1981. “Thomas P. Moran The Command Language Grammar: A Representation for the User Interface of Interactive Computer Systems.” International Journal of Man-Machine Studies. Mosby’s Medical Dictionary. 2009. Elsevier. Muller-Brockmann, Josef. 1961. Grid Systems In Graphic Design: A Visual Communication Manual for Graphic Designers, Typographers and Three Dimensional Designers. http://scholar.google.com/scholar?hl=en&btnG=Search&q=intitle:Grid+Systems+i n+Graphic+Design#8\nhttp://scholar.google.com/scholar?hl=en&btnG=Search&q =intitle:Grid+Systems+In+Graphic+Design#8. 23 de dezembro 2015. Neil, Theresa. 2012. Mobile Design Pattern Gallery. Sebastopol, California: O’Riley Media. Norman, Don. 2013. The Design of Everyday Things. New York, New York: Basic Books. Norman, Donald and Roberto Verganti. 2014. “Incremental and Radical Innovation: Design Research Versus Technology and Meaning Change Roberto Verganti -Bio.” Design Issues, 30(1), 78-96. www.verganti.com. Pattern Factory. 2009. “Patternry Open Library.” http://patternry.com. 22 de Junho 2016. Ribeiro, Jorge. 2012. “Web Design Patterns for Mobile Devices,” no. July: 158. http://repositorio-aberto.up.pt/handle/10216/64860. 22 de Junho 2016. Schümmer, Till, and Stephan Lukosch. 2007. Patterns for Computer-Mediated Interaction. Chichester, England: Wiley Publishing. Scott, Bill, and Theresa Neil. 2009. Designing Web Interfaces: Principles and Patterns for Rich Interactions. Sebastopol, California: O’Reilly Media. Tidwell, Jeniffer. 1999. “Common Ground: A Pattern Language for Human-Computer Interface Design.” http://www.mit.edu/~jtidwell/common_ground.html. ———. 2010. Designing Interfaces. Canada: O’Reilly Media. Toxboe, Anders. 2007. “UI Patterns.” http://ui-patterns.com/. van Duyne, Douglas K., James A. Landay, and Jason I. Hong. 2002. The Design of Sites: Patterns for Creating Winning Websites. 2nd ed. New Jersey: Upper Saddle River. W3C. 2012. “Media Queries: W3C Recommendation 19 June 2012.” http://www.w3.org/TR/css3-mediaqueries/. 22 de Junho 2016. ———. 2015. “Graceful Degradation versus Progressive Enhancement.” https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancemen t. 22 de Fevereiro de 2015. Wroblewski, Luke. 2011. Mobile First. 6th ed. New York: A Book Apart. Yahoo. 2006. “Yahoo Design Pattern Library.” https://developer.yahoo.com/ypatterns/about/. 22 de Junho 2016. Página de Login EPR Médico EPR Enfermagem Bloco Operatório Consulta Internamento Urgência Notificações Relatórios Tarefas Á 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 Lista de Doentes em Bloco Operatório Lista de Doentes em Internamento Lista de Notificações Lista de Doentes em Consulta Lista de Doentes em Urgência Lista de Relatórios Lista de Tarefas Doente Selecionado Lembretes Adicionados Tarefa Selecionada Doente Selecionado Doente Selecionado Doente Selecionado Tarefas do Doente 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 Relatórios Histórico Clínico Notas Clínicas Proposta Cirúrgica Pedido de Internamento Prescrição Externa Diagnóstico e Problemas Prescrição Interna Requisição MCDT Pedido de Consulta Próxima Consulta Alta Clínica Registo MCDT Alergias Dados Demográficos PIM Tarefas 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 Lista de Episódios do Doente Especificação dos Episódios Notas Clínicas do Doente Lista de Problemas do Doente eResults Monitorizações Lista de Documentos disponíveis no repositório eResults Lista das Monitorizações do Doente Lista das Propostas Cirúrgicas do Doente Informação Clínica Informação Geral Outros Lista dos Pedidos de Internamento Prescrição de dispositivos Lista de Requisições Dados Gerais da Prescrição Resumo Medicamentos Items não medicamentos Dieta Lista de MCDTs registados Lista de Pedidos de Consulta Marcação de Consultas Finalização da Alta Clínica Em desenvolvimento Em desenvolvimento Dados demográficos do Doente Tarefas associadas ao Doente Lista de Tarefas de todos os Doentes Associar nova tarefa ao Doente Especificação dos Problemas Lista de Relatórios do Doente Informação Geral Especificação dos Pedidos Especificação das Requisições Fig. 87 Organograna Funcional EPR Médico Multiplataforma (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 129! Anexo 4: Organograma Funcional EPR Enfermagem Multiplataforma Página de Login EPR Enfermagem EPR Médico Lista de Doentes Cardéx Monitorizações Vigilâncias Doente Selecionado Lista da Medicação a ser validada de todos os Doentes Lista de Monitorizações de todos os Doentes Lista de Vigilâncias de todos os Doentes SOS Horas Camas Histórico Clínico Plano do Doente Registo de Consumos Avaliação Inicial Verificação Pré-Cirúrgica Verificação Pós-Cirúrgica Lista de Episódios do Doente Episódio Selecionado Lista de Medicações do Doente Não Administração Administração Em curso Observações Anular Lista de Tarefas Pós-Cirúrgicas Documentos Associados Lista de Tarefas Pré-Cirúrgicas Documentos Associados Inserir Consumos do Doente Informação do Doente Informação Clínica Marca Código Produto 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 Organograma Funcional EPR Enfermagem Multiplataforma (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 131! Anexo 5: Entrevistas aos profissionais da Glintt ESTRATÉGIAS DE DESIGN RESPONSIVO! 132! Fig. 89 Entrevista a Paulo Correia (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 133! Fig. 90 Entrevista a Maurícia Castro (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 134! Fig. 91 Entrevista a Miguel Castro (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 135! Fig. 92 Entrevista a Francisco Vicente (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 136! Fig. 93 Entrevista a Rui Gouveia (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 137! Fig. 94 Entrevista a Hélder Paiva (produzida pela autora). Página de Login EPR Enfermagem EPR Médico SOS Horas 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 Monitorizações Lista de Monitorizações de todos os Doentes Fig. 100 Circuito 2 EPR Enfermagem: Alterar monitorização associada a um doente (produzida pela autora). ESTRATÉGIAS DE DESIGN RESPONSIVO! 145! Anexo 7: Wireframes Finais Fig. 101 Proposta para a página de login do EPR Multiplataforma (produzida pela autora). Fig. 102 Proposta para a página inicial de funcionalidades, do EPR Multiplataforma (produzida pela autora). Fig. 103 Proposta para a página de funcionalidades “doentes em urgência”, do EPR Multiplataforma (produzida pela autora). Fig. 104 Proposta para a página “doente em urgência selecionado” do EPR Multiplataforma (produzida pela autora). Fig. 105 Proposta para página “Notas Clínicas do doente selecionado” da aplicação EPR Multiplataforma (produzida pela autora). Fig. 106 Proposta para a página “Nota Clínica selecionada” da aplicação EPR Multiplataforma (produzida pela autora). Fig. 107 Proposta para página “Voltar Notas Clínicas” do EPR Multiplataforma (produzida pela autora). Fig. 108 Proposta de sucessão de ecrãs em smartphone “Mais ações” do EPR Multiplataforma (produzida pela autora).