Desenvolvimento de UX/UI em dispositivos móveis: Waveform

Universidade do Minho Escola de Letras, Artes e Ciências Humanas Desenvolvimento de UX/UI em dispositivos móveis: Waveform março 2024 UMinho | 2024 Desenvolvimento de UX/UI em dispositivos móveis: Waveform Sofia Paula de Carvalho Desenvolvimento de UX/UI em dispositivos móveis: Waveform Relatório de Estágio Mestrado em Humanidades Digitais Trabalho realizado sob orientação do Professor Filipe Portela março 2024 ii DIREITOS DE AUTOR E CONDIÇÕES DE UTILIZAÇÃO DO TRABALHO POR TERCEIROS Este é um trabalho académico que pode ser utilizado por terceiros desde que respeitadas as regras e boas práticas internacionalmente aceites, no que concerne aos direitos de autor e direitos conexos. Assim, o presente trabalho pode ser utilizado nos termos previstos na licença abaixo indicada. Caso o utilizador necessite de permissão para poder fazer um uso do trabalho em condições não previstas no licenciamento indicado, deverá contactar o autor, através do RepositóriUM da Universidade do Minho. Licença concedida aos utilizadores deste trabalho Atribuição CC BY https://creativecommons.org/licenses/by/4.0/ iii AGRADECIMENTOS Gostaria de expressar os meus sinceros agradecimentos a todos aqueles que contribuíram para o sucesso desta etapa final. Primeiramente, gostaria de agradecer ao meu orientador, professor Carlos Filipe Portela, cuja orientação e conhecimento foram fundamentais para a escolha da área em que me iria especializar e na consequente realização do estágio. A sua dedicação, paciência e apoio ao longo do processo foram inestimáveis. Não posso deixar de mencionar a empresa Waveform, onde tive a oportunidade de realizar o meu estágio. Agradeço a toda a equipa pelo acolhimento e ao Luís Leite, em concreto, por me permitir trabalhar em projetos com independência, podendo aprender dentro das várias áreas o que é o UX Design. Aos meus colegas do Mestrado em Humanidades Digitais, sou grata pela permuta de ideias, pelas discussões estimulantes e pelo apoio mútuo ao longo desta jornada académica. Juntos, enfrentamos desafios e crescemos como pessoas: a todos agradeço cada momento compartilhado. Aos meus amigos, que estiveram ao meu lado, mesmo nos momentos mais desafiadores, o meu profundo agradecimento; as vossas palavras de encorajamento, gestos de apoio e presença constante foram essenciais para manter a minha motivação e inspiração durante todo o processo. Ao William, quero expressar o meu amor e gratidão: a tua compreensão, incentivo e apoio incondicionais foram a força motriz por detrás da minha perseverança; a tua presença na minha vida trouxe equilíbrio e felicidade e sou grata por cada momento que compartilhamos. Por fim, a minha gratidão à minha família, cujo apoio inabalável foi a base sólida na qual construí a minha jornada académica; o vosso amor, alento e sacrifícios ao longo dos anos foram inestimáveis. Sou profundamente grata por tudo o que fizeram por mim. A todos, expresso a minha mais profunda gratidão. Sem o apoio e o amor de cada um de vocês, esta conquista não seria possível. Obrigado do fundo do meu coração. iv DECLARAÇÃO DE INTEGRIDADE Declaro ter atuado com integridade na elaboração do presente trabalho académico e confirmo que não recorri à prática de plágio, nem a qualquer forma de utilização indevida, ou falsificação de informações, ou de resultados em nenhuma das etapas conducente à sua elaboração. Mais declaro que conheço e que respeitei o Código de Conduta Ética da Universidade do Minho. STATEMENT OF INTEGRITY I hereby declare having conducted this academic work with integrity. I confirm that I have not used plagiarism or any form of undue use of information or falsification of results along the process leading to its elaboration. I further declare that I have fully acknowledged the Code of Ethical Conduct of the University of Minho. v RESUMO O presente relatório de estágio versa sobre o tema "Desenvolvimento de UX/UI em dispositivos móveis", levado a cabo no âmbito do estágio na empresa Waveform, Lda. O objetivo principal do referido estágio consistiu em implementar estratégias de experiência do utilizador (UX) e design de interface do utilizador (UI) em ambientes móveis. Para tal, almejou-se a criação de protótipos de baixa e altafidelidade, bem como o design interativo entre as páginas e a criação do design visual. Além disto, houve uma maior incidência na exploração da ferramenta de prototipagem Figma. A metodologia aplicada neste estágio baseou-se no conceito de Design Centrado no Utilizador (DCU), que consiste em colocar as necessidades e preferências dos utilizadores no centro do processo de design. Através deste foco, foi possível conceber interfaces que visam otimizar a experiência do utilizador, desde a sua fase de prototipagem até à sua fase final. O estágio na Waveform, Lda. representou mais do que uma simples aplicação de conhecimentos técnicos. Ao focarmo-nos no desenvolvimento de UX/UI em dispositivos móveis, foram produzidos resultados tangíveis, incluindo dois protótipos completos (Zypho e Eurocidades), totalizando 24 wireframes e 112 ecrãs finais. Superando o desafio de aprender a ferramenta Figma com dedicação, a aplicação prática dos conceitos de UX/UI foi evidenciada nos testes de usabilidade, resultando em lições valiosas sobre simplicidade, clareza e intuitividade. Este processo contínuo de testagem não refinou apenas o produto, mas também estabeleceu uma base sólida para futuras interações. Em suma, este estágio proporcionou uma oportunidade significativa para não aplicar apenas teorias e conceitos, mas também para moldar a cultura da empresa em direção a soluções digitais impactantes e centradas no utilizador. PALAVRAS-CHAVE: Arquitetura da informação, Design de interação, Experiência de Utilizador, Interface de Utilizador, Usabilidade vi ABSTRACT This internship report deals with the topic of "UX/UI development on mobile devices", carried out as part of an internship at the company Waveform, Lda. The main objective of this internship was to implement user experience (UX) and user interface (UI) design strategies in mobile environments. To this end, the aim was to create lowand high-fidelity prototypes, as well as interactive design between pages and the creation of visual design. In addition, there was a greater focus on exploring the Figma prototyping tool. The methodology applied in this internship was based on the concept of User-Centered Design (UCD), which consists of putting users' needs and preferences at the heart of the design process. Through this focus, it was possible to design interfaces that aim to optimize the user experience, from the prototyping stage to the final stage. The internship at Waveform, Lda. represented more than a simple application of technical knowledge. By focusing on UX/UI development on mobile devices, tangible results were produced, including two complete prototypes (Zypho and Eurocidades), totalling 24 wireframes and 112 final screens. Overcoming the challenge of learning the Figma tool with dedication, the practical application of UX/UI concepts was evidenced in the usability tests, resulting in valuable lessons on simplicity, clarity and intuitiveness. This continuous testing process not only refined the product, but also laid a solid foundation for future interactions. In short, this internship provided a significant opportunity to not only apply theories and concepts, but also to shape the company's culture towards impactful, user-centered digital solutions. KEYWORDS: Information architecture, Interaction Design, Usability, User Experience, User Interface vii ÍNDICE 1. Introdução ............................................................................................................. 1 1.1 Enquadramento _________________________________________________________ 1 1.2 Objetivos ______________________________________________________________ 2 1.3 Estrutura do documento ___________________________________________________ 3 2. Estado da Arte ........................................................................................................ 4 2.1 “Mobile First” __________________________________________________________ 4 2.2 User Experience _________________________________________________________ 5 2.3 Usabilidade ____________________________________________________________ 8 2.4 Design Centrado no Utilizador ______________________________________________ 12 2.5 Componentes da User Experience ___________________________________________ 14 2.6 Design Visual para Apps Móveis ____________________________________________ 17 3. Materiais e métodos ............................................................................................. 21 3.1 Metodologia ___________________________________________________________ 21 3.2 Ferramentas __________________________________________________________ 23 4. Trabalho realizado ............................................................................................... 25 4.1 Projeto Zypho _______________________________________________________ 26 4.1.1 Compreensão do contexto ...................................................................................... 26 4.1.2 Pesquisa e análise do contexto............................................................................... 27 4.1.3 Definição dos requisitos do utilizador...................................................................... 30 4.1.4 Prototipagem ......................................................................................................... 33 4.2 Projeto Eurocidades ___________________________________________________ 43 4.2.1 Compreensão do contexto ...................................................................................... 43 4.2.2 Pesquisa e análise do contexto............................................................................... 45 4.2.3 Definição dos requisitos do utilizador...................................................................... 48 4.2.4 Prototipagem ......................................................................................................... 49 2 muitas empresas - umas maiores, outras menores - mostrando um trabalho diversificado em diversas áreas. O facto de ser uma empresa pequena é vantajoso: por um lado, uma vez que todo o processo de criação da experiência de utilizador (UX) está concentrado numa pessoa só – o estagiário – o que permite que aprenda sobre os diversos papéis e funções dentro de um projeto, acabando, também, por outro lado, por desenvolver as competências de design de interface (UI) e de design de interação e componentes. No entanto, isto só foi possível pelo facto de estar a ser realizado um projeto de cada vez e de haver uma boa gestão de tempo. O estágio teve uma duração de 4 meses, durante os quais a maior parte do trabalho foi realizada de forma remota, reunindo 2 vezes por semana no escritório, para um melhor feedback e discussão de ideias sobre o projeto. Nestes 4 meses, além da adaptação à empresa, às suas políticas e softwares de desenvolvimento aplicacional, desenvolveu-se um projeto de raiz (Zypho - smartshower ), no qual a estagiária foi integrada em todo o processo de UX, seguindo-se, o processo de UI e de design de interação da aplicação. Após o fim deste projeto, iniciou-se o de criação do conceito de UX e UI da app das Eurocidades. Ambos os projetos serão apresentados com maior detalhe no capítulo “TRABALHO REALIZADO” deste relatório. 1.2 Objetivos Nesta secção, apresenta-se os objetivos previamente definidos para o estágio curricular, que foram estabelecidos antes do início do estágio e que foram cumpridos ao longo do seu desenrolar. Objetivos gerais A. Desenvolver as capacidades técnicas de design User Experience e User Interface em dispositivos móveis; B. Conceção e implementação de estratégias abrangentes de UX e design de interface do utilizador (UI) para os produtos da empresa Zypho e para o projeto Eurocidades. Objetivos específicos A1. Implementar boas práticas da experiência do utilizador; A2. Expandir conhecimentos sobre as ferramentas utilizadas na prototipagem de interfaces; A3. Observar e analisar atividades praticadas no âmbito do desenvolvimento de um projeto; A4. Adquirir conhecimentos e novas competências na criação de design de interface e design de interação; B1. Criar protótipos de baixa e alta-fidelidade e respetivo design de interação entre páginas; 3 B2. Aplicar os conhecimentos anteriormente obtidos no plano curricular no apoio à criação e desenvolvimento dos projetos da empresa Waveform; B3. Planear e implementar testes de usabilidade; B4. Rever todo o processo no fim da fase de teste e aprovação. 1.3 Estrutura do documento Em termos de estrutura, optou-se por construir o relatório da seguinte forma: numa primeira parte, uma revisão da literatura dos vários temas pertinentes para este relatório, tais como User Experience , arquitetura da informação e design de interação, UX Design para dispositivos móveis, as boas práticas de UX Design que foram levadas em conta na realização de ambos os projetos. Numa segunda parte faz-se uma exposição detalhada do trabalho realizado em estágio, bem como o enquadramento metodológico dos projetos e uma pequena descrição da ferramenta utilizada. Nesta segunda parte explora-se todo o processo de ambos projetos, desde a pesquisa relativa ao utilizador, aos desenhos dos wireframes mais básicos, e até ao protótipo final de alta-fidelidade, com todos os problemas que foram aparecendo no caminho. O presente relatório termina com uma conclusão que se focará nas aprendizagens adquiridas, quer com os diferentes projetos, quer com a experiência de estágio. 4 2. ESTADO DA ARTE Tendo em conta que este relatório de estágio curricular tem como base os dispositivos móveis, não há nada mais coerente do que iniciar por explorar a relevância do design direcionado para dispositivos móveis. 2.1 “Mobile First” Durante os primeiros anos da evolução tecnológica, as equipas de design e desenvolvimento de um produto tinham o objetivo de desenhar para desktop/laptop PC, nunca considerando importante uma versão mobile. Por isso, durante muito tempo o processo de navegação num smartphone era um processo doloroso e frustrante, porque o produto não estava desenhado para aquela interface. No ano de 2011, as vendas de smartphones ultrapassam as vendas de computadores pela primeira vez na história (Rosoff, 2012), criando aqui uma oportunidade de um novo tipo de interface, cujo uso se via a crescer exponencialmente. Luke Wroblewski (2011) cria uma abordagem ao design que prioriza a criação de experiências de utilizador para dispositivos móveis, antes de os pensar para desktops e outras plataformas, destacando a importância de reconhecer a crescente predominância do acesso à internet e consequentemente à informação por meio de dispositivos móveis. Esta estratégia envolve repensar a forma como os sites e as aplicações são desenhados, considerando as características e restrições específicas dos dispositivos móveis como telas menores, interações de toque que não existiam nos desktops e até conexões de internet mais instáveis. Wroblewski (2011) defende então que começar o design pelo mobile, “mobile first”, permite simplificar a experiência do utilizador, focar nas tarefas mais importantes e garantir que a interface seja eficiente e eficaz em contextos móveis. Assim, surge uma abordagem de design progressivo, começando pelo mais pequeno, mas tendo sempre em consideração que os recursos e o layout são adaptados gradualmente à medida que a tela aumenta de tamanho, sendo uma vantagem, quer para os dispositivos móveis, quer para as desktops, valorizando a usabilidade e a eficiência. É fundamental então entender que, ao desenvolver um produto digital, estamos a criar uma forma de interação do utilizador com uma interface, sendo que o ponto principal é criar boas emoções ao utilizador e por isto ele torna-se o foco do processo de desenvolvimento do produto digital. Torna-se então importante abordar os conceitos de User Experience (UX) e boas práticas no UX/UI Design. 5 2.2 User Experience Um sábio pensamento de Paul Boag, Co-Fundador da Headscape Limited, ecoa pelos corredores da filosofia do design: “Para ser um grande designer, é necessário olhar um pouco mais profundamente para como as pessoas pensam e agem.” 1 Este sentimento engloba a essência do design de experiência do utilizador, onde a convergência da psicologia, comportamento humano e habilidade estética forma a base para a criação de interações digitais excecionais. À medida que nos aventuramos pelo universo da experiência do utilizador, somos levados a explorar as complexidades da cognição humana e da interação que sustentam o conceito de experiência do utilizador (UX). Guiados por essa filosofia, exploraremos o complexo tecido que é a experiência do utilizador, compreendendo o seu profundo impacto no cenário do design e a forma como molda a interação harmoniosa entre indivíduos e tecnologia. User experience , ou experiência do utilizador, é um fenómeno muito pessoal, podendo dizer-se que é a forma como as pessoas se sentem, quando utilizam um produto ou serviço, englobando desde elementos físicos, palpáveis ou audíveis, até interações com pessoas, como, por exemplo, a experiência de um utilizador com o Suporte ao Cliente, a qual se baseia unicamente na interação interpessoal (Unger & Chandler, 2012). Pode-se notar que, ao longo do nosso dia-a-dia, somos utilizadores de várias coisas - desde o carro ou transporte público, até ao software que utilizamos no trabalho para cumprir a nossa função – produtos que podem ser ou não digitais, mas que são desenhados para cumprir alguma função. A experiência do utilizador materializa-se então quando interagimos com esses objetos ou produtos, podendo essa experiência assumir um caráter positivo ou negativo. (Teixeira, 2014). O conceito de UX foi introduzido por Norman em 1993, referindo-se à avaliação abrangente de todos os aspetos da interação entre um utilizador e um produto. Por sua vez, a norma ISO 9241-210:2010 define Experiência do Utilizador como as "perceções e reações de uma pessoa que resultam do uso ou da utilização prevista de um produto, sistema ou serviço" 2 . Essa definição reconhece que a experiência do utilizador inclui opiniões, preferências, perceções e sensações dos utilizadores ao interagirem com um produto. A mesma norma ressalta que "os critérios de usabilidade podem ser utilizados para avaliar aspetos da experiência do utilizador" 3 . 1 Traduzido de: https://marvelapp.com/blog/design-principles-help-shape-best-user-experience/ 2 Traduzido de:https://richardcornish.s3.amazonaws.com/static/pdfs/iso-9241-210.pdf 3 Traduzido de:https://richardcornish.s3.amazonaws.com/static/pdfs/iso-9241-210.pdf 6 Assim, pode assumir-se que a usabilidade se tornou uma das componentes da User Experience, sendo que o UX representa uma progressão do conceito de usabilidade, uma vez que o ambiente digital enfatizou a importância da experiência em detrimento da mera operacionalidade. A Norman Nielsen Group, tendo como um dos seus fundadores o criador do conceito, atenta que a: “User experience” encompasses all aspects of the end-user's interaction with the company, its services, and its products.. (…) The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design. 4 (Norman & Nielsen, 2021). Peter Morville (2004) considera ainda que existem sete categorias que classificam a experiência do utilizador: ser útil, acrescentar valor, ser utilizável, ser encontrável, desejável, acessível e credível. Apesar de todas as experiências serem algo de subjetivo e de cada pessoa ter uma experiência diferente com um determinado produto – quer por fatores humanos, quer por fatores externos – normalmente, a experiência será positiva, quando o utilizador conseguir realizar a tarefa sem problemas, ou grandes frustrações e perdas de tempo. Os fatores humanos envolvem a habilidade ou a literacia tecnológica do utilizador com o produto em si, o seu humor, a literacia e até possíveis necessidades especiais do utilizador (acessibilidade), enquanto os fatores externos são todos aqueles que não dependem do utilizador, mas que podem, de alguma forma, alterar a sua experiência, como por exemplo, o trânsito, no caso de estar a conduzir o carro para o trabalho. Nos produtos digitais, a experiência do utilizador já existe desde o início e o papel do UX Designer é o de aprimorar essa experiência com base nas informações disponíveis, levando em consideração a interação entre humanos e computadores, pois é nesta intersecção que o sucesso do projeto se encontra. O UX está, portanto, intrinsecamente ligado à pesquisa do utilizador, a fim de melhorar o produto. Para tal, é importante a criação de personas. A persona desempenha um papel fundamental no processo de conceção de um projeto, auxiliando na sua execução de maneira otimizada e mantendo o foco na 4 Tradução da autora: “Experiência do utilizador abrange todos os pontos de interação do utilizador final com a empresa, serviços e produtos. (…) O primeiro requisito para uma experiência do utilizador exemplar é atender às necessidades exatas do cliente, sem complicações ou incómodos. Em seguida, vem a simplicidade e a elegância que produzem produtos que são um prazer de possuir, um prazer de usar. A verdadeira experiência do utilizador vai muito além de dar aos clientes o que eles dizem querer, ou de fornecer caraterísticas de lista de verificação. Para alcançar uma experiência do utilizador de alta qualidade nas ofertas de uma empresa, deve haver uma fusão perfeita dos serviços de várias disciplinas, incluindo a engenharia, o marketing, o design gráfico e o industrial e ainda o design de interfaces” 7 figura central: o utilizador. As personas são uma ferramenta de design usada comummente para representar utilizadores arquetípicos e facilitar a compreensão das necessidades, motivações e limitações dos utilizadores. Ao termos um pequeno conjunto de personas, estas tornam-se representações mais concretas e tangíveis dos utilizadores reais, facilitando assim o desenvolvimento da empatia e proporcionando uma compreensão mais profunda das necessidades e características do público-alvo (Bradley et al., 2021). Além disto, as personas desempenham um papel crucial num produto, orientando as decisões de design em cada estágio do processo. Ao serem criadas desde as fases iniciais, essas personas auxiliam na consideração das necessidades e objetivos dos utilizadores ao longo de todo o processo de design. As personas possibilitam ainda que todos os membros da equipa tenham uma compreensão consistente dos utilizadores, facilitando o desenvolvimento de um produto centrado no utilizador. A seguir à criação das personas e de forma a garantir uma boa usabilidade, devem ser criados os user flows. Estes fluxos apresentam-se como uma representação gráfica das etapas que o utilizador executa para atingir um determinado objetivo na utilização do produto e estão intrinsecamente ligados aos recursos e requisitos do produto. Para cumprir um determinado requisito, o utilizador realiza uma série de tarefas distintas. Ao definir os fluxos de utilizador, é possível determinar os módulos, secções e telas necessárias, bem como a ordem em que devem ser apresentados na interface. Os user flows fornecem uma maneira clara de compreender como o utilizador irá interagir com seu produto, facilitando discussões, revisões e refinamentos com clientes e partes internamente interessadas. Eles definem as interações do utilizador com o produto sem se preocupar com o layout e o design específicos. É importante lembrar que os user flows podem ser alterados a qualquer momento com base em mudanças nos requisitos, ou no feedback dos utilizadores. Concluindo, a experiência do utilizador vai sempre variar de acordo com a perceção do utilizador em relação à sua interação com o produto, desde o primeiro contato até a utilização contínua. Essa experiência certamente influenciará as associações que o utilizador cria com o produto e com a marca. É fundamental compreender e aprimorar constantemente a mencionada experiência, garantindo que ela seja positiva, satisfatória e alinhada com os objetivos e valores da empresa. Uma experiência do utilizador bem projetada e implementada pode resultar em maior engajamento, fidelidade do cliente e sucesso comercial. 8 2.3 Usabilidade Iniciar a exploração deste capítulo com a citação de Steve Krug, na sua obra “Don't Make Me Think”(2014), é especialmente relevante. A citação “Usability is about people and how they understand and use things, not about technology” 5 ressoa de forma profunda na essência da discussão que se seguirá. Muitas vezes confundido com o conceito mais amplo de Experiência do Utilizador (UX), o termo usabilidade é uma parte fundamental que trespassa e constrói a experiência do utilizador. Neste capítulo, exploramos o relacionamento entre usabilidade e experiência do utilizador, destacando como a usabilidade não é apenas sobre a facilidade de uso, mas sim um pilar crucial que influencia a forma como os utilizadores percebem e interagem com produtos, sejam eles físicos ou digitais. Ela importa, porque, se o utilizador não conseguir atingir o objetivo da solução, o mais provável é que se sinta frustrado ou desanimado, ou que até que vá procurar outro produto, numa busca de uma alternativa mais eficiente para atingir os seus objetivos. (Soegaard, 2018). Antes ainda do termo “usabilidade”, falava-se em Interação Homem-Máquina, sendo esta uma disciplina do campo da computação. Esta disciplina é vista como a “disciplina preocupada com o design, a avaliação e a implementação de sistemas computacionais interativos para uso humano” (Hewett et al., 1992), no sentido em que alinha a interação entre a pessoa e o dispositivo, bem como a forma como os seus programas funcionam com o utilizador em frente da interface. Este conceito acaba por se tornar um parente próximo do conceito de usabilidade como o conhecemos hoje; no entanto, vai além do conceito da usabilidade e leva também em consideração a maneira como o indivíduo interage com o dispositivo no aspeto físico. Com o advento da Internet, a palavra "usabilidade" foi incorporada na língua portuguesa, com origem no adjetivo "usável". A norma ISO/IEC 9126:1991, publicada em 1991, oficialmente reconheceu a usabilidade como uma característica de qualidade, definindo-a como “a set of attributes that bear on the effort needed for use, and on the individual assessment of such use, by a stated or implied set of users." 6 . 5 Tradução da autora: usabilidade trata das pessoas e de como elas entendem e utilizam as coisas, não sobre tecnologia. 6 Tradução da autora: conjunto de atributos que evidenciam o esforço necessário para utilizar o software , bem como o julgamento individual desse uso, utilização, por um conjunto explícito ou implícito de utilizadores. Disponível em: http://tmancini.di.uniroma1.it/teaching/courses/20072008/prosw/materiale/I/S.I.4%20-%20Lo%20standard%20ISO%209126%20sulle%20qualita'%20del%20software,%201991%20-%20ProSW.pdf 9 A partir dessa norma, a usabilidade foi desdobrada em três subcaracterísticas: a compreensibilidade ( Understandability ), que se refere à capacidade do produto permitir que o utilizador entenda se é apropriado e como pode ser usado para realizar tarefas específicas numa determinada situação; a capacidade de aprendizagem (Learnability ), que se traduz na capacidade do produto possibilitar que o utilizador o aprenda a utilizar; a operacionalidade ( Operability ), que se resume na capacidade do produto permitir que o utilizador o utilize e controle. No entanto, a norma ISO/IEC 9126:1991, que se referia à usabilidade como a conceção e desenvolvimento de uma interface sem envolver o utilizador, não permitia compreender se os utilizadores poderiam realmente usar o produto. O conceito de usabilidade, no sentido de facilidade com que um produto pode ser utilizado pelos utilizadores para realizar tarefas específicas com eficácia, eficiência e satisfação, foi inicialmente proposto por Nielsen em 1993. Nielsen definiu a usabilidade em termos de cinco atributos: • Facilidade de aprendizagem: mede a facilidade com que os utilizadores aprendem a utilizar um determinado produto e a realizar as tarefas idealizadas; • Eficiência: mede a rapidez com que os utilizadores conseguem realizar as tarefas; • Facilidade de memorização: mede a facilidade com que os utilizadores voltam a utilizar o mesmo produto, com sucesso; • Erros: mede a quantidade de erros cometidos pelos utilizadores, a sua facilidade de os ultrapassar e a sua gravidade; • Satisfação: que mede o quão prazerosa foi a utilização do produto. Em 1998, foi publicada a norma ISO 9241-11:1998, onde a usabilidade é definida como “extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use” 7 , passando assim a avaliar a qualidade da interação do utilizador com o produto. Nielsen (1999) argumenta que a usabilidade é “uma característica transversal a qualquer produto, serviço ou sistema” e que “assumiu maior importância com o surgimento da Internet”, sendo que o acesso a um produto através do uso da Internet, mais especificamente através de um site, influencia a perceção do utilizador relativamente à qualidade do produto. Dumas e Redish (1999) afirmam que a usabilidade se baseia em quatro premissas: o foco nos utilizadores, o aumento da produtividade esperada pelos utilizadores com o uso do produto, a falta de 7 Tradução da autora: capacidade de um produto poder ser usado pelos utilizadores específicos para alcançar objetivos específicos com eficiência, eficácia e satisfação em um contexto específico de uso. Disponível em: https://cdn.standards.iteh.ai/samples/16883/44acafdfd9a24edd9c66ed2f0e2a50e2/ISO-9241-11-1998.pdf 10 tempo dos utilizadores para aprender a utilizar um produto e o peso da opinião e decisão dos utilizadores, relativamente à facilidade de uso do produto. Nielsen (2003a) salienta que não basta ouvir o que os utilizadores dizem sobre um produto, ou as suas necessidades, mas é também necessário estar atento ao “que eles realmente fazem”. Além disto, importante evidenciar a definição de Steve Krug (2014) sobre a usabilidade que torna o conceito mais compreensível: “ A person of average (or even below average) ability and experience can figure out how to use the thing to accomplish something without it being more trouble than it’s worth. ” 8 , ou seja, o average user tem de saber como utilizar o produto só de olhar para ele e, se não for assim tão óbvio, que pelo menos seja algo fácil do utilizador perceber, porque as pessoas não vão utilizar o produto, se não se conseguirem orientar com o mesmo. Em 2001 9 , a norma ISO/IEC 9126:1991 10 foi revista e foram acrescentadas duas subcaracterísticas ao conceito: atratividade e conformidade de usabilidade. A norma ISO/IEC 25010 11 , publicada em 2011, substituiu a norma ISO/IEC 9126 e definiu o conceito de usabilidade da mesma forma que a norma ISO 9241-11 12 . No sentido de definir com transparência o objetivo principal de um sistema interativo, Preece, Rogers e Sharp (2005) apresentam as metas de usabilidade e as metas resultantes da experiência do utilizador na Figura 1: 8 Tradução da autora: Uma pessoa de capacidade e experiência medianas (ou mesmo abaixo da média) pode descobrir como usar a coisa para realizar algo sem que isso cause mais problemas do que vale a pena. 9 Disponível em: https://suriweb.com.ar/wp/wp-content/uploads/2019/03/Norma-ISO_IEC-9126-1-2001.pdf 10 Disponível em: http://tmancini.di.uniroma1.it/teaching/courses/2007-2008/prosw/materiale/I/S.I.4%20- %20Lo%20standard%20ISO%209126%20sulle%20qualita'%20del%20software,%201991%20-%20ProSW.pdf 11 Disponível em: https://pt.scribd.com/document/519743900/ISO-IEC-25010# 12 Disponível em: https://cdn.standards.iteh.ai/samples/16883/44acafdfd9a24edd9c66ed2f0e2a50e2/ISO-9241-11-1998.pdf 11 As metas de usabilidade são definidas da seguinte maneira: • Eficácia – uma meta ampla que se refere ao quanto o sistema atende às expectativas do seu desempenho; • Eficiência – relacionada com a forma como o sistema auxilia o utilizador na execução de tarefas; • Segurança – referente à capacidade do sistema de proteger o utilizador contra situações indesejáveis ou perigosas; • Utilidade – avalia se o sistema apresenta funcionalidades adequadas para as atividades pretendidas pelo utilizador; • Capacidade de aprendizagem – facilidade de o utilizador aprender a utilizar o sistema; • Capacidade de memorização – avalia o quão fácil é para o utilizador se lembrar de como utilizar o sistema, após tê-lo aprendido. Com a crescente presença da tecnologia no dia a dia das pessoas e o interesse cada vez maior por esses produtos, pesquisadores e profissionais da área de interfaces passaram também a considerar outras questões, além das supramencionadas, pelo que aquelas metas são expressas de forma subjetiva. Assim, a usabilidade e a experiência do utilizador são conceitos importantes na conceção e avaliação de produtos, serviços e sistemas. A usabilidade foca-se na facilidade do uso de um produto, enquanto a experiência do utilizador se concentra nas perceções e reações do utilizador ao usar o produto. Ambos Figura 1 - Metas de usabilidade e metas de experiência do utilizador - Fonte: Preece, Rogers & Sharp (2005, p.41) 18 proporcionando aos utilizadores uma experiência eficiente e eficaz no cumprimento de suas tarefas. Schlatter e Levison (2013) propõem uma série de princípios, meta-princípios, que orientam o design de aplicações móveis, com foco na consistência, hierarquia e personalidade. • Consistência: Este princípio está relacionado com a lógica e harmonia do design , garantindo que o utilizador não necessita de gastar muito tempo a aprender como o produto funciona. A aplicação deve comunicar de forma clara a identidade da marca e todos os elementos gráficos ( layout , tipografia, cor, imagem, controlos) devem ser tratados de maneira consistente em todas as telas. Isto inclui ter imagens com a mesma edição, utilizar as cores do design de forma consistente e o formato dos botões com funções semelhantes com formas parecidas. • Hierarquia: A hierarquização visual do conteúdo para criar um mapa de navegação é um princípio essencial. Uma hierarquia bem estabelecida permite que o utilizador se oriente de maneira intuitiva, encontrando facilmente o caminho para alcançar os seus objetivos com a interação. Para isto, a hierarquia visual é construída através da manipulação de elementos como a tipografia, alterando a posição, tamanho e cor, levando em consideração sempre o modo e o contexto em que o utilizador dará uso à aplicação. Assim, é possível proporcionar uma experiência fluída e eficiente, garantindo que as informações relevantes estejam claramente destacadas e acessíveis. • Personalidade: A construção da personalidade de uma aplicação deriva da experiência que o utilizador tem ao interagir com a sua aparência e comportamento. Essa personalidade pode ser identificada por meio de elementos como logos, tipografia, imagens, cores, comandos, entre outros. A forma como esses elementos são utilizados na aplicação proporciona um significado e contribui para a integração visual do conteúdo, navegação, l ayout e sua relação com a marca. As mesmas autoras também destacam algumas ferramentas que compõem o design da interface: • Layout : Refere-se à organização e posicionamento dos elementos na tela, criando uma estrutura. A consistência e personalidade do produto são garantidas pela aplicação de um mesmo layout em todas as telas e a sua adaptação para diferentes dispositivos. As decisões em termos de layout estão também relacionadas com a hierarquia, pois é necessário gerir e priorizar a disposição do conteúdo de forma adequada. O layout também deve ser flexível o suficiente para lidar com diferentes quantidades de informação, permitindo uma experiência adaptável e equilibrada para os utilizadores. 19 • Tipografia: A seleção de fontes e tamanhos adequados de letra desempenha um papel fundamental na garantia de legibilidade de uma aplicação. A tipografia desempenha um papel significativo na consistência e organização visual, possibilitando a distinção do conteúdo mais relevante em relação ao menos relevante. A escolha cuidadosa da tipografia pode ainda transmitir valores e associações que contribuem para a personalidade e identidade da aplicação. • Cor: A cor, assim como a tipografia, são essenciais para criar uma ordem visual e destacar um produto. Elas ajudam a manter uma aparência consistente, estabelecer hierarquias e dar personalidade. É importante escolher paletas de cores que sejam monocromáticas, ou seja, um conjunto de cores que são todas tonalidades ou variações de uma única cor, ou que tenham contrastes apropriados (por exemplo, branco e preto. É importante também utilizar as cores de forma cuidadosa para não distrair o utilizador e evitar o ruído visual, além de valorizar o uso de espaços sem qualquer conteúdo. • Imagens: Engloba logos, ícones, fotografias, vídeos, infográficos, entre outros. A utilização dessas imagens deve seguir uma abordagem coerente, relacionando-se de forma adequada com o conteúdo e contexto da aplicação (tamanho, edição, margens). É importante procurar um equilíbrio visual entre os diferentes elementos e garantir que as imagens transmitam a personalidade desejada para a aplicação. • Controlos: A apresentação visual dos controlos fornece aos utilizadores informações sobre a sua manipulação e as formas disponíveis para interagir com eles, ou seja, a maneira como estes são apresentados dá pistas sobre o que é possível fazer com eles. Compreender como utilizar esses controlos ajuda os utilizadores a evitar erros durante a interação. Existem diferentes tipos de controlos, incluindo controlos de navegação, controlos de manipulação de dados (configurações, seleções, etc.) e controlos de exposição de informações (abas, acordeões, gavetas). Além dos princípios supramencionados é importante também salientar a questão da acessibilidade. O design deve ser acessível a todos os utilizadores, incluindo aqueles com deficiências. Malewicz (2021) discute como as tendências de design podem afetar a acessibilidade de um produto digital. O autor destaca ainda a importância de se projetar com a acessibilidade em mente desde o início do processo de design, para garantir que todas as necessidades sejam consideradas. Algumas sugestões para a criação de produtos digitais acessíveis inclui o uso de cores de alto contraste, fontes legíveis, layouts simples e a criação de uma experiência do utilizador clara e intuitiva, além da importância de testar os 20 protótipos em utilizadores com deficiências, para garantir que a acessibilidade esteja a ser efetivamente atendida. Antes de avançar para a exposição do trabalho desenvolvido, é importante ressaltar que a particularidade de cada solução de UX/UI Design, desenvolvida no decorrer do estágio, exigiu a realização de pesquisas específicas e aprofundadas para cada projeto. Em virtude desta necessidade, o estado da arte relativo aos métodos de pesquisa de utilizador para cada projeto encontra-se devidamente detalhado no capítulo dedicado ao Trabalho Desenvolvido. Esta abordagem permitiu-nos aprimorar a compreensão das abordagens existentes, bem como identificar lacunas e oportunidades de inovação que orientaram a conceção e implementação das soluções apresentadas neste trabalho. 21 3. MATERIAIS E MÉTODOS Neste capítulo, encontra-se uma exposição da metodologia utilizada ao longo dos projetos. Assim, este capítulo desempenha um papel fundamental no nosso processo de design, pois explica as abordagens sistemáticas que seguimos para conceber e desenvolver aplicações móveis que atendam às necessidades dos utilizadores e aos objetivos das empresas. 3.1 Metodologia Nesta secção expõe-se detalhadamente a metodologia de trabalho utilizada, criada com foco no Design Centrado no Utilizador (DCU). Irá então ser apresentada a abordagem aos projetos de design, desde a definição de objetivos até a entrega de produtos finais. Houve um compromisso com metodologias sólidas, visto que são fundamentais para a procura contínua de excelência no campo do design, garantindo que os nossos produtos atendam não apenas às expectativas, mas também às necessidades reais dos utilizadores e das empresas. Assim, a metodologia baseada no DCU, pode ser dividida em: • Compreensão do contexto: o Pesquisa inicial e análise de requisitos: Inicia-se o projeto com um briefing detalhado, no qual se procura entender os objetivos e requisitos da empresa em relação à aplicação. Este processo ajuda-nos a estabelecer uma base sólida para o design, considerando as necessidades e requisitos do cliente. • Pesquisa e análise do contexto: o Pesquisa de mercado e análise de concorrentes: Condução de uma pesquisa abrangente de aplicações similares no mercado, analisando as suas funcionalidades, design e feedback dos utilizadores. Isto fornece informações valiosas sobre as melhores práticas e as expectativas dos utilizadores. Caso não existam aplicações similares, passamos à fase de pesquisa qualitativa. o Pesquisa qualitativa e entrevistas com utilizadores: Se necessário, realização de entrevistas com potenciais utilizadores para entender as suas necessidades, desejos e problemas. Esta pesquisa ajuda a definir melhor as expectativas dos utilizadores e a adaptar o design de acordo com seus feedbacks . 22 • Definição de requisitos do utilizador: o Criação de User Stories : Com base nos requisitos da empresa e na pesquisa realizada, criar user stories que descrevem as necessidades dos utilizadores e suas interações com a aplicação, o que nos permite mapear as jornadas dos utilizadores ( user flow) e a garantir que as suas necessidades sejam atendidas de forma eficaz, quer na fase mais abstrata do projeto, quer na fase mais concreta. o Identificação do utilizador-alvo: Realização de pesquisas de mercado e identificação dos utilizadores-alvo da aplicação. Isso envolveu a criação de personas representativas, que representam os diferentes grupos de utilizadores e suas características. o Simplificação de operações: Procura-se criar uma experiência do utilizador mais agradável, diminuindo a dificuldade inicial de aprendizagem e melhorando a eficácia no uso da aplicação. Esta estratégia desempenha um papel crucial para assegurar que as necessidades dos utilizadores sejam atendidas de maneira eficiente, elevando, assim, os padrões de usabilidade da aplicação. • Prototipagem e design de interação – Criação de soluções: o Desenho de wireframes : Fase de criação de wireframes de baixa fidelidade que esboçam a estrutura da aplicação. Isso permite iterar rapidamente e testar conceitos antes de investir tempo em detalhes de design. o Desenho de Protótipos de Alta Fidelidade: Utilização da ferramenta Figma para criar protótipos de alta fidelidade que representam visualmente a aparência e as interações da aplicação, facilitando o processo de revisão e refinamento do design. • Avaliação e testagem: o Testes de Usabilidade: Realização de testes de usabilidade com utilizadores reais para avaliar a eficácia do design. Durante esta fase, observa-se como os utilizadores interagem com a aplicação, identificamos problemas de usabilidade e realizamos ajustes com base no feedback recebido. o Feedback constante da empresa e do cliente: uma comunicação regular com a empresa e o cliente permite um ciclo contínuo de testagem e aprimoramento das aplicações. Isso garante que o design atenda às expectativas da empresa e às necessidades dos utilizadores. Ao adotar uma metodologia de Design Centrado no Utilizador, garante-se que o design da aplicação seja orientado pelas necessidades dos utilizadores, resultando em produtos finais mais eficazes e 23 satisfatórios. A ênfase na pesquisa, testagem e iteração contínua permite que o design evolua para atender às expectativas em constante mudança dos utilizadores e aos objetivos da empresa. 3.2 Ferramentas Nesta secção faz-se uma descrição da ferramenta utilizada em ambos os projetos e a razão da sua escolha. Utilizar o Figma (Figura 4) em vez do Sketch (ferramenta utilizada pela Waveform) , ou até Adobe XD , especialmente no contexto de um sistema Windows, é uma escolha justificada e benéfica por várias razões fundamentais. Aqui estão alguns argumentos que ressaltam as vantagens do Figma: • Acesso multiplataforma: Como utilizador de Windows, o Figma oferece uma grande vantagem com seu acesso multiplataforma. Não ficamos restritos a um único sistema operativo, o que significa que podemos trabalhar nos projetos de design a partir de qualquer dispositivo com acesso à Internet. Essa flexibilidade é inestimável, pois permite fazer alterações em qualquer lugar e em qualquer momento. • Colaboração em tempo real: A capacidade de colaborar em tempo real no Figma é um diferenciador importante. Com esta ferramenta as equipas podem trabalhar simultaneamente no mesmo projeto, ver as alterações em tempo real e colaborar de forma eficiente, eliminando Figura 4 - Screenshot do site do Figma, disponível em: https://www.figma.com/ 24 a necessidade de enviar arquivos e versões. Isso acelera o processo de design e melhora a comunicação. • Testagem e Prototipagem integradas: permite “dar vida aos designs sem sair da tela”. 16 Isso significa que é possível criar protótipos interativos diretamente no Figma, testar a usabilidade e iterar rapidamente, economizando tempo e recursos. • Dev Mode : O Dev Mode do Figma é um recurso poderoso que facilita a colaboração entre designers e desenvolvedores. Ele fornece um “espaço de trabalho dedicado onde os desenvolvedores podem aceder aos detalhes necessários para traduzir designs em código no mesmo arquivo onde os designs estão a ser trabalhados” 17 . Isto evita mudanças bruscas e une de maneira eficaz o design e o desenvolvimento. • Sistemas de design e integração de projetos: O Figma não se limita apenas à criação de designs individuais. Nesta ferramenta é também possível criar e compartilhar sistemas de design, o que é essencial para manter a consistência e garantir uma identidade visual unificada. Além disto, o Figma é uma ferramenta versátil que pode ser usada para integrar e gerenciar projetos de forma eficiente, tornando-o uma escolha ideal para o ciclo de vida completo de um projeto de design. Em resumo, o Figma destaca-se de outras ferramentas de prototipagem como uma escolha sólida, especialmente para designers que utilizam o sistema Windows. A sua acessibilidade multiplataforma, colaboração em tempo real, capacidade de testagem integrada, Dev Mode , suporte para sistemas de design e ampla gama de funcionalidades, que não se limitam à prototipagem, tornam-no uma ferramenta valiosa para equipas de design e para o desenvolvimento em todas as fases do processo de criação de produtos digitais, além de que é uma ferramenta bastante intuitiva e fácil de aprender para quem está a começar na área. 16 Traduzido de: https://www.figma.com/design-overview/ 17 Traduzido de: https://www.figma.com/design-overview/ 25 4. TRABALHO REALIZADO Neste capítulo apresenta-se a culminação de esforços dedicados a dois projetos distintos, cada um com as suas próprias complexidades e desafios. O primeiro deles, o Projeto Zypho, marcou o primeiro contato com a empresa Zypho e a sua abordagem inovadora para o uso responsável de recursos hídricos e energéticos. A Zypho é uma empresa dedicada ao desenvolvimento, produção e comercialização de sistemas que possibilitam a reutilização da energia usada para aquecimento da água do duche 18 , e nosso desafio foi criar uma aplicação móvel que se conectasse perfeitamente a este sistema. O Projeto Zypho foi caracterizado por um prazo de execução reduzido, impulsionado pela ambição do cliente em apresentar o protótipo durante o prestigiado evento ISH 2023 em Frankfurt, uma feira comercial global focada no uso responsável de recursos hídricos e energéticos em edifícios. Com apenas seis semanas para concluir o projeto, enfrentou-se um desafio significativo que exigiu criatividade, agilidade e foco. O objetivo deste projeto foi então desenvolver uma aplicação móvel user-friendly que permitisse aos utilizadores monitorizar e controlar os seus banhos para otimizar a eficiência energética, tendo liberdade criativa na criação do Design Visual, mas sempre de acordo com a estética do site. Através do uso desta aplicação, a Zypho procura reduzir o consumo de energia e as emissões de carbono, alinhando-se assim com a sua missão de promover práticas sustentáveis no uso de água quente sanitária. O segundo projeto concentrou-se no design dos sites das três Eurocidades: Cerveira/Tomiño, Tui/Valença e Chaves/Verín - para os quais a Waveform assumira a responsabilidade da criação do design de UX/UI. As Eurocidades compartilham a missão de “promover serviços e políticas comuns em áreas como a cultura, turismo, comércio, educação, investigação e política social 19 . O desafio foi criar uma experiência de utilizador (UX) consistente e eficiente para as três aplicações, sendo que todas elas funcionarão com base no mesmo modelo, onde os Eurocidadãos podem comprar bilhetes para eventos e inscrever-se em equipamentos das cidades. Este segundo projeto não envolveu a criação de uma identidade visual, uma vez que o design visual de cada Eurocidade já estava previamente estabelecido, com identidades gráficas que não podiam ser alteradas. A tarefa foi então otimizar a UX, simplificando os processos de compra de bilhetes e inscrição em equipamentos, tornando a interação mais fluída e agradável para os utilizadores. Em conjunto, estes dois projetos exemplificam o compromisso com a excelência no design e na inovação, enquanto abordamos desafios únicos em cada projeto. Os próximos capítulos irão documentar os detalhes, estratégias e resultados dos projetos Zypho e Eurocidades, destacando as soluções criativas que alcançamos para os nossos clientes. 18 Disponível em: https://www.zypho.pt/ 19 Disponível em: https://interiordoavesso.pt/diego-garcia/eurocidades-para-que-vos-quero/ 26 Através de uma análise minuciosa, examina-se o modo como o trabalho foi estruturado, desde a fase inicial de compreensão do contexto e dos utilizadores, até às etapas de pesquisa, criação, prototipagem, testagem e interação. Cada projeto é uma história única de como as necessidades reais dos utilizadores foram incorporadas no design, resultando em produtos que se destacam pela usabilidade, eficácia e satisfação do utilizador. 4.1 Projeto Zypho Nesta secção irá descrever-se em detalhe todo o processo do Projeto Zypho. 4.1.1 Compreensão do contexto O objetivo deste projeto é o de criar uma aplicação móvel user-friendly para que se integre no sistema de recuperação de calor da Zypho, permitindo que os utilizadores monitorizem e controlem os seus chuveiros para otimizar a eficiência energética. Ao reduzir o consumo de energia e as emissões de carbono, o aplicativo deve contribuir para a missão da Zypho de promover práticas sustentáveis. Considerou-se como público-alvo utilizadores domésticos sustentáveis, ou seja, um grupo de pessoas preocupadas com a eficiência energética e sustentabilidade, que provavelmente têm sistemas de recuperação de calor da Zypho incorporados nas suas casas e desejam otimizar o seu uso. A aplicação deve ser adaptável para atender às necessidades específicas do público-alvo . A interface deve ser intuitiva para garantir a usabilidade pelos utilizadores, assim como as informações relativas ao consumo e poupança de energia devem ser percetíveis por todos. É importante conduzir pesquisas de mercado e feedback dos utilizadores durante o desenvolvimento para ajustar a aplicação, de acordo com as necessidades do público-alvo. Foi então pedido à Waveform os seguintes requisitos iniciais: • Uma página principal com um botão com as seguintes opções para cada fase do banho (começar a aquecer a água, água aquecida, desligar a água, respetivamente): Start/Warm-up | Ready | Stop (1 de cada vez); • Poder alterar o flow da água e a temperatura durante o banho; • Animação do botão relacionada com água; • Após Stop apresentar um relatório final de duche: Água consumida/poupada; KWh Consumidos/ Poupados. 27 4.1.2 Pesquisa e análise do contexto Com estes requisitos em mente, a seguinte etapa foi a pesquisa sobre aplicações de chuveiro inteligente (smart shower) com o intuito de compreender melhor as suas funcionalidades, o seu design e o seu público-alvo, além do feedback dado pelos utilizadores. Este foi o método de pesquisa possível, devido ao tempo reduzido para realizar todo o protótipo e pelo facto de a empresa já ter uma ideia em mente daquilo que pretendia e não queria algo que não fosse o já anteriormente pensado. No que concerne a apps de smart shower , a pesquisa de mercado incidiu nos seguintes exemplos (Figura 5,Figura 6,Figura 7): 20 A app do Mira Showers, aplicação em concorrência direta com a Zypho, representou uma inspiração estética no sentido de possuir grande parte dos requisitos dos clientes e uma inspiração funcional para a criação da página dos presets (set de banho já pré-definido pelo utilizador em termos de temperatura, flow da água, duração do banho) , ideia que ainda não tinha sido considerada. 20 Disponível em: https://www.mirashowers.co.uk/showers/digital-showers/mira-shower-app/ Figura 5 - Imagem da app Mira Showers 34 • Splashscreen com pequena introdução a novos utilizadores; • A Homepage ; ➢ Onde o utilizador inicia e termina o seu banho, com opção de alterar as configurações da água, podendo criar presets com essas novas alterações. Na homepage , a temperatura do banho que aparecerá sempre é um default (25º). • Página de presets ; ➢ Onde o utilizador pode criar ou editar os presets . • Página de savings; ➢ Onde o utilizador tem acesso aos seus gastos de água e energia. • Página de definições. Com base nestas 4 páginas começou-se então a desenhar as wireframes , começando pelo botão que será o centro de todo o funcionamento e conceito da aplicação. Antes ainda da criação do botão, teve de ser criada a animação de água (Figura 10,Figura 11), requisito muito importante para a empresa. Figura 10 - animação principal 35 Figura 11 - Criação da animação principal O botão em si foi a parte de processo mais demorada, dado que foram necessários vários testes e desenhos de várias formas de funcionamento do botão. Sendo um botão CTA ( call-to-action ), tendo esse botão 3 fases ( start, ready e stop ), significaria que esse botão iria ser clicado 3 vezes, sendo que a 2ª vez, no ready , não seria suposto clicar, uma vez que o ready seria só uma informação para o utilizador, o que se veio a confirmar mais adiante. Em todo o processo de criação do botão foi sempre pedido quer o feedback da empresa, quer o do supervisor. Criaram-se assim duas opções de botão (Figura 12): • A primeira opção de botão foi um botão circular, com a sua base a encher com água assim que o botão fosse pressionado. Tentou manter-se um visual mais metálico para ir ao encontro do branding da marca. • A segunda opção de botão foi o inverso do primeiro. Isto é, a base metálica, e parte clicável que enchia de água assim que o botão fosse pressionado. No entanto, a empresa salientou que preferia um ícone no centro do botão, em vez de texto. 36 Figura 12 - Wireframe 2: botões O fluxo de trabalho foi o seguinte: 1. Criar um botão com um ícone de chuveiro no centro da área clicável, seguindo a lógica do segundo exemplo. Definir a área clicável do botão, mas reconsiderar a decisão em uma reunião com a empresa, optando por ter botões específicos de start e stop. 2. Criar dois botões ( start e stop ) para acionar ou desligar a água, requerendo a ação do utilizador. 3. Após testes com não utilizadores, perceber que o funcionamento da página não faz sentido, porque ficam a achar que tem de carregar para atingir o estado de ready. 4. Realizar uma reunião com o supervisor e perceber que o estado de ready talvez não seja necessário diretamente ligado ao botão. 5. Simplificar o processo, eliminando a necessidade de criar um botão novo a cada vez, optando apenas por uma legenda que avise o utilizador que o banho estará pronto. 6. Manter a animação em execução durante todo o tempo do banho. 37 Figura 13 - Screenshot Figma : Modo claro 7. Decidir avançar com outras páginas e adiar a revisão da mesma para uma fase posterior, com um pensamento novo e restruturado. Protótipo de alta-fidelidade Nesta fase, com base nos wireframes iniciais, começaram-se a construir as páginas principais, testando vários tipos de estética, quer das páginas, quer dos botões, cartões e splashscreen. No entanto, deixou-se sempre o botão principal no centro no ecrã, ainda dentro da zona fácil de clicar (quer para esquerdinos, quer para destros), sendo que é a base de toda a aplicação. Além disto, o menu ficou na base do ecrã, por ser o mais comum e aquilo a que o utilizador vai estar acostumado e também por ser facilmente acedido. Ao longo do processo de criação do protótipo de alta-fidelidade, foi possível, através da aplicação do Figma para smartphones, darmos sempre prioridade à obtenção e integração de feedback valioso. Isto envolveu uma abordagem colaborativa, onde o feedback do supervisor, a visão do cliente e as perspetivas de um grupo de utilizadores desempenharam papéis cruciais. Cada fase do desenvolvimento foi moldada e refinada com base nas opiniões e sugestões das partes interessadas. Esta abordagem orientada para o feedback garantiu que o protótipo final atendesse, não apenas aos requisitos iniciais, mas também às expectativas e necessidades reais dos utilizadores, resultando num produto mais sólido e eficaz. 38 Figura 14 - Screenshot Figma: modo escuro Figura 15 - Mockup Já com as páginas principais estruturadas, testou-se um tema mais claro (Figura 13) e mais escuro (Figura 14). No entanto, após feedback , concluiu-se que o tema escuro em toda a app era “demasiado pesado para a vista” e que, por isso, deveríamos seguir com uma cor mais clara e que tivesse um efeito calmante no utilizador. Salientou-se, também, devido ao primeiro protótipo, que o uso de duas cores na app seria funcional, mas que a mudança de cor devia estar associada a uma mudança de estado, neste caso, quando o chuveiro é ligado/desligado (Figura 15). 39 Nesta fase foi também criado: • Página de emparelhamento do chuveiro à app; • Menu, inicialmente com 3 páginas ( presets, savings e definições) que, mais tarde, foi alterado para um menu com 4, devido à falta de ligação à página principal do chuveiro. • Página de savings , onde se optou por uma visualização em gráfico, no sentido de facilitar ao utilizador a perceção dos seus gastos de energia e de água; • Os cards (cartões) para a página de presets. Os cartões são utilizados quando precisamos de representar um conteúdo variado com a mesma ideia. • Os sliders (barra de deslize) para a temperatura, o flow da água, e a duração do banho. • Os pop-ups informacionais (pequenas caixas de texto que surgem no ecrã). Após toda a estruturação das páginas e do design visual, foi finalizado o botão de start/stop, cujo design final é o apresentado na Figura 15. Foi ainda acrescentado um timer , permitindo ao utilizador ter noção do tempo de banho, antes de sequer desligar o chuveiro. Protótipo final O protótipo final (Figura 16) foi desenvolvido em inglês devido à internacionalização da empresa, que visa atingir mercados em diversos países europeus com o seu produto. Figura 16 - Mockup Final 40 No seu design visual final (Figura 17) optou-se então pela utilização de modo escuro e modo claro, usando-se a mudança para destacar o início e fim do banho. Optou-se pela cor azul-claro para a cor base da aplicação devido a diversas razões (retiradas dos feedback s quer da empresa, quer de utilizadores que testaram o protótipo): • O azul transmite uma sensação de tranquilidade e serenidade o que é essencial quando se trata de momentos de relaxamento no banho; • O azul-claro é frequentemente associado à cor da água, o que torna a experiência da aplicação mais coerente e relacionada ao contexto do banho; • É uma cor suave aos olhos, evitando ser muito chamativo ou cansativo, tornando a aplicação agradável e fácil de utilizar, permitindo uma concentração maior na informação e nas funcionalidades; • Além de ser a cor associada à marca Zypho, é uma cor frequentemente associada a ideias positivas, como confiança, limpeza e tecnologia, transmitindo uma sensação de confiança e qualidade em relação ao produto; • O azul-claro é uma cor com boa legibilidade quando combinada com textos brancos ou escuros, o que melhora a acessibilidade e torna a leitura mais fácil para os utilizadores. A acessibilidade do protótipo foi ainda testada através do plug-in “color blind” do Figma. Além das 5 páginas definidas inicialmente, acabou por se acrescentar uma página de configurações do banho (Figura 18) – função que inicialmente se pensou fazer em pop up , mas após diverso feedback achou-se mais clara e eficaz uma página só onde se pudesse fazer todas as alterações. Nos sliders criados para o ajuste das configurações do banho, apesar de ter sido colocado ao longo do processo em páginas de diferentes tamanhos, foi sempre tido em atenção o tamanho do slider (40x40), sendo o tamanho ideal para ser clicável e arrastável pelo utilizador sem grandes problemas. Figura 17 - Design Visual (tipografia e palete de cores) 41 Figura 18 - Screenshot Figma: Configuração da temperatura Figura 19 - Screenshot Figma: botão principal Para além do já mencionado, associou-se um gradiente em cada slider , referente ao que está a ser configurado. Após diversas alterações ao botão principal, optou-se então por um design mais simplista, com o texto indicativo da ação centrado (Figura 19), sem estado de ready – que se concluiu não ser necessário. Ao ser clicado, a mancha azul-escura à sua volta expande, enquanto a animação da água a mover sobe dentro do botão, dando a entender que o chuveiro está ligado e pronto a ser utilizado. Deu-se ainda a opção de o utilizador alterar as configurações do chuveiro através do botão das configurações que se encontra centrado, abaixo do botão principal, ou carregando nos números associados à temperatura e flow da água. Fazendo alterações, é dado ao utilizador a hipótese de criar um preset com as novas configurações, ou fazer update do preset , tratando-se de um banho selecionado 42 Figura 20 - Screenshot Figma: alteração do tema Figura 21 - Screenshot Figma: página savings na página dos presets. A última alteração feita ao protótipo foi a inserção de um timer – que vai em modo crescente, caso seja um banho default, ou em modo decrescente, sendo um preset (Figura 20) . Além destas páginas, o utilizador tem ainda a página de definições, onde pode alterar definições básicas da aplicação como o idioma, e ainda a página de savings (Figura 21) com a média das suas poupanças, onde este tem acesso aos seus consumos de água e de energia, podendo esta visualização ser semanal, mensal ou anual, conforme desejar. 43 4.2 Projeto Eurocidades Nesta secção irá descrever-se em detalhe todo o processo do Projeto Eurocidades. 4.2.1 Compreensão do contexto O objetivo deste segundo projeto é, com base nos sites das 3 Eurocidades: Cerveira/Tomiño (Figura 22), Chaves/Verín (Figura 23) e Tui/Valença (Figura 24), criar o conceito de UX e UI para as 3 aplicações, que terão de funcionar de forma igual e coerente. Tendo isto em mente, os requisitos iniciais do projeto foram os seguintes: • Protótipo com 4 páginas: homepage , página de eventos, página de equipamentos e página do Eurocidadão. • Simplificação dos processos de compra de bilhetes e inscrição em equipamentos, sendo que estes nos sites têm demasiados passos, tornando todo o processo exaustivo para o utilizador. • Manter a identidade gráfica dos respetivos sites. Considerou-se como público-alvo os residentes locais das Eurocidades, a comunidade Transfronteiriça. Apesar das Eurocidades estarem atualmente mais preocupadas com o turismo, esta aplicação estará virada para os residentes locais, facilitando-lhes as operações supramencionadas. Todo o design visual de cada Eurocidade já está criado de antemão e, tendo uma identidade gráfica que não pode ser alterada, teremos de trabalhar com base nessa identidade. Figura 22 - Screenshot do site Eurocidade Cerveira%Tomino. Disponível em: https://eurocidadecerveiratomino.eu/pt-pt 50 Aqui, por todos os sites terem um design bastante simples, pensou-se num menu que desse um pouco mais de fluidez ao design, mas que mantivesse a facilidade de navegação e por isto optou-se por um menu flutuante (Figura 29): Figura 29 - Wireframe 5: menu Optando por deixar a página do utilizador (meu cartão), os eventos e os equipamentos no menu. Não se tomou como necessário o botão de homepage , pelo facto de, no menu, já se encontrarem as 3 páginas às quais o utilizador pode ter acesso e as informações relativas a próximos eventos/equipamentos se encontrarem nas respetivas páginas. De seguida desenhou-se uma possível estrutura para a Homepage (Figura 30 e Figura 31). Na Homepage assumiu-se como necessário que o utilizador tenha acesso rápido ao seu QR CODE – identificação rápida do Eurocidadão, associado ao seu cartão – ao próximo evento e à próxima marcação Figura 30 - Wireframe 6: homepage Figura 31 - Wireframe 7: cards 51 de equipamento. Aqui optou-se por uma estrutura por cards , onde a pessoa tem acesso à informação do próximo evento/equipamento e um botão que os levará para a sucessiva página. Para a página dos eventos, optou-se então por fazer-se uma divisão entre “Eventos” (que se refere a todos os eventos a acontecer), sendo que, depois, o utilizador poderá filtrar por mês do ano; “Meus eventos” (eventos para os quais o utilizador já tem bilhete ou guardou nos favoritos), e “Bilhetes” (onde o utilizador tem acesso direto e rápido aos bilhetes já adquiridos). A estrutura da página dos eventos é também ela feita por cards , que se apresentam mais pequenos, quando em lista, e expandidos, quando selecionados, dando aí a opção de compra ao utilizador. O mesmo acontece na página dos “Equipamentos” (Figura 32). Aqui, no entanto, em vez da opção “Comprar” o utilizador tem outras 2: se já tiver realizado a inscrição, tem a opção de registo; se ainda não tiver realizado a inscrição, tem a opção de inscrição, de forma a não induzir o utilizador em erro. Figura 32 - Screenshot Figma: equipamentos Relativamente ao processo de compra, este foi reduzido de 8 passos, no site, para 5 passos na app. Já o processo de inscrição e registo, dividido, tem: • Inscrição: 4 passos. • Registo/marcação de equipamento: 4 passos. 52 No processo de registo/marcação do equipamento, surgiu a questão de a interface ser pequena comparativamente à quantidade de slots de horários nos equipamentos (Figura 33). Deste modo, após diversas tentativas de reformular a apresentação do horário, optou-se por colocar uma filtragem do horário, conforme a disponibilidade do utilizador (dias da semana, horário, modalidade, instrutor). Assim, não vamos sobrecarregar o utilizador com o horário completo a não ser que ele o queira ver, tendo essa opção ao filtrar o horário. Protótipo alta-fidelidade Na criação do UI, criou-se inicialmente o UI do protótipo da Eurocidade Cerveira%Tomiño, por ser o site mais completo até à data e, mais tarde, será só adaptar às cores de cada Eurocidade. Por exemplo, vejam-se os 3 splashscreens e página de login (Figura 34, Figura 35, Figura 36): Figura 33 - Screenshot Figma: Slots de horários 53 Figura 34 - Screenshot Figma: Splashscreen e login CERVEIRA%TOMIÑO Figura 35 - Screenshot Figma: Splashscreen e login CHAVES.VERIN 54 Figura 36 - Screenshot Figma: Splashscreen e login TUI.VALENÇA Em cada página de login foi adicionado como background a imagem da cidade utilizada no site, sendo esta movível, mantendo-se a posição do login . O branco, branco suave (#FEFEFE) como cor base dos 3 protótipos, deve-se a diversos fatores tais como: • Simplicidade e minimalismo: sendo que as 3 Eurocidades já têm no seu design cores bastante fortes e diversificadas, o branco surge como forma de transmitir uma sensação de simplicidade, permitindo a criação de um design limpo e descomplicado; • Foco no conteúdo: o branco atua como um pano de fundo neutro, permitindo que os elementos visuais do protótipo se destaquem sem distrações, ajudando a garantir que o foco esteja no conteúdo. • Acessibilidade: em termos de acessibilidade, o uso de um branco mais suave em vez do branco puro pode melhorar a acessibilidade, oferecendo uma experiência mais agradável e legível a um público mais amplo, não causando um desconforto visual. 55 Figura 37 - Screenshot Figma: Menu e Cards Na Figura 37, está representado a componente criada para o menu (cores alternáveis conforme a Eurocidade) e um exemplo do uso de cards para a disposição de eventos ou equipamentos (não selecionado/selecionado). Tendo em conta que este protótipo é maioritariamente informativo e de compra/registo, optou-se por ser um design com base em cards. Isto permite criar uma interface de utilizador mais intuitiva e amigável pela especificidade de cada card . Cada card contém um conjunto específico de detalhes sobre cada ação, o que torna mais fácil para o utilizador identificar e entender as opções disponíveis, melhora a experiência de navegação e ajuda a evitar a sobrecarga de informações, permitindo destacar conteúdos importantes e navegar entre os diferentes cards de forma independente, mesmo que estes estejam ligados ao mesmo assunto ( p.e : eventos – cada evento no seu card ). Além do já dito, permitem um design responsivo - sendo naturalmente adaptáveis a diferentes dispositivos e tamanhos de tela – permitem uma aprendizagem rápida do utilizador e, tendo um CTA (call-to-action), coloca o foco na ação desejada e incentiva os utilizadores a interagirem com a aplicação de uma forma mais orientada. 56 A tipografia utilizada no protótipo foi cuidadosamente selecionada para complementar e aprimorar a experiência do utilizador. Optamos então por uma fonte moderna e legível, com linhas limpas e proporções equilibradas, garantindo uma leitura confortável em diversas plataformas e tamanhos de tela. A hierarquia tipográfica foi estruturada de forma a guiar o utilizador naturalmente através do conteúdo, destacando títulos com uma fonte mais arrojada e contrastante, enquanto o corpo do texto é apresentado num tamanho e espaçamento adequados para facilitar a absorção das informações. Utilizamos igualmente variações de peso e estilo para enfatizar pontos-chave e criar uma estética visualmente atraente, promovendo uma experiência de leitura agradável e intuitiva aos utilizadores. Protótipo final Por falta de tempo, dentro daquilo que foi a duração do estágio, apenas se realizou por completo o primeiro protótipo, sendo que a estrutura se manterá nos seguintes projetos. Na sua fase final, tem a seguinte apresentação (Figura 38): Figura 38 - Mockup app Eurocidades Cerveira%Tomiño 57 A identidade visual da aplicação (Figura 39) tem como base as mesmas cores utilizadas na sua versão web , de forma a cumprir com as regras da identidade gráfica. A acessibilidade do protótipo em termos de cores foi ainda testada através do plug-in “color blind” do Figma (Figura 40): Figura 40 - Screenshot Figma: teste "colorblind" Figura 39 - Screenshot Figma: Visual Design 58 Veja-se abaixo uma apresentação visual do protótipo final dos 3 processos principais, compra, inscrição e registo: • Processo de compra (Figura 41) Figura 41 - Screenshot Figma: Processo de compra • Processo de inscrição (Figura 42) Figura 42 - Screenshot Figma: Processo de Inscrição 59 • Processo de marcação (Figura 43) O protótipo final representa o culminar de um compromisso entre o aprimorar a experiência do utilizador e oferecer uma interface de utilizador eficaz. Ao incorporar as informações retiradas e aprendidas durante a pesquisa e ao simplificar os processos de compra e inscrição/marcação, o protótipo final proporciona aos utilizadores uma experiência suave e intuitiva. A interface de utilizador foi projetada com cuidado, com o foco na acessibilidade, usabilidade e estética visual, garantindo que cada interação seja agradável e significativa. Com o protótipo final, confia-se que os utilizadores desfrutarão de uma experiência mais fluída e satisfatória. Figura 43 - Screenshot Figma: Processo de marcação 66 Shackel, B. (1981). The concept of usability. Poughkeepsie, NY: Proceedings of IBM Software and Information Usability Symposium. Shackel, B. (1986). Ergonomics in design for usability. In Proceedings of the second conference of the british computer society, human computer interaction specialist group on people and computers: Designing for usability (p. 44-64). New York, NY, USA: Cambridge University Press. Shackel, B. (1991). Usability - context, framework, design, and evaluation. In B. S.S. Richardson (Ed.), Human factors for informatics usability (p. 21-38). Cambridge: Cambridge University Press. systems [Computer software manual]. Geneva, CH. Soegaard, M. (2018). The Basics of User Experience Design [Review of The Basics of User Experience Design]. Interaction Design Foundation. Stevenson, William (1996), Productions/Operations Management, Irwin Publishing Company, 5th Edition, 1996. Teixeira, F. (2014). Introdução e boas práticas em UX Design. In Google Books. Editora Casa do Código. Unger, R; Chandler, C. (2010). Guia Para Projetar UX. Rio de Janeiro: Alta Books. Winograd, T., Denning, P. J., & Metcalfe, R. M. (2004). From Computing Machinery to Interaction Design. 67 Wroblewski, L. (2011). Mobile First. A Book Apart. Consultado 2 fevereiro 2023, disponível em: https://mobile-first.abookapart.com/