Esquemas estruturais da interface 69 !

Com vista a uma abordagem prática e célere, o desenvolvimento da interface foi precedido apenas por esquemas simples da sua estrutura, que se provaram suficientes para proceder à concepção visual.

Considerou-se pertinente a elaboração de três esquemas:  Esquema principal, comum a diversas áreas;

 Esquema de plano, orientado aos requisitos específicos dessas áreas;  Esquema monolítico, desprovido de conteúdos auxiliares.

6.8.1.1. Esquema principal

Este esquema foi aplicado à listas de planos e de modelos, bem como à área de edição de modelo. A navegação principal e rodapé são elementos comuns a todos os esquemas concebidos.

Figura 12 – Esquema da estrutura principal da interface

Tendo por base os resultados de estudos centrados no movimento ocular face a ecrãs, Galitz (2007) recomenda que os itens mais importantes e utilizados com maior frequência se situem no canto superior esquerdo da interface, sugerindo um fluxo de apreensão de elementos visuais de cima para baixo, da esquerda para a direita. Nielsen (2006) registou o movimento ocular de 232 utilizadores face a diversos websites e conclu- iu que estes apresentam um padrão de leitura em F, formando duas linhas horizontais de movimento ocular na metade superior do ecrã, seguidas por uma linha vertical.

Com as considerações anteriores em mente, estipulou-se uma barra de navega- ção horizontal situada no topo do ecrã. Esta solução apresenta a vantagem de consumir um espaço mínimo da interface, reservando maior área útil para os conteúdos de cada seção. A desvantagem desta abordagem é o limite imposto ao número de itens de menu (com vista a evitar uso de mais que uma linha); no caso do serviço PNO, o número de itens a apresentar mostrou-se diminuto e exequível nestas restrições.

Como complemento ao requisito de navegabilidade (ver 6.6.10), reservou-se um espaço para breadcrumbs40_{. Trata-se de uma metáfora para a marcação de pontos-}

chave de um percurso através de “migalhas”, com vista a retomar o caminho de volta através das mesmas. De notar que este percurso não constitui realmente um histórico, assemelhando-se mais a uma hierarquia de conteúdos. Nielsen (2007) destaca as se- guintes qualidades nas breadcrumbs:

 Mostram ao utilizador a sua localização atual relativamente à hierarquia de con- teúdos do site;

 Com recurso a apenas um clique, possibilitam o acesso imediato a níveis ascen- dentes ou passos anteriores, resgatando os utilizadores de destinos inapropria- dos aos seus objetivos;

 Podem vir a ser ignoradas pelos utilizadores, mas raramente suscitam proble- mas de interpretação ou operacionalização durante testes de usabilidade;  Ocupam um espaço diminuto na página.

O autor salienta também que este elemento tem vindo a revelar-se cada vez mais popular, tendo sido adoptado com consistência transversal a diversos websites. As bre- adcrumbs são frequentemente apresentadas como uma linha horizontal composta por hiperligações textuais separadas por uma marca ou símbolo que salienta a sua hierar- quia (exemplos: “>”, “»”, “/” ou “→”). Esta hierarquia tende a iniciar-se pela página inicial do site (Homepage) e terminar na página atual.

Atribui-se às breadcrumbs uma posição privilegiada na interface, seguidamente à navegação principal, almejando que o primeiro vislumbre do ecrã situe imediatamente o utilizador na aplicação.

Figura 13 - Exemplos de Breadcrumbs na área de modelos e na área de plano

O rodapé constitui um elemento muito discreto e minoritário da interface. O seu único objetivo é apresentar os créditos do projeto e fornecer contatos imediatos, comuns a todas as áreas. Posto isto, reservou-se o espaço de menor destaque na interface: uma barra horizontal no canto inferior do ecrã, com altura inferior à da barra de navegação principal.

As barras de navegação principal e de rodapé são de posicionamento fixo face à janela do browser. Este aspeto permite que a navegação principal esteja sempre disponí- vel e visível, independentemente da extensão dos conteúdos.

Com vista a abarcar simultaneamente conteúdos principais extensos e conteúdos auxiliares (tais como ajuda contextualizada), definiu-se que todo o espaço restante de ecrã deveria ser utilizado pela interface. Para tal, considerou-se um composição fluída, de

dimensões flexíveis. Optou-se comprimento equivalente a 100% do comprimento da janela do browser, respeitando duas condições:

 Comprimento máximo de 1500px (no caso de ecrãs com resoluções superio- res) de forma a que o utilizador não tenha de orientar a sua cabeça da esquerda para a direita para ler parágrafos extensos; a leitura completa de conteúdos deve conseguir efetuar-se por recurso exclusivo a movimentos oculares; quando apli- cável, a interface assumirá o comprimento máximo estipulado e apresentar-se-á centrada na janela do browser;

 Comprimento mínimo de 960px (no caso de ecrãs com resoluções inferiores ou janelas redimensionadas) para assegurar que a navegação e área de conte- údos principais detém o comprimento mínimo necessário para exibir os seus objetos sem danificar a legibilidade e posicionamento espacial definido para os mesmos.

Os conteúdos principais respeitam o fluxo de leitura, estando posicionados à esquerda. Esta área detém inicialmente 55% do comprimento total da interface, enquan- to os conteúdos auxiliares se encontram à direita ocupando os restantes 45%. As proporções iniciais foram escolhas empíricas baseadas em experiências informais com diferentes tipos de conteúdos em ambas as colunas.

As funcionalidades interativas da interface final permitem ao utilizador arrastar a separatriz entre os conteúdos principais e auxiliares, por forma a distribuir as dimensões da forma que melhor satisfizer as suas necessidades. O utilizador pode inclusive clicar na separatriz para esconder os conteúdos auxiliares.

6.8.1.2. Esquema de plano

Os esquema de plano é muito similar ao esquema principal, complementando-o com elementos necessários às funcionalidades específicas desta área.

Figura 14 - Esquema da interface na área de Plano

A diferença fulcral reside na área de conteúdos principais, que carece de elemen- tos específicos para identificação do plano e disposição das operações recorrentes dessa área.

A Figura 13 apresenta o elemento de breadcrumbs em diferentes contextos. No contexto do plano, este elemento concerne a hierarquia de componentes do plano, considerando sempre o índice do plano como origem do percurso. A hierarquia pode ser complementada pela ação atual – caso o utilizador esteja no modo de edição de uma componente.

A área de conteúdo auxiliar detém dois propósitos distintos no contexto do plano: 1) fornecer um meio auxiliar de navegação entre as componentes do plano e 2) ajudar ao preenchimento da componente selecionada.

Desta forma, assume-se que a navegação secundária – semelhante a um índice remissivo – encontrar-se-á à direita, quando disponível. Esta decisão mantém o foco no conteúdo principal e favorece o acesso à navegação secundária por parte de utilizadores que utilizem predominantemente a mão direita para interagir.

6.8.1.3. Esquema monolítico

A vertente monolítica deste esquema prende-se apenas com a área de conteúdos e foi empregue em seções com conteúdos diminutos que dispensassem conteúdos auxilia- res.

Figura 15 - Esquema monolítico da interface

A área de conteúdos deste esquema ocupa 33% do comprimento total da interface e foi aplicada em seções como o perfil de utilizador, definições de conta e lista de tarefas de teste (visível a utilizadores autenticados durante a avaliação do serviço).