Homepage e respectivas variantes

também a possibilidade de definir um intervalo horário, dentro do qual o utilizador determina que não pretende ser distraído com sugestões de atividadesonlinedurante as suashoras de trabalho(Fig.47, à direita). Esta preferência é opcional, pelo que ao utilizador é permitido

“saltar” para o passo seguinte ou voltar a ser reconfigurado, posteriormente.

Uma vez completados todos os passos deste processo de primeiro início de sessão descritos nos parágrafos anteriores, o utilizador terá sempre a possibilidade de alterar as preferências, posteriormente. Segue-se a página que assinala a conclusão das etapas de configuração douser onboardingpatentes nas imagens anteriores (Figs.40-47).

Figs. 48 e 49.Página de confirmação de preferências guardadas/salvas (à esquerda) e página “Perfil” visível, que integra botões para posteriores alterações das preferências configuradas (à direita). (A investigadora, 2022).

A página de confirmação de preferências guardadas/salvas (Fig.48, acima, à esquerda) relembra o utilizador de que todas as preferências definidas nas etapas expostas nos

wireframesjá apresentados (Figs.40-47), podem ser posteriormente alteradas através dos botões disponíveis na página “Perfil” (Fig.49, acima, à direita). A página de confirmação de preferências guardada inclui a seguinte mensagem:“À nossa! Os seus dados foram guardados com sucesso. No futuro, poderá sempre alterar todas as suas preferências.”(A investigadora, 2022). Assim, após ser clicado o botão “Got it” (Fig.48, acima, à esquerda), o utilizador é encaminhado pela primeira vez para a página principal da ferramenta(home)(Fig.50, p.84), ilustrada nos parágrafos que se seguem.

Fig. 50.Análise anatómica dos componentes dahomepage⁷⁰.(A investigadora, 2022).

Conforme demonstrado na Fig.50 (acima), a página principal da ferramenta apresenta a configuração de um dashboard gráfico e que inclui artefactos de visualização de métricas relativas à pegada de carbono digital do utilizador, particularmente evidentes no Painel 5 da mesma imagem.

Ahomepagetem por principais objetivos manter o utilizador informado sobre a sua pegada de carbono digital(Painel 5)e disponibilizar sugestões de atividadesonline,adequadas à disponibilidade energética calculada a cada momento (Painel 1,Fig.50).

O cálculo da disponibilidade energética atual, patente no Espectro de disponibilidade energética doPainel 1 “Live now”(Fig.50), resulta do cruzamento de valores atribuídos às variáveis de intensidade carbónica⁷¹, nível de bateria do dispositivo e tipo de ligação à internet, calculados em tempo real. O espectro gráfico que representa a disponibilidade energética é composto por três escalas. Cada escala apresenta uma sucessão de quatro círculos alinhados verticalmente, que poderão ou não estar preenchidos, correspondentes a quatro níveis de abundância ou de escassez. Os valores que preenchem ou não cada círculo/nível de escala é determinado por valores elevados ou reduzidos, atribuídos a cada variável. A primeira escala do Espectro de disponibilidade energética do Painel 1 (Fig.50) (à esquerda) corresponde à

intensidade de carbono medida em gramas de emissões de dióxido de carbono por hora de quilowatt (gCO2/kWh). Ao centro, a segunda escala corresponde à percentagem de bateria do dispositivo (%). A terceira escala deste espectro (à direita) corresponde ao tipo de ligação à internet. Esta escala apresenta apenas a abundância ou escassez do sinal e tipo de ligação rede, indicando se se trata de um sinal obtido através de uma rede Wi-Fi, 3G, 4G ou 5G.

Asearch barouCampo de pesquisa, que se encontra situado no cabeçalho da homepage (Fig.50, acima), é um dos elementos centrais da ferramenta Bettery. Basta que o utilizador introduza um termo ou conjunto de palavras neste campo de tipoinput,para que seja imediatamente encaminhado para uma nova aba debrowsercom uma página de resultados de

71A intensidade carbónica corresponde ao cálculo de quantas emissões de dióxido de carbono por hora de quilowattsão produzidas de eletricidade consumida. (Ruff, n.d.).

70Wireframe dehomepageconfigurada em modo de alta disponibilidade energética.

pesquisa determinados pelo motor de busca outrora definido nas primeiras etapas de

configuração da aplicação (Fig.44, p.81). Este componente visa acelerar qualquer processo de pesquisa, tornando a utilização da ferramenta ágil e fluída, por forma a assegurar que a produtividade do utilizador não é afetada.

OPainel 2(Fig.50, acima) da página principal, integra informações sobre a hora prevista para agreen hour(hora de menor intensidade carbónica do dia) seguinte e o elementoCTA, representado por um botão preenchido por um gradiente colorido. Este componente destaca a possibilidade de agendamento de atividadesonlinepara realização futura, no próprio dia, com base na intensidade carbónica prevista com até 48 horas de antecedência. Mais adiante, este cenário será apresentado nowireframerelativo ao fluxoActivity scheduling(Figs.55 e 56, p.89).

OPainel 3 “Tomorrow”(Fig.50, acima) apresenta informação sobre a previsão das horas de maior e menor intensidade carbónica do dia seguinte, correspondentes àpeakegreen hour, respetivamente. Adicionalmente, no mesmo painel, encontram-se botões através dos quais é possível agendar atividadesonlinepara o dia seguinte, encaminhando o utilizador para uma página Activity Scheduling que será apresentada adiante (Figs.55 e 56, p.89).

OPainel 4(Fig.50, acima) apresenta informação contextual, disponibilizando detalhes sobre as condições meteorológicas e hora atuais, bem como o nome próprio do utilizador e um ícone que o encaminha para a página de perfil (Fig.50, à direita). A informação horária e meteorológica corresponde aos dados associados ao endereço de IP do utilizador.

OPainel 5 “Digital routine report”apresenta métricas⁷²relativas ao consumo digital médio do utilizador. Os respectivos dados expostos são recolhidos durante o tempo que o utilizador passaonline,a partir do momento em que este inicia o seubrowser⁷³. Os dados disponibilizados são calculados com base nos valores registados durante a semana, mês ou ano atual. Os mesmos dados estão disponíveis para a consulta de valores registados durante a semana, mês ou ano anterior.⁷⁴

Se na imagem anterior (Fig.50, p.84) é apresentada a versão dahomepageem modo de elevada disponibilidade energética, conforme indicado na região superior do Painel 1, sob os termos “High energy availability”, a seguinte sequência de imagens demonstra as possíveis variações de design de interface dahomepage, correspondentes aos restantes modos de disponibilidade energética (média e baixa disponibilidade energética, respetivamente).

74Sucede que este mecanismo de consulta cronológica de dados acabará, inevitavelmente, por condicionar a consulta de valores referentes a semanas, meses ou anos que não sejam os atuais ou os anteriores. Ora, esta restrição de consulta de dados é intencional e foi definida por forma a limitar o armazenamento de dados locais e a reduzi-los apenas aos valores mínimos necessários para que o utilizador seja capaz de reconhecer o

73Atendendo à tendência crescente da intermodalidade enquanto característica associada ao funcionamento dos sistemas digitais mais recentes (Preist et. al, 2017), pretende-se que numa fase de posterior

desenvolvimento da ferramentaBettery, as métricas relacionadas com a pegada de carbono digital do utilizador considerem o tempo passado online e as atividades realizadas através de vários browsers e dispositivos em rede.

72A seleção da tipologia das métricas que figuram neste painel foi realizadaà priori, durante o processo de primeiro início de sessão na ferramenta, conforme exposto na Fig.xx (p.xx).

Figs. 51 e 52.Configuração dehomepagenas versões de média (à esquerda) e baixa disponibilidade energética (à direita). (A investigadora, 2022).

Conforme demonstrado na imagem anterior (à direita), o modo de baixa disponibilidade energética dahomepageocorre durante as horas de pico de eletricidade(peak hours). Tendo em conta que o processamento de dados consome muita energia, neste modo, o Painel 4 deixa de exibir as métricas relacionadas com a pegada de carbono digital do utilizador e passa a incluir a seguinte mensagem:

“Peak hour. Parece que estamos perante a hora de maior intensidade carbónica do dia.

Vamos aguardar que o vento sopre para que os dados relativos à sua pegada de carbono digital sejam novamente carregados.” (A investigadora, 2022).

3.1 Homepage -Mensagens excepcionais

Os ecrãs que se seguem visam a manter o utilizador informado sobre as condições técnicas dos estados excepcionais dahomepage. Adiante, serão descritas as situações em que surgem as mensagens excepcionais, com o objetivo de expandir a consciência sobre o uso da eletricidade implicada no uso da internet e de educar o utilizador acerca dos requisitos técnicos necessários para a apresentação de dados nos painéis dahomepage(ver o espectro visual patente na Fig.50, p.84).

Por norma e por respeito à estrutura delayoutda página principal convencionada na Fig.50 (p.84), o conteúdo alusivo às mensagens excepcionais surge inserido nas divisões (divs) correspondentes aos painéis 1, 2 e 4, por forma a que estas configurações de ecrãs gerem o mínimo de atrito de leitura possível.

Fig. 53.Configuração dehomepagecom mensagem excepcional “First login” durante o primeiro início de sessão, no modo de média disponibilidade energética. (A investigadora, 2022).

A mensagem inserida no Painel 3 (ver Fig.50, p.84) da Fig.53 (acima), é apresentada ao leitor apenas durante o fluxo do primeiro início de sessão, imediatamente após a conclusão de todas as etapas de configuração inicial da ferramentaBettery. A mensagem excepcional da Fig.53 (acima) apresenta o seguinte texto:

“Primeiro início de sessão.

Este parece ser o seu primeiro início de sessão. A recolha de dados relativos ao seu comportamento online requer algum tempo.

Dentro de 7 dias, será possível visualizar as métricas relativas à sua pegada de carbono digital aqui. Até lá, desfrute do seu percurso!”(A investigadora, 2022).

A imagem que se segue, ilustra a configuração da homepagenum cenário no qual não é detectado qualquer sinal de internet.

Fig. 54.Configuração dehomepagenum cenário de ausência de ligação à internet. (A investigadora, 2022).

Na circunstância em que surge ahomepageconforme ilustrada na figura acima (Fig.54), não serão apresentadas informações relativas à disponibilidade energética atual e futura, bem como informação meteorológica, uma vez que a sua disponibilização depende da ligação à internet. O Painel 1 da Fig.54 (acima) inclui a seguinte mensagem:

“Sem ligação à internet. Não há ligação à internet, mas ainda é possível dar uma vista de olhos ao seu relatório de rotina digital, localizado no painel direito desta página. Como as tecnologias de sincronização de ficheiros em cloud consomem muita eletricidade, os dados relacionados com a sua pegada de carbono digital foram sempre armazenados localmente.

Prometemos exibir a previsão de disponibilidade energética com a maior precisão possível, logo após a deteção de qualquer sinal de ligação à rede.”(A investigadora, 2022).

Aoswireframesexpostos nas Figs.53 e 54, correspondem os estados de média e baixa disponibilidade energética, respectivamente. No entanto, ambas as mensagens poderão surgir apresentadas nas restantes versões de design de interfaces associados aos níveis de elevada, média ou baixa disponibilidade energética.

4.Activity scheduling and accomplishment journeys:Uma vez que o utilizador pretenda agendar atividadesonlinefuturas através do respetivo CTA, inserido nahomepage (Fig.50, p.84) ou do respetivo link “Activities” situado nanav barvertical do menu (barra de navegação, situada na coluna na região esquerda do ecrã), é disponibilizada uma página com uma agenda de marcações diária Figs. 55 e 56. Nesta etapa, o utilizador encontra a indicação do nível de disponibilidade energética e/ou intensidade carbónica associada a cada hora do dia, bem como a sugestão de atividadeonlinea realizar.

Figs. 55 e 56.Configuração de página de agendamento de atividade (à esquerda) e configuração da mesma página“Activities”com a indicação de atividades já agendadas (à direita). (A investigadora, 2022).

Conforme demonstrado nas Figs. 55 e 56 (acima), em cada linha de conteúdo é apresentado um CTA que apela ao agendamento da atividade sugerida, associada à respetiva previsão de disponibilidade energética. Caso o utilizador pretenda agendar ou cancelar o agendamento da atividade, basta clicar no mesmo no mesmo botão. As imagens acima Figs. 55 e 56, representam a configuração da página “Schedule activities” no modo de média

disponibilidade energética. Caso no momento da consulta desta página seja detectado o modo de elevada disponibilidade energética, os elementos preenchidos a corYouth Yellowtornam-se preenchidos da corVivid Green.

Figs. 57 e 58.Configuração de página de notificação de atividade agendada em curso (à esquerda), e

configuração dobrowserapós a seleção da opção de realização da atividade (à direita). (A investigadora, 2022).

Chegada a respetiva hora da atividade agendada, o utilizador é notificado da respetiva atividade sugerida (Fig.57, à esquerda). Neste caso trata-se da atividade “Video streaming”, que surge acompanhada do respetivo ícone, alusivo à mesma, e atribuído pela própria ferramenta.

Nesta fase, o utilizador tem a possibilidade de optar por realizar a atividade, clicando no botão

“Proceed”, sendo imediatamente redirecionado para uma nova aba dobrowser, que neste caso concreto, apresenta a plataformaHBO(Fig.58, à direita). Esta plataforma fora anteriormente definida pelo utilizador como favorita, associada à categoria de atividadevideo streaming, durante o processo de primeiro início de sessão (Fig.42, p.82). Conforme ilustra a Fig.58, à direita (acima), quando o utilizador opta por realizar a atividade agendada e é encaminhado para a plataforma pré-definida, situados no cabeçalho do browser surgem o ícone da extensão e a indicação de notificação assinalada por um círculo numerado. Este ícone é clicável e remete para o regresso aodashboard (home)da ferramenta Bettery (Fig.50, p.84). O utilizador poderá, também, optar por cancelar a atividade agendada durante a hora associada ao agendamento,

clicando no botão “Decline”. Nesse cenário, ouserregressa novamente àhomepage(Fig.50, p.84).

5.Gratification journey:Oswireframesque se seguem ilustram a lógica de

gamificação desta ferramenta. Assim, o utilizador é motivado a regressar aopluginBettery por via do reconhecimento da sua alteração de comportamento. Nesta ferramenta, o

reconhecimento é materializado na atribuição de medalhas de mérito conquistadas por cada recorde superado, com base no progresso das métricas e dos objetivos impostos por ele próprio durante o primeiro início de sessão, conforme exposto na Fig.45 (p.81).

Figs. 59 e 60.Configuração dahomepagecom notificação de atribuição de recompensa (à esquerda), e configuração da página “My badges” (à direita). (A investigadora, 2022).

Conforme demonstrado na Fig.59 (acima, à esquerda), esta notificação surge destacada nahomepage, ocupando a área correspondente ao Painel 1 (ver Fig.50, p.84).A notificação de atribuição de recompensa surge acompanhada da informação:“Bom trabalho! Você foi

promovido. Acabou de desbloquear o emblema do Embaixador! Dê uma vista de olhos na sua página de distintivos para conhecer o motivo da recompensa.” (A investigadora, 2022).

Após a leitura da mensagem transcrita, o utilizador pode optar por consultar todas as medalhas de mérito já conquistadas, bem como os emblemas que ainda estão por desbloquear, através do respetivo botão ou da página “My Badges” (Fig.60, acima, à direita), acessível a partir da página “Profile”. É igualmente possível optar por regressar novamente àhomepage,clicando no botão “Ok, thanks” (Fig.59, acima, à esquerda).

Na página “My Badges” (Fig.60, acima, à direita), é possível obter mais detalhes sobre o motivo da atribuição da medalha de mérito conquistada. Através do gesto “hovering”sobre a respetiva figura da medalha, a suadivtorna-se destacada através do seu preenchimento de cor Vivid Green, na qual é possível ler a seguinte informação: “Medalha de iniciante, desbloqueada a 17.05.2022. Conquista: Pegada de carbono digital geral reduzida em 17%, face ao mês anterior.” (A investigadora, 2022).

6. Secção “Contents”:A página do separador “Green web tips” integra conteúdo de âmbito pedagógico, na qual são disponibilizadas recomendações práticas que contribuem para a redução da pegada de carbono digital dos utilizadores.

Fig. 61.Página “Green web tips” inserida na secção “Contents” danav bar. (A investigadora, 2022).

Todo o conteúdo sistematizado nesta página é organizado segundo categorias de

comportamentosonline,otimização de práticas atuais, e comportamentos de substituição ou práticas de substituição. As recomendações disponibilizadas⁷⁵resultam da Fig. 18 “Recomendações práticas degreen computingpara a redução da pegada de carbono digital dos utilizadores” (p.52), com base nos princípios práticos defendidos por Gambier et. al (2020) e (Preist et al., 2016). A página

demonstrada na imagem acima (Fig. 63) encontra-se configurada segundo o modo de elevada disponibilidade energética.⁷⁶

76A versão da página“Green web tips”(Fig.61) nos modos de média e baixa disponibilidade energética consiste na apresentação dos mesmos conteúdos de texto, embora com elementos gráficos representados apenas por linhas de

75Os conteúdos expostos nowireframeda página“Green web tips”(Fig. 61) representam apenas uma amostra de todas as recomendações degreen computingabordadas ao longo da presente investigação. É proposto que nesta página sejam disponibilizadas todas as práticas que visem à redução da pegada de carbono do utilizador incluídas na Fig. 18 (p.53), acessíveis através do gestoscroll.

7. Secção “About”:Para muitos utilizadores, a página “About” será a primeira secção com conteúdo de texto a ser lida, após o primeiro contacto com a página principal da

ferramenta. A imagem que se segue demonstra a configuração da página “About”.

Fig. 62.Página “About”, em modo de elevada disponibilidade energética. (A investigadora, 2022).

A imagem acima (Fig.62) representa uma página exclusivamente informativa, que integra uma explicação mais detalhada sobre a pertinência, propósito e lógica de funcionamento da ferramenta. A informação inserida nesta página corresponde ao seguinte texto:

“A maior parte da internet que utilizamos está poluída porque ainda é alimentada por combustíveis fósseis. Se estamos dispostos a projetar uma internet para o futuro, devemos permitir que produtos digitais projetados com consciência de carbono funcionem, tal como este.

Esta ferramenta funciona de acordo com os limites ecológicos e com base na disponibilidade de energia renovável produzida em território nacional. Este aspeto contribui drasticamente para a redução do consumo energético exigido pela nossa aplicação.

Bettery é uma ferramenta de plug-in de nova aba do browser, projetada com consciência de emissões de carbono. O seu funcionamento depende de três modos de disponibilidade de energia. A cada estado energético corresponde uma configuração de design de interface distinta. A disponibilidade energética em tempo real é calculada com base em três variáveis:

intensidade de carbono, percentagem de bateria do dispositivo e tipo de ligação à internet. A disponibilidade energética futura depende apenas da previsão de intensidade de carbono, que disponibiliza informação com, até, 48 horas de antecedência. Conheça os modos energéticos.”

(a investigadora, 2022).

O CTA da página “About” (Fig.62, acima) surge depois do conteúdo de texto e é

representado por um botão em destaque na região inferior do painel, que encaminha o utilizador para a aba contígua da mesma secção “Contents”, designada “Energy Modes”. Esta última

página acaba por complementar a informação expressa na presente aba selecionada “About”

(Fig.62, acima).

Fig. 63.Página “Energy Modes”, inserida na secção “About” danav bar. (A investigadora, 2022).

A configuração da página“Energy Modes” apresenta 3 espectros gráficos que auxiliam o utilizador na compreensão das variáveis e condições técnicas que determinam os modos de disponibilidade de energia. Segue-se a respetiva descrição de cada modo de disponibilidade energética, conforme ilustrado na imagem acima (Fig.63).[1]High(elevada disponibilidade energética): este estado requer ligação à internet Wi-Fi, baixa intensidade carbónica disponível (entre 0 e 100 CO2/kWh) e elevada percentagem de bateria do dispositivo (entre 100 a 70%).

Os atributos do design de interface correspondente incluem infografias e imagens vetoriais, sistema de cores completo, com gradientes e animações simples.[2]Medium(média

disponibilidade energética): este modo requer ligação à internet 3G ou 4G, média intensidade carbónica disponível (entre 100 e 200 CO2/kWh) e média percentagem de bateria do dispositivo (entre 70 a 35%). Os atributos do design de interface correspondente incluem apenas

infografias, sistema de cor reduzido sem gradientes e transições suaves.[3]Low(baixa disponibilidade energética): este estado requer ligação à internet 5G, média intensidade carbónica disponível (mais de 200 CO2/kWh) e baixa percentagem de bateria do dispositivo (entre 35 e 0%). Os atributos do design de interface correspondente não incluem imagens ou infografias, nem sistema de cor, nem animações e transições. A informação inserida nesta página, complementa a explicação inicial relativa às versões do logotipo Bettery em função dos modos energéticos (Fig.33, p.76).

X. Avaliação do projeto