Práticas de Design [crismacari] by Cris Macari

ISBN 978-85-65600-16-3

SUMÁRIO RÁPIDO

Práticas de

Design

Graduação

APRESENTAÇÃO

PLANO DE ENSINO-APRENDIZAGEM

O Desenho Digital

o ciberespaço

A linguagem e a identidade no ciberespaço

Design de usabilidade na interface gráfica do usuário

Design de usabilidade e semiótica

Metodologia de projeto de ambientes hipermidiáticos centrados no usuário

REFERÊNCIAS

102

Respostas das atividades de autoavaliação

106

Prรกticas de

Design

Michelle Franรงoise Haswany de Almeida Viviane Pellizzon Agudo Romรฃo

Joaรงaba

2013

© 2013 Unoesc Virtual – Direitos desta edição reservados à Unoesc Virtual Rua Getúlio Vargas, 2125, Bairro Flor da Serra, CEP 89600-000 – Joaçaba, SC, Brasil Fone: (49) 3551-2123 – Fax: (49) 3551-2004 – E-mail: unoescvirtual@unoesc.edu.br É proibida a reprodução desta obra, no todo ou em parte, sob quaisquer meios, sem a permissão expressa da Unoesc Virtual.

A447p

Almeida, Michelle Françoise Haswany.

Práticas de design / Michelle Françoise Haswany Almeida, Viviane Pellizzon Agudo Romão - Joaçaba : Unoesc Virtual, 2013.

110 p. ; 30 cm.

Bibliografia: p. 102-105

ISBN 978-85-65600-16-3

1. Desenhos (Projetos). 2. Computação. I. Romão, Viviane Pellizzon Agudo. II. Título.

CDD 004.69

Universidade do Oeste de Santa Catarina – Unoesc Reitor Aristides Cimadon Vice-reitor Acadêmico Nelson Santos Machado

Vice-reitores de Campus Campus de São Miguel do Oeste Vitor Carlos D’Agostini Campus de Videira Antonio Carlos de Souza

Coordenação Geral da Unoesc Virtual Lucivani Gazzóla Coordenação Pedagógica Alessandra Nichele Magro

Coordenações Locais da Unoesc Virtual Campus de São Miguel do Oeste Adiles Ana Bof Campus de Videira Daniela Medeiros dos Santos Stedile Campus de Xanxerê Janine Lauschner

Campus de Xanxerê Genesio Téo

Secretaria Executiva e Logística Elisabete Cristina Gelati

Revisão Linguística e Metodológica Giovana Patrícia Bizinela Designer Instrucional Greici Fernandes da Silva

Designer Gráfico e Diagramação Cristiane Macari

Professoras Autoras Michelle Françoise Haswany de Almeida Viviane Pellizzon Agudo Romão

Sumário

Apresentação............................................................................................................................. 5 Plano de ensino-aprendizagem......................................................................................... 6

UNIDADE 1 O Desenho Digital.......................................................................................... 10

SEÇÃO 1 Desenho................................................................................................................................................................11 SEÇÃO 2 O desenho digital..............................................................................................................................................14 SEÇÃO 3 O que é design?..................................................................................................................................................23

UNIDADE 2 O ciberespaço.................................................................................................. 28

SEÇÃO 1 O ciberespaço.....................................................................................................................................................29 SEÇÃO 2 A interação da tecnologia, da cultura e do design...............................................................................32

UNIDADE 3 A linguagem e a identidade no ciberespaço....................................... 38

SEÇÃO 1 A linguagem e a identidade do futuro......................................................................................................39 SEÇÃO 2 A era das marcas: a identidade das organizações na rede..............................................................40 SEÇÃO 3 O hipertexto.........................................................................................................................................................43

UNIDADE 4 Design de usabilidade na interface gráfica do usuário.................. 50 SEÇÃO 1 Elementos do design e Composição..........................................................................................................51

UNIDADE 5 Design de usabilidade e semiótica......................................................... 74 SEÇÃO 1 Princípios da usabilidade e semiótica......................................................................................................75

UNIDADE 6 Metodologia de projeto de ambientes hipermidiáticos centrados no usuário............................................................................................................. 86 SEÇÃO 1 Hipermídia e ambientes hipermidiáticos...............................................................................................87 SEÇÃO 2 Metodologia de design....................................................................................................................................89 SEÇÃO 3 Metodologia de design centrado no usuário (hcd human centred design)...............................95

Referências............................................................................................................................... 102 Respostas das atividades de autoavaliação................................................................ 106

Veja como aproveitar a sua apostila

Este e spaço pe rmi te que você faça sua s anotaçõe s

Para ref letir

Saiba mais

Exclamação

Pergunta

Continua na próxima página

APRESENTAÇÃO

SEJA BEM-VINDO AO COMPONENTE CURRICULAR PRÁTICAS DE DESIGN!

Hoje em dia a informação está disponível para todos e mesmo assim é muito difícil nos comunicarmos com o nosso receptor. Isto está acontecendo porque os conteúdos apresentados na televisão, rádio e internet têm modelos diferentes de 10 anos atrás. A estrutura apresentada hoje tem um novo movimento de imagens que são muito rápidas. Sendo assim, a rapidez das narrativas faz com que o aumento de informações de curta duração seja predominante. Neste sentido, quem faz design precisa considerar essa dinâmica de tantas informações e espaços, de redes que se movimentam e se misturam. Devemos entender que as suas mensagens e de outras milhões de pessoas que não conhecemos têm outras referências culturais. Este Guia de Estudo é baseado no livro Design Digital, de Javier Royo, por isso trabalharemos com as quatro condições fundamentais necessárias, segundo este autor, para que aconteça um projeto de design:

� É preciso haver um espaço de percepção definido, que é também um espaço cultural e um espaço comum (de comunicação). No caso das novas tecnologias e do design digital surge um novo espaço com novas características físicas e conceituais concretas: o ciberespaço, que é o espaço pelo qual navegamos ou a “matéria” da internet; � É preciso haver pessoas que atuem sobre este espaço. Aqui encontramos os usuários desse espaço, que se movimentam e o “habitam”: os cibernautas, os usuários;

� É preciso existir um código (ou códigos) de comunicação consensual entre os usuários. Estes códigos configuram a matéria da comunicação, a própria matéria do design: a linguagem;

� Deve existir dentro desse espaço uma área possível de ser trabalhada pelo design, uma área onde se dê a comunicação (assim como é) e a linguagem, onde se produz a relação entre o meio e os usuários: a interface.

Estas quatro condições, brevemente descritas, são os tópicos das unidades que trabalharemos neste componente curricular. Bons estudos!

Michelle Françoise Haswany de Almeida Viviane Pellizzon Agudo Romão

EMENTA

PLANO DE ENSINO-APRENDIZAGEM

Semiótica. Engenharia de Usabilidade. Ferramentas de editoração gráfica na prática educativa. Aprendizado de desenho na web por meio de diferentes formas utilizando diversas mídias.

OBJETIVO GERAL

CONHECER práticas de design que influenciam o desenvolvimento de projetos de hipermídia baseados nos conceitos de usabilidade.

OBJETIVOS ESPECÍFICOS

CONHECER o conceito de desenho manual até as novas tecnologias; COMPREENDER os conceitos e aplicações do design;

APROFUNDAR a compreensão da importância da usabilidade no desenvolvimento de projetos de design;

DESENVOLVER competências e habilidades para interpretação e análise de interface gráfica.

metodologia

O componente curricular será desenvolvido por meio do Portal de Ensino Unoesc, que é a sala de aula virtual. As aulas serão acompanhadas por um grupo de professores que presta assistência metodológica e pedagógica para o desenvolvimento da aprendizagem. Além disso, o Guia de Estudo serve para orientar o aprendizado por meio de um diálogo, facilitando a compreensão dos conteúdos que serão trabalhados.

FORMAS E MOMENTO DE AVALIAÇão

Para fim de avaliação de aprendizagem do componente curricular são atribuídas notas de zero a dez pontos, considerando-se o seguinte procedimento:

O professor atribuirá notas de zero a dez às atividades avaliativas a distância, que serão no mínimo duas avaliações por componente curricular, denominadas de AD e uma prova escrita individual, abrangente e presencial, denominada de AP, das quais resultará a nota da média semestral, denominada A1, com os seguintes pesos: a) As atividades avaliativas a distância parciais de A1, denominadas de AD, terão peso 4,0; b) A atividade avaliativa abrangente de A1, presencial, denominada de AP, terá peso 6,0.

É fundamental que você leia as unidades de estudo deste componente curricular para realizar as atividades avaliativas! Evento

Atividade

CRONOGRAMA DE ESTUDO

Início do componente Leitura do programa de aprendizagem e orientações curricular iniciais Unidade 1 Unidade 2 Unidade 3 Unidade 4 Unidade 5 Unidade 6

Leitura da unidade

Realização das atividades de autoavaliação

Realização das atividades avaliativas a distância Leitura da unidade

Realização das atividades de autoavaliação

Realização das atividades avaliativas a distância Leitura da unidade

Realização das atividades de autoavaliação

Realização das atividades avaliativas a distância Leitura da unidade

Realização das atividades de autoavaliação

Realização das atividades avaliativas a distância Leitura da unidade

Realização das atividades de autoavaliação

Realização das atividades avaliativas a distância Leitura da unidade

Realização das atividades de autoavaliação

Realização das atividades avaliativas a distância

Avaliação presencial - AP

Avaliação presencial – 2ª chamada Avaliação presencial - A2

Datas ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___ ___/___

___/___ ___/___ ___/___

PLANO DE ENSINO-APRENDIZAGEM

duração

A carga horária total do componente curricular é de 60 horas-aula, incluindo o processo de avaliação. O tempo previsto para a duração do componente curricular é de aproximadamente 45 dias. O material e a metodologia foram desenvolvidos de forma que o conteúdo possa ser estudado durante este período e dentro desta carga horária. O cronograma de atividades serve para orientar o seu estudo, mas você deve ficar atento às datas e prazos para a realização das atividades.

BIBLIOGRAFIA BÁSICA

ALVES, Willian Pereira. CorelDraw 12 em português: teoria e prática. 1. ed. São Paulo: Erica, 2005.

MICELI, Maria Tereza; FERREIRA, Patrícia. Desenho técnico básico. Rio de Janeiro: Ao Livro Técnico, 2001. OLIVEIRA, Marina. Produção gráfica para designers. São Paulo: 2AB, 2001.

BIBLIOGRAFIA COMPLEMENTAR

PERÓN, Maria Luísa. Sistema de identidade visual. São Paulo: 2AB, 2001.

PRIMO, Lane. Estudo dirigido de Adobe Photoshop CS2 em português. 2. ed. São Paulo: Erica, 2006. VILLAS-BOAS, André. Princípios de identidade visual. São Paulo: 2AB, 2001.

PLANO DE ENSINO-APRENDIZAGEM

Unidade 1 O Desenho Digital

OBJETIVOS DE APRENDIZAGEM Ao final desta unidade você terá condições de:

COMPREENDER sobre desenho, sua importância e evolução; APREENDER sobre desenho digital e seu processo; DISCUTIR sobre design.

ROTEIRO DE ESTUDO Com o objetivo de alcançar o que está proposto a esta unidade, o conteúdo está dividido nas seguintes seções:

SEÇÃO 1

SEÇÃO 2

SEÇÃO 3

Desenho

O desenho digital

O que é design?

O DESENHO DIGITAL

Nesta Unidade você terá a oportunidade de estudar e compreender a definição de desenho e sua evolução como forma de comunicação do homem. Também poderá atualizar-se quanto às potencialidades dos recursos utilizados como a Realidade Aumentada (RA). Além disso, vai entender melhor o que é design e como ele participa do processo de interação do homem com as tecnologias de comunicação digital. Vamos ao estudo!

SEÇÃO 1 Desenho

história da humanidade é representada e comunicada pelo homem através dos tempos pelo desenho e pela escrita. As primeiras expressões destas habilidades, iniciadas ainda na pré-história, foram produzidas a partir de traços simples nas paredes das cavernas, onde o homem representava seu mundo exterior, suas atividades e a natureza tal qual sua vista captava. [...] vivendo num mundo perigoso e hostil, o homem primitivo deixava

marcada nas paredes das cavernas a sua experiência. Sua habilidade para expressar, por meio de símbolos, os conceitos e ocorrências mais comuns

de sua vida, era um guia para sobrevivência de sua família ou de sua tribo.

Simbolicamente, eram representados não só os fatos do seu dia-a-dia, como a caça de animais, mas também os sobrenaturais, como o fogo, o raio, o sol e a lua. Os indivíduos que podiam desenhá-los, interpretá-los, passaram a ter com eles uma relação mística. Evocando deuses e demônios com seus símbolos mágicos, eles estabeleceram regras para que se pudesse viver em comunidades. Nascimento, morte e outros fenômenos inexplicáveis

passaram a ser atribuídos aos deuses. Rituais e símbolos ordenavam sua comunicação com essas entidades. (STRUNK, 2001, p. 59).

Das pinturas nas cavernas até os sofisticados modelos interativos contemporâneos, por motivos espirituais ou meramente práticos, o percurso do homem e sua comunicação, por meio do desenho, tem atravessado um longo processo de compreensão do espaço físico, das leis e das técnicas utilizadas para desenvolvê-lo. Veja as figuras a seguir:

O D E S E N H O D I G I TA L

PARA INICIAR NOSSOS ESTUDOS

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Figura 1 – Pintura rupestre

Fonte: INICIOM (2012).

Figura 2 – Modelagem CAD

Fonte: Lourenço ([20--]).

A intuição aliada ao método e a técnicas cada vez mais apuradas de desenho, nos possibilitaram representar objetos e fatos de maneira cada vez mais exata e real, e a criação de estilos tão variados quanto é a variedade de público. Você já deve ter observado que o desenho é utilizado nos mais diversos segmentos profissionais de áreas ligadas à criação, designers, arquitetos, artistas, publicitários, engenheiros, projetistas etc., os quais utilizam o desenho como recurso principal e fundamental para desenvolver e representar suas ideias.

O DESENHO DIGITAL

Entre o papel e a inspiração do homem, o desenho é o meio em que o pensamento criativo toma forma por meio de linhas, pontos e cores. Esta materialização da ideia geralmente é realizada, em primeiro momento, de forma rápida e despreocupada de perfeição e medidas. Este tipo de desenho chamamos de croqui. O croqui sempre é usado como uma ferramenta de ajuda e autoanálise, pelo fato de sermos nós mesmos os autores e receptores; desta forma podemos trabalhar com total liberdade na sua linguagem.

Quando um projeto é apresentado ainda na forma de croqui podemos perceber a natureza e a essência do projeto, ficando clara a marca pessoal do autor. A partir deste desenho inicial, o projetista amadurece as suas ideias, representando a forma no papel do que era, até então, algo da sua imaginação. O croqui estimula o pensamento criativo ajudando-o a evoluir. Figura 3 – Croqui da Catedral Metropolitana de Brasília feito por Oscar Niemeyer

Fonte: Construção e Design (2010).

Depois da fase de criação, existe o desenho de projetos, no qual é trabalhada toda a estrutura e o detalhamento, onde o desenho ganha métodos e técnicas sofisticadas de representação.

O processo criativo inicia em nossas mentes até o momento em que apresentamos nossas ideias por meio do desenho. Todas as ferramentas,

O D E S E N H O D I G I TA L

É preciso ter sempre presente que o desenho, assim como a escrita e a fala, é um ato de comunicação e, como tal, para que possa estabelecer um diálogo efetivo, é necessário que se compartilhem entre o emissor e o receptor da mensagem os códigos de interpretação da linguagem utilizada (MENEGOTTO; ARAUJO, 2000, p. 1).

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

lápis, papel, computador, programas, entre outros, são úteis na hora de desenvolver e expressar a criatividade. A escolha da ferramenta dependerá da habilidade e intimidade que o desenhista possui, com um ou outro instrumento, e este é o fator que determina a sua metodologia de trabalho e auxiliará na melhor execução e qualidade do projeto. Vivemos em uma era onde a tecnologia dominante passou a ser o processamento e disseminação da informação. Fomos deslocados do desenho manual para outra forma de experimentação com meios digitais. O desenho digital vem ganhando força no cenário profissional ganhando os espaços que pertenciam ao desenho manual.

Ainda em processo de adaptação e aprendizagem, carecemos de metodologias de trabalho que se adaptem às novas ferramentas tecnológicas, o que acaba por nos provocar medo e desconfiança. Sem dúvida, temos muito a aprender e a nos desenvolver com este processo de criação, comunicação e representação digital.

SEÇÃO 2 O desenho digital

era digital não surgiu apenas para resolver nossos problemas, mas para nos auxiliar em sua resolução.

O computador é um instrumento de trabalho mais complexo do que o lápis e a régua, porém é a criatividade e o conhecimento do desenhista que conduzirão o computador por todo o processo de desenvolvimento projetual.

Veja que no desenho manual os traços feitos sobre o papel se transformam em um desenho único e para qualquer alteração, como mudar seu tamanho, um novo desenho deverá ser realizado. E quando trabalhamos com desenhos feitos por meios digitais esta operação não é necessária.

A representação gráfica realizada por meio digital pode ser feita desenhando, isoladamente, as partes que constituem os objetos e, fazendo uso de transformações geométricas (translação, rotação, mudanças de escala e reflexões), podemos unir e relacionar essas partes, em um único modelo. O sucesso com sistemas digitais de desenho depende em grande parte das transformações aplicadas durante o processo. O estudo e

O DESENHO DIGITAL

planejamento das formas geométricas básicas, que serão reaproveitadas no futuro, é fundamental para o desenvolvimento de desenhos digitais.

O D E S E N H O D I G I TA L

Figura 4 – Ambiente de trabalho do artista

Fonte: Oswald ([20--]).

No desenho manual quem comanda e dirige a ferramenta, o lápis, é o desenhista, trabalhando sua habilidade e seu traço com toda perícia; no desenho digital, os comandos do programa vão responder aos comandos de quem está operando o computador. Figura 5 – Desenho Digital

Fonte: Oswald ([20--]).

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

O computador é uma ferramenta que nos possibilitou uma nova forma de desenhar; com ele podemos simular diversas técnicas e criar efeitos fantásticos. Em poucos anos o computador evoluiu e sofreu grandes mudanças, da mesma forma quanto aos programas e técnicas de desenho digital que hoje em dia nos permitem simular os objetos com alto grau de realismo.

A sofisticação de programas, máquinas e interfaces, nos aproxima a cada dia de um processo de “concepção-produção” contínuo, do ponto onde os objetos industriais são criados em um computador, e, no outro extremo, uma fábrica recebe a informação digitalizada para sua produção. Estudos, pesquisas e disciplinas ligadas à criação digital têm nascido nestas últimas décadas para atender as novas áreas ligadas ao desenho como arquitetura, design e engenharia. Veja algumas dessas novas áreas: o CADD (Computer Aided Design and Drafting), CAE (Computer Aided Engineering), CAM (Computer Aided Manufacturing) e o GIS (Geographic Information System). Figura 6 – CADD (Computer Aided Design and Drafting)

Fonte: Schoolgalore ([20--]).

Para complementar seus estudos conheça mais sobre a computação gráfica (C.G.) que é a área da computação que gera imagens, em forma de representação de dados e informação, ou em forma de recriação do mundo real. Os softwares mais utilizados atualmente são: � Desenho Vetorial/Ilustradores: Illustrator, CorelDraw; � Desenho de bitmaps/Edição de fotos: Adobe Photoshop, Corel Photo Paint; � Edição de Vídeo: After Effects, Adobe Premiere. � Softwares de Modelação 3D/CAD: Autocad, 3DMax, Google SketchUp, Blender, SolidWorks, Rhino3d.

O DESENHO DIGITAL

As imagens utilizadas nos sistemas de visualização das informações são representações gráficas digitais que possuem características bem particulares. Estas, por sua vez, normalmente são entendidas apenas pelos profissionais da área que conhecem os significados contidos no emprego de cores, formas, sombras e texturas. Porém, uma nova tecnologia vem sendo experimentada: a Realidade Aumentada (RA). Mas, o que significa a Realidade Aumentada?

O avanço da tecnologia e da multimídia e a busca por métodos inovadores levaram pesquisadores a desenvolver e a experimentar um novo sistema de visualização de informa-ção. Denominado de Realidade Aumentada (RA), este sistema é resultante da evolução da cha¬mada Realidade Virtual (RV) (TORI; KIRNER; CISCOUTO, 2006).

Observe a seguir os exemplos da diversidade de áreas de atuação da RA: � Engenharia: avalia virtualmente a construção de empreendimentos, aviões, carros e navios; � Cinema;

� Jogos eletrônicos;

� Dispositivos de segurança e testes; � Ações de publicidade e marketing;

� Medicina: em procedimentos complexos, cirurgias e exames; � Design;

� Educação e treinamentos;

� Dispositivos de navegação;

� Serviços militares ou de emergência, como sistemas trajáveis, instruções, mapas e informações de inimigos ou feridos;

� Prospecção em hidrologia, ecologia ou geologia, mostrando informações específicas sobre o terreno ou mapas tridimensionais; � Aplicações para aumentar a percepção do dia a dia;

� Visitação aprimorada, legendas ou textos históricos referentes a objetos ou locais vistos, ruínas ou paisagens reconstruídas; � Simulações tais como de voo ou de mergulho.

O D E S E N H O D I G I TA L

Atualmente, as representações grá¬ficas, sejam elas impressas, pintadas, desenhadas, reveladas, na tela do computador e em diversas outras formas de expressão, estão por toda a parte com o intuito de informar.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Diferentemente da RV, na qual o usuário é imerso em um ambiente criado digitalmente (TORI; KIRNER; CISCOUTO, 2006), um sistema de RA combina objetos reais e virtuais em um ambiente real, no qual estes coexistem alinhados e em tempo real (AZUMA, 2001). Uma vez que a RA, assim como a RV, possibilita a interação do usuário com os objetos virtuais, ela vem sendo experimentada e utilizada por diferentes segmentos, com propósitos diversos. Entre as várias aplicações da RA, podem-se citar as empregadas em treinamentos militares, em atividades colaborativas, como estratégias comerciais, entretenimento, na educação, na medicina e no design.

Para Tori, Kirner e Ciscouto (200, p. 10), a RA pode ser definida como “[...] o enrique-cimento do ambiente real com objetos virtuais, usando algum dispositivo tecnológico, funcio¬nando em tempo real.” Considera-se importante destacar que as imagens são registradas em três dimensões e que se trata de um sistema multissensorial, conforme exposto por Azuma (1997). Ainda de acordo com Azuma (1997) a RA melhora a percepção do usuário em relação ao mundo real, como também sua inte¬ração com este. Os objetos virtuais mostram informações que o usuário, muitas vezes, pode não perceber sozinho, auxiliando-o e melhorando o seu desempenho nas tarefas do ambiente real. Figura 7 – Exemplo de realidade virtual com o sistema CAVE

Fonte: Best... (2001).

Um dos aspectos mais promissores da RA é que ela pode ser usada de forma visual e interativa para a aprendizagem, permitindo a sobreposição de dados para o mundo real tão facilmente como ela simula processos dinâmicos. Uma segunda característica fundamental da RA é a sua capacidade de responder ao usuário instantaneamente.

O DESENHO DIGITAL

Processos dinâmicos, conjuntos de dados extensos, objetos demasiado grandes ou demasiado pequenos para serem manipulados, podem ser trazidos para o espaço pessoal de uma pessoa em uma escala, de forma fácil de entender e trabalhar. Em um contexto mais amplo da educação, a RA é interessante porque o estudante encontra conexões entre sua vida e sua educação, rompendo fronteiras entre o aprendizado formal e o informal, pois transcende as instituições de ensino. Hoje em dia, o potencial para a aprendizagem imediata, sem óculos especiais ou outros equipamentos, é um aspecto profundamente atraente desta tecnologia.

Um dos usos mais predominantes da RA é anotar espaços existentes com uma informação sobreposta. O Museu de Londres, por exemplo, lançou um aplicativo para iPhone grátis chamado StreetMuseum que utiliza posicionamento de GPS e georreferenciamento que permite aos usuários, que estão caminhando pela cidade de Londres, visualizarem informações e imagens históricas em 3D, sobrepostas em locais, em prédios contemporâneos. Similarmente, um projeto chamado (itacitus) Intelligent Tourism and Cultural Information Through Ubiquitous Services, permite ao usuário visitar locais históricos, como o Coliseu, e, com seu dispositivo celular, testemunhar um evento do passado.

Veja o site do Museu de Londres utilizando a Realidade Aumentada: <http://www. museumoflondon.org.uk/Resources/app/you-arehere-app/home.html>. Assista ao vídeo, no link: <http://www.youtube. com/watch?v=AAvTSa8zgxU> ou clicando na caixa seguir:

O D E S E N H O D I G I TA L

A interatividade da RA confere um potencial significativo para a aprendizagem e avaliação. A RA é uma tecnologia ativa e não passiva; você pode usá-la para construir uma nova compreensão com base em interações com os objetos virtuais que trazem dados para a vida.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Figura 8 – StreetMuseum utilizando a Realidade Aumentada

Fonte: Zhang (2010).

O DESENHO DIGITAL

O D E S E N H O D I G I TA L

Figura 9 – StreetMuseum utilizando a Realidade Aumentada

Fonte: Zhang (2010).

Figura 10 – StreetMuseum utilizando a Realidade Aumentada

Fonte: Zhang (2010).

Livros aumentados também ganham espaço. Há formatos que permitem as imagens 3D emergirem dos livros, porém, essa tecnologia requer o uso de óculos. Apesar desta área estar mais centrada em livros infantis, o uso de RA em textos de ensino superior é uma grande promessa.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Figura 11 – Livro utilizando Realidade Aumentada

Fonte: AR BLOG (2011).

Assista aos vídeos sobre Realidade Aumentada na educação e em ebooks. Veja que interessante, clique nos links: <http://www.youtube.com/ watch?v=QXsL14VUaDk> e <http://www.youtube. com/watch?v=HZlK3d9Knt0> ou nas caixas a seguir:

O D E S E N H O D I G I TA L

O DESENHO DIGITAL

SEÇÃO 3 O que é design?

m inglês a palavra design pode ser usada tanto como um substantivo quanto como um verbo. O verbo refere-se ao processo de dar origem e então desenvolver um projeto de algo. É o casamento entre a técnica e a estética, a beleza e a funcionalidade, aplicados ao planejamento e à produção de objetos, seja para uso, seja para a contemplação.

É importante assistir ao vídeo que pode ser acessado ao clicar no link: <http:// www.youtube.com/watch?v=XPg_ fHbVYms>.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Assista ao vídeo que define o Design e sua aplicação acessando no link: <http://www.youtube.com/ watch?v=hwIAM4RAnZw> ou clicando na caixa a seguir:

O design trabalha com linguagens de representação, que vão do desenho à mão livre aos mais avançados recursos de computação gráfica, passando pela modelagem digital, pela construção de maquetes e modelos. Desenvolve protótipos de produtos, layouts de peças gráficas e interfaces digitais.

O DESENHO DIGITAL

Design é uma atividade cujo objetivo é estabelecer qualidades multifacetadas de objetos, serviços e seus sistemas em ciclos de vida completos. Portanto, design é o fator central da humanização inovadora das tecnologias e um fator crucial de intercâmbio cultural e econômico (International Council of Societes of Industrial Design – ICSI).

O processo de design pode ser conceituado, também, como sendo um sistema processador de informações, alimentado em sua entrada por categorias de informações referentes a clientes, mercados, concorrentes, legislação e tecnologias, dentre outras, que são processadas com base em um método próprio, auxiliado por ferramentas diversas e influenciado pela experiência, crenças, valores, referências e repertório dos profissionais envolvidos (SANTOS, 2002). A intenção do design, seja de produto, moda, interiores, gráfico ou qualquer outra de suas vertentes, é conquistar as pessoas.

Design gráfico é um processo técnico e criativo que utiliza imagens e textos para comunicar mensagens, ideias e conceitos, com objetivos comerciais ou de cunho social. Desta forma, podemos considerar o design gráfico ligado não apenas a uma função estética, mas, também, a uma atividade que lida fundamentalmente com a informação, com a comunicação.

O Design Gráfico não é tão rarefeito nem tão especial. Não é uma profissão, é um meio. É um modo de tratamento, um meio de comunicação. É usado através da cultura em vários níveis de complexidade e com vários graus de sucesso. É isso o que é importante sobre o Design Gráfico. É isso o que o torna interessante. E ele está em atividade em todo lugar onde há palavras e imagens (KALMAN; MILLER, JACOBA, 1994, p. 27).

O D E S E N H O D I G I TA L

Qual é o objetivo do design?

PRÁTICAS DE DESIGN

AUTOAVALIAÇÃO 1

P R ÁT I C A S D E D E S I G N

1 Comente sobre a importância do desenho.

2 O que é desenho digital?

3 Quais são os softwares utilizados para a computação gráfica?

4 O que é design?

O desenho foi a principal forma de comunicação do homem e ainda hoje é usado como ferramenta de expressão. Acompanhou o processo evolutivo da sociedade e das tecnologias, inicialmente de forma manual e atualmente realizado por meio de sistemas digitais. O desenho é o meio pelo qual o design materializa suas ideias, seus projetos com o intuito de facilitar a vida do homem. Na próxima unidade você vai estudar sobre o design digital.

O D E S E N H O D I G I TA L

O DESENHO DIGITAL

Unidade 2 O CIBERESPAÇO

OBJETIVOS DE APRENDIZAGEM Ao final desta unidade, você terá condições de: COMPREENDER o que é ciberespaço;

ENTENDER sobre a interação da tecnologia, design e cultura.

ROTEIRO DE ESTUDO Com o objetivo de alcançar o que está proposto a esta unidade, o conteúdo está dividido nas seguintes seções:

SEÇÃO 1

SEÇÃO 2

O ciberespaço

A interação da tecnologia, da cultura e do design

O CIBERESPAÇO

PARA INICIAR NOSSOS ESTUDOS

A evolução das tecnologias de informação e a crescente expansão do espaço cibernético está intensificando as transformações sociais nos mais diversos campos da atividade humana, afetando todas as áreas do conhecimento. Cada dia mais estamos usufruindo da facilidade de encontrar as mais diversas informações disponibilizadas na Internet, que é vista hoje como o principal meio de pesquisa, leitura, estudo, relacionamento (conversação, chat), discussão (fórum) e compras. Desta forma, devemos fazer uma boa análise das características específicas do meio digital, pois o uso destas novas tecnologias nos leva a um espaço onde o usuário necessita de ferramentas que sejam compreendidas por ele, que facilitem e auxiliem nas suas práticas.

Desenvolver um projeto de design somente é possível se conhecemos a natureza e as especificidades do que deverá ser criado; por isso a importância da análise das características próprias do meio digital. O conjunto de informações que determinam os conhecimentos necessários como os equipamentos, as tecnologias, os sistemas, conhecimentos de ferramentas físicas e conceituais, inerentes ao processo da prática de design nos ajudarão a realizar com mais eficiência nosso trabalho. A análise constante do meio se torna uma necessidade na busca de melhorias e reformulações, levando-se em conta que no ciberespaço as inovações são contínuas e as exigências do usuário também evoluem constantemente. Para tanto, nesta unidade você vai conhecer a definição de ciberespaço e analisar a relação entre a tecnologia, cultura e design.

SEÇÃO 1 O ciberespaço

sociedade hoje é extremamente dependente do Ciberespaço, por meio dele as pessoas estão se relacionando e ficando mais próximas, o mercado mais competitivo e as empresas mais eficientes. Mas afinal, o que é ciberespaço?

O C I B E R E S PA Ç O

Nesta unidade você vai estudar sobre o design digital e para compreendê-lo é preciso conhecer e entender o ciberespaço.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Segundo Lévy (2005), a palavra ciberespaço foi inventada em 1984 por William Gibson em seu romance de ficção científica Neuromante, com o intuito de designar o universo de redes digitais. Turkle (1995) afirma que o nome do romance era Neuromancer, e que o mesmo celebrava uma nova estética: a dos prazeres da simulação e da navegação nos novos ambientes possíveis pela interconectividade de computadores. Lévy define o ciberespaço como o “[...] espaço de comunicação aberto pela interconexão mundial dos computadores e das memórias dos computadores.” Essa definição inclui o conjunto dos sistemas de comunicação eletrônicos (aí incluídos os conjuntos de redes hertzianas e telefônicas clássicas), na medida em que transmitem informações provenientes de fontes digitais ou destinadas à digitalização (LÉVY, 2005, p. 92).

Ciberespaço é o ambiente composto pelas redes de telecomunicações onde circula as informações digitais em diversos formatos e dispositivos. Também pode ser compreendido como uma dimensão da sociedade em rede, onde os fluxos definem novas formas de relações sociais (CASTELLS, 1999, p. 490).

Podemos então afirmar que o ciberespaço diz respeito a uma forma de comunicação virtual em rede, onde por meio da tecnologia, os homens, através dos computadores, passam a criar conexões e relacionamentos capazes de organizar e gerenciar espaços de sociabilidade virtual.

Royo (2008, p. 21), comenta que uma das características que mais evidenciam o ciberespaço é a interconexão de informações, de usuários ou de recursos. Também é feita referência aos sistemas tecnológicos e à concepção do sistema como algo que une elementos e cria dependências de tecnologias e de dados compartilhados. Além disso, é feita referência à comunicação e, portanto, à interatividade e à linguagem. Por fim, faz alusão aos automatismos, à memória, à interação pessoa-computador, à eletrônica como parte física do ciberespaço ou aos sistemas de controle e comando por parte do usuário.

Com as tecnologias em constante evolução e com a popularização da Internet, o ciberespaço está exigindo que o indivíduo participe cada vez mais e torne-se um agente ativo. Este é o espaço onde as possibilidades de interação acontecem para a aprendizagem, produção, circulação e discussão de informações e, desta forma, é o espaço a partir do qual o design deve criar ferramentas e interfaces de comunicação que facilitem a utilização pelo indivíduo.

O CIBERESPAÇO

O C I B E R E S PA Ç O

Figura 12 – O ciberespaço

Fonte: Sociedade... (2012).

A seguir você vai conhecer, segundo Royo (2008, p. 27), as características do ciberespaço sob o ponto de vista da comunicação e do design digital. Para compreendê-las melhor serão divididas em quatro grupos, de acordo com sua natureza: � Características intrínsecas: são aquelas relativas à própria estrutura e natureza do ciberespaço. É um grupo de características gerais que diferenciam do espaço; � Características especiais: este grupo está concentrado nas características de tipo e relações espaciais do ciberespaço;

� Características temporais: influenciam e mudam a percepção do tempo no ciberespaço; � Características culturais e sociais: definem o ciberespaço como espaço social, espaço para ação e relação.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Quadro 1 – Características do ciberespaço

Fonte: Royo (2008, p. 39).

SEÇÃO 2 A interação da tecnologia, da cultura e do design

ara a discussão e análise do design digital se faz necessário o entendimento e a contextualização das relações do design com os fatores socioculturais e tecnológicos. Para você entender melhor, vamos definir tecnologia, cultura e design e a interação existente entre eles.

O CIBERESPAÇO

Tecnologia

Nenhuma tecnologia nasce impunemente; muito pelo contrário, cada invenção tecnológica aparece quase sempre como produto de novos fatores e das novas condições materiais de produção e, sobretudo, pela inter-relação e entrecruzamento dos diversos sistemas ou canais existentes (PLAZA, 1986, p. 17).

Cultura Podemos dizer sobre cultura que é um conjunto de ideias e expressões de vida, comportamentos e costumes moldados a partir do desenvolvimento artístico, tecnológico, científico e industrial de uma determinada sociedade. O design contemporâneo é um dos produtores e disseminadores da cultura. Um reflexo da atividade humana e sua evolução. Os avanços culturais, tecnológicos e do design acontecem a partir da correlação destes três elementos e esta integração estimula o desenvolvimento constante da sociedade e do homem.

No desenvolvimento desta tríade – tecnologia, cultura e design – temos como fator principal o homem, pois ele é o usuário e é a partir dele, de suas necessidades, interesses e progressos que nos norteamos no projeto. O projeto nasce para que possamos solucionar as problemáticas detectadas. Para elucidar, vejamos o esquema que Royo (2008) descreve a seguir (Esquema 1).

Na relação da tecnologia com a cultura, a tecnologia leva para a cultura novas possibilidades de ação, juntamente com novas linguagens implícitas na própria tecnologia, que promovem uma visão renovadora do mundo. A cultura influi na tecnologia oferecendo novas ferramentas conceituais provenientes das novas visões que a tecnologia traz e da ação do ser humano sobre o meio em que vive. Por sua vez, a cultura também oferece ao design novas ferramentas conceituais a partir de todos os campos e lhe transmite os problemas oriundos das necessidades humanas de uso e de desenvolvimento. O design, ajudado pela tecnologia, devolve à cultura soluções conceituais e práticas aos problemas formulados: dá a ela novas possibilidades de ação e, acima de tudo, uma nova visão diante de objetos e de espaços.

O C I B E R E S PA Ç O

Utilizaremos tecnologia no sentido de que são todas as manifestações ou ações empreendidas para desenvolver novas ferramentas que servem para conduzir as organizações e a vida humana. Ou seja, a tecnologia como uma linguagem própria das ciências relacionadas com o ciberespaço (informática, eletrônica etc.) como criador de dispositivos (ROYO, 2008, p. 40).

PRÁTICAS DE DESIGN O design desenvolve ferramentas conceituais para facilitar o uso da tecnologia. Contribui com elementos de inovação e especulação com os quais a tecnologia se desenvolve e se torna funcional. A tecnologia exerce papel de ferramenta para o design e traz novas formas linguísticas. Propõe, também, novos espaços para a ação do design e para a comunicação do homem.

Design P R ÁT I C A S D E D E S I G N

Bonsiepe (2010) argumenta que apesar das divergências na definição de design, existem duas características do design comumente aceitas: a orientação à qualidade de uso e à qualidade formal-estética. Ainda de acordo com Bonsiepe, o design encontra-se na interseção entre cultura, indústria, mercado e tecnologia sendo, portanto, uma categoria autônoma e própria. Quando tratamos o design isoladamente corremos o risco de cair na armadilha do formalismo estético. O design é o último elemento da cadeia por meio da qual a inovação científica e tecnológica vem introduzida na prática da vida cotidiana (BONSIEPE, 1997, p. 38).

O design, como já definimos antes, trabalha em busca da solução de problemas, com o intuito de facilitar as atividades dos indivíduos, melhorando o processo de uso e comunicação de objetos e sistemas. Isto é.

O Conselho Internacional das Organizações de Design Industrial (ICSID) descreve as seguintes “tarefas” do design: promover a ética global (i.e. desenvolver projetos sustentáveis e de proteção ambiental); promover a ética social (i.e. preocupar-se com os usuários finais e produtos); promover a ética cultural (i.e. apoiar a diversidade cultural); oferecer produtos, serviços e sistemas que sejam expressivos e coerentes com a sua própria complexidade; e oferecer benefícios e liberdade para a comunidade (SOUTO, 2012). Como Anthony Dunne afirma “[...] designers e artistas estabelecem pontes entre mundos imateriais, digitais e a cultura material dos objetos” (DUNNE apud BÜRDEK, 2006, p. 393).

O CIBERESPAÇO

O C I B E R E S PA Ç O

Esquema 12 – Relação entre tecnologia, cultura e design

Fonte: Royo (2008, p. 42).

EXEMPLO

Exemplo da relação tecnologia-cultura-design: o aparecimento das mensagens para celulares SMS (ou seja, as mensagens de texto enviadas de celular para celular).

PRÁTICAS DE DESIGN

AUTOAVALIAÇÃO 2

P R ÁT I C A S D E D E S I G N

1 O que é ciberespaço?

2 Quais são as características do ciberespaço?

3 Defina cultura, tecnologia e design.

O CIBERESPAÇO

O C I B E R E S PA Ç O

4 Qual é a relação existente entre cultura, tecnologia e design?

Nesta unidade você viu que o ciberespaço é o local onde acontecem as trocas de informações e no qual, com o uso da tecnologia, o homem se relaciona e cria conexões em um espaço virtual. Analisamos a relação entre tecnologia, cultura e design. A associação destes três elementos amplia as possibilidades de ação com desenvolvimento de novas ferramentas conceituais e formas linguísticas na comunicação, propondo uma nova visão ao homem de objetos e de espaços, podendo assim, por meio das tecnologias, mudar sua percepção do mundo.

Unidade 3 A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO OBJETIVOS DE APRENDIZAGEM

Ao final desta unidade, você terá condições de:

COMPREENDER sobre a linguagem e a identidade do futuro;

CONHECER a era das marcas e a importância da identidade das organizações na rede; ENTENDER sobre o hipertexto.

ROTEIRO DE ESTUDO

Com o objetivo de alcançar o que está proposto a esta unidade, o conteúdo está dividido nas seguintes seções:

SEÇÃO 1

SEÇÃO 2

SEÇÃO 3

A linguagem e a identidade do futuro

A era das marcas: a identidade das organizações na rede

O hipertexto

A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO

PARA INICIAR NOSSOS ESTUDOS Os efeitos da expansão tecnológica e a linguagem virtual já são observados no dia a dia e fazem parte da nova forma de comunicação. O design sendo um disseminador e formador de cultura, trabalha melhorando as possibilidades de ação do usuário tornando mais fáceis e agradáveis os caminhos que deverá percorrer.

Segundo Royo (2008, p. 75), o uso dos códigos linguísticos em um meio como o ciberespaço cria ferramentas de comunicação: projetar uma interface gráfica é criar uma ferramenta de comunicação a partir da linguagem. Essas ferramentas dependem da cultura em seu sentido mais amplo, como a percepção do mundo por parte do indivíduo.

Trabalhamos com diversos princípios para projetar, aprimorando a interação do usuário com os sistemas e ambientes a partir da linguagem. Vamos ao estudo!

SEÇÃO 1 A linguagem e a identidade do futuro

e a humanidade está em constante evolução, é claro que dessa evolução também faz parte a linguagem. É por meio da linguagem, tanto oral quanto escrita, realizada com o uso de um alfabeto ou de um determinado código de signos, ou do desenho, que o homem desenvolveu e aprimorou sua comunicação. A evolução e o desenvolvimento da comunicação se estenderam aos gêneros textuais, os quais podemos exemplificar mencionando um simples bilhete ou um e-mail, conversas em chats, romances, resenhas etc., ou seja, textos de qualquer espécie, literários ou não, que aparecem nos diversos ambientes discursivos da sociedade.

A escrita tornou-se coletiva, intertextual e interativa (hipertexto), mudando os conceitos, até então estabelecidos, de emissor (código/ mensagem) e receptor, onde, no contexto destas novas tecnologias e ambientes virtuais de interação, podemos colocar como autor o próprio leitor/receptor. Essa mudança é claramente percebida nas redes sociais. Como usuários destes ambientes virtuais, navegamos no ciberespaço utilizando os objetos e os espaços a partir do conhecimento que adquirimos por intermédio da linguagem.

O ciberespaço, mesmo sendo um ambiente virtual, tem características diversas de outros ambientes reais e o usuário, por meio de recursos

A L I N G U A G E M E A I D E N T I D A D E N O C I B E R E S PA Ç O

Fazendo uso de várias ferramentas de comunicação o design digital, como você viu na unidade anterior, atua sobre a tecnologia trabalhando com diversos códigos linguísticos.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

linguísticos, se define, cria uma personalidade e identidade que pode ou não corresponder com a realidade. Enfim, um sujeito cria uma identidade na linguagem, no contexto, na imagem e na interação que o definirá na sua existência virtual. Nasce um indivíduo que é mais formado por corpo linguístico e cuja identidade está em constante movimento, determinada por processos complexos, mutantes, coletivos e multilineares.

A identidade no ciberespaço é o ponto fundamental da linguagem no design digital. A identidade é a ferramenta que utilizamos para poder nomear tudo aquilo que nos rodeia: pessoas, animais, vegetais ou coisas. A pessoa que entra no ciberespaço projeta sua identidade e navega, agindo como se realmente estivesse ali dentro. O design digital é o encarregado de permitir ao usuário, à empresa ou à entidade, a sua existência no ciberespaço. Ou seja, de prover-lhes uma linguagem própria que lhes permita existir, agir e evoluir ali (ROYO, 2008, p. 76).

SEÇÃO 2 A era das marcas: a identidade das organizações na rede

identidade de uma pessoa, empresa ou organização é o resultado de uma série de impressões geradas por um conjunto de mensagens e experiências percebidas pelo seu público. Ela exerce um impacto imediato e pode influenciar diretamente no conceito que este público irá formular a respeito da organização. A identidade de um ser (uma empresa, uma pessoa ou qualquer organização) é o resultado do conjunto de mensagens e experiências que esse ser

transmite, e que fala de suas características materiais e imateriais. A

identidade é experimentada pelo usuário em todas as suas facetas em

relação à transmissão, ferramentas que colocamos à disposição do usuário e na funcionalidade que essa ferramenta oferece (que é entendida como

pertencente à marca X) para ele. Portanto, a experiência de uso pode ser

entendida também como a soma de mensagens (linguagem) que o usuário receberá como parte da identidade da marca. (ROYO, 2008, p. 78).

A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO

EXEMPLO

A construção consistente da identidade garante para qualquer organização o conhecimento e o reconhecimento por parte do seu público. Ela agrega significado, gera credibilidade, confiança e influência. O usuário não vê apenas uma marca, ele não enxerga apenas a representação de um bem ou serviço, mas sim sensações, experiências, sentimentos, sonhos e expectativas, ou seja, valores subjetivos.

A partir dessas afirmações entendemos que no ciberespaço, a identidade de uma organização é direcionada ao público que participa e se articula neste ambiente virtual e, para tanto, a comunicação deve ser feita por um conjunto de mensagens semânticas e funcionais que sejam estabelecidas a partir de uma linguagem própria e inerente à marca. As organizações usam marcas para que funcionem como elementos

representativos de sua identidade, da natureza e características de seus produtos. Essas marcas assumem várias formas, a partir de nomes, dos

símbolos visuais figurativos ou emblemáticos e dos logotipos, composições

gráficas fixas que estabelecem fácil identificação das empresas e entidades junto a consumidores e usuários. (TORQUATO, 1992, p. 269).

Pinho (1996) comenta que a marca é mais que um simples nome, sendo que ela: [...] passa a significar não apenas um produto ou serviço, mas incorpora

um conjunto de valores e atributos tangíveis e intangíveis relevantes para o consumidor e que contribuem para diferenciá-la daquelas que lhe são

similares. Assim, ao adquirir um produto, o consumidor não compra apenas um bem, mas todo um conjunto de valores e atributos da marca. (PINHO, 1996, p. 43).

A L I N G U A G E M E A I D E N T I D A D E N O C I B E R E S PA Ç O

Royo (2008, p. 78) exemplifica que na Internet a imagem e a identidade das empresas têm o mesmo peso que a própria empresa. Há empresas que não existem senão pela sua própria marca cibernética. O usuário percebe tudo o que lhe apresentamos como a entidade em si. A identidade passa a ser sinônimo absoluto de entidade. O usuário identifica a entidade a partir das ações que pode desenvolver, como se comportam essas ações com relação aos seus objetivos e de como compreendem os processos (em seu desenvolvimento e apresentação).

PRÁTICAS DE DESIGN Na mesma linha de pensamento, segue Randazzo (1996, p. 24) definindo marca como sendo algo mais que o produto e ao mesmo tempo sendo uma entidade física e perceptual. O aspecto físico da marca sendo o produto em si no seu local de venda, geralmente estático e finito, e o aspecto perceptual, no espaço psicológico (na mente do consumidor) que é dinâmico e maleável.

P R ÁT I C A S D E D E S I G N

Atualmente vivemos a “era das marcas” e o que posiciona uma organização, uma marca no mercado é a intensidade e o tempo de exposição pública, a homogeneidade visual das manifestações e os investimentos para mantê-la na mente e no coração do consumidor, procurando demonstrar, além dos atributos físicos e dos benefícios do produto, a garantia de benefícios emocionais e psicológicos.

De simples nome de uma empresa ou produto à determinação de um “estilo de vida” as marcas foram se tornando cada vez mais importantes e, atualmente, representam o meio pelo qual as empresas se relacionam com o mundo. Através de como e onde se comunicam, as marcas se posicionam no mercado e na mente do consumidor. Com o avanço da Internet, o ciberespaço se tornou um ambiente propício para as empresas expandirem os negócios e, portanto, o principal meio de divulgação das marcas e seus valores.

O design, neste contexto, ocupa um papel fundamental para garantir que a comunicação e interação da marca com o usuário ocorra da melhor maneira possível. Para o sucesso deste relacionamento, marca x público, a satisfação do usuário estará na facilidade e qualidade das ferramentas que ele encontrará nos sites dessas marcas. A usabilidade, a simplicidade e a eficiência de um determinado meio gráfico, neste caso o website, é a melhor maneira de conquistar clientes, tendo o poder de afetar significativamente a forma como os usuários interagem com a marca. Um rosto bonito não define valores estéticos. O usuário busca uma linguagem clara, um formato lógico de alcançar os conteúdos e relacionar-se com o sistema. Se não sua forma de existência não chega a ser comunicada com eficiência e o seu principal compromisso se dilui. E as marcas sabem disso.

Neste espaço democrático, não importa o tamanho da empresa ou sua nacionalidade, mas sim o percurso que o usuário tem que realizar para encontrá-la. Desta forma, nos encontramos diante de uma nova maneira de trabalhar e divulgar as marcas, pois para se destacar das demais, grandes empresas estão fazendo uso de ferramentas tecnológicas e publicitárias que requerem recursos financeiros que pequenas empresas não têm acesso.

A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO

Na economia de rede, o website torna-se a principal interface da empresa com o cliente. Na verdade, para empresas de comércio eletrônico, o site é a empresa. Em muitos casos, o site torna-se até mesmo o produto em si.

Portanto, ter uma má usabilidade é como ter uma loja que fica no décimo sétimo andar de um prédio (e, portanto, ninguém consegue achá-la), fica

aberta apenas às quartas-feiras entre três e quatro da tarde (e, portanto,

ninguém pode ir) e não tem nada além de vendedores mal-humorados que não falam com os clientes (e, portanto, as pessoas não compram muito).

SEÇÃO 3 O hipertexto

Você sabe o que significa o hipertexto?

O hipertexto é um texto estruturado em formato digital, onde as informações são reunidas em módulos que são formados por textos, imagens ou sons.

Pierre Lévy afirma que o hipertexto é um conjunto de “nós” ligados por conexões. Tais nós podem ser identificados por palavras, páginas, imagens, gráficos, sons ou documentos acionados pelos links, que são os elos ou vínculos que, como na mente, traçam conexões onde uma coisa leva a outra. Essas ligações não são lineares: permitem inúmeras possibilidades de trilhas que conectam informações e as organizam.

Analisando que a Internet e o computador mudaram a nossa maneira de ler e escrever, vamos entender o hipertexto como um novo espaço de escrita. O hipertexto tem natureza não sequencial e não linear, sem ponto fixo de entrada e de saída, sem uma hierarquia predeterminada, sempre expansível e literalmente sem limite. Desta forma, ele não muda somente a forma como lemos, permitindo múltiplas entradas e múltiplas

A L I N G U A G E M E A I D E N T I D A D E N O C I B E R E S PA Ç O

(JAKOB, 2000, p. 14).

PRÁTICAS DE DESIGN formas de prosseguir, mas também altera o modo como escrevemos, proporcionando a distribuição da inteligência e da cognição.

Correia e Antony (2003) afirmam que o hipertexto é capaz de aglomerar atos comunicacionais diversos, tais como: linguísticos, perceptivos, gestuais e cognitivos, por causa de sua característica heterogênea, de utilização de recursos visuais (imagens fixas e em movimento) e sonoros (amplificando as fontes perceptivas de informação).

P R ÁT I C A S D E D E S I G N

Ramal (2002, p. 175), por sua vez, afirma que o hipertexto é subversivo em relação à forma por ampliar os recursos expressivos do texto escrito na possibilidade de articular imagens, palavras e sons. Sendo o hipertexto um texto que possibilita inúmeras conexões, surge, a partir do ciberespaço, uma transformação importante no nível de linguagem, mudando os conceitos sobre os atos de ler, escrever e produzir conhecimento. Segundo Santaella (2004), nasce uma nova espécie de leitor, classificado como imersivo, que navega entre “nós” e nexos constituídos por dados informacionais híbridos - sonoros, visuais e textuais - típicos da hipermídia, construindo roteiros não lineares e não sequenciais. Observe que quando você lê um livro este ato é sistematizado, obedecendo a uma lógica sequencial determinada. Para conseguir cumprir a tarefa, lê-lo do início ao fim, deve-se seguir a ordem das páginas, a sequência dos capítulos, a programação sinalizada pelo índice ou sumário. Contudo, podemos alegar que, a partir do design, a diagramação de alguns livros passou a estimular modos diferentes de leitura, que podem ser encarados como precursores do sistema hipertextual. Figura 9 – Livro

Fonte: as autoras.

A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO

Fonte: as autoras.

EXEMPLO

Notas de rodapé, referências e citações, abreviações com informações adicionais etc., foram os antecessores, bastante primários, dos sistemas hipertextuais que encontramos no ciberespaço devido à sua sequência linear.

Figura 11 – Página interna de um livro

Fonte: as autoras.

A L I N G U A G E M E A I D E N T I D A D E N O C I B E R E S PA Ç O

Figura 10 – Sumário de um livro

PRÁTICAS DE DESIGN Quando trabalhamos com material físico como jornal, revista ou livro, o projeto de design utiliza uma linguagem simples com imagens e textos fixos; porém, quando os projetamos para comunicar no ciberespaço, são utilizadas ferramentas e elementos mais complexos a partir de uma linguagem mais ampla. A comunicação virtual é construída por meio de códigos linguísticos.

P R ÁT I C A S D E D E S I G N

Segundo Royo (2008, p. 81), os códigos linguísticos, com os quais criamos (escrevemos, programamos, realizamos design) e lemos (escutamos, vemos, interagimos) no ciberespaço, podem ser divididos em três aspectos apresentados no esquema a seguir: Esquema 2 – Divisão dos códigos linguísticos

CÓDIGOS VISUAIS

CÓDIGOS

LINGUÍSTICOS

SONOROS

Escrita alfabética (alfabeto: tipografia), escrita não alfabética (pictogramas, esquemas) e a imagem fixa (ilustração, fotografia)

Os sons

CÓDIGOS

A imagem em movimento e a

SEQUENCIAIS

hipertextualidade

Fonte: as autoras.

No ciberespaço a estruturação da informação é feita por meio de um sistema de hipermídia. A hipermídia integra as características do hipertexto com o enfoque da multimídia interativa, permitindo que o usuário brinque, interaja com todos os estímulos, na sequência que desejar, construindo um caminho próprio. Desta maneira, proporciona uma nova forma de acessar a informação e gerar conhecimento. A capacidade de conteúdo da hipermídia é imensa. Royo (2008, p. 81, grifo do autor) define que:

O termo “hipermídia” tem relação com o conjunto de elementos

(informações) ligados entre si. Esses elementos fazem parte da linguagem

visual, sonora ou sequencial. Cada um desses elementos são os hipertextos. A navegação hipertextual, o hipertexto, é a base da navegação pela internet.

A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO

Vicente Gosciola, professor e pesquisador do Centro Universitário Senac e da Pontifícia Universidade Católica (PUC-SP), define assim a hipermídia: [...] conjunto de meios que permite acesso simultâneo a textos, imagens e sons de modo interativo e não-linear, possibilitando fazer links entre

elementos de mídia, controlar a própria navegação e, até, extrair textos,

imagens e sons cuja sequência constituirá uma versão pessoal desenvolvida

Royo (2008, p. 82) diz ainda que dentro da definição de hipermídia, encontramos o hipertexto, que é o sistema de elementos sensíveis (para clicar), seja de forma visual, sonora ou sequencial, por meio dos quais nos dirigimos a outros espaços de informação. São os nódulos que unem todas as informações no ciberespaço, os nódulos da rede nervosa (de transmissão da informação) a que McLuhane Fiore em seu livro “O meio é a mensagem” se refere ao falar do circuito elétrico da seguinte maneira: “o circuito elétrico (é) um prolongamento do sistema nervoso central”. Com o advento da Internet e deste novo leitor, o designer deve projetar pensando no tempo, na rapidez em que o usuário pretende acessar as informações e em quantos espaços ele poderá estar ao mesmo tempo. Trabalhando com o hipertexto projetamos com códigos linguísticos em movimento, desenhamos o tempo.

Quando você vê um sistema de web, não está diante de uma estrutura sequencial linear, mas diante de uma estrutura sequencial hipertextual, uma estrutura onde tudo é ao mesmo tempo de forma latente. Nas estruturas hipertextuais tudo ocorre ao mesmo tempo. Tudo é possível ser clicado e possível de acontecer no espaço e no tempo (Royo 2008, p. 82). EXEMPLO

Royo exemplifica da seguinte forma: um grupo de amigos estava em um café, no ano passado, e tocava bastante a música daquele grupo que se desfez a pouco e cujo cantor se apresenta agora em um programa um pouco brega da televisão. Isto é um sistema hipermídia: um conjunto de hipertexto ligado entre si.

A L I N G U A G E M E A I D E N T I D A D E N O C I B E R E S PA Ç O

pelo usuário.

PRÁTICAS DE DESIGN

AUTOAVALIAÇÃO 3

P R ÁT I C A S D E D E S I G N

1 Qual é a importância da identidade no ciberespaço?

2 Qual é a importância de um bom hipertexto?

Nesta unidade você aprendeu que no processo de constante desenvolvimento das tecnologias de informação, a comunicação, como ela ocorre e como é processada, sofreu grandes transformações, modificando as linguagens e representações. Especificamente o computador, a Internet e o hipertexto foram os elementos centrais desta mudança, permitindo ao usuário: � conhecer tudo que lhe despertar interesse, podendo acessar as mais inúmeras informações e todas ao mesmo tempo; � criar uma identidade virtual (que pode ser uma representação real de sua personalidade ou não) para que possa interagir com diversos contatos independentemente da localidade a partir de ambientes virtuais e redes sociais. Vimos também que a era da informação também é a era das marcas, que as organizações hoje dependem da Internet, do mundo virtual, para comunicar, divulgar e informar dos seus princípios aos seus produtos, ampliando a gama de possíveis clientes e tornando o mercado cada vez mais competitivo.

A L I N G U A G E M E A I D E N T I D A D E N O C I B E R E S PA Ç O

A LINGUAGEM E A IDENTIDADE NO CIBERESPAÇO 49

Unidade 4 Design de usabilidade na interface gráfica do usuário OBJETIVOS DE APRENDIZAGEM Ao final desta unidade, você terá condições de:

ESTUDAR sobre os principais elementos de design;

COMPREENDER sobre composição e quais os princípios que o design utiliza para sua elaboração.

ROTEIRO DE ESTUDO Com o objetivo de alcançar o que está proposto a esta unidade, o conteúdo está dividido nas seguintes seções:

SEÇÃO 1 Elementos do design e Composição

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

PARA INICIAR NOSSOS ESTUDOS O design é uma área que integra diferentes componentes curriculares, sua atividade é um processo que envolve várias etapas que vão da pesquisa, criação e desenvolvimento de projetos, onde o resultado final deve apresentar soluções e melhorias nas interações do homem com um objeto, meio e sistema. Juntamente com a modernização e avanço dos sistemas de comunicação, o design vem desenvolvendo linguagens específicas para o ciberespaço, interferindo na satisfação do usuário no uso de interfaces e sistemas tecnológicos.

SEÇÃO 1 Elementos do design e Composição

omo já discutimos anteriormente, as mudanças provocadas pelo desenvolvimento constante da tecnologia de informação e Internet impulsionaram a evolução do design e das interfaces.

Recapitulando: a interface é, por definição, a área de comunicação entre o homem e a máquina. Ela é criada entre o ser humano e um dispositivo virtual (no caso das ferramentas do ciberespaço) ou entre o homem e um dispositivo real, como qualquer objeto ou mecanismo que encontramos no espaço tridimensional que nos rodeia (ROYO, 2008, p. 89).

As interfaces na web são o meio de interação das pessoas com o ciberespaço. Elas permitem esclarecer, mostrar, aproximar e dar acesso aos usuários a empresas, conhecimentos, serviços, pessoas. Contudo, as interfaces não devem ser pensadas apenas na sua função, elas devem ser projetadas na busca da satisfação e conforto dos usuários, sendo capazes de encantar, de inspirar e intensificar a relação das pessoas com o mundo. A forma como a informação é organizada deve também ter a preocupação da estética e é por meio dos elementos de design que isto é possível.

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Nesta unidade, pretendemos discutir sobre os principais elementos de design aplicados no ciberespaço e analisar sobre como trabalhá-los em uma composição.

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Como atividade o design dá uma forma visível e material à mensagem, à informação. Explicando melhor, o design em sua essência, trabalha com a conceituação de ideias e, por meio do emprego da tecnologia, as materializa, cria uma forma podendo ela ser bi ou tridimensional. A realização deste trabalho implica a concepção, o desenvolvimento e a construção de objetos, sistemas ou serviços. O design na verdade envolve uma gama de áreas envolvidas com o projeto, entre as quais podemos destacar o design industrial e o design gráfico e, a partir destes, as diversas especialidades destas disciplinas.

Aqui vamos destacar o design gráfico, pois a ele é dada a função de dar ordem estrutural e forma à informação, trabalhando frequentemente a relação de imagem e texto. Pode ser aplicado a vários meios de comunicação, sejam eles impressos, digitais, audiovisuais, entre outros, com o intuito de estimular sensações, por meio da percepção visual, e atrair o público pela emoção.

[...] O design gráfico é uma atividade que envolve o social, a técnica e

também significações. Consiste em um processo de articulação de signos

visuais que tem como objetivo produzir uma mensagem – levando em conta seus aspectos informativos, estéticos e persuasivos. (DOBLIN, 1980 apud GRUSZYNSKI, 2000, p. 17).

No design gráfico (e editorial) vamos facilitar a leitura dos jornais, livros e demais publicações, organizando a informação para que os diferentes leitores tenham acesso rápido aos conteúdos que procuram, estabelecemos níveis diferentes de navegação e leitura por meio da tipografia e tamanho dos conteúdos etc. (ROYO, 2008, p. 89).

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Fonte: Jornal El Economista.

Pelo caminho já percorrido e com a experiência acumulada nos campos do

design, podemos afirmar que o design digital e o design da interface gráfica do usuário (GUI – GraphicalUser Interface) é uma disciplina em si mesma,

filha direta do design industrial (no que se relaciona aos conhecimentos de ergonomia nesse campo), do design de sinalização espacial (nas pesquisas de sistemas de navegação e pictogramas), do design editorial (por ser o

antecessor direto da organização da informação) e do design da informação (design de diagramas e imagens com um forte caráter de informação e organização). (ROYO, 2008, p. 90).

O design industrial, gráfico, de sinalização e de informação contribui com o seu conhecimento para o design digital.

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Figura 8 – Design editorial de jornal

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Esquema 3 – Contribuições para o design digital

Fonte: Royo (2008, p. 90).

Analisando este quadro podemos enxergar de forma mais clara o que já discutimos anteriormente: a evolução da tecnologia de informação não só participou do desenvolvimento do design como também foi responsável pelo nascimento de novas especialidades da área como o design digital e o design de interface. De fato, poder-se-ia dizer que nós designers digitais somos herdeiros

do design editorial, sendo este responsável por organizar e apresentar a informação para a tecnologia impressa e os designers de interface,

responsáveis pela forma e apresentação da informação na tecnologia digital. (ROYO, 2008, p. 90).

Quando o usuário navega no ciberespaço ele realiza esta tarefa de uma forma mais confortável e prazerosa se o design for bem elaborado. Na Internet as tecnologias multimídias, como texto, narração, imagens, gráficos, animação, vídeo, música, movimento, se caracterizam por utilizarem diferentes recursos simultaneamente e impressionando os sentidos dos usuários, se bem aplicadas, proporcionam uma experiência diferente, satisfatória. No processo de design de interface o foco do projeto é a experiência e interação do usuário.

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Na boa utilização dos ingredientes necessários (usabilidade e estética) estará o êxito de um projeto de design.

Para contextualizar o design nos sites, Barreto (1999 apud PINHO, 2003) enumera as características em primeira, segunda e terceira geração. A primeira geração de sites privilegiava apenas o conteúdo e não a forma, era estritamente linear e tinha um mínimo de funcionalidade. Na segunda geração ocorre a substituição de palavras por elementos gráficos. As funções passam a ser representadas por ícones, surgem imagens de fundo e gráficos coloridos e animados. A terceira geração de sites é diferenciada pelo design. O conteúdo volta a

merecer destaque sem que a forma seja deixada de lado. A preocupação está tanto na funcionalidade quanto na beleza estética do site, evidenciada no

layout preciso, na harmonia entre as cores, na escolha da tipografia, no uso correto dos gráficos e no cuidado com o tempo necessário para carregar o conteúdo. (SPERB, p. 1).

Figura 9 – Site com um bom design

Fonte: DigitalHands ([20--]).

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Quando trabalhada de forma equilibrada, a funcionalidade técnica com os elementos visuais, e bem combinados às informações, o resultado do trabalho do designer tem grande potencial de sucesso.

PRÁTICAS DE DESIGN

Elementos de design Como já vimos, para desenvolver uma interface funcional e de sucesso devemos aplicar elementos e princípios de design. Estudar estes elementos possibilita identificar os princípios básicos de design gráfico e de como eles devem ser aplicados em um projeto digital, caracterizado pela linguagem multimídia e interativa.

P R ÁT I C A S D E D E S I G N

Muitos dos princípios técnicos e estéticos usados no design tradicional são aplicados no design digital, pois ainda é preciso captar a atenção e o olhar do usuário e, para isto, é preciso criar uma composição correta entre elementos como tipos, fontes e ilustrações. Depois de ter a sua atenção, é necessário conquistá-lo por meio da facilidade de uso e navegação. Para tanto, é necessário também o entendimento de que no ciberespaço a interface é construída sobre bases técnicas diferenciadas. Segundo Pinho (2003), para ter sucesso na tarefa do desenvolvimento visual de um site, cada um desses elementos devem ser considerados: espaço em branco, combinação de cores, textura, sequência, proximidade e alinhamento, balanço, contraste entre os elementos e unidade da página.

Seguindo estes elementos de design apresentados por Pinho (2003), é possível entender como aplicar as regras básicas para composição de um bom layout, que integradas à usabilidade resultam em uma interface funcional e diferenciada. ESPAÇO EM BRANCO O espaço em branco, como o nome já diz, é um espaço determinado em uma área que não tenha texto, imagens ou outros elementos. O espaço em branco em um layout é a área vazia que funciona para equilibrar a composição, destacar e reforçar a unidade de elementos aumentando o contraste.

O equilíbrio adequado entre o conteúdo e o espaço em branco é fundamental em uma diagramação. Esta regra demonstra que o importante é evitar colocar muita informação em uma página, um procedimento que na verdade, vai ao encontro de todas as regras convencionais de design. O espaço em branco é um recurso que permite a leitura mais fácil e a melhor compreensão, a clareza do texto e ainda permite que o usuário veja onde começa e onde termina uma seção.

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Imagem 1 – Exemplo de espaços em branco

Imagem 2 – Exemplo de espaços em branco

Fonte: Asthma Studio (2012).

COMBINAÇÃO DE CORES A cor nada mais é que a percepção da luz que o olho reproduz.

A escolha das cores é fundamental para uma boa harmonia dos elementos de um layout, pois interfere nas ações e na satisfação dos

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Fonte: Globo.com (2013).

PRÁTICAS DE DESIGN usuários quanto ao ambiente virtual, provocando seus sentidos, emoções e intelecto. Ela exerce influência decisiva nos olhos dos seres humanos, afeta a atividade muscular, mental e nervosa.

A combinação certa pode causar efeitos como de excitação, urgência, contentamento, calma, vulgaridade, melancolia, segurança etc., e ainda destacar algum elemento em relação a outro.

P R ÁT I C A S D E D E S I G N

A escolha e o bom uso da cor dependem da compreensão do designer quanto aos seus fundamentos. De acordo com o contexto, o designer deve definir adequadamente com quais cores deverá trabalhar, suas combinações já que uma cor interfere diretamente em outra, suas características de acordo com os contrastes, brilhos e saturação. A aplicação correta estimula uma resposta mais rápida e satisfatória do usuário, melhora a assimilação das informações e auxilia na memorização. A cor é um elemento funcional que trabalha os sentidos e a emoção, desta forma ela pode destacar um texto, imagens e marcas.

As cores quentes são estimulantes e produzem as sensações de calor, proximidade, opacidade, secura e densidade. As cores frias nos transmitem as sensações frias, leves, distantes, transparentes, úmidas, aéreas e calmantes.

Existem três fatores que influenciam e determinam as escolhas de cores, são eles: psicológicos, sociológicos e fisiológicos. O público jovem responde melhor às cores vivas, vibrantes e fortes. Já o público sofisticado, prefere cores discretas como o preto, o azul-escuro, o verde-escuro e o cinza. O psicólogo Bamz defende o fator idade versus preferência na manifestação de uma pessoa por determinada cor:

Vermelho: de 1 a 10 anos – idade da espontaneidade e da efervescência; Laranja: de 10 a 20 anos – idade da aventura, excitação, imaginação; Amarelo: de 20 a 30 anos – idade da arrogância, força, potência; Verde: de 30 a 40 anos- idade da diminuição do fogo juvenil;

Azul: de 40 a 50 anos – idade da inteligência e do pensamento; Lilás: de 50 a 60 anos – idade da lei, do juízo, do misticismo;

Roxo: além dos 60 anos – idade da benevolência, do saber, da experiência. Cores e sensações

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Quadro 2 – Cores e significados

CORES

LARANJA AMARELO

VERDE

AZUL

ROXO MARROM PÚRPURA

Dinamismo, força, baixeza, energia, revolta, movimento, barbarismo, coragem, furor, esplendor, intensidade, paixão, vulgaridade, poderio, vigor, glória, calor, violência, excitação, ira. Força, luminosidade, euforia, energia, alegria, advertência, tentação.

Iluminação, conforto, alerta, gozo, ciúme, orgulho, esperança. Adolescência, bem-estar, paz, saúde, ideal, ideal, abundância, tranquilidade, segurança, natureza, equilíbrio, esperança, serenidade, suavidade, crença. Espaço, viagem, verdade, sentido, intelectualidade, paz, advertência, precaução, serenidade, infinito, meditação.

Fantasia, mistério, profundidade, eletricidade, dignidade, justiça, egoísmo, grandeza. Pesar, melancolia.

Estima, valor, dignidade.

Fonte: adaptado de Pinho (2003).

Veja alguns exemplos de sites que utilizaram bem as cores e as sensações:

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

VERMELHO

SENSAÇÕES

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Imagem 3 – Cores

Fonte: Gucci ([20--]).

TEXTURAS A textura é muito aplicada como fundo (papel de parede) em uma página, tela ou layout, criando um visual personalizado. Também é utilizada para destacar um elemento de uma página ou para dar a sensação de profundidade ou relevo em um objeto. Contudo, como os demais elementos de design, é necessário cuidado na sua aplicação, pois esta se feita de forma incorreta pode tornar o texto sobre a textura incompreensível, provocando certo desconforto e fazendo o usuário desistir de obter informações no site.

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Imagem 4 – Cores

Imagem 5 – Cores

Fonte: Elliot Lepers ([20--]).

SEQUÊNCIA A sequência diz respeito à condução do leitor pelos elementos da página. O designer trabalha a composição e arranjo dos elementos distribuindo os diferentes elementos da página de uma forma que capte a atenção e dirija o olhar do visitante para o elemento correto em uma sequência determinada.

Seja para mídia impressa ou para a web, a organização e disposição dos elementos (textos, imagens, gráficos) detém um cuidado especial, pois este arranjo deve direcionar os olhos do usuário. Cada elemento cumpre o importante papel de criar uma impressão, um sentimento ou uma ideia que se deseja comunicar.

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Fonte: Louis Vuitton ([20--]).

PRÁTICAS DE DESIGN Habitualmente os olhos movimentam-se da esquerda para a direita e de cima para baixo, contudo na web move-se sem uma sequência exata, o olhar percorre a página naturalmente. Para controlar este movimento e a atenção do usuário, não é necessário que todos os elementos apresentem movimento e cor, mas podem ser destacados por meio de sua sequência, dos grandes para os menores, dos elementos escuros para os mais claros, da cor para ausência de cor, das formas usuais para as não usuais.

P R ÁT I C A S D E D E S I G N

Imagem 6 – Sequência

Fonte: UOL (2013).

PROXIMIDADE E ALINHAMENTO Proximidade e alinhamento devem estar bem definidos em um layout. Organizar as informações observando estas regras possibilita que as mesmas sejam mais facilmente encontradas e compreendidas.

O conceito é que todos os elementos que têm algo em comum devem estar juntos, para que o leitor os reconheça como um grupo. Determinando a relação entre os elementos, o designer usa a estratégia da proximidade ou alinhamento para mostrar a hierarquia das informações, direciona o usuário a uma ordem de leitura, facilitando a navegação e o acesso ao conteúdo desejado.

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Imagem 7 – Proximidade e alinhamento

BALANÇO Podemos dizer que o balanço é a distribuição do peso ótico pelo espaço.

O balanço tem duas formas de organizar os elementos: o balanço formal (simétrico) ou informal (assimétrico). No balanço formal, cada elemento que vai a um lado da página é repetido do outro, seja na horizontal ou na vertical (PINHO, 2003).

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Fonte: Americanas (2013).

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Imagem 8 – Balanço Formal

Fonte: Urban... (2013).

No balanço informal isso não ocorre: os vários elementos da página se põem com pesos desiguais de outro lado, sem ferir a ponderação do conjunto, pois essas partes desiguais são, na verdade, equivalentes entre si. Seja a composição de um layout simétrica ou assimétrica, os elementos devem apresentar equilíbrio de cores, tamanho e forma. O balanço trás resultados satisfatórios e muito interessantes quando bem trabalhado.

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Imagem 9 – Balanço informal

CONTRASTE ENTRE OS ELEMENTOS O contraste é um excelente recurso no trabalho de composição, com ele podemos variar o tamanho, peso, estilo, forma e cor.

Toda página bem construída é um arranjo de harmonias e contrastes entre suas partes. Para vencer a indiferença, a tensão provocada pelos elementos verbais – títulos, subtítulos, textos, enfim, palavras – deve ainda ser completada com o excitamento visual produzido pela imagem (PINHO, 2003).

O contraste é vital para conformar de maneira visual as intenções do designer. A antiga sensação de repouso e as formas balanceadas perderam muito de sua importância nos dias atuais, em que a tensão é fortemente insinuada para suscitar extremos suportáveis de excitação (RADFAHRER, 2001).

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Fonte: http://moocup.com

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Imagem 10 – Contraste entre os elementos

Fonte: http://www.tokstok.com.br

UNIDADE DA PÁGINA A unidade acontece quando todos os elementos de uma composição são percebidos como um todo, ou seja, são vistos como um conjunto harmônico de todas as partes. Esta organização torna o layout agradável e eficiente. Imagem 11 – Unidade da página

Fonte: http://www.tokstok.com.br

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

A forma ou imagem desempenha uma função dentro do contexto. A aplicação dos elementos cor, brilho, textura e tamanho são percebidos visualmente de maneiras diversas e não isoladamente, mas em um conjunto agrupado que segue uma ordem hierárquica determinada pelo contexto. A escolha, definição e organização dos elementos determinam a imagem (forma), esta por sua vez representa as características de uma informação (função). O movimento é gerado pelo caminho percorrido pela vista do usuário por meio das formas geométricas, linhas, textos até percorrer toda a composição. Linhas, cores, formas e figuras geométricas são empregadas para direcionar o olhar a pontos-chave da página. Imagem 12 – Forma, função e movimento

Fonte: http://www.tiffany.com

Leis da Gestalt aplicáveis ao design Gestalt é uma Escola de Psicologia Experimental que realizou intensas pesquisas sobre a percepção do homem sobre as formas. Gestalt é um termo intraduzível do alemão, utilizado para abarcar a teoria da percepção visual baseada na psicologia da forma.

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

Cologni et al. (2003) acrescenta três aspectos ao design de um bom site: forma, função e movimento.

PRÁTICAS DE DESIGN A Gestalt trata do fenômeno da percepção visual por meio da interpretação do nosso cérebro.

Propõe essa teoria que a percepção não funciona por somatório de partes menores dos objetos percebidos, mas por totalidade. Os objetos organizam-se perceptivelmente numa estrutura global que determina a forma, a dimensão e a função das partes e, por outro lado, é determinada pelas próprias partes e pelas suas relações. Ou seja, que o cérebro irá desmembrar a imagem em diferentes partes, organizá-las de acordo com semelhanças de forma, tamanho, cor, textura etc., que por sua vez serão reagrupadas de novo num conjunto gráfico que possibilita a compreensão do significado exposto.

P R ÁT I C A S D E D E S I G N

O design trabalha algumas leis estabelecidas pela Gestalt para otimizar a percepção visual da uma mensagem. Segundo (COLOGNI et al., 2003) as leis da Gestalt, que se aplicam ao design, podem ser resumidas em atração, harmonia, equilíbrio e simplicidade:

� Atração: determina que elementos semelhantes ou que possuem algo em comum formam conjuntos de atração. É importante também o bom senso para determinar quais elementos dominam e quais se subordinam numa composição; � Harmonia: a harmonia segundo as leis da Gestalt prevê a coerência visual dos elementos. Numa composição, cada forma inserida deve ser considerada como elemento do esquema total;

� Equilíbrio: o equilíbrio entre duas forças ou entre dois elementos ocorre quando ambos compensam-se mutuamente. Um gordo e um magro na mesma gangorra podem estar em equilíbrio desde que o magro esteja mais na extremidade da prancha e o gordo mais próximo ao eixo; � Simplicidade: a simplicidade gera clareza, organização mais harmoniosa e unificada. Caracteriza-se por organizações formais fáceis de serem assimiladas, lidas e rapidamente compreendidas. É sinônimo de eficiência.

A Gestalt encontra nesses fenômenos da percepção as condições para a compreensão do comportamento humano. A maneira como as pessoas percebem determinado estímulo irá desencadear o comportamento. Na busca de trabalhar melhor estes estímulos, o designer se apoia nos seguintes princípios:

� Unidade: é definida como um, ou mais de um, elemento que constitui um objeto. Unidades podem ser agrupamentos organizados ou parte de um todo. São percebidas, por meio de relações entre os elementos que as constituem;

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

� Proximidade: elementos próximos uns dos outros tendem a ser vistos juntos e, por conseguinte, a constituírem unidades. As forças internas da organização visual da forma tendem a organizar a unidade mais simples de se perceber num primeiro momento;

� Fechamento: ocorre uma tendência de completar elementos faltantes em uma figura para garantir sua compreensão. As forças de organização visual da forma dirigem-se espontaneamente para uma ordem espacial. Obtém-se a sensação de fechamento visual pela continuidade de elementos numa ordem estrutural definida; � Segregação: percepção de formação de unidade(s) por diferenças de estimulação (por contraste) no campo visual ou na configuração. A segregação de unidades pode ser feita por meio dos contrastes – cores, brilhos, matizes, nuanças etc.; � Unificação: fundamentada nos princípios: Harmonia, Ordem e Equilíbrio Visual. Coerência visual de sua linguagem formal. Os fatores de proximidade e semelhança, geralmente, ajudam a promover e reforçar a unificação da figura;

� Continuação: é a impressão visual de como as partes (pontos, linhas, planos, volumes, texturas, brilhos etc.) se sucedem por meio da organização perceptiva da forma. É a tendência dos elementos de acompanharem outros, de maneira que permitam a continuidade de um “movimento” numa direção já estabelecida, procurando alcançar a melhor forma possível, a mais estável estruturalmente;

� Pregnância da forma: lei básica da percepção na qual “qualquer padrão de estímulo tende a ser visto de tal modo que a estrutura resultante é tão simples quanto o permitam as condições dadas”, ou seja , quanto melhor for a organização visual da forma do objeto e mais rápida e fácil for a compreensão da leitura, maior será o índice de pregnância.

A Gestalt em seus estudos, trás os aspectos da percepção humana que, aliados aos elementos de design, qualificam e melhoram o desempenho de uma interface. Saber como será a interpretação da informação em determinado ambiente possibilita compor os elementos de maneira que alcancem a forma ideal. No processo de design o conhecimento e aplicação da usabilidade colaboram nos projetos de interface, na

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

� Semelhança: os elementos semelhantes são agrupados, a igualdade desperta a tendência de se construir unidades, de se estabelecer agrupamentos de partes semelhantes. Proximidade e semelhança são fatores que geralmente agem em comum, muitas vezes, se reforçam ou se enfraquecem mutuamente na formação de unidades ou na promoção de uma maior unificação da figura. Em condições iguais os estímulos mais semelhantes entre si (por cor, peso, tamanho, forma, textura, brilho etc.) terão maior tendência a constituírem unidades ou agrupamentos;

PRÁTICAS DE DESIGN melhor disposição do conteúdo, com o intuito de facilitar a navegação do usuário. Aplicar as técnicas de design na busca de um projeto de sucesso dependerá da experiência, do conhecimento e da criatividade de cada profissional. No processo de projetação o designer deve ter a preocupação em conhecer os usuários e entender como eles agem no uso de um sistema, para que seu empenho esteja focado em promover uma experiência agradável e satisfatória. A intenção está no desenvolvimento de um ambiente pautado nas necessidades das pessoas, a partir de um contexto bem definido.

Vários são os elementos e princípios de design e agora vamos salientar a importância da tipografia.

P R ÁT I C A S D E D E S I G N

Tipografia A escolha da tipografia é extremamente importante para o design de uma interface. Quando trabalhamos com uma interface digital, temos certas limitações nas escolhas dos tipos (fontes utilizadas no texto). A legibilidade se torna ponto de equilíbrio nessa escolha, já que a composição tipográfica deve ser legível e totalmente envolvente. Leiturabilidade (readability) é a qualidade que torna possível o reconhecimento do conteúdo da informação em um suporte quando ela está representada por caracteres alfanuméricos em grupamentos com significação, como palavras, frases ou textos corridos.

O estudo da tipografia é essencial e a usabilidade do tipo é uma importante área de pesquisa em tipografia. Os requisitos de usabilidade são determinados por três critérios ergonômicos: legibilidade, leiturabilidade e pregnância.

Contudo, deve ser observado que a composição é realizada a partir do uso de vários elementos e critérios de design, não sendo estes apontados anteriormente os únicos que devem ser considerados. A usabilidade, embora seja um aspecto fundamental, não deve ser tomada como um critério isolado e absoluto (NIEMEYER, 2001).

Segundo Marmion (2009), quando lemos o campo de percepção reduz em torno de 2,5 graus o ponto de fixação do olho. Afirma que, de fato, nosso olho funciona como uma lente em circunferência onde limitamos a área de leitura a esse círculo. Nielsen (2000) diz que a maioria dos usuários da internet “escaneam” os textos, sendo em menor quantidade aqueles que leem palavra por palavra. Royo (2008, p. 137) diz que a tipografia apresenta as mesmas características de uso em qualquer meio onde é trabalhada, seja impresso ou digital o seu emprego será determinado pelas mesmas regras:

� Legibilidade e contraste: o tipo de letra que utilizamos deve ser visualizado com clareza pelos usuários do site, deve estar evidente e dispor de espaço entre linhas para uma boa leitura. O

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

controle do contraste entre as formas e os espaços vazios é também fundamental para obter-se uma boa legibilidade; � Hierarquia de informações: os títulos, subtítulos, notas explicativas de desenhos e fotos ou outros tipos de textos precisam ter outras configurações para que o leitor distinga facilmente um texto do outro;

� Coordenação gráfica ou consistência: se os textos do site mantêm uma aparência integrada ao sistema (o mesmo tamanho, cor etc.) o usuário sentirá que navega por um site real e terá a sensação de controle (essa seção faz parte da identidade do sistema).

E, assim, visando uma melhor legibilidade foram desenvolvidas fontes exclusivas para o meio digital. Num primeiro momento e para o design de textos em documentos da Web

foram utilizadas fontes compatíveis, que podiam ser encontradas tanto nos pequena variedade de fontes, entre as quais a Times (Times New Roman do PC), que era a mais utilizada, apesar de não oferecer uma boa leitura

na tela, mas produzia melhores resultados na impressão de textos sobre o papel. Algumas das fontes que aparecem automaticamente nos sistemas operacionais do Macintosh e do PC são a Times new Roman, Geórgia, Verdana, Arial e Trebuchet. (ROYO, 2008, p. 138).

Royo (2008) apresenta alguns sites com tipos de pixel recomendáveis: <http://www.atomicmedia.net> <http://www.plusism.com> <http://www.miniml.com> <http://www.lindkvist.com/2.0/fontstore/ arcadefontpack.html> <http://www.04.jp.org> <http://www.emigre.com.>

Imagem 13 – Fontes

Fonte: http://www.atomicmedia.net.

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

sistemas operacionais do Macintosh como no do PC. Isso resultou em uma

PRÁTICAS DE DESIGN

AUTOAVALIAÇÃO 4

P R ÁT I C A S D E D E S I G N

1 O que é uma interface digital?

2 Qual é a importância da usabilidade na web?

3 Por que a forma, a função e o movimento são importantes para a criação de um bom site?

DESIGN DE USABILIDADE NA INTERFACE GRÁFICA DO USUÁRIO

Uma interface bem projetada envolve muito mais do que um conteúdo de qualidade, mas é importante estar atento, também, a como esse conteúdo será apresentado e como o usuário irá percebê-lo. Nesta unidade estudamos como os elementos de design podem facilitar a navegação por parte dos usuários e como o acesso a esses conteúdos pode se tornar uma experiência agradável e satisfatória. Memória (2005) refere-se ao ato de se conduzir dentro do ambiente virtual, como uma navegação livre de erros de caminho, onde se fosse possível chegar ao destino da forma mais rápida e fácil possível.

D E S I G N D E U S A B I L I D A D E N A I N T E R FA C E G R Á F I C A D O U S U Á R I O

4 Comente sobre a importância da aplicação de uma boa tipografia em um site.

Unidade 5 DESIGN DE USABILIDADE E SEMIÓTICA OBJETIVOS DE APRENDIZAGEM Ao final desta unidade, você terá condições de:

COMPREENDER a usabilidade, seus princípios e aplicações no design de interface digital; ESTUDAR os princípios da semiótica e sua importância;

ENTENDER a relação da usabilidade e semiótica no design.

ROTEIRO DE ESTUDO Com o objetivo de alcançar o que está proposto a esta unidade, o conteúdo está dividido nas seguintes seções:

SEÇÃO 1 Princípios da usabilidade e semiótica

DESIGN DE USABILIDADE E SEMIÓTICA

PARA INICIAR NOSSOS ESTUDOS Nesta unidade vamos conceituar a usabilidade, seus princípios e a importância da semiótica no projeto de interfaces gráficas.

Como já estudamos nas unidades anteriores, para desenvolver qualquer trabalho de design temos que ter o foco e conhecer o usuário. Com a abordagem no design de interface digital, nesta unidade será realizado o estudo sobre os aspectos necessários ao projeto para a melhor interação do usuário com o sistema, discorrendo sobre a importância das metas de usabilidade no design de interfaces digitais e sobre os aspectos que envolvem a comunicação por meio da semiótica.

Design de interface Recapitulando – O design é uma atividade projetual que trabalha o equilíbrio entre estética e usabilidade. O design de interface digital é uma das vertentes mais novas do design, seu trabalho envolve o usuário – empresa (cliente) – e produto/serviço, usando como meio o ciberespaço, tendo como foco aprimorar a experiência do usuário.

O design de interface digital cada vez mais se baseia nas experiências dos usuários, ou seja, na compreensão do uso, na facilidade de execução das tarefas. Quando projetamos para o suporte digital, trabalhamos com vários fatores que envolvem o uso, por parte do receptor da mensagem (usuário). Deste modo, o designer não deve se prender a uma regra, mas sim, deve, como em outros suportes, identificar a partir das necessidades dos usuários a maneira mais adequada de integrar a estética à função. O posicionamento do designer está em projetar para o usuário colocando os aspectos estéticos em favor da comunicação.

DESIGN DE USABILIDADE E SEMIÓTICA

SEÇÃO 1 Princípios da usabilidade e semiótica

PRÁTICAS DE DESIGN

Grid: é uma estrutura geométrica constituída por eixos (comumente horizontais e verticais) desenvolvida para auxiliar o alinhamento de elementos textuais e imagéticos numa composição visual. É uma ferramenta de programação visual que auxilia no desenvolvimento de layouts mais bem organizados e estruturados.

Segundo Gruszynski (2000, p. 53), seguem alguns itens que assinalam as características de um layout bem feito, sob uma perspectiva de estética e função: � Economia no uso de diferentes fontes tipográficas;

� Utilização de um sistema de grid ou similar que assegure a ordenação racional do projeto de modo a garantir sua unidade; � Legibilidade, clareza, hierarquia (ordenação) e facilidade de decodificação pela repetição dos signos utilizados, permitindo o rápido entendimento por parte do leitor/receptor.

P R ÁT I C A S D E D E S I G N

Imagem 14 – Exemplo de um bom site

Fonte: http://www.pizzerianapolicentrale.ro/

Todo o desenvolvimento projetual de um designer deve ser pensando para que os usuários possam executar as tarefas como se fossem simples. Segundo Krug (2000), não deve haver dúvidas ao executar tarefas. As áreas de uma interface devem estar bem definidas para que possa haver uma boa interação humano-computador. Desta forma o projeto de interface digital deve se adequar às necessidades dos usuários, para que eles possam aprender com facilidade a executar as tarefas. Toda a solução visual deve estar bem definida para a percepção do usuário, podendo assim acelerar

DESIGN DE USABILIDADE E SEMIÓTICA

o processo de navegação, tornando o sistema bem mais funcional e intuitivo. “Se o usuário for obrigado a gastar tempo aprendendo como o website funciona, não terá energia para absorver o conteúdo do site.” (MEMÓRIA, 2006).

ARQUITETURA DA INFORMAÇÃO A arquitetura de informação tem como função organizar da melhor maneira, as informações de um ambiente digital (site, blog etc.) para que possam ser encontradas e identificadas com facilidade, para tanto elas devem ser bem pensadas na sua distribuição possibilitando que a navegação por parte do usuário aconteça como foi projetada.

A organização estrutural, ou seja, o cuidado com a arquitetura da informação interfere de maneira considerável na funcionalidade de um sistema, pois o usuário espera por uma experiência agradável e, para que isto aconteça, os caminhos para as informações e sua organização devem estar bem definidos proporcionando uma navegação e interação fácil e prazerosa.

O que significa a usabilidade aplicada ao design de interfaces?

Usabilidade significa simplicidade e eficiência, ou seja, algo que funcione bem e que uma pessoa leiga ou não muito experiente consiga usá-lo para a sua devida finalidade, sem nenhuma frustração durante o processo. No caso da interface digital, a navegação deve ser fácil e clara, que se autoexplique. Nielsen (2008) entende por usabilidade a qualidade de uma aplicação sob uma perspectiva de uso, tradicionalmente relacionado a cinco atributos:

DESIGN DE USABILIDADE E SEMIÓTICA

De acordo com Nielsen (2000), muitas das vezes os problemas apresentados pelas interfaces estão vinculados à arquitetura da informação, influindo no conjunto de uma interface impossibilitando a interatividade entre homem e máquina.

PRÁTICAS DE DESIGN

Esquema 4 – Atributos da usabilidade

Fonte: as autoras.

P R ÁT I C A S D E D E S I G N

Ainda de acordo com Nielsen (2000), o sistema deve ser focado no usuário para melhor entendimento das ações e comportamento dos usuários. Este entendimento deve acontecer a partir de pesquisas.

Preece, Rogers e Sharp (2005) afirmam que para projetar produtos interativos que sejam usáveis, deve-se levar em consideração quem irá utilizá-los e onde serão utilizados. Como já discutido anteriormente, o designer deve projetar pensando não somente no sentido estético, mas deve englobar a usabilidade e os princípios da comunicação visual para que sua mensagem seja transmitida ao usuário de forma correta.

Para melhor entendimento sobre como o designer deve trabalhar, seguem abaixo os princípios fundamentais da usabilidade, desenvolvidos por Nielsen (2001, apud PREECE, ROGERS e SHARP 2005, p. 48):

Princípios fundamentais da usabilidade (Nielsen) Observe no quadro a seguir os princípios fundamentais da usabilidade de Nielsen:

DESIGN DE USABILIDADE E SEMIÓTICA

Quadro 4 – Princípios Fundamentais da Usabilidade

2. Compatibilidade do sistema com o mundo real 3. Controle do usuário e liberdade

4. Consistência e padrões 5. Ajuda os usuários a reconhecer, diagnosticar e recuperar-se de erros 6. Prevenção de erros

7. Reconhecimento em vez de memorização

Os usuários devem sempre estar informados sobre o que está acontecendo, ou seja, o sistema deve promover um retorno adequado ao usuário, dentro de um tempo razoável. O sistema deve utilizar uma linguagem que se assemelhe à realidade do usuário. O sistema deve oferecer saídas de emergência claramente definidas, para que o usuário saia facilmente de lugares inesperados. Modo de evitar fazer com que o usuário pense se determinadas palavras, situações ou ações diferentes significam a mesma coisa.

A ajuda deve oferecer ao usuário uma linguagem simples, além de sugerir uma maneira de resolver erros. Impedir a ocorrência de erros, sempre que possível. Fazer com que objetos, ações e opções sejam visíveis.

8. Flexibilidade e eficiência de uso

Fornecem aceleradores invisíveis aos usuários novatos e permitem que os mais experientes realizem suas ações com maior rapidez.

10. Ajuda e documentação

Disponibiliza informações que podem ser encontradas facilmente, ajudando mediante uma série de etapas, as quais podem ser facilmente seguidas.

9. Estética e design minimalista

Fonte: Nielsen (2001) apud Preece, Rogers e Sharp (2005, p. 48).

Fazer com que o uso de informações irrelevantes sejam utilizadas.

Segundo Dias (2003, p. 55) existem características que podem dificultar ou facilitar a leitura e a compreensão do conteúdo disponível em uma interface. Entre estas características destacam-se a legibilidade, a estética e a densidade informacional.

DESIGN DE USABILIDADE E SEMIÓTICA

1. Visibilidade do status do sistema

PRÁTICAS DE DESIGN Principais recomendações: � ocupar de 50 a 80% da página com conteúdo; � evitar frames, pois diminuem o espaço disponível para apresentação de conteúdo; � agrupar os diferentes tipos de informações disponíveis na página apresentando as mais importantes em primeiro lugar; � usar espaço em branco para separar conteúdos ou assuntos diferentes; � evitar desenhos ou texturas no fundo da página. O fundo não deve chamar mais atenção do que a informação; � usar um conjunto limitado de cores; � evitar cores berrantes, caracteres brilhando ou piscando; � contrastar letras com o fundo preferencialmente claro com texto escuro; � não usar caixa alta (letras maiúsculas) em excesso.

P R ÁT I C A S D E D E S I G N

Imagem 15 – Exemplo de um bom site

Fonte: http://www.grano.hu/

Imagem 16 – Exemplo de um bom site

Fonte: http://www.officinefarneto.it/

DESIGN DE USABILIDADE E SEMIÓTICA

SEMIÓTICA O trabalho do designer tem como finalidade empregar a usabilidade juntamente com os princípios do design, melhorando os atributos de qualidade dos sistemas de comunicação. O desenvolvimento de um projeto deve seguir tanto os princípios de usabilidade, que se encontram na representação dos elementos, quanto na semiótica que fornece ferramentas para analisar essas representações.

Para Niemeyer (2009, p. 25), “[...] semiótica (do grego semeion = signo) é a teoria geral dos signos. Segundo Peirce, signo é algo que representa alguma coisa para alguém em determinado contexto.”

A comunicação, resumidamente, é o processo de transmissão de mensagens por canais para um receptor. Na visão do design, esta mensagem deve chegar ao receptor de forma clara e precisa para que seja interpretada corretamente, ocorrendo a resposta desejada por parte de quem a recebe. Para o design a linguagem visual é o meio pelo qual a mensagem é transmitida e interpretada. A linguagem visual como já vimos é composta pelos elementos de design e pela forma como um relaciona-se com o outro em uma composição gráfica. “Qualquer sistema de linguagem define tanto um universo de possíveis sinais e um conjunto de regras para usá-los” (MULLET; SANO, 2006, p. 2). Portanto, como todo sistema de linguagem, a linguagem visual possui um vocabulário formal que contém todos os elementos básicos do design, a partir do qual as representações são montadas (composição), e uma sintaxe visual que descreve como os elementos podem ser combinados dentro desse sistema. Fazendo o uso das tecnologias no processo de criação e desenvolvimento de projetos e com condicionamento de facilitar a interação das interfaces gráficas com o usuário, os designers passaram a ousar na utilização de cores, tipografias e imagens.

Por isso, Niemeyer (2009, p. 22) explica que se deve entender a semiótica, pois esta quando aplicada ao projeto “[...] introduz aportes para resolver as questões decorrentes da preocupação da comunicação do produto de design”. Por meio da semiótica é que o designer se apoia na fundamentação teórica para as questões referentes à comunicação, significação e geração de sentido. Na composição de uma interface gráfica, o signo é um elemento trabalhado com um objetivo, o intuito de enviar uma mensagem ao usuário, neste sentido observamos que a interface deve comunicar ao usuário a sua intenção.

Para Santaella (2002, p. 14), a propriedade do signo dependerá da forma com que ele representa o seu objeto.

DESIGN DE USABILIDADE E SEMIÓTICA

Na semiótica os signos estão organizados em códigos, os quais se constituem em sistemas de linguagem que formam o alicerce para todo e qualquer tipo de comunicação.

PRÁTICAS DE DESIGN Mullet e Sano (2006, p. 171) afirmam que a interface gráfica com o usuário “[...] é um sistema de signos, em que cada signo interpreta o papel de intermediário entre o usuário e o programa/programador.”

Podemos afirmar que a comunicação em uma interface tem sucesso quando o usuário interpreta a informação relacionando o signo ao objeto. O usuário enquanto navega no ciberespaço, faz uso de um conjunto de signos (botões, barras de rolagem, imagens, entre outros) que devem ser reconhecidos corretamente, possibilitando a percepção dos caminhos que devem ser seguidos.

Os signos aplicados nos projetos de interfaces gráficas sempre possuem um significado ou uma funcionalidade requerida pelo usuário, e são elementos percebidos com mais rapidez que um texto, pois proporcionam acesso e manipulação direta de funcionalidades via interface, compatibilizando o sistema com o mundo real e permitindo que os usuários reconheçam as alternativas de interação.

P R ÁT I C A S D E D E S I G N

Os signos também são usados para guiar os usuários, mostrando por meio de mensagens passo a passo para onde ele deve ir e identificando sua localização. Podem diagnosticar um erro, facilitando o retorno com mais rapidez e possibilita atalhos, pois são elementos flexíveis.

Os signos representam ao usuário um vínculo com a sua realidade, ele passa a ter o controle e a liberdade ao identificar alternativas de percurso de interação, podendo escolher qual caminho ele irá seguir de forma mais rápida e satisfatória.

Imagem 17 – Signos aplicados em um site

Fonte: http://bundlehunt.com/

DESIGN DE USABILIDADE E SEMIÓTICA

Imagem 18 – Signos aplicados em um site

Fonte: http://www.mball.cz/

1 O que é arquitetura da informação?

2 O que é usabilidade? Comente a sua importância.

DESIGN DE USABILIDADE E SEMIÓTICA

AUTOAVALIAÇÃO 5

PRÁTICAS DE DESIGN

3 Cite e comente sobre algumas características para a criação de um bom site.

P R ÁT I C A S D E D E S I G N

4 O que é semiótica?

Nesta unidade foi possível identificar como os princípios de usabilidade e de semiótica são fundamentais no processo de desenvolvimento de interfaces gráficas, e como a aplicação destes princípios são fundamentais na interação do usuário com o sistema. A usabilidade tem em seus princípios a finalidade de facilitar e ampliar a qualidade da relação do usuário quanto à perspectiva de uso e, por meio da semiótica temos a possibilidade de aplicação destes princípios com o uso dos signos.

DESIGN DE USABILIDADE E SEMIÓTICA

Unidade 6 Metodologia de projeto de ambientes hipermidiáticos centrados no usuário OBJETIVOS DE APRENDIZAGEM

Ao final desta unidade, você terá condições de:

REFLETIR sobre o uso das tecnologias aplicadas ao ensino-aprendizagem; ESTUDAR a importância de uma metodologia de design; ENTENDER a aplicação de uma metodologia de projeto.

ROTEIRO DE ESTUDO

Com o objetivo de alcançar o que está proposto a esta unidade, o conteúdo está dividido nas seguintes seções:

SEÇÃO 1

SEÇÃO 2

SEÇÃO 3

Hipermídia e ambientes hipermidiáticos

Metodologia de design

Metodologia de design centrado no usuário (hcd human centred design)

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

PARA INICIAR NOSSOS ESTUDOS Esta unidade apresenta uma reflexão sobre a relação da metodologia de design em ambientes hipermidiáticos centrados no usuário. Esta revisão é exemplificada por metodologias de design tradicionais e metodologias de design interativas que envolvem o usuário em um ciclo interativo que é definir, testar e avaliar. Um dos aspectos de design centrado no usuário é o seu envolvimento no processo de desenvolvimento do projeto, onde ele contribui ativamente para o design em si, tornando-se cocriador do produto. Este mecanismo de colaboração possibilita a integração do usuário com o designer, ambos envolvidos no processo, possibilitando um maior acerto no produto final. Vamos ao estudo!

Estamos numa era, em que a competição coloca ainda mais pressões sobre o designer, exigindo experiência, velocidade e precisão. Os produtos necessitam ser criados rapidamente, com acertos imediatos. No intuito de auxiliar o profissional de designer, apresentam-se métodos de pesquisa cada vez diversificados. Hoje, com este mundo tão complexo, com um ritmo tão acelerado de mudanças e as informações disponíveis e exigidas, isto tudo atinge nossas experiências. Este é o grande desafio do designer, pois precisam reunir, processar e incorporar essas informações de modo seguro e eficaz para o desenvolvimento do produto e atender aos anseios e as necessidades do usuário que busca uma estrutura lógica e acessível dessas informações. O hipertexto faz com que a navegação de um texto seja executada de forma lógica (ao contrário dos livros, onde é feita linearmente), além de permitir a indicação de partes do documento. Com sua estruturação, ele pode auxiliar o usuário a reaproximar diferentes elementos de informação para compará-los, confrontá-los ou analisálos, possibilitando ao estudante adquirir diferentes abordagens sobre o mesmo assunto (MARTIN, 1992 apud BUGAY; ULBRICHT, 2000, p. 41).

O hipertexto permite situar assuntos distintos inter-relacionados em diferentes níveis de aprofundamento, proporcionando a personalização do processo ensino-aprendizagem e permitindo ao usuário trabalhar em seu próprio ritmo, nível e estilo, adequando-o às suas características e interesses. Ampliando os conceitos de multimídia num contexto de uso do computador, onde combina-se texto, gráfico, animação, vídeo, som e qualquer outra mídia que venha a ser desenvolvida, tem-se a hipermídia.

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

SEÇÃO 1 Hipermídia e ambientes hipermidiáticos

PRÁTICAS DE DESIGN Pode-se, então, dizer que hipermídia é uma expansão do conceito de hipertexto que contempla outras mídias.

A hipermídia está na sua capacidade de armazenar informações e, por meio da interação do receptor, transmuta-se em incontáveis versões virtuais que vão brotando na mesma medida em que o receptor se coloca em posição de autor. Isso só é possível devido à estrutura de caráter hiper, não sequencial, multidimensional que dá suporte às infinitas ações de um leitor imersivo (SANTAELLA, 2004). Toma-se como conceito de hipermídia a interface e a multimídia numa só linguagem agindo de uma forma interativa com o usuário.

P R ÁT I C A S D E D E S I G N

Imagem 19 – Diversos tipos de mídias em páginas web

Fonte: UFMT ([20--]).

Conforme apontam Rezende e Barros (2001, p. 11) os sistemas hipermídia de aprendizagem também podem proporcionar a navegação linear em visitas guiadas, que são sequências de informações previamente estabelecidas pelo autor. Dentro de uma visita guiada, o usuário só pode avançar para o nó seguinte ou voltar para o anterior. A capacidade interativa da hipermídia constitui o seu potencial pedagógico, no qual o aluno é estimulado a buscar seu próprio conhecimento a partir dos recursos de navegação, de resolução de problemas, de tentativas de acerto e autonomia quanto à definição do ritmo de trabalho que lhe são proporcionados em um sistema hipermídia (SILVA apud SOUZA, 2002, p. 26).

É sabido que a hipermídia interligada ao desenvolvimento da aprendizagem exige, muitas vezes, a execução de novos projetos que

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

algumas vezes se tornam limitados em razão do grande investimento de recursos financeiros. Dessa forma, a reutilização de hipermídias na aprendizagem é uma excelente opção que deve ser prevista desde o seu planejamento, para que contemple características inerentes a um material educativo reutilizável, conforme propõem os Objetos de Aprendizagem (OA).

Assim, denota-se que por suas características, os sistemas hipermidiáticos descartam o processo de leitura sequencial, ou seja, nos moldes tradicionais, e permitem que um conceito seja apresentado por intermédio de diversos meios, agregando potencial educativo para o usuário com a utilização das hipermídias.

Fonte: http://www.ifce.edu.br/laboratorios/237-nash-nucleo-avancado-em-engenharia-de-software-distribuido-e-sistemas-hipermidia.html

SEÇÃO 2 Metodologia de design

ntes de especificar a conceituação de Metodologia de Design, convém definir algumas nomenclaturas que serão referenciadas.

O método é o modo de fazer alguma coisa. Quando queremos resolver um problema e garantir bons resultados, adotamos um método. De acordo com Lakatos e Marconi (1986): [...] método, no sentido geral do termo, é o conjunto das atividades

sistemáticas e racionais que, com maior segurança e economia, permite alcançar o objetivo (proposto), traçando o caminho a ser seguido, detectando os erros e analisando as decisões do cientista.

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

Imagem 20 – O NASH - Núcleo Avançado em Engenharia de Software Distribuído e Sistemas Hipermídia

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

Desde o período Renascentista, o filósfo inglês Francis Bacon pregava o método indutivo como meio para produzir o conhecimento como resultado de experimentações contínuas e como aprofundamento do conhecimento empírico. A hipótese delineia-se por meio da observação e seguindo às normas estabelecidas pelo método científico. Para provar a hipótese é realizada a experimentação, a demonstração ou refutação da hipótese e o estabelecimento da tese ou teoria científica que gera conclusões. René Descartes, em contrapartida defendia o método dedutivo quanto à possibilidade de aquisição do conhecimento a partir da elaboração lógica de hipóteses. Contudo, apesar do tempo, essa discussão permanece atual e presente em diferentes âmbitos projetuais. Já projeto designa um conjunto de fases, etapas e atividades executadas para concepção, desenvolvimento, implantação, certificação e comercialização de produtos. Tais definições mostram alguns pontos de vista e dão margem ao uso, de forma diferenciada, da metodologia de projetos, colaborando assim para o desenvolvimento de diferentes esquemas metodológicos.

Segundo Löbach (2001), o conceito de design, muitas vezes, causa confusão por não ficar explícito o que significa o termo. No dicionário há diversas opções: - Projeto, plano;

- Esboço, desenho, croqui;

- Construção, configuração, modelo.

A partir destas definições poderíamos deduzir que é uma ideia, um projeto ou um plano para solução de um determinado problema. Ele começa pelo desenvolvimento de uma ideia, pode concretizar-se em uma fase de projeto e sua finalidade seria a resolução dos problemas que resultam das necessidades humanas (LÖBACH, 2001). Bomfim (1995), apud Vasconcelos et al. (2010), propõe o conceito de metodologia como “[...] a ciência que se ocupa do estudo de métodos, técnicas ou ferramentas e de suas aplicações na definição, organização e solução de problemas teóricos e práticos”, e a Metodologia de Design “[...] a disciplina que se ocupa da aplicação de métodos a problemas específicos e concretos.” Roozenburg (1996), apud Vasconcelos et al. (2010) apresenta metodologia de duas maneiras: descritiva — quando revelar o método aplicado à “estrutura lógica analítica” do pensamento do Design, que é o principal objetivo — e prescritiva (ou normativa) — quando a metodologia forma opinião com embasamentos em análises descritivas, recomendando ou demandando para determinados problemas a aplicação de certos métodos. Gomez (2004) resume metodologia de uma forma objetiva e clara:

METODOLOGIA = (métodos + técnicas + ferramentas) BOM SENSO

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

� Método =

- como o projeto será desenvolvido;

- o caminho que deve ser percorrido;

- os procedimentos que devem ser adotados.

� Técnicas = meios/instrumentos intermediários na solução dos problemas de projeto (exemplo: matriz, brainstorming, 635, análise de funções...); Assim, a metodologia de design, por ter esta proximidade e relação maior de intimidade com o usuário, apresenta-se como metodologia descritiva. Contribui para o entendimento e desenvolvimento de um processo de trabalho coerente, define metas, etapas e tarefas a serem cumpridas, organiza o tempo e o levantamento de recursos necessários para sua execução.

É importante a visualização de alguns modelos de Metodologia de Design, para um maior entendimento do assunto tratado. Os modelos sugeridos são propostos por Gui Bonsiepe et al. (1984) e é importante destacar que uma metodologia projetual não deve ser seguida como uma receita de bolo, pois não é garantia de sucesso e sim de probabilidade de sucesso. Bonsiepe (1984) diz que a metodologia projetual se baseia na hipótese de que no processo projetual existe uma estrutura comum, como se fosse uma armadura. Esquematicamente se pode subdividir o processo projetual nos seguintes passos: 1. Problematização, 2. Análise, 3. Definição do problema, 4. Anteprojeto Geração de alternativas, 5. Avaliação, 6. Decisão, 7. Escolha, 8. Realização e 9. Análise final da solução.

Seguem alguns exemplos visuais dos tipos de metodologia apresentados por Bonsiepe (1984): � Tipo 1 – Linear Processo de Bruce Archer

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

� Ferramentas = instrumentos físicos ou conceituais (símbolos matemáticos, tabelas, lista de verificação, QFD).

PRÁTICAS DE DESIGN 1

Estabelecimento de um programa

Coleção de dados Análise Síntese

P R ÁT I C A S D E D E S I G N

Desenvolvimento Comunicação No Tipo 1 – Linear, as etapas são executadas numa ordem pré-definida, sem revisões. É uma visão mais racionalista, que propõe um processo unidirecional de resolução de problema. � Tipo 2 – Com Feedback Processo de Bernanhard E. Bürdek

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

No Tipo 2 – O feedback é um aperfeiçoamento da metodologia linear, pois percebeu-se a necessidade de revisão das etapas, devido a novas informações durante o processo. � Tipo 3 – Circular

Nesta metodologia algumas etapas são executadas diversas vezes sempre na mesma ordem e cada ciclo aumenta-se gradativamente a definição da solução. � Tipo 4 – Flexibilidade Processo Alemão VDI

Como mostra a figura a seguir, nesta metodologia a estrutura é configurada semelhante a uma rede, existe uma sequência entre cada etapa, que pode ser alterada conforme o problema vai se sendo solucionado.

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

Processo de Bob Borzak

P R ÁT I C A S D E D E S I G N

PRÁTICAS DE DESIGN

Segundo Bonsiepe (1984), a metodologia não tem finalidade em si mesma, pois é apenas uma ajuda no processo projetual. Oferece uma ajuda/orientação no procedimento do processo (macro – estruturas, fases, etapas) e oferece técnicas, métodos que podem ser usados em certas etapas (micro – estruturas).

O método para o Designer não é nada absoluto nem definitivo; é algo que se pode modificar, se encontrarem outros valores objetivos que melhorem o processo. E isto está relacionado à criatividade do projetista que, ao aplicar o método, pode descobrir algo para melhorar. Portanto, as regras de método não bloqueiam a personalidade do projetista, mas, pelo contrário, estimulam-no a descobrir coisas que, eventualmente, poderão ser úteis também aos outros (MUNARI, 1998, p. 11).

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

Entre as metodologias apresentadas, no projeto de ambiente hipermidiático pode-se optar pelo uso de qualquer um dos tipos, desde que o processo esteja centrado no usuário. Ulbricht (2006) ressalta que para iniciar o projeto deste tipo de ambiente, é preciso responder: “Quem serão os usuários do sistema? O que eles já conhecem a respeito do assunto? Que vocabulário conhecem? Qual sua experiência em relação à informática (novatos ou especialistas)?”.

Os usuários buscam novas formas de utilização nos ambientes hipermidiáticos, formas que possam lhes proporcionar semelhante poder de interação encontrado em ambientes presenciais, ou que, no mínimo, lhes forneçam a condição de disponibilizar para o grupo o que eles concebem como informação, deixando, assim, sua condição de meros receptores, o usuário acaba fomentando um fluxo de informação mais dinâmico em que obtém-se uma troca de conhecimentos.

SEÇÃO 3

Metodologia de design centrado no usuário (hcd human centred design)

usuário é aquele que se conecta no ciberespaço para realizar atividades como ler o jornal, fazer uma transferência bancária, compras, bater papo, jogar um jogo de rede, participar de um fórum de discussões especializadas, enviar ou receber e-mails, fazer um tour por um museu digital e trabalhar (ROYO, 2008). Estas ações são cotidianas e de lazer, e é isso que vai definir como projetar o design da interface visando cada uma destas ações.

Para Preece, Rogers e Sharp (2005), o design centrado no usuário implica saber muito sobre o usuário e suas tarefas para poder explorar estas informações, citadas acima. Assim é possível obter um melhor entendimento das necessidades e dos objetivos dos usuários, gerando um produto mais adequado e de maior utilidade, embora exija que sejam coletadas e interpretadas muitas informações a respeito do usuário.

Identificar os usuários pode parecer simples, mas há muitas interpretações para o termo usuário. A definição mais óbvia diz respeito

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

As respostas destas perguntas dão subsídio para a elaboração de uma narrativa adequada aos objetivos e ao público-alvo do projeto. O ideal é que os ambientes hipermidiáticos sejam flexíveis e se adaptem aos objetivos últimos do projeto/design. São espaços planejados para dar condições de alteração de comportamentos e hábitos de trabalho, viabilizar o diálogo, a reflexão e o registro crítico de percursos cognitivos.

PRÁTICAS DE DESIGN àqueles indivíduos que interagem diretamente com o produto a fim de realizar uma tarefa. A maioria das pessoas concorda com a definição; entretanto, existem outras que podem também ser consideradas definições de “usuários”. Por exemplo, Holtzblatt e Jones (1993) incluem em sua definição de “usuários” aqueles que gerenciam usuários diretos, aqueles que recebem produtos do sistema, que testam o sistema, que tomam decisão de compra e aqueles que utilizam produtos concorrentes.

P R ÁT I C A S D E D E S I G N

Eason (1987) identifica três categorias de usuário: primário, secundário e terciário. Os usuários primários são aqueles que provavelmente serão usuários frequentes do sistema; já os secundários são aqueles ocasionais ou que utilizam o sistema por meio de um intermediário; por fim os terciários são aqueles afetados pela introdução do sistema ou que terão influência na sua compra (PREECE; ROGERS; SHARP, 2005, p. 191). Os indivíduos que tem uma participação (stake) no desenvolvimento de um produto bem-sucedido, são os stakeholders. Tratam-se de “[...] indivíduos ou organizações que serão afetados pelo sistema e que têm influência direta ou indireta nas necessidades do sistema” (KOTONYA; SOMMERVILLE, 1998 apud PREECE; ROGERS; SHARP, 2005). Um conceito que vem sendo muito utilizado para um processo que tem como objetivo definir e desenvolver novos conceitos, produtos e/ ou serviço em parceria com clientes e com expert stakeholders de uma empresa é a cocriação (co-creation).

A cocriação seria “[...] uma forma de inovação que acontece quando as pessoas de fora da empresa [...]” (fornecedores e, sobretudo, clientes, como relata a sofrível descrição da Wikipédia), “[...] associam-se ao negócio ou produto agregando inovação de valor, conteúdo ou marketing e recebendo em troca os benefícios de sua contribuição, sejam eles através do acesso a produtos customizados ou da promoção de suas ideias.” Cita-se como exemplo a própria Wikipédia que, “[...] editada por milhares de pessoas no mundo todo [...] protagoniza um dos pilares da co-criação, a colaboração.” (Franco, 2012, p. 2). O resultado dessa cocriação poderá identificar a forma de diminuir o risco de lançar um produto novo para o mercado, estando assim em consonância com as necessidades dos futuros utilizadores, bem como aumentará a transparência da empresa e dos seus produtos facilitando uma melhor compreensão dos mesmos (como funcionam e como podem ajudar no dia a dia do consumidor). Em suma, a cocriação é um processo composto por tentativas recorrentes de estabelecer e restabelecer congruências múltiplas e recíprocas entre ideias que mutam quando interagem, nem sempre se aproximando e se fundindo, mas frequentemente se distanciando, e que podem ser novamente modificadas na interação para se combinar e reagir “quimicamente” umas com as outras em novas combinações gerando novas “substâncias” (novas ideias substantivas).

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

A seguir apresentamos uma metodologia defendida por Moggridge (2007). Ela é composta por dez etapas, organizadas de maneira cíclica e dividida em três grandes grupos: compreensão, geração e seleção. Mas apesar de sua ordenação cíclica, o autor defende que o enfoque mais eficiente não é o linear, nem o espiral, mas o que ele chama de "modelo fliperama" onde o designer (ou equipe) alterna rapidamente entre as etapas em uma sequência que pode parecer desordenada, mas na verdade é guiada pelo julgamento do designer:

Esquema 5 – Modelo Fliperama

Fonte: Moggridge (2007).

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

Um dos aspectos de desenvolvimento centrado no usuário é o seu envolvimento no processo de desenvolvimento do projeto, onde ele contribui ativamente para o design em si, tornando-se codesigner. Os usuários não são designers, mas os benefícios resultantes de se possibilitar que eles contribuam para o design são bem grandes, no que se diz respeito à aceitação do produto por parte de outros usuários. Portanto, técnicas que envolvem os usuários ativa e produtivamente no design vêm sendo desenvolvidas (PREECE; ROGERS; SHARP, 2005). Desta forma estão utilizando usuários reais no processo de desenvolvimento, para obter um melhor entendimento das necessidades e dos objetivos dos usuários, facilitando assim o processo do designer que está desenvolvendo o produto.

PRÁTICAS DE DESIGN As cores separam as atividades em três grupos, as setas pretas mostram a ordenação cíclica e as verdes uma possível evolução segundo o "modelo fliperama".

P R ÁT I C A S D E D E S I G N

Entretanto, Preece et al. (2005), acrescentam três características chave do processo de design de interação: (1) os usuários devem estar envolvidos no desenvolvimento do projeto; (2) a usabilidade e as metas decorrentes da experiência do usuário devem ser identificadas, documentadas e acordadas desde o início; e (3) a interação.

Por fim, os autores destacam as metas do design de interação dividindoas, como visto anteriormente, entre metas de usabilidade e metas decorrentes da experiência do usuário. As metas de usabilidade são: eficiência, eficácia, segurança, utilidade, facilidade de aprendizagem e facilidade de se lembrar como se usa. Já as metas decorrentes da experiência do usuário consistem na criação de sistemas que sejam: satisfatórios, agradáveis, divertidos, interessantes, úteis, motivadores, esteticamente apreciáveis, incentivadores de criatividade, compensadores e emocionalmente adequados. Pode-se observar que as metas de usabilidade são mais palpáveis e, consequentemente, mais fáceis de serem analisadas por um dos diversos métodos de avaliação. Já as metas da experiência do usuário são subjetivas e envolvem necessariamente testes com usuários, a partir dos quais é possível perceber que, em termos de metodologias, o design em ambiente hipermidiático está se aproximando cada vez mais das práticas tradicionais de design.

Assista aos vídeos clicando na caixa a seguir e no link e complemente ainda mais seus conhecimentos: O que é Web Design? https://www.youtube.com/watch?v=oo17Z4tylzg Metodologia de um designer https://www.youtube.com/watch?v=PU-pVVrpsp8

Metodologia de umNO designer METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS USUÁRIO

AUTOAVALIAÇÃO 6 1 Qual é a importância da hipermídia na aprendizagem?

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

Metodologia de um designer

100

PRÁTICAS DE DESIGN

P R ÁT I C A S D E D E S I G N

2 O que é uma Metodologia de Design?

3 O que é cocriação?

4 Cite três características no processo de design de interação.

A adequação às necessidades dos indivíduos é uma característica central nos projetos de mídia interativa em ambiente hipermidiático. Percebe-se não só uma tentativa de adequar os serviços e produtos aos desejos e singularidades das pessoas, mas também uma tendência de possibilitar que os próprios usuários sejam responsáveis pela criação dos produtos. Cada projeto precisará decidir o nível de envolvimento do usuário, visando fornecer suporte a esse envolvimento. Um projeto poderá também utilizar uma metodologia ou uma combinação de técnicas metodológicas. Percebe-se que existem muitas semelhanças nas estruturas gerais de metodologia de design, propostas por Bonsiepe (1984), e de design centrado no usuário em ambientes hipermidiáticos. Ambas são lineares, tem alterações durante o processo, são cíclicas e de geração e redução. No entanto, cada abordagem apresenta vantagens e desvantagens. Tendo em vista um cenário de permissividade computacional que se aproxima em ambientes hipermidiáticos, permeados por sistemas de informação interativos, tem-se um novo paradigma na concepção dos produtos. Já não basta ter consciência da dinâmica que se estabelece no momento de interação com os objetos. Se antes estes eram estáveis, apesar de estarem sujeitos a múltiplas interpretações, agora os produtos se adéquam dinamicamente ao contexto. Múltiplos dispositivos podem ser usados para exibir informações, as quais, muitas vezes, são criadas, selecionadas e hierarquizadas pelos próprios usuários. Em um ambiente tão fluido, que potencializa processos de comunicação cada vez mais dinâmicos, a noção de autoria fica difusa frente a tantos agentes, e o papel de mediador do designer é cada vez mais evidente.

101

M E T O D O L O G I A D E P R O J E T O D E A M B I E N T E S H I P E R M I D I ÁT I C O S C E N T R A D O S N O U S U Á R I O

METODOLOGIA DE PROJETO DE AMBIENTES HIPERMIDIÁTICOS CENTRADOS NO USUÁRIO

102

REFERÊNCIAS ALVES, Willian Pereira. CorelDraw 12 em português: teoria e prática. 1. ed. São Paulo: Erica, 2005.

ARANTES, Priscila. Arte e mídia: perspectivas da estética digital. São Paulo: Editora Senac, São Paulo, 2005. AZUMA, R. T. A Survey of augmented reality: teleoperators and virtual environments, v. 6, n. 4, p. 355-385, 1997. BOCK, Ana Mercês Bahia. Psicologias: uma introdução ao estudo de psicologia. São Paulo: Saraiva, 1999.

BONSIEPE, Gui. Design: do material ao digital. Tradução Cláudio Dutra. Florianópolis: FIESC/IEL, 1997.

BONSIEPE, Gui; KELLNER, P.; POESSNECKER, H. Metodologia experimental: desenho industrial. Brasília: CNPq/Coordenação editorial, 1984. BUGAY, Edson Luiz; ULBRICHT, Vânia Ribas. Hipermídia. Florianópolis: Bookstore, 2000. CYBIS, et al. Ergonomia e usabilidade: conhecimentos, métodos e aplicações. São Paulo: Novatec, 2007.

COLOGNI, Cláudio et al. Web Design passo a passo. Goiânia: Gráfica Terra, 2002.

DIAS, Cláudia. Usabilidade na Web: criando portais mais acessíveis. Rio de Janeiro: Alta Books, 2003. FRANCO, Augusto de. Co-criação: reinventando o conceito. Draft_29jan12. GOMEZ, L.S.R. Os 4P''s do design: uma proposta metodológica não linear de projeto. 2005. 141 f. Tese (Doutorado)–Universidade Federal de Santa Catarina, Centro Tecnológico, Florianópolis, SC, 2005.

IBM. Website IBM, 2010. Disponível em: <http://www01.ibm.com/software/ ucd/designconcepts>. Acesso em: 6 set. 2010.

REFERÊNCIAS

103

JOHNSON, S. Cultura da interface: como o computador transforma nossa maneira de criar e comunicar. Rio de Janeiro: Jorge Zahar, 2001.

KRUG, Steve. Não me faça pensar!: uma abordagem de bom senso à usabilidade na web. Tradução Acauan Pereira Fernandes. Alta Books, 2000. Tradução Don't make me think! second edition. LAKATOS, Eva M.; MARCONI, Marina. Fundamentos da metodologia científica. São Paulo: Atlas, 1986.

MEMÓRIA, F. Design para a Internet projetando a experiência perfeita. Editora Campus, 2006. MENEGOTTO, José Luis; ARAUJO, Tereza Cristina Malveira de. O desenho digital: técnica e arte. Rio de Janeiro: Interciência, 2000.

MICELI, Maria Tereza; FERREIRA, Patrícia. Desenho técnico básico. Rio de Janeiro: Ao Livro Técnico, 2001. MOGGRIDGE, B. Designing Interactions. Cambridge: The MIT Press, 2007.

MULLET, Kevin; SANO, Darrell. Designing visual interfaces: communication oriented techniques. California: Sunsoft, 2006. MUNARI, Bruno. Das coisas nascem coisas. Tradutor Jose Manuel de Vasconcelos. São Paulo: Martins Fontes, 1998. Tradução Da cosa nasce cosa. NIELSEN, Jackob. Projetando Websites. Tradução Ana Gibson. Rio de Janeiro: Campus, 2000. Tradução The practice of simplicity.

NIEMEYER, Lucy. Elementos de semiótica aplicados ao design. 3. ed. Rio de Janeiro: 2AB, 2009. NORMAN, Donald A. O design do dia a dia. Tradução Ana Deiró. Rio de Janeiro: Rocco, 1994. Tradução The design of everyday things.

REFERÊNCIAS

LÖBACH, Bernd. Design industrial: bases para a configuração dos produtos industriais. Tradução Freddy Van Camp. São Paulo: Blücher, 2001. Tradução Industrial design: grundlagen der industrieproduktgestaltung.

104

PRÁTICAS DE DESIGN

OLIVEIRA, Marina. Produção gráfica para designers. São Paulo: 2AB, 2001. PERÓN, Maria Luísa. Sistema de identidade visual. São Paulo: 2AB, 2001.

PERUZZOLO, A. C. A Comunicação como Encontro (no prelo). Santa Maria, RS: PET – Grupo Comunicação UFSM, 2003. PINHO, J. B. Jornalismo na Internet: planejamento e produção da informação on-line. São Paulo: Summus, 2003.

P R ÁT I C A S D E D E S I G N

PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de interação: além da interação humano-computador. Tradução Viviane Possamai. Porto Alegre: Bookman, 2005. Tradução Interaction design: beyond humancomputer interaction.

PRIMO, Lane. Estudo dirigido de Adobe Photoshop CS2 em português. 2. ed. São Paulo: Erica, 2006. REZENDE F.; BARROS, S. Souza. Discussão e reestruturação conceitual através da interação de estudantes com as visitas guiadas do sistema F&M. Revista Brasileira de Pesquisa em Ensino de Ciências. ABRAPEC. 1:2, maio/ago. 2001.

ROYO, Javier. Design Digital. Tradução Osvaldo Antonio Rosiano. São Paulo: Rosari, 2008. Tradução Diseño digital. SANTAELLA, Lúcia. Semiótica aplicada. São Paulo: Thomson, 2002.

. Navegar no ciberespaço: o perfil cognitivo do leitor imersivo. São Paulo: Paulus, 2004.

SILVA, Marco. Infoexclusão e analfabetismo digital: desafios para a educação na sociedade da informação e na cibercultura. In: FREITAS, Maria T. A. (Org.) Cibercultura e formação de professores. Belo Horizonte: Autêntica Editora, 2009. SILVA, C. R. de O. Avaliação de Sistemas de Hipermídia Pedagógica na Perspectiva da Ergopedagogia. In: PEREIRA, A. T. C.; SANTOS, N. dos;

REFERÊNCIAS

105

ULBRICHT, V. R. Ambientes Hipermidiáticos. v. 1. Rio de Janeiro: Ciência Moderna, 2006. cap. 2, p. 23-36.

TORI, R.; KIRNER, C.; SSISCOUTTO, R. A. Fundamentos e tecnologia de realidade virtual e aumentada. Editora SBC, 2006. [on-line] Available at: <http://romerotori.org/Sumario-Livro-V2006.pdf>. Acesso em: 5 jun. 2013.

ULBRICHT, V. R. Conceitos, definições e metodologia para desenvolvimento de ambientes hipermidiáticos. In: . Ambientes Adaptativos: trilhando novos caminhos para a hipermídia. Rio de Janeiro: Ciência Moderna, 2006. cap. 2, p. 19-34.

VASCONCELOS, Luis; et al. Um modelo de classificação para metodologias de design. In: CONGRESSO BRASILEIRO DE PESQUISA E DESENVOLVIMENTO EM DESIGN, 9., 2010, São Paulo. Anais P&D Design 2010. São Paulo: Anhembi Morumbi, 2010. Disponível em: <http://blogs.anhembi.br/ congressodesign/anais/artigos/69866.pdf>. Acesso em 3 jun. 2013. VILLAS-BOAS, André. Princípios de identidade visual. São Paulo: 2AB, 2001. ZANETE, Nelson Henrique; TAZIMA, Antônio F. M. Multimídia é a Mensagem. Universidade Federal do Rio Grande do Sul, 2006.

REFERÊNCIAS

UFMT. Apostila Internet Avançada. [20--]. Disponível em: <http://araguaia. ufmt.br/curso/CURSOS_AVANCADOS/INTERNET_AVANCADA/alg.html>. Acesso em 12 jun. 2013.

106

Respostas das atividades de autoavaliação Autoavaliação 1 1 O desenho é utilizado como recurso principal e fundamental para desenvolver e representar as ideias. É um ato de comunicação e estabelece um diálogo efetivo, onde é necessário que sejam compartilhados, entre o emissor e o receptor da mensagem, os códigos de interpretação da linguagem utilizada. 2 Veja que no desenho manual os traços feitos sobre o papel se transformam em um desenho único, no qual para qualquer alteração, como mudar seu tamanho, um novo desenho deverá ser realizado. E quando trabalhamos com desenhos feitos por meios digitais esta operação não é necessária. A representação gráfica realizada por meio digital, pode ser feita desenhando, isoladamente, as partes que constituem os objetos e fazendo uso de transformações geométricas (translação, rotação, mudanças de escala e reflexões), podemos unir e relacionar essas partes, em um único modelo.

O sucesso com sistemas digitais de desenho depende em grande parte das transformações aplicadas durante o processo. O estudo e planejamento das formas geométricas básicas, que serão reaproveitadas no futuro, é fundamental para o desenvolvimento de desenhos digitais.

3 Os softwares mais utilizados atualmente são:

- Desenho Vetorial/Ilustradores: Illustrator, CorelDraw;

- Desenho de bitmaps/Edição de fotos: Adobe Photoshop, Corel Photo Paint; - Edição de Vídeo: After Effects, Adobe Premiere;

- Softwares de Modelação 3D/CAD: Autocad, 3DMax, Google SketchUp, Blender, SolidWorks, Rhino3d.

4 Em inglês a palavra design pode ser usada tanto como um substantivo quanto como um verbo. O verbo refere-se a um processo de dar origem e, então, desenvolver um projeto de algo. Casamento entre a técnica e a estética, a beleza e a funcionalidade, aplicados ao planejamento e à produção de objetos, seja para uso, seja para a contemplação. Autoavaliação 2 1 Ciberespaço é um espaço existente no mundo de comunicação em que não é necessária a presença física do homem para constituir a comunicação

RESPOSTAS DAS ATIVIDADES DE AUTOAVALIAÇÃO

107

como fonte de relacionamento, dando ênfase ao ato da imaginação, necessária para a criação de uma imagem anônima, que terá comunhão com os demais. É o espaço virtual para a comunicação disposto por meio de tecnologia.

Apesar da Internet ser o principal ambiente do ciberespaço, devido a sua popularização e sua natureza de hipertexto, o ciberespaço também pode ocorrer na relação do homem com outras tecnologias: celular, pagers, comunicação entre radioamadores e por serviços do tipo “tele-amigos”, por exemplo.

2 Tecnologia, cultura e design retroalimentam-se de maneira dinâmica, trazendo diferentes ingredientes para o desenvolvimento e evolução social (cultural, tecnológica, econômica etc.). Eles incidem uns sobre os outros e se modificam continuamente, transformando o entendimento que o homem tem do mundo.

Tecnologia na acepção de que são todas as manifestações ou ações empreendidas para desenvolver novas ferramentas que servem para conduzir as organizações e a vida humana. Ou seja, a tecnologia como uma linguagem própria das ciências relacionadas com o ciberespaço (informática, eletrônica etc.) como criador de dispositivos.

O Design trabalha em busca da solução de problemas, com intuito de facilitar as atividades dos indivíduos, melhorando o processo de uso e comunicação de objetos e sistemas.

4 O design contemporâneo é um dos produtores e disseminadores da cultura. Um reflexo da atividade humana e sua evolução. Os avanços culturais, tecnológicos e do design acontecem a partir da correlação destes três elementos e esta integração estimula o desenvolvimento constante da sociedade e do homem.

5 Exemplo da relação tecnologia-cultura-design: o aparecimento das mensagens para celulares SMS (quer dizer, as mensagens de texto enviadas de celular para celular).

RESPOSTAS DAS ATIVIDADES DE AUTOAVALIAÇÃO

3 Cultura que é um conjunto de ideias e expressões de vida, comportamentos e costumes moldados a partir do desenvolvimento artístico, tecnológico, científico e industrial de uma determinada sociedade.

108

PRÁTICAS DE DESIGN

Autoavaliação 3 1 A identidade visual de uma empresa, pessoa ou organização é o resultado do conjunto de mensagens e experiências que esse ser transmite, e que fala de suas características materiais e imateriais. A identidade é experimentada pelo usuário em todas as suas facetas em relação à transmissão, ferramentas que colocamos à disposição do usuário e na funcionalidade que essa ferramenta oferece (que é entendida como pertencente à marca X) para ele. Portanto, a experiência de uso pode ser entendida também como a soma de mensagens (linguagem) que o usuário receberá como parte da identidade da marca. 2 Para compreender a importância do hipertexto é necessário analisar e navegar por diversos sites, pois é um texto em formato digital, ao qual agregam-se outros conjuntos de informação na forma de blocos de textos, palavras, imagens, sons, cujo acesso se dá por meio de referências específicas denominadas links e que, por sua vez, nos dão suporte para entendermos um conjunto de informações que articulam a comunicação.

P R ÁT I C A S D E D E S I G N

Autoavaliação 4 1 Interface Gráfica é um conceito da forma de interação entre o usuário do computador e um programa por meio de uma tela ou representação gráfica, visual, com desenhos, imagens etc. Geralmente é entendido como a “tela” de um programa. É a Interface que une ícones, menus, janelas e funções para realizar tarefas e facilitar a vida do usuário de um sistema, de modo que o usuário aprenda a usá-lo instintivamente. 2 É saber investir na interface do usuário, é proporcionar uma navegação simples, rápida e sem muitas dúvidas. O sistema deve ser focado no usuário para melhor entendimento das ações e comportamentos dos usuários.

3 A forma ou imagem desempenha uma função dentro do contexto. A aplicação dos elementos cor, brilho, textura e tamanho são percebidos visualmente de maneiras diversas e não isoladamente, mas em um conjunto agrupado que segue uma ordem hierárquica determinada pelo contexto. A escolha, definição e organização dos elementos determinam a imagem (forma), esta por sua vez representa as características de uma informação (função). O movimento é gerado pelo caminho percorrido pela vista do usuário por intermédio das formas geométricas, linhas, textos até

RESPOSTAS DAS ATIVIDADES DE AUTOAVALIAÇÃO

109

percorrer toda a composição. Linhas, cores, formas e figuras geométricas são empregadas para direcionar o olhar a pontos-chaves da página.

4 A escolha da tipografia é extremamente importante para o design de uma interface. Quando trabalhamos com uma interface digital, temos certas limitações nas escolhas dos tipos (fontes utilizadas no texto). A legibilidade se torna ponto de equilíbrio nessa escolha, já que a composição tipográfica deve ser legível e totalmente envolvente.

Autoavaliação 5

2 Usabilidade significa simplicidade e eficiência, ou seja, algo que funcione bem e que uma pessoa leiga ou não muito experiente consiga usá-lo para a sua devida finalidade, sem nenhuma frustração durante o processo. No caso da interface digital, a navegação deve se fácil e clara, que se autoexplique. 3 Existem características que podem dificultar ou facilitar a leitura e a compreensão do conteúdo disponível em uma interface. Dentre essas características destacam-se a legibilidade, a estética e a densidade informacional.

4 Semiótica (do grego semeion = signo) é a teoria geral dos signos. Segundo Peirce, “signo é algo que representa alguma coisa para alguém em determinado contexto”. Na semiótica os signos estão organizados em códigos, os quais se constituem sistemas de linguagem que formam o alicerce para todo e qualquer tipo de comunicação. A comunicação, resumidamente, é o processo de transmissão de

RESPOSTAS DAS ATIVIDADES DE AUTOAVALIAÇÃO

1 A arquitetura de informação tem como função organizar da melhor maneira as informações de um ambiente digital (site, blog etc.) para que possam ser encontradas e identificadas com facilidade. Para tanto, elas devem ser bem pensadas na sua distribuição possibilitando que a navegação por parte do usuário aconteça como foi projetada.

110

PRÁTICAS DE DESIGN

mensagens por canais para um receptor. Na visão do design, esta mensagem deve chegar ao receptor de forma clara e precisa para que seja interpretada corretamente, ocorrendo a resposta desejada por parte de quem a recebe. Para o design a linguagem visual é o meio pelo qual a mensagem é transmitida e interpretada. Autoavaliação 6 1 A capacidade interativa da hipermídia constitui o seu potencial pedagógico, no qual o aluno é estimulado a buscar seu próprio conhecimento a partir dos recursos de navegação, de resolução de problemas, de tentativas de acerto e autonomia quanto à definição do ritmo de trabalho que lhe são proporcionados em um sistema hipermídia.

P R ÁT I C A S D E D E S I G N

2 É uma ideia, um projeto ou um plano para solução de um determinado problema. Ele começa pelo desenvolvimento de uma ideia, pode concretizar-se em uma fase de projeto e sua finalidade seria a resolução dos problemas que resultam das necessidades humanas.

3 A cocriação seria “uma forma de inovação que acontece quando as pessoas de fora da empresa...” (fornecedores e, sobretudo, clientes, como relata a sofrível descrição da Wikipédia), “associam-se ao negócio ou produto agregando inovação de valor, conteúdo ou marketing e recebendo em troca os benefícios de sua contribuição, sejam eles através do acesso a produtos customizados ou da promoção de suas ideias”. Cita-se como exemplo a própria Wikipédia que, “editada por milhares de pessoas no mundo todo... protagoniza um dos pilares da co-criação, a colaboração”. 4 Três características chave do processo de design de interação: (1) os usuários devem estar envolvidos no desenvolvimento do projeto; (2) a usabilidade e as metas decorrentes da experiência do usuário devem ser identificadas, documentadas e acordadas desde o início; e (3) a interação.

Universidade do Oeste de Santa Catarina www.unoesc.edu.br/virtual Campus de Joaçaba

Campus de Videira

Rua Getúlio Vargas, 2125, Bairro Flor da Serra

Rua Paese, 198, Bairro Universitário

CEP: 89600-000

CEP: 89560-000

Fone: (49) 3551-2000

Fone: (49) 3533-4400

Campus de São Miguel do Oeste

Campus de Xanxerê

Rua Oiapoc, 211, Bairro Agostini

Rua Dirceu Giordani, 696, Bairro Universitário

CEP: 89900-000

CEP: 89820-000

Fone: (49) 3631-1000

Fone: (49) 3441-7000