Webdesign

Profª Fabiane Lima
fabianelim@gmail.com

Universidade Tecnológica Federal do Paraná — 2017

Estrutura

Design de Interação e Arquitetura da Informação

Depois de definir e priorizar os requerimentos do projeto, temos uma visão clara do que será incluído no produto final. Mas os requisitos não descrevem como as peças se encaixarão como um todo coeso. Esse é o próximo passo depois de definido o escopo: o desenvolvimento de uma estrutura conceitual para o site.

Design de interação e arquitetura de informação compartilham ênfase em definir padrões e sequências de tarefas e operações apresentadas aos usuários. O design de interação se ocupa das opções envolvidas em cumprir tarefas. Arquitetura de informação lida com as opções a respeito de como a informação será transmitida ao usuário.

Design de interação

O design de interação se ocupa em descrever possíveis comportamentos do usuário e em definir como o sistema se comportará e responderá a esse comportamento.

"Programadores tradicionalmente focaram e se preocuparam mais com dois aspectos do software: o que ele faz e como o faz. Há uma boa razão para isso — é precisamente a sua paixão por esses detalhes que fazem programadores serem bons no que fazem. Mas esse foco significava que os programadores orbitavam no entorno da construção de um sistema da forma que seria mais tecnicamente eficiente, sem se preocupar com o que era melhor para os usuários. Especialmente na época em que poder computacional era um recurso limitado, a melhor abordagem era a que resolvia o problema dentro dessas limitações técnicas." (GARRETT, 2011. p. 82)

Modelos conceituais

"Uma descrição do sistema proposto — em termos de um conjunto de ideias e conceitos integrados a respeito do que ele deve fazer, de como deve se comportar e com o que deve se parecer — que seja compreendida pelos usuários da maneira pretendida." (PREECE et al, 2005)

Modelos conceituais servem para:

  • Visualizar o produto proposto, baseando-se nas necessidades dos usuários e em outros requisitos identificados;
  • Realizar testes iterativos do produto enquanto ele está sendo desenvolvido;
  • Decidir o que os usuários farão para conseguir realizar as tarefas dentro do sistema que se está projetando.

Modelos conceituais podem ser:

  • Baseados em atividades: têm relação com os tipos mais comuns de tarefas que os usuários desenvolverão dentro do sistema.
    • Via instruções: dizendo ao sistema o que fazer através de comandos ou seleção de opções em menus;
    • Via conversação: interagindo com o sistema de modo similar a uma conversação [sistemas de IA];
    • Via manipulação e interação: agindo diretamente sobre os objetos e interagindo em um ambiente [WYSIWYG];
    • Exploração e navegação: descobrindo e aprendendo.
  • Baseados em objetos: mais específicos, enfocando a maneira como um objeto é usado em um determinado contexto; analogia com o mundo físico.

"O design conceitual preocupa-se com transformar os requisitos e necessidades do usuário em um modelo conceitual. [...] A base para projetar esse modelo é o conjunto de tarefas do usuário ao qual o produto irá oferecer suporte." (PREECE et al, 2005)

"Um protótipo é uma simulação da interação final com o sistema, e pode ser desde um modelo feito em cartolina [baixa fidelidade] até um sistema interativo propriamente dito [alta fidelidade]. Protótipos possibilitam prever como será a interação em ambiente real, buscando identificar erros de projeto e explorar os usos possíveis. [...] [...] um protótipo é uma representação limitada de um design que permite aos usuários interagir com ele e explorar sua conveniência." (PREECE et al, 2005)

Vantagens da elaboração de protótipos:

  • Baixa demanda de tempo para desenvolvimento e baixo custo
  • Não requer conhecimentos avançados em softwares de edição gráfica
  • Facilita a visualização do produto para o cliente desde a fase inicial
  • Possibilita receber o feedback do cliente em tempo ágil
  • Possibilita estimar de forma mais precisa a complexidade e o tempo de desenvolvimento necessários
  • Reduz os esforços de desenvolvimento
Protótipos de baixa fidelidade

Desenhados à mão ou à lápis, são representações do sistema feitas de maneira rápida e superficial, definindo superficialmente sua interação com o usuário, sem preocupação com cores ou layout.

Protótipos de média fidelidade

Usando lápis, papel, ou softwares específicos, esses protótipos são geralmente desenvolvidos na fase da arquitetura da informação. Apresentam a estrutura e o conteúdo da interface, formando um layout básico do projeto.

Protótipos de alta fidelidade

São chamados também de mockups ou protótipos funcionais e são uma represetação mais próxima possível do sistema a ser desenvolvido. Em alguns casos, permite uma simulação fiel das funcionalidades que estarão no produto final.

Arquitetura da Informação

Por a arquitetura da informação lidar com a forma como as pessoas processam informação cognitivamente, seus preceitos podem ser aplicados em qualquer produto que exija que o usuário entenda a informação apresentada a ele.

A arquitetura da informação se ocupa da criação de esquemas organizacionais e navegacionais que permitem aos usuários se mover através do conteúdo do site de forma efetiva e eficiente.

90% de tudo é lixo

— Lei de Sturgeon

"A internet ainda é um mundo selvagem e perigoso. Tudo surge lá sem hierarquia. A imensa quantidade de coisas que circula é pior que a falta de informação. O excesso de informação provoca a amnésia. Informação demais faz mal. Quando não lembramos o que aprendemos, ficamos parecidos com animais. Conhecer é cortar, é selecionar." Umberto Eco (GIRON, 2011) — grifo meu

Definições

  1. O design estrutural de ambientes de informação compartilhada.
  2. A combinação de organização, rotulagem, busca, e navegação em sistemas dentro de web sites e intranets.
  3. A arte e a ciência de moldar produtos de informação para suportar usabilidade e encontrabilidade [findability].
  4. Uma disciplina e comunidade emergentes de prática focada em trazer os princípios do design e da arquitetura ao panorama digital.

Informação é algo distinto de dados e de gerenciamento de conhecimento. Dados são fatos, estatísticas e bancos de dados. Conhecimento é o que as pessoas possuem em suas mentes, e gerenciamento de conhecimento é o desenvolvimento de ferramentas que auxiliem as pessoas a compartilharem esses conhecimentos. A informação está nesse entremeio.

Abordagens à arquitetura da informação

A unidade básica de informação é o ou nodo. Um nó pode corresponder a qualquer pedaço ou grupo de informações — o que define o tamanho de cada uma dessas unidades de informação pode variar. Uma tela pode ser um nó, mas um centeúdo mais compelxo pode demandar sub-nós.

Em uma estrutura hierárquica de navegação — em árvore — os nós têm relações de parentesco: nós-filhos representam conceitos específicos dentro de uma categoria maior (o pai). Nem todos os nós têm filhos, mas todo nó tem um pai.

Uma estrutura de matriz permite ao usuário se mover de nó em nó ao longo de duas ou mais dimensões. Estruturas em matriz permitem que usuários navegem de formas diferentes pelo mesmo conteúdo, a depender de suas necessidades de acesso.

Estruturas orgânicas não seguem um padrão consistente, e seus nós são unidos a depender o contexto de uso. Esse tipo de estrutura pode não dar ao usuário uma sensação consistente de navegação e deve ser usada com cuidado.

Estruturas sequenciais são mais conhecidas nas mídias tradicionais. Livros, artigos, áudio e vídeo são projetados para serem experienciados de forma sequencial. Esse tipo de organização, na web, é reservada a partes específicos de um todo maior, como por exemplo a divisão de artigos em páginas ou materiais instrucionais.

Atividade

Estruture as informações do seu produto digital/site/serviço/aplicativo de forma a criar um diagrama de fluxo de interação. Depois, comece a planejar a apresentação dessas informações através de um modelo conceitual de baixa fidelidade.

Referência

  • GARRET, Jesse James. The Elements of User Experience: User-Centered Design for the Web and Beyond. Segunda Edição. Berkeley, CA: New Riders, 2011. Disponível aqui.
  • GIRON, Luís Antônio. "Umberto Eco: 'O excesso de informação provoca amnésia'". Época, 30/12/2011. Acesso em 18 de agosto de 2016. Disponível aqui.
  • MORVILLE, Peter; ROSENFELD, Louis. Information Architecture for the World Wide Web. Terceira edição. Cambridge: O'Reilly, 2007. Disponível aqui.
  • PREECE, J.; ROGERS, Y.; SHARP, H. Design de Interação: além da interação humano computador. São Paulo: Bookman, 2007.