Elementos de branding: moodboard e cores; naming e logo

9.1.2.2User flow

Ouserflowconsiste num mapeamento de percursos percorridos pelo utilizador desde que acede à aplicação até concluir determinadas tarefas. Os diagramas que se seguem visam à descrição das etapas necessárias a percorrer pela persona principal, para a realização das seguintes tarefas: 1)Onboardingou início de primeira sessão; agendamento de atividade, 2) realização de atividade agendada.

Fig. 29.User flowda persona principal. (A investigadora, 2022).

Fig. 30.Screenshotrepresentativos do design de interface das plataformasSustainable Web Design(à esquerda) e osoftware Planetly(à direita). Disponível em: https://sustainablewebdesign.org/ e

https://www.planetly.com/product/overview, respetivamente.

A plataforma Sustainable Web Design(Fig.30, à esquerda) integra conteúdos sobre a sustentabilidade noweb design. O seu design de interfaces apresenta uma paleta de cores vibrantes e apelativas, que se traduzem numa leitura de conteúdos clara, contrastante e de notória hierarquização de informação. As características mencionadas são evidenciadas tanto emlightcomo emdark mode. Durante a navegação, estes modos de leitura são passíveis de ser controlados pelo utilizador, através de uma aba de comandos de cor roxa (conforme demonstrado na Fig.31, à esquerda), relacionados com a configuração gráfica do interface.

Osoftware Planetly(Fig.31, à direita) apresenta um design de interfaces cuja página principal culmina num painel de visualização de informação (dashboard) que expõe métricas relativas ao impacto ambiental de uma determinada organização. Tanto a sua estrutura de informação como a configuração gráfica dos componentes do design de interface são aspetos a tomar em consideração para o projeto do artefacto digital.

Apesar da importância atribuída à arquitetura de informação e configuração gráfica e formal dos elementos presentes nas plataformas de referência ilustradas nas imagens acima, destaca-se também a dimensão cromática do design de interfaces a desenvolver. A escolha das cores a figurar nos componentes doswireframespode ser uma decisão determinante para o processo de redução de energia implicada na leitura de uma páginaweb. Segundo Lewis (2022), odark modeafeta drasticamente o consumo de bateria em dispositivos digitais.

Segundo o autor Chamary (2021), o modo escuro pode poupar até 42% da energia de um dispositivo com um ecrã OLED (organic light-emitting diode).

O consumo energético de cada cor patente num ecrã OLED prende-se com a exigência da iluminação de cada pixel individual (Lewis, 2022). Se o conteúdo de uma páginawebestiver

totalmente preto, os pixels que apresentam essa imagem num ecrã OLED podem ser

efetivamente desativados. Ou seja, quanto maior for o número de pixels desligados, menor será a quantidade de energia consumida pelo interface de uma determinada aplicação. A este respeito, Vroegindeweij et. al (2022) propõem a noção de design deuser interfacescom reconhecimento de energia, baseado em novas tecnologias de adaptabilidade energética de ecrãs OLED. No seu posterDesign Principals for Energy-Aware User-Interfaces on OLED-based handhelds,são apresentadas regras de design de interfaces para o reconhecimento de energia dos ecrãs mais utilizados em dispositivos digitais. São eles:[1] A regra ligar/desligar: os pixels são desligados quando não estiverem em uso – este aspeto reduz a potência do pixel de 100%

(branco) para 0% (preto, barra inferior na Fig.31);[2] a regra do brilho:baseia-se no

escurecimento de pixels que não estão em uso. Devido à correção gama, a redução da potência luminosa é baseada numa função não linear. Significa isto que, em vez de desligar 50% dos pixels, escurecer todos os pixels em 50% traduz-se em melhores resultados de poupança energética (Fig.31, em baixo);[3] a regra das cores:o uso de cores primárias, como vermelho, verde ou azul, reduz a potência dos pixels, em comparação com cores secundárias. Para a versão específica da tecnologia OLED que consideramos, de entre as cores primárias, o verde consome menos energia. A figura seguinte ilustra as três regras descritas e inclui a percentagem de consumo energético atribuída a cada cor ou tonalidade cinza. A percentagem máxima

(100%) corresponde ao consumo máximo de cada pixel.

Fig. 31Representação de percentagens de consumo de energia em função da cor e da escala de cinza, quando utilizadas em tecnologias OLED. Retirado de Vroegindeweij, Eardley, Ranganathan & Geelhoed (2022). Design Principals for Energy-Aware User Interfaces on OLED-based handhelds.

Conforme demonstrado na figura acima, o preto é a cor que menos energia consome (0%). Por contraste, o branco é a cor que mais contribui para o consumo energético dos pixels de dispositivos OLED (100%).

As regras definidas por Vroegindeweij et. al (2022) são particularmente importantes para a formulação do sistema de cores a integrar o design de interfaces do artefacto digital a

desenvolver.⁶⁷Com base na Fig.31(acima), foi selecionada uma gama de cores que contribui

67Apesar do dispositivo considerado para o desenvolvimento do protótipo da ferramenta digital ter sido o desktop, a seleção do espectro cromático foi baseada no critério de utilização de cores que impliquem um consumo de energia reduzido no seu processo de exibição em ambientes OLED (organic light-emitting diode), ou seja, em ecrãs que são atualmente próprios desmartphones. Esta decisão foi tomada por, por um lado, atualmente, não terem sido encontrados estudos que evidenciem que as cores exibidas em ecrãs de tipo LCD (Liquid Crystal Display), próprios dedesktop,são determinantes para o consumo de energia destes dispositivos Por outro lado, é pretendido que o desenvolvimento e utilização futuros da ferramenta a propor sejam extensíveis a outros dispositivos tais comosmartphoneeIpad.Os motivos e informações evocados para a

drasticamente para a redução do consumo energético do artefacto digital a desenvolver, ilustrada na figura seguinte.

Fig. 32Espectro de cores OLED para implementação douser interface designa desenvolver para o artefacto digital. (A investigadora, 2022).

A figura acima (Fig.32) demonstra o esquema de cores a integrar no design de interface da ferramenta a desenvolver.

Dark Greyé a cor selecionada comobackgroundde todas as páginas e secções do artefacto.Esta cor serviu como base para a configuração de um sistema cromático emdark mode.Sendo esta cor a mais económica, consumindo entre 0 a 10% da energia total de cada pixel em ambientes OLED, segundo a Fig.31, é aquela que preenche a maior percentagem de área de cada página.

Light Greycorresponde à cor de preenchimento de algumas palavras ou pequenos blocos de texto. Como esta cor que deverá consumir até 74% da energia máxima (ver fig. x), figura com menor frequência face a outras cores de preenchimento docolor system. Estas decisões resultaram da aplicação da regra[2] regra do brilhopreconizada por Vroegindeweij et. al (2022) e descrita no parágrafo anterior. A cor branca surge em situações muito

esporádicas e justificadas adiante, tendo em conta o seu nível do consumo energético máximo (100%).

A escolha das restantes cores (Vivid Green,Light Rose, eYouth Yellowe gradiente) expostas na Fig.32 (acima), resulta da[3] regra das cores(Vroegindeweij et. al, 2022).Apesar de estarem incluídas as cores secundáriasLight RoseeYouth Yellow,utilizadas em menor área de páginas e frequência, a cor primáriaVivid Greensurge com maior frequência e percentagem de área de ecrã, por ser a cor primária que consome menos energia em tecnologias OLED, conforme referido por Vroegindeweij et. al (2022). Esta cor destaca-se também por poder ser facilmente associada à noção de otimização energética, e também às temáticas que informam o artefacto, remetendo para a ecologia e sustentabilidade digital. Conforme expresso na fig. x, a corVivid Greenconsome aproximadamente 24% da porcentagem máxima de energia.

Considerando que o gradiente cromático constituirá a cor de preenchimento com maior exigência energética, este será apenas visível em determinadas circunstâncias a designar adiante. A cor Youth Yellowé a segunda cor de preenchimento mais presente no design de interfaces proposto e deverá consumir entre 36-45% da porcentagem máxima de energia consumida por pixel.

É importante salientar que a escolha do sistema cromático a integrar odesign systemda ferramenta teve por base a melhor relação de contraste entre a cor de fundo (Dark Grey da Fig.32, acima) e as restantes cores de preenchimento de elementos doswireframesdas páginas. Por esse motivo e de modo a evitar que os utilizadores experienciem situações de cansaço ou atrito visual, as coresVivid Green,Light Rose, eYouth Yellowe gradiente sofreram um ligeiro ajuste de luminosidade. Esta modificação foi incrementada por forma a provocar o

menor impacto a nível de consumo energético associado à utilização de cada cor. Por outro lado, as cores mencionadas correspondem a um código cromático de fácil associação cognitiva para o utilizador, alusivo à disponibilidade energética de cada momento de interação com a ferramenta a desenvolver. Este código de cores associativas será descrito em maior detalhe nos próximos parágrafos.

O processo denamingda ferramenta digital refletiu o critério de seleção do espectro cromático a integrar o seudesign system. Se a poupança energética derivada da seleção de cores OLED a integrar o design de interfaces dos serviços e produtos digitais propicia a extensão do tempo de vida da bateria dos dispositivos (Chamary, 2021), é proposto o termo Betterypara designar a ferramenta digital desenvolvida.“Bettery” resulta da junção das expressões “better”e“battery”,que significam, em língua inglesa, “melhor” e “bateria”, respetivamente. Esta designação visa a evocar a otimização do uso da bateria do dispositivo através do qual esteja a ser utilizada a aplicação, aspeto que se traduz no aumento do seu tempo de vida, bem como na poupança de recursos energéticos e minerais.

Na eventualidade da conjunção Bettery não ser imediatamente elucidativa da função e objetivo da ferramenta, a configuração gráfica do logotipo poderá rapidamente esclarecer a dúvida do utilizador. O ícone, tão associado ao processo de carga das baterias dos dispositivos, que acompanha a designação doplugin, introduz o leitor ao conceito de uma jornada pela internet sustentável, tão presente nas páginas do primeiro início de sessão da ferramenta (ver wireframespatentes nas Figs. 40 e 41., pag. 80).

Uma das características distintivas do design de interfaces do artefacto é a sua possibilidade de reconfiguração contínua, mediante a disponibilidade energética, que é

calculada a cada momento. Assim, com base nesse pressuposto, o logotipo do plugin apresenta 3 variações possíveis, correspondentes aos diferentes níveis de disponibilidade energética⁶⁸, detectados em tempo real.

Fig. 33.Configuração gráfica das variantes do logotipo, correspondentes aos diferentes modos de disponibilidade energética. (A investigadora, 2022).

68Numa fase de posterior implementação do pluginBettery,será possível utilizar uma API (application programming interface) que integre características idênticas à pré-existente plataforma Carbon Intensity, disponível no seguinte endereço:https://www.carbonintensity.org.uk/). A sua consulta permite ao utilizador planear o seu consumo de eletricidade com base em previsões de intensidade carbónica com até 48 horas de antecedência. De momento, a utilização desta API é limitada, tendo em conta que o seu processamento de dados remete para a previsão da produção de energias renováveis patente apenas no território do Reino Unido. No entanto,a posteriori, poderão ser implementadas outras APIs a esta equivalentes, por forma a permitir a disponibilização de dados meteorológicos relativos ao país ou região associada ao endereço de IP do utilizador.

Conforme demonstrado na Fig.33 (acima), todas as variantes do logotipo obedecem à mesma configuração formal. No entanto, modificam-se as suas cores de preenchimento, sendo em cada situação utilizadas as cores branca,Youth Yellowe o gradiente cromático apresentado na Fig.32 (p.74),por forma a representar níveis de baixa, média e elevada disponibilidade energética. Por sua vez, os termos “low”, “medium” e “high” irão surgir identificados na homepageda ferramenta (Fig.50, p.84), por forma a manter o utilizador informado da disponibilidade energética atual, sempre devidamente acompanhados do respetivo ícone e versão do logotipo, conforme demonstrado na coluna direita da figura acima (Fig.33). Adiante, serão descritas as condições técnicas exigidas para cada modo de disponibilidade energética (Fig.63, p.93).

Antes de serem introduzidos os wireframes e o protótipo funcional do artefacto desenvolvido, apresentam-se os princípios de design de interação sustentável (SID) considerados durante as etapas de desenvolvimento do artefacto digital.

Fig. 34.Princípios de design de interação sustentável (SID) considerados no desenvolvimento do artefacto digital. (A investigadora, 2022).

Os princípios de design de interação sustentável (SID) descritos acima foram

organizados segundo dois grupos de decisões que poderão estar ou não latentes no protótipo a apresentar no capítulo seguinte. Os princípios de design evidenciados no protótipo funcional (coluna esquerda da Fig.34) incluem descritas as decisões de design de interação tomadas ao nível do design de interface, conteúdos media e notificações. Os princípios de design que não estão latentes no protótipo (coluna direita da Fig.34) apresentam descritas as decisões

idealizadas ao nível da privacidade e gestão de dados, alojamento no servidor da ferramenta e de ligação à internet.

9.2.1 Descrição da ferramenta

Por forma a desenvolver um protótipo representativo da experiência de interação da ferramenta Bettery, foi desenvolvida uma sequência dewireframescom base nos fluxos de experiência de utilizador (Fig.29, p.71), considerando a natureza do artefacto. Conforme descrito na secçãoIdeation(p.68), a ferramenta digital desenvolvida consiste numnew-tab plugin,ou seja, numa extensão deweb browser, que, após ser adicionada ao Google Chrome, pode ser

acedida após a abertura de uma novatabou aba. Este processo será novamente ilustrado adiante, nesta secção (Figs. 38 e 39, p.80).

9.2.2Browsere dispositivo considerados

No âmbito desta investigação, o protótipo da ferramenta foi desenvolvido considerando, apenas, obrowserGoogle Chrome. Esta decisão deve-se ao facto de, atualmente, este ser o browsermais popular entre utilizadores e, como tal, poder vir a constituir um potencial canal de lançamento do produto. A nível global, o Google Chrome representa 65.7% da quota de

mercado dosweb browsersem 2022, seguido do Safari, que representa 18.66% desseshare (Statcounter Global Stats, 2022). Assim, atendendo aomarket sharedosweb browsers, considerar o Google Chrome, irá, à partida, reduzir a necessidade de instalação de um novo navegador para a maioria dos novos utilizadores que quiserem começar a utilizar oplugin Bettery.Numa fase inicial, por forma a garantir a máxima adesão possível, considera-se favorável que a sua instalação constitua um processo imediato e intuitivo, diminuindo a existência de obstáculos para os utilizadores. Numa fase de posterior implementação da ferramenta, é proposto que esta se torne extensível aos restantesbrowserscomerciais (e.g.

Safari, Firefox, etc.).

À semelhança da consideração de únicobrowsernesta fase primordial de

desenvolvimento de primeiro protótipo, a consideração do dispositivo segundo o qual se propõe a utilização inicial da ferramenta recaiu sobre odesktop. Apesar dos utilizadores preferirem o smartphoneenquanto dispositivo para navegar na internet (Bouchrika, 2022), a proporção do desktopprivilegia a instalação de extensões debrowser, facilitando a interação comdashboards em formatolandscape(horizontal) e promovendo a leitura de informação disposta em blocos horizontais (Tungate, 2019). Por outro lado, é no desktop que muitos utilizadores permanecem a navegar por períodos de tempo mais prolongados, sendo que a experiência de interação desta ferramenta depende, em parte, do tempo passado online e da promoção de uma atitude de autocontrolo, no que respeita à relação que o indivíduo estabelece com a tecnologia digital.

Posteriormente, é pretendido que opluginseja desenvolvido no sentido do seu design de interface se tornar responsivo e passível de ser utilizado em ambientesmobileeIpad.

9.2.3 Teste de usabilidade inicial

As imagens que se seguem resultam de ajustes implementados àposteriorida

realização de um teste de usabilidade inicial. Este primeiro teste de usabilidade foi presencial e informalmente realizado por 3 participantes pertencentes ao grupo etário do público definido (utilizadores com idades compreendidas entre os 18 e os 25 anos). Nesta fase, os potenciais utilizadores interagiram com a versão do protótipo funcional de então, que integrouwireframes de alta fidelidade com uma configuração deuser interfaceaproximada à que atualmente se apresenta noswireframesque se seguem. O teste de usabilidade disponibilizado nesta fase foi baseado na estrutura e metodologia apresentada por Brooke (1995) emSUS: A quick and dirty usability scale. Pelo facto da sua estrutura permitir avaliar as qualidades de eficiência, eficácia e satisfação associadas à experiência de interação da ferramenta, bem como pelo facto de esta ser uma ferramenta acessível e eficaz para avaliar o nível de usabilidade de um artefacto digital, foi selecionado o modelo e Escala de Usabilidade do Sistema (SUS). Este teste integra 10 afirmações para as quais cada participante indicou o grau de concordância, segundo uma escala de Likert. Para tal, cada potencial utilizador assinalou a sua resposta num espectro de 5 graus de concordância de entre as opções (1) “discordo plenamente” e (5) “concordo

plenamente”. O investigador John Sauro (2011) afirma que a pontuação média SUS de todos os 500 estudos por ele analisados é de 68 pontos. Assim, uma pontuação SUS superior a 68

pontos seria considerada acima da média e qualquer valor inferior estaria situado abaixo dessa média. Conforme demonstrado no Anexo 10 (p.133), a pontuação média obtida nos três testes de usabilidade é de67,5 pontos.Em termos globais, este resultado situa-se no limiar do alcance do valor médio(68 pontos), conforme o valor referencial sugerido por Sauro (2011).

Após a realização do teste de usabilidade inicial, foram elencados alguns

constrangimentos por parte dos participantes, expostos na coluna esquerda da imagem que se segue. Perante os problemas detectados e listados, foram formuladas as respetivas soluções, apresentadas na coluna direita da figura que se segue.

Fig. 35.Problemas detectados no teste de usabilidade inicial e respectivas soluções incrementadas antes do teste de usabilidade final. (A investigadora, 2022).

Assim, a configuração do design de interface latente noswireframesque se seguem nas próximas secções, corresponde a uma versão que apresenta integradas as soluções formuladas e expressas na coluna direita da imagem acima (Fig.35).