Design de interfaces gráficas
-
Upload
frederick-van-amstel -
Category
Design
-
view
271 -
download
0
Transcript of Design de interfaces gráficas
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.
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
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.
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
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...
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...
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
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
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”
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ó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