Download - Design de interfaces gráficas
![Page 1: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/1.jpg)
Design de interfaces gráficasFrederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPRwww.usabilidoido.com.br
![Page 2: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/2.jpg)
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
![Page 3: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/3.jpg)
Interface gráfica é o conjunto de possibilidades oferecidas por um
sistema para informação, interação e experiências humanas.
![Page 4: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/4.jpg)
Quando a interface não tem um conceito bem amarrado, ela prioriza um aspecto em
detrimento de outros.
![Page 5: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/5.jpg)
Projeto funcionalista: a função determina forma e estrutura
![Page 6: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/6.jpg)
Projeto formalista: a forma determina a função e estrutura
![Page 7: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/7.jpg)
Projeto estruturalista: a estrutura determina a forma e função
![Page 8: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/8.jpg)
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.
![Page 9: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/9.jpg)
O conceito é expresso através de várias linguagens
• Visuais
• Verbais
• Sonoras
• Interacionais
Material Design, Google
![Page 10: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/10.jpg)
O skeumorfismo (reproduzir características do mundo real) está gradualmente desaparecendo no iOS
![Page 11: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/11.jpg)
Figuras de linguagem em interfaces
![Page 12: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/12.jpg)
Metáfora
Esboço da metáfora de desktop, Tim Mott
Interface da Xerox Star, 1981
Uma coisa que representa outra.
![Page 13: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/13.jpg)
HipérboleAlgo representado de maneira exagerada.
ProsopopeiaSeres inanimados comportando-se como vivos.
![Page 14: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/14.jpg)
MetonímiaUma parte que representa o todo.
![Page 15: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/15.jpg)
SinestesiaEstimular um sentido para representar outro.
![Page 16: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/16.jpg)
Não exagere nas figuras de linguagem.
![Page 17: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/17.jpg)
Interface auto-explicativa é um mito.
![Page 18: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/18.jpg)
Interface intuitiva é um mito.
![Page 19: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/19.jpg)
Formas, estruturas e funções da interface tem origem na cultura.
![Page 20: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/20.jpg)
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
![Page 21: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/21.jpg)
O designer busca encaixar ou desencaixar sua criação num padrão que ele reconhece na cultura.
![Page 22: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/22.jpg)
As bibliotecas e linguagens de padrões catalogam as soluções cultivadas por uma prática de design.
![Page 23: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/23.jpg)
Além dos padrões de interação, existem os estilos visuais.
![Page 24: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/24.jpg)
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...
![Page 25: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/25.jpg)
Existem composições balanceadas e desbalanceadas.
![Page 26: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/26.jpg)
A composição de uma interface é um fenômeno emergente, pois a interface muda com a interação.
![Page 27: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/27.jpg)
Uma das maneiras de projetar uma composição dinâmica é criar um guia de estilo da interface
![Page 28: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/28.jpg)
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...
![Page 29: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/29.jpg)
A hierarquia visual serve para mostrar informação em pedaços.
![Page 30: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/30.jpg)
Não é possível guiar o fluxo de leitura, porém, o usuário percebe a hierarquia visual e reage contra ou a favor.
![Page 31: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/31.jpg)
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
![Page 32: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/32.jpg)
Princípios da Gestalt aplicados ao agrupamento de coelhos
![Page 33: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/33.jpg)
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
![Page 34: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/34.jpg)
Como abrir estas portas? Não há indícios claros de como elas propiciam esta ação (Norman, 2006)
![Page 35: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/35.jpg)
Propicia puxar
![Page 36: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/36.jpg)
Propicia empurrar
![Page 37: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/37.jpg)
Propicia dúvida
![Page 38: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/38.jpg)
Propicia confusão para brasileiros
Push Push
![Page 39: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/39.jpg)
Propicia erros
![Page 40: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/40.jpg)
Propiciação em interfaces gráficas (Eaton, 2002)
![Page 41: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/41.jpg)
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”
![Page 42: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/42.jpg)
Propiciação de gestos nas telas touchscreen
![Page 43: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/43.jpg)
Propiciações inesperadas pelo projeto
![Page 44: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/44.jpg)
Fluxos de interação rastreados pelo Google Analytics
![Page 45: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/45.jpg)
Estigmergia em formigas (descobrindo o melhor caminho coletivamente)
![Page 46: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/46.jpg)
Teste A/B e multivariados são uma forma de estigmergia humana
![Page 47: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/47.jpg)
Fluxo de interação antecipa a estigmergia
![Page 48: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/48.jpg)
Wireflow mostra que componentes permitem navegar pelo fluxo de telas
![Page 50: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/50.jpg)
Wireframe anotado é uma planta baixa com instruções de como ela mudaria de acordo com a interação
![Page 51: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/51.jpg)
Rabiscoframe é um esboço rápido e colaborativo dos componentes da tela
![Page 52: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/52.jpg)
Prototipação em papel é uma maneira de testar ideias rapidamente
![Page 53: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/53.jpg)
Protótipos de baixa fidelidade permitem a interação sem mostrar o visual (Pop App)
![Page 54: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/54.jpg)
Protótipo de alta fidelidade servem para testar se o projeto gráfico se desenrola bem com a interação
![Page 55: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/55.jpg)
Análise da distribuição de espaço revela as funções enfatizadas
![Page 56: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/56.jpg)
Perfil semiótico é um método para investigação das expectativas emocionais sobre uma interface
![Page 57: Design de interfaces gráficas](https://reader033.vdocuments.mx/reader033/viewer/2022042723/58f9a9bd760da3da068b71b5/html5/thumbnails/57.jpg)
Obrigado!Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPRwww.usabilidoido.com.br