Aula do programa BEPiD sobre o projeto de interfaces para o usuário através de telas. Fundamentos e modelos de documentação.

1. Design de interfaces gráficas
Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPR
www.usabilidoido.com.br

2. O que é interface?
Forma que possibilita Informação
Estrutura que possibilita Interação
Função que possibilita Experiência
Sistemas
Pessoas
área cinza das possibilidades

3. Interface gráfica é o conjunto de
possibilidades oferecidas por um
sistema para informação,
interação e experiências humanas.

4. Quando a interface não tem
um conceito bem amarrado,
ela prioriza um aspecto em
detrimento de outros.

5. Projeto funcionalista: a função determina forma e
estrutura

6. Projeto formalista: a forma determina a função e
estrutura

7. Projeto estruturalista: a estrutura determina a forma e
função

8. Conceito bem amarrado
Forma
Função
Estrutura
O segredo de um conceito bem amarrado é
o desenvolvimento de cada aspecto em
relação a vários outros aspectos.

9. O conceito é expresso
através de várias linguagens
• Visuais
• Verbais
• Sonoras
• Interacionais
Material Design, Google

10. O skeumorfismo (reproduzir características do mundo
real) está gradualmente desaparecendo no iOS

11. Figuras de linguagem em
interfaces

12. Metáfora
Esboço da metáfora de
desktop, Tim Mott
Interface da Xerox Star, 1981
Uma coisa que representa outra.

13. Hipérbole
Algo representado de maneira exagerada.
Prosopopeia
Seres inanimados comportando-se como vivos.

14. Metonímia
Uma parte que representa o todo.

15. Sinestesia
Estimular um sentido para representar outro.

16. Não exagere nas figuras de linguagem.

17. Interface auto-explicativa é um mito.

18. Interface intuitiva é um mito.

19. Formas, estruturas e funções da interface tem origem
na cultura.

20. 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

21. O designer busca encaixar ou desencaixar sua criação
num padrão que ele reconhece na cultura.

22. As bibliotecas e linguagens de padrões catalogam as
soluções cultivadas por uma prática de design.

23. Além dos padrões de interação, existem os estilos
visuais.

24. 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...

25. Existem composições balanceadas e desbalanceadas.

26. A composição de uma interface é um fenômeno
emergente, pois a interface muda com a interação.

27. Uma das maneiras de projetar uma composição
dinâmica é criar um guia de estilo da interface

28. 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...

29. A hierarquia visual serve para mostrar informação em
pedaços.

30. Não é possível guiar o fluxo de leitura, porém, o usuário
percebe a hierarquia visual e reage contra ou a favor.

31. 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

32. Princípios da Gestalt aplicados ao agrupamento de
coelhos

33. 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

34. Como abrir estas portas? Não há indícios claros de como
elas propiciam esta ação (Norman, 2006)

35. Propicia puxar

36. Propicia empurrar

37. Propicia dúvida

38. Propicia confusão para brasileiros
Push Push

39. Propicia erros

40. Propiciação em interfaces gráficas (Eaton, 2002)

41. 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”

42. Propiciação de gestos nas telas touchscreen

43. Propiciações inesperadas pelo projeto

44. Fluxos de interação rastreados pelo Google Analytics

45. Estigmergia em formigas
(descobrindo o melhor caminho coletivamente)

46. Teste A/B e multivariados são uma
forma de estigmergia humana

47. Fluxo de interação antecipa a estigmergia

48. Wireflow mostra que componentes permitem navegar
pelo fluxo de telas

49. Wireframe é uma planta baixa da tela

50. Wireframe anotado é uma planta baixa com instruções
de como ela mudaria de acordo com a interação

51. Rabiscoframe é um esboço rápido e colaborativo dos
componentes da tela

52. Prototipação em papel é uma maneira de testar ideias
rapidamente

53. Protótipos de baixa fidelidade permitem a interação sem
mostrar o visual (Pop App)

54. Protótipo de alta fidelidade servem para testar se o
projeto gráfico se desenrola bem com a interação

55. Análise da distribuição de espaço revela as funções
enfatizadas

56. Perfil semiótico é um método para investigação das
expectativas emocionais sobre uma interface

57. Obrigado!
Frederick van Amstel @usabilidoido
Escola de Arquitetura e Design - PUCPR
www.usabilidoido.com.br