Padr es de intera o homem m quina hci patterns
This presentation is the property of its rightful owner.
Sponsored Links
1 / 27

Padrões de Interação Homem-Máquina (HCI Patterns) PowerPoint PPT Presentation


  • 63 Views
  • Uploaded on
  • Presentation posted in: General

Padrões de Interação Homem-Máquina (HCI Patterns). Priscila de Castro Nicola Novembro 2004. Origem de Padrões. Christopher Alexander A Pattern Language: Towns, Buildings, Construction, 1977 Padrões em arquitetura e planejamento urbano

Download Presentation

Padrões de Interação Homem-Máquina (HCI Patterns)

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Padr es de intera o homem m quina hci patterns

Padrões de Interação Homem-Máquina (HCI Patterns)

Priscila de Castro Nicola

Novembro 2004


Origem de padr es

Origem de Padrões

  • Christopher Alexander

    • A Pattern Language: Towns, Buildings, Construction, 1977

    • Padrões em arquitetura e planejamento urbano

  • Design Patterns: Elements of Reusable Object-Oriented Software , 1995 - Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides - Gang of Four (GoF)

  • Pattern-Oriented Software Architecture: A System of Patterns , 1996 - Frank Buschmann, Regine Meunier, Hans Rohnert, Peter Sommerlad, and Michael Stal - Gang of Five (GoV)


O que um padr o

O que é um Padrão?

  • Um padrão é uma solução comprovada para um problema em um determinado contexto.

  • Padrões são encontrados e não inventados.


O que um padr o1

O que é um Padrão?

  • Passos para encontrar padrões:

    • Identificar o assunto do padrão

    • Identificar o problema que o padrão resolve

    • Identificar a invariância (identificar características e propriedades de projetos de sucesso que estão faltando em projetos que não obtiveram sucesso, i.e. a invariância que um padrão deve encapsular).


Linguagem de padr o

Linguagem de Padrão

  • Os padrões identificados são integrados à uma linguagem de padrão (pattern language).

  • Uma linguagem de padrão define uma coleção de padrões e regras para combiná-los em um estilo arquitetural.


Linguagem plml

Linguagem PLML

  • Pattern Language Markup Language (PLML)

  • Definida na CHI 2003 - Conference on Human Factors in Computing Systems

  • Objetivos:

    • Trazer ordem às várias formas (inconsistentes) de padrões que diversos autores utilizam.

    • Disponibilizar uma maneira de padrões serem referenciados em coleções de padrões diferentes.

    • Identificar elementos comuns entre as diversas coleções de padrões.


Linguagem plml1

Linguagem PLML

  • Alguns elementos da PLML:

    • <pattern id>

    • <name>

    • <alias>

    • <illustration>

    • <problem>

    • <context>

    • <solution>

    • <example>


Linguagem plml2

Linguagem PLML

  • Alguns elementos da PLML:

    • <literature>

    • <implementation>

    • <related-patterns>

  • DTD de definição mais recente pode ser encontrado em:

    http://www.hcipatterns.org/patterns.html


Tipos de padr es

Tipos de Padrões

  • Definição de Martijn van Welie:

    • Padrões Web Design

    • Padrões GUI Desgin

    • Padrões MobileUI Design


Tipos de padr es1

Tipos de Padrões

  • Padrões Web Design

    • Tipos de sites

    • Experiências de usuários

    • e-commerce

    • Navegação

    • Procura

    • Tipos de páginas básicas

    • Gerenciamento de coleções

    • Elementos de página

    • Interações básicas

    • Projeto visual


Tipos de padr es2

Tipos de Padrões

  • Padrões GUI Design

    • Seleção

    • Guia/Feedback

    • Navegação

    • Apresentação

    • Interação Física

  • Padrões MobileUI Design

    • WAP/WML


Exemplos de padr es

Padrões -> Exemplos

Exemplos de Padrões

  • Seletor de Linguagem

  • Grid Layout


Seletor de linguagem

Padrões -> Exemplos

Seletor de Linguagem

  • Web Design -> Elementos de página -> Seletor de Linguagem


Seletor de linguagem1

Padrões -> Exemplos

Seletor de Linguagem

  • Problema: Usuários necessitam selecionar a linguagem preferencial

  • Usar quando: Se um website oferece conteúdo diferente para cada país, esse é um site localizado. Usuários devem ser capazes de reconhecer o nome da sua linguagem.


Seletor de linguagem2

Padrões -> Exemplos

Seletor de Linguagem

  • Solução: Apresentar as opções de linguagens escritas em sua língua específica.

    Liste todas as linguagens disponíveis em suas próprias linguas como “Deutsch”, “Português”, “English”, “Italiano” ou “Nederlands”. Se possível, liste todas as linguagens para que a seleção possa acontecer com apenas um click. Se não for possível, considere o uso de um combobox.


Seletor de linguagem3

Padrões -> Exemplos

Seletor de Linguagem

  • Não utilize labels para o seletor de linguagens, utilize apenas os nomes das linguagens. Coloque a lista de linguagens na parte superior da janela e mostre-a em todas as páginas do site.

  • Observação: Não use bandeiras para apresentar linguagens! Elas não definem unicamente linguagens e podem ser ofensivas em alguns países. Bandeiras representam países e não linguagens.


Seletor de linguagem4

Padrões -> Exemplos

Seletor de Linguagem

  • Porque: Apresentar o nome da linguagem na escrita nativa assegura que o grupo alvo poderá ler seu próprio nome da linguagem. O seletor de linguagem deve estar disponível em todas as páginas do site para que visitantes que não entraram através da homepage também possam alterar a linguagem.


Seletor de linguagem5

Padrões -> Exemplos

Seletor de Linguagem

  • Usos conhecidos:www.copernic.com; www.speednames.com


Grid layout

Padrões -> Exemplos

Grid Layout

  • GUI Design -> Apresentação -> Grid Layout


Grid layout1

Padrões -> Exemplos

Grid Layout

  • Problema: O usuário necessita entender rapidamente informações e tomar decisões dependendo dessas informações.

  • Contexto: Qualquer circustância onde várias informações são apresentadas e arranjadas espacialmente em uma área limitada. Tipicamente no desenho de telas de diálogo, forms e páginas web.


Grid layout2

Padrões -> Exemplos

Grid Layout

  • Forças:

    • O usuário necessita visualizar diversos objetos, mas deseja vê-los de uma maneira clara e organizada.

    • O usuário deseja minimizar o tempo que leva para ler/visualizar/entender os objetos na tela.

    • Os objetos são frequentemente relacionados e podem ser agrupados conceitualmente.

    • A apresentação deve ser compacta, mas ainda assim clara, agradável e legível.


Grid layout3

Padrões -> Exemplos

Grid Layout

  • Solução: Arranjar todos os objetos em uma grade utilizando um número mínimo de linhas e colunas, de forma que as células tenham o maior tamanho possível.

    Objetos que são do mesmo tipo devem ser alinhados e apresentados da mesma maneira. Se vários objetos podem ser agrupados, devem ser colocados na mesma célula.


Grid layout4

Padrões -> Exemplos

Grid Layout

  • Porque: Minimizar o número de linhas e colunas melhora o tempo necessário para se procurar a informação e tomar a ação apropriada. Adicionalmente, essa disposição leva a um layout consistente e que é percebido como não-invasivo pelo usuário. O tempo necessário para a leitura da informação é reduzido, o que pode aumentar a performance da tarefa. O layout resultante é agradável de ser visto e aumenta a satisfação do usuário.


Grid layout5

Padrões -> Exemplos

Grid Layout

Exemplo - Word 97


Grid layout6

Padrões -> Exemplos

Grid Layout

Contra exemplo - IBM's Aptiva Communication Center


Conclus o

Conclusão

  • Padrões são ótimas ferramentas para capturar e comunicar o conhecimento adquirido.

  • Apesar disso, um catálogo de padrões não é um checklist. Cada projeto possui um contexto único, e mesmo que se deseje resolver um problema comum, um determinado padrão pode não ser uma solução adequada.


Refer ncias

Referências

  • hcipatterns.org

    • http://www.hcipatterns.org

  • Patterns in interaction design (Martijn van Welie)

    • http://www.welie.com

  • UI Patterns and Techniques

    • http://time-tripper.com/uipatterns/index.php

  • The Interaction Design Patterns Page

    • http://www.pliant.org/personal/Tom_Erickson/InteractionPatterns.html


  • Login