Linguagem Visual Léxico Morfológico Sintaxe Cores Layout de Telas Semântica Signos Pragmática Metáforas.

Apresentação em tema: "Linguagem Visual Léxico Morfológico Sintaxe Cores Layout de Telas Semântica Signos Pragmática Metáforas."— Transcrição da apresentação:

1 Linguagem Visual Léxico Morfológico Sintaxe Cores Layout de Telas Semântica Signos Pragmática Metáforas

2 SEMÂNTICA VISUAL Os objetos visuais que se relacionam uns com os outros dentro de um sistema podem ter uma gram á tica, regras que podem ser estudadas por analogias.

3 SEMÂNTICA VISUAL Um sistema é conhecido como uma linguagem visual que, por ser uma linguagem, tamb é m possui semântica e sintaxe tal como a linguagem escrita.

4 SEMÂNTICA VISUAL Particularmente, a semântica visual conduz o significado atrav é s do uso da apresenta ç ão da imagem.

5 SEMÂNTICA VISUAL Os signos são os elementos que “ exprimem id é ias ” e provocam na mente daqueles que os percebe uma atitude interpretativa (Joly, 1996)

6 COMPOSI Ç ÃO VISUAL Compor o leiaute de uma p á gina significa construir e estruturar elementos que irão formar uma mensagem trabalhada conscientemente (Collaro, 1987)

7 COMPOSI Ç ÃO VISUAL Composi ç ão é o resultado visual geral obtido com a disposi ç ão de formatos ou formas no interior de uma moldura de referência com ou sem o uso consciente de estrutura formal, semiformal, ou informal (Wong, 1988)

8 O segredo de um trabalho bem feito está na escolha da linguagem visual adequada Chegamos às linguagens visuais

9 A semiologia concebida por Ferdinand de Saussure põe ênfase na função social do signo, enquanto Peirce, na função lógica. Como lingüista, Saussure considerava a língua como o mais importante sistema de signos. “Para Saussure, a Semiologia teria por objetivo o estudo de todos os sistemas de signos na vida social. Nessa medida, a Lingüística, ou seja a ciência que tinha por propósito desenvolver, seria uma parte da Semiologia que, por sua vez, seria uma parte da Psicologia Geral” (SANTAELLA, 1995 p.79).

10 A semiótica desenvolvida por Charles Sanders Peirce (nascido em Cambridge, Mass., EUA, em 1839 e morto em 1914) coloca-se como uma teoria geral dos signos. SANTAELLA e WINFRIED (1998, p.59) colocam que, “de fato, para a compreensão das diferentes naturezas (palavra-imagem), graus de referencialidade e aptidão comunicativa de toda e qualquer espécie de imagem e quase-imagem, é preciso empreender um retorno a Peirce.”

11 SEMIÓTICA O signo (ou representamen) é o que representa, de alguma forma, algo ou alguém, como, por exemplo, a figura de uma casa ou a foto de uma pessoa. Quando recebido por um observador, o signo cria, na mente de quem observa, um signo equivalente ou um signo mais desenvolvido de acordo com o repertório e experiências desse observador. Esse segundo signo que surge na mente do observador é chamado de representante, enquanto que a coisa representada é chamada de objeto.

12 Signo Objeto (ou referente) Representante (ou referência) Relação Triádica do Signo

13 Signo (Peirce) Símbolo (Ogden-Richards) Veículo sígnico (Morris) Expressão (Hjjelmslev) Representmen (Peirce) Serna (Buyssens) Interpretante (Pierce) Referência (Ogden-Richards) Serntido (Frege) Intensão (Carnap) Designatum (Morris, 1938) Significatum (Morris, 1946) Conceito (Saussure) Conotação, connotatum (Stuart Mill) Imagem mental (Saussure, Pierce) Conteúdo (Hjelmslev) Estado de consciência (Buyssens) Objeto (Frege-Peirce) Denotatum (Morris) Significado (Frege) Denotação (Russell) Extensão (Carnap)

14 Ícone - é um signo que tem semelhança com seu objeto, semelhança dada por caracteres individuais ou qualidades específicas existentes no objeto e no ícone. Índice- é um signo que se refere ao objeto que denota, em virtude de ser diretamente afetado por esse objeto. Símbolo- é o sígno que se refere ao objeto denotado por uma convenção, associação de idéias. Rederir-se ao signo (simbólico) é referir-se ao objeto.

15 LINGUAGEM VISUAL SIGNOS Os ícones: são representações de um conceito abstrato ou concreto. O objetivo de um ícone é transmitir, com eficiência, o significado do conceito que está a ele associado. Eles devem ser facilmente reconhecíveis e entendidos pelos usuários do aplicativo.

16 Os índices: são signos que indicam algo ou algum processo. Por exemplo, a fumaça é um indício de que há fogo no local. As marcas das pegadas dos cães são um indício de que eles passaram pelo local. LINGUAGEM VISUAL SIGNOS

17 Os símbolos: são signos que podem ser completamente arbitrários na aparência. São geralmente convenções, como por exemplo, as placas de trânsito. Os símbolos implicam num processo de aprendizado por parte do espectador, em fazer a associação entre eles e o seu significado. O espectador é levado a acreditar que tal símbolo tem tal significado porque foi convencionado. LINGUAGEM VISUAL SIGNOS

18 SEMIOLOGIA Considerando o acento na função social, a teoria da semiologia está inserida em processos de comunicação, podendo ser de diversos tipos, como a comunicação animal (zoomiótica), a comunicação de máquinas (cibernética) ou a comunicação de células vivas (biônica).

19 Signo possibilita o relacionamento com algo que conhecemos através de semelhanças, de analogias, de causa ou contiguidade com o referente (Joly, 1993)

20 GUIRAUD (1973) aborda a natureza, a forma e a função dos signos para fundamentar a sua apresentação. A função de um signo é a de comunicação através de mensagens. Para tanto, há a necessidade de uma coisa de que se fala (referente), há a necessidade do próprio signo (código), de um meio de transmissão e um emissor e um receptor. É fechado, assim, um esquema clássico de comunicação.

21 MensagemEmissorReceptor Código Referente Medium

22 Função conativa ou injuntiva – define as relações entre a mensagem e o receptor. Essa função está dirigida, tanto à inteligência, quanto à afetividade do receptor. No primeiro aspecto (cognitivo-objetivo), estão os códigos de sinalização, os programas operacionais cujo fim é organizar ações em comum, convencionadas. No segundo aspecto (afetivo-subjetivo), estão os códigos sociais, onde os signos muitas vezes, superam o conteúdo referencial da mensagem com objetivo de motivar o receptor.

23 Compreender e sentir - constitui dois pólos da mesma experiência. Esta noção nos remete novamente à função referencial (cognitiva, objetiva) e à função emotiva (subjetiva, expressiva) que caracterizam a “dupla função da linguagem.” O compreender está relacionado ao fato de sermos capazes de explicar, enquanto, o sentir, a capacidade de nos emocionarmos sem a compreensão lógica dessas emoções (amor, dor, medo, angústia, etc.).

24 Oposição dos signos lógicos e expressivos (GUIRAUD (1973, p 19). Signo LógicoSigno Expressivo ConvencionalNatural ArbitrárioMotivado HomológicoAnalógico ObjetivoSubjetivo RacionalAfetivo AbstratoConcreto GeralSingular TransitivoImanente SeletivoTotal

25 Significante e Significado O significante e o significado são componentes do signo. Segundo BARTHES (1964, p. 43), o significante constitui o plano da expressão e o significado o plano dos conteúdos. “Significado não é a ‘coisa’, mas uma representação psíquica da ‘coisa’”. O significante é um mediador, a matéria lhe é necessária mas não suficiente pois o significado também pode ser construído por certa matéria: a das palavras.

26 Forma e Substância do Significado Ex.: palavra “gato” Conteúdo FORMA Sistema conceitual de oposição Gato x Cão SUBSTÂNCIA A idéia abstrata de felinidade

27 Forma e Substância do Significante Ex.: palavra “gato” Expressão FORMA A palavra escrita SUBSTÂNCIA SUBSTÂNCIA DA FORMA (MATERIALIDADE) Som, imagem, objeto. SUBSTÂNCIA DO CONTEÚDO (IMATERIALIDADE) Significados de gato

28 Um signo é entendido como alguma coisa que está em lugar de outra, ou por outra (Eco, 1990).

29 Mensagem é a combinação de muitos signos.

30 Linguagem Visual Léxico Morfológico Sintaxe Cores Layout de Telas Semântica Signos Pragmática Metáforas

31 LINGUAGEM VISUAL SIGNOS Os signos constituem um conjunto de elementos de interação bastante importantes no design de interfaces. Eles geralmente estão associados à funções num programa, ou à mudança de tela, ou de mídia, num sistema multimídia. Eles podem estar representados simplesmente como figuras ou sobre botões de aparência tridimensional.

32 LINGUAGEM VISUAL SIGNOS Os signos constituem um tipo de metáfora, ao representarem objetos físicos familiares ao mundo real profissional dos usuários. Entretanto eles podem também representar ações ou conceitos abstratos também familiares aos usuários.

33 Questões de ordem léxica: se referem aos elementos visuais com os quais os signos são produzidos. Questões de ordem sintática: se referem à aparência dos signos e como eles aparecem no espaço e no tempo, tais como tamanho, forma, localização, e cor.

34 Questões de ordem semântica: se referem ao significado dos signos, à que eles se referem, tais como objetos concretos, objetos abstratos e ações. Questões de ordem pragmática: se referem às questões sobre como os signos são usados, são questões de ordem prática.

35

36 Os nomes das funções associadas aos signos devem ser claros, evitando abreviações e ser familiar à linguagem profissional do usuário; As características do monitor devem ser consideradas, sobretudo se for do tipo touch- screen, os ícones sobre os botões devem ter dimensões compatíveis com as dos dedos dos usuários; LINGUAGEM VISUAL SIGNOS RECOMENDAÇÕES

37 Propor várias alternativas e analisar qual delas melhor satisfaz as necessidades do mensageiro, do receptor, da mensagem e do meio (Marcus, 1992); Os ícones devem possuir os seguintes atributos: simplicidade, claridade e consistência (Marcus, 1992); LINGUAGEM VISUAL SIGNOS RECOMENDAÇÕES

38 Usar layout grid para a construção dos ícones. O layout grid é especialmente importante para o estabelecimento de uma padronização e bastante úteis quando eles são produzidos no modo bitmap (Marcus, 1992); Estabelecer e respeitar o mesmo estilo de design para todos os ícones (Marcus, 1992); LINGUAGEM VISUAL SIGNOS RECOMENDAÇÕES

39 Simplificar a aparência, os signos devem ser simples e claros para que possam evitar a possibilidade de erros de interpretação (Marcus, 1992); Uso de cores com discrição. Em geral, recomenda- se usar no máximo, cinco cores diferentes, incluindo preto, branco ou cinza (Marcus, 1992); Realizar testes com usuários típicos assim que possível (Marcus, 1992); LINGUAGEM VISUAL SIGNOS RECOMENDAÇÕES

40 Usar descrição textual ou rótulo associado ao ícone sempre que necessário (Dillon (1992) apud Righi, 1993); Para usuários inexperientes, usar apresentação alternativa ou complementar ao ícone, pois o uso de ícones parece ser mais eficaz para usuários experientes (Dillon (1992) apud Righi (1993); Evitar a possibilidade de ocorrerem ambigüidades na leitura do ícone (Easterby (1970) apud Righi (1993); LINGUAGEM VISUAL SIGNOS RECOMENDAÇÕES

41

42 Para ilustrar essa história de Pragmática, vamos às metáforas

43 Linguagem Visual Léxico Morfológico Sintaxe Cores Layout de Telas Semântica Signos Pragmática Metáforas

44 O design de metáforas de um modelo de interface está para a programação assim como a forma está para a função. LINGUAGEM VISUAL METÁFORAS

45 O pensamento de Luis Sullivan, arquiteto que viveu em Chicago no século passado, era de que: “A funcionalidade vinha antes da forma”. Foi a demonstração do auge da doutrina funcionalista.

46 No entanto, a citação de Sullivan foi alterada e devidamente corrigida pelo seu sucessor Frank Lloyd: “A forma e a funcionalidade são uma coisa só”.

47 Há dois tipos de classificação de metáforas de interface nas literaturas pesquisadas: segundo Preece (1994), elas são classificadas em metáforas verbais e metáforas de interface virtual. Heckel (1991) as classificou em metáforas de transporte e metáforas de familiarização.

48 METÁFORAS DE FAMILIARIZAÇÃO São aqueles objetos gráficos que facilitam o aprendizado de um programa por usuários novatos (Heckel, 1991). Ex: a metáfora de desktop popularizada pela Macintosh e o sistema de ícones da interface do Windows baseado na metáfora de desktop do Macintosh.

49 LINGUAGEM VISUAL - METÁFORAS Área de aplicação MetáforaConhecimento familiar Ambiente Operacional Ambiente de Hipertexto Fichas, cartões, livros, revistas. Organização flexível de textos estruturados. Ambiente Multimídia DesktopTarefas de escritório, gerenciamento de arquivos. Aposentos associados às tarefas, Ambientes virtuais. Estrutura espacial de construções, posto de trabalho.

50

51 METÁFORAS DE TRANSPORTE São aquelas que fornecem uma estrutura para a qual o usuário pode transportar diferentes tipos de problemas para o seu campo de ação (Heckel, 1991). Ex: as planilhas eletrônicas, o Page Maker (editor de textos).

52

53 METÁFORAS VERBAIS Um exemplo clássico é de pessoas que usam o processador de textos Word, cuja interface é baseada numa máquina de datilografar.

54 Os usuários são automaticamente levados a ativarem o esquema “máquina de datilografar” que permitem entender e interpretar os comandos e funções do processador Word pelo estabelecimento dessa analogia ao uso de uma máquina de datilografar convencional.

55

56 METÁFORAS DE INTERFACE VIRTUAL

57 Este tipo de metáfora descrita por Preece (1994) é, diferente de utilizar a metáfora verbal para representar ou de se transportar o uso análogo de uma ferramenta para a realização da tarefa, ou resolução de um problema pelos modos convencionais para um sistema computacional.

58 As metáforas de interface virtual representam os objetos físicos de um escritório através de ícones. Assim, os objetos eram facilmente reconhecidos pelos usuários. Um exemplo clássico desse tipo de metáfora é a de desktop, já mencionada anteriormente.

59

60 Falamos da Linguagem Visual Agora, vamos falar da Comunicação Visual

61 O uso de uma linguagem não garante a comunicação Como nos comunicar é a questão fundamental que deve orientar o trabalho do designer.

62 COMUNICAÇÃO VISUAL

63 Comunicação Visual é a transmissão da mensagem entre uma fonte e um destinatário, ambos, distintos no tempo e no espaço, utilizando código ou signos visuais comuns (Ferreira, 1994)

64 FONTE notícia EMISSOR Projetistas de site MENSAGEM Signos CANAL Internet DESTINATÁRIO Receptor

65 Comunicação escrita é a que vem através de um documento escrito, em papel ou numa tela. O índice de eficiência é maior em papel do que em tela

66 Comunicação gráfica é a que vem através de símbolos, desenhos, plantas, diagramas, ícones, fotos ou outros recursos gráficos.

67 Comunicação visual é a que vem da junção da comunicação gráfica com a escrita (Borges, 2001).

68 Comunicação áudio visual é a que junta comunicação Visual com a auditiva. Visão e audição atinge 84% de eficiência.

69

70 PARA QUE HAJA UMA BOA COMUNICAÇÃO O DESIGNER DEVE BUSCAR HARMONIA E EQUILÍBRIO NAS SUAS COMPOSIÇÕES

71 HARMONIA E EQUILÍBRIO

72 O equilíbrio é a referência mais forte e firme do homem... Todas as formas possuem um centro de gravidade... Por isso as relações básicas do homem se resumem à horizontal-vertical (Donis, 2000)

73 A composição equilibrada pode ser simétrica ou assimétrica. Na simétrica um eixo invisível divide a composição... A composição assimétrica apresenta- se mais livre e informal (Collaro, 2000)

74 Duas propriedades dos objetos visuais que exercem influência particular no equilíbrio são: Peso e Direção (Arnheim, 1986)

75 HARMONIA E EQUILÍBRIO PESO

76 O peso depende da localização. Quanto mais perto do centro... mais pesado (Arnheim, 1986)

77 HARMONIA E EQUILÍBRIO PESO

78 HARMONIA E EQUILÍBRIO DIREÇÃO

79 Direção é o sentido da trajetória das forças visuais

80

81 P1 a P4 definem a área nobre... As linhas de força.

82 AMOR é quando a paixão não tem outro compromisso marcado.

83 Não... Amor é um exagero... também não. Um dilúvio, um mundaréu, uma insanidade, um destempero, um despropósito, um descontrole, uma necessidade, um desapego? Talvez porque não tenha sentido, talvez porque não tem explicação, esse negócio de Amor, não sei explicar.

84 Eu creio na vida mansa!!

85