Linguagem iconográfica e estrutura da cor.

Na definição de estratégia de design da interface aproveitámos a vantagem oferecida pelo mecanismo de navegação nativo do iOS da Apple e dirigimos a nossa preocupação para os aspetos gráficos que se compatibilizam com os requisitos de design que potenciam um efetivo suporte à atenção nas informações mais importantes devolvidas pelo sistema instalado no SugarCRM.

Sendo um sistema inteiramente dedicado a dar suporte às atividades resultantes da aprendizagem de projeto em Design, foi concebido um símbolo gráfico que funciona como logotipo provisório para a aplicação TCRIO, tendo como objetivo evidenciar algumas das principais caraterísticas da aplicação, tal como se esquematiza na figura 82:

Figura 82 – Significação gráfica do símbolo gráfico TCRIO.

Consideramos provisório este logótipo por termos despendido pouco tempo a explorar alternativas com um valor comunicacional superior. No entanto este elemento gráfico potenciou-nos um ponto de partida para o desenvolvimento da imagem da aplicação e a subsequente criação de outros elementos gráficos que dele dependem, como é o caso do ícone e da imagem de “arranque” da aplicação, como se pode observar na figura 83:

Correspondendo à atual tendência de utilização da cor azul na maioria dos sistemas tecnológicos ligados à Web e aos dispositivos de comunicação móvel (ver figura 84), associámos à imagem da aplicação TCRIO o azul claro (R:0, G:174, B:239) que domina grande parte do contexto em que ocorre a interação.

Figura 84 – Exemplo de logótipos populares que utilizam a cor azul como parte da identidade.

Esta cor gerou ainda uma dupla vantagem: por um lado o SugarCRM também se vincula a um esquema de cores idêntico (garantindo a coerência gráfica entre os dois sistemas tecnológicos) e, por outro, a cor azul claro facilita a utilização de cores mais vivas nos sinais de alerta que orientam a atenção nas informações mais relevantes.

O azul é considerado uma das cores que granjeia a aceitação da maioria das pessoas, por estar associado a realidades que transmitem serenidade e harmonia, como é o caso do céu e do mar. Eventualmente este facto pode constituir uma das justificações que torna o azul tão popular na constituição da identidade de tantas marcas e das respetivas interfaces.

Para simplificar a informação disponibilizada pela interface, recorremos a 4 tipos de pictogramas (ver a figura 85) com o objetivo de comunicar de forma rápida e de fácil compreensão as diferentes categorias de informação disponibilizada pelo sistema.

No ponto 4.3 (na pág. 167) em que se descreve o funcionamento do protótipo e a utilização desta interface ficará mais claro o enquadramento de cada um dos pictogramas que se passa a descrever.

Na barra inferior apresenta-se o menu principal que inclui 5 pictogramas representando cada uma das secções de informação mais importantes da aplicação, como ilustra a figura 86:

Figura 86 – 5 pictogramas do menu principal.

Os pictogramas foram introduzidos no iOS SDK58 _{da Apple na cor preta, e são transformados} automaticamente em botões de cor cinza com um estado de rollover59 _{em azul claro com um brilho} que simula a sensação física de relevo.

Dos 5 pictogramas apenas 3 são vulgarmente conhecidos em outras aplicações para o iOS (Início, Feeds sociais e o Mood), enquanto os outros foram desenvolvidos especificamente para a aplicação TCRIO (Projeto e Notificações).

O pictograma “projeto” assemelha-se ao aspeto das caixas de seleção de escolha múltipla, reforçando a sugestão das opções disponibilizadas pela aplicação para assinalar diferentes estados do projeto.

O pictograma “notificações” apresenta uma destacada semelhança com um sinal triangular de alerta, sendo contornado por uma seta que enfatiza o caráter contínuo de todo o processo de notificação.

Na barra superior da aplicação, no canto esquerdo, existem as habituais setas destinadas a retomar as seções de informação anteriores, enquanto do lado direito da aplicação recorremos aos símbolos do iOS destinados a identificar o acesso a operações especiais, tal como se apresenta na figura 87 (ver na página seguinte):

58 _{iOS SDK – Software Development Kit do iOS da Apple (https://developer.apple.com/programs/ios/develop.html)}

Figura 87 – 4 pictogramas dos botões de operações especiais (ver versão colorida no anexo VII).

O pictograma “sincronizar” permite atualizar a nova informação filtrada pelo SugarCRM que, por motivos de estabilidade do sistema, tem um ciclo de atualização automática de 3 em 3 minutos.

O pictograma “criar” possibilita gerar novos avisos na seção em que se faz a listagem das notificações.

O pictograma “responder” proporciona uma forma de responder a cada notificação na secção de detalhe das notificações.

O pictograma “agendamento” permite criar novos agendamentos a partir da secção em que se faz a listagem das notificações.

Para reforçar a atenção nos diferentes tipos de notificação apresentados quer no mural quer na listagem de notificações, desenvolvemos 4 pictogramas com um aspeto distinto, que sintetizam graficamente a categoria a que corresponde cada notificação, tal como se observa na figura 88:

Figura 88 – 4 pictogramas dos diferentes tipos de notificação (ver versão colorida no anexo VII).

As cores vivas foram escolhidas no sentido de atrair a atenção para os pictogramas, mesmo antes de os utilizadores se darem conta da importância do conteúdo textual que se desenvolve em cada notificação.

A mudança de pictogramas, consoante o tipo de notificação, facilita a agrupamento lógico da informação minimizando o esforço de interação, assim como também confere ritmo e dinâmica visual

reduzindo as hipóteses da interface ser percebida como estática e monótona. Esta preocupação tem em conta os critérios de design definidos no ponto 4.1.2 (na pág. 137) e fundamenta-se na lei de Hick- Hyman que defende que “o tempo de reação, necessário para efetuar uma escolha, aumenta em função do aumento logarítmico do número de alternativas disponíveis” (Braganholoe e Okazaki, 2009 – p.02).

As 3 categorias de pictogramas anteriores têm como principal objetivo facilitar a navegação nos diferentes níveis de informação da aplicação, centrar a atenção na variação da informação mais importante devolvida pelo sistema e tornar o acesso rápido e intuitivo às diferentes categorias de informação.

Por outro lado, desenvolvemos outro tipo de pictogramas destinados a facilitar o processo de escolha entre diferentes opções.

Por exemplo, na seleção dos diferentes estados das milestones do projeto definimos 4 tipos de pictogramas monocromáticos e azuis (ver a figura 89) cujo aspeto gráfico reforça a descrição textual de cada estado.

Figura 89 – 4 pictogramas dos diferentes estados das milestones de cada projeto (ver versão colorida no anexo VII).

O pictograma que reflete o estado de uma milestone por iniciar é representado com um ponto semelhantes às marcas de listagem não numéricas populares em qualquer software de anotação ou edição de texto.

O pictograma que identifica o estado de uma milestone em progresso traduz graficamente a ideia de um processo ainda em desenvolvimento.

O pictograma que assinala o estado de uma milestone ainda pendente reflete a ideia de um item não cumprido, em que a cruz reforça um aspeto pouco positivo que merece toda a atenção dos responsáveis do projeto a que se reporta.

O pictograma que indica o estado de uma milestone atingida assinala de forma clara a avaliação positiva do desfecho de uma fase.

À semelhança do conjunto de pictogramas de estado anteriores, o estado do mood do projeto também apresenta 4 tipos de pictogramas monocromáticos e azuis (ver a figura 90 na página seguinte), cujo aspeto gráfico também reforça a descrição textual de cada estado.

Figura 90 – 4 pictogramas dos diferentes estados do mood (ver versão colorida no anexo VII).

Através da expressão dos 4 smilies azuis cada pictograma reflete de forma clara o estado do mood que carateriza cada milestone atingida no projeto.

O enquadramento destes pictogramas ficará mais claro no ponto em que se descreve o funcionamento do protótipo utilizando a interface.