Arquitetura de informação
O que é isso?
Segundo Renato Rosa, gerente de internet, a arquitetura de informação é a categorização, classificação, agrupamento e relacionamento de informações.
De acordo com o site Equipe3web, "a arquitetura da informação é um conceito que descreve sistemas nos seus mínimos detalhes, criando uma biblioteca para gerenciar o seu conteúdo, utilizando para isso um design estrutural de ambientes, metodologia de organização e etiquetagem de sites e sistemas online com o objetivo de transmitir de forma sucinta a informação e conteúdo. Proporcionando ao usuário uma experiência prazerosa durante a utilização no sistema, sugerindo um conteúdo mais relevante e criando as possibilidades para que encontre de forma rápida e clara a informação que busca".
Wireframes:
De acordo com o site Equipe3web, "a arquitetura da informação é um conceito que descreve sistemas nos seus mínimos detalhes, criando uma biblioteca para gerenciar o seu conteúdo, utilizando para isso um design estrutural de ambientes, metodologia de organização e etiquetagem de sites e sistemas online com o objetivo de transmitir de forma sucinta a informação e conteúdo. Proporcionando ao usuário uma experiência prazerosa durante a utilização no sistema, sugerindo um conteúdo mais relevante e criando as possibilidades para que encontre de forma rápida e clara a informação que busca".
Wireframes:
O wireframe é um elemento essencial para o trabalho do arquiteto de informação, pois tem como função, estruturar o conteúdo de cada página. Esta estrutura indicará o peso e a relevância de cada item que compõem o layout da página de web. Desde espaços para buscas, até os blocos de textos e fotos. É no wireframe que indicaremos o lugar correto de cada texto, breadcrumbs de navegacão, guidelines de marca e até os recursos de tecnologia a serem utilizados pela equipe de produção.
Até mesmo esta página, do blogspot, necessitou de um AI para determinar onde seria a caixa de texto, o botão "publicar postagem", "salvar agora", "visualizar", e todas as outras ferramentas que agora eu disponho, para escrever este texto.
Além da função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e o sistema. Para cada um dos passos de navegação na página web, deverá haver um wireframe diferente, com a especificação detalhada de todas as possibilidades de interação, e o caminho percorrido pelo usuário.
 |
| Modelo de wireframe |
Principais elementos de um wireframe:
* neste, o AI busca representar todos os elementos que compõem a página.
* imagens, textos, formulários, flash, mecanismos de busca, são representados por variações gráficas de elementos.
* Identidade e marca: é na construção do wireframe que o arquiteto vai garantir que todas as páginas mantenham uma unidade gráfica, padronizada e uma presença de marca relevante para o patrocimador do site, o cliente.
Um website raramente é uma ação isolada de uma empresa na tentativa de se comunicar com seu cliente, prestando serviços ou vendendo diretamente seus produtos. É muito importante que o site esteja, graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada nas demais ações na internet e mesmo nas mídias off-line, como jornais, revistas, tv, outdoor, PDV, etc. É claro que o web site deve seguir a identidade visual das demais peças e o objetivo individual de cada projeto, conjulgando unidade e autonomia de atuação.
O nome "wireframe", vem da junção de duas palavras em inglês: "wire" (linhas) e "frames"(ecrãs). Ou seja, são ecrãs de baixa resolução e com um aspecto gráfico muito pobre, que servem apenas para indicar onde devem estar localizados os objetos e os menus de interação. O wireframe serve para mostrar a funcionalidade e não o gráfico de uma aplicação.
Muitos especialistas dizem que não devemos usar a cor porque isso irá levantar questões nos clientes. Porém, podemos usar a cor para distinguir certos objetos da interação e zonas de aviso ao utilizador. Num ecrã a preto e branco, não é fácil distinguir se há zonas de alerta ou de aviso, e na fase de programação pode acontecer que essas zonas não sejam devidamente marcadas pelo programador. O objetivo do wireframe é ajudar o desenvolvedor de sistemas a entender o que o cliente está querendo, mostrando os requisitos funcionais de um sistema.
O wireframe seria então, um esqueleto do site, que deve ser feito antes de iniciar a montagem do layout com cores e imagens.
Fonte: http://www.ivogomes.com/blog/wireframes/
Os wireframes permitem, então, o desenvolvimento de variações de um layout, para manter a conscistência do design através do site. A criação de um conjunto de wireframes para um projeto também serve como um meio de comunicação com os clientes e os stakeholders, como os geradores de conteúdo, engenheiros e desenvolvedores. Para começar um wireframe, primeiramente é recomendado que se faça uma lista dos elementos que estarão presentes no website.
Fonte: http://pt.wikipedia.org/wiki/Website_wireframe
Usabilidade
Se tem uma palavra que o arquiteto de informação utiliza muito, é a palavra usabilidade. De acordo com Preece (2005, p. 35), "a usabilidade é geralmente considerada como o fator que assegura que os produtos são fáceis de usar, eficientes e agradáveis - da perspectiva do usuário. Implica otimizar as interações estabelecidas pelas pessoas com produtos interativos, de modo a permitir que realizem suas atividades no trabalho, na escola e em casa". Em resumo, a usabilidade é dividida nas seguintes etapas:
- ser eficaz no uso;
- ser eficiente no uso;
- ser segura no uso;
- ser de boa utilidade;
- ser fácil de aprender;
- ser fácil de lembrar como se usa.
Os princípios da usabilidade
Os princípios mais conhecidos referem-se a como determinar o que os usuários devem ver e fazer, quando realizam tarefas utilizando um produto interativo.
* visibilidade: quanto mais visíveis forem as funções, mas os usuários saberão como proceder. Por outro lado, quando as funções estão fora de alcance, torna-se mais difícil encontrá-las e saber como utilizá-las. Imagine os comando de um carro. A relação entre a maneira como os controles são dispostos no carro e o que eles realizam, facilita na hora de encontrar, com mais rapidez, o controle apropriado para cada tarefa.
* feedback: se refere ao retorno de informações a respeito de que ação foi feita e do que foi realizado, permitindo ao sujeito continuar a atividade. Utilizar o feedback da maneira certa, pode proporcionar a visibilidade necessária para a interação do usuário.
* restrições: refere-se a determinação das formas de delimitar o tipo de interação que pode ocorrer em um determinado momento. Existem várias maneiras de fazer isso. Uma prática comum no design de interfaces gráficas, consiste em desativar certas opções do menu, sombreando-as, restringindo as ações do usuário somente as permitidas naquele estágio da atividade. Podemos as dividir entre restrições físicas, lógicas ou culturais.
* mapeamento: refere-se a relação entre os controles e os e os efeitos no mundo. Quase todos os artefatos necessitam de algum tipo de mapeamento entre controles e efeitos, seja uma lanterna, um carro, uma usina hidrelétrica. Um exemplo de um bom mapeamento entre controles e efeitos são as setas utilizadas para representar o movimento para cima ou para baixo do cursor em um teclado de computador. O mapeamento da posição relativa dos controles e seus efeitos é também importante. Essa configuração está mapeada diretamente de acordo com as ações.
* consistência: refere-se a projetar interfaces de modo que tenham operações semelhantes e que utilizem elementos semelhantes para a realização de tarefas similares. Uma interface consistente é aquela que segue regras, tais como o uso da mesma operação para selecionar todos os objetos. Um dos benefícios de interfaces consistentes, é serem mais fáceis de aprender a usar. Os usuários aprendem apenas um único modo de operação aplicável a todos os objetos.
Preece (2005), afirma ainda, que existem princípios da usabilidade que também são chamados de heurística, quando utilizados como parte de uma avaliação. Em suma, o autor expõe-nos 10 princípios da usabilidade (sem contar dos anteriores).
1- Visibilidade do status do sistema: o sistema mantém os usuários sempre informados sobre o que está acontecendo, fornecendo um feedback adequado, dentro de um tempo razoável.
2- Compatibilidade do sistema com o mundo real: o sistema fala a linguagem do usuário, utilizando palavras, frases e conceitos familiares a ele, em vez de termos orientados ao sistema.
3- Controle do usuário e liberdade: fornece maneiras de permitir que os usuários saiam facilmente dos lugares inesperados que se encontram, utilizando "saídas de emergência" claramente identificadas.
4- Consistência e padrões: evita fazer com que os usuários tenham que pensar se palavras, situações ou ações diferentes significam a mesma coisa.
5- Ajuda os usuários a reconhecer, diagnosticar e recuperar-se de erros: utiliza linguagem simples para descrever a natureza do problema e sugere uma maneira de resolvê-lo.
6- Prevenção de erros: onde possível, impede a ocorrência de erros.
7- Reconhecimento em vez de memorização: tornar objetos, ações e opções visíveis.
8- Flexibilidade e eficiência de uso: fornece aceleradores invisíveis aos usuários enexperientes, os quais, no entanto, permitem aos mais experientes realizar tarefas com mais rapidez.
9- Estética e design minimalista: evita o uso de informações irrelevantes ou raramente necessárias.
10- Ajuda e documentação: fornece informações que podem ser facilmente encontradas e ajuda mediante uma série de passos concretos, que podem ser facilmente seguidos.
As fontes:
RobertJonathan.com.br: ótimo para entender um wireframe, como funciona e como fazer.
Ivogomes.com: explica sobre wireframes e nos oferece modelos.
Dey Alexander Consulting: oferece-nos artigos, em inglês, sobre wireframes.
Wireframe Showcase: site ótimo para perceber a importância do wireframe, e sua visualisação, em relação ao site já pronto.
Problemas de interpretação do wireframe: ótimo site para entender alguns problemas em relação ao wireframe.
O wireframe como parte essencial do projeto de websites
I ♥ wireframes
Fonte: http://www.ivogomes.com/blog/wireframes/
Os wireframes permitem, então, o desenvolvimento de variações de um layout, para manter a conscistência do design através do site. A criação de um conjunto de wireframes para um projeto também serve como um meio de comunicação com os clientes e os stakeholders, como os geradores de conteúdo, engenheiros e desenvolvedores. Para começar um wireframe, primeiramente é recomendado que se faça uma lista dos elementos que estarão presentes no website.
Fonte: http://pt.wikipedia.org/wiki/Website_wireframe
Usabilidade
Se tem uma palavra que o arquiteto de informação utiliza muito, é a palavra usabilidade. De acordo com Preece (2005, p. 35), "a usabilidade é geralmente considerada como o fator que assegura que os produtos são fáceis de usar, eficientes e agradáveis - da perspectiva do usuário. Implica otimizar as interações estabelecidas pelas pessoas com produtos interativos, de modo a permitir que realizem suas atividades no trabalho, na escola e em casa". Em resumo, a usabilidade é dividida nas seguintes etapas:
- ser eficaz no uso;
- ser eficiente no uso;
- ser segura no uso;
- ser de boa utilidade;
- ser fácil de aprender;
- ser fácil de lembrar como se usa.
Os princípios da usabilidade
Os princípios mais conhecidos referem-se a como determinar o que os usuários devem ver e fazer, quando realizam tarefas utilizando um produto interativo.
* visibilidade: quanto mais visíveis forem as funções, mas os usuários saberão como proceder. Por outro lado, quando as funções estão fora de alcance, torna-se mais difícil encontrá-las e saber como utilizá-las. Imagine os comando de um carro. A relação entre a maneira como os controles são dispostos no carro e o que eles realizam, facilita na hora de encontrar, com mais rapidez, o controle apropriado para cada tarefa.
* feedback: se refere ao retorno de informações a respeito de que ação foi feita e do que foi realizado, permitindo ao sujeito continuar a atividade. Utilizar o feedback da maneira certa, pode proporcionar a visibilidade necessária para a interação do usuário.
* restrições: refere-se a determinação das formas de delimitar o tipo de interação que pode ocorrer em um determinado momento. Existem várias maneiras de fazer isso. Uma prática comum no design de interfaces gráficas, consiste em desativar certas opções do menu, sombreando-as, restringindo as ações do usuário somente as permitidas naquele estágio da atividade. Podemos as dividir entre restrições físicas, lógicas ou culturais.
* mapeamento: refere-se a relação entre os controles e os e os efeitos no mundo. Quase todos os artefatos necessitam de algum tipo de mapeamento entre controles e efeitos, seja uma lanterna, um carro, uma usina hidrelétrica. Um exemplo de um bom mapeamento entre controles e efeitos são as setas utilizadas para representar o movimento para cima ou para baixo do cursor em um teclado de computador. O mapeamento da posição relativa dos controles e seus efeitos é também importante. Essa configuração está mapeada diretamente de acordo com as ações.
* consistência: refere-se a projetar interfaces de modo que tenham operações semelhantes e que utilizem elementos semelhantes para a realização de tarefas similares. Uma interface consistente é aquela que segue regras, tais como o uso da mesma operação para selecionar todos os objetos. Um dos benefícios de interfaces consistentes, é serem mais fáceis de aprender a usar. Os usuários aprendem apenas um único modo de operação aplicável a todos os objetos.
Preece (2005), afirma ainda, que existem princípios da usabilidade que também são chamados de heurística, quando utilizados como parte de uma avaliação. Em suma, o autor expõe-nos 10 princípios da usabilidade (sem contar dos anteriores).
1- Visibilidade do status do sistema: o sistema mantém os usuários sempre informados sobre o que está acontecendo, fornecendo um feedback adequado, dentro de um tempo razoável.
2- Compatibilidade do sistema com o mundo real: o sistema fala a linguagem do usuário, utilizando palavras, frases e conceitos familiares a ele, em vez de termos orientados ao sistema.
3- Controle do usuário e liberdade: fornece maneiras de permitir que os usuários saiam facilmente dos lugares inesperados que se encontram, utilizando "saídas de emergência" claramente identificadas.
4- Consistência e padrões: evita fazer com que os usuários tenham que pensar se palavras, situações ou ações diferentes significam a mesma coisa.
5- Ajuda os usuários a reconhecer, diagnosticar e recuperar-se de erros: utiliza linguagem simples para descrever a natureza do problema e sugere uma maneira de resolvê-lo.
6- Prevenção de erros: onde possível, impede a ocorrência de erros.
7- Reconhecimento em vez de memorização: tornar objetos, ações e opções visíveis.
8- Flexibilidade e eficiência de uso: fornece aceleradores invisíveis aos usuários enexperientes, os quais, no entanto, permitem aos mais experientes realizar tarefas com mais rapidez.
9- Estética e design minimalista: evita o uso de informações irrelevantes ou raramente necessárias.
10- Ajuda e documentação: fornece informações que podem ser facilmente encontradas e ajuda mediante uma série de passos concretos, que podem ser facilmente seguidos.
Oliveira (2009), fala sobre usabilidade, e afirma que, antes de tudo, devemos ter consciência, de que a análise da usabilidade, não cabe ao AI, mas pode ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura. Faz-se a análise da usabilidade, quando o site já está criado e produzido, e hospedado em um servidor com endereço específico. E assim, os envolvidos no projeto podem checar a eficiência do site em atender as expectativas do público alvo.
A contribuição do arquiteto para a usabilidade dá-se no momento da construção do wireframe, ao evitar conteúdos reduntantes e sobreposição destes, além de layouts complexos ou links escondidos.
O arquiteto deve prever, em sua documentação, alguns procedimentos de auxílio ao usuário do site, como maior rapidez de obtenção de resultados, supressão de etapas intermediárias, controle sobre o modo de exibição do conteúdo, menus, links, sempre visíveis, padronizados e intelegíveis, entre outros detalhes.
Fonte: http://www.layart.com.br/Wireframe-documento-cada-vez-mais-importante.htmlAs fontes:
RobertJonathan.com.br: ótimo para entender um wireframe, como funciona e como fazer.
Ivogomes.com: explica sobre wireframes e nos oferece modelos.
Dey Alexander Consulting: oferece-nos artigos, em inglês, sobre wireframes.
Wireframe Showcase: site ótimo para perceber a importância do wireframe, e sua visualisação, em relação ao site já pronto.
Problemas de interpretação do wireframe: ótimo site para entender alguns problemas em relação ao wireframe.
O wireframe como parte essencial do projeto de websites
I ♥ wireframes
0 comentários