Projeto de Interface Web [PIW]

Diretrizes e padrões em Design

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/piw link

Diretrizes e padrões em Design

Guidelines (diretrizes) que orientam o design na tomada de decisões consistentes através de elementos que constituam o produto.

Diretrizes e padrões

As diretrizes (guidelines) e os padrões (standards) ajudam os desenvolvedores a criar as melhores interfaces a partir da experiência dos outros.

Existem diretrizes que são bastante detalhadas (denominadas de recomendações) e outras são mais abstratas.

Exemplo de diretrizes de usabilidade: userfocus
10 descobertas e diretrizes úteis de usabilidade

Princípios de design

Informações relacionadas à teoria. Ex: “Tempo suportável” - estudos indicam que 10 segundos é o máximo de tempo antes que as pessoas percam o interesse.

Recomendações

Versões mais específicas das recomendações. Ex: “Adote um formato mais consistente para a localização dos vários recursos de uma tela”

Guias de estilo

Coleção de regras específicas. Ex: “Para projetar um ícone, você deve criar a primeira versão em preto e branco e depois a colorida.” (Apple)

Padrões

Conjunto de regras internacionais que governam o desenvolvimento de sistemas interativos. Ex: ISO 14915 – Design of the user interface of multimedia applications

Uso de Guidelines em Design

Guidelines são utilizadas por fabricantes que definem, com elas, uma certa identidade à marca.

O uso de guidelines não deve ser entendido como “receita de design”, mas sim como um conjunto de princípios norteadores da interface.

Uso de guidelines em Design

Guidelines para o design de interfaces

  1. Falar a língua do usuário
  2. Reduzir a carga cognitiva
  3. Criar para o erro
  4. Manter a consistência

Uso de guidelines em Design

Falar a lingua do usuário

Conhecer a população de usuários, estar atento para as diferentes necessidades, promover sua satisfação pessoal e permitir que ampliem e facilitem a realização de suas tarefas.

Uso de guidelines em Design

Reduzir a carga cognitiva

Isso significa que o usuário não deve ter que se “lembrar” de grande quantidade de informação para usar bem o sistema.

Quantas vezes, ao navegar pela Internet, você se esqueceu do que estava buscando inicialmente?

Uso de guidelines em Design

Criar para o erro

Os usuários, tanto novatos quanto experientes, cometerão erros. Mensagens de erro efetivas e feedback ajudam o usuário a saber o que fazer quando o resultado de suas ações não produz o que ele espera.

Uso de guidelines em Design

Manter consistência

Consistência emerge do uso de padrões, que são mantidos ao longo do design dos componentes do produto.

Consistência também é derivada do uso apropriado de metáforas.

Padrões de Design
(Design Patterns)

O design pattern apresenta muitas vezes uma solução comum para determinado problema, a solução é descrita e feita de uma forma abstrata. Permitindo o engenheiro determinar detalhes e algumas especificações de um design pattern.

Para o design (em especial a web), também segue esta idéia, o que existe pronto que pode ajudar a resolver um problema? O que eu é um problema de design?

Padrões de Design
(Design Patterns)

Formato a ser definido um padrão:

  • Problema
  • Solução
  • Quando usar
  • Como usar
  • Por que usar

Padrões de Design
(Design Patterns)

Bibliotecas de padrões web:

Welie Pattern Library

Mais alguns links úteis:
Lista de fotos - Design Patterns
Palestra do Frederick (usabilidoido) - Padrões Web

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link