Webdesign

Affordances

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

"...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.

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.

Listas de listas de listas

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.