O documento discute vários padrões de design comuns, incluindo Breadcrumbs para indicar localização, Área de status para fornecer informações sem interromper a tarefa principal, e Menu dropdown para apresentar vários comandos de forma compacta.

1. Design patterns
Tersis Zonato
2011

2. Design patterns
de design que podem ser repetidas para
• Soluções
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)

3. Design patterns
• Onde estou?
•O que é apresentado aqui?
• Onde posso ir?
INSTONE (2000)

4. “Qualquer página web dispõe de
três áreas principais”
VEEN (2001)

9. 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)

11. Breadcrumbs
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.

12. Breadcrumbs

13. Linhas alternadas
Problema:
Dificuldade de conectar as informações em uma
linha.
Solução:
Alternar a cor de fundo para diferenciar cada linha.

14. Linhas alternadas

15. Área de status
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.

16. Área de status

17. Skins e templates
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.

18. Skins e templates

19. Links de ação
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.

20. Links de ação

21. Listas em cascata
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.

22. Listas em cascata

23. Painéis “abre-fecha”
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.

24. Painéis “abre-fecha”

25. Cantos
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.

26. Cantos

27. Visualização alternativa
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.

28. Visualização alternativa

29. Seleção de data
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.

30. Seleção de data

31. Menu dropdown
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.

32. Menu dropdown

33. Navegação facetada
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.

34. Navegação facetada

35. Paginação
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.

36. Paginação

37. Barra de progresso
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.

38. Barra de progresso

39. Muito obrigado!
@tersis