Patterns Part01

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


● Problemas de usabilidade de interfaces:

– Navegação em uma hierarquia de informação


– Consulta a um item de informação




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.



● 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.



● 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



● 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



● 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



● 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.



● 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



● 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




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.



● 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.



● 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


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


● 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●

http://www.welie.com/patterns/index.php

http://www.designinginterfaces.com/firstedition/index.php

http://www.designinginterfaces.com/firstedition/index.php

http://time-tripper.com/uipatterns/Hub_and_Spoke

http://time-tripper.com/uipatterns/Hub_and_Spoke

[email protected]

mailto:[email protected]

Documents

Patterns Part01