Design

ENG. de Software – Arquitetura da informação e User Experiense –  Design

O mapeamento do design visual

Agora que já temos o site devidamente estruturado, cabe a nós mapeá-lo em um design visual, contando com várias ferramentas disponíveis.

Essa tarefa consiste em criar os modelos de layout que definirão estrutura e organização do site levando em consideração a sua aparência quando de seu acesso. Esses modelos serão a combinação dos grids de layout (padrões que descrevem as páginas web) com esboços de design.

Nessa fase é importante tratar do conteúdo, dando ênfase a cada página, definir os blocos de espaços para a navegação e também cuidar da integração de todos os objetos do site. Alguns elementos devem ter destaque como o logotipo da empresa, espaços destinados à publicidade etc. O conteúdo do site deve ser organizado de forma consistente em um grid que contemple a resolução dos navegadores.

A diagramação do site

Na diagramação do site deve-se levar em consideração a estruturação de todos os elementos que comporão o layout de forma clara, o que garante um fácil entendimento. Nesse caso é interessante criar uma aparência estética que cause uma boa impressão logo no acesso à página principal.

Todos os elementos visuais devem ser unidos de forma a transmitir a informação desejada de acordo com um conjunto de regras adotadas que serão guias para a distribuição desses elementos. Dessa forma, garantiremos clareza e eficiência na transmissão da informação que o site deseja oferecer.

O design visual do site

Eis alguns elementos que são fundamentais no design visual do site:

• Margens

Devem ser utilizadas com informações secundárias sem sobrecarregar o layout.

• Guia horizontal

Deve ser utilizada para o alinhamento e a orientação de textos.

• Colunas

Representam os alinhamentos verticais.

• Módulos

São, normalmente, unidades de espaços de tamanho iguais que podem ser repetidas pela página.

• Zonas especiais

São grupos de módulos que são destinados a informações específicas.

• Marcadores

São indicadores para textos secundários ou informações adicionais.

Deve-se levar em consideração a criação de uma identidade visual que tem como objetivo criar um design gráfico que permita ao usuário identificar as informações que o site quer divulgar.

É preciso ficar bem claro que o webdesigner participa da equipe de desenvolvimento, mas não é o arquiteto da informação.

O arquiteto da informação

O arquiteto, após análise dos tipos das informações que comporão os sites, contará com diversos profissionais no processo, os quais seguirão as suas orientações com relação à forma de dispor o conteúdo no site.

Os processos de animações, design propriamente dito e codificação ficam a cargo de profissionais específicos, mas cabe ao arquiteto da informação determinar e supervisionar esse trabalho, pois sua preocupação refere-se à informação, com o intuito de não alterar sua característica conforme o projeto e os requisitos do usuário.

Com relação à programação, o arquiteto também faz uma análise visando escolher aquela que mais se enquadra para a geração da informação, uma vez que softwares têm características diferentes e geram arquivos diferentes, sendo interessante que a estrutura inicial projetada seja mantida.

A internet como forma de divulgação

Embora várias empresas usem a internet como forma de propaganda de seus produtos ou serviços, é importante frisar que nem sempre os sites serão para propaganda, e sim uma forma de divulgação de produtos ou serviços de uma empresa – da mesma forma que seria se o cliente fosse à loja para conhecer suas dependências.

Os publicitários, de maneira geral, acham que a embalagem vende por si só, ou seja, dando uma roupagem adequada ao produto, a embalagem passa a ser mais importante que o próprio produto. Esse é o diferencial de uma “propaganda”. Nesses casos, cores e modelos são fundamentais para a criação das embalagens.

Com relação à uma aplicação na web, a embalagem serão as páginas que deverão ser compostas de formas e cores, obedecendo características de organização, que é dona do site, mas deixando visível tudo que for importante para que o usuário possa ver, reconhecer e se sentir “convidado a entrar”.

Como a marca de um produto está diretamente associada ao rosto de uma pessoa, por exemplo, ela acaba se tornando/criando uma primeira impressão para a pessoa. Esse deve ser o pensamento, ao se preparar o design visual de um site, de forma a “marcar” no usuário a intenção do dono do site e pensando seus produtos ou serviços, enfim a proposta do site.

Outro fator importante é a questão de acompanhar certas tendências que, de certa forma, ditam os estilos de design, tal como uma moda do vestuário. Manter uma tendência pode ser interessante para que o site seja moderno, mas exibindo as informações de acordo com a intenção do cliente.

A tendência atual para os sites

Atualmente a tendência aponta para sites mais limpos, com menos espaços destinados a conteúdo delimitado por enquadramento, que não sejam carregados com animações e efeitos especiais e utilizam linguagens mais simples, porém com recursos necessários para a obtenção do efeito desejado.

O uso de menus pode ser interessante, uma vez que mostra as opções do site e dá ao usuário uma noção do conteúdo que o site apresenta.

Outro fator importante que o arquiteto da informação pode explorar é o uso de rodapés que contenham informações em um espaço que não comprometa o conteúdo da página.

Atualmente a tendência aponta para sites mais limpos, com menos espaços destinados a conteúdo delimitado por enquadramento, que não sejam carregados com animações e efeitos especiais e utilizam linguagens mais simples, porém com recursos necessários para a obtenção do efeito desejado.

O uso de menus pode ser interessante, uma vez que mostra as opções do site e dá ao usuário uma noção do conteúdo que o site apresenta.

Outro fator importante que o arquiteto da informação pode explorar é o uso de rodapés que contenham informações em um espaço que não comprometa o conteúdo da página.

Aspectos de percepção

Alinhamento

Com relação ao alinhamento, não existe uma regra geral que determine uma forma, mas o ideal é que se mantenha o mesmo tipo de alinhamento nas páginas (à direita, esquerda, centralizado ou justificado). Normalmente, é usado o alinhamento à esquerda.

Proximidade

Proximidade representa manter juntos ou próximos elementos de mesmo conteúdo.

Repetição

Repetição é a forma de criar as páginas parecidas para que o usuário tenha a percepção de estar no mesmo site.

Contraste

O contraste significa a importância dos objetos dentro da página, obedecendo-se a uma hierarquia entre as informações.

Aspectos semânticos

Esses aspectos estão relacionados ao design físico de conteúdo e à interação do usuário com as páginas e envolve texto, janelas e aparência.

Com relação aos textos, os aspectos semânticos tratam do texto propriamente dito e do espaço que ele ocupa nas áreas delimitadas, como densidade do texto e densidade da tela. Sendo vários os níveis de usuários, é importante que haja opções para todos os tipos; o conteúdo deve ser apresentado, portanto, considerando-se esses tipos. Sobre as janelas, é importante determinar o layout com base nos diferentes objetos que serão apresentados nas telas, garantindo a funcionalidade das janelas:

• Navegação – determina a direção para o usuário;
• Organização – organiza as informações em regiões;
• Explicação – orienta por meio de explicações;
• Metáfora – representa as informações por meio de símbolos.

Modelos de páginas

Aplicar um modelo de página significa escolher a melhor forma de distribuir as informações e também os esquemas de cores das páginas principal e secundárias.

As navegações também deverão ser contempladas para aplicação do modelo. E deve-se ter atenção quanto às ferramentas que serão usadas para aplicação do modelo, ressalta-se.

Algumas ações devem ser levadas em consideração para os modelos:

• Estilo das páginas;
• Estilo de navegação;
• Frames, tabelas, rodapés;
• Imagens, vídeos, texto.

Um dos princípios básicos da arquitetura da informação é desenhar espaços informacionais que possibilitem o compartilhamento de informações, atendendo as necessidades do usuário, respeitando suas condições de trabalho e mantendo as características da empresa conforme ilustração.

O planejamento estratégico como gestão do conhecimento se preocupa com a definição de políticas, cultura, missão, valores e visão da organização, definindo diretrizes, objetivos e requisitos do sistema e analisando as necessidades de informação dos clientes.

A arquitetura da informação analisa os objetivos da organização, os requisitos e a política da informação definidos pelos usuários (no caso, os gestores da empresa). Para tal, é necessário especificar os requisitos para o projeto do sistema a ser implantado.

Processos acerca da criação de páginas

CRIAÇÃO E PRODUÇÃO

É importante desenvolver espaços de informação de forma a estimular e sistematizar a criação, a produção e a especificação de requisitos de conteúdo.

IDENTIFICAÇÃO E MAPEAMENTO

É o momento de analisar as informações mapeadas desenvolvendo métodos e técnicas para identificar os conhecimentos e as fontes de informação.

COLETA

Devem-se identificar as metodologias definidas utilizando-se ferramentas e técnicas para capturar e formalizar as informações.

SELEÇÃO E VALIDAÇÃO

Significa definir os instrumentos de análise da qualidade da informação.

TRATAMENTO

É importante definir métodos e técnicas de representação, organização e armazenamento das informações conforme políticas predefinidas.

COMUNICAÇÃO

Desenvolver sistemas de recuperação da informação e de interfaces de comunicação com todos que participarem do ambiente.

APLICAÇÃO

Desenvolver e implementar as melhorias idealizadas em processos que representem garantias de divulgação de informação.

AVALIAÇÃO

Armazenar os indicadores de uso, de desempenho e satisfação predefinidos, desenvolvendo ferramentas de avaliação e extração de indicadores.

A arquitetura da informação como gestão do conhecimento tem a finalidade de:

• Organizar e recuperar informações;
• Padronizar e integrar os dados;
• Racionalizar recursos;
• Melhorar a prestação de serviços;
• Aprimorar a comunicação interna;
• Criar redes de conhecimento.

Ferramentas de projeto

O arquiteto da informação tem a necessidade de gerenciar conteúdos; para isso existe uma gama de ferramentas que melhorarão a arquitetura de informação em uma aplicação, abordando o lado técnico desse gerenciamento abrangendo hospedagem, instalação, upgrades, extensões, ampliação e otimização.

Ao preparar o ambiente de uma aplicação web, o arquiteto, como já foi visto em outras aulas, deve se preocupar em como as informações serão fornecidas e em como o usuário poderá manipular as formas de acessar e visualizar o que procura.

O projeto de design cuida da aparência de forma a facilitar o arranjo das mais diversas informações que serão visualizadas. Aplicativos permitem a diagramação e a arrumação do ambiente para o usuário, deve ser lembrado.

Ferramentas de arquitetura de informação

Não podemos esquecer que muitas informações juntas podem levar ao que se chama “teoria do caos”. Não deve existir o caos no ambiente informacional no momento em que o arquiteto da informação tem a necessidade de categorizar as informações a fim de evitar o acúmulo delas – em momento algum, a propósito.

Ferramentas de arquitetura de informação são fundamentais para assegurar o sucesso de um projeto de uma aplicação web. Selecionando a ferramenta apropriada e aproveitando ao máximo as suas capacidades, com certeza as necessidades do cliente serão atendidas.

Arquitetos de informação podem utilizar ferramentas diferentes em vários processos, mas o importante é a escolha daquelas que mais se adéquem à aplicação.

A classificação das informações

Existe a necessidade de atualização constante e de uma classificação, principalmente, com relação à busca e à disponibilização das informações. Para tal, há softwares específicos que se enquadram nas seguintes categorias:

• Classificação automatizada: são softwares que gerenciam determinadas regras que podem ser definidas pelos usuários ou por algoritmos e que permitem a indexação dos documentos de forma automática;
• Geração automatizada de categoria: são softwares que melhoram as regras que podem ser definidas pelos usuários ou por algoritmos gerando categorias e taxonomias de forma automática;
• Ferramentas de busca: são softwares que fornecem indexação integral de texto e busca no índice;
• Gerenciamento de tesauro: são ferramentas que dão suporte para desenvolvimento e manutenção de vocabulários e tesauros (uma lista de palavras com significados semelhantes dentro de um domínio específico de conhecimento);
• Filtragem colaborativa: são ferramentas destinadas às preferências do usuário que criam modelos e perfis para personalizar o sistema de organização e navegação;
• Soluções para portais: são ferramentas que fornecem soluções de portal a empreendimentos integrados;
• Gerenciamento de conteúdo: são softwares que gerenciam o fluxo de trabalho desde a autoria até a publicação;
• Analíticos: são softwares que analisam fontes de dados do público-alvo criando interações entre os usuários (mais voltados para campanhas de marketing, por exemplo);
• Gerenciamento de base de dados: ferramentas para gerenciar e fornecer acesso a dados estruturados.

O arquiteto da informação tem também a necessidade de estipular a importância dos elementos e como eles devem ser apresentados ao usuário e como será a interação. Por essa razão é interessante a criação de filtragem das informações que serão disponibilizadas utilizando-se wireframes.

Um wireframe é um guia visual básico usado em design de interface para sugerir a estrutura de um sítio web e relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface. Normalmente, wireframes são concluídos antes que qualquer trabalho artístico seja desenvolvido.

Veremos abaixo alguns exemplos de softwares utilizados para AI.

• Microsoft Visio: ferramenta de diagramação que consiste na criação de Sites de mapas na fase de planejamento;
• OmniGraffle: Ferramenta que cria fluxogramas, organogramas, diagramas de redes, projetos, layouts etc. que possam ser representados por símbolos e linhas de diagramação;
• PowerMapper: ferramenta adequada para mapear sites online ou offline com vários estilos de mapeamento disponíveis;
• SmartDraw: ferramenta de criação de mapas de sites com vários modelos disponíveis ou com opção de criação de um modelo próprio;
• Axure: ferramenta de prototipagem de interfaces que permite total interação do usuário. Nela são criados wireframes e se consegue por em prática a experiência que o usuário terá com o produto, antes mesmo da concepção de layout ou desenvolvimento, minimizando riscos e custos;
• Optimal Sort: ferramenta profissional de apoio a avaliações com usuários realizadas por meio da técnica de classificação/organização de cartões. Realiza efetivamente o card sorting (fechado ou aberto) online;
• Ethnio: ferramenta amigável para o recrutamento de pessoas a partir do site;
• FireShot: o Fireshot é uma extensão do Firefox que cria e edita screenshots (capturas de tela).

As ferramentas de desenvolvimento estão presentes em todo tipo de aplicação. Um projeto bem elaborado com recursos de Engenharia de Software, por exemplo, tem nas ferramentas um aliado para o sucesso da aplicação. Nas aplicações web o uso dessas ferramentas tende a tornar o site mais enxuto e com a garantia de manter a integridade do projeto desde sua concepção até a sua implementação.

ENG. de Software – Arquitetura da informação e User Experiense –  Design