patterns part01
DESCRIPTION
padrões de usabilidadeTRANSCRIPT
![Page 1: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/1.jpg)
Usabilidade de Software- Padrões de Projeto para IHC
Anderson Rogério Cunha
Anápolis 21/10/2015
![Page 2: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/2.jpg)
Agenda● Padrões de projeto (patterns)● Padrões de Projeto para IHC
– Navegação em uma hierarquia de informação● Breadcrumbs● Abas & menus● Árvore & formularios● Árvore & tabela● Lista em cascata● Acordeão● Pirâmide
– Navegação em um grupo de informação● Slide show● Miniatura & ampliação● Visão geral e em detalhes
● Atividade Extra-classe
![Page 3: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/3.jpg)
Padrões de Projeto
![Page 4: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/4.jpg)
Definição e Cronologia
● Padrões de Projeto:
Se referem aos problemas mais comuns e às boas soluções para esses problemas, que são capturadas, compartilhadas e reutilizadas por profissionais de diversos tipos de produtos e seviços
● Cronologia– Surgimento na arquitetura - Christopher Alexander (Alexander,
1977)
– Adoção na Engenharia de Software - (Gama, 1995)
– Adoção na área de Interface humano-computador – (Tidwell, 1998)
![Page 5: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/5.jpg)
Exemplo: Singleton
● Objetivo– Assegurar que uma classe tenha uma única instância e
prover um ponto de acesso global a esta instância
● Motivação– Algumas classes devem ser instanciadas uma única
vez:● Um spooler de impressão● Um sistema de arquivos● Um Window manager● Um objeto que contém a configuração de um programa
![Page 6: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/6.jpg)
Exemplo: Singleton
● Motivação– Como assegurar que uma classe possua apenas uma
instância e que esta instância seja facilmente acessível?● Uma variável global deixa a instância acessível mas não
inibe a instanciação múltipla
– Uma melhor solução: faça com que a classe em si seja responsável pela manutenção da instância única
– Este é o padrão Singleton ("que-possui-apenas-um")
![Page 7: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/7.jpg)
Exemplo: Singleton
● Extrutura:
![Page 8: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/8.jpg)
Exemplo: Singleton
● Aplicabilidade– Use o padrão Singleton quando:
● Deve haver uma única instância de uma classe e esta instância deve ser acessada a partir de um ponto de acesso bem-conhecido
● Quando a instância única deve ser extensível através de subclasses e clientes podem usar instâncias diferentes polimorficamente, sem modificação de código
● Participantes– Singleton
● Define uma operação getInstance() que permite que clientes acessem sua instância única– É um método estático (class method)
● Pode ser responsável pela criação de sua instância única
![Page 9: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/9.jpg)
Exemplo: Singleton
● Colaborações– Clientes acessam a instância apenas através da
operação getInstance() do Singleton
● Consequências– Vários benefícios existem:
● Acesso controlado à instância única● Espaço de nomes reduzido● Permite refinamento de operações e de representação● Permite a existência de um número variável de instâncias● Mais flexível que métodos estáticos
![Page 10: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/10.jpg)
Padrões de Projeto para IHC
![Page 11: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/11.jpg)
O que é um bom padrão de IHC?
É aquele que favorece tanto aos desenvolvedores, proporcionando-
lhes eficiência na programação, como aos usuários, oferecendo-lhes
usabilidade nas interações com o sistema.
![Page 12: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/12.jpg)
Emprego de bons padrões de IHC
● A aplicação de bons padrões de IHC podem gerar como consequencias:– Interface manutenível:
● Atendem as necessidades atuais e futuras, suportando matutenções e evoluções e/ou corretivas com orçamentos e prazos previsíveis;
– Proporcionam níveis superiores de interatividade e facilidade de uso para usuários:
● Para usuários intermediários e experientes.
![Page 13: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/13.jpg)
Padrões de projeto para IHC
● Problemas de usabilidade de interfaces:– Navegação em uma hierarquia de informação
– Navegação em um grupo de informação
– Consulta a um item de informação
– Layout de áreas de edição
– Condução para entrada de dados
– Procedimentos para a entrada de dados
![Page 14: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/14.jpg)
Padrões de projeto para IHC
● Problemas de usabilidade de interfaces:
– Navegação em uma hierarquia de informação
– Navegação em um grupo de informação
– Consulta a um item de informação
– Layout de áreas de edição
– Condução para entrada de dados
– Procedimentos para a entrada de dados
![Page 15: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/15.jpg)
Navegação em uma hierarquia
● Padrão: Trilha de links – breadcrumbs– Descrição:
Constituem principalmente uma forma de navegação no site ou aplicativo embora possam também fornecer feedback ao usuário.
– Emprego:
Usado para orientar e facilitar o trabalho de um usuário na navegação de uma extrutura de informação.
![Page 16: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/16.jpg)
Navegação em uma hierarquia
![Page 17: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/17.jpg)
Navegação em uma hierarquia
● Padrão: Abas & Barra de menu– Descrição:
Abrange dois níveis de informação:
Primeiro: Opções apresentadas em forma de barras;
Segundo: Opções disponíveis na forma de barras de menus.
As abas não mudam e os menus mudam de acordo com a barra selecionada.
– Emprego:
Utilizado para orientar usuários menos experientes no uso de interfaces. Não se recomenda presentar mais de 10 opções em nenhum dos níveis.
![Page 18: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/18.jpg)
Navegação em uma hierarquia
![Page 19: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/19.jpg)
Navegação em uma hierarquia
● Padrão: Árvore & Formulário– Descrição:
É composto por um conjunto de formulários ligados por uma árvore hierárquica cujos ramos podem ser expandidos/retraídos.
– Emprego:
Permite percorrer uma estrutura hierárquica de poucos níveis, composta de formulários heterogêneos, para consulta e edição.
● Usuários experientes
![Page 20: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/20.jpg)
Navegação em uma hierarquia
![Page 21: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/21.jpg)
Navegação em uma hierarquia
● Padrão: Árvore & Tabela– Descrição:
Composto por uma tabela cujas linhas são as folhas de uma árvore cujos ramos podem ser contraídos/expandidos. A extrutura hierárquica aparece na primeira coluna, as demais correspondem aos dados das tabelas.
– Emprego:
Adequado para navegação e seleção de dados homogêneos de uma estrutura hierárquica de poudos níveis.● Usuários intermediários e/ou experientes
![Page 22: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/22.jpg)
Navegação em uma hierarquia
![Page 23: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/23.jpg)
Navegação em uma hierarquia
● Padrão: Lista em cascata– Descrição:
Conjunto de listas de 3 e 4 níveis adjacentes, a seleção de um item em uma lista define as opções das listas subsequentes.
– Emprego:
Indicado para apresentar dados disponíveis para seleção em uma estrutura hierarquica de poucos níveis.
● Usuários pouco experientes
![Page 24: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/24.jpg)
Navegação em uma hierarquia
![Page 25: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/25.jpg)
Navegação em uma hierarquia
● Padrão: Acordeão– Descrição:
Estrutura hierarquica em dois níveis, que contrai e expande as categorias de dados (opções de entrada ou itens de navegação).
– Emprego:
Indicado para seleção de um item de um conjunto não numeroso, e com limitação de espaço na tela.
![Page 26: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/26.jpg)
Navegação em uma hierarquia
![Page 27: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/27.jpg)
Navegação em uma hierarquia
● Padrão: Pirâmide– Descrição:
Uma estrutura de apresentação e navegação que compreende os dois últimos níveis de uma estrutura hierárquica. A navegação no último nível se dá por botões “próximo” e “anterior”.
– Emprego:
Indicado para consultas de elementos em estruturas hierárquicas cuja categorias guardam numerosos itens.● Usuários pouco experientes
![Page 28: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/28.jpg)
Navegação em uma hierarquia
![Page 29: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/29.jpg)
Padrões de projeto para IHC
● Problemas de usabilidade de interfaces:– Navegação em uma hierarquia de informação
– Navegação em um grupo de informação– Consulta a um item de informação
– Layout de áreas de edição
– Condução para entrada de dados
– Procedimentos para a entrada de dados
![Page 30: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/30.jpg)
Navegação em grupo de informação
● Padrão: Slides show– Descrição:
Estrutura de apresentação e navegação que mostra por um tempo determinado cada imagem de um conjunto ou categoria, também fornece controles de navegação.
– Emprego:
Indicado para consultas a numerosos elementos de uma categoria que contém elementos que ocupam muito espaço na tela.● Usuários pouco experientes.
![Page 31: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/31.jpg)
Navegação em grupo de informação
![Page 32: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/32.jpg)
Navegação em grupo de informação
● Padrão: Miniatura & ampliação– Descrição:
Estrutura de apresentação e navegação composta de miniaturas e um painel de apresentação, a navegação se da por acesso direto ou sequencial.
– Emprego:
Apoia usuários pró-ativos em sua navegação entre elementos de um conjunto não numeroso de imagens que ocupam muito espaço na tela.
![Page 33: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/33.jpg)
Navegação em grupo de informação
![Page 34: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/34.jpg)
Navegação em grupo de informação
● Padrão: Visão geral e em detalhes– Descrição:
Composto por uma extrutura que da uma visão geral do conteúdo e um painel onde o item ou seção selecionado é apresentado em detalhes. Permite ações rápidas sobre ambas as visões apresentadas.
– Emprego:
Indicado para consulta e o gerenciamento de um conjunto numeroso de intens que individualmente, podem ocupar muito espaço na tela.● Usuários experientes
![Page 35: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/35.jpg)
Navegação em grupo de informação
![Page 36: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/36.jpg)
Atividade Extra-Classe
![Page 37: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/37.jpg)
Atividade Extra-classe
● Extraia exemplos de interfaces de aplicativos que você usa no dia a dia para os padrões de projetos das categorias listadas abaixo (que foram estudados até o momento):– Navegação em uma hierarquia de informação
– Navegação em um grupo de informação
● Entrega via e-mail de arquivo em formato texto até as 20:50 do dia 28/10
![Page 38: Patterns Part01](https://reader030.vdocuments.site/reader030/viewer/2022020112/5695d0801a28ab9b0292b54b/html5/thumbnails/38.jpg)
Bibliografia
● CYBIS, Walter; BETIOL, Adriana Holtz; FAUST, Richard. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. 2. ed., rev. e ampl. São Paulo: Novatec, 2010.
● http://www.welie.com/patterns/index.php● http://www.designinginterfaces.com/firstedition
/index.php● http://time-tripper.com/uipatterns/Hub_and_Sp
oke●