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

Linguagem Visual

Léxico

Morfológico

Sintaxe Cores Layout de Telas

Semântica Signos

Pragmática Metáforas

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.

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.

SEMÂNTICA VISUAL

Particularmente, a semântica visual conduz o significado através do uso da apresentação da

imagem.

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)

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)

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)

O segredo de um

trabalho bem feito está na

escolha da linguagem

visual adequada

Chegamos às

linguagens visuais

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

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

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.

Signo Objeto

(ou referente)

Representante(ou referência)

Relação Triádica do Signo

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)

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

LINGUAGEM VISUALSIGNOS

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.

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 VISUALSIGNOS

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 VISUALSIGNOS

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

Signo possibilita o relacionamento com algo que conhecemos através de

semelhanças, de analogias, de causa ou contiguidade com o referente (Joly, 1993)

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.

Mensagem

Emissor Receptor

Código

Referente

Medium

Medium

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.

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

Oposição dos signos lógicos e expressivos (GUIRAUD (1973, p 19).

Signo Lógico Signo Expressivo

Convencional NaturalArbitrário MotivadoHomológico AnalógicoObjetivo SubjetivoRacional AfetivoAbstrato ConcretoGeral SingularTransitivo ImanenteSeletivo Total

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.

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

Forma e Substância do Significante

Ex.: palavra “gato”

Expressão

FORMA

A palavra escrita

SUBSTÂNCIASUBSTÂNCIA DA FORMA (MATERIALIDADE)

Som, imagem, objeto.

SUBSTÂNCIA DO CONTEÚDO (IMATERIALIDADE)

Significados de gato

Um signo é entendido como alguma coisa que está em lugar de outra, ou por outra

(Eco, 1990).

Mensagem é a combinação de muitos signos.

Linguagem Visual

Léxico

Morfológico

Sintaxe Cores Layout de Telas

Semântica Signos

Pragmática Metáforas

LINGUAGEM VISUALSIGNOS

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.

LINGUAGEM VISUALSIGNOS

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.

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.

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.

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 SIGNOSRECOMENDAÇÕES

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 SIGNOSRECOMENDAÇÕES

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 SIGNOSRECOMENDAÇÕES

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 SIGNOSRECOMENDAÇÕES

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 SIGNOSRECOMENDAÇÕES

Para ilustrar essa história de

Pragmática, vamos às metáforas

Linguagem Visual

Léxico

Morfológico

Sintaxe Cores Layout de Telas

Semântica Signos

Pragmática Metáforas

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

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.

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

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.

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.

LINGUAGEM VISUAL - METÁFORAS

Área de aplicação

Metáfora Conhecimento familiar

Ambiente Operacional

Ambiente de Hipertexto

Fichas, cartões, livros, revistas.

Organização flexível de textos estruturados.

Ambiente Multimídia

Desktop Tarefas de escritório, gerenciamento de arquivos.

Aposentos associados às tarefas,Ambientes virtuais.

Estrutura espacial de construções, posto de trabalho.

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

METÁFORAS VERBAIS

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

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.

METÁFORAS DE INTERFACE

VIRTUAL

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.

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.

Falamos da

Linguagem Visual

Agora, vamos falar

da Comunicaçã

o Visual

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.

COMUNICAÇÃO VISUAL

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)

FONTEnotícia

EMISSORProjetistas de

site

MENSAGEMSignos

CANALInternet

DESTINATÁRIOReceptor

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

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

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

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

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

HARMONIA E EQUILÍBRIO

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)

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)

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

HARMONIA E EQUILÍBRIOPESO

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

HARMONIA E EQUILÍBRIOPESO

HARMONIA E EQUILÍBRIODIREÇÃO

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

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

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

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

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.

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.

Eu creio navida mansa!!