patterns, padrões e use qualities

rodrigo@gonzatto.com

rodrigo gonzatto

uma língua comum e commons em interfaces e interações

gonzatto.com

O que é uma caixa de entrada de texto com um botão do lado?

E duas caixas de entrada de texto com um botão próximo?

O que tem no canto superior direito de um site onde você fez login?

O que terá no próximo slide?

Patterns• Padrões (mas não padronização!)

de soluções de problemas recorrentes

• "O design opera por linguagens de padrões” [Hugo Cristo apud Cristopher Alexander]

• "Um pattern descreve um problema que se repete várias vezes em um determinado meio, e em seguida descreve o núcleo da sua solução, de modo que esta solução possa ser usada milhares e milhares de vezes.”

Referência: Hugo Cristo

Design Patterns (Padrões de Projeto/Desenho)

• Utilizados em Engenharia de Software como padrões de projeto/desenho: soluções gerais e reutilizáveis de problemas frequentes em determinados contextos

• Geralmente são apresentados em modelos, templates confiáveis para questões gerais (não-específicos)

• Mas existem diferenças entre padrões para interface, código e interação…

Repositórios de padrõesAlguns de repositórios de design patterns:

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

• Yahoo Design Patterns: https://developer.yahoo.com/ypatterns/

• Muitos sites de patterns: http://profs.info.uaic.ro/~evalica/patterns/

!

Dark Patterns

• Também conhecidos como Anti-patterns

• Utiliza-se de técnicas parecidas com as Pattersn (no caso, de Design de Interação) para atingir objetivos eticamente (e legalmente) questionáveis

• Geralmente disfarça-se de “facilidade de uso” ou truques propícios para tal

http://darkpatterns.org/

http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you

http://darkpatterns.org/ Exemplo: Bait and Switch (Isca e Mudança) O telefone embaixo do nome do hotel não é do hotel mas do site

http://darkpatterns.org/ Exemplo: Forced Disclosure (Revelação forçada) A newsletter vem selecionada como padrão

http://www.theverge.com/2013/8/29/4640308/dark-patterns-inside-the-interfaces-designed-to-trick-you Exemplo: Questões complicadas !Selecione se não quiser (!)

Atenção!

• Cuidar com funcionalismo ou formalismo nos padrões, pois Patterns não se reduzem a ideia de “reutilizar código”, “reutilizar templates (de Photoshop, Axure, etc.)

• Padrões devem valorizar o conhecimento socialmente compartilhado, mapeamentos conhecidos, interfaces consolidados, e não buscar inovação em si mesma

Referência: Hugo Cristo

Uma questão: !

O quanto este tipo de padrões falam das interações?

(ou falam mais das interfaces em si?)

Jonas Löwgren

Use Qualities Qualidades da experiência

Do que é feito um site?

um aplicativo? um programa/software?

um game? um produto digital?

Para entender de onde vem a ideia de use qualities é preciso se perguntar:

”Eu [Löwgren] proponho pensar em design de interação em termos de qualidades de uso. Por exemplo, certas propriedades de produtos digitais que são experienciadas

em seu uso. Estas qualidades transcendem o projeto em específico e oferecem uma

linguagem para falar sobre o design desejado a ser produzido”

Do que é feita a interação? !

Interação como material sem qualidades. !

Interação não é um material, pois só aparece em uso. Já o uso pode ser definido/propiciado

por uma forma ou material.

Todo produto é projetado com a intenção de mudar (ou facilitar a mudança) do

modo como as pessoas agem (comportamento) !

É por isso que os artefatos tem um papel importante em moldar as atividades em uma

organização, por exemplo.

Como falar, então, de interações? !

use qualities (qualidades de uso) certas propriedades de um design do digital que podem ser experimentadas em seu uso

As “Use qualities of digital designs” dizem respeito às escolhas de design e o uso resultante delas

!

Boa parte da habilidade prática em projetar se dá em ter um repertório de formatos,

que permitem ao designer ficar mais confiante em novas situações de projeto.

Use Qualities Qualidades da experiência

• É uma terminologia/língua em comum para designers de interação

• Busca ajudar o/a designer a antecipar a proposta de experimentação esperada.

• Tem como foco a estética da interação.

• Não é uma lista definitiva ou fixa.

• Não fala de como a interface/produto é, mas da experiência que a pessoa pode esperar dela.

Use Qualities Qualidades da experiência

Grandes grupos de “use-oriented qualities of digital artifacts”

Motivação

Interação

Aspectos sociais

Estruturas

Significado

• motivação dos usuário para o engajamento com um artefato digital

• sensação de interação com o artefato

• efeitos/consequências sociais da interação

• qualidades que pertencem aos aspectos estruturais do artefato, da maneira como ele se manifesta em uso

• conjunto que se relaciona com a indução do usuário à reflexão sobre a sua situação

Atenção! !

Não são uma taxonomia, uma lista definitiva! Ela está em construção.

Motivação

• Playability: a qualidade adictiva que, como em um jogo, cria uma vontade de repetir a interação “mais uma vez"

!

!

• Seductibity: proposta de envolvimento emocional entre o artefato e a pessoa

Motivação

• Anticipation (continuidade/coerência): qualidade de uso que propõe uma consistência visual e de interação (exemplo: utilização de estruturas dramáticas)

!

• Relevancy: resolve diretamente um problema ou uma necessidade relevante à pessoa

!

• Usefulness: interação que até é útil, mas não necessariamente usável (propositalmente)

Interação

• Pliability: trata da plasticidade ou maleabilidade de uma matéria digital. Ex.: sentir a interface como uma matéria que pode ser manipulada pelos “dedos”.

• de superfície: relacionado com o movimento do utilizador, o seu resultado e o entendimento. Ex.: Botões

• de profundidade, tem a ver com as possibilidades de agir livremente e dar forma à matéria. Ex.: Reactables

!

!

Interação

• Control ou Autonomy, Limite entre o controle total e a automação. O quanto você "manda" no artefato ou este tem autonomia de atuação. De um lado: a ferramenta, extensão do corpo e controlável. De outro lado: o autônomo como agente trabalha por conta e resta ao usuário utiliza-lo como participação.

Interação

!

• Immertion: ligação profunda entre interagente e a interação que realiza. Geralmente é típico em actividades criativas e exploratórias. Ex. “Realidade Virtual"

!

!

• Fluency: “onipresença" do digital na vida, que permite ir de uma interface a outra com interações sutis.

Social

• Social area: possui potencialidade para uma ação social. Ex. Chat

• Personal connectedness: estar conectado, sempre mantendo contato;

• Identity: propicia construção e manutenção da identidade pessoal ou de grupo. Ex.: skins, badges, personalização

Estruturas

• Transparency: usuário adapta e estende a interface às suas necessidades. Foco na tarefa, não na ferramenta. (Ex.: escrever texto, não abrir o Word!)

• Eficiency: interação rápida e sem erro (ou o erro é rapidamente contornado)

• Elegance: combinação do poder da eficiência e da simplicidade. Oferece melhor performance com a estrutura mais simples possível.

Significado

3 tipos de ambiguidade: informação, contexto e relação.

• Ambiguidade: impossibilita uma interpretação fácil, encorajando o interagente a participar (para entender algo)

• Parafuncionality: encoraja a refletir sobre a relação com a tecnologia e sobre os valores culturais em que está inserido (ex.: Critical Design)

• Surprise: na confusão, a pessoa busca voltar atrás e refazer. Com a surpresa, o usuário se interessa naquilo que fez.

Exemplos de propostas de novasuse qualities (criadas por alunos)

• Comprometimento: Envolvimento social em um ambiente virtual (jogos) que gera uma sensação de compromisso entre seus.