PG6 - Web - 2011 Stephania Padovani

Anderson Terasaca Juliana Coelho Mariana Pavo

Projeto de um novo website

Design de uma enciclopdia virtual de filosofia Sumrio Introduo - 02 Descrio do Processo de Design - 03 Design Preliminar - 09 Design Esquemtico - 18 Design Final - 24 Concluso - 30

01. Introduo
a) Objetivos O objetivo do projeto aplicar estudos tericos de web design, interface e usabilidade na construo de um novo site, atravs de processos bem definidos, pesquisa com o usurio, gerao de alternativas, prototipagem e simulao de design final. Para a realizao do projeto, foi escolhida a temtica de filosofia para delinear o escopo do projeto e trazer um problema para ser resolvido atravs do processo de design. b) Justificativa Desde a dcada de 60, o estudo do design acompanha as evolues tecnolgicas com conhecimentos de layout, tipografia, teoria da cor e gestalt. Porm, foi em meados dos anos 80 que novos problemas surgiram junto da emancipao do computador. Neste cenrio, o design entra em cena como forma de visualizar esta tecnologia de forma cientfica e sistematizada. A filosofia entra como objeto de estudo por se apresentar uma disciplina de conhecimento de importncia para os diversos estudos e educao como um todo e no possuir um canal acessvel e popular dentro dos meios digitais como uma alternativa para se apresentar e discutir os assuntos relacionados. Busca-se com o projeto trazer algo original e de validade real que possa ser aproveitado em projetos futuros e contribua com a sociedade em que se insere. Good design must necessarily, in my opinion, have an impact on peoples lives, no matter how seemingly small. Good design changes things. Garr Reynolds

02. Descrio do processo de design

You cannot hold a design in your hand. It is not a thing. It is a process. A system. A way of thinking. Bob Gill, Graphic Design as a Second Language O projeto de design deve ser encarado como um processo onde traz como produto final a soluo para um problema proposto no incio. Este processo necessita ser gerenciado de maneira controlada e direcionada a fim de centralizar o processo criativo e resultar em um produto vivel, prtico e eficaz para atender s necessidades (Ambrose & Harris, 2010). O design busca gerar possveis solues e utilizar diversas tcnicas e mecanismos para encorajar diferentes formas de pensar e visualizar os problemas, gerando assim ideias criativas e inovadoras. Para isso, preciso definir etapas e fases, com entradas e sadas demarcadas, que iro auxiliar a equipe desenvolvedora a se guiarem durante o processo e entregarem o melhor resultado possvel. As designers, when we point our own ambitions at solving the problems that stand in the way of progress, we can play a vital catalyzing role. AIGA Segundo Zairi (1997), um processo necessita de quatro requisitos: entradas bem definidas, sequncia ou fluxo lgico, um conjunto de atividades claramente definidas e um resultado almejado. Dentro desses processos h o fluxo de informaes e de materias que devem ser identificados previamente, junto das etapas para que sejam facilmente gerenciados e controlados. Dentro do estudo do design, h uma srie de mtodos e processos propostos por diversos autores que se apresentam em formas variadas em nmero de etapas, contedos delas, durao e muitas outras variveis que devem se adaptar de acordo com cada projeto. Para a construo deste projeto foram analisados cinco diferentes autores de processos: Zairi (1997), Wilson & Corlett (1990), OGrady & OGrady (2006), AIGA (2008), Vora (1998) e Amborose & Harris (2010). Zairi traz o processo de design como um processo de resoluo de problemas. Para ele, h seis etapas cclicas que podem estar sempre se repetindo: identificar, selecionar e analisar problema, gerar potenciais solues, selecionar e planejar soluo, implementar e avaliar.
, 1997

Zairi

O mtodo proposto por Wilson & Corlett traz uma atividade cclica de anlise, sntese, avaliao e deciso que percorrem trs grandes fases: design preliminar, design esquemtico e design final. OGrady & OGrady propem um mtodo linear de cinco fases que podem estar retornando fases anteriores. As fases propostas so pesquisa, desenvolvimento de conceitos, prototipagem, design + produo e avaliao.

Wilson, & Corlett, 1990

OGrady & OGrady, 2006

A associao profissional de design, AIGA, traz uma doze fases de mtodo de design divididas em trs macro-etapas: definio do problema, inovao e gerao de valor. Vora apresenta um processo especfico de design para sistemas, neste divide-o em seis fases principais: planejamento, anlise, desenvolvimento, teste de usabilidade, implementao e manuteno.

AIGA, 2008

No livro Design Basics: Design Thinking, Ambrose & Harris trazem uma abordagem generalista para o processo de design que se apresentam em sete nveis: briefing, pesquisa, idealiazao, prototipagem, seleo, implementao e feedback; cada um com sub-etapas e mtodos especficos para cada atividade.

Ambrose & Harris, 2010

Aps o estudo de cada um, foi feito um levantamenteo de aspectos e mtodos pertinentes construo do produto em questo e, ento, adaptou-se um novo processo. Este trabalhar com trs grandes fases com etapas especficas: Design preliminar a fase onde o problema definido, sendo o ponto de partida do processo de design. Etapa 1. Definio Esta etapa busca estabelecer o problema e delimit-lo, buscando apresentar equipe e ao cliente os requisitos fundamentais para se chegar a uma soluo adequada.

Sub-etapas Definio de escopo Planejamento e Cronograma Sadas Briefing Plano de Projeto Etapa 2. Pesquisa A etapa de pesquisa traz a busca por informaes que iro alimentar o processo criativo. Sub-etapas Pblico-Alvo Similares Cenrios Sadas Relatrio de pesquisa com o usurio Relatrio de anlise de similares Lista de requisitos Design esquemtico consiste na fase de inovao, onde so criadas potenciais solues para o problema encontrado no incio atravs da idealizao de conceitos, necessidades e estrutura de informao, possibilidade de interao, design visual e gerao de alternativas. Aps esta fase de desenvolvimento, as ideias geradas devem passar por um filtro que retoma os critrios estabelecidos nas fases de definio e pesquisa para, ento, partir para a fase de prototipagem de potenciais solues. Etapa 3. Idealizao Nesta etapa, a informao encontrada no estgio de pesquisa usada para basear a gerao de solues para o problema inicial. H diversos mtodos para a idealizao. Durante este processo, podero haver dvidas e interpretaes dbias em relao ao briefing, por isso o feedback contnuo importante. Sub-etapas Gerao de conceitos reas de informao e estrutura Design da interao Design visual Gerao de alternativas Sadas Personalidade do produto final Wireframes Arquitetura da informao Decises de interao Parmetros visuais Sketches Etapa 4. Prototipagem Sub-etapas Refinamento das alternativas

Desenvolver design Prototipagem Sadas Prottipo Design final nesta etapa onde gerado o valor e a soluo passa a ser materializada. Primeiramente h uma etapa de avaliao que tem como objetivo o teste de usabilidade e de heursticas que possibilitaro a escolha da melhor alternativa e o seu refinamento na etapa de produo. Etapa 5. Avaliao Sub-etapas Teste com usurio Heursticas Escolha da alternativa Sadas Relatrio de avaliao geral Alternativa final Etapa 6. Produo Sadas Soluo final para o briefing Por fim h o feedback. Esta uma fase a parte do processo de projeto do produto, visa a discusso da equipe quanto aos processos empregados e o resultado final atingido. Esta etapa tem como objetivo a elaborao de um relatrio com erros e acertos para gerar um arquivamento e proporcionar uma melhoria contnua dos processos. Etapa 7. Feedback Sub-etapas Avaliao do processo de projeto pela equipe Avaliao do produto final pela equipe Sadas Relatrio Final Concluso No diagrama a seguir, possvel visualizar de forma grfica as fases e etapas do processo de design escolhido para permear o projeto proposto:

03. Design Preliminar

A primeira fase consiste em definir o problema de forma precisa. E, para isso, necessrio definir o escopo do projeto. Para determinar qual o escopo do projeto, existe muito planejamento do escopo. Para isso, tanto o gerente quanto a equipe precisam ter uma viso unificada sobre quais so os componentes do projeto, dos seus requisitos, da expectativa dos stakeholders do projeto, e de onde o projeto se encaixa na necessidade de negcio destes stakeholders (PMBOK, 2004). O resultado dos processos de planejamento de escopo a declarao de escopo. A declarao de escopo diz o que est dentro e o que est fora do projeto, de maneira clara e sem ambigidades. importante que a declarao de escopo seja bem-feita, e que haja acordo sobre ela. Quando a declarao de escopo estiver pronta, a equipe do projeto, os stakeholders, o patrocinador do projeto e o gerente de projetos no devero mudar o escopo a menos que haja um motivo muito forte que justifique essa mudana (que quase certamente implica impactos no custo do projeto). Alm disse, esta fase tambm inclui a fase de planejamento, definio de cronograma e responsveis pelas atividades para funes de gesto do projeto. A gesto o processo atravs do qual se aplicam conhecimentos, capacidades, instrumentos e tcnicas s actividades do projeto de forma a satisfazer as necessidades e expectativas dos diversos stakeholders que so indivduos ativamente envolvidos no projeto ou cujo resultado do mesmo poder afet-los positivamente ou negativamente;. Esta fase se divide em duas etapas: a de definio e a de pesquisa (PMBOK, 2004). Etapa 1. Definio Esta etapa busca estabelecer o problema e delimit-lo, buscando apresentar equipe e ao cliente os requisitos fundamentais para se chegar a uma soluo adequada. Como sadas principais, traz consigo a definio do briefing e o plano de projeto. Sub-etapas Definio de escopo Planejamento e Cronograma

a) Definio de escopo O briefing de design um documento que prov ao designer com informaes necessrias para realizar um projeto (CASS, 2008). Este documento deve focar nos resultados e sadas que o negcio possui como objetivo. Um bom briefing de design ir garantir que um design de qualidade satisfaa suas expectativas. Os objetivos buscam mostrar de forma clara equipe quais so as metas a serem atingidos com o projeto de design e importante que sejam completamente entendidos para sucesso do processo. Eles devem especificar tudo que a equipe deve saber sobre as necessidades e expectativas do cliente para que sejam definidas as limitaes do projeto e como deve ser o resultado final. Sendo assim, foram definidos os objetivos da equipe com a realizao do projeto voltado

criao do site de filosofia:

______________________________________________________________

Objetivos Difundir conhecimentos sobre filosofia para jovens universitrios de faixa etria entre 18 e 30 anos. Produzir um site sobre filosofia com contedo sobre histria, pensadores, artigos e outros materiais. Nesta mdia, tornar possvel o compartilhamento de contedo dentro das redes sociais e um espao de discusso sobre os assuntos do tema. Apresentar tericos, pensadores, artigos, videos, imagens e demais contedos relacionados filosofia e reas adjacentes.

______________________________________________________________

O mtodo dos 5 Ws uma maneira de sistematizar a elaborao do briefing e objetivo e referem-se a 5 perguntas do ingls que comeam com a letra W. Estas so: who, what, when, where e why (quem, o que, quando, onde e por que), Eventualmente, tambm podese usar os H, relativo ao how (como implementar e quanto custar). 1. Who (Quem) o cliente e o pblico-alvo? (tamanho, natureza, caracterstica) 2. What (Qual/O que) soluo de design o cliente espera? (impresso, web, vdeo) 3. When (Quando) o design ser necessrio e por quanto tempo? (perodos de tempo) 4. Where (Onde) o design sera usado? (mdia, pas, localizao) 5 Why (Por que) o cliente pensa que esta soluo necessria? + How (Como) a soluo ser implementada? (oramento, distribuio, campainha, tecnologia)
Tabela adaptada de Ambrose & Harris, 2010

Foram respondidas tais perguntas e formulado um quadro-briefing para delimitar o escopo do projeto:

______________________________________________________________
Quadro-briefing [Who] Estudantes universitrios brasileiros com idade entre 18 e 30 anos que tenham ou no conhecimento prvio sobre filosofia e tenham interesse de comear estudos ou aprofund-los. [What] Site sobre filosofia com contedo sobre histria, pensadores, artigos e outros materiais. Nesta mdia, tornar possvel o compartilhamento de contedo dentro das redes sociais e um espao de discusso sobre os assuntos do tema. [When] Data final para entrega do projeto: 13/12. [Where] Veiculao por internet, com foco de utilizao no Brasil. [Why] -Tornar informaes sobre o tema acessveis ao pblico -Estimular o conhecimento sobre o tema ao pblico-alvo

10

-Integrar o estudo de filosofia realidade atual do pblico-alvo -Difundir conhecimentos sobre filosofia para jovens universitrios de faixa entre 18 e 30 -anos.

etria

______________________________________________________________
b) Plano de projeto O plano de projeto uma proposta de soluo para um problema idenficado, limitado por uma abrangncia definida, que requer um plano de ao descrevendo as aes, atividades e tarefas a serem desenvolvidas. Para atingir aos objetivos de forma objetiva e controlada, foi executado um planejamento dentro de um cronograma (anexo 1) que delimita datas de entregas finais e auxilia o gestor ao cobrar dos membros da equipe e saber quais as prximas etapas de projeto. O cronograma foi desenhado de forma a possibilitar que a equipe tenha controle dos prazos para a execuo de cada fase e etapas at o prazo final de entrega.

Etapa 2. Pesquisa Uma vez definido e aceito o briefing, a etapa de pesquisa iniciada. Esta tem como caracterstica a investigao do objeto do escopo para reunir informaes que iro alimentar o processo criativo e orientar as decises de design. Existem diversos meios de se gerar dados qualitativos e quantitativos, que iro prover a equipe de diferentes entendimentos de atitudes e comportamentos do pblico-alvo e do cenrio em que se inserem. A etapa tem como sada: relatrio de pesquisa com o usurio, relatrio de anlise de similares e quadros semnticos. Sub-etapas Pblico-Alvo Similares Cenrios a) Pblico-Alvo Como definido na fase de briefing, o pblico-alvo escolhido para elaborao do projeto o de estudantes de graduo e ps graduo, brasileiros, de 18 a 30 anos. Entender motivaes, comportamentos e aspiraes do pblico-alvo envolve um estudo detalhado grupo e, para conhecer melhor o pblico almejado, foi feita uma pesquisa em formato questionrio em uma amostra no-probabilstica atravs da internet.

foi as do de

O questionrio (anexo 2) foi composto de onze perguntas, sendo as duas primeiras de carter introdutrio para se conhecer a amostragem, quatro para saber o comportamento em relao ao tema estudado (filosofia), trs sobre aspiraes a respeito do projeto e as trs ltimas para se identificar o perfil como usurio de websites. Ao todo, 35 pessoas responderam e o resultado foi o seguinte:

11

12

13

b) Similares A etapa de anlise de similares, tambm conhecido como benchmarking, o processo de busca por projetos j desenvolvidos que possuam algum ponto em comum com o projeto proposto. Esta pesquisa tem como objetivo a busca por melhores prticas, a idenficao de pontos fortes e fracos e o aprendizado com aqueles que j tentaram atingir objetivos semelhantes, gerando uma gesto do conhecimento. Alm disso, tambm utilizado como uma pesquisa de mercado, onde os similares so tidos como concorrentes e a sua anlise importante para traar uma estratgia que busque a diferenciao da concorrncia e entregue maior valor ao consumidor. Nesta etapa, foram analisados quatro sites com contedo semelhante proposta de website da equipe: Portal Brasileiro de Filosofia, Plataforma de Pesquisa em Filosofia de Stanford, Enciclopdia Online de Filosofia e o portal S Filosofia.

Esta anlise ocorreu na forma de listagem dos pontos forte e fracos, com base em uma busca por caractersticas de usabilidade, user experience e interatividade.

14

O Portal Brasileiro de filosofia inclui breves descries sobre filsofos, verbetes, alguns vdeos, entrevistas, cursos, livros e revistas, e-books, e indica links de enciclopdias on line de filosofia. bastante conectado redes sociais.

Enciclopdia de Filosofia de Stanford, contm poucos tens no menu, e seu acesso ao contedo se d pelo mecanismo de busca, que oferece muitos resultados e artigos bastante

15

completos. Possui muitos editores e informaes sobre eles.

Enciclopdia de filosofia on line, oferece acesso ao contedo atravs do menu alfabtico. Possui informaes sobre o site e os editores, espao para submisso de artigos e mapa do site. Possui mecanismo de busca.

O portal S Filosofia, possui resenhas, vdeos, cursos e eventos, livros, biografia de filsofos, charges, loja virtual, exerccios de filosofia e frum. Para acesso ao contedo preciso ter cadastro no site.

16

Com a relao em mos, foi feita uma compilao de todos os pontos levantados e gerada uma relao dos principais pontos fortes e dos maiores erros enfrentados pela amostra. Nesta anlise, foram identificados como principais pontos fortes: Apresentao de referncias bibliogrficas, sites externos e dados dos autores e editores, que torna o contedo mais confivel; A constncia de atualizao, que traz uma maior interatividade e maior nmero de acessos pelo mesmo usurio; Disponibilizao de mdia audiovisual, como vdeos e imagens e a sua variao na representao; Divulgao de atividades externas, como cursos e eventos; Interatividade atravs de frum de discusso, enquetes, possibilidade de submisso de artigo, ligao com outra mdia e assinatura RSS; Navegao confortvel atravs de um bom sistema de buscas, contedo hierarquizado, organizao do contedo, possibilidade de escaneiamento, etc. A anlise dos pontos fracos confirmou a relevncia dos fortes e tambm trouxe alguns aspectos a serem evitados, como: M organizao do contedo e mudana de leiaute entre sees, que dificulta a navegao intuitiva; Necessidade de login para visualizao do contedo; Mecanismo de busca falho; Ausncia de rea de respiro; Contedo incompleto, pouco confivel e sem foco; Sobrecarga cognitiva, muitos cones.

c) Lista de requisitos A lista de requisitos busca trazer para a equipe uma srie de parmetros identificados na etapa de pesquisa. Estes fazem parte do nvel de escopo do site, definido por Garrett como a parte que traz as especificaes funcionais e contedo do projeto, e tambm, a nvel de estratgia, que busca definir as necessidades do usurio. Sendo assim, os requisitos traados foram: Diversidade: de contedos e na forma de apresentao deles, utilizar recursos audiovisuais e facilitar o entendimento do contedo de formas que no apenas texto; Layout agradvel: foco no contedo, limpeza visual, leveza de navegao; Credibilidade: referencial nos contedos, dados sobre os autores e editores, links externos; Interatividade: conexo com outras mdias (on e off line) e assinatura RSS; Facilidade de navegao: acesso intuitivo, hierarquizao, organizao e categorizao dos contedos, bom sistema de buscas; Atualidade: atualizao constante com material recente; Propaganda: mnimo possvel e, se houver, relevante para o pblico.

17

Esta fase abrange o processo de inovao e busca a criao de solues em potencial para o problema gerado anteriormente. Esta a parte onde a criatividade deve ocorrer e onde os conceitos so criados para trabalh-los e organiz-los na forma de informao, interao e design visual. Etapa 3. Idealizao Com as informaes do briefing e dados coletados na fase de pesquisa, necessrio comear a etapa de idealizao para gerar potenciais solues para o problema. Nesta etapa, a criatividade busca pela inovao fundamental, porm deve-se orientar as ideias para que no fujam do escopo e necessidades identificadas na pesquisa. As ideias de design podem ser geradas atravs de diversos mtodos e pontos de referncia que permitem a gerao de resultados. Como sada desta etapa, temos a definio da personalidae do produto final atravs de uma gerao de conceitos, wireframes das pginas, formulao da arquitetura da informao, decises de interao, parmetros visuais e sketches de possveis alternativas. Aps a concluso das sadas, necessrio passar as ideias por um filtro que tenha como base a lista de requisitos gerada na fase de pesquisa e os objetivos passados pelo briefing para que haja segurana para seguir em frente e levar a melhor soluo para o problema.

04. Design esquemtico

Sub-etapas Gerao de conceitos reas de informao e estrutura Design da interao Design visual Gerao de alternativas a) Gerao de conceitos Esta sub-etapa tem por objetivo gerar conceitos e caractersticas ao produto final, dando a ele uma personalidade e atributos objetivos e subjetivos. Assim como uma marca, um site traz ao usurio um conjunto de caractersticas com as quais ele se relaciona (HEALEY, 2009), isso acontece pois tendemos a antropomorfizar os objetos e atribu-los personalidade, isto , atributos humanos em coisas com as quais queremos ter alguma relao. O mtodo escolhido para gerar conceitos foi o da disperso, que consiste em expandir palavras e frases a partir de um ponto central. Este busca agregar funes e caractersticas a algo j conhecido e objetiva criar um design nico e diferenciado. Desta maneira, criou-se um mapa mental, com o nosso objeto de projeto ao centro e suas possveis caractersticas.

18

b) Informao O objetivo desta fase entender a necessidade de informaes, a qualidade, quantidade e como agrup-las dentro do website. Gera-se aqui um modelo de arquitetura da informao, na forma de organizao do contedo existente A arquitetura da informao busca organizar os elementos de um sistema a fim de integrlos e unir o seu funcionamento para moldar a experincia do usurio. Para iniciar o processo de construo desta organizao, necessrio especificar como os usurios podero encontrar informaes no site, definindo sua organizao, navegao, rotulagem e sistema de busca (Rosenfeld & Morville, 1996). Agner (2006) traz o modelo dos 3Cs, onde define trs influncias sobre a arquitetura da informao: o Contexto, que inclui os objetivos da organizao e os aspectos externos; e o Comportamento, das categorias de usurios e como eles agem dentro do sistema; e o Contedo, informacional e modalidade de apresentao. Os dois primeiros Cs de Agner foram estudados nas fases preliminares deste projeto, com o estudo do pblico-alvo e definio do briefing. Para a concluso do C de Contedo, foi necessrio estipular os tipos de informaes e formatos desses que o usurio seria capaz de encontrar dentro do website proposto.

19

Para gerar a informao e o contedo que seria disponibilizado no website, foi utilizada a tcnica de Scribble, Say and Slap, onde papis auto-colantes foram utilizados pela equipe para escrever ideias, conect-las, junt-las e separ-las. As ideias tiveram como base a lista de requisitos gerada na fase de pesquisa e a gerao de conceitos. Com isso, chegou-se s seguintes funcionalidades: ___________________________________________________ Novidade Assuntos Filsofos Resenhas Artigos Infogrficos Podcast Vdeos Entrevistas Imagens Downloads Assinar Mdias Sociais Eventos Cursos Busca Filtros Sobre ___________________________________________________ A partir das ideias geradas, foi feita uma organizao com base em similaridade de contedos, gerando uma taxonomia e, com isso, uma lista de itens para itens da arquitetura da informao. Esta arquitetura foi gerada com o mtodo de Bottom-Up, que tem como princpio o foco no contedo, buscando semelhanas para organizar grupos e criar uma hierarquia. Dessa forma, criou-se uma estrutura para organizar as funcionalidades do site e seus contedos especficos.

Esta estrutura traz uma pgina principal, que ter como funo agregar os contedos, dar boas vindas ao usurio e expor os ltimos contedos postados e cinco orientaes verticais: Enciclopdia: seo principal do site, que traz contedo textual sobre filsofos, artigos e assuntos. Cada um desses tipos de contedo se divide em uma pgina que reuni diversos caminhos e possibilitam navegao horizontal; Multimdia: diferencial principal do site. Busca trazer contedos apresentados de formas diversas, com imagens, sons e vdeos para tornar o assunto mais agradvel e interessante aos olhos do usurio. Esta seo se subdivide em infogrficos, vdeos e podcasts; Cursos e eventos: busca fazer uma ponte com o offline e propor ao usurio opes de cursos e eventos para participar; Sobre: apresentao dos autores e idealizadores do site, bem como link para contato; Loja: uma alternativa para sanar a overdose de publicidade e tornar o site rentvel, com venda de livros, e-books, camisetas e outros materiais que tenham conexo com o pblico-alvo.

c) Interao Para que um projeto de um sistema funcione de maneira eficaz, deve-se ter o usurio como foco principal e projet-lo a partir desta perspectiva. O objetivo do design de interao consiste em trazer este redirecionamento de preocupao - da mquina para o usurio -, trazendo a usabilidade para dentro do processo de design (PREECE & ROGERS & SHARP). Isto quer dizer, os produtos devem ser fceis e agradveis de usar.

20

A preocupao central do design de interao desenvolver produtos interativos que sejam utilizveis, ou seja, fceis de aprender, eficazes no uso e que proporcionem ao usurio uma experincia agradvel (PREECE & ROGERS & SHARP). Winograd (1997) descreve o design de interao como o projeto de espaos para comunicao e interao humana. A questo fundamental neste ponto buscar uma forma de otimizar as interaes do usurio com o sistema de forma que combinem com as atividades que esto sendo desenvolvidas. Deve-se pensar: No que as pessoas so boas; Considerar fatores de auxlio; Pensar no que pode proporcionar uma experincia de qualidade ao usurio. O ponto de partida para a anlise do design de interao necessrio no site proposto foi a anlise de similares e a pesquisa com o pblico-alvo, que apresentaram informaes sobre o contexto de uso, objetivos do sistema e do usurio, conhecimento prvio dele e outros requisitos importantes. Para definir requistos e possveis solues de design de interao, foi formulada uma caixa morfolgica. Esta uma tcnica que consiste combinar vrias ideias de forma criativa e consistente, a fim de compor um conceito ou um problema. Depois da obteno dos atributos, parte-se para a construo de uma matriz, onde eles se posicionam de forma a combinar relaes entre todas as partes.

d) Design visual Os aspectos grficos do website buscaram ter como princpio a Filosofia Python, que derivada de ideias apresentadas por Tim Peters em The Zen of Phyton. Esta filosofia prega algumas declaraes:

1. 2. 3. 4. 5.

Bonito melhor que feio; Explcito melhor que implcito; Simples melhor que complexo; Complexo melhor que complicado; Esparso melhor que denso;

21

6. Leiturabilidade importante; 7. Se for difcil de explicar, uma m ideia; 8. Se for fcil de explicar, pode ser uma boa ideia;
The Zen of Python, TimPeters

Segundo Web Style Guide de Patrick J. Lynch and Sarah Horton, indicado uma tipografia com olhos bem abertos e uma entrelinha bastante espaada (seguindo a mdia de corpo 11 para entrelinha 13) para uma leitura confortvel. Seguindo estas diretrizes optamos pela Verdana, que foi desenhada para possibilitar maior legibilidade em tela, em corpo 11 e entrelinha 16. A preocupao em possibilitar conforto na leitura se deriva do fato do contedo da seo Enciclopdia ser de grande importncia para o site, e ser ele sempre mais extenso que um pargrafo. Pensando tambm na leitura e no destaque ao contedo, o contraste texto/fundo foi levemente reduzido para minimizar e emisso de luz nos olhos, (fundo em 20% de preto e texto em 90% de preto) porm mantendo contraste para diferenciao de forma. Quanto paleta, todo o leiaute segue em tons de cinza, somente com reas e palavras de destaque em vermelho e azul.

e) Gerao de alternativas Para gerar as possveis solues, a equipe realizou uma seo de brainstorming atravs da produo de sketches de wireframes. O diagrama wireframe ilustra o layout de uma pgina de web atravs de formas para representar elementos de contedo, funcionalidades e navegao. O uso de formas simples possibilita focar primeiramente no design da informao, mostrando apenas os elementos chaves do projeto, sem a distrao de cores ou imagens que podem trazer aspectos conotativos e dificultar a viso do todo (Charlotte, 2009). Etapa 4. Prototipagem Enquanto o estgio de idealizao gera potenciais solues para o briefing proposto, a etapa de prototipagem busca trabalhar profundamente nessas alternativas a fim de trazer o soluo final para o mais perto da realidade. O processo de prototipagem importante para permitir a validao da potencial soluo em termos tcnicos e visuais. O prottipo fornece ao designer a possibilidade de visualizar e manusear o conceito. Deve ser feito de maneira que traga os aspectos principais para ser avaliado de maneira eficaz. Sub-etapas Refinamento das alternativas Desenvolver design

22

Prototipagem a) Refinamento das alternativas Aps serem gerados sketches sobre como seria a soluo proposta, foram analisados os pontos fortes de cada ideia e gerado um wireframe final, com o grid estabelecido e reas de informao.

Na estrutura proposta, foram definidas as seguintes reas de informao: 1. Logo do site e link para home; 2. Menu principal, com navegao horizontal, tpicos e sub-tpicos; 3. Barra de busca; 4. cones de links externos, mdias sociais; 5. reas de informao especfica dos contedos, com informaes para auxlio navegao na primeira coluna e textos nas outras duas. As trs colunas com possibilidade de diviso em duas para trabalhar com elementos menores. b) Prototipagem A prototipagem foi realizada atravs da concepo das telas de interface principais do site e, para fins de funcionalidade, um arquivo interativo foi produzido (ANEXO CD).

Nesta etapa, gerado o valor e a soluo passa a ser materializada. Primeiramente h uma etapa de avaliao que tem como objetivo o teste de usabilidade e de heursticas que possibilitaro a escolha da melhor alternativa e o seu refinamento na etapa de produo.

05. Design final

23

Etapa 5. Avaliao Sub-etapas Anlise de usabilidade Teste com usurio Heursticas Lista de Requisitos a) Anlise de Usabilidade Os testes de usabilidade so um meio para medir os vrios aspectos da experincia do utilizador. Nesta etapa de avaliao, a soluo proposta foi avaliada pela equipe atravs de conhecimentos empricos e tericos obtidos. Os mtodos utilizados, de forma simplificada, foram os de walktrought e think aloud. O primeiro busca fazer um passeio cognitivo pela intereface proposta junto do segundo, que tem como meio a verbalizao daquilo que percebidos ao longo do percurso. b) Teste com Usurio Foi testada a intuitividade dos cones de funo do site (texto, vdeo, podcast, infogrfico, loja e funo gostei) e por escalas, conceitos que foram buscados durante a fase de idealizao, sendo estes: organizao, dinamismo, confivel, construtivo, atual, intuitivo e confortvel, e outros conceitos propostos pelo AttrakDiff, que mede a atratividade de um produto interativo, com os seguintes conceitos: profissionalismo, inovao, cativante e bonito. A pesquisa foi realiza com o prottipo do site, e com 5 usurios. Questo 1 A que funes voc associa esses botes?

a) texto; Textos do filsofo; Livros publicados; leitura; Pesquisa sobre livros b) vdeo; Vdeos; Videos; filme; Filme c) links relacionados; Correntes de pensamento; no sei; informoes; Discusso (?) d) compra; Sacola de compras (?); compras; guarda volumes; Loja e) gostar; Dar like na pgina (?); estou com sorte; permitido; Compartilhamento

24

Questo 2 Sobre um site como um todo

25

Graficamente

O resultado das escalas apontou que o site correspondeu aos conceitos propostos, porm os cones das funes no estavam claros. Para reforar a significao, a funo do boto aparecer escrita quando o mouse estiver sobre ele. O espao para sugestes apontou questes de inconsistncia entre as pginas sobre e loja do restante do site, e dificuldade de compreenso do boto leia mais. c) Heursticas As heursticas so parmetros definidos por pesquisadores de usabilidade que propem diretrizes gerais para a criao de websites ou para anlise e validao de projetos j existentes. Para a avaliao do prottipo e da soluo proposta, foram utilizados os modelos de Borges at al (1998), Fleming (1998), Vora e Helander (1997), Cato (2001) e Krueger (2008). A anlise contendo os diversos autores busca trazer diversos pontos de vista, a fim de proporcionar um diagnstico completo. O Satisfatrio O Falho O No se aplica

Borges et al (1998) O Evita adicionar comentrios explanatrios a links textuais: os links buscam ao mximo ser auto-explicativos sem necessitarem de mais informaes; O Mantm consistncia na utilizao de cones: os cones repetem-se em todas as pginas, sem alterao; O Cores possibilitam visualizao em p&b: como grande parte do site foi produzido em escalas de cinza, sua visualizao em p&b no prejudicada; O Informao textual minimizada: antes de se entrar no texto completo, o usurio v um resumo para saber se aquele contedo relevante e assim minimiza-se a informao textual; O Cabealhos ocupam at 25% de uma pgina;

26

O Cabealhos e rodaps so claramente separados do restante da pgina; O Pginas so curtas (no necessitar de rolagem): o layout foi pensado de forma a ter menos rolagem possvel; O Nomes dos links so concisos e indicam contedo para o qual remetem O Evita excesso de linkagem; O Disponibiliza pgina de ndice com links organizados alfabeticamente: ndices organizados por cada categoria; O Links para home e ndice em todas as pginas: link para home no cabealho e ndice em cada pgina de categoria. Fleming (1998) O Utiliza rtulos claros O Proporciona feedback O econmico em termos de aes e tempo: poucas aes so necessrias para chegar a um objetivo e h economia de tempo; O O sistema de navegao fcil de aprender: o sistema intuitivo e simples; O O sistem de navegao mantm-se constante: as interaes seguem um padro ao longo do site, porm as pginas de loja e sobre possuem divergncias; O Aparece em contexto (local e global) O Oferece ferramentas de auxlio navegao alm de acesso por links: sistema de buscas com filtro avanado auxilia a encontrar contedos; O Fornece suporte s metas e comportamentos dos usurios O apropriado ao propsito do site Vora & Helander (1997) O Nomes dos links refletem claramente seu contedo O Proporciona orientao global (relao entre n visitado e os demais) O Proporciona orientao local (localizao especfica do usurio) O Apresenta visualizao geral da estrutura (mapa, ndice) O Estrutura de acordo com as expectativas dos usurios Cato (2001) O Design grfico simples e intuitivo O Mantm consistncia na apresentao das informaes e navegao: o site O O O O O O O O O O O Utiliza textos reduzidos para facilitar a leitura na tela e entendimento Uso sutil de cor (a no ser que seja para deliberadamente chamar a ateno) Significado claro dos rtulos funcionando como sinalizao Distrai o usurio com advertncia Repete as advertncias Diferencia claramente as reas e grupos de informao Todos os elementos da tela so teis H repetio de informao Aes so posicionadas de maneira lgica na tela seguindo ordem de realizao Botes de ao posicionados prximos aos items relacionados Informaes diretamente relacionadas aparecem na mesma tela: esta

27

funcionalidade buscou ser apresentada atravs dos links nas pginas que guiam para contedos semelhantes; O Relaes entre informaes (estrutura do sistema) so claras O O usurio sempre sabe onde se encontra e como prosseguir O Quantidade reduzida de aes e interao mais simples possvel O Providencia informaes que o usurio necessita O Ajuda a responder as provveis questes dos usurios O Ajuda a providenciar mais informaes do que est disponvel na interface O Apresenta mais conceitos/grupos de informao do que a memria humana consegue reter (7): a estrutura apresenta 5 itens de navegao horizontal e, no mximo, 4 de navegao vertical; O Utiliza terminologia do usurio evitando termos tcnicos e jarges: tentou-se ao mximo usar linguagem comum do pblico-alvo.

d) Lista de Requisitos Aps a identificao dos problemas atravs da avaliao do site pelo grupo, anlise segundo heursticas e teste com o usurio; foi feita uma lista nica de itens a serem melhorados para o design final. Orientaes para modificao Aproximar leiaute de sobre e loja do restante do site; Excluir funo like do site; Utilizar funo do like do facebook somente; Deixar mais clara a funo leia mais; Proporcionar orientao global; Apresentar estrutura geral do site.

Etapa 6. Produo Este estgio de design visa materializar todos os conceitos, testes e alternativas geradas ao longo do processo. As estratgias de design e de comunicao devem ser revistas e o briefing deve ser retomado para garantir que a soluo encontrada esteja de acordo com os objetivos e seja capaz de dar uma resposta final ao problema inicial. Dessa forma, na produo final, foram geradas 10 telas de interface para exemplificar o projeto e dar diretrizes para as demais pginas e um modelo em html foi desenvolvido.

28

Prottipo
Home

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

Friedrich Wilhelm Nietzsche nasceu numa famlia luterana em 15 de outubro de 1844, filho de Karl Ludwig, seus dois avs eram pastores protestantes; o prprio Nietzsche pensou em seguir a carreira de pastor. Entretanto, Nietzsche rejeita a "f" (religio/crena

Plato

Existncia evasiva
Como muitas noes filosoficamente interessante, a existncia mesm ... mesmo tempo faar e bastante Como um filsofo famoso uma vez disse: "O mais seguro caracterizao geral da tradio filosfica europia que Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the

Em ordem para que possamos alcanar os nossos sonhos, devemos ter uma viso de nossos objetivos.

Anos aps best-seller de fico de Dan Brown, "O Cdigo Da Vinci", animado a imaginao de leitores em todos os

A web est se tornando a escrita para uma conversa. Vinte anos atrs, os escritores e leitores escreveu ler. A

Artigos

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

Filosfos

Assuntos

Artigos

NDICE A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Ayn Rand Adler, Mortimer Adorno, Theodor Agamben, Giorgio Achad Ha-am Agostinho Alberto Magno Alvin Plantinga Anaxgoras de Clazmenas Anaximandro de Mileto Anaxmenes de Mileto G.E.M. Anscombe Anselmo, Sto. Hannah Arendt Aristarco de Samos Aristteles Arquimedes Arquitas de Tarento John Austin Ayer, A. J.

RECENTES

POPULARES

Existncia evasiva
Como muitas noes filosoficamente interessante, a existncia ao mesmo tempo faar e bastante evasivo. Embora no tenhamos mais ... problemas Como um filsofo famoso uma vez disse: "O mais seguro caracterizao geral da tradio filosfica europia que ela consiste de uma srie de notas

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

Em ordem para que possamos alcanar os nossos sonhos, devemos ter uma viso de nossos objetivos. Escrever nossos sonhos e criar uma lista

Anos aps best-seller de fico de Dan Brown, "O Cdigo Da Vinci", animado a imaginao de leitores

A web est se tornando a escrita para uma conversa. Vinte anos atrs, os escritores e leitores

A coisa mais indispensvel a um homem reconhecer o uso que deve fazer do seu prprio conhecimento."

Filosofo

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

Filosfos

Assuntos

Artigos

NIETZSCHE
Friedrich Wilhelm Nietzsche nasceu numa famlia luterana em 15 de outubro de 1844, filho de Karl Ludwig, seus dois avs eram pastores protestantes; o prprio Nietzsche pensou em seguir a carreira de pastor. Entretanto, Nietzsche rejeita a "f" (religio/crena religiosa) durante sua adolescncia, e os seus estudos de filosofia afastam-no da carreira teolgica. Iniciou seus estudos no semestre de Inverno de 1864-1865 na Universidade de Bonn em Filologia clssica e Teologia evanglica. Em Bonn, participou da Burschenschaft Frankonia, a qual acabou abandoFilsofo Alemo 1844 1900

+
Sumrio 1 Vida 1.1 1.2 1.3 1.4 1.5 Jovens (1844-1869) Professor em Basileia (1869-1879) filsofo Independente (1879-1888) colapso mental e morte (1889-1900) Cidadania, nacionalidade, etnia

2 Filosofia

Indice

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

Filosfos

Assuntos

Artigos

A Ayn Rand B Adler, Mortimer C Adorno, Theodor D E Agamben, Giorgio F Achad Ha-am G Agostinho H Alberto Magno I J Alvin Plantinga K Anaxgoras de Clazmenas L Anaximandro de Mileto M N Anaxmenes de Mileto O G.E.M. Anscombe PFilsofo Alemo Anselmo, Sto. Q 1844 1900 R Hannah Arendt S Aristarco de Samos T Aristteles U Arquimedes V W Arquitas de Tarento X John Austin Y Ayer, A. J. Z

NIETZSCHE
Friedrich Wilhelm Nietzsche nasceu numa famlia luterana em 15 de outubro de 1844, filho de Karl Ludwig, seus dois avs eram pastores protestantes; o prprio Nietzsche pensou em seguir a carreira de pastor. Entretanto, Nietzsche rejeita a "f" (religio/crena religiosa) durante sua adolescncia, e os seus estudos de filosofia afastam-no da carreira teolgica. Iniciou seus estudos no semestre de Inverno de 1864-1865 na Universidade de Bonn em Filologia clssica e Teologia evanglica. Em Bonn, participou da Burschenschaft Frankonia, a qual acabou abando-

+
Sumrio 1 Vida 1.1 Jovens (1844-1869) 1,2 Professor em Basileia (1869-1879) 1,3 filsofo Independente (1879-1888) 1,4 colapso mental e morte (1889-1900) 1,5 Cidadania, nacionalidade, etnia 2 Filosofia

Texto black out

ENCICLOPDIA

N I E T Z S C MULTIMDIA HE

CURSOS&EVENTOS

SOBRE

LOJA

Friedrich Wilhelm Nietzsche nasceu numa famlia luterana em Filosfos Assuntos Artigos 15 de outubro de 1844, filho de Karl Ludwig, seus dois avs eram pastores protestantes; o prprio Nietzsche pensou em seguir a carreira de pastor. (religio/crena religiosa) durante sua adolescncia, e os seus estudos de filosofia afastam-no da carreira teolgica. Iniciou seus Friedrich Wilhelm Nietzsche nasceu numa famlia luterana em 15 estudos no semestre de Inverno de 1864-1865 na Universidade de outubro de 1844, filho de Karl Ludwig, seus dois avs eram de Bonn em Filologia clssica e Teologia evanglica. pastores protestantes; o prprio Nietzsche pensou em seguir a Em Bonn, participou da Burschenschaft Frankonia, a qualrejeita a "f" carreira de pastor. Entretanto, Nietzsche acabou abandonando em razo religiosa) durante sua adolescncia, e os seus (religio/crena de atrapalhar seus estudos. de uma estada emestudos de filosofia afastam-no da carreira teolgica. Iniciou seus Nice. Nietzsche no cessa de escrever com um ritmo crescente. Este perodo termina Inverno de 1864-1865 na Universidade estudos no semestre de brutalmente em 3 de Janeiro de 1889 com uma "crise de loucura" que, durando at a de Bonn em Filologia clssica e Teologia evanglica. Em Bonn, sua morte, coloca-o sob a da Burschenschaft e sua irm. a qual acabou abandoparticipou tutela da sua me Frankonia, Filsofo Alemo No incio desta loucura, Nietzsche encarna alternativamente as 1844 1900 figuras mticas de Dionsio e Cristo, expressa em bizarras cartas, Sumrio afundando depois em um silncio quase completo at a sua 1 Vida morte. Uma lenda dizia que contraiu sfilis. Estudos recentes se 1.1 Jovens (1844-1869) inclinam antes para um cancro no crebro, que eventualmente 1,2 Professor em Basileia (1869-1879) pode ter origem sifiltica. 1,3 filsofo Independente (1879-1888) Aps sua morte, 1,4 colapsoElisabetheFrster-Nietzsche e Peter sua irm, mental morte (1889-1900) Gast, dileto amigo1,5 Cidadania, nacionalidade, etnia Nietzsche, do filsofo, segundo um plano de 2 Filosofia

NIETZSCHE

Entretanto,

Nietzsche

rejeita

"f"

Sumrio

X
1 Vida 1.1 Jovens ENCICLOPDIA (1844-1869) MULTIMDIA CURSOS&EVENTOS SOBRE LOJA Friedrich Wilhelm Nietzsche nasceu 1,2 Professor em Basileia (1869-1879)numa famlia luterana em Filosfos Assuntos Artigos 15 de outubro de 1844, filho de Karl Ludwig, seus dois avs eram 1,3 filsofo Independente (1879-1888) pastores protestantes; o prprio Nietzsche pensou em seguir a 1,4 colapso mental e morte (1889-1900) carreira de pastor. Entretanto, Nietzsche rejeita a "f" 1,5 Cidadania, nacionalidade, etnia (religio/crena religiosa) durante sua adolescncia, e os seus 2 Filosofia estudos de filosofia afastam-no da carreira teolgica. Iniciou seus 2,1 Moralidade Friedrich Wilhelm Nietzsche nasceu numa famlia luterana em 15 estudos no semestre de Inverno de 1864-1865 na Universidade 2,2 Morte de Deus, o niilismo, de outubro de 1844, filho de Karl Ludwig, seus dois avs eram de Bonn em Filologia clssica e Teologia evanglica. o perspectivismo pastores protestantes; o prprio Nietzsche pensou em seguir a 2,3 Vontade de poder Em Bonn, participou da Burschenschaft Frankonia, a qualrejeita a "f" carreira de pastor. Entretanto, Nietzsche 2,4 bermensch acabou abandonando em razo religiosa) durante sua adolescncia, e os seus (religio/crena de atrapalhar seus estudos. de 2,5 eterno retorno Nice. Nietzsche no cessa de escrever com um uma estada emestudos de filosofia afastam-no da carreira teolgica. Iniciou seus 3 Leitura crescente. Este perodo termina brutalmente em 3 de ritmo e influncia estudos no semestre de Inverno de 1864-1865 na Universidade 4 Recepo 1889 com uma "crise de loucura" que, durando at a Janeiro de de Bonn em Filologia clssica e Teologia evanglica. Em Bonn, 5 Obras sua morte, coloca-o sob a da Burschenschaft e sua irm. a qual acabou abandoparticipou tutela da sua me Frankonia, 6 Referncias Filsofo Alemo No incio desta loucura, Nietzsche encarna alternativamente as 6,1 Notas de Rodap 1844 1900 figuras mticas de Dionsio e Cristo, expressa em bizarras cartas, 6,2 Bibliografia Sumrio afundando depois em um silncio quase completo at a sua 7 Ligaes externas Vida 1 morte. Uma lenda dizia que contraiu sfilis. Estudos recentes se 1.1 Jovens (1844-1869) inclinam antes para um cancro no crebro, que eventualmente 1,2 Professor em Basileia (1869-1879) pode ter origem sifiltica. 1,3 filsofo Independente (1879-1888) Aps sua morte, 1,4 colapsoElisabetheFrster-Nietzsche e Peter sua irm, mental morte (1889-1900) Gast, dileto amigo1,5 Cidadania, nacionalidade, etnia Nietzsche, do filsofo, segundo um plano de 2 Filosofia

NIETZSCHE

NIETZSCHE

Multimdia

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

Infogrfico
NDICE

Podcasts

Vdeos

Diagrama do conhecimento ocidental RECENTES POPULARES

Infogrfico animado sobre o conto da caverna em que Plato percebe que o executado geral da humanidade pode pensar e falar, etc, sem (tanto

Entrevista com Robert Greene sobre as 48 Leis do Poder um livro de 1998 por Robert Greene. Robert Greene toma elementos de alguns dos

Podcast #5 Por que voc quer saber o significado da vida?

Vdeo O homem que vendeu a sua alma.

Podcast #4 Um pouco de conhecimento pode ir um longo caminho

Podcast #3 Liberdade de expresso?

Busca

Niilismo
ENCICLOPDIA MULTIMDIA CURSOS&EVENTOS SOBRE LOJA

Niilismo

FILTROS
TUDO FILSOFOS ASSUNTOS ARTIGOS INFOGRFICOS VDEOS PODCASTS LOJA RECENTES POPULARES

RESULTADOS DE BUSCA
Niilismo O niilismo pode ser considerado como "um movimento positivo quando pela crtica e pelo desmascaramento nos revela a abissal ausncia de cada ... Niilismo - Ateus O niilismo pode ser definido como a imploso da subjetividade. Alternativamente, e sendo um pouco mais claros, podemos ... Niilista o vazio e o nada se encontram Reflexes, poemas, textos e arte que refletem a filosofia e o estado de esprito niilista ... Niilismo - Graia, Cultura e Banalidades

Sobre

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when I opened the door, got on the floor and did the dinossaur and an unknown printer took a galley of type and scrambled it to make a type specimen book. Idelizacao Anderson Okasaki Juliana Coelho Mariana Pavao Colaboradores Fulano de tal Fulano de tal Fulano de tal

Loja

ENCICLOPDIA

MULTIMDIA

CURSOS&EVENTOS

SOBRE

LOJA

LOJA
APOSTILAS E-BOOKS CAMISETAS FILMES QUADROS LIVROS REVISTAS OUTROS

R$19,90
RECENTES POPULARES MENOR PREO
Beatles e a Filosofia William Irwin

R$23,00

O Mundo de Sofia: Romance da Histria da Filosofia, Jostein Gaarder

R$38,90
DVD Caf Filosfico: Encontro com o Outro26 Joel Rufino

R$21,80
DVD Humanidades Filosofia Os Caminhos da Filosofia Renato Janine Ribeiro

R$24,30

R$12,90

06. Concluso
O projeto desenvolvido trouxe prtica uma srie de conceitos e ideias que antes eram abstratas e apresentavam-se apenas na teoria. O principal ponto de aprendizagem foi o fator de criao de um processo e gerenciamento de etapas de fases de design, monstrando que a atividade do design no deve ser apenas de cunho criativo, mas tambm analtica e estratgica. A fase de definio e pesquisa foram de suma importncia para entregar equipe um briefing adequado e um escopo de projeto que possibilita-se a busca por solues coerentes atravs de um gerenciamento adequado. Os dados encontrados na pesquisa ajudaram a identificar o perfil do usurio e, assim, qual seu perfil de navegao para que fosse mais fcil produzir algo adequado ao pblico proposto. Idealizar as solues mostrou-se uma etapa complexa e necessria de muitas ideias, concatenaes, excluses, incluses e diversos outros. Percebeu-se nessa fase a importncia de se ter um referencial visual amplo que auxilie a encontrar solues similares e adapt-las ao nosso contexto. O prottipo da soluo gerada auxilia a visualizar o produto o mais perto do real possvel e ajuda na hora de test-la com o usurio. Fase de extrrma importncia, a validao de usabilidade fundamental para garantir o sucesso de um projeto. atrav[es dela que falhas e acertos so identificados. Por fim, percebeu-se que produzir um website muito mais complexo do que se imagina. O design visual apenas um dos aspectos que o envolve e o processo todo deve ser tido como relevante para se chegar soluo para o problema.

29

Referncias AGNER, L. Ergodesign e arquitetura da informao: trabalhando com o usurio. Rio de Janeiro: Quartet. Editora, 2006. AMBROSE, G. HARRIS, P. Basic Design: Design Thinking. 2010. AIGA. Process of designing solutions. Disponvel em: http://designing.aiga.org/. Acesso em: 02 de novembro de 2011. BORGES at al,1998 CATO, J. User Centered Web Design. 2001 CASS, J. How to Write an effective brief. Acessado em 05/10/11. Disponvel em <http:// justcreativedesign.com/2008/09/26/how-to-write-an-effective-design-brief> CHARLOTTE, A. The importante of wireframing in Web Design. Acessado em 12/12/2011. Disponvel em http://www.onextrapixel.com/2009/07/15/the-importance-of-wireframes-in-web-

design-and-9-tools-to-create-wireframes/
FLEMING,1998

GARRET, J. Jesse. The Elements of User Experience. 2003 LYNCH, P. HORTON, S. Web Style Guide. Acessado em 02/12/11. Diponvel em http:// webstyleguide.com/wsg3/index.html KEPNER, C. H. & TREGOE, B. B. O administrador racional: uma abordagem sistemtica soluo de problema e tomada de decises. So Paulo: Editora Atlas, 1981. NIELSEN, J.; LORANGER, H. Prioritizing web usability. Berkeley: New Riders, 2006. KRUEGER, 2008 KEPNER, C. & TREGOE, B. The New Rational Manager: An Updated Edition for a New World, Kepner-Tregoe, 1997. MORAES, A. & MONTALVO, C. Ergonomia: conceitos e aplicaes. Rio de Janeiro: 2AB, 1998. PETERS, T. The Zen of Python, 2004. Acessado em 14/12/2011. Disponvel em http:// www.python.org/dev/peps/pep-0020/. PMI. Guia PMBOK Um guia do conjunto de conhecimentos em gerenciamento de projetos. Pennsylvania: Project Management Institute, 2004.

30

OGRADY, J. V.; OGRADY, K. V. A designers research manual: succeed in design by knowing your client and what they really need. Gloucester (MA): Rockport Publishers, 2006. Vora, P. & Helander, M. G. (1997). Hypertext and its implications for the internet. In M. Helander & T. K. Landauer, Eds. Handbook of HumanComputer Interaction, (2nd edn.), pp. 877914. Amsterdam: Elsevier Science B.V. WILSON, J.; CORLETT, N. Evaluation of human work. London: Taylor & Francis, 1990. ZAIRI, M. Business process management: a boundaryless approach to modern competitiveness. Business Process Management Journal, Vol. 3 No. 1, 1997. p. 64-80.

31

ANEXO 1 Cronograma de Projeto

32

ANEXO 2 Questionrio de Pesquisa com o Usurio Um site de filosofia Ol! Este questionrio faz parte de um projeto desenvolvido na matria de Projeto VI Webdesign, do curso de Design Grfico da UFPR. O objetivo do projeto desenvolver um site voltado publicao de contedos de filosofia e incentivar o maior conhecimento do assunto para o pblico estudante de graduao e ps graduao na faixa etria de 18 a 30 anos. Convidamos voc a participar da elaborao deste projeto ao responder este formulrio de forma sincera e crtica. Agradecemos desde j! Voc possui entre 18 e 30 anos e estudante de graduao ou ps graduao?
Se no, agradecemos sua dispobinilidade, porm voc no se enquadra no pblico pretendido.

Sim No

Qual sua rea de estudos? Humanas (CIncias Sociais, Histria, Filosofia) Sociais Aplicadas Exatas Artes, msica e design Biolgicas Other: Qual seu interesse por filosofia? 1 2 3 4 5 Nenhum interesse Muito interesse

Com que frequncia voc busca contedos de filosofia? 1 2 3 4 5 Nunca Sempre

Como voc obtm conhecimento sobre filosofia? Conversa com amigos, colegas e familiares Aulas de faculdade Aulas de ensino mdio Internet Livros Filmes, documentrios e outras mdias audiovisuais No possuo conhecimentos sobre filosofia Other: O que te motiva a buscar conhecimentos sobre filosofia? Para fins acadmicos Para debater conhecimento com outros

33

Para auto-conhecimento Para fins ideolgicos Nada me motiva Other:

Voc acessaria um site dedicado estudos de filosofia? 1 2 3 4 5 Nunca Com certeza

Quais seriam as motivaes para acessar ao site? Contedos diversos Credibilidade Compartilhamento com mdias sociais Espao para discusses Possibilidade de postar contedos Possibilidade de criar um perfil Site interativo Layout agradvel Possibilidade de encontrar pessoas com interesses similares Contedos postados por pessoas reconhecidas atualmente Resgate histrico de contedos Conexo de contedos Possibilidade de personalizao Bom sistema de busca Indicao de sites para o perfil do usurio Nada me motiva Other: Quais sites voc acessa com mais frequncia?
Aqueles que voc possui maior familiaridade de navegao

Facebook Orkut Twitter Globo, Terra, Uol e sites de notcia em geral Tumblr Wikipdia (e outras wikis) Blogs em geral Sites de humor 9GAG Other:

O que voc mais gosta na experincia de uso desses sites?

Aquilo que torna a navegao agradvel

O que voc menos gosta na experincia de uso desses sites?

Aquilo que te traz frustraes e ms experincias

Voc gostaria de receber os resultados da pesquisa e resultados do projeto final?

34

Deixe-nos seu email

ANEXO 3 Questionrio de Pesquisa com o Usurio Teste do prottipo IDEA Portal Filosfico A que funes voc associa esses botes?

35

Imagem Imagem Imagem Imagem Imagem

A: B: C: D: E:

Questes de escala O site como um todo 1 Amador 1 Convencional 1 Confuso 2 3 4 5 Organizado 2 3 4 5 Inovador 2 3 4 5 Profissional

1 Ftil

5 Construtivo

1 No Confivel

5 Confivel

36

1 Entediante 1 Esttico 1 Complicad o 2 2

5 Cativante

5 Dinmico

5 Intuitivo

Graficamente 1 2 Ultrapassado 1 Desconfortvel 1 2

5 Atual

5 Confortvel

Feio Ultrapassado

Bonito Atual

Quer dizer alguma coisa?

Fique vontade

37