Webdesign

Profª Fabiane Lima
fabianelim@gmail.com

Universidade Tecnológica Federal do Paraná — 2017

Esqueleto

Design de Interface, Navegação e Informação

O plano do esqueleto se refere a um nível mais refinado de detalhamento do projeto. É neste momento que pegamos a macroescala das fases anteriores e definimos partes mais específicas do nosso produto.

A fase do esqueleto aborda o produto digital enquanto funcionalidade e enquanto informação

Os elementos interface, navegação e informação se misturam de forma quase indistinta.

  • Se provê uma funcionalidade ao usuário, trata-se de design de interface;
  • Se envolve a habilidade do usuário de se movimentar e ir de um lugar a outro, é design de navegação;
  • Se diz respeito à comunicação de idéias e conceitos ao usuário, é design de informação.

Affordances

"...ações possíveis dadas ao ator pelo seu entorno."

"Affordances", na Interaction Design Foundation.
.
"...o termo affordance refere-se às propriedades intrísecas e percebidas da coisa, primariamente aquelas propriedades fundamentais que determinam como a coisa pode ser possivelmente usada. [...] Quando se faz bom uso das affordances, o usuário sabe o que fazer só de olhar: sem necessidade de imagem, rótulo ou instrução."

(NORMAN, 1988. p. 9 apud KAPTELININ, sem data)

Tipos de affordances

  • Percebidas: dadas pelo objeto
  • Ocultas: as que o ususário deve intuir
  • Falsas: quando dá ao usuário uma percepção equivocada sobre o que é possível fazer com o design

Hábitos e reflexos são as bases de muitas das nossas interações com o mundo. As convenções nos permitem aplicar esses reflexos em diferentes circunstâncias.

"Tornar sua interface consistente em relação a outras com as quais o usuário está acostumado é importante, mas inda mais importante é que a interface seja consistente em si mesma. O modelo conceitual das funcionalidades do produto pode ajudar a assegurar essa consistência interna."

(GARRETT, 2010. p. 111-112)

Metáforas

Analogias podem ser úteis, mas cuidado para não tornar seu produto uma cópia mambembe do mundo rea;

"A magazine is an iPad that does not work"

Design de Interface

Trata-se de selecionar os componentes interativos necessários para o cumprimento de uma dada tarefa, levando em conta que essa tarefa pode se extender por mais de uma tela.

GUIdebook Gallery

Uma interface bem desenhada leva em consideração o percurso das ações dos usuários e dispõe as ferramenta de acordo. Considera, também, os limites e possibilidades dos componentes e tecnologias disponíveis.

Componentes de interface mais comuns:

  • Check boxes
  • Radio buttons
  • Campos de texto
  • Menus drop & down
  • Botões de ação

Design de Navegação

A navegação de todo site deve cumprir três objetivos:

  1. Deve prover meios de o usuário se mover de um lado a outro dentro da estrutura do site;
  2. Deve comunicar de forma relacional os elementos que contém em si, de forma que o usuário entenda que ações estão disponíveis;
  3. Deve comunicar uma relação entre sua forma e o conteúdo que está exibindo.

Alguns sites provêm múltiplos sistemas de navegação, permitindo que o usuário se mova pelo conteúdo conforme contexto, local, preferência ou popularidade do conteúdo.

G1

Menu do site de notícias G1

Um mapa de site é um recurso comum e navegação que dá ao usuário uma noção geral e geralmente hierárquica do conteúdo do site.

Um índice provê ao usuário uma estrutura de alguma forma baseada no conteúdo, seja ordem alfabética ou onomástica.

Design de Informação

O design da informação pode consistir no arranjo visual de dados através de gráficos e tabelas, ou na forma como a informação é agrupada, arranjada e categorizada.

Se o sistema precisa prover muita informação ao usuário sobre a forma correta de se utilizar uma interface, isso é um problema de design de informação.

Lists of lists of lists

Listas de listas de listas

Como unir tudo isso?

Wireframe

Wireframes são descrições visuais da estrutura do layout da página/aplicativo/produto digital.

O diagrama arquitetônico que fizemos nas fases anteriores do projeto dão uma visão mais abrangente do produto. Na fase do esqueleto, o wireframe é o documento que detalha com muito mais profundidade como essa estrutura será levada a cabo.

A importância dos wireframes é que eles integram os três elementos do esqueleto em uma coisa só. É o wireframe que determina a estrutura conceitual do site que, finalmente, será consluído na próxima fase, a da superfície.

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.
  • KAPTELININ, Victor. "Affordances". The Encyclopedia of Human-Computer Interaction. Segunda edição.
  • 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.