Embed Size (px)
Citation preview
Design de interfaces gráficasFrederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPRwww.usabilidoido.com.br
O que é interface?
Forma que possibilita Informação
Estrutura que possibilita Interação
Função que possibilita Experiência
Sist
emas
Pessoas
área cinza das possibilidades
Interface gráfica é o conjunto de possibilidades oferecidas por um
sistema para informação, interação e experiências humanas.
Quando a interface não tem um conceito bem amarrado, ela prioriza um aspecto em
detrimento de outros.
Projeto funcionalista: a função determina forma e estrutura
Projeto formalista: a forma determina a função e estrutura
Projeto estruturalista: a estrutura determina a forma e função
Conceito bem amarradoFo
rma
Funç
ãoEs
trut
ura
O segredo de um conceito bem amarrado é o desenvolvimento de cada aspecto em
relação a vários outros aspectos.
O conceito é expresso através de várias linguagens
• Visuais
• Verbais
• Sonoras
• Interacionais
Material Design, Google
O skeumorfismo (reproduzir características do mundo real) está gradualmente desaparecendo no iOS
Figuras de linguagem em interfaces
Metáfora
Esboço da metáfora de desktop, Tim Mott
Interface da Xerox Star, 1981
Uma coisa que representa outra.
HipérboleAlgo representado de maneira exagerada.
ProsopopeiaSeres inanimados comportando-se como vivos.
MetonímiaUma parte que representa o todo.
SinestesiaEstimular um sentido para representar outro.
Não exagere nas figuras de linguagem.
Interface auto-explicativa é um mito.
Interface intuitiva é um mito.
Formas, estruturas e funções da interface tem origem na cultura.
Gêneros de interação
• Maneiras de interagir com outras pessoas que são cultivadas por uma determinada cultura
• Composto de ações ritualizadas e expectativas sobre as reações do outro dentro de um sentido pré-definido
• Novas tecnologias são apropriadas para atualizar os gêneros de interação
• Alfabetização digital significa dominar estes gêneros
O designer busca encaixar ou desencaixar sua criação num padrão que ele reconhece na cultura.
As bibliotecas e linguagens de padrões catalogam as soluções cultivadas por uma prática de design.
Além dos padrões de interação, existem os estilos visuais.
Composição gráfica
• Conjunto de relações entre elementos visuais
• Visível na distribuição de elementos da tela
• Elementos diversos: figura/fundo, tipografia, cores, componentes, etc...
• Relações diversas: contraste, harmonia, simetria, ritmo, ordem de leitura, etc...
• Regras diversas: Fibonacci, terços, retângulo de ouro, etc...
Existem composições balanceadas e desbalanceadas.
A composição de uma interface é um fenômeno emergente, pois a interface muda com a interação.
Uma das maneiras de projetar uma composição dinâmica é criar um guia de estilo da interface
Hiearquia visual
• Relação implícita dos elementos na tela sugerindo sua importância relativa ou ordem de leitura
• Relações: posição, peso, tamanho, etc...
A hierarquia visual serve para mostrar informação em pedaços.
Não é possível guiar o fluxo de leitura, porém, o usuário percebe a hierarquia visual e reage contra ou a favor.
Agrupamentos
• Quando as coisas estão próximas entre si e longe de outras coisas, parece que elas fazem parte de um grupo intencionalmente criado
Princípios da Gestalt aplicados ao agrupamento de coelhos
Propiciação (affordances)
• Características de uma interface que propiciam ou parecem propiciar interações
• Depende do contexto cultural, das características ergonômicas da pessoa e de suas experiências pessoais
Como abrir estas portas? Não há indícios claros de como elas propiciam esta ação (Norman, 2006)
Propicia puxar
Propicia empurrar
Propicia dúvida
Propicia confusão para brasileiros
Push Push
Propicia erros
Propiciação em interfaces gráficas (Eaton, 2002)
Propiciação do clique e do toque depende da Lei de Fitts: “a dificuldade para atingir um alvo é uma função
da distância do alvo e de seu tamanho”
Propiciação de gestos nas telas touchscreen
Propiciações inesperadas pelo projeto
Fluxos de interação rastreados pelo Google Analytics
Estigmergia em formigas (descobrindo o melhor caminho coletivamente)
Teste A/B e multivariados são uma forma de estigmergia humana
Fluxo de interação antecipa a estigmergia
Wireflow mostra que componentes permitem navegar pelo fluxo de telas
Wireframe anotado é uma planta baixa com instruções de como ela mudaria de acordo com a interação
Rabiscoframe é um esboço rápido e colaborativo dos componentes da tela
Prototipação em papel é uma maneira de testar ideias rapidamente
Protótipos de baixa fidelidade permitem a interação sem mostrar o visual (Pop App)
Protótipo de alta fidelidade servem para testar se o projeto gráfico se desenrola bem com a interação
Análise da distribuição de espaço revela as funções enfatizadas
Perfil semiótico é um método para investigação das expectativas emocionais sobre uma interface
Obrigado!Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPRwww.usabilidoido.com.br
