Design Patterns
-
Upload
tersis-zonato -
Category
Design
-
view
491 -
download
5
Transcript of Design Patterns
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