LES DIFFÉRENTS RAISONNEURS

Trata da ação de materialização de planos de consecução, assim como do objeto de design ou artefato. Esta etapa está fundamentada nos estudos relativos ao conhecimento do objeto, bem como de assuntos que o tangenciam, que procedem em uma lista de requisitos, e que contempla também a validação

constante de soluções, visando à eficiência de resultados:

§ Tratamento de conteúdo

O tratamento do conteúdo é a primeira etapa realizada no desenvolvimento do projeto IIT, e se refere especificamente à ênfase no design da informação a que se refere o modelo proposto. Neste sentido, são efetuadas ações de organização e estruturação do conteúdo de modo integrado à fase de geração de alternativas. Deste modo, segue detalhamento dos processos realizados.

• Aglutinação e estruturação da informação

O tratamento da informação levantada para um projeto inicia-se pelo agrupamento das informações semelhantes ou familiares, assim como por suas relações conceituais e hierárquicas, que orientam a construção de ligações entre si, fundamentando acessos. Esta construção é concebida de acordo com características da informação e peculiaridades relativas aos usuários e suas formas de navegação. São procedimentos desta fase metodológica ‘levantamentos’, ‘predefinições’ e ‘detalhamentos’; ‘estruturação’, ‘agrupamento’ e ‘categorização’; ‘apresentação visual do conteúdo’; e ‘validação’.

Deste modo, e utilizando de tais procedimentos, desenvolveu-se uma apresentação planigráfica mista (GOMES, 1990) de um tesauro relativo às informações georreferenciadas a serem utilizadas no sistema IIT. A classificação da informação aconteceu de acordo com sua estrutura, que é organizada em camadas a serem visualizadas graficamente no IIT. As camadas, por sua vez, possuem atributos, que as descrevem. Por fim têm-se os registros, ou dados, que são instâncias dos atributos das camadas (Figura 27).

Figura 27 – Tesauro elaborado para a IIT (Camada > Atributo > Registro).

• Mapa de apresentação visual e estrutural da informação

Esta etapa do processo metodológico consiste da representação dos elementos visuais da interface principal da IIT, com seus sub-elementos em uma estrutura hierárquica de acesso, operação e navegação. O espaço visual da IIT possui quatro zonas pré-determinadas: bandeja, mostrador de camadas, mostrador de informações adjacentes e mostrador de operações (Figura 28).

Figura 28 – Mapa de acesso e navegação do IIT.

A bandeja apresenta-se como espaço principal de visualização e interação com o conteúdo, onde o mapa que está sendo trabalhado é mostrado, assim como seleções sobre ele. O mostrador de camadas exibe as camadas do mapa e o mostrador de informações adjacentes, atributos das camadas.

Quando o arquivo não possui camadas, seus principais registros são apresentados neste lugar. Por exemplo, bioma não possui camadas, apenas seis registros. Sendo assim, eles são exibidos nesse local. O mostrador de operações possui os comandos operativos para que sejam executadas ações sobre o mapa ou uma dada seleção.

• Grid de organização de elementos nas interfaces

Nesta altura do desenvolvimento do projeto, inicia-se o tratamento específico dos conteúdos que compõem cada interface do artefato. Este processo se deu pela

ordenação das informações nos espaços da interface utilizando-se de um grid. De acordo com os requisitos do projeto, nomeadamente no que diz respeito aos elementos de interface, suas disposições e suas relações hierárquicas, e considerando as atividade a serem realizadas pelo usuário da IIT, utilizou-se de um ‘grid hierárquico’, obedecendo assim a ordem de leitura ocidental, que ocorre da esquerda para a direita, e de cima para baixo.

Este grid (Figura 29) não é estático pois os elementos da interface são flutuantes e passíveis de serem rearranjados pelo usuário, de acordo com seu gosto, objetivo e preferência, mas serve tanto para indicar hierarquia quanto para orientar a interação inicial do usuário. Este auxílio é reforçado pelo padrão gráfico em forma de mapa-esquemático visual de informação, mantendo ligações visuais entre elementos, que também é um requisito do projeto.

Figura 29 – Grid hierárquico da IIT.

O grid elaborado foi desenvolvido em vista de se ter um wireframe com indicações sobre o local do conteúdo na interface, colaborando assim na construção de suas relações. Assim, indicou-se, além da divisão do plano, a indicação e posicionamento de elementos constitutivos e suas funcionalidades existentes na interface da IIT.

Sendo assim, segue-se a indicação de localização no grid e de seus elementos, com baixo detalhamento (Figura 30) devido à natureza flexível de seu conteúdo. Vale a ressalva que a tela utilizada na IIT tem uma largura de 1080 pixels, respeitando uma proporção de 16:9.

Na área 1 encontra-se o menu principal, responsáveis pelas operações principais da IIT. Na área 2 encontra-se a área de visualização de camadas relativas ao mapa principal, localizado na área 3. Por fim, a área 4 está destinada à informações adjacentes às operações principais.

1 3 4

2

Figura 30 – Wireframe da IIT.

(1 - Menu de operações, 2 - Mostrador de camadas, 3 - Área principal, 4 - Mostrador de informações adjacentes).

• Visualidade e formalização da interface

Etapa relativa à formalização da interface no que diz respeito à sua visualidade. Este é o ponto em que se encontram as informações e os elementos de linguagem que as expressam, concretizando assim os conceitos, formas e funções determinadas como requisitos do projeto. Nesta atividade que se dá expressivamente a apresentação das informações por meio da interface.

estética que expresse adequadamente o conteúdo da interface, foram utilizadas técnicas de elaboração de ‘personagem símbolo’ (ou persona), ‘inspiração focal’ baseada em mapas esquemático-visuais de informação – técnica associada aos requisitos definidos para a IIT, e por fim, utilizou-se da técnica de ‘painéis semânticos’, conforme apresentado a seguir.

-­‐ Painel semântico

Como discutido, o painel semântico se utiliza de composições de imagens contendo elementos visuais diversos para utilização como referência de seus traços mais marcantes, sejam formais, cromáticos ou compositivos. O desenvolvimento de painéis semânticos ocorreu por meio da definição de adjetivos que compõem o conceito almejado para a IIT, sendo eles: simples, limpo, articulado e dinâmico.

O painel desenvolvido para a IIT (Figura 31) procura reunir as representações gráficas das interfaces criadas para dispositivos com tecnologia de multitoques que mais se relacionam com os conceitos predeterminados, como um caso de benchmarking70_{. O conjunto de imagens utilizadas associa interfaces para} artefatos diversos, e ainda peças gráficas conceituais compostas por ícones e gráficos, objetivando o entendimento e a relação de cultural visual associado a este tipo de contexto.

70

No presente contexto, entende-se que benchmarking é uma técnica de avaliação de produtos similares em vista de captura de elementos desejáveis em uma nova concepção.

Figura 31 – Painel semântico construído para o projeto do IIT.

Como resultado da elaboração do painel semântico principal, tem-se um painel em formato internacional (ISO), tamanho A3, que pode ser visto em tamanho real no Apêndice G. Como resultado da análise do painel semântico principal da IIT, observa-se orientações compositivas relacionadas a: i) uma paleta de cores predominantes, ii) uma identidade visual, delimitando elementos icônicos e elementos estruturais e, iii) uma caracterização tipográfica para definição de família tipográfica a ser utilizada na IIT. Em resumo, tem-se como resultado da técnica do painel semântico uma paleta de cores, os grafismos e a tipografia da IIT. Para uma verificação de maior apuro, foram elaborados painéis semânticos adjacentes, conforme apresenta-se a seguir:

a) Paleta de cores

O processo para a obtenção da paleta de cores para a IIT se deu a partir a observação de recorrência do uso de determinado padrão de cores nas imagens constituintes do painel semântico (Figura 32). Matizes mais relevantes foram definidas como base da composição de uma paleta própria para o projeto.

As cores das imagens no painel semântico apresentam dois padrões com maior recorrência: um primeiro que atua como fundo das interfaces, sendo geralmente em tons que não concorrem em atenção com o conteúdo da informação principal, e um segundo, com tons mais acentuados quando da demarcação, apresentação ou indicação do conteúdo.

Em adicional, observa-se que as cores encontradas nas imagens, de modo geral, têm baixa saturação quando utilizadas em elementos complementares, de transição ou simbólicos – indicativos de inatividade ou nível secundário de importância. Observa-se ainda o uso de diferentes tons de uma mesma matiz, e ainda matizes distintas em uma só superfície, muitas vezes usadas como indicadores de categorias ou de etiquetas (Ex.: o mesmo vermelho usado na representação gráfica é usado em sua legenda). O isolamento de cores relativas ao processo de obtenção da paleta de cores para a IIT, e seu processamento pode ser observado nas imagens a seguir (Figura 32 e Figura 33).

Figura 32 – Processo de obtenção da paleta de cores na etapa 1.

Este processo se deu inicialmente pela obtenção de base cromática para uma primeira gama de cores (Figura 33, à esquerda), e em um segundo momento, após a seleção de tons que se diferenciem com maior contraste, houve a racionalização de uma segunda paleta (Figura 33, à direita), utilizada como referência para a paleta final

A paleta de cores final (Figura 34) desenvolvida para a IIT, possui um total de seis matizes com três variações tonais de cada, acrescida de um conjunto de tons de cinza até se chegar ao preto, para utilização nos elementos de fundo, secundários ou textuais, conforme necessidade apreendida durante a pesquisa.

Considerando-se os requisitos em relação ao suporte da IIT, nomeadamente uma tela de emissão de luz, que utiliza ‘cor luz’, utilizou-se de padrões notórios para aplicação cromática – RGB e hexadecimal, conforme apresentado na Tabela 8.Error! Reference source not found.  

Tabela 8 – Indicação sistemática de cores da paleta com códigos RGB e Hexadecimal. Cor nº1 R: 145 G: 5 B: 115 Hexadecimal # 910573 Cor nº 4 R: 15 G: 80 B: 110 Hexadecimal #0F506E Cor nº 7 R: 60 G: 110 B: 95 Hexadecimal #3C6E5F Cor nº 10 R: 100 G: 125 B: 40 Hexadecimal #647D28 Cor nº 13 R: 255 G: 140 B: 0 Hexadecimal # FF8C00 Cor nº 16 R: 165 G: 30 B: 5 Hexadecimal # A51E05 Cor nº 19 R: 140 G: 140 B: 140 Hexadecimal # 8C8C8C Cor nº 22 R: 0 G: 0 B: 0 Hexadecimal #000000 Cor nº 2 R: 195 G: 5 B: 80 Hexadecimal # C30550 Cor nº 5 R: 30 G: 140 B: 155 Hexadecimal #1E8C9B Cor nº 8 R: 110 G: 175 B: 155 Hexadecimal #6EAF9B Cor nº 11 R: 180 G: 210 B: 45 Hexadecimal #B4D22D Cor nº 14 R: 245 G: 295 B: 30 Hexadecimal # F5C31E Cor nº 17 R: 220 G: 15 B: 5 Hexadecimal # DC0F05 Cor nº 20 R: 199 G: 199 B: 199 Hexadecimal # C7C7C7 Cor nº 23 R: 50 G: 50 B: 50 Hexadecimal # 323232 Cor nº 3 R: 215 G: 55 B: 130 Hexadecimal # D73782 Cor nº 6 R: 5 G: 220 B: 210 Hexadecimal #05DCD2 Cor nº 9 R: 155 G: 210 B: 195 Hexadecimal #9BD2C3 Cor nº 12 R: 205 G: 255 B: 0 Hexadecimal #CDFF00 Cor nº 15 R: 255 G: 220 B: 0 Hexadecimal # FFDC00 Cor nº 18 R: 255 G: 25 B: 5 Hexadecimal # FF1905 Cor nº 21 R: 225 G: 225 B: 225 Hexadecimal #E1E1E1 Cor nº 24 R: 105 G: 105 B: 105 Hexadecimal # 696969 b) Tipografia

O processo de construção do levantamento tipográfico, sistematizado pela definição dos requisitos, também ocorreu por meio da mesma técnica de painel semântico. Em vista de se ter uma melhor especificação, foi elaborado um painel adjacente, com imagens da mesma natureza do painel principal, porém focado nas tipografias utilizadas em interfaces gráficas (Figura 35).

Após sua construção, foi possível efetuar uma análise das fontes tipográficas empregues nas interfaces de contextos similares ou requeridos pelo projeto da IIT. Este estudo permitiu a definição de características fundamentais ao desenvolvimento da IIT. Em geral, a interfaces analisadas usam fontes de caráter essencialmente funcional, sem serifas e com poucos adornos, validando a verificação ocorrida na análise de similares. Ainda no painel semântico adjacente utilizado para a tipografia, observa-se o uso de pesos distintos de uma mesma família tipográfica em uma mesma interface, sendo este por um fator relevante na determinação de famílias tipográficas para análise sequente e uso na IIT. Como

determinado nos requisitos da IIT, também são condicionais as características próprias para uso em tela emissora de luz.

Figura 35 – Painel semântico (tipográfico) para a IIT.

no caso a tela, devem seguir orientações rigorosas. Assim sendo, utiliza-se das teorias de Bringhurst (2005, p. 226), que indica o uso específico de fontes que são desenvolvidas para este fim a partir de hints, escrevendo que

Hints [dicas ou instruções] digitais são importantes sobretudo para definir o

modo como o tipo aparecerá na tela. Falando de um modo geral, existem dois tipos de hints: os genéricos, que são aplicados a toda a fonte, e os específicos, que são aplicados apenas a caracteres individuais. (...) Fazer

hints manualmente é tedioso ao extremo, mas qualquer bom editor de

fontes recente inclui rotinas automáticas para a tarefa. Elas são suficientes para transformar fontes com hints insatisfatórios em fontes mais legíveis para a tela.

Ainda sobre a utilização de fontes desenvolvidas para a utilização em tela, é importante salientar que

No nível mais básico, hinting (ou, mais acuradamente, instrução) é um método que define exatamente quais pixels são ligados em função de criar a melhor forma bitmap de caractere em tamanhos pequenos e baixas resoluções.71 (MICROSOFT TYPOGRAPHY, 1997)

Biľak (2010) escreve que hinting, ou otimização para tela, é o processo por meio do qual fontes são ajustadas para a máxima legibilidade em monitores de computador. Sendo assim, as considerações sobre a otimização de fontes tipográficas para telas (hinting) são aspecto essencial para a definição tipográfica para a IIT.

Após uma busca em bancos de fontes (gratuitas)72_{, foram pré-selecionadas}

três famílias tipográficas, que além de atenderem aos requisitos do projeto e o aferimento efetivado pelo painel semântico adjacente (tipográfico), são fontes otimizadas para baixas resoluções e tamanhos distintos de tela, são elas: a Open Sans, a Lato e a Quattrocento Sans.

A fonte ‘Open Sans’ (Figura 36), projetada por Steve Matteson, é desde outubro de 2012, a família tipográfica utilizada pelo WordPress – uma ferramenta do tipo CMS73_{, de código aberto, amplamente utilizada para publicações digitais na}

71 _{Tradução nossa.} 72

Google Web Fonts <http://www.google.com/fonts>, Font Squirrel <http://www.fontsquirrel.com> e similares.

web (KRISTA, 2012). Esta fonte também utilizada pela página “About” da empresa Google74_{. Observa-se que a família tipográfica Open Sans tem uma extensa}

quantidade de caracteres (879) em sua versão oferecida pelo ‘Google Web Fonts’75_,

além de treze versões.

Figura 36 – Fonte Open Sans.

A fonte ‘Lato’ (

Figura 37) foi criada por Łukasz Dziedzic da tyPoland em cinco pesos e um itálico para cada um deles. Sua proposta original consistia em ser uma boa fonte tanto para textos em tamanhos menores quanto para títulos e subtítulos (DZIEDZIC; TWARDOCH, 2011). A fonte ‘Quattrocento Sans’ (Figura 38) foi criada por Pablo Impallari e possui quatro pesos (IMPALLARI, 2012).

74 _{Disponível em: <http://www.google.com/fonts/#AboutPlace:about>. Acesso em: 22/10/2013.} 75 _{Disponível em: <http://www.google.com/webfonts/specimen/Open+Sans>. Acesso em 20/01/2013.}

Figura 37 – Fonte Lato. Figura 38 – Fonte Quattrocento Sans.

Em uma segunda fase de análise, foi definida a família tipográfica Open Sans, pois ela atende aos requisitos estipulados (quantidade de pesos, otimização para tela, existência de caracteres especiais, ausência de serifa e simplicidade) de modo mais adequado em relação às demais.

c) Grafismos

Seguindo a atividade de elaboração de painéis semânticos, assim como a especificação utilizada para o estudo tipográfico, foi desenvolvido um terceiro painel adjacente com imagens da mesma natureza do painel principal, porém, focado nas formas e marcas visuais utilizadas em interfaces gráficas, em vista de se identificar padrões de grafismos a serem utilizados na IIT, e que tenha afinidade visual com o conteúdo a ser utilizado pelo artefato (Figura 39).

Como resultado da análise do painel de grafismos, observa-se com predominância no uso de marcas e formas gráficas (grafismos compositivos) geométricas básicas (triângulo, círculo, quadrado) para as estruturas visuais repetidas em toda a interface. Esta característica é recorrente também em gráficos e menus (circulares, retangulares e/ou com bordas arredondadas), e em elementos de ligação com linhas que reforçam a existência de relação entre elementos. É destacável ainda o uso constante de estruturas ortogonais com espaços proporcionais entre os variados elementos. Observa-se ainda que a cor ganha função de agrupamento e distinção entre elementos, ou planos distintos de conteúdo, como áreas distintas de interfaces, botões ou menus de operação.

Adicionalmente, nota-se a recorrência significativa do uso de iconografia geométrica, composta, modo geral, pela soma de formas geométricas básicas. Também é recorrente nas diversas interfaces o uso de representações similares entre si, em relação aos ícones operativos (Ex.: para funções relativas ao envio de e-mail e mensagens é utilizada como figura-padrão um envelope de cartas; para configurações de sistema, modo geral, são representadas por uma engrenagem; para acesso aos contatos, são usadas uma ou duas figuras humanas, entre outros).

A descrição dos parâmetros elencada por esse estudo, em associação com a lista de requisitos, permitem o direcionamento da geração de alternativa da IIT, conforme segue:

§ Geração de alternativas

A geração de alternativas trata da proposição de soluções que atendam às demandas definidas, em âmbito global e específico. Nesta fase do projeto já existem insumos da pesquisa de conhecimento do objeto, apresentada na lista de requisitos, e ainda definições sobre os padrões gráficos, cromáticos e tipográficos

que possibilitam uma geração de soluções possíveis. A partir destes insumos efetua-se a proposição efetiva de alternativas da IIT, conforme apresentado globalmente a seguir, onde condensou-se o processo em duas fases de gerações, precedidas de uma prototipação rápida para estudo de interação e relacionamentos de elementos da interface.

• Geração – fase 1

Com base nos parâmetros estipulados para o projeto, iniciou-se uma geração de alternativa para configuração da informação em interface. A atividade se orientou inicialmente pela elaboração de uma identidade visual, nomeadamente no que tange o desenvolvimento de uma marca para a IIT, que buscou se ater aos conceitos estipulados, e com isso, apresentando uma forma simples e que remete diretamente ao uso de toques, conforme (Figura 40) – Imagem da esquerda com desenho inicial, e imagem da direita com estudo de peso em vista de adequações e formação de estilo adequado ao conceito. Foram ainda estudadas aplicações de versionamento e subcategorias para a mesma (Figura 41).

1. Lettering

2. Versionamento/indicação extra 3. Nome do projeto (usando uma

tipografia auxiliar)

Figura 41 – Aplicação da marca proposta para o projeto na fase 1 da geração de alternativa.

Uma prototipação nesta fase do projeto, tem como função o auxílio e a validação das ideias geradas por meio de sua tangibilização, o que implica na passagem do campo ideário para o material, de modo a representar uma realidade – mesmo que simplificadamente – e propiciar validações. (VIANNA et al, 2012)

Sob esta consideração, elaborou-se em paralelo um protótipo rápido em papel para estudo de possibilidade de operação na interface, além de uma verificação sobre a ocorrência de relacionamentos entre os elementos da interface (Figura 42). Nesta atividade também foram estudadas as opções de grid aplicadas ao conteúdo em meio à interação. Foram ainda desenvolvidos posteriormente, protótipos volumétricos rápidos, mais detalhados, em vista se validar ideias para aprimoramentos (Apêndice H).

Figura 42 – Protótipo rápido em papel.

Em relação à interface do sistema, e de acordo com os estudos efetuados em relação ao conteúdo e às interfaces similares, partiu-se inicialmente para uma configuração que se utiliza de uma modulação em três partes para sua composição dos blocos de informação (Figura 43).

A composição da interface do sistema segue aos padrões definidos em relação à sua forma e função, utilizando formas simples (geométricas), padrões monocromáticas, grid com ‘espaços em branco’ generosos, visando privilegiar a interação, a visualização do conteúdo e as funcionalidades do sistema (Figura 44 e Figura 45).

Figura 44 – Padrões formais do sistema.

Figura 45 – Geração de alternativas formais aplicadas ao menu operativos.

As cores designadas à interface seguem essencialmente dois padrões, obedecendo à paleta de cores designada pela lista de requisitos e detalhadas a partir do painel semântico. A primeira e mais sóbria, em tons de cinza e cores menos saturadas, sendo utilizada para menus e área de trabalho (palco). Menus e mostradores (displays) mantêm-se em tons de cinza (monocromáticos) distintos

da área de trabalho de modo a fazer distinção com o fundo (Figura 46).

Figura 46 – Exemplo de interface gerada na primeira fase da geração de alternativas.

Adicionalmente, conforme demanda do projeto, também fora geradas alternativas para os ícones de suporte à interação na IIT (Figura 47).

Figura 47 – Geração de alternativas para ícones da IIT.