Design patterns

Tersis Zonato2011

•Soluções de design que podem ser repetidas para problemas comuns

•Captar “boas práticas” que resolvam as reais necessidades do usuário

• Entre princípios e diretrizes (guidelines)

• ...um vocabulário de design.

VEEN (2001)

Design patterns

•Onde estou?

•O que é apresentado aqui?

•Onde posso ir?

INSTONE (2000)

Design patterns

“Qualquer página web dispõe detrês áreas principais”

VEEN (2001)

Drag and Drop. Drag and Drop Modules. In Page Editing. In Page Custom Editing. Direct State Editing. Grid Cell Editing. Inline Custom Editing. Inline Tag Editing. Popup Custom

Editing. Slide-out Custom Editing. Inline Text Editing. Persistent Portals. Inline Reordering. Indication. Busy Indication. Cursor Busy. In Context Busy. In Context

Progress. Inline Status. Auto Complete. Balloon Error Tip. Deferred Content Loading. Dynamic Goal. Narrowing Choices. Refining Search. Live Search. Dynamic Filter.

Invitation. Cursor Invitation. Drop Invitation. Tool Tip Invitation. Hover Invitation. Detail Zoom. Opacity Focus. Configurable Module - Faceplate. Configurable Module - Flip It. Configurable Module - Inline Configure. Configurable Module - Slide Out Drawer. Slide

Out. Flip. Opacity Fade. Endless Scrolling. Expandable Paging Boundary. Fresh Content. Hover Detail. In Place Drill Down. Inline Assistant. Inline Validation. Validate Then

Suggest. On Demand Refresh. Periodic Refresh. Resizable Modules. Scrolling Modules. Auto Save. In Context Tools. Remembered Collection. Remembered Preferences. Auto Form Fill. Rating an Object. Transition. Brighten Transition. Cross Fade Transition. Dim Transition. Expand Transition. Fade In Transition. Fade Out Transition. Flip Transition. Move Transition. Self-Healing Transition. Collapse Transition. Slide Transition. Rich

Internet Object. Available. Selected.

BILL SCOTT (2007)

Problema:“Onde estou?”

Solução:Lista de links que dão a localização de onde o usuário esteve e onde está. Mostra a estrutura de navegação do site.

Breadcrumbs

Breadcrumbs

Problema:Dificuldade de conectar as informações em uma linha.

Solução:Alternar a cor de fundo para diferenciar cada linha.

Linhas alternadas

Linhas alternadas

Problema:Providenciar informação para o usuário sem interromper a atividade principal.

Solução:Usar uma área dedicada para o status do sistema sem interromper outras tarefas.

Área de status

Área de status

Problema:A aplicação deve ter visual diferente dependendo do cenário.

Solução:Criar uma arquitetura “look and feel” para a aplicação, permitindo a customização pelo usuário.

Skins e templates

Skins e templates

Problema:Comandos devem ser mostrados de acordo com a hierarquia.

Solução:Usar links ao invés de botões minimizam o ruído visual ou contrastam com botões para separar de acordo com a importância.

Links de ação

Links de ação

Problema:Selecionar uma ou mais coisas em uma grande quantidade de informação que são agrupadas de forma hierárquica.

Solução:Mostrar listas próximas umas das outras para os usuários buscarem as informações de forma hierárquica.

Listas em cascata

Listas em cascata

Problema:Muitas coisas devem constar na tela, mas não precisam ser mostradas a todo momento.

Solução:Inserir controles, ferramentas e outras informações em painéis em que os usuários podem abrir e fechar quando necessário.

Painéis “abre-fecha”

Painéis “abre-fecha”

Problema:Interface com visual plano e desinteressante que precisa de elementos simples.

Solução:Usar arrendondado, angular, cortes especiais e outros recursos para enriquecer graficamente o layout.

Cantos

Cantos

Problema:Vários tipos de visualização são necessárias para uma mesma interface.

Solução:Criar múltiplas visualizações da mesma interface.

Visualização alternativa

Visualização alternativa

Problema:Datas podem ter inúmeras representações variando conforme localidade e preferência pessoal.

Solução:Providenciar uma representação visual das datas, facilitando a inserção em formato consistente.

Seleção de data

Seleção de data

Problema:Inúmeros comandos a serem escolhidos, mas apresentar cada um deles como um botão pode pesar muito no layout.

Solução:Use um botão com indicador, que quando selecionado, mostra mais comandos relacionados ao primeiro.

Menu dropdown

Menu dropdown

Problema:O usuário quer encontrar algo, mas não tem ideia dos parâmetros.

Solução:Mostrar diversas faces, separadas por contexto, onde o usuário pode filtrar os resultados.

Navegação facetada

Navegação facetada

Problema:Listas longas, como resultados de busca.

Solução:Apresentar os itens agrupados entre múltiplas páginas com número consistente de itens por página e mostrar controles para navegação.

Paginação

Paginação

Problema:Não é legal deixar as pessoas esperando!

Solução:Mostrar um indicador do progresso atual ou pelo menos dizer que algo está sendo executado no momento.

Barra de progresso

Barra de progresso

Muito obrigado!@tersis