patterns part01
DESCRIPTION
padrões de usabilidadeTRANSCRIPT
Usabilidade de Software- Padrões de Projeto para IHC
Anderson Rogério Cunha
Anápolis 21/10/2015
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
Padrões de Projeto
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)
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
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")
Exemplo: Singleton
● Extrutura:
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
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
Padrões de Projeto para IHC
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.
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.
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
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
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.
Navegação em uma hierarquia
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.
Navegação em uma hierarquia
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
Navegação em uma hierarquia
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
Navegação em uma hierarquia
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
Navegação em uma hierarquia
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.
Navegação em uma hierarquia
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
Navegação em uma hierarquia
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
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.
Navegação em grupo de informação
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.
Navegação em grupo de informação
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
Navegação em grupo de informação
Atividade Extra-Classe
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
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●