Tcc - Web Design - Desenvolvimento de Website para Apaio à Agricultores Familiares

Desenvolvimento de WebsiteWEB DESIGN Apoio à Agricultores Familiares

para

Lucas Henrique Zeferino UFPR | Curitiba | 2015

Trabalho de Conclusão do Curso de Design Gráfi-

co, do Setor de Artes, Comunicação e Design da

Universidade Federal do Paraná.

Professora Orientadora: Stephania Padovani

Lucas Henrique ZeferinoUFPR | Curitiba | 2015

TERMO DE APROVAÇÃO

Lucas Henrique Zeferino

Desenvolvimento de Website para Apoio à Agricultores Familiares

Trabalho de Conclusão de Curso aprovado como requisito parcial para obtenção do grau de Bacharel em Design Gráfico, do Setor de Artes, Comunicação e Design da Universidade Federal do Paraná, pela banca composta pelos seguintes professores:

Orientadora:Stephania PadovaniDepartamento de Design

André BattaiolaDepartamento de Design

Kelli SmytheDepartamento de Design

Curitiba, 03 de novembro de 2015.

DEDICATÓRIA

Dedico este trabalho de conclusão de curso a

meus pais, pois foram eles que me ajudaram, in-

centivaram e acreditaram desde o começo.

"É um erro acreditar que é possível re-

solver qualquer problema importante

usando batatas."

Douglas Adams

AGRADECIMENTO

Eu agradeço à:

Minha orientadora Stephania Padovani que me

ajudou muito nos momentos de dúvida.

Minha namorada Hellen Moreira Tavares, que me

incentivou muito, além de me ajudar revisando

partes do texto.

A universidade, meus colegas e professores, pois

foram essenciais para o meu sucesso.

RESUMO

O presente trabalho visa documentar o desenvol-

vimento de um website para apoio à agricultores

familiares. O processo projetual foi focando nas

necessidades do público e no desenvolvimento

de soluções palpáveis. O material resultante é um

layout do website, pensando na interatividade e

com um projeto gráfico agradável. Com isso as

especificações foram cumpridas, atendendo os

requisitos e superando as expectativas.

ABSTRACT

This study aims to document the development of

a website to support family farmers. The design

process was focusing on the needs of the public

and developing tangible solutions. The resulting

material is a website layout , thinking about the

interactivity and with a nice graphic design. With

that the specifications have been met , given the

requirements and exceeding expectations.

Índice 1-Introdução ��13

2-Referencial Teórico ��152.1 - Agricultura Familiar ....................................................................................152.2 - Jovem Agricultor ......................................................................................... 172.3 - Produtos Orgânicos na Agricultura Familiar .............................192.4 - O uso do Computador e da Internet no Meio Rural ...............212.5 - Internet e Web Design .............................................................................212.6 Usabilidade .......................................................................................................242.7 Design Visual ....................................................................................................262.8 - Flat Design .....................................................................................................302.9 - Acessibilidade ...............................................................................................31

3-Processo de Design �� 333.1 - Representação Gráfica .............................................................................34Processo de Design ............................................................................................34

4-Análise de similares �� 374.1-Caracterização dos websites ..................................................................384.2-Avaliação dos websites ............................................................................. 534.3-Síntese dos Resultados .............................................................................584.4-Pontos Relevantes ....................................................................................... 60

5-Pesquisa com Público Alvo �� 615.1-Aplicação ............................................................................................................615.2-Persona ...............................................................................................................64

6-Diretrizes de Desenvolvimento ��65

7-Arquitetura da Informação �� 697.1-Rascunho da AI ................................................................................................727.2-Tree Testing .......................................................................................................747.3-Representação Gráfica da AI ................................................................. 807.4-Detalhamento da Arquitetura da Informação ............................82

8-Wireframe ��858.1-Refinamento do Wireframe ...................................................................888.2-Grid .................................................................................................................... 100

9-Interface ��1019.1-Nomenclatura .................................................................................................1019.2-Logotipo ...........................................................................................................1029.3-Pictogramas ..................................................................................................1049.4-Estudo de Cor ...............................................................................................1059.5-Tipografia .........................................................................................................1069.6-Layout Visual ................................................................................................107

10-Conclusão �� 113

11-Bibliografia �� 11511.1-Anexos................................................................................................................. 119

TCC - WEBSITE

UFPR14

AGRICULTURA FAMILIAR

LUCAS HENRIQUE ZEFERINO 15

1-IntroduçãoNasci e cresci no interior do estado do paraná, filho de pai agrônomo,

tive mais oportunidades que meu amigos de infância, até por isso

pude ingressar na Universidade Federal do Paraná, contudo mesmo

assim vi a realidade do agricultor e diante deste projeto tive a oportu-

nidade de abordar esse público, os agricultores familiares.

O agricultor familiar foi escolhido pois o cenário agroeconômico brasi-

leiro é dividido em dois polos opostos. De um lado existe o agronegó-

cio, composto dos grandes agricultores, com alto nível de concessão

de crédito e grande influência parlamentar. E o outro lado é a agri-

cultura familiar, composto de médios e pequenos agricultores, com

dificuldades de acesso à informação e pouco auxílio na obtenção de

crédito. Vemos, segundo o Censo agropecuário 2005/2006, no qua-

dro comparativo, o quanto essa relação é desigual, onde a agricultura

familiar tem mais produtores, produz mais alimentos e tem menos

espaço e dinheiro disponível.

Mão de Obra.

Produção de alimentos.

Uso te terras cultivadas.

Crédito rural disponível.

Agronegócio 26% 30% 70% 86%

Agricultura Familiar 74% 70% 30% 14%

(IBGE, 2006)

Além das estatísticas apresentadas no quadro acima, pode-se consi-

derar um panorama, que no qual, o agricultor não tem tanto acesso

à cultura e à educação que se encontra nos grandes centros urbanos

e além disto ele presencia em seu cotidiano as variações de clima e

diversos cuidados para cada tipo de cultura. Com tudo isso o agricul-

tor familiar é colocado em um contexto bem desfavorável, para o seu

desenvolvimento.

Quadro: Comparativo

TCC - WEBSITE

UFPR16

Portanto, objetivo deste TCC é desenvolver,

a partir dos conhecimentos de design, um

website com as funções necessárias para

esse pequeno agricultor.

Os objetivos específicos são: conhecer o

público alvo e o eleger como agente cru-

cial no desenvolvimento do projeto, bus-

car os problemas reais e propor soluções

palpáveis e desenvolver um layout visual

pensando na interatividade e definições

proporcionados pelo discorrer do projeto.

Pensando na participação do usuário, foi

empregado "Caracterização Dos Níveis"

de Garrett (2000) com o intuito de clas-

sificar e estruturar o processo de design.

Para cada nível de projeto proposto pelo

autor, foram levantados práticas de design

correspondentes, de acordo com a neces-

sidade do projeto.

O processo de desenvolvimento, começou

com uma análise de similares, seguindo as

recomendações de Padovani; Spinillo; Go-

mes (2009) com o objetivo de encontrar

pontos positivos e negativos dos concor-

rentes do futuro website.

Contudo a análise evidenciou o panorama

pouco desenvolvido dos websites voltados

a agricultura, onde existem portais com

poucos diferenciais e carentes de propos-

tas mais inovadoras.

Entretanto, alguns websites se destaca-

ram, como o "agweb.com" e o "agriculture.

com", com uma estrutura bem construída,

auxílio em forma de áudio e vídeo e fórum

para agricultores.

Em seguida, foi realizado uma pesquisa

com público-alvo, a fim de conhecer as

necessidades dos agricultores e foi en-

contrado uma série de problemas. Com

essas informações coletadas e análisadas,

listou-se as possíveis soluções para os pro-

blemas encontrados.

Fundamentado no resultados das pes-

quisas, foi desenvolvido um rascunho da

arquitetura da informação, que poste-

riormente, foi testada via Tree Testing. Os

resultados deste teste foram positivos e

exigiram poucas mudanças, permitindo o

desenvolvimento do wireframes, que são a

base visual do website.

Com o estudo detalhado destes wirefra-

mes, foi possível desenvolver a interface

do projeto, composta de pictogramas,

cores, tipografias, logotipo e layout final,

desta forma foi proposto como ficaria o

projeto para uma futura implementação.



2-Referencial Teórico

2�1 - Agricultura FamiliarTodos os seres vivos necessitam de alimento, das mais variadas for-

mas, e os seres humanos não fogem a essa regra, que segundo Car-

valho (2014) usam os alimentos como combustível para gerar energia

e movimento de nosso corpo. Tendo em vista esse fato, por toda a

história da humanidade a alimentação foi crucial para nossa sobrevi-

vência e evolução (PINRO, 2015). No início do século XXI, metade da

população mundial viveu na pobreza, sofrendo com muitas doenças,

recorrentes pelas falta de alimento (MAZOYER; ROUDANT, 2010). Isso

evidencia o quão importante é o papel da agricultura para toda a so-

ciedade, segundo a Fao (2014) a agricultura familiar é responsável por

80% da produção mundial de alimentos e no Brasil ela está presente

em 70% em produção segundo, IBGE (2006). Realmente a agricultura

familiar é um agente que está introduzido na equação de produção

de alimentos e que realmente influência a conta final.

Para a agricultura familiar encontram algumas definições:

“[...]agricultura familiar constituída por pequenos e médios pro-

dutores[...] Em geral, são agricultores com baixo nível de escola-

ridade e diversificam os produtos cultivados para diluir custos,

aumentar a renda e aproveitar as oportunidades de oferta am-

biental e disponibilidade de mão de obra.” (PORTUGAL, 2004)

No censo agropecuário americano de 2012 define-se a agricultura

familiar como: "Qualquer fazenda onde a maioria do negócio é de

propriedade do operador e as pessoas relacionadas com o operador,

incluindo familiares que não vivem no domicílio do operador" (USDA,

2012).

TCC - WEBSITE

UFPR18

Para Fao (2014), agricultura familiar é "[...]

fazendas que se baseiam principalmente

em membros da família para o trabalho e

gestão[...]".

Por histórico, a necessidade de gerar

renda no início da juventude e a distância

dos centros urbanos esse tipo de agricul-

tor tende a ter um nível de escolaridade

menor, como diz Portugal (2004). E mes-

mo assim, a sua profissão exige um teor

de conhecimento alto, que por sua vez era

passado para cada pessoa por um agricul-

tor mais experiente, embora seja valoroso

esse tipo de aprendizado deixa pouco

espaço para inovação.

Contudo, existe uma evolução ainda re-

cente das politicas públicas, que a partir

da década de 90, foi observada com o

reconhecimento e criação de entidades

para o apoio a agricultura familiar. Entre

algumas destas entidades, nasceu o PRO-

NAF que é o Programa Nacional de Forta-

lecimento da Agricultura Familiar criada

em 1995 e a Secretaria da Agricultura

Familiar criada em 2003. Como resultado

desta evolução em 2006 promulgou-se a

Lei da Agricultura Familiar reconhecendo

mesmo como profissão, a partir dai abrin-

do espaço para a união destes produtores

e o nascimento de cooperativas.

Embora o investimento ainda seja recente

o Brasil é considerado uma potência agrí-

cola familiar e dentre os estados brasilei-

ros um que se destaca é o Paraná:

“Das 374 mil propriedades rurais no

estado, 320 mil pertencem a agri-

cultores familiares, o que representa

quase 90% dos trabalhadores em

regime de agricultura familiar. O

Paraná tem uma expectativa de safra

de 30 milhões de toneladas de grãos,

e mais de 50% do valor bruto da

produção vem da agricultura familiar.

Temos um terço das terras agricultá-

veis, e a maioria abaixo de 50 hecta-

res, o que mostra a potencialidade

do estado. Além disso, o Paraná é o

segundo estado produtor de etanol,

com 1,9 bilhões de litros por ano. Na

soja, com doze milhões de tonela-

das, o Paraná também é o segundo,

depois do Mato Grosso. A agricultura

familiar responde por mais de um

terço dessa produção”. (BIANCHINI,

2008)

Entretanto, mesmo com parâmetros

internos expressivos, vemos que o Brasil

demonstra inferioridade em relação ao

resto do mundo, percebe-se nos dados do

infográfico produzido Fao (2014):

China 35%

Índia 24%

Resto da asia 15%

África subsariana 9%

Europa e Asia central 7%

América Latina e Caribe 4%

Oriente Médio e Africa do Norte 3%

Resto do mundo 3%

Quadro: Comparativo



O Brasil ainda faz parte de uma parcela pequena mundial, como

Guanziroli et al. (2001) expõe como a agricultura familiar teve um pa-

pel fundamental na estruturação econômica e social de países desen-

volvidos com Estados Unidos e Japão. Em um país que em 1778, tinha

um total de 214 bilhões de dólares de PIB, com o início de grandes

reformas econômicas hoje tem uma taxa de 8,3 trilhões de dólares

(KUSHNIRS, 2013), com um crescimento deste PIB de 10% ao ano. A

china que detêm o maior índice de agricultores familiares, e isso não é

por acaso, como evidencia:

"Em comparação com as fazendas do passado, novas explora-

ções familiares são maiores em escala, mais produtivo, ter renda

relacionados com o cultivo mais estável, e mais importante, eles

são executados por casais de agricultores melhor educadas ou

especializados que são força de trabalho principal, bem como

gestores de sua própria fazenda. Eles são empreendedores, por

isso são mais aberta e poderia adotar novas tecnologias mais

rapidamente do que outros agricultores." (CHUNLAI, 2013)

Isso mostra quanto, ainda, o Brasil pode crescer e se desenvolver

no âmbito da agricultura familiar, Sparovek et al. (2013) que em seu

estudo "Análise Territorial e Políticas Para o Desenvolvimento Agrário"

apresenta uma tendência onde o crescimento da agricultura familiar

continuará pelos próximos 10 anos, baseando-se em quatro fatores,

como dinâmica municipal da agricultura, o desenvolvimento econô-

mico da população, a aptidão agrícola e o interesse ambiental. Contu-

do, esse crescimento também está relacionado a uma nova geração

de agricultores, que assume esse desafio, mas agora mais preparados

e informados.

2�2 - Jovem AgricultorUma tendência para o jovem rural, é o chamado Êxodo Rural, que por

definição de Francisco (2011) temos:

"Êxodo rural é o deslocamento ou migração de trabalhadores

rurais que vão em direção aos centros urbanos. No Brasil, esse fe-

nômeno populacional foi causado pelo crescimento da indústria

e vida urbana, pois o processo de mecanização do campo tirou

TCC - WEBSITE

UFPR20

vários postos de trabalho." (FRANCIS-

CO, 2011)

Esse êxodo começou no Brasil a partir de

1950 de onde veio em uma tendência de

crescimento que vemos retratados nos da-

dos do Censo Demográfico do IBGE (2010).

Veja o gráfico abaixo:

Segundo Castro (2013) essa saída em

massa de pessoas (especialmente jovens)

do campo foi ruim para o país e também

ruim para as próprias pessoas, pois neste

período, aumentaram as favelas em quase

todas as grandes cidades brasileiras. E o

autor complementa com:

"Para a agricultura familiar (e tam-

bém para o País), seria melhor que

pudesse continuar a fazer o seu

trabalho nas suas comunidades e

que existissem condições para que

seus filhos pudessem casar, constituir

famílias e se manter com dignidade

no campo. " (CASTRO, 2013)

Entretanto, esse quadro esta começando

a mudar, pois segundo o mesmo Censo

Demográfico do IBGE, vemos que o nú-

mero de pessoas na área rural ainda está

caindo mas em um ritmo menor, onde

de 1990 à 1999 um total de 4 milhões de

pessoas foram para as cidades enquanto

entre 2000 à 2010 foram 2 milhões.

Castro (2013), cita vários motivos impor-

tantes para jovens agricultores ficarem

no campo como: Segurança da vida no

campo; Falta de atratividade do trabalho

na cidade; Disponibilidade, no campo, das

condições que precisa para viver; Facili-

dade para formar uma família; Disponi-

bilidade, no campo, de alimentos e casa

barata. Contudo o autor também cita

alguns motivos de deixar o campo: Maior

chance de qualificação profissional fora do

campo; Dificuldades da vida no campo, de

modo geral; Falta de serviços de internet,

transporte e lazer de qualidade no campo;

Rigor (dureza) do trabalho no campo. Mes-

Gráfico retirado de (CASTRO, 2013)



mo depois de ponderam nas vantagens e desvantagem de perma-

necer no campo, a maioria dos entrevistados, ainda, tem o desejo de

ficar no campo, Castro (2013).

Com a perceptiva de manter esse ritmo o Brasil tende a estabilizar

a questão do êxodo rural e com incentivos a educação e ao acesso

a informação, esses jovens agricultores já tem uma predisposição a

crescerem e implementarem a inovação do campo.

Para que assim a agricultura familiar deixe de ter um aspecto nega-

tivo, e se tornem um polo de tecnologia, informação e qualidade de

vida para esse que são segundo Barbara Ekwall, a Oficial de Ligação

Sênior da Organização de Alimentação e Agricultura das Nações Uni-

das, "eles são o nosso futuro" (EKWALL, 2015).

Uma alternativa que os jovens agricultores tem praticado é a produ-

ção de orgânicos, que por mais que exija mais cuidados, ela se torna

mais rentável. Mas isso vou explorar mais no próximo tópico.

2�3 - Produtos Orgânicos na Agricultura Familiar Segundo a cientista, química e palestrante Conceição Trucom a defi-

nição de produtos orgânicos é:

"Produto orgânico é um alimento sadio, limpo, cultivado sem

agrotóxicos e sem fertilizantes químicos. Eles provêm de siste-

mas agrícolas baseados em processos naturais, que não agridem

a natureza e mantêm a vida do solo intacta." (TRUCOM, 2011)

Para Campanhola e Valarini (2001) esse ramo é um conceito bem

abrangente de agricultura alternativa, que tem alguns concorrentes

como: agricultura natural, agricultura biodinâmica, agricultura bioló-

gica, agricultura ecológica e permacultura. Mas em geral todas essas

culturas tem características semelhantes.

Mas essas formas de cultura se tornaram uma importante alternati-

vas para agricultura familiar, pois diante das culturas traducionais, o

TCC - WEBSITE

UFPR22

agricultor enfrenta grandes corporações

com produções focadas na produção em

massa que barateia o preço final (mas por

vezes diminui a qualidade), mas na pro-

dução de orgânicos existem necessidades

que não podem ser supridas pelos gran-

des produtores.

O preço de venda e o aumento da de-

manda deste produtos, atrai o pequeno

produtor para essa alternativa:

"A agricultura orgânica tem-se desta-

cado como uma das alternativas de

renda para os pequenos agricultores,

devido à crescente demanda mun-

dial por alimentos mais saudáveis.

Entretanto, deve-se ponderar sobre

os diferentes fatores que podem con-

tribuir para o sucesso dos pequenos

agricultores nessa atividade" (CAM-

PANHOLA; VALARINI, 2001)

Apesar de suas vantagens Campanhola

e Valarini (2001) também listam algumas

dificuldades para se desenvolver como

agricultor de produtos orgânicos como:

Produção em pequena escala, instabilida-

de decorrente da baixa capacitação ge-

rencial, escassez de pesquisa científica em

agricultura orgânica, falta de assistência

técnica da rede pública, maior demanda

de mão de obra, dificuldades financeiras

encontradas durante o processo de con-

versão, dificuldades de acesso ao crédito

bancário, custos de certificação (garantia

do selo orgânico) e de acompanhamento

das exigências da certificação e dificul-

dade de processamento dos produtos

agropecuários,

Apesar das dificuldades, no Brasil essa cul-

tura tem uma taxa de crescimento muito

alta em um total de 50% ao ano sendo

superior aos Estados Unidos com 30% e

a União Europeia com 20%. De nossos

estados os maiores produtores: Paraná

com 4.122 propriedades, Rio Grande do

Sul 4.500, Maranhão, 2.120, Santa Catarina,

2.000 e São Paulo com 1.000 segundo

Fleury e Lima (2005)

O crescimento da agricultura orgâni-

ca reflete na economia, como mostra o

documento de Plano Agrícola e Pecuário

2013/2014, do Ministério da Agricultura,

Pecuária e Abastecimento e Secretaria de

Política Agrícola estima-se que no Brasil a

comercialização anual de produtos orgâni-

cos é de cerca de R$ 500 milhões, ou seja,

é um grande mercado a ser explorado

ainda mais.

Contudo, é das característica do público

que consome produtos orgânicos bus-

car mais informações de o que comem,

prezando mais pela qualidade dos alimen-

tos e uma aliada é a internet, que tem o

poder de divulgar os produtos do agricul-

tor e informar o consumidor, criando essa

conexão mais facilmente.



2�4 - O uso do Computador e da Internet no Meio RuralO computador e a internet foram marcos, e trouxeram uma revolução

no exercício de muitos empregos, além de criar novas categorias. Mes-

mo o Brasil sendo o quinto país em número de conexões de internet,

no meio rural essa tecnologia ainda é muito pouco usada, como apre-

sentou Eduardo Tude, presidente da consultoria Teleco no Congresso

Brasileiro de Telecomunicações Rurais, que apenas 2% dos domicílios

rurais possui acesso a internet (TUDE, 2010).

Entretanto, é a tendência com a renovação dos agricultores e a expan-

são do acesso a internet no Brasil, que o número de adeptos aumen-

te no meio rural. Pois, essa é uma questão se suma importância de

acordo com Gelb e Voet (2009, p. 1) diz que a adoção de TIC (Tecnolo-

gia da Informação e Comunicação) pode contribuir para aumentar a

produtividade, sendo que o alcance dos benefícios agrícolas e eco-

nômicos com o uso de TIC é bem amplo e inclui uma melhor gestão

da produção e da propriedade rural, a disseminação de importantes

informações do setor, melhoria no planejamento, monitoramento e

acompanhamento de produção integrada e o acesso aos mais recen-

tes resultados de pesquisa na área.

Ao decorrer deste capítulo, percebe-se as dificuldades do agricultor

familiar e ainda mais a sua importância, impactando diretamente

toda a sociedade. E apesar dos problemas que ocorrem, essa moda-

lidade de trabalho tende a crescer, se modernizando em vários as-

pectos, por conta da demanda de produtos mais saudáveis e o cresci-

mento do incentivo a categoria.

2�5 - Internet e Web DesignO conceito de computador começa a se desenvolver na segunda

guerra mundial onde por necessidade se refinar a interação do ho-

mem-computador para aumentar a eficácia dos ataques, com isso

os engenheiros começaram a se preocupar mais com essa questão.

(MORAES, 2002).

TCC - WEBSITE

UFPR24

No final de outubro de 1957, durante a

Guerra Fria, a União Soviética lançou com

sucesso o primeiro satélite na órbita da

Terra, chamado “Sputnik 1” o qual chocou

o mundo. Como resultado levou o Estados

Unidos a criar a ARPA (Agência de Proje-

tos de Pesquisa Avançada), para acelerar

mais ainda a corrida tecnologia da época,

e um dos seus projetos mais famosos foi a

internet. (FRANCIS, 2008)

A partir daí, a internet começou a ser usa-

da pelos militares para transmitir informa-

ções e pelas universidades acelerando e

disseminação de pesquisas acadêmicas.

Mas a internet como conhecemos hoje

nasceu com a criação do "World Wide

Web" também conhecido como o "www",

que foi desenvolvido de 1980 a 1991 e

adotado pelo CERN (Organização Euro-

peia para a Pesquisa Nuclear) que foi a

responsável pelo seu desenvolvimentismo

(SONNY, 2006).

Com seu crescente uso doméstico, a

internet começou a tomar grandes pro-

porções, surgindo assim, necessidade de

desenvolver linguagens para os diferentes

usos, como: HTML, que surgiu em 1992 e é

umas dar principais linguagens de pro-

gramação de websites até hoje, em sua

quinta versão; em 1996 com a plataforma

JAVA, com a possibilidade de miniaplicati-

vos rodando direto das páginas do websi-

te; FLASH em 1997 com a possibilidade de

execução multimídia, abrindo espaço para

a adição de animação,vídeo e interativi-

dade nas páginas; e mais atualmente em

2009, o CSS3 que revolucionou trazendo a

possibilidade de interatividade mais imer-

siva e na adaptatividade dos sites, além de

trazer inovações em relação a animações,

transições, filtros e gradientes (HYPERAKT;

VIZZUALITY, 2012).

Para essas tecnologias funcionarem, ne-

cessitava-se uma forma de acessar todos

esses dados, e, assim, nasceram os nave-

gadores, também conhecido pelos termos

em inglês web browser ou simplesmente

browser, e dentre os vários que existem os

mais famosos foram: Mosaico em 1993 o

primeiro navegador, o NetScape e o Opera

em 1995, o Internet Explorer em 1996 ,

em 2002 o Safari, 2004 o Firefox, que é

um navegador criado de forma indepen-

dente pelos próprios usuários e em 2008

o Chrome, hoje sendo o navegador mais

usado no mundo, em pesquisas feita pela

Pingdom (2013).

Junto com essa evolução, nasceu uma

especificação do design, conhecido como

web design, que, embora seja difícil de-

terminar, Jeffrey Zeldman propõem tal

definição :

“Web Design é a criação de ambien-

tes digitais que facilitam e incenti-

vam a atividade humana, reflete ou

adapta-se a vontades individuais e

conteúdos; e muda graciosamente

ao longo do tempo enquanto man-

tém a sua identidade" (ZELDMAN,

2007).

Por esta definição, um conceito de web

design é a criação de websites na pers-



pectiva do usuário. E para isso, nasce um profissional, que junto com

o programador e do redator, cria e mantém esse mundo virtual fun-

cionando: o web designer. Para Santos (2009) o papel do web desig-

ner se divide em três principais áreas:

• Criador: concepção e o desenvolvimento de páginas Web;

• Auditor: colabora no levantamento de requisitos no desenvolvi-

mento do software Web;

• Consultor: participa na avaliação e fiscalização da qualidade do

sítio Web;

Além disto, a autora apresenta as funções deste profissional de web

design, de forma que ele defini a estrutura (arquitetura da informação

de navegabilidade), o aspecto visual e a usabilidade do web site.

Atualmente, com o advento do "Web 2.0" termo este usado pela pri-

meira vez em Outubro de 2004, pela O'Reilly Media e pela MediaLive

International como nome de conferências sobre o tema, e a partir daí

tomou fama, criando um conceito de internet novo que é definido

por Oreilly (2006) como:

"Web 2.0 é a mudança para uma internet como plataforma, e

um entendimento das regras para obter sucesso nesta nova

plataforma. Entre outras, a regra mais importante é desenvolver

aplicativos que aproveitem os efeitos de rede para se tornarem

melhores quanto mais são usados pelas pessoas, aproveitando a

inteligência coletiva" (OREILLY, 2006)

Diferente da WEB 1.0, essa nova perspectiva traz um olhar mais apu-

rado para os usuários, deixando em destaque na hora de projetar um

website, Oreilly (2006) ainda destaca outras características da WEB

2.0:

"• O beta perpétuo - não trate o software como um artefato, mas

como um processo de comprometimento com seus usuários.

• Pequenas peças frouxamente unidas - abra seus dados e ser-

viços para que sejam reutilizados por outros. Reutilize dados e

serviços de outros sempre que possível.

TCC - WEBSITE

UFPR26

• Software acima do nível de um úni-

co dispositivo - não pense em aplica-

tivos que estão no cliente ou servidor,

mas desenvolva aplicativos que estão

no espaço entre eles.

• Lei da Conservação de Lucros, de

Clayton Christensen - lembre-se de

que em um ambiente de rede, APIs

abertas e protocolos padrões ven-

cem, mas isso não significa que a

ideia de vantagem competitiva vá

embora.

• Dados são o novo “Intel inside” - a

mais importante entre as futuras

fontes de fechamento e vantagem

competitiva serão os dados, seja

através do aumento do retorno sobre

dados gerados pelo usuário, sendo

dono de um nome ou através de

formatos de arquivo proprietários."

(OREILLY, 2006)

Embora tudo isso seja de certa forma ino-

vador, esta questão já é discutida desde

anos 90 e até hoje essa prática é deficien-

te. E são várias as razões para isso, como:

os custos destes estudos; a necessidade

de pessoal especializado na área; a pura e

simples falta de tempo ou a errada pre-

sunção de que web designer sabe o que é

melhor para o usuário (RIBEIRO, 2012).

Alguns web designers tem a tendência de

esquecer o usuário e acabam confiando

em sua própria experiência, mas acaba

que não necessariamente o projeto será

visto da mesma maneira pelo usuário.

Assim tomo o conselho de Tidwell (2010):

"Conheça os usuários, pois eles não são

como você!". Para que erros assim não

ocorram em relação ao desenvolvimento

de um website é essencial o conhecimen-

to em usabilidade, que tratarei mais no

próximo capitulo.

2�6 Usabilidade“...significa apenas o assegurar que algu-

ma coisa funciona bem: que uma pessoa

de média (ou mesmo abaixo da média)

habilidade e experiência pode utilizar

essa coisa (...) para o propósito desta, sem

ficar irremediavelmente frustrado”. (KRUG,

2000)

Pela definição de Steve Krug, percebe-se

a ligação inerente que usabilidade tem

com o Design Centrado no Usuário, visto

que ambos tem como parte do processo

ter o usuário no centro dos decisões. E

como diz Ribeiro (2012) um sistema que

pensa no usuário e na sua forma de intera-

gir servirá melhor as suas necessidades,

aumentando a compreensão, a eficiência

e a eficácia e diminuindo a possibilidade

de frustração. O que torna o resultado

final, segundo o autor, mais eficaz , rápido

e agradável aos usuários.

Mas além do design centrado no usuário,

existe outros tipos de práticas de design

como: Design Centrado no Sistema, De-

sign Centrado na Empresa, Design Centra-

do na Tecnologia e um que é menos re-

corrente, o Design Centrado no Conteúdo.



Independente de qual processo é usado, o web site deve ser ami-

go do usuário, como coloca Powazek (2006): "A navegação é, como

a maioria dos elementos de um site, sobre a comunicação com o

usuário. Boa navegação conta uma história, e boas histórias têm um

começo, meio e fim." E o autor propõem um exercício para averiguar

se um site tem, em geral, uma boa navegação, que consiste em estar

em uma página (que não seja a home) de um web site e tenha em

mente 3 questões:

• Onde estou? (Presente);

• Onde posso ir? (Futuro);

• Onde eu estive? (Passado).

Se essas questões forem respondidas sem olhar para o URL ou passar

o mouse sobre os links para ver onde eles vão, o site tem uma boa

navegação, mas embora mesmo com a "WEB 2.0" ainda muitos sites

falham neste teste.

Em questão de usabilidade um dos grandes nome é Jakob Nielsen,

que já foi chamado de "O Guru da Usabilidade na Web” pelo New York

Times. Para Nielsen algo essencial para a usabilidade é a qualidade

de uso, e para tal é necessário o web site ser utilizável e útil simulta-

neamente, deve providenciar as ferramentas necessárias para que o

utilizador cumpra uma determinada tarefa e o consiga fazer de forma

rápida, eficiente e intuitiva.

Nielsen (1993) define usabilidade através de cinco atributos:

1. Capacidade de aprendizagem: Olhando para um web site, quanto

mais fácil for a sua utilização, maior será a probabilidade de este ser

usado mais vezes pelo usuário.

2. Capacidade de memorização: Olhando para um web site, quanto

menos complexo for a sua interface, maior será a probabilidade de

um usuário voltar a usar ao fim de algum tempo de inatividade sem

necessidade de a reaprender como o usar.

3. Eficiência na utilização: Um web site com uma curva de aprendiza-

gem pouco acentuada será necessariamente mais rápido de utilizar, e

TCC - WEBSITE

UFPR28

o usuário irá realizar de forma eficiente as

tarefas ou ações pretendidas, sejam estas

comprar um produto ou consultar uma

informação.

4. Confiabilidade da utilização: Na web,

sites onde se observam elevadas ocorrên-

cias de erros tendem a ser rapidamente

trocados por outros que proporcionem

ao usuário a possibilidade de realizem a

tarefa com maior sucesso e rapidez.

5. Satisfação do utilizador: Uma interface

de sucesso é aquela que os utilizadores

utilizam com prazer e satisfação, embora

a satisfação seja um fator bastante subjec-

tivo.

E em um estudo de Nielsen (2006) cha-

mado "F-Shaped Pattern" demonstrou um

padrão no modo de leitura dos usuários,

onde ele 232 usuários em milhares de

páginas da web, registando o caminho

que os olhos dos participantes passavam.

Segue as conclusões:

"• Primeiro, os usuários leem em mo-

vimentos horizontais, normalmente

na parte superior da área de conte-

údos;

• Depois, movem um pouco para

baixo a página e leem através de um

segundo movimento horizontal, que

cobre menor área que o movimento

anterior;

• Por fim, os utilizadores examinam

o conteúdo da esquerda num movi-

mento vertical. " (NIELSEN, 2006)

A partir daí, o autor delimita algumas

diretrizes:

• Os usuários não leem os textos cui-

dadosamente;

• Nos primeiros dois parágrafos de-

verá estar a informação mais impor-

tante;

• Os títulos e os parágrafos devem

começar com as palavras que trans-

mitem informação realmente impor-

tante, uma vez que os utilizadores

irão notar quando examinarem para

baixo o lado esquerdo do conteúdo."

(NIELSEN, 2006)

Contudo, para que o usuário tenha uma

experiência agradável, e necessário além

de os conceitos de usabilidade implemen-

tados, um bom projeto gráfico, assunto

que irei abordar a seguir.

2�7 Design VisualPara um website funcionar perfeitamente,

um projeto gráfico eficiente é indispen-

sável, pois é ele vai criar a relação das

informações com imagens, cores, fontes e

outros elementos.

Guy (2012) em um artigo para a revista

digital UX Magazine, compara a compra

online com as compras no varejo, e evi-

dencia a falta que as pessoas sentem de

um atendente com um sorriso no rosto e

perguntando: "Posso ajudá-lo a encontrar

o que você está procurando?". E segundo

a autora, são os designs visuais que devem

criar uma experiência de navegação agra-



dável e garantir que o usuário não se perca e esteja ciente de onde

estão dentro do contexto mais amplo do site, para que assim possa

substituir a saudação do atendente.

Mas para isso existem conceitos básicos, que são importantes para

o conhecimento do web designer, e esses são divididos por Resnick

(2012) em os elementos do design:

LINHAS

Elas tem como característica unir dois pontos,

elas podem também organizar, dirigir, separar,

serem expressivas, sugerirem uma emoção, ou

criarem ritmo. Como por exemplo o website

"themorningnews.org" que utiliza linhas horizon-

tais para separar o conteúdo, forma de feedback

e dar enfase nos títulos.

FORMA

A forma se refere ou contorno externo de dese-

nho ou qualquer coisa que tem altura e largura

e alguns exemplos são as formas básicas: o

circulo, o quadrado e o triangulo, que podem

ser encontrados na maioria dos projetos de

web site. Para representar a utilização da forma

utilizo o website "webbyawards.com" que usa

diversas formas retas para delimitar conteúdo e

dar enfase em títulos.

TEXTURA

Também conhecida como padronagem, é a apa-

rência de uma superfície, ela é geralmente usada

com valor estético, mas também pode adicionar

emoção e contraste no projeto.

Como amostra de textura, existe o website

"akademiezubrowka.com" que foi criar para a

promoção do fi lme "Grande Hotel Budapeste",

nele é usado uma textura de papel, simulando

um arquivo policial.

TCC - WEBSITE

UFPR30

ESPAÇO

É a distância entre formas, mas em web

design é mais comum a referência ao "es-

paço em branco", que é uma parte do site

que é nulo de elementos visuais.

Como exemplar de espaço apresento o

website "http://exhibitions.guggenheim.

org" que trabalho com muito espaço em

branco para sua navegação.

TAMANHO

É a escala que cada objeto vai ter no

layout, ela serve para criar uma hierarquia

das informações, fazendo parte da linha

de navegação que o usuário deve seguir.

Como no website " blackestate.co.nz" que

abusa de grandes imagens e títulos para

seu layout.

PALHETA DE COR

Que são as cores bases para o web site,

quais escolher e de que forma usá-las vai

ter grande infl uencia no produto fi nal do

projeto.

Como no website "storyoftheweb.org.uk"

que usa a cor para representar cada ses-

são do site.

" Uma vez que o conceito é formal-

mente realizado, eles terão de ser

aplicados. Os princípios de design-

equilíbrio, ênfase, ritmo, unidade e

contraste -Defi na o fundamento es-

trutural de um projeto e determinar

como os vários elementos do projeto

são organizados dentro da página

web." (RESNICK, 2012)

Seguindo as defi nições da autora, temos

os princípios para design visual de websi-

te:

EQUILÍBRIO

Quando distribuímos igualmente os

elementos de design na página. E pode

ser caracterizado como de duas formas:

simétrico e assimétrico. Sendo o simétrico

quando o layout se propõem a ter os dois

lados iguais, sugerindo um movimento

Como no website " blackestate.co.nz" que

Seguindo as defi nições da autora, temos

os princípios para design visual de websi-

te:

EQUILÍBRIO

Quando distribuímos igualmente os

elementos de design na página. E pode

que é nulo de elementos visuais. projeto.



estável ou estático. O assimétrico é quando se cria o desiquilíbrio da

tela para sugerir variedade ou movimento dinâmico.

ÊNFASE

Indica qual o elemento mais importante na tela, esse elemento é cha-

mado de ponto focal, pois é ele que chama a atenção do usuário. Para

criar enfase utiliza-se os elementos do design citados anteriormente.

RITMO

Definido como um padrão criado por elementos repetidos. O ritmo é

como o website vai dirigir o olhar do usuário, sendo de suma impor-

tância para sua experiência destro da plataforma.

UNIDADE

Esse princípio é obtido quando todos os elementos do website se re-

lacionam projetando o sentimento de plenitude. Para Resnick (2012),

os usuários sempre vão procurar a unidade de uma mensagem, e sem

essa unidade eles perdem o interesse.

"[...]a concepção de unidade pode ser alcançado quando todos

os elementos dentro do design ou layout relacionam umas com

as outras. Por exemplo, uma imagem deve incidir sobre o texto

que está ao lado, caso contrário, a mensagem geral não fará sen-

tido para o espectador.

CONTRASTE

Constituído pelas diferenças visuais de tamanho, forma e cor dos ele-

mentos. Tem como objetivo melhorar a percepção diante das mensa-

gens do website. Podendo ser um ponto fundamental de acessibilida-

de.

Embasado dos fundamentos dos do design visual, posso ir além, e

no próximo tópico desenvolver quais tendencias atingi o universo do

web design e como elas ajudam o usuário na hora de realizar suas

tarefas na internet.

TCC - WEBSITE

UFPR32

2�8 - Flat Design Por volta de 2012 o web design mundial

passou por uma transição de estilos. Com

ajuda da interface Metro do Windows

8, o Flat Design veio se popularizando e

tomando conta dos maiores portais, mu-

dando o jeito que se fazia web design.

Mas antes de desenvolver o que é o Flat

Design, irei explorar um pouco de quais

estilos vieram antes dele.

A simulação de tridimensionalidade, este-

ve presente nas primeiras interfaces feitas

para o público geral. As sombras, gradien-

tes e destaques tinham com objetivo de

ajudar o usuário compreender as ações

disponíveis em um relance. Percebesse

isso na interface do Windows 95.

Entre tando como diz Meyer (2015) "[...] o

efeito pseudo3D nestes primeiros GUIs

tendem a ser agressivos, exagerado, e visu-

almente perturbador."

Com o desenvolvimento da capacidade

dos computadores e da internet, de sur-

giram dois estilos de web design o Ske-

uomorphism e o Realismo, eles podem

ser confundidos por terem uma premissa

parecida, mas o Skeuomorphism é a prá-

tica de uma interface simular a um objeto

real, com o proposito de facilitar o enten-

dimento do usuário, pois permitindo-lhes

aplicar algum conhecimento prévio sobre

a interface.

Por exemplo o aplicativo para Ipad o

iBooks, que simula uma estante para a

organização dos livros digitais.

Enquanto o realismo que também simula

itens físicos ou texturas mas por razões

estéticas. Aplicando os elementos de de-

sign, mas sem o apelo da metáfora que o

Skeuomorphism tem.

Em um documento oficial da Microsft so-

bre o que era proposto como o Windows

8, Clayton (2010) declara o Flat Design

como "autenticamente digital", frase que

para muitos designers representa perfeita-

mente esse estilo.

Imagem do botão do Windows 95



Mas com uma visão mais purista, Meyer (2015) traz outra definição:

"Flat Design é um estilo popular de projeto que é definida pela au-

sência de efeitos visuais brilhantes ou tridimensionais em elementos

gráficos de uma página web." Diferente dos estilos anteriores o Flat

Design trouxe um conceito mais "limpo" para as interfaces, embora

existam discussões em relação a sua utilidade.

Desde seu surgimento o Nielsen Norman Group, critica algumas prá-

ticas do flat design em relação a usabilidade, "Nossa objeção primária

para flat design é que ele tende a sacrificar as necessidades dos usuá-

rios em prol da estética da moda." (MAYER, 2015).

Mas muitos dos problemas com o flat design, segundo Allen (2014),

ocorreram pelo afastamento radical da skeuomorphism. E após um

período com duas frentes conflitantes, surge uma forma de mais

compatível de web design, conhecida como semi flat ou flat design

2.0, que ainda usa muitas formas planas, mas faz uso de sombras

sutis, destaques e as camadas para criar alguma profundidade na

interface do usuário.

2�9 - Acessibilidade"Acessibilidade permite que as pessoas com deficiência perceber, en-

tender, navegar, interagir e contribuir para a web." (HAUSLER, 2015)

Acessibilidade é algo se suma importância para um projeto de web

design, pois conforme o uso de interfaces digitais aumentou, maior o

leque de usuários, com as mais variadas necessidades e é a função do

designer pensar de forma global, abraçando o máximo de potencial

TCC - WEBSITE

UFPR34

que seu projeto pode chegar. Para isso, irei

delimitar algumas diretrizes para acessi-

bilidade que irai aplicar em meu projeto,

seguindo o artigo de Jesse Hausler: "7

Things Every Designer Needs to Know

about Accessibility".

COR

Atualmente 1 em 12 homens e 1 em cada

200 mulheres que são daltônicas, 1 em 30

pessoas que tem baixa visão e 1 em 188

pessoas são cegas (HAUSLER, 2015). São

números expressivos de pessoas e posso

tomar providencias para auxiliá-las em

meu projeto.

Não ter a cor como único meio de exaltar

uma informação, pois isso pode prejudicar

a navegação na interface de quem não

consegue diferenciar bem as cores.

CONTRASTE

Segundo W3C (2015) a relação de contras-

te entre o fundo e texto deve ser de no

minimo 4,5:1, em casos de textos grandes

em negrito 3:1. Para verificar esse ratio de

contraste, existe a ferramenta Color Con-

trast Checker (http://webaim.org/resour-

ces/contrastchecker).

Exemplificando esse processo podemos

definir que um texto em negrito acima de

19 px, com fundo branco pode no minimo

usar #848484:

Eu Sou Um Texto Grande�

Enquanto o para um texto normal em

forma normal é #757575:

Eu Sou Um Texto Pe-queno.

Logos ou elementos atualmente em um

estado desativado estão isentos desta

norma. Isso inclui botões inativos ou itens

de menu.

FOCO VISUAL PARA TECLADO

Para quem navega somente com o te-

clado é importante que o a forma que

é utilizada para indicar a seleção esteja

evidente.

ITENS CLICÁVEIS

Para pessoas que usam o teclado ou

software de reconhecimento de fala , eles

precisam que exista um link clicável na

tela para funcionar, por isso tudo que for

assim, deve estar visível.



3-Processo de Design

Para desenvolver o processo de design foi usado o modelo de Garrett

(2000), que divide o projeto em cinco níveis de experiência do usu-

ário. A esse modelo foi adicionado as orientações de Nielsen (1993),

que defendem o design interativo. Isto é, um processo cíclico e centra-

do no usuário.

Na etapa inicial nomeada como "Estratégia" visa conhecer e desdo-

brar as necessidades do público e definir diretrizes bases para a exe-

cução do projeto. Para isso, será realizado uma entrevista com cerca

de 11 voluntários que sejam ou que estejam envolvidos com o público.

Será feita uma análise de sites similares ao que será criado na finaliza-

ção deste projeto.

Logo após, a etapa de "Escopo" foi dedicada para o desenvolvimen-

tos de ideias e soluções. Composta de uma listagem de requisitos de

oportunidades para o sistema, feita em forma de texto descritivo, após

isso uma brainstorming baseado na listagem, para buscar e explorar

as possibilidades de soluções. Depois definir qual será as especifica-

ções gerais existirá um detalhamento de o que o site terá, para dar

suporte para as etapas vindouras.

No desenvolvimento da "Estrutura" o objetivo será buscar as informa-

ções que serão usadas dentro do website, criar uma hierarquia entre

elas e expor possíveis interações.

No "Esqueleto" o site terá sua arquitetura de informação definida e

após isso, será aplicado um tree testing (OBRIEN, 2009) para testar e

corrigir problemas de navegação do site.

Na etapa de "Superfície" será desenvolvido o layout do site envolven-

do, wireframe, grid, tipografia, cores, identidade visual e pictogramas,

deixando os teste de usabilidade e refinamento para a fase de imple-

mentação. (NIELSEN, 1993)

TCC - WEBSITE

UFPR36

ESTRATÉGIA ESCOPO ESTRUTURA ESQUELETO SUPERFÍCIE

Necessidades do usuário

Especificações Funcionais

Design de Interação

CA

RA

CT

ER

IZA

ÇÃ

O D

OS

NÍV

EIS

(G

arre

tt, 2

00

0)

Design da Interface e Design da Informação

Design Visual

ETA

PA

S D

O P

RO

CE

SS

O

DE

DE

SIG

N

Entrevistas

Análise de similares Fragmentação do conteúdo

Identificação dos requisitos/oportunida-des do sistema

Brainstorming

Detalhamento das funcio-nalidades do sistema

Definição da arquitetura da informação

Nielsen, 1995

Tree testing

Necessidades do usuário: Objetivos do site de origem externa, identificados por meio de pesquisa com o usuário, pesquisas etno/tecno/psicográ-ficas, etc.

Objetivos do site: Metas de negócio, criativas ou outras metas de origem interna para o site

Especificações Funcionais: “conjunto de funcionalida-des”: descrições detalhadas de funcionalidades que o site deve incluir para ir ao encontro das necessidades do usuário

Requisitos de Conteúdo: Definição dos elementos do conteúdo necessários ao site para ir ao encontro das necessidades do usuário

Design de Interação: desenvolvimento defluxos de aplicação para facilitar as tarefas do usuário, definindo como este interage com as funcionalidades do site

Arquitetura da Informação: Design estrutural do espaço da informação para facilitar o acesso intuitivo ao conteúdo

Design da Interface: Como na IHC tradicional: design dos elementos da interface para facilitar a interação do usuário com as funcionalida-des

Design da Informação: No sentido Tufteano: design da apresentação da informação para facilitar a compreensão.

Design da Navegação: Design dos elementos da interface para facilitar a movimentação do usuário meio a arquitetura da informação

Design Visual orien-tado à tarefa: Trata-mento gráfico dos elementos da interface (a “cara” do site)

Design Visual orien-tado à informação: Tratamento visual do texto, elementos gráficos da página e componentes de navegação

PROTOTIPAGEM

TESTE DE USABILIDADE

ANÁLISE RESULTADOS

REFINAMENTO

3�1 - Representação Gráfi caProcesso de Design



ESTRATÉGIA ESCOPO ESTRUTURA ESQUELETO SUPERFÍCIE

Necessidades do usuário

Especificações Funcionais

Design de Interação

CA

RA

CT

ER

IZA

ÇÃ

O D

OS

NÍV

EIS

(G

arre

tt, 2

00

0)

Design da Interface e Design da Informação

Design Visual

ETA

PA

S D

O P

RO

CE

SS

O

DE

DE

SIG

N

Entrevistas

Análise de similares Fragmentação do conteúdo

Identificação dos requisitos/oportunida-des do sistema

Brainstorming

Detalhamento das funcio-nalidades do sistema

Definição da arquitetura da informação

Nielsen, 1995

Tree testing

Necessidades do usuário: Objetivos do site de origem externa, identificados por meio de pesquisa com o usuário, pesquisas etno/tecno/psicográ-ficas, etc.

Objetivos do site: Metas de negócio, criativas ou outras metas de origem interna para o site

Especificações Funcionais: “conjunto de funcionalida-des”: descrições detalhadas de funcionalidades que o site deve incluir para ir ao encontro das necessidades do usuário

Requisitos de Conteúdo: Definição dos elementos do conteúdo necessários ao site para ir ao encontro das necessidades do usuário

Design de Interação: desenvolvimento defluxos de aplicação para facilitar as tarefas do usuário, definindo como este interage com as funcionalidades do site

Arquitetura da Informação: Design estrutural do espaço da informação para facilitar o acesso intuitivo ao conteúdo

Design da Interface: Como na IHC tradicional: design dos elementos da interface para facilitar a interação do usuário com as funcionalida-des

Design da Informação: No sentido Tufteano: design da apresentação da informação para facilitar a compreensão.

Design da Navegação: Design dos elementos da interface para facilitar a movimentação do usuário meio a arquitetura da informação

Design Visual orien-tado à tarefa: Trata-mento gráfico dos elementos da interface (a “cara” do site)

Design Visual orien-tado à informação: Tratamento visual do texto, elementos gráficos da página e componentes de navegação

PROTOTIPAGEM

TESTE DE USABILIDADE

ANÁLISE RESULTADOS

REFINAMENTO

3�1 - Representação Gráfi caProcesso de Design

TCC - WEBSITE

UFPR38

Nas etapas do processo de design foram

selecionadas determinadas práticas, con-

forme cada níveis e requisitos do projeto:

ANÁLISE DE SIMILARES

Analise de similares é um bom meio de

começar um projeto, pois analisando os

concorrentes é possível encontra brechas

que mercado que podem ser preenchi-

das, além disto, evidenciar erros e acertos

que podem ser evitados ou implementa-

dos.

ENTREVISTAS

Com a bagagem de o que já existe no

mercado, é necessário conhecer o públi-

co alvo do projeto, para isso o gênero de

entrevista foi escolhido, com o objetivo

é conseguir dialogar de maneira menos

formal das situações que os agricultores

passam.

IDENTIFICAÇÃO DOS REQUISITOS/OPOR-

TUNIDADES DO SISTEMA

A partir dos dados retirados na análise

de similares e entrevistas, foi necessário

identificar as necessidades do usuário que

o projeto abordou e quais seriam possíveis

soluções.

BRAINSTORMING E DETALHAMENTO

DAS FUNCIONALIDADES DO SISTEMA

O brainstorming foi o método utiliza-

do para desenvolver as funcionalidades

iniciais do projeto, criando os primeiros

conceitos a serem empregados no we-

bsite. Com o objetivo, que desenvolver

ferramentas novas, mas que suprissem as

necessidades dos usuários

FRAGMENTAÇÃO DO CONTEÚDO

Após ter as funcionalidades descritas de

forma básica, listei como o website fun-

cionaria em relação ao conteúdo aplicado

nele, ou seja, quais seriam as possíveis fon-

tes de informação. Para tornar o website

mais palpável para futura implementação.

DEFINIÇÃO DA ARQUITETURA DA INFOR-

MAÇÃO

Com a toda definição teórica do site, a ar-

quitetura da informação começa a estru-

turar como será a interatividade entre as

páginas e como será a hierarquia empre-

gada. Após isso um Tree Testing que ira

revelar possíveis erros na arquitetura da

informação. Esse tipo de teste foi escolhi-

do, pois tratar puramente da organização

e entendimento da informação.

NIELSEN, (1995)

Sendo essa a ultima etapa, usei a meto-

dologia de Nilsen para desenvolver um

layout partindo do wireframe do site.

Enquanto, o teste de usabilidade e refina-

mento serão realizados na oportunidade

de uma implementação real do projeto.



4-Análise de similares

Para esta análise foram selecionados sete sites, sendo dois nacionais

e cinco internacionais. Os critérios para escolha, em ordem de impor-

tância, foram:

» Suporte

» Proximidade como o tema.

Percebe-se na pesquisa inicial dos sites, uma falta de conteúdo na-

cional, onde sites focados diretamente no assunto não existem, e os

encontrados são geralmente uma sessão de algum portal maior. O

que abre espaço para essa oportunidade de mercado para suprir uma

necessidade que tem a tendência de crescer.

Para a identificação e avaliação foi usado o estudo escrito por Ste-

phania Padovani, Carla Galvão Spinillo e Ítalo Mata de Araújo Gomes:

Desenvolvimento e aplicação de modelo descritivo-normativo para

análise de websites (PADOVANI; SPINILLO; GOMES, 2009).

Este estudo é uma construção de um modelo completo para análise

de websites, consistindo em 2 etapas, primeiro a de caracterização

do website, que é aplicado cinco categorias: Nível 1 – estratégia, que

é a análise de objetivos e necessidades dos usuários, nível 2 – escopo,

a análise dos conteúdos e funções, nível 3 – estrutura, a análise da ar-

quitetura e da interação, nível 4a – esqueleto, a análise da navegação,

nível 4b – esqueleto, que é a análise da diagramação e nível 5 – super-

fície, a análise do design visual.

E a segunda etapa é a avaliação do website, nela é aplicado as mes-

mas 5 categorias da etapa anterior, mas agora julgando o website,

respondendo cada pergunta com, sim, não ou não se aplica.

TCC - WEBSITE

UFPR40

4�1-Caracterização dos websites

Portal Orgânico www.portalorganico.com.brPessoas físicas responsáveis.

Ultima data atualizada: 11 de maio de 2015

Nível 1 – Estratégia

O objetivo do site é ser uma fonte de infor-

mação sobre a produção, comercialização

e preparação de produtos orgânicos. Sen-

do de notícias e de informação. Tendo a

sua adaptatividade em forma de sugestão

de outros post relacionados. Com gestão

de erro presente.

Com feedback presente somente nos

menus que aparecem quando o mouse

está em cima do titulo. É possível fazer

uma busca por meio de palavras-chave, e

no rodá pé do site, selecionar um conte-

údo em uma galeria ou fi ltrar por tipo de

publicação e sua forma de apresentação.

Nível 2 – Escopo

Os principais assuntos abordados são: Pro-

1

Representação do website www.portalorganico.com.br



dução de orgânicos, nutrição, gastronomia e bem estar. E funções que

o usuário pode fazer:

Nível 3 – Estrutura

O tipo de arquitetura da informação é sequencial, o Nível de arbores-

cência é 9x3, utilizando um modelo convencional de conceito com

um portal/blog e a principal modo de diálogo é menus.

Nível 4a – Esqueleto

Para seus níveis encontra-se navegação intra página em algumas

funções e entrepaginas para a maioria dos conteúdos. Em relação as

areias clicáveis, na maioria do site é usado texto, mas existe alguns bo-

tões sem animação, banners com imagens e pictogramas no as redes

sociais.

Para o auxílio à identificação das áreas clicáveis mostra-se que na

maioria dos casos é apresentado em forma de mudança do cursor,

mas na "agenda" e nas subseções do menu principal é aplicado a

mudança de fundo e no "onde encontrar" surge uma imagem. Para

indicar a localização do usuário é usado menu breadcrumb e para

reforçar isso de uma maneira não textual está presente no titulo do

artigo que muda de cor conforme qual menu ele está interligado.

Feedback ao acionar área clicável, sinalização de área clicável já visita-

da e ferramentas de auxílio à navegação inexistentes.

Nível 4b – Esqueleto

Contém uma malha de diagramação por nível hierárquico, com 2 tipo

de malha. A rolagem é na vertical, com uma proporção de 1366x2569

pixels. O uso de janelas está presente mas é usado parcialmente nas

mensagens de erro.

Nível 5 – Superfície

Recursos audiovisuais não são utilizados, estando presente somente

os recursos visuais, como textos, imagens estáticas e animações de

TCC - WEBSITE

UFPR42

AG WEB

www.agweb.com

Responsável: Farm Journal Media


transição. Algumas características tipo-

gráfi cas do site é ser todo construído com

Helvética, usando na maioria um tom de

cinza escuro em contrate com o fundo

branco e é usado o uma aspas antes dos

títulos. Os artigos e banners do site usam

exclusivamente fotografi as.

As características dos elementos esque-

máticos é em geral aparece para separar

os conteúdos linhas pontilhadas na ho-

rizontal e linhar verticais com espessura

maior para exaltar alguma informação.

O website mantem a sua identidade visual

pela cor predominante ser a mesma da

marca e do uso exclusivo de tipografi a

sem serifa.

Paleta de cores: Principalmente Verde e

branco.

Retirado via "color.adobe.com"

2

Representação do website www.agweb.com




O objetivo do site é trazer informações como notícias, do mercado, do

clima, da colheitas. Sendo de notícias e de informação. Sem recurso

de adaptatividade. Com gestão de erro presente.

Com feedback presente nos menus que aparecem quando o mouse

está em cima do titulo, e a mudança de cursor em contato com links.

É possível fazer uma busca por meio de palavras-chave e ter uma

visão do site inteiro, pelo "mapa do site".

Nível 2 – Escopo

Os principais assuntos abordados são: Agricultura, pecuária, cultivo

mercado de produtos agrícola e maquinaria. E funções que o usuário

pode fazer: Ler notícias e colunas, ter uma previsão do tempo com

mais opções, ter tendencias das próximas estações, tem acesso á um

fórum para discussões, se inscrever para receber newsletters.


O tipo de arquitetura da informação é sequencial, o Nível de arbores-

cência é 7x3, utilizando um modelo convencional de conceito com

um portal/blog e a principal modo de diálogo é menus.


Para seus níveis encontra-se navegação intra página em algumas pou-

cas funções e entrepaginas para a maioria dos conteúdos. Em relação

as areias clicáveis, na maioria do site é usado texto, mas existe alguns

botões sem animação, banners com imagens e pictogramas no as

TCC - WEBSITE

UFPR44

redes sociais.

Para o auxílio à identificação das áreas

clicáveis mostra-se que na maioria dos

casos é apresentado em forma de mu-

dança do cursor, somente nos menus

que troca a cor do fundo e da fonte onde

o cursor está. Para indicar a localização

do usuário é usado menu breadcrumb,

além do menu principal se manter fixo e

selecionado qual sessão o usuário está,

e para reforçar isso de uma maneira não

textual está presente no titulo do artigo

que muda de cor conforme qual menu ele

está interligado.

Feedback ao acionar área clicável, sinaliza-

ção de área clicável já visitada e ferramen-

tas de auxílio à navegação inexistentes.


Contém uma malha de diagramação por

nível hierárquico, com 2 tipo de malha. A

rolagem é na vertical, com uma proporção

de 1366x2569 pixels. O uso de janelas está

presente mas é usado parcialmente nas

mensagens de erro.


Recursos audiovisuais não são utilizados,

estando presente somente os recursos

visuais, como textos, imagens estáticas e

animações de transição. Algumas caracte-

rísticas tipográficas do site é ser todo cons-

truído com a fonte Fakt pro, usando em

Negrito e colorido para os títulos e textos

em tom de cinza com o fundo branco. Os

artigos e banners do site usam exclusiva-

mente fotografias. E na previsão do tempo

é usado ilustrações realistas para a repre-

sentação do clima.

As características dos elementos esque-

máticos é usado linhas acima dos títulos

seguindo seu padrão de cor. Além de um

tom de cinza no fundo para evidenciar os

blocos de informação.



marca e do uso exclusivo de tipografia

sem serifa.

Paleta de cores: Principalmente branco e

cinza, com detalhes de várias cores.





IYFF+10

http://www.familyfarmingcampaign.net/en/home

Responsável: IFAD - Fundo Internacional de Desenvolvimento Agrícola



O objetivo do site é trazer informações com notícias, artigos, e datas

de eventos. Sendo de informação e de noticia. Sem recurso de adap-

tatividade. Com gestão de erro presente, no campo de contato, ele

não permite o envio do e-mail, deixando todas as opções obrigatórias

em vermelho.

Site não contém feedback. É possível fazer uma busca por meio de

palavras-chave somente nas notícias e selecioná-las por continente ou

tema.

Nível 2 – Escopo

O principal assunto abordado é: Agricultura Familiar e tudo que gira

entorno deste meio. E funções que o usuário pode fazer: Ler notícias e

colunas, compartilhar facilmente os posts via twitter, ver o calendário

3

Representação do website www.familyfarmingcampaign.net/en/home

TCC - WEBSITE

UFPR46

de eventos e ter acesso a links uteis,


O tipo de arquitetura da informação é

sequencial, o Nível de arborescência é 9x3,

utilizando um modelo convencional de

conceito com um portal/blog e a principal

modo de diálogo é menus.


Para seus níveis encontra-se navegação

entrepaginas. Em relação as areias clicá-

veis, na maioria do site é usado texto, mas

existe banners com imagens.

Para o auxílio à identificação das áreas cli-

cáveis mostra-se que na maioria dos casos

é apresentado em forma de mudança do

cursor. Para indicar a localização do usu-

ário é usado uma seta que fica no menu

fixo na lateral esquerda do site. Feedback

ao acionar área clicável, sinalização de

área clicável já visitada e ferramentas de

auxílio à navegação inexistentes.


Contem uma malha de diagramação por

nível hierárquico, com 3 tipos de malha. A


de 1366x2569 pixels.



estando presente somente os recursos vi-

suais, como textos e imagens estáticas. Al-

gumas características tipográficas do site

é ser todo construído com a fonte Lato,

usando em Negrito para os títulos e textos

em tom de cinza com o fundo branco. Os

artigos e banners do site usam exclusiva-

mente fotografias. E pictogramas para os

temas de cada post. As características dos

elementos esquemáticos é usado linhas

a baixo dos títulos seguindo seu padrão

de cor. Linhas pontilhadas para separar os

itens do calendário.



marca e do uso exclusivo de tipografia

sem serifa.

Paleta de cores: Principalmente branco,

verde e azul.





OTA - Organic

https://www.ota.com/

Responsável: OTA - The Organic Trade Association



O objetivo do site é trazer informações com notícias, artigos, datas de

eventos e a divulgação da organização. Sendo de informação, de notí-

cia e de anuncio, Sem recurso de adaptatividade. Com gestão de erro

presente, no campo de contato e de inscrição na associação, ele não

permite o envio do e-mail, caso alguma opção obrigatória não seja

preenchida. Site contém feedback, quando enviado um e-mail para

contato e no de inscrição na associação. É possível fazer uma busca

por meio de palavras-chave, existe a opção de aumentar a fonte no

site.

Nível 2 – Escopo

O principal assunto abordado é: Produtos Orgânicos, informações

relevantes as produtores de orgânicos e vantagens de ser um associa-

do da OTA. E funções que o usuário pode fazer: Ler notícias e colunas,

4

Representação do website www.ota.com

TCC - WEBSITE

UFPR48

compartilhar os posts via redes sociais, ver

o calendário de eventos, se inscrever na

associação, enviar um e-mail para contato.



sequencial, o Nível de arborescência é 11x4,








existe banners com imagens e pictogra-

mas para redes sociais e para comparti-

lhar posts.




cursor e a troca de cor do link, em alguns

casos o link fica sublinhado. Para indicar

a localização do usuário é usado menu

breadcrumb. O feedback ao acionar área

clicável, sinalização de área clicável já visi-

tada e ferramentas de auxílio à navegação

inexistentes.









visuais, como textos e imagens estáticas

e animações para os textos referentes aos

banners da home do website. Algumas

características tipográficas do site ser

construído com os títulos e menus com

a fonte Dosis e os textos na fonte Ubuntu,

variando entre as cores verde, laranja e

cinza. Os artigos e banners do site usam e

fotografias, ilustrações e pictogramas. As

características dos elementos esquemáti-

cos é usado duas barras "//" para separar os

títulos do menu .


pela cor predominante em todo site e do

uso de uma letra característica da marca

para definir itens importantes na home.

Paleta de cores: Principalmente verde,

laranja e amarelo.




Agriculture�gov

http://www.agriculture.gov.ie/

Responsável: Department of Agriculture, Food and the Marine

Ultima data atualizada: 13 de julho de 2015


O objetivo do site é trazer informações com notícias, artigos, informa-

ções sobre a legislação do pais, ajudar o usuário a usar a internet e o

próprio site. Sendo de informação e de notícia. Recurso de adaptati-

vidade, gestão de erro e feedback, inexistentes. É possível fazer uma

busca por meio de palavras-chave, existe a opção de aumentar a

fonte no site, de o próprio site ler os conteúdos.

Nível 2 – Escopo

O principal assunto abordado é: Agricultura, politica e a indústria agro

alimentar. E funções que o usuário pode fazer: Ler notícias e colunas,

ter acesso a textos governamentais e vídeos para auxílio do uso do

site, ouvir os textos do site.

5

Representação do website www.agriculture.gov.ie

TCC - WEBSITE

UFPR50


O tipo de arquitetura da informação é se-

quencial, o Nível de arborescência é 10x1,








existe poucas fotos.



casos é apresentado em forma de mudan-

ça do cursor e no menu a troca de cor do

link, em alguns casos o link fica sublinha-

do. Para indicar a localização do usuário é

usado menu breadcrumb. As ferramentas

de auxílio à navegação presentes são o

mapa do site e um índice de A-Z. O fee-

dback ao acionar área clicável e sinaliza-

ção de área clicável já visitada inexistentes.









visuais, como textos e imagens estáticas.

Algumas características tipográficas do

site ser construído todo em Arial, variando

entre as cores branco, azul e cinza. Não

tem banners. As características dos ele-

mentos esquemáticos é usado uma barra

"|" para separar os títulos do menu, picto-

gramas para os contatos e caixas de cor

para separar os conteúdos da home.

O website mantem a sua identidade

visual pela cor predominante em todo site

mesma cor usada na marca da instituição

dona do site.

Paleta de cores: Branco e Azul.




Agriculture�com

http://www.agriculture.com/

Responsável: Meredith Corporation



O objetivo do site é trazer informações do mercado e do tempo, notí-

cias e artigos, além de promover a conversa e interação dos usuários.

Sendo de informação, de notícia e de discussão. A gestão de erro e

feedback aparecem nos campos de se registar no site e logar, de se

cadastrar no newsletter, de mandar uma mensagem no fórum e de

mudar suas confi gurações da conta. Recurso de adaptatividade pre-

sente no post, onde site recomenda outros posts do autor e também

com assuntos relacionados. É possível fazer uma busca por meio de

palavras-chave.

Nível 2 – Escopo

O principal assunto abordado é: Agricultura e pecuária, o mercado e

o clima. E funções que o usuário pode fazer: Ler notícias e artigos, ter

6

Representação do website www.agriculture.com

TCC - WEBSITE

UFPR52

detalhes sobre o clima na sua região, par-

ticipar , perguntar e responder de discus-

sões, assistir vídeos, assinar a newsletter.



sequencial, o nível de arborescência é 8x4,








existem fotos para notícias e vídeos, e

pictogramas para as redes sociais.




cursor e troca da cor da fonte e além disto

no menu surgi os respectivos subtítulos,

em alguns casos o link fica sublinhado.

Para indicar a localização do usuário é

usado menu breadcrumb, e o menu que

fica selecionado indicando de qual sessão

é aquele post.

As ferramentas de auxílio, feedback ao

acionar área clicável e sinalização de área

clicável já visitada são inexistentes.









visuais, como textos e imagens estáticas

e pictogramas. Algumas características

tipográficas do site ser construído com os

títulos em Trade Gothic e o corpo do site

em Arial, variando entre as cores cinza,

branco e vermelho. Não tem banners. As

características dos elementos esquemáti-

cos é usado uma barra "|" para separar al-

guns títulos, pictogramas para os contatos

e caixas de cor para separar os conteúdos

da home.


pela cor predominante em todo site.

Paleta de cores: Branco e vermelho.




Ministério do Desenvolvimento Agrário

http://www.mda.gov.br/

Responsável: Ministério do Desenvolvimento Agrário



O objetivo do site é trazer informações governamentais sobre o meio

rural, notícias, artigos, e promover as ações do ministério. Sendo de

informação, de notícia e de anúncio. A gestão de erro e feedback não

são aplicadas. Recurso de adaptatividade presente no post, onde site

recomenda outros posts com assuntos relacionados. É possível fazer

uma busca por meio de palavras-chave, deixar o site com auto con-

traste e diminuir e aumentar a fonte.

Nível 2 – Escopo

O principal assunto abordado é: Agricultura e pecuária, os programas

do governo para a área agraria. E funções que o usuário pode fazer:

Ler notícias e artigos, ver vídeos e ouvir a radio do site.

7

Representação do website www.mda.gov.br

TCC - WEBSITE

UFPR54



sequencial, o nível de arborescência é 13x2,








também é empregado fotos para o ban-

ners, notícias e vídeos, e pictogramas para

as redes sociais.



casos é apresentado em forma de mudan-

ça do cursor e em alguns casos o link fica

sublinhado. Para indicar a localização do

usuário é usado menu breadcrumb.

As ferramentas de auxílio, feedback ao

acionar área clicável e sinalização de área

clicável já visitada são inexistentes.









visuais, como textos e imagens estáticas,

pictogramas e banners com animação. Al-

gumas características tipográficas do site

ser construído com os títulos em Verdada

e o corpo do site em Arial, variando entre

as cores preto, branco e verde. As carac-

terísticas dos elementos esquemáticos é

usado um menu na vertical com blocos

de cor par os títulos e linhas para dividir os

subtitulo, é também empregado botões

com efeitos de profundidade e alguns

"flat".


pela cor predominante em todo site.

Paleta de cores: Branco e verde.



Portal Orgâni-

co

AG WEB

IYFF+10 OTA

Agriculture�gov

Agricultu-re�com MDA

Os mecanismos de adap-tatividade permitem que o usuário navegue pelo website sem interrupção/restrição?

0 0 0 0 0 1 1

O website previne a ocor-rência de erros? 1 1 0,5 1 0 1 0

As mensagens de erro (caso existam) são claras e construtivas?

1 1 0 0,5 0 0,5 0

O website apresenta feedback de conclusão e de andamento de forma explícita e clara?

0,5 0,5 0,5 0,5 0 0,5 0

Os meios de avaliação do site pelo usuário estão facilmente acessíveis?

0 0 0 0 0 0 0

Os mecanismos de ajuda/suporte ao usuário estão facilmente acessíveis, ou seja, é óbvio como aces-sá-los?

0,5 1 0 1 1 0,5 1

A ajuda disponibilizada responde às prováveis questões dos usuários e traz mais informações do que as disponíveis na interface?

0,5 0,5 0 0,5 1 0 0

O usuário possui controle sobre o website? 0 0 0 0 0,5 1 0

TOTAL 3,5 4 1 3,5 2,5 4,5 2

Tabela nº1 de avaliação – Estratégia

4�2-Avaliação dos websitesPara essa avaliação, será usado quadros comparativos entre os site,

para desenvolver cada aspecto de deles, levando em conta o concor-

rente.

Para isso usarei tal métrica:

1 = Existente e bem aplicado

0,5 = Existente e mal aplicado

0 = Não existente

Para que no final da avaliação possa se fazer uma média entre os sites

TCC - WEBSITE

UFPR56

Tabela nº3 de avaliação – Estrutura

Tabela nº2 de avaliação - Escopo

Portal Orgâni-

co

AG WEB

IYFF+10 OTA

Agriculture�gov


O website providencia a informação de que o usuário necessitaria para realizar as tarefas?

1 1 0,5 1 1 0,5 0,5

Todos os elementos de cada página são úteis, não havendo repetição de informação ou informação desnecessária?

0,5 1 1 0,5 0,5 1 1

Os textos são sucintos? 1 1 1 1 0,5 1 0

O website não apresenta mais conceitos/grupos de informação por página do que a memória humana consegue reter?

0 0 1 0,5 1 0,5 0

O website emprega a ter-minologia do usuário, evi-tando termos ambíguos, técnicos e jargões?

1 1 1 1 0,5 1 1

Existe alguma forma de tirar dúvidas sobre termos utilizados no website?

0 0 0 0 0 0 0

O website é econômico em quantidade de ações e tempo para concluir as tarefas?

1 1 1 0,5 1 0,5 0,5

TOTAL 4,5 5 5,5 4,5 4,5 4,5 3

Portal Orgâni-

co

AG WEB

IYFF+10 OTA

Agriculture�gov


O website apresenta equilíbrio entre largura e profundidade?

0,5 0,5 0,5 0,5 0,5 1 0,5

As relações entre nós de informação (estrutura do site) são evidentes?

1 1 1 1 0 1 0,5

As categorias são mutua-mente excludentes? 1 1 1 1 1 1 1



Tabela nº4a de avaliação – Esqueleto

A classificação de infor-mações em categorias foi realizada com base no conteúdo e não por granularidade ou formato de apresentação?

1 0 1 1 1 1 1

Informações diretamente relacionadas aparecem na mesma tela e não em telas diferentes conectadas por links?

0 1 0 1 0 1 0

Evita-se o excesso de links embutidos (não se trans-formam em links todas as palavras-chave que se relacionam com os menus/categorias do website)?

1 0 1 1 0 1 0

O estilo de diálogo pre-dominante é simples e intuitivo?

0,5 1 0,5 1 0 1 0,5

TOTAL 5 4,5 5 6,5 2,5 7 3,5

Portal Orgâni-

co

AG WEB

IYFF+10 OTA

Agriculture�gov


Os nomes de links são concisos e explicitam o conteúdo da página a que remetem?

1 0 1 1 1 1 0

Ícones aparecem sempre rotulados (rótulo fixo ou por aproximação do cursor)?

Aproxima-ção Fixo Fixo Fixo Fixo Fixo Fixo

O website diferencia clara-mente os links já visitados daqueles ainda por visitar?

0 0 0 0 0 0 0

O website sinaliza os links que acabaram de ser acionados?

0 0 0 0 0 0 0

Links para a homepage e para pelo menos uma ferramenta de auxílio à na-vegação estão disponíveis em todas as páginas?

1 1 0,5 1 1 1 1

O website apresenta o caminho feito pelo usuário até a página atual?

1 1 0 1 1 0,5 1

O sistema de navegação se mantém constante? 1 1 0,5 0 0 0,5 1

TCC - WEBSITE

UFPR58

Tabela nº4b de avaliação – Esqueleto

As informações se comple-mentam quando há vários indicadores de localiza-ção?

1 1 0,5 0,5 0,5 0,5 1

O site oferece ferramentas de auxílio à navegação? 1 0,5 0 0 1 1 0

A ferramenta de busca (se disponível) possui uma op-ção default de modo que o usuário não necessite configurar nada?

1 1 0 1 1 1 1

O usuário pode escolher as opções de busca e a forma de apresentação dos resultados?

0,5 1 0 0 1 1 1

TOTAL 7,5 6,5 2,5 4,5 6,5 6,5 6

Portal Orgâni-

co

AG WEB

IYFF+10 OTA

Agriculture�gov


Utiliza-se uma malha gráfica (grid) para a orga-nização dos elementos nas páginas?

1 1 1 1 1 1 1

O cabeçalho não toma mais do que 25% da área da janela?

0,5 0,5 1 1 1 1 0

O cabeçalho e o rodapé es-tão claramente separados do restante da página?

0,5 1 1 1 1 1 1

Os menus, ferramentas etc. aparecem nas páginas sempre na mesma locali-zação?

1 1 1 1 1 1 1

As páginas são curtas (máxima rolagem de 2 ½ janelas do browser)?

0 0 1 1 1 1 0

As ações estão posiciona-das de forma lógica nas páginas, seguindo a ordem de realização das tarefas?

0,5 0,5 0,5 1 0,5 1 0

Os botões de ação estão próximos dos itens a que se relacionam?

1 1 1 1 1 1 1

TOTAL 4,5 5 6,5 7 6,5 7 4



Tabela nº5 de avaliação – Superfície

Portal Orgâni-

co

AG WEB

IYFF+10 OTA

Agriculture�gov


O design gráfico evidencia as relações hierárquicas em cada página e a estru-tura do website?

0,5 1 0,5 1 0,5 1 0,5

O design gráfico mantém a identidade visual do website entre páginas?

1 1 1 0,5 1 1 1

A família tipográfica es-colhida é comum, familiar? 1 1 1 1 1 1 1

O texto é apresentado de forma estática? 0,5 1 1 1 1 1 1

O texto encontra-se ma-joritariamente alinhado à esquerda?

1 1 1 1 1 1 1

Palavras importantes foram destacadas para chamar a atenção do usuário?

0 0 0 0,5 0 0 0

Utilizam-se, sempre que possível, imagens para revelar o conteúdo das páginas, em vez de apenas descrição textual?

0,5 0,5 0,5 0,5 0 0,5 0

Existe uma relação clara entre as imagens e o texto a que se referem?

1 1 1 1 1 1 1

Evita-se o uso gratuito de animações? 0,5 0 0 1 0 0,5 0

Anúncios (quando exis-tentes) estão posicionados nas bordas externas das páginas, de forma o mais discreta possível em rela-ção às áreas de navegação e de conteúdo?

0 1 1 1 1 1 1

As cores foram selecio-nadas de forma que as páginas também possam ser impressas/lidas em preto e branco?

1 1 1 1 1 1 1

O uso da cor é sutil, a não ser quando se deseja deliberadamente chamar atenção para determinado item?

1 1 1 0,5 1 0,5 1

Existe consistência na apresentação visual das informações e sistema de navegação?

0,5 1 0,5 1 0,5 0,5 0

TOTAL 8,5 10,5 9,5 11 9 10 8,5

TCC - WEBSITE

UFPR60

Para criar algo mais palpável, usando a

forma de métrica que foi aplicada, para

criar uma nota geral para cada website,

que consiste em somar as notas e desco-

brir a media, dividindo elas pelo número

de questões avaliadas:

Portal Orgânico: 6,4

AG WEB: 7,0

YFF+10: 5,6

OTA: 7,1

Agriculture�gov: 6,0

Agriculture�com: 7,5

MDA: 5,1

A partir destas notas podemos estabele-

cer um objetivo de reavaliar o projeto no

período de implementação e conseguir

uma nota maior que 8, para julgar satisfa-

tório.

4�3-Síntese dos ResultadosNa sínteses dos resultados, eu demonstro

quais foram os principais pontos de cada

nível de analise. No primeiro parágrafo

de cada nível retrata a parte de caracteri-

zação dos sites e o segundo parágrafo, a

parte de avaliação.

NÍVEL 1 - ESTRATÉGIA

Na caracterização todos são de carácter

notícias e de informação e dois além disto,

são de anúncio. O recurso de adaptativi-

dade mais comum é o de sugerir páginas

relacionadas. O modo comum de busca

é por meio de palavras-chave. O feedback

está presente em forma de erro e conclu-

são de uma tarefa.

Na avaliação, em 4 de 7 dos sites traba-

lham com prevenção de erros, mas as

mensagens de erro não são tão claras. Os

dispositivos de busca são satisfatórios e

os mecanismos de avaliação dos sites não

existe em nenhum site avaliado.

NÍVEL 2 - ESCOPO

Na parte de caracterização o assunto prin-

cipal dos sites é a agricultura e a função

que mais apareceu foi de ler notícias e

artigos,

Enquanto, a avaliação evidenciou que os

sites estão bem neste quesito, providen-

ciando as informações necessárias nas

tarefas, não existindo repetição de ele-

mentos, com textos sucintos, econômico

na ações e tempo de tarefas. Mas somente

2 de 7 tiveram um número de conceitos

na página adequado.

NÍVEL 3 - ESTRUTURA

A caracterização é geralmente formada

pela arquitetura da informação sequen-

cial, com o modelo de portal/blog e o

principal modo de dialogo é por via de

menus. A arborescência é larga.

Na avaliação, 6 de 7 sites classificam as in-

formações com base no conteúdo. Todos

tem categorias são mutualmente exclu-

dentes e em 3 de 7 possuem uma forma

de dialogo simples e intuitiva.



NÍVEL 4a - ESQUELETO

A caracterização consistem sempre de navegação entre página, na

sua maioria das áreas clicáveis é aplicado texto e para identificar essas

áreas é utilizado a mudança de cursor e em alguns casos a mudança

de cor do menu. Em todos os sites é utilizado menu breadcrumb para

localização do usuário.

Na avaliação dos websites, 6 de 7 dos casos os ícones aparecem com

rótulos fixos e 3 de 7 dos sites oferecem ferramentas de auxílio a na-

vegação. Nenhum site sinaliza os links visitados. Em geral os links são

concisos, o sistema de navegação é constante e o campo de busca

tem opção default.

NÍVEL 4b - ESQUELETO

Na caracterização dos websites, tem entre 2 e 3 tipos de grid no site,

que são diagramados da forma hierárquico. Todos dos sites tem rola-

gem vertical.

Na avaliação todos os sites utilizam grid, os menus sempre aparecem

na mesma localização e os botões de ação estão relacionados aos

itens próximos. Enquanto 3 de 7 dos cabeçalhos tomam mais de 25%

da área da janela, 4 de 7 tem páginas curtas e apenas 2 de 7 tem o

posicionamento logico nas páginas.

NÍVEL 5 - SUPERFÍCIE

Na caracterização todos os sites utilizam somente recursos visuais na

interface e a forma mais usual de ressaltar uma informação é com cor

ou alterando a tipografia. Em geral é usado duas famílias tipográficas

diferentes sem serifa e o branco e o cinza são as cores predominantes

e outras são usadas para enfase.

Na parte da avaliação da superfície todos os sites estão com o texto

alinhado a esquerda, tem uma relação clara de texto e imagem e

usam famílias tipográficas comuns. Enquanto 5 de 7 websites utilizam

a cor de forma sutil e 6 de 7 dos o texto é apresentado de forma es-

tática. Entretanto, nenhum website destaca palavras importantes do

texto e apenas 1 evita uso de animações de forma gratuita.

TCC - WEBSITE

UFPR62

4�4-Pontos RelevantesLevando em conta os resultados vou le-

vantar mais os pontos e conclusões mais

relevantes para o projeto.

• Percebe-se um padrão deste ramo,

terem sites informativos com noticias.

no formato de blog, com isso é desejável

se manter na mesma linha, mas fugir do

modelo convencional de blog, para de

destacar.

• Implementar opções de acessibilidade

preventivas, oferecer mais ferramentas de

ajuda ao usuário, e criar uma busca com

filtros mais voltados a real utilização.

• O feedback e as animações na navega-

ção do site é existente, mas é usado de

maneira insatisfatória quando presente.

Portanto investir em feedback tanto de

tarefas como de ações implementar ani-

mações que ajudem ao usuário.

• Em geral a arquitetura da informação é

larga em comprimento e rasa em profun-

didade. Deixar a arquitetura da informa-

ção o mais equilibrada possível no projeto.

• A função de evidenciar a área já clicada

não existe nas amostras. Aplicar essa fun-

ção no projeto final

• As cores mais utilizadas são o branco e

o verde mais presentes em 5 dos 7 sites

seguido pelo azul com em 4 de 7. E na

tipografia é usado nos textos longo o cin-

za. Para a cor principal foi indicado utilizar

o verde pela força desta cor atrelada ao

tema do site, mas para isso a utilização

dela deve ser bem aplicada, buscando se

diferenciar dos diferenciais

FUNCIONALIDADES RELEVANTES

Para levantar alguns funcionalidades

encontradas nas amostras que podem ser

implementadas no projeto.

• Ler artigos e notícias e postar comentá-

rios,

• Salvar seu conteúdo favorito,

• Calendário de eventos.

• Cadastrar seus produtos e serviços.

• Fórum para os agricultores

• Vídeos Explicativos para auxílio

• Opção de ter leitura em áudio no próprio

site.



5-Pesquisa com Público Alvo

Para essa pesquisa inicial foi escolhida a modalidade de entrevistas,

pois ela permite um aprofundamento mais informal do público, ob-

tendo resultados inesperados e possíveis interessantes para o desen-

volvimento do projeto.

Como recomendações eu usei o texto de Miquel (2008) que contem

diretrizes para obter melhores resultados das entrevistas.

Os participantes foram escolhidos por fazerem parte do público alvo.

5�1-Aplicação Para a aplicação foi elaborado um protocolo de entrevistas que foi

usado como base para a busca de informações com os voluntários,

onde o objetivo foi criar um diálogo aberto.

Foram entrevistados 11 pessoas, agricultores familiares. (Transcrição

em anexo 01)

Formulário de Entrevistas

Qual é o seu nome ?

Qual a sua idade ?

Há quanto tempo é agricultor?

De onde vem o seu conhecimento para plantar?

Como você se baseia para definir o preço de seus produtos?

Como ele sabe que deve proteger a lavoura, e que tipo de problemas

ele

TCC - WEBSITE

UFPR64

Já passou com isso ?

Você conversa e troca informações com

outros agricultores?

Quando precisa de orientação onde vai

buscar isso ?

Tem computador ou celular com acesso a

internet ?

O que você gostaria em um site para a

agricultura familiar ?

Segue uma síntese dos dados mais rele-

vantes retirados da entrevista:

Dos 10 entrevistados, 9 tem idade abaixo

de 50 anos. Em geral possuem filhos entre

10~20 anos, que são potenciais agricultores

e mais atuantes na internet que seus pais.

As culturas com maior incidência são: Hor-

taliças, tabaco, milho, soja e feijão. E existe

o interesse dos agricultores de aprender

novos tipo de cultura.

Todos os entrevistados começaram

jovens na agricultura e foram ensinados

pelos pais. Mas a maioria quando tem

uma dúvida tende a buscar um agrôno-

mo ou outros agricultores.

Diante dos preços do mercado, os entre-

vistados, dependendo da cultura, criam

um contrato antes mesmo da colheira

com um preço fixo ou vendem ao preço

que o comprador estipula.

"Olha, é preço de mercado. No taba-

co a gente trabalha por tabela, mas

em geral temos uma média, que

tentamos alcançar durante a safra e

se está muito abaixo a gente recla-

ma com o comprador."

Simão, Agricultor�

9 de 10 pessoas foram homens, entretanto

grande parte deles eram casados e suas

parceiras ajudam na cultura.



Algumas ideias dadas pelos entrevistados para um site para o agricul-

tor familiar: Dicas de consultores prevendo alternativas e mercados.

Trocar mensagens . Um técnico, que atendesse o agricultor. O preço,

informação do que plantar, previsão de mercado e tempo de plantar.

Qual é a cultura mais valorizada para exportação. Previsão do tempo e

informação do solo.

O maior problema presente no discurso dos entrevistados são climáti-

cos, e dependendo do tamanho da safra, dificulta muito ações pre-

ventivas. Além disto ocorre pragas e doenças, que são mais facilmente

controladas.

"[...]nós plantamos fumo a 12 anos, 10 anos caiu granizo e 10 anos

tivemos prejuízo. Em um ano tivemos 3 vezes. Tipo, tivemos as

perdas, ta certo que o seguro paga, mas é pouco. Mas tudo bem

faz parte."

José, Agricultor�

TCC - WEBSITE

UFPR66

FICHA

Nome: José Ferreira

Profissão: Agricultor

Idade: 34 anos

Estado civil: Casado

ESTÓRIA

José mora no interior da região sul do

estado do Paraná desde criança. Seus pais

também era agricultores que lhe ensina-

ram a profissão. Ele terminou o ensino

médio pois seus pais valorizavam o estu-

do. Hoje ele é casado com Fernanda Fer-

reira que é professora e tem 2 filhos, Carlos

Henrique Ferreira de 10 anos e Pedro

Ferreira de 8. Eles tem um computador

que José não usa tanto, sendo utilizado

principalmente pela esposa e filhos. Mas

José utiliza um celular frequentemente.

5�2-PersonaE a partir dos dados coletados nas entre-

vistas tracei uma persona, que materializa

como é o padrão de meu público alvo,

para assim trazer mais “humanidade” para

os dados e comunicar características de

maneira sintética e fácil de ser compreen-

dida. Para isso seguei as diretrizes descri-

tas por Facca (2012).

Em sua profissão ele tem problemas

com a geadas fortes que estragam a sua

grande plantação de milho, ele já tentou

produzir morangos orgânicos mas não

conseguiu, por falta de informação dos

cuidados necessários.



6-Diretrizes de Desenvolvimento

Após a pesquisa com público alvo e análise de similares, percebe-se

a carência de um website centrado no agricultor. Pois por um lado

temos uma classe de websites com informações superficiais, com

modelos básicos e nada intuitivos e falando âmbito nacional, a es-

cassez de plataformas abordando o tema. Por outro lado, um grande

número de agricultores com técnicas de plantio antiquadas, falta de

auxílio técnico e dificuldade de se manter comercialmente.

Diante do panorama pesquisado, podemos listar as necessidades do

projeto. Para isso irei classificar essas necessidades de acordo com a

"Caracterização dos Níveis" de Garrett, (2000).

NECESSIDADES DO USUÁRIO:

• Orientação de cada tipo de cultura. Pois alguns entrevistados

evidenciaram a dificuldade de transitar para outro tipo de cultu-

ra por causa da falta de conhecimento destas.

• Informação de preços do mercado de cada tipo de cultura.

Existe uma dificuldade de negociar o preço da cultura pela falta

de base no preço de mercado.

• Dicas de como se proteger dos fatores prejudiciais a agricultura.

Em geral os agricultores não tem muitos recursos dependendo

de o que está prejudicando a sua lavoura.

• Ferramenta que crie uma conversa entre os agricultores. Para

estimular o dialogo e troca de conhecimentos entre os próprios

agricultores.

• Informações do clima. Para que o agricultor possa se prepara

para ter as melhores condições para seu trabalho.

TCC - WEBSITE

UFPR68

ESPECIFICAÇÕES FUNCIONAIS

• Ser um site responsivo, ou seja, se

adaptar ao meios de suporte. Pois

na pesquisa se usuário, uma parcela

considerável navegava na internet via

dispositivos móveis.

• Ter um ferramentas de auxílio,

para tirar as dúvidas do usuário, em

tarefas disponibilizar instruções. Por

se trata, parcialmente, de um públi-

co de pouca experiência com meios

digitais.

• Gráficos com o histórico e o atual

preço de mercado das principais

culturas.

• Calendário com os eventos de inte-

resse do usuário.

• Noticias e artigos de especialistas.

• O usuário ter um conta, onde po-

derá, salvar artigos e notícias como

favoritos e postar comentários, ter

acesso ao fórum, cadastrar o que ele

vende e expor isso a outras pessoas

DESIGN DE INTERAÇÃO

• Ter mecanismos de adaptatividade

e ajuda/suporte ao usuário.

• Minimizar o esforço cognitivo para a

navegação e conclusão de tarefas.

• Estilo de diálogo simples e intuitivo.

DESIGN DA INTERFACE

• Concentrar as informações mais

relevantes no topo das páginas e na

lateral esquerda, seguindo as con-

tatações de Nilsen (2006) no estudo

"F-Shaped Pattern".

• Instruções claras e diretas, na lin-

guagem coloquial.

• Prevenir a ocorrência de erros.

• Paginas curtas

• Posicionar as ações das tarefas de

forma lógica.

DESIGN VISUAL

• Manter a identidade visual do site

em todas as páginas.

• Proporcionar feedback aos coman-

dos do usuário.

• Seguir as diretrizes para acessibili-

dade para o layout.

• Desenvolver o projeto visual seguin-

do a estética do Flat Design 2.0

6�1-Fragmentação de ConteúdoPara o site funcionar como um todo, pre-

cisa ser alimentado com as informações

necessárias para cada ferramenta.

Como a proposta é que o site seja público,

mantido e alimentado pelo ministério da

agricultura, as informações como artigos

e notícias, algumas informações sobre as

culturas e coleção de eventos serão retira-

dos do site oficial do ministério da agricul-

tura (http://www.agricultura.gov.br).

Para as previsões de tempo e informações

relacionadas, os dados serão extraídos do

site da INPE - Instituto Nacional de Pesqui-

sas Espaciais (http://agricultura.cptec.inpe.



br) e do site da Agritempo (http://www.agritempo.gov.br/agritempo/

index.jsp)

Para a ferramenta de cotações de mercado, os dados serão extraídos

do sites AgriLink (http://www.agrolink.com.br/Default.aspx) e do portal

Noticias Agrícolas (http://www.noticiasagricolas.com.br

Contudo para a páginas com as informações detalhadas dos tipos de

cultura, encontra-se apenas o website USDA (http://www.usda.gov/

wps/portal/usda/usdahome), que é uma biblioteca de informações

das plantas, mas o seu enfoque é na região dos Estados Unidos, além

de conter mais informações técnicas, que são importantes, mas que

não auxiliam tanto na hora do plantio. Por tanto irei usar esse site

como base, mas para as informações adicionais, seria necessário um

trabalho de pesquisa aprofundado para cada tipo de planta, além do

auxílio de profissionais da área.

TCC - WEBSITE

UFPR70



7-Arquitetura da Informação

"(...) arquitetura de informação se resume a conscientemente

organizar o conteúdo e fluxo de um site, com base em alguns

princípios que podem ser articulados, que foram derivados por

meio de coleta de provas." (BELAM, 2010)

Neste tópico, é quando comecei a esboçar o site propriamente e para

isso comecei com a arquitetura da informação, também conhecida

por "AI", que é o alicerce que sustenta o website, pois ele determina as

interligações do conteúdo, separando-os em uma sequencia lógica.

Por isso é fundamental que seja bem aplicada, pois sendo mal cons-

truída, a arquitetura da informação influenciará para que o usuário

tenha um experiência negativa de navegação, com diz Jakob Nielsen

no seu artigo, Top 10 Information Architecture (IA) Mistakes: "Arquite-

tura de informação ruim faz com que a maioria das falhas de usuário

sejam muito presentes e não melhora a taxa de outros problemas de

utilização da Web." (NIELSEN, 2009)

Mas para que a arquitetura da informação seja bem construída, abor-

dei alguns conceitos segundo o "Diagrama de Venn" apresentado por

Morville e Rosenfeld (2006) no livro " Information Architecture for the

World Wide Web".

Diagrama de Venn, retidado do livro "Information Architecture for the World Wide Web" pág. 25

TCC - WEBSITE

UFPR72

"Os três círculos ilustram a nature-

za interdependente de usuários,

conteúdo e contexto dentro de um

complexo, adaptável ecologia da

informação. Em suma, precisamos

entender os objetivos de negócios

por trás do site e os recursos dispo-

níveis para o projeto e implemen-

tação. Precisamos estar cientes da

natureza e volume de conteúdo que

existe hoje e como isso pode mudar

de um ano a partir de agora. E nós

temos que aprender sobre as neces-

sidades e comportamentos de busca

de informação dos nossos principais

públicos." (MORVILLE; ROSENFELD,

2006)

No contexto o website que projetei será

informativo mas abordando a informação

de forma interativa, visando a facilitação

do uso e do entendimento, pois os agricul-

tores familiares são menos favorecidos de

informação digital, portanto com menos

experiência também.

Financeiramente os recursos para manter

o website seria de ordem governamental,

com a possibilidade de ser um ponto de

exposição do PRONAF (Programa Na-

cional de Fortalecimento da Agricultura

Familiar), tendo assim o seu conteúdo em

parte gerando para o próprio website.

Agora agrupando o contexto e as neces-

sidades encontradas nas pesquisas de

similares e com o público alvo, listei, as

principais ferramentas para o site e quais

seriam algumas funções presentes, crian-

do o primeiro esboço de como o website

irá se comportar, para assim ter uma visão

mais clara de como será as ligações de

conteúdo na arquitetura da informação,

segue abaixo:

• FÓRUM:

Criar um tópico.

Responder.

Curtir/desaprovar.

• NOTÍCIAS E ARTIGOS:

Comentar.

Favorita.

Compartilhar.

• CALENDÁRIO DE EVENTOS:

Procurar por data/tipo/região.

Ver eventos futuros e dados mais precisos.

Programar aviso.

• INFORMAÇÃO DE PLANTAS:

Ver a ficha técnica.

Melhores regiões para plantio.

Ver melhores condições de plantio carac-

terísticas, preço de mercado.

• PÁGINA DO AGRICULTOR

Ver e buscar contatos dos produtores.

• CONTA DO USUÁRIO:

Cadastrar produtos/produtores.

Ter funções personalidades em outras

ferramentas do site.

• PREVISÃO DO TEMPO:

Nível de água no solo.

Chuvas e geadas.

Indicativo de melhor data para plantio e

poda e previsão de colheita.



4

Novidades

5�1

Artigos

5�2

Eventos

5

Noticias

4�2

Agriculturae cultivo

5�6

Preços

5�7

Plantas

5�8

Clima

• COTAÇÃO DE MERCADO:

Ver preço médio, histórico de preços e demanda das culturas.

A arquitetura da informação foi construída de cima para baixo, para

ser focada no usuário, pensando nas sua necessidades e em otimizar

a busca de informações, do tipo inexata organizando as informações

de acordo com sua importância ao usuário, sua estrutura é estrutura

hibrida, para permitir que o usuário avance e retorne nas páginas livre-

mente, e embora buque o equilíbrio, por ser um website com várias

ferramentas que ficam no mesmo patamar de arquitetura, ele ficou

com um arborescência larga e relativamente rasa.

Definido o plano de como será a arquitetura da informação, desenvol-

vo primeiramente no agrupamento das informação, para que o usuá-

rio encontre facilmente o conteúdo, contudo não saturando as pági-

nas do website de informações. Para isso estabeleci palavras chave,

que conectam as funcionalidades do website, como os itens abaixo:

Aplicando o rótulo de "Novidades" para os itens de notícias artigos

e eventos, pois o objetivos destas seções do site é manter o usuário

atualizado no que envolve a agricultura e outros assuntos pertinentes.

No rótulo de "Agricultura e Cultivo" é usado para separa os itens que

estão interligados ao plantio, com informações mais técnicas, entre-

tanto voltadas para o uso pratico no auxilo nesta função do agricultor.

Para a busca do site, foi desenvolvido uma ferramenta com opções

de busca avançada, e sugestões de resultados aproximados, além de

caso o usuário não encontre resultados, seja sugerido ele buscar no

mapa do site.

Parte da arquitetura da informação - Autor

TCC - WEBSITE

UFPR74

1�11

Login

2

Erro de Login

2�1

Conf irmação

Legenda:

Página de Confirmação

Página de Erro

Tomada de decisão

C

E

E C

HomePage

4

Novidades

5�1

Artigos

5�2

Eventos

5

Noticias

4�1

Vitrine do Agricultor

5�6

Preços

6

Detalhes

do Evento

5�5

EditarVitrine

5�3

Perto de Você

5�4

Página doagricultor

Multiplas páginas

Página Única

Janela

7�1-Rascunho da AI



4�2

Agricultura

e cultivo

5�7

Plantas

5�8

Clima

5�11

Sua conta

5�12

Orgões

do governo

5�13

Quem

Somos

4�3

Deixe seu Recado

5�10

Todos

5�9

Página do Recado

4�4

Ajuda

1�2

CriarConta

2�3

Erro

2�3

Conf irmaçãoEC

1�3

Pesquisa r

2�3

Nenhum Resultado

2�3

ResultadosE

3�1

Mapa do Site

3�1

Link

C

TCC - WEBSITE

UFPR76

Com a arquitetura da informação constru-

ída, chega a hora de testá-la, e para isso

escolhi o modelo de Tree Testing, pois é

uma forma de teste bem focada na AI,

com o objetivo encontrar problemas na

nomenclaturas dos links e a posição e

construção das ligações da arquitetura da

informação, sem a interferência da inter-

face do usuário.

Para realizar o teste utilizei a ferramenta

"Treejack" do site Optimalworkshop.com,

onde é possível criar um Tree Testing de

forma fácil e rápida, além de obter os

resultados com precisão. A versão gratuita

da ferramenta permite o teste com no

máximo 10 pessoas e 3 tarefas por teste,

7�2-Tree Testing embora limitado, foi sufi ciente para o obje-

tivo de avaliar a arquitetura da informação.

Para iniciar o teste, fui proposto três per-

guntas de identifi cação e quantifi cação de

dados, sendo estas:

Qual é seu nome ?

Qual a sua idade ?

Qual a sua experiência com internet ?

( ) Nenhuma

( ) Pouco

( ) Média

( ) Alta

A terceira pergunta tem como objetivo

descobrir qual o tipo do usuários, pois para

o teste tive voluntários de variados públi-

cos.

Imagem da tela inicial de criação de um Tree Testing no Treejack



Após isso, para o usuário foram apresentadas três tarefas, que tinham

com meta, tratar com maior abrangência o website como todo, mas

também as categorias com que ainda se tinha dúvida de como traba-

lhar.

Em todas as questões, coloquei uma situação do cotidiano, tentan-

do levar o usuário a pensar o que ele faria estando naquela situação,

para assim obter resultados mais sólidos. As questões apareceram em

forma aleatória para o usuário, mas para facilitar minha referenciação

neste texto irei numerá-las.

1 - "Imagine que você quer editar a vitrine, em que item você acredita

que encontrará essa informação?"

Nesta primeira questão, quis descobrir qual seria o melhor modo de

colocar a ferramentada "Editar Vitrine", descobrindo onde os usuários

iriam procurar, perto da própria ferramenta ou no menu de ajuda.

Além disto, visualizar de que forma os usuários de comportam diante

de um rotulo desconhecido, sem mais nenhuma informação.

2 - "Suponha que você quer ver quais as datas dos eventos para sua

região, em que item você acredita que encontrará essa informação ?"

Essa questão, foi aplicada para evidenciar se o usuário iria encontrar a

categoria de "eventos" e se o rótulo de "novidades" está adequado.

3 - "Imagine que você quer saber se vai chover ou não hoje, quais dos

itens abaixo você acha que vai encontrar essa informação ?"

Esta foi para testar o rótulo de "Agricultura e Cultivo"

Diante destas questões, uma de cada vez, foi colocado uma arvore de

links, onde o voluntario poderia, clicar par expandir, retroceder, pular

a tarefa e definir qual a sua escolha para tarefa. Segue como foram

dispostos os títulos:

Home

Novidades

Notícias

Economia

Agricultura

Pecuária

Tecnologia

TCC - WEBSITE

UFPR78

Artigos

Eventos

Cadastrar Evento

Todos Eventos

Agricultura e cultivo

Preços

Plantas

Clima


Página do Agricultor

Agricultores Perto de Você

Editar Vitrine

Deixe seu recado

Todos os recados

Responder recados

Ajuda

Sua conta

Configurações

Editar Vitrine

Órgãos Governamentais

Quem Somos

E após o teste, foi apresentado uma cam-

po final: "Caso você tenha alguma con-

sideração em relação as dificuldades na

hora de fazer a atividade ou alguma ideia,

por favor escreva aqui."

ResultadosPara esse teste, tive ajuda de 10 voluntá-

rios, com idades de 12 á 54 anos, 5 mulhe-

res e 5 homens. Diante da pergunta sobre

a experiência de navegação na web, 60%

se declarou com alta experiência, 30 com

média e 10% com baixa.

TAREFA 1

6 Sucesso Diretamente

3 Falha Direta

1 Falha Indireta

O tempo médio: 14.22 segundos.

Primeiro link visitado: Vitrine do Agricultor

- 70%

1 - Imagine que você quer editar a vitrine, em que item você acredita que encontrará essa informação ?

Gráfico de resultados da 1º tarefa - Retirado de Optimalworkshop.com



2- Suponha que você quer ver quais as datas dos eventos para sua região, em que item você acredita que encontrará essa informação ?

Nesta tarefa os resultados foram satisfatórios, pois no gráfico dos

caminhos percorridos, vemos que a maioria dos usuários foram pelo

caminho mais curto para chegar no objetivo e por mais que seja uma

ferramenta não comum, a maioria dos usuários tiveram a tendência

de clicar primeiramente na página " Vitrine do Agricultor" evidenciado

que o rótulo é adequado. Entretanto existia dois caminhos possíveis, e

o outro que era: Ajuda > Sua conta > Editar Vitrine, não foi considera-

do, mostrando problemas neste caminho.

TAREFA 2


4 Sucesso Indireto

1 Falha Direta

1 Falha Indireta

O tempo médio: 14.65 segundos.

Primeiro link visitado: Novidades - 60%

Nesta tarefa também obteve resultados satisfatórios, com uma taxa

de sucesso alta, entretanto metade dos acertos foram indiretos, ou

seja, alguns usuários ficaram indecisos na hora de encontrar a infor-

mação, procurando também a informação na "Vitrine do Agricultor".


TCC - WEBSITE

UFPR80

TAREFA 3


2 Sucesso Indireto

1 Falha Direta

2 Falha Indireta

O tempo médio: 20.43 Seg.

Primeiro link visitado: Agricultura e cultivo

- 50%

Nesta tarefa, seguindo o caso da segun-

da tarefa, existiu uma taxa alta de acer-

tos mas algumas confusões, sendo que

alguns usuários também buscaram o

objetivo na "Vitrine do Agricultor". Além de

um tempo médio de execução maior que

os outros.

3 - Imagine que você quer saber se vai chover ou não hoje, quais dos itens abaixo você acha que vai encontrar essa infor-mação ?




CONSIDERAÇÃO FINAL

Pensando no panorama geral do teste, a arquitetura da informação

teve resultados satisfatórios, com uma taxa média geral de sucesso

de 70%, 66% dos participantes acertando diretamente, ou seja, sem

retrocessos na arvore de links e além disto um tempo médio de exe-

cução de todo o procedimento de 2.83 minutos.

Levando essas questões, não será necessário grandes mudanças na

arquitetura da informação, apenas alguns ajustes finos. O teste evi-

denciou que o item "Ajuda" não funcionou, portanto o eliminei ele e

apliquei os itens de auxílio do usuário fixos nas páginas.

Com um olhar mais apurado, o item "Deixe seu recado" mudou para

"Mural" aplicando duas subdivisões. E interatividades foram adiciona-

das entre o Mural e a Página do Agricultor.

A arquitetura da informação alterada está na próxima página.

TCC - WEBSITE

UFPR82

7�3-Representação Gráfica da AI

Legenda:

Página de Confirmação

Página de Erro

Tomada de decisão

C

E

Multiplas páginas

Página Única

Janela

1

HomePage

4

Novidades

5�1

Artigos

5�2

Eventos

5

Noticias

4�1


1�1

5�12

FAQ

6

Detalhes do Evento

5�5

EditarVitrine

5�3

Perto de Você

5�4

Página doagricultor

1�4

Pesquisar

2�2

Nenhum Resultado

2�1

ResultadosE

3�2

Mapa do Site

3�1

Link

C

1�2

Mapa do site

1�3

ReportarErro

Links fixos em todas as Páginas.



1�5

Login

2�3

Erro de Login

2�4

Conf irmaçãoE C

4�2

Agricultura e cultivo

5�6

Preços

5�7

Plantas

5�8

Clima

Sua conta

4�3

Mural

5�10

Dúvidas

5�9

Recados

1�6

CriarConta

2�6

Erro

2�5

Conf irmaçãoEC

3�3

TCC - WEBSITE

UFPR84

7�4-Detalhamento da Arquitetura da InformaçãoPara facilitar o desenvolvimento das

etapas vindouras do projeto determinei

claramente o que cada página na arquite-

tura da informação ira conter de conteúdo

e quais funções e ferramentas estarão

presentes:

TODAS AS PÁGINAS

AUXILIO AO USUÁRIO

Contendo uma função "O que posso

fazer aqui?", que sobrepõem a tela

e aponta as principais funções de

aquela página.

"FAQ", "Reportar erro!" e "Mapa do

Site" no rodapé do website.

SUA CONTA

Quando o usuário logar essa opção

substituirá e as funções de "Login" e

"Criar conta".

Nela o usuário poderá configurar a

sua conta, trocar foto, e habilitar e

desabilitar newsletter.

BUSCA

O usuário pode pesquisar como pa-

lavras chaves simplesmente, ou pode

exibir mais opções para refinar a sua

busca. Em caso de nenhum resulta-

do, sugeri o usuário olhar o mapa do

site.

1 - HOME

Na home do site, tem seu menu formado

por 4 rótulos: Novidades, cultivo, vitrine, e

mural. Em forma de módulos será exibido

de forma sucinta as informações de suas

ferramentas, já personalizadas para o usu-

ário logado.

4 - NOVIDADES

NOTÍCIAS

Com as suas principais categorias, o

usuário pode ver todas as notícias, e

ordená-las de acordo com alguns pa-

râmetros, além de favorita e comen-

tar nas noticias.

ARTIGOS

Nesta página é para artigos variados,

também listada por categorias e

com as mesmas funções da página

de notícias.

EVENTOS

Com um calendário interativo, man-

cando o eventos próximos,

o usuário terá a oportunidade de

programar para um aviso no e-mail

de um evento, cadastrar um evento,

ver detalhes de cada evento e refinar

os eventos que aparecem para ele.

Além de artigos e notícias relaciona-

das.

4�1 - VITRINE DO AGRICULTOR

É o espaço que se pode mostrar e buscar

por agricultores. Tem um mapa com os

agricultores próximos ao endereço coloca-

do, categorias para encontrar agricultores



e fornecedores. E uma página do agricultor vinculada a sua conta,

que apresenta seus contatos, modo de trabalho, produtos e fotos. Terá

link, deixando no mural, de recados e dúvidas, sendo direcionadas ao

agricultor da vitrine desejada.

4�2 - AGRICULTURA E CULTIVO

PREÇOS

Nesta página o usuário tem um gráfico interativo, que pode sele-

cionar as opções para mostrar com histórico de preço, projeções

de preço, demanda de mercado, além de quais as culturas ele

quem ver no gráfico.

Além de artigos e notícias relacionadas. Podendo ver a ficha das

plantas que o usuário colocar no gráfico. (As culturas que o agri-

cultor cadastrar na vitrine aparecem primeiro por default)

PLANTAS

O proposito desta página é ser um centro de informações sobre

as plantas para cultivo. Com fichas técnicas, tipo do solo, quanti-

dade de água, clima e região favoritos, além disto quais são mais

recomendadas para o clima e região do agricultor. Com um link

direto para a ferramenta de clima e preços. (As culturas que o

agricultor cadastrar na vitrine aparecem primeiro por default)

CLIMA

Levando em conta as culturas que o agricultor tem, ele tem um

planejamento de quando será a melhor época de plantar, podar

e previsão de colheita. Além de ter acesso aos indicativos de

nível de água no solo, chuvas e geadas. Com um link direto para

a ferramenta de preços e preços.

4�3 - MURAL

Nesta página o agricultor pode deixar um tipo de mensagem exposta

a todos. São dividias entre recados e dúvidas, sendo o primeiro para

comentários e reclamações e o segundo para fazer perguntas.

Agora com a estrutura do site e as carácter de cada página definidos,

no próximo capítulo, terá com objetivo de desenvolver a estrutura

visual do projeto por meio de wireframes.

TCC - WEBSITE

UFPR86



8-Wireframe"Um wireframe, também conhecido como uma página de mo-

delo esquemático, é um guia visual que representa a estrutura

do esqueleto de um website." (WIREFRAMING, 2015)

O wireframe transforma a arquitetura da informação em um plano

visual, desconsiderando, imagens, cores, tipografias e pictogramas.

Para assim, construir qual será a estratégia de posicionamento dos

elementos do website.

Entretanto o wireframe tem mais funções como esclarecer maneiras

consistentes para a exibição de determinados tipos de informações

sobre a interface do usuário, determinar a funcionalidade pretendida

na interface e Priorizar conteúdo através da determinação da quanti-

dade de espaço a ser alocado para um determinado item e onde esse

item é localizado. (WIREFRAMING, 2015)

Diante das possibilidades do wireframe, se apresenta dois tipos, o de

baixa fidelidade e o de alta fidelidade, o primeiro se propõe a ser um

modelo rápido, usado no antes para gerar alternativas geralmente

feitos no lápis e papel. Enquanto o wireframe de alta fidelidade, é um

modelo detalhado, com as todas as funcionalidades do website, ge-

ralmente ele é construído por via de um software gráfico a partir dos

desenhos de baixa fidelidade. (NADINE, 2010)

RASCUNHOS

Contudo, comecei com os rascunhos dos wireframes para a home do

site, procurando desenvolver os aspectos estruturais do website, entre-

tanto ainda em baixa fidelidade, alguns exemplos abaixo:

Rascunhos dos wireframes - Autor

TCC - WEBSITE

UFPR88

ALTERNATIVAS

Agora, com rascunhos expressando basi-

camente como será o wireframe da home

do site. Escolhi quatro alternativas para de-

senvolver versões de alta fidelidade para

assim decidir qual será utilizada.

A alternativa 1 segue um modelo parecido

dos concorrentes, usando na grande maio-

ria quados estáticos, tem seu menu fixo na

lateral esquerda, somente com o botão de

auxílio ao usuário no lado direto para equi-

librar o layout. A organização interna do

conteúdo se divide de acordo os rútulos e

os títulos ficam na parte interna do bloco

de conteúdo que funciona por rolagem

vertical. Aplica-se slide de imagens no

item de notícias e os conteúdos dos itens

se modelam para o usuário, criando assim

uma home personalizada.

A alternativa 2, tem com enfoque em

minimizar a carga visual para o usuário,

tornando a home o próprio menu, dando

a oportunidade de quem acessar o web-

site, se redirecionar mais rapiadamente

para a página desejada. Portanto a home

a uma página é fixa na tela, a estrutura é

desenvolvida com a logo, o campo de bus-

ca e as opções de login se encontram no

campo superior esquerdo e as opções do

menu foram definidas do lado direito para

equilibrar o layout. Foi adicionado uma

frase para guiar o usuário para cumprir o

objetivo da página. E na home a página é

fixa na tela.

A alternativa 3, tem objetivo de ser mais

interativa, trazendo um experiência di-

ferente e agradável para o usuário, onde

ALTERNATIVA 1

o menu é fixo, mas os itens se recolhem

com a movimentação vertical da página.

A home page possui uma a figura de um

planeta que faz referência ao nome do

site e será utilizado para apresentar os

agricultores na vitrine e as mensagens se

serão deixadas no mural. Abaixo é utiliza-

do quadros com informações básicas de

cada ferramentas que do mesmo modo

da primeira alternativa elas se modelam

conforme as informações do usuário.

1º alternativa para wireframe - Autor



ALTERNATIVA 2

ALTERNATIVA 3

Novidades

Cultivo

Notícias

Preços Plantas Clima

Artigos EventosAgriMundo

Login

?

Criar Conta

Este é o menu, selecione os itens que você pretende interagir!

Vitrine Perto de você Sua página Editar vitrine

Mural Recados Dúvidas

Login/

?

Criar Conta

Novidades Cultivo Vitrine Mural

Ultimas Notícias

Ultimos Artigos

Preços

Previsão do tempo

Próximo Evento

Ver mais

Ver mais

Ver mais

AgriMundo



TCC - WEBSITE

UFPR90

8�1-Refinamento do Wireframe Para o desenvolvimento foi escolhido a

alternativa 3, pois a esse modelo mantém

uma interatividade na home page, ficou

um layout agradável e mantém o requisito

de ser responsivo, além disto, o usuário

pode acompanhar as ferramentas dire-

tamente da home. Com a página inicial

definida, foi realizado o desenvolvimento

Alberto dos Santos

Rose Staker

AgricultorSalvador - BA

Vitrine

Alice MayerAgricultoraSalvador - BA

Vitrine

Mural

“Estou com problemas de plantar morangos, toda vez que tento...

Login/

?

Criar Conta


Ultimas Notícias

Ultimos Artigos

Preços

Clima

Próximo Evento

Festa das Flores

20 à 25 de dezembro

Local: Piraquara - PR

Assunto: Cultura de Flores, com exposição palestra e vendas.

Projeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21

Mapa retoma negociação para conquista de novos mercados

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

A tecnologia a favor do agricultor!

5 tipos de Trator para cada tipo de uso!

Seja mais produtivo com um pensamento empreendedor!

Min 15º | Max 20º

Clima Chuvoso com Sol

Primavera

Clima bom para plantas como café e hortaliças.

Economia

Agricultura

Politica

Novembro de 2015

Milho 2,3%

Soja5,4%

Tabaco1,7%

Café0,3%

Tomate2,0%

Madeira6,9%

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino Mapa do SiteReportar ErroSAC

refinando as informações, definindo o

layout, alguns ícones, aplicando a marca e

lugares que os itens estarão. Alguns textos

foram criados para exemplificação. Segue

todos os wireframes do site.

HOME

É a página que o usuário vai ter o primeiro

contato com o website, portanto é es-

sencial que ela leve esse usuário para o

caminho certo, para isso, a home page foi

desenvolvida para oferecer acesso rápido

Barra superior e menu.

Mapa ilustrativo com mensagens do mural e agricultores da vitrine.

Botão de ajuda ao usuário.

Blocos de informação, trazendo um pouco de cada ferramenta do website e direcionan-do o usuário para as páginas.

Roda pé fixo, com infor-mações técnicas e links para feedback e auxílio do usuário.

Wireframe da página de home deste projeto - Desenvolvido pelo autor.



as informações mais necessárias para o usuário, de forma interativa e

intuitiva, dando a oportunidade de quando esse usuário buscar uma

informação mais gerais, ele não precise sair da home para isso.

DESCRIÇÃO DOS ELEMENTOS DA HOME

Barra superior e o rodá pé, estão presentes em todas as páginas, para

que o usuário identifique facilmente qual website ele está utilizando

e também fique intuitivo para ele encontrar as ferramentas inseridas

nestes elementos.

Na barra superior se encontra o logotipo do site no canto esquerdo

e os elementos de "Login/Criar Conta" e de busca, pois por serem de

suma importância para o funcionamento por completo de todas as

ferramentas e a busca de informações necessárias, eles ficam em

destaque para o usuário.

Barra de menu, foi desenvolvida próxima da barra superior mas ainda

sim como um elemento distinto pois por ser o principal modo de

navegação ela deve ser facilmente encontrada pelo usuário disposta

de forma lógica no layout, além disto, foi aplicado pictogramas e uma

determinada distância entre itens do menu, com o objetivo facilitar a

distinção de cada rútulo.

O botão de ajuda está sempre presente na página, seguindo a rola-

gem do usuário, para estar sempre visível no caso de alguma dúvida,

e por isso ele está localizado no canto inferior direito da página, para

não sobrepor nenhuma informação. Neste botão o usuário tem

Enquanto o rodapé, tem dois caminhos para auxílio ao usuário, um

é o mapa do site para exibir uma visão geral do website ajudando a

encontrar itens pela lógica da AI do website e o SAC é um centro de

perguntas tentando prever possíveis dúvidas dos usuários. Também

no rodapé foi adicionada uma ferramenta de avaliação do site e re-

portar possíveis erros encontrados pelos usuários.

Entrando no conteúdo da home, é apresentado um mapa ilustrati-

vo que faz referência ao próprio nome do site, e nele está inserido as

mensagens do mural e da vitrine, pois por serem as ferramentas mais

distintas e com objetivo de criar interatividade entre os usuários foram

TCC - WEBSITE

UFPR92

dispostas em primeiro no layout, além

disto criar uma estética dinâmica para a

home do website.

Os blocos de informação foram desenvol-

vidos com o tamanho ideal para se encai-

xarem em relação a informação necessária

e do tamanho da tela, para que assim o

site seja responsivo e o usuário tenha con-

trole no conteúdo da home.

ARTIGO

O artigo foram pensado para dar dicas

dos diversos assunto envolvendo a agri-

cultura , explorando os assuntos com mais

profundidade e pensando na prática do

agricultor.

Embora tenham conteúdos diferentes,

as páginas de artigo e de notícia, tem a

mesma estrutura mudando apenas o con-

teúdo, assim como a central de notícias

que muda a apresentação e tamanho das

imagens em relação a central de notícias.

Wireframe da página de artigo deste projeto - Autor.


Login/

?

Criar Conta


FavoritarPor Lucas | 20/11/2015

Novidades > Artigos > Maquinário

Compartilhar

Lorem ipsum dolor sit amet, consectetur adipis-cing elit. Mauris tellus tellus, ullamcorper mattis molestie nec, blandit vel dui. Nunc a metus venenatis mi sodales suscipit. Cras vel iaculis sem. Fusce posuere, est quis gravida luctus, felis nibh suscipit libero, a lacinia urna orci id odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis egestas dapibus magna a pulvinar. Quisque eleifend ullamcorper rutrum. Maecenas arcu nisi, mollis non enim lobortis, consectetur rhoncus metus. Curabitur sit amet facilisis augue. Morbi consequat ex non euismod com-modo.

NUNC VOLUTPAT ENt est a maximus. Nam mauris lacus, sollicitudin

id consequat vestibulum, bibendum a augue. Curabitur a dapibus diam. Donec porttitor consecte-tur leo id varius. Cras posuere elementum enim ac posuere. Mauris ipsum ex, vehicula tincidunt blandit sit amet, tincidunt ac nulla. Integer varius felis in neque lobortis condimentum. Cras inter-dum nunc mauris, sollicitudin placerat ante condimentum vel. Sed vitae mattis leo. Maecenas fringilla neque at urna viverra, quis dignissim ex placerat. Phasellus vulputate lacus a elit sceleris-que, vel porttitor dui semper. Sed suscipit eleifend posuere. Aliquam nulla metus, ullamcorper nec lacus vitae, hendrerit aliquet magna. Integer viverra, nisl sed euismod malesuada, risus felis eleifend nibh, et cursus leo nibh nec eros. Quisque venenatis, augue id feugiat venenatis, nisi ligula pretium lectus, vel sodales eros ante eget leo.

SENECTUS VOLUTPAT EPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam quis sagittis mi. Curabitur vehicula ultrices dui vel tincidunt. Morbi tellus neque, sollicitudin in eros quis, vehicula porta nunc. Fusce pretium ante justo, sit amet consequat ligula porta ut. Donec dignissim dapibus risus, vitae tristique urna. Quisque tincidunt sem in arcu vehicula, ac interdum tortor aliquam. Etiam bibendum auctor commodo. Fusce dapibus suscipit tortor, nec mattis mi aliquam in. Quisque vel convallis diam.

condimentum. Sed sollicitudin sollicitudin orci, pulvinar suscipit tellus. Nam sit amet lectus elit. Donec vitae posuere turpis. Praesent viverra tempus ante eu scelerisque. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque vulputate congue mollis.

Mauris vel molestie dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sodales maximus semper. Vivamus nec est quis urna facilisis suscipit at in lectus. Nulla sodales ultrices elementum. Nulla augue massa, condimentum sed justo sit amet, maximus mollis tellus. In a tellus eget ipsum viverra elementum. Vestibulum laoreet massa enim, nec ornare felis tempus sit amet. Phasellus convallis dapibus lacus, at vehicula nibh tincidunt id. Donec elementum sollicitudin auctor. Curabitur eleifend maximus dui eget blandit. Nullam cursus ultrices ligula, ac lobortis ante scelerisque eget. Donec justo est, feugiat in felis id, rutrum varius enim. Proin metus neque, fringilla vitae pretium a, viverra eu justo.

Os artigos mais lidos5 tipos de Trator para cada tipo de uso!


Seja mais produtivo com um pensa-mento empreendedor!

Comentários

Enviar

Responder

Escreva aqui o seu recado

Relacionados

Ferramenta

Clima

Notícia

A alta das chuvas

Notícia

Novo plano de governo traz ...

Artigo

Como perceber que o tempo...


AgricultoraRose Staker

não dá morango, o que faço ???

Maquinário

5 tipos de Trator para cada tipode uso!

20/11/201520/11/2015

Login/

?

Criar Conta


ArtigosNovidades > Artigos

Filtros

Assuntos

Os artigos mais lidos5 tipos de Trator para cada tipo deuso!



1 2 34 5 ...

Data

Mostrar: 6

Plantio


20/11/201520/11/2015

20/11/201520/11/2015

Dicas

Seja mais produtivo com um pen-samento empreendedor!

Maquinário

5 tipos de Trator para cada tipode uso!

Plantio


Dicas

Seja mais produtivo com um pen-samento empreendedor!


Wireframe da página de central de artigos deste projeto - Autor.



Projeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21

Login/

?

Criar Conta


As noticias mais lidas1 - Projeto Rural Sustentável ajudaráBrasil a cumprir objetivos da COP 21

2 - Mapa retoma negociação paraconquista de novos mercados

3 - Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

projeto Rural Sustentável ajudará o Brasil a cumprir os compromissos assumidos durante a Conferência do Clima de Paris, a COP 21. Agricultura de baixo carbono, desmatamento ilegal zero e redução da pobreza no campo são os principais objetivos da iniciativa.

O projeto, lançado nesta tarde pela ministra, vai oferecer US$ 26 milhões em crédito a 70 municípios,

e da Bahia, de Minas Gerais, do Paraná e do Rio Grande do Sul, na Mata Atlântica, por meio de mecanismo

“O Brasil apresentou metas viáveis na COP 21. Para cumpri-las, vamos à procura não apenas dos recursos

que vem casar perfeitamente com nossas pretensões e ajudar o Brasil a cumprir suas metas”, destacou Kátia Abreu, durante solenidade no Ministério da Agricultura, em Brasília.O Rural Sustentável conta com a participação do Departamento do Meio Ambiente, da Alimentação e dos Assuntos Rurais (Defra), do governo do Reino Unido, do Banco do Brasil e do Banco Interamericano de Desenvolvimento (BID).

As metas

redução em 36% da emissão de gases do efeito estufa até 2025 e de 43% até 2030.

FavoritarPor Lucas | 20/11/2015 Compartilhar

Relacionados

Comentários

Enviar

Escreva aqui o seu comentário

Ferramenta

Clima

Notícia

A alta das chuvas

Notícia

Novo plano de governo traz ...

Artigo

Como perceber que o tempo...


Responder

AgricultoraRose Staker

não dá morango, o que faço ???

Menu breadcrumb.

Botão para o salvar a notícia nos favoritos da conta do usuário e compartilhar nas redes sociais.

Elementos de adaptativi-dade, referente a notícia.

Ferramentas para postar comentários.

Página Principal > Novidades > Noticias > Economia

20/11/2015 | 21:34

Wireframe da página da notícia deste projeto - Autor.

NOTÍCIA

Embora parecida com um artigo, a notícia tem como foco descrever os aconte-

cimentos recentes,

Está página foi desenvolvida para ajudar o usuário a ler a notícia, tirando as

possíveis distrações da página, por isso os elementos de adaptatividade foram

realocados para o mesmo alinhamento horizontal dos comentários, assim di-

minuindo o número de informação na tela para o momento da leitura.

Por sua vez, os comentários são definidos como os recados, unificando essas

plataformas, ou seja, o comentário fica lincado a notícia e na página de reca-

dos, afim de criar mais a interatividade entre essas plataformas.

A notícia em si é definida pelo título, uma imagens ilustrativa e o texto com o

objetivo de ser informativo e direto.

TCC - WEBSITE

UFPR94

CENTRAL DAS NOTÍCIAS

Essa página tem como objetivo mos-

trar ao usuário todas as notícias do site e

para isso é possível navegar pelo menu

das páginas ou pro meio dos filtros, para

encontrar notícias relacionadas a devidos

assuntos ou datas.

20/11/2015

20/11/2015

20/11/2015

20/11/2015


A ministra da Agricultura, Abastecimento e Pecuária, Kátia Abreu, participa na próxima semana do IV Fórum Empresarial Países Sul-Americanos e Árabes, em Riade, na Arábia Saudita. Nessa viagem à Ásia, a ministra


Em reunião nesta quarta-feira com a ministra Kátia Abreu (Agricultura, Pecuária e Abastecimento), o gover-nador do Distrito Federal, Rodrigo Rollemberg, pediu apoio da Empresa Brasileira de Pesquisa Agropecuária (Embrapa) para a implementação do parque tecnológi-

Agricultura

Politica


Em reunião nesta quarta-feira com a ministra Kátia Abreu (Agricultura, Pecuária e Abastecimento), o gover-nador do Distrito Federal, Rodrigo Rollemberg, pediu apoio da Empresa Brasileira de Pesquisa Agropecuária (Embrapa) para a implementação do parque tecnológi-

Politica

Login/

?

Criar Conta


NotíciasNovidades

Filtros

Assuntos

As noticias mais lidasProjeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21


Governador Rollemberg pede apoio da Embrapa para parque tecnológi-co no DF

1 2 3 4 5 ...

Data

Mostrar: 4


Menu breadcrumb.

Filtros de conteúdo.

Elemento de adap-tatividade, com as notícias mais do momento.

Menu das páginas.

Wireframe da página de central de notícias deste projeto - Autor.



Wireframe da página de eventos deste projeto - Autor.

Filtros

Calendário de eventos

Número de eventos divididos pelos próximos meses.

EVENTOS

Desenvolvido para ser um ponto de exposição dos eventos de agricul-

tura, essa página divulga diversos tipo de feiras, palestras e etc, para

que assim o agricultor ter a oportunidade de comparecer nestes even-

tos para adquirir conhecimento e trocar experiencias.

Na página o usuário encontra um calendário, que foi desenvolvido

para funcionar de forma lógica, de modo que se navega pelos meses

ou dias e quanto se tem um evento é possível ver os seus detalhes

como datas, local e contatos.

Também está presente a ferramenta "Avisar-me", que envia um aviso

para o e-mail do usuário, o lembrando do evento (mas necessita ter

uma conta no site para utilizar)

Está página, como outras, está presente os filtros, para quando o usu-

ário necessitar encontrar eventos específicos sobre algum assunto ou

categoria.

TCC - WEBSITE

UFPR96

CLIMA

No canto direito do grid, está presente a

ferramenta de com a previsão geral de

acordo com a região, nela o usuário tem

as informações básicas de clima, mas

também as especificas para agricultura,

ambos conforme cada período de tempo.

No corpo principal da ferramenta, se

encontra qual foi a planta selecionada e

uma previsão os melhores dias de plantá-

-la, usando os dados de desenvolvimento

dela e as informações meteorólogicas da

região.

Com esses mesmos dados, a partir do dia

que o usuário plantou, a ferramenta calcu-

la os melhores dias para poda, adubação,

aplicar defensivos e de colheita, isso tudo

com a função "Avisar-me" quem envia um

aviso para o usuário lembrando das datas.

Wireframe da página de clima deste projeto - Autor.

Planta selecio-nada e uma estimativa da melhor época de plantá-la

Previsão geral para a região selecionada

Ferramenta de previsão.



Gráfico com his-tórico dos preços

Campo de plantas com seus preços

Culturas que mais cresceram e cairão em relação as preços.

Wireframe da página de preços deste projeto - Autor.

PREÇOS

Essa página possui uma diagramação diferente das demais, por causa

de seu conteúdo, pois assim . Com um gráfico interativo, onde o usu-

ário pode selecionar as plantas e comparar os históricos, assim perce-

bendo a tendência de cada cultura.

Abaixo do gráfico, fica as culturas que mais cresceram e que cairão os

seu preços.

Na parte esquerda do grid, se encontrão campo das plantas, que na

qual, por meio de uma pesquisa de palavra chave, o usuário adiciona

as plantas que desejar, para ver seus preços.

TCC - WEBSITE

UFPR98

PLANTAS

Previsto para ser um "Data Center", ou seja,

um centro de informação sobre plantas,

mas com a contribuição da comunida-

de do site, que pode sugerir alteração e

enriquecer todas as informações apresen-

tadas.

Os elementos de adaptatividade então na

lateral esquerda do grid, por serem uma

função segundaria no layout. O primeiro

destes elementos mostra as principais cul-

turas para o usuário e o segundo apresen-

Wireframe da página de plantas deste projeto - Autor.

Características e dados da planta selecionada.

Elementos de adaptatividade.

Imagens da planta.

Mapa com os maiores produto-res do mundo.

ta outros itens do site relacionados a planta

que se está selecionada.

Na estrutura principal da ferramenta, é

descrito as características da planta, onde

o intuito destas informações é serem uteis

para o exercício da agricultura.

Nesta mesma diagramação, é apresentado

uma galeria de fotos para caracterizar essa

planta e um mapa com os pais com maio-

res produções da cultura selecionada.



Wireframe da página de mural deste projeto - Autor.

Campo para envio de uma mensagens nova

Filtro

Mensagens de recados.

Mensagens de dúvida.

MURAL

No mural se encontra um centro de recados e dúvidas dos usuários,

que a própria comunidade do site pode responder e conversar entre

si, além disto, discutir alguma notícia ou artigo, em forma dos comen-

tários, que são representados pelos recados.

Na lateral direita foi implementado o campo de envio para uma nova

mensagem (precisa conta no site para realizar).

As mensagens são divididas em duas categorias: recados que são os

comentários ou as opiniões dos usuários e as dúvidas, que é quando o

usuário precisa de alguma resposta em relação a agricultura.

TCC - WEBSITE

UFPR100

Wireframe da página da central de vitrines deste projeto - Autor.

CENTRAL DE VITRINES

A central de vitrines funcionaria para

buscar agricultores próximos ao usuário,

exibindo os resultados com a distancia

relativa deles, esses resultados podem ser

filtrados pelo tipo de cúltico que o agri-

cultor busca. Servindo assim para buscar

contatos ou fornecedores para alguma

necessidade.

Filtro

Apresentação de novos agricultores no webstie

Resultados próxi-mos a localidade selecionada

Menu das páginas




Milho Milho Milho Milho

VitrineCultivo

Login/

?

Criar Conta


João Pedro Neves Fazenda Imperio

Endereço: Contato:

Disponibilidade:

Cultivos:

Galeria de Fotos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus tellus, ullamcorper mattis molestie nec, blandit vel dui. Nunc a metus venenatis mi sodales suscipit. Cras vel iaculis sem.

Wireframe da página de vitrine deste projeto - Autor.

Foto e dados do usuário

Galeria de fotos

Texto do usuário, contando a sua historia ou suas experiencias.

Culturas que são cultivadas pelo produtor.

VITRINE

A vitrine foi pensada em ser uma perfil para agricultor, onde ele tem

um "mini site" para apresentar para outras pessoas, e além disto, co-

nhecer outros agricultores perto de sua localidade.

O usuário poderia escolher quais das informações dele, irão ser divul-

gadas na vitrine tais como, foto, nome e endereço, além disto, selecio-

nar que tipo de cultivos ele tem.

Um campo de texto é destinado para o usuário deixar um depoimen-

to ou se promover, assim apresentando a sua historia para o mundo,

aliado a isso, na lateral direita do grid, foi adicionada uma galeria de

fotos, onde o usuário pode colocar as fotos da sua fazenda, lavoura e

produtos.

TCC - WEBSITE

UFPR102

8�2-Grid Para definição dos wireframes foi desenvolvido um grid modular,

afim de ele se adaptar para os tamanhos de telas variados, além

disto, proporcionar liberdade para se trabalhar os conteúdos de

cada página, assim não "engessando" o layout.

Segue abaixo o grid utilizado.

Grid modular do website - Autor.

1024 pixels

800 pixels



9-Interface9�1-NomenclaturaAgora partindo para o projeto gráfico do site, inicia-se com o a sua

identidade visual, mas para isso é necessário um nome adequado,

que transmita seu conceito e conteúdo do website. Para isso, foi utili-

zado um painel semântico de palavras, criando as ligações de signifi-

cado partindo de palavras em comum.

Os itens centrais do quadro representam o suporte e o tema do proje-

to e a partir destas palavras, se desdobrarem em forma de brainstor-

ming e busca de sinônimos vários significados, com o objetivo inter-

-relacionar os termos encontrados, para que formem as alternativas

da nomenclatura. Embora esse método não facilite a originalidade de

nomes, ele é adequado para um website, pois para esse meio de su-

porte é preferível ter um nome simples e direto, que será memorável

e encontrado facilmente via os buscadores online. (MÜLLER, 2008)

A partir deste exercício foi proposto várias alternativas: União Rural,

Portal Rural, Raiz Rural, Raiz do Campo, WebRural, AgriWeb, Agrico-

net, AgriInfo, Agricultura Online, Agrinet, AgriMundo e Mundo Rural.

Destacando duas: AgriMundo e WebRural.

Por se diferenciar dos concorrente mas mantendo o conceito agrícola

Arvore de palavras - Autor

TCC - WEBSITE

UFPR104

e além disto ter uma boa sonoridade, foi

escolhido o nome AgriMundo para o web-

site. Com o nome escolhido, é necessário

desenvolver com ele será aplicado dentro

do layout do website.

9�2-Logotipo"O símbolo e o logotipo são formas

de grafar a marca, de torná-la visual-

mente tangível." (ESCOREL, 1999)

Percebe-se segundo a frase acima, que o

logotipo é a parte visual da marca e é esta

parte que será desenvolvida para ser apli-

cada no desenvolvimento do layout, com

o objetivo criar uma identidade para o

website, mas sem a representatividade de

uma marca, por não ser o foto do projeto

e pelo tempo de realização.

Em relação ao nome escolhido, ele re-

mete a dois pontos fortes o "Agrícola" e o

"Mundo", criando assim um conceito de

"Mundo Agrícola" ou seja, o website trata

de tudo que acontece ao redor da agri-

cultura. Com este conceito em mente, foi

analisado os logos utilizadas nos sites da

análise de similares, para esclarecer como

é a linha criada neste ramo.

Das sete marcas quatro utilizam um íco-

ne acompanhando o lettering. As cores

utilizadas são variadas, contudo as mais

presentes é o verde, azul e bordo, enquan-

to três de sete das mascas utiliza preen-

chimento em branco e seis das sete logos

utiliza fonte sem serifa.

Sendo assim o logotipo criado para esse

projeto seguiu a tendência dos concor-

rentes no uso de letras sem serifas, mas

com foco principal na tipografia excluindo

o uso de ícones, para evitar elementos

visuais em excesso e desnecessários na

página.

Na sua pesquisa " Logos Now: A study on

logo treatmentsand brand perceptions",

Logos dos websites concorrentes



Siegel+Gale, uma agência americana especializada em branding,

contou com três mil voluntários, que classificaram cem logos famo-

sas mundialmente. A partir desta pesquisa ele identificaram nove

arquétipos das logos e quais sentimentos estão associadas a cada um.

Seguindo essa pesquisa, reafirmo a escolha de trabalhar com um logo

tipográfico não serifado, pois segundo Siegel+gale (2015), esse tipo de

logotipo transmite ser dignos de confiança, tradicionais, inteligentes e

amigáveis, sentimentos de devem ser passados para o usuário deste

projeto (SIEGEL+GALE, 2015).

Um requisito do site, é um logotipo largo e baixo, para se aplicar nos

layouts de wireframes já feitos.

Segue as alternativas criadas:

Escolhida

Fonte DesenhadaFonte Nexa Bold

Modificada

Para a criação da logotipo, foi realizado rascunhos para determinar

um ponto de partidas. Então foi desenvolvido alternativas, mantendo

um conceito simples e tipográfico, definido. Na alternativa escolhida,

a palavra "Mundo" foi desenhada para criar um contraste harmônico

com o "Agri" que utilizou uma fonte existente, mas que foi alterada

para exaltar sua legibilidade.

TCC - WEBSITE

UFPR106

9�3-Pictogramas Foi aplicado o uso de pictogramas no

projeto com o objetivo de facilitar a leitura

e entendimento das informação do layout

do site.

"Ícones têm a capacidade de comu-

nicar idéias, funções e significados

em uma linguagem visual comum."

(WILLIAMS, 2012)

Para desenvolver esse pictogramas foram

selecionados os títulos que seriam retra-

tados. Então foi realizado rascunhos para

definir as possíveis alternativas. Posterior

refinados.

Todos foram desenhados para serem

compreensíveis e seguirem a mesma

hierarquia visual. Seu estilo visual foi esta-

belecido de acordo com a tendência de

pictogramas com linhas, como utilizados

no mais recente sistema operacional da

Wicrosoft "Windows 10"

Imagem retirada do menu de configurações do Windows 10

Pictograma que represen-

ta as datas, é utilizado na

ferramenta de eventos.

Pictograma que representa

uma planta, é utilizado no

menu junto do rótulo de

cultivo.


um clima chuvoso com sol,

é utilizado na ferramenta de

clima.

Variações abaixo:


uma vitrine, é utilizado na no

menu junto com o rótulo de

vitrine.


uma taxinha, é utilizado na

no menu junto com o rótulo

de mural.


uma estrela, é utilizado na

no menu junto com o rótulo

de novidades.


uma localização, é utilizado

nas ferramentas de eventos

e plantas.


o horário, é utilizado na fer-

ramenta de eventos.



9�4-Estudo de CorA cor exerce uma enorme influência sobre atitudes e emoções do

usuário, como evidencia Patel (2015) que diz cerca de 85% da motiva-

ção do consumidor comprar um produto é a cor e segundo Kissme-

trics (2013) em um estudo com propagandas de revistas, os anuncio

coloridos foram 26% mais reconhecidos.

Pelas estatísticas demonstradas, se vê como a cor é um importante

agente no julgamento do usuário, sendo uma ferramenta extrema-

mente importante não somente para estética, mas também para a

navegação, proporcionando uma experiência mais agradável durante

a utilização site.

Em seu texto "How to Use the Psychology of Color to Increase Website

Conversions", Kissmetrics (2014), identifica as características de cada

cor e para o verde o autor descreve a cor como: "Talvez a conexão da

cor mais intuitiva é o verde - a cor do ar livre, eco-friendly, da natureza

e do ambiente. Verde é essencialmente um símbolo cromática para a

própria natureza."

Portanto foi utilizado o verde como cor principal pois o projeto ter

essa ligação com a natureza, e cria uma associação lógica para o usu-

ário, ajudando a identificar o website. No infográfico de Kissmetrics

(2013), demostra que o verde é geralmente preferido pelas pessoas de

ambos o sexos, sendo essa cor adequada em relação ao público alvo

do projeto, composto de agricultores e agricultoras.

Colors women love the most 8

Colors men love the most 8

Colors women hate the most 8

Colors men hate the most 8

BL UE

BL UE

ORANGE

BR OW N

PURPLE

GREE N

BR OW N

ORANGE

GREE N

BL AC K

GR AY

PURPLE

ARGETINGTING WWOME N

TARGETI NGETING MMEN

Trecho do infográfico "How Colors Affect Conversions" do site Kissmetrics

TCC - WEBSITE

UFPR108

A partir da conclusão da escolha da cor, foi

realizado um estudo com de cores com

o objetivo de delimitar o tom de verde a

ser usado, e quais as cores secundarias

a serem utilizada, para isso foi utilizado

o site "fl atuicolors.com" e o "color.adobe.

com" para defi nir a base de cor seguindo o

fl at design e para buscar mais cores com o

objetivo de defi nir a palheta de cores.

R: 22

G: 146

B: 128

R: 39

G: 160

B: 96

1 2

Para distanciar dos concorrentes que utili-

zam o verde em seus websites, foi escolhi-

da a opção 1, por ser um tom de verde não

utilizado.

A partir da cor escolhida, foi desenvolvida

uma palheta de cores, para se adaptar

bem ao site e com uma carga de contras-

te adequada para a legibilidade

Alternativas de verde - Retirado do site "fl atuicolors.com"

Palheta de cores - Autor

Defi nida com três tons de verde como

principais cores e amarelo como secunda-

ria de destaque, os textos em branco ou

preto e o fundo em cinza.

9�5-Tipografi aProsseguindo com o as defi nições para

elaborar o layout fi nal, foi escolhido traba-

lhar com duas tipografi as (WRIGHT, 2014),

para assim criar a distinção clara de títulos

e corpo de texto.

Elas foram encontradas no acervo do

"google.com/fonts" uma ferramenta criada

pela Google que facilita e unifi ca as fontes

para web.

A fonte que foi aplicada em títulos é a "

Bitter":

A fonte que foi aplicada nos texto de cor-

po foi a Rambla:

Ambos as fontes tem uma ótima legibili-

dade, uma família completa e um nível de

contraste agradável entre elas.

Representação da fonte Bitter

Representação da fonte Rambla



9�6-Layout Visual Após do desenvolvimento o logotipo, dos pictogramas, da palheta

de cores e a escolha de fontes, chegou o momento de desenvolver

o layout de apresentação do website. Foi utilizado a referência visual

do "Flat Design 2.0" como base de estrutura visual, defi nindo assim o

conceito do website.

?


Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR

Clima favorável para o desenvolvimento deplantas como café e hortaliças

Últimos Artigos



Maquinário Plantio Seja mais produtivo com um pensamento empreendedor!

Politica

Preços Cotações atuais - Novembro/2015

Milho 60kg Soja 60kg

- Seco -R$40,00

- Em Grão -R$67,00

Algodão 15kg

- Em Pluma -R$75,05

Café 60kg

- Tipo 6 Duro -R$460,00

Cana deAçúcar 1 Ton

-R$64,11

Tomate 23 Kg

- Mesa -R$34,19

Próximo Evento

Festa das Flores

17 a 22 de novembro de 2015

Joinville - SC

Início: 10:00

Feira e Palestra

Alice MayerAgricultora

Salvador - BA

Culturas:Batatas - Alface - Tomate

Dúvida no muralRose Staker

Estou com problemas de plantar morangos, toda vez que tento a folha fica amarelada e não dá morango, o que faço ???

Recado no MuralMario Ramos

Obrigado mesmo, eu estava precisando destas dicas!

Vitrine e Mural dos Agricultores

Últimas Notícias

Projeto Rural Sustentável ajudará Brasil nos objetivos da COP 21

Mapa retoma negociação para con-quista de novos mercados


Economia

Agricultura

Politica

Busca


José Ferreira3

Layout fi nal da home page - Autor

TCC - WEBSITE

UFPR110

?


Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR


Últimos Artigos




Politica



- Seco -R$40,00

- Em Grão -R$67,00

Algodão 15kg

- Em Pluma -R$75,05

Café 60kg

- Tipo 6 Duro -R$460,00


-R$64,11

Tomate 23 Kg

- Mesa -R$34,19

Próximo Evento

Festa das Flores


Joinville - SC

Início: 10:00

Feira e Palestra


Salvador - BA







Últimas Notícias




Economia

Agricultura

Politica

Busca


José Ferreira3

?


Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR


Últimos Artigos




Politica



- Seco -R$40,00

- Em Grão -R$67,00

Algodão 15kg

- Em Pluma -R$75,05

Café 60kg

- Tipo 6 Duro -R$460,00


-R$64,11

Tomate 23 Kg

- Mesa -R$34,19

Próximo Evento

Festa das Flores


Joinville - SC

Início: 10:00

Feira e Palestra


Salvador - BA







Últimas Notícias




Economia

Agricultura

Politica

Busca


José Ferreira3

?


Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR


Últimos Artigos




Politica



- Seco -R$40,00

- Em Grão -R$67,00

Algodão 15kg

- Em Pluma -R$75,05

Café 60kg

- Tipo 6 Duro -R$460,00


-R$64,11

Tomate 23 Kg

- Mesa -R$34,19

Próximo Evento

Festa das Flores


Joinville - SC

Início: 10:00

Feira e Palestra


Salvador - BA







Últimas Notícias




Economia

Agricultura

Politica

Busca


José Ferreira3

Faixa em degrade de amarelo, além do valor estético, essa linha funciona como barra de carregamen-to do site.

O menu utiliza o tom de verde médio da palheta de cores, nele contêm os rótulos e pictogra-mas e foi adicionado um efeito de sombra para simular que esta embaixo da barra superior.

Informações de autoria do site No rodapé foi aplicado o preto, para ser neutro e ser identifi cá-vel como o fi m da página.

Quando um item no menu é selecionado, abre uma aba com as informações daquele rótulo.

Menu da conta do usuário, onde ele pode ir par confi gurações do perfi l, ver os alertas do mural ou sair da conta.

A janela de busca, foi pensada para o auxiliar o usuário, dando sugestões e aparecendo de forma sobreposta, assim não atrapalhando a navegação, caso o usuário não encontre o resultado esperado .

BARRA SUPERIOR

A barra superior do websites foi defi ni-

da com o tom mais escuro de verde da

palheta de cores, para evidenciar esse

elemento, a logotipo foi inserida com o

MENU

RODAPÉ

branco e amarelo e o cambo que busca é

o única ferramenta que utiliza um fun-

do com branco, para assim aumentar o

contraste da janela de busca quando for

aberta,

Layout da janela de busca - Autor

Layout do menu do usuário - Autor

Layout da barra superior - Autor

Layout do menu do website - Autor

Layout da aba do menu - Autor

Layout do rodapé - Autor



?


Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR


Últimos Artigos




Politica



- Seco -R$40,00

- Em Grão -R$67,00

Algodão 15kg

- Em Pluma -R$75,05

Café 60kg

- Tipo 6 Duro -R$460,00


-R$64,11

Tomate 23 Kg

- Mesa -R$34,19

Próximo Evento

Festa das Flores


Joinville - SC

Início: 10:00

Feira e Palestra


Salvador - BA







Últimas Notícias




Economia

Agricultura

Politica

Busca


José Ferreira3

Nos blocos de informação, foi adicionado pe-quenos efeitos, para auxilar o usuário a entender melhor os limites, e uma faixa vende foi colocada na parte inferior do bloco, para equilibrá-lo visual-mente em relação ao título.

Para o planeta foi utilizado uma versão estilizada do mapa mundo .

Cada bloco tem o pictograma do rótulo que ele pertence, para assim ajudar o usuário a identifi -car cada bloco.

CORPO DA HOME PAGE

SIMULAÇÃO DO WEBSITE - HOME

Segue as simulações de como fi caram as páginas no browser:

111

Segue as simulações de como fi caram as páginas no browser:

Layout do corpo da home page - Autor

Home aplicada em um navegador - Autor

TCC - WEBSITE

UFPR112

SIMULAÇÃO DO WEBSITE - EVENTOS

SIMULAÇÃO DO WEBSITE - CLIMA

SIMULAÇÃO DO WEBSITE - EVENTOS

SIMULAÇÃO DO WEBSITE - CLIMA

Página de eventos aplicada em um navegador - Autor

Página de clima aplicada em um navegador - Autor



Mapa do SiteReportar ErroSAC




Próximo Evento

Festa das Flores


Joinville - SC

Início: 10:00

Feira e Palestra

Últimas Notícias



Economia

Agricultura

Últimos Artigos



Maquinário

Plantio


Politica


Milho 60kg

Soja 60kg

- Seco - R$40,00

- Em Grão - R$67,00

Algodão 15kg - Em Pluma - R$75,05

Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR


SIMULAÇÃO DO WEBSITE - PÁGINAS RESPONSIVAS

?


Clima

Min 15º | Max 20º

Chuvosocom Sol

Curitiba - PR


Últimos Artigos




Politica



- Seco -R$40,00

- Em Grão -R$67,00

Algodão 15kg

- Em Pluma -R$75,05

Café 60kg

- Tipo 6 Duro -R$460,00

Próximo Evento

Festa das Flores


Joinville - SC

Início: 10:00

Feira e Palestra


Salvador - BA







Últimas Notícias




Economia

Agricultura

Politica

Busca


3

Tablet Mobile

TCC - WEBSITE

UFPR114



10-ConclusãoPor tratar de um cunho social, esse projeto tem como objetivo solu-

cionar ou amenizar problemas, que assola uma determinada classe.

Com isso, o desenvolvimento foi criado com possibilidades abertas,

para as mais diversas soluções.

Contudo, um fator de extrema importância para o desenrolar deste

trabalho de conclusão de curso, foi a participação do agricultor, pois

essa contribuição abriu a oportunidade de encontrar problemas reais

e várias sugestões de soluções. Foi durante essa pesquisa com o usuá-

rio e na análise de similares que o trabalho começou a tomar forma.

Gerando alternativas e desdobrando os problemas, as soluções surgi-

ram e evoluíram, tomando o caminho que acarretou para a proposta

final. Um website ousado, muito diferente de todas as plataformas

para agricultores existentes, pensado e desenvolvido realmente para

esse usuário.

Com isso, o agricultor familiar ter estimativas e informações que ele

não conseguiria ter acesso tão facilmente e de forma tão clara, assim

dando oportunidade de ele cultivar com mais eficiência, proteger a

sua lavoura e conhecer novas equipamento e técnicas. O impacto em

larga escala deste projeto tem grandes perspectivas de influenciar

diretamente a vida dos agricultores familiares e a economia brasileira.

Por causa deste grande potencial, para uma futura implementação,

será necessário continuar com o método de Nilsen (1995), desenvol-

vendo um protótipo, testando e refinando, para assim assegurar o

funcionamento perfeito do website, pois pela complexidade que esse

projeto tomou, não foi possível desenvolver toda essa parte.

Mesmo assim, o resultado final ficou acima do esperado, com um

grande desenvolvimento pessoal, tanto na área prática quanto teórica.

Com certeza a construção deste trabalho foi um grande marco para o

profissional que estou me tornando.

TCC - WEBSITE

UFPR116



ALLEN, Ryan. Flat Design 2.0. 2014. Disponível em: <http://articles.dappergentlemen.com/2014/12/03/flat-design-2/>. Acesso em: 04 out. 2015.

BELAM, Martin. What is 'Information Architecture'? 2010. Disponível em: <http://www.theguardian.com/help/insideguardian/2010/feb/02/what-is-information-archi-tecture>. Acesso em: 10 set. 2015.

CAMPANHOLA, Clayton; VALARINI, Pedro José. A AGRICULTURA ORGÂNICA E SEU POTENCIAL PARA O PEQUENO AGRICULTOR. Cadernos de Ciência & Tecnologia, Bra-sília, v. 3, n. 18, p.69-101, ago. 2001. Disponível em: <http://seer.sct.embrapa.br/index.php/cct/article/view/8851/4981>. Acesso em: 07 jun. 2015.

CARVALHO, Mônica Valle de. Por que temos de comer? 2014. Disponível em: <http://chc.cienciahoje.uol.com.br/por-que-temos-de-comer/>. Acesso em: 05 maio 2015.

CASTRO, Antônio Maria Gomes de et al. JUVENTUDE RURAL,: AGRICULTURA FAMI-LIAR E POLÍTICAS DE ACESSO À TERRA NO BRASIL. Brasília: Fbr Propaganda, 2013. 56 p. Disponível em: <http://www.mda.gov.br/sitemda/sites/sitemda/files/user_arqui-vos_64/pageflip-4204229-487363-lt_Juventude_rural_agric-2411516.pdf>. Acesso em: 07 jun. 2015.

CHUNLAI, Wang. New family farms and food security in China. 2013. Disponível em: <http://www.china.org.cn/opinion/2013-08/22/content_29795567.htm>. Acesso em: 07 jun. 2015.

CLAYTON, Steve. Modern design at Microsoft. 2010. Disponível em: <https://www.microsoft.com/en-us/stories/design/>. Acesso em: 03 out. 2015.EKWALL, Barbara. Family Farming: Building a Sustainable Future. 2015. Disponível em: <http://www.worldfooddayusa.org/barbara_ekwall>. Acesso em: 07 jun. 2015.elements.pdf>. Acesso em: 28 jun. 2015.

ESCOREL, Ana Luisa. O efeito multiplicador do design. São Paulo: Editora Senac, 1999. 117 p. Disponível em: <https://books.google.com.br/books?id=KkDbYCPpgn8C>. Acesso em: 26 out. 2.

FACCA, Cláudia. Criando PERSONAS no design de produto. 2012. Disponível em: http://chocoladesign.com/criando-personas-no-design-de-produto. Acesso em: 12/10/2015

FAO (Nações Unidas). International Year of Family Farming 2014 launched. 2013. Disponível em: http://www.fao.org/news/story/en/item/207544/icode/. Acesso em: 06/06/2015

FAO. Agricultores familiares: Alimentar al mundo, cuidar el planeta. 2014. Disponível em: <http://www.fao.org/resources/infographics/infographics-details/es/c/272983/>. Acesso em: 07 maio 2015.

FLEURY, Flávia Americano Bittencourt Roriz; LIMA, Wellington Matos de. Mercado Orgânico, Potencial em Expansão. 2005. Disponível em: <http://www.seplan.go.gov.br/sepin/pub/conj/conj7/04.htm#_ftn3>. Acesso em: 07 jun. 2015.

FRANCIS, Mark Norman. A história da Internet e da web, e a evolução dos padrões web. 2008. Disponível em: <https://danillonunes.com/curriculo-dos-padroes-web/a--historia-da-internet-e-da-web-e-a-evolucao-dos-padroes-web>. Acesso em: 08 jun. 2015.

FRANCISCO, Wagner de Cerqueira e. Efeitos do êxodo rural. 2011. Disponível em: <http://www.mundoeducacao.com/geografia/efeitos-exodo-rural.htm>. Acesso em: 07 jun. 2015.

GARRETT, J. The Elements of User Experience, 2000. Disponível em <http://www.jjg.net/elements/pdf/

11-Bibliografia

TCC - WEBSITE

UFPR118

Garrett, J. The Elements of User Experience, 2000. Disponível em <http://www.jjg.net/elements/pdf/elements.pdf> Acesso em: 08 jun. 2015.GELB, E.; VOET, H. ICT Adoption Trends in Agricultu-re: A summary of the EFITA ICT Adoption Question-naires (2009). Disponível em: <http://departments.agri.huji.ac.il/economics/voet-gelb.pdf>. Acesso em: 6 fev. 2015.

GUANZIROLI, Carlos Enrique et al. Agricultura fami-liar e reforma agrária no século XXI. Rio de Janeiro: Garamont, 2001. 288 p.

GUY, Tammy. Visual Design and Usability Yellow Brick Road: Determine the importance of page elements to design a visual hierarchy that guides users along the right path to their destination.. 2012. Revista Digital UX Magazine. Disponível em: <http://uxmag.com/articles/visual-design-and-usa-bility-yellow-brick-road>. Acesso em: 11 ago. 2015.

HAUSLER, Jesse. 7 Things Every Designer Needs to Know about Accessibility. 2015. Disponível em: <http://sfdesignweek.org/7-things-every-designer--needs-to-know-about-accessibility/>. Acesso em: 04 out. 2015.

HYPERAKT; VIZZUALITY. A Evolução da Web. 2012. Disponível em: <http://www.evolutionoftheweb.com/?hl=pt-br>. Acesso em: 08 jun. 2015.IBGE. Acesso à Internet e Posse de Telefone Móvel Celular para Uso Pessoal 2011: Análise dos resulta-dos. 2011. Disponível em: <ftp://ftp.ibge.gov.br/Aces-so_a_internet_e_posse_celular/2011/comentarios.pdf>. Acesso em: 07 maio 2015.

IBGE. Censos demográficos de 1950, 1960, 1970, 1980, 1991, 2000 e 2010. 2010. Disponível em: <http://www.sidra.ibge.gov.br/>. Acesso em: 07 jun. 2015.

IBGE. Comentários - Censo Agropecuário 2006 Agricultura familiar Primeiros resultados. 2006. Disponível em: <http://www.ibge.gov.br/home/estatistica/economia/agropecuaria/censoagro/agri_familiar_2006/comentarios.pdf>. Acesso em: 07 maio 2015.

KISSMETRICS. How to Use the Psychology of Color to Increase Website Conversions. 2014. Disponível em: <https://blog.kissmetrics.com/psychology-of--color-and-conversions/>. Acesso em: 12 nov. 2015.

KISSMETRICS. Infographic: How Colors Affect Conversions. 2013. Disponível em: <https://blog.kissmetrics.com/how-colors-affect-conversions/>. Acesso em: 12 nov. 2015.

KRUG, Steve, Rocket Surgery Made Easy - The Do-it-yourself Guide to Finding and Fixing KUSH-NIR'S, Ivan. Produto interno bruto (PIB) de China, 1970-2012. 2013. Disponível em: <http://pt.kushnirs.org/macroeconomia/gdp/gdp_china.html#p1_2>. Acesso em: 07 jun. 2015.

MAZOYER, Marcel; ROUDANT, Laurence. História das agriculturas no mundo: DO NEOLÍTICO À CRISE

CONTEMPORÂNEA. São Paulo: Editora Unesp, 2010. 569 p. Tradução de: Histoire des agricultures du

monde. Disponível em: <www.ufrgs.br/pgdr/arqui-vos/790.pdf>. Acesso em: 07 maio 2015.

MEYER, Kate. Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users. 2015. Disponí-vel em: <http://www.nngroup.com/articles/flat-de-sign/>. Acesso em: 03 out. 2015.

MIQUEL, Cesar. Diretrizes de Iniciantes para Entre-vistas. 2008. Disponível em: <https://ijnet.org/pt-br/stories/diretrizes-de-iniciantes-para-entrevistas>. Acesso em: 07 maio 2015.Moraes, A., 2002. Design e Avaliação de Interface. Rio de janeiro: IUsEr.

MORVILLE, Peter; ROSENFELD, Louis. Information Architecture for the World Wide Web. 3. ed. Sebas-topol, Ca: O’reilly Media, 2006. 504 p. Disponível em: <http://yunus.hacettepe.edu.tr/~tonta/courses/fall2010/bby607/IAWWW.pdf>. Acesso em: 20 set. 2015.

MÜLLER, Nícolas. Como escolher um nome para seu site? 2008. Disponível em: <https://www.ofici-nadanet.com.br/artigo/1334/como_escolher_um_nome_para_seu_site>. Acesso em: 26 out. 2015.

NADINE. Low-Fidelity vs High-Fidelity Wireframes. 2010. Disponível em: <http://www.cloudforestde-sign.com/2010/11/14/low-fidelity-vs-high-fidelity-wi-reframes/>. Acesso em: 07 out. 2015.

NIELSEN, J. Iterative User Interface Design. 1993. IEEE Computer vol.26 no.11 pp 32-41.

NIELSEN, Jakob; Usability Engineering. 1993. Acade-mic Press, San Diego.

NIELSEN, Jakob. F-Shaped Pattern For Reading Web Content. 2006. Disponível em: <http://www.nngroup.com/articles/f-shaped-pattern-reading--web-content/>. Acesso em: 08 jun. 2015.

NIELSEN, Jakob. Top 10 Information Architecture (IA) Mistakes. 2009. Disponível em: <http://www.nngroup.com/articles/top-10-ia-mistakes/>. Acesso em: 10 set. 2015.

O'REILLY, Tim. Web 2.0 Compact Definition: Trying Again. 2006. Disponível em: <http://radar.oreilly.com/2006/12/web-20-compact-definition-tryi.html>. Acesso em: 08 jun. 2015.

OBRIEN, Dave. Tree Testing: A quick way to evaluate your IA. 2009. Disponível em: <http://boxesandar-rows.com/tree-testing/>. Acesso em: 28 maio 2015.

PADOVANI, Stephania; SPINILLO, Carla Galvão; GOMES, Ítalo Mata de Araújo. Desenvolvimento e aplicação de modelo descritivo-normativo para análise de websites. 2009. Disponível em: <http://www.scielo.br/pdf/prod/v19n3/09.pdf>. Acesso em: 08 jun. 2015.

PAGANI, Talita. Usabilidade de interfaces para dispositivos móveis – parte I. 2011. Disponível em: http://tableless.com.br/usabilidade-de-interfa-ces-para-dispositivos-moveis-parte1/. Acesso em: 13/10/2015



PATEL, Neil. How Colors Affect Conversion Rate. 2015. Disponível em: <http://www.quicksprout.com/2014/01/24/how-colors-affect-conversion-rate/>. Acesso em: 12 nov. 2015.

PINGDOM. Browser Wars. 2013. Disponível em: <http://royal.pingdom.com/2013/03/21/browser-wars-2013/>. Acesso em: 08 jun. 2015.PINRO, Me. Tales. Alimentação na Pré-história e evolução. 2015. Disponível em: <http://www.historiadomundo.com.br/pre-historia/alimentacao-na-prehistoria-e-e-volucao.htm>. Acesso em: 07 maio 2015.

PORTUGAL, Alberto Duque. O desafio da Agricultura Familiar. 2002. Disponível em: <http://biblioteca.planejamento.gov.br/biblioteca-tematica-1/textos/desenvolvimen-to-agrario/texto-12-o-desafio-da-agricultura-familiar.doc>. Acesso em: 06/06/2015

POWAZEK, Derek. Where Am I? 2006. Disponível em: <http://alistapart.com/article/whereami>. Acesso em: 08 jun. 2015.

RESNICK, Elizabeth. The Elements and Principles of Design applied to Web Design. 2012. Disponível em: <http://learn.daveharperdesign.com/design/>. Acesso em: 12 ago. 2015.

RIBEIRO, Hugo Norberto Félix. USABILIDADE ACESSÍVEL: Metodologias para a Avaliação Qualitativa da Usabilidade no Design para a Web. 2012. 182 f. Dissertação (Mestrado) - Curso de Design da Imagem, Faculdade de Belas Artes da Universidade do Porto, Porto, 2012.

SANTOS, Elsa. Web Design: uma reflexão conceptual. Revista de Ciências da Compu-tação, Açores, n. 4, p.1-15, 2009.

SIEGEL+GALE. Logos Now: A study on logo treatments and brand perceptions. 2015. Disponível em: <http://simple.siegelgale.com/acton/fs/blocks/showLandingPa-ge/a/9371/p/p-0011/t/page/fm/0>. Acesso em: 28 out. 2015.

SONNY, Claud. History www. 2006. Disponível em: <http://www.sonnysredwoods.org/library/historywww.cfm>. Acesso em: 08 jun. 2015.

SPAROVEK, Gerd et al. ANÁLISE TERRITORIAL e POLÍTICAS PARA O DESENVOLVI-MENTO AGRÁRIO. Brasília: Ideal, 2013. 130 p. Disponível em: <http://www.mda.gov.br/sitemda/sites/sitemda/files/user_arquivos_64/pageflip-4204229-487363-lt_Anli-se_territorial_e_-5306656.pdf>. Acesso em: 07 jun. 2015.

SPEAKMAN, Colin. China must be cautious in raising consumption. 2008. Disponí-vel em: <http://www.chinadaily.com.cn/bizchina/2008-11/21/content_7228346.htm>. Acesso em: 07 jun. 2015.

TIDWELL, Jenifer, Designing Interfaces, Patterns for Effective Interaction Design. 2005, Sebastopol, California: O’Reilly.

TRUCOM, Conceição. O que são Produtos Orgânicos? 2011. Disponível em: <http://so-mostodosum.ig.com.br/conteudo/c.asp?id=01848>. Acesso em: 07 jun. 2015.TUDE, Eduardo. Congresso Brasileiro de Telecomunicações Rurais. 2010. Disponível em: <http://www.abrater.org.br/2010/07/congresso-brasileiro-de.html>. Acesso em: 07 jun. 2015.

Usability Problems, 2010, Berkeley, California: New Riders.USDA (Estados Unidos). Census of Agriculture: Farm Typology. 2012. Disponível em: <http://www.agcensus.usda.gov/Publications/2012/Online_Resources/Typology/typo-logy13.pdf>. Acesso em: 06/06/2015

VALTER BIANCHINI (Paraná). Mensagem à Assembléia Legislativa do Estado. 2008. Disponível em: <http://www.fazenda.pr.gov.br/arquivos/File/Orcamento/mensagens/mensagem2008.pdf>. Acesso em: 06/06/2015WASSMER, Sandi. 10 golden rules for digital icons. 2014. Disponível em: http://www.creativebloq.com/netmag/10-golden-rules-digital-icons-11410286. Acesso em: 13/10/2015

WILLIAMS, Kenny. Guidelines For Creating Your Own Icon Set. 2012. Disponível em: http://webdesign.tutsplus.com/articles/guidelines-for-creating-your-own-icon-set---webdesign-5692. Acesso em: 13/10/2015

TCC - WEBSITE

UFPR120

WIREFRAMING. Disponível em: <http://www.usa-bility.gov/how-to-and-tools/methods/wireframing.html>. Acesso em: 07 out. 2015.

WRIGHT, Jamie. How many fonts is too many fonts? 2014. Disponível em: <http://engageinteractive.co.uk/blog/how-many-fonts-is-too-many-fonts>. Acesso em: 25 nov. 2015.

ZELDMAN, Jeffrey. Understanding Web Design. 2007. Disponível em: <http://alistapart.com/article/understandingwebdesign>. Acesso em: 08 jun. 2015.



Anexo 01

Transcrição da entrevista

1ª Fernanda, 25~28 anos, fe-minino�

Primeiramente o seu nome ?

Fernanda

Como é a produção dos orgânicos ?

Aqui princialmente nossos produtos vem

de um circuito de comercialização da

Ecovida, que é um processo que a gente

manda e recebe alimentos, por isso temos

toda essa variedade de cereais e de verdu-

ras.

Em geral quantas pessoas participam da

Ecovida?

4000 pessoas envolvidas

É realizado somente no paraná?

Não, é em 3 estados, Paraná, Santa Ca-

tarina e Rio Grande do Sul, te coisas que

pegamos também de São Paulo, que não

está dentro da rede, que pegamos direto

em um empresa se São Paulo que são

mais industrializados.

E a quanto tempo vocês estão trabalhan-

do com orgânicos?

Faz 23 anos que meus pais começaram.

E aqui no passeio publico?

Começamos em 1995, então fazem 20

anos.

Tem algum agrônomo ou instituição do

governo que vem auxiliar vocês?

Não, normalmente a gente tem pouco

auxilio, e em geral oque temos a disposi-

ção em relação a assistência técnica está

pouco adaptada a nossa realidade, muito

menos adaptada a realidade da agricul-

tura familiar de orgânicos e agriecologica,

então quando tem, oque é muito raro, eles

vão com uma capacidade de assistência

muito básica.

Mas então, onde vocês buscam informa-

ção?

A gente trabalha com um sistema de

informações horizontais, que é troca de

saberes, então fazemos muito intercambio

entre os agricultores, as próprias reuniões

nos grupos ela proporcionam um troca de

saberes, e a reuniões dos núcleos também

proporcionam, dentro da Ecovida temos

encontros com todos os 4000 mil agricul-

tores.

Em relação a internet, vocês tem um site

ou grupo para conversar?

Temos um site da Ecovida que serve mais

para divulgação, mas temos dificuldades

de alimentá-lo. Nós da família também

temos um site e uma página no facebook.

Vocês vem interesse nos agricultores ?

Muito. Temos um rapaz que fez para gente

o site, fez para outros 3 agricultores e ten-

de a crescer mais.

Como funciona o preço dos produtos?

Nós trabalhos com preço justo, é bem

11�1-Anexos

TCC - WEBSITE

UFPR122

diferente a nossa relação de concorrência, nós conversamos e vemos

qual seria o mais justo.

E em relação ao mercado geral ?

Sim, a gente sabe, a gente segue uma linha econômica bem diferente

do mercado, por isso nem comparamos pois são realidades diferen-

tes.

2º Danilo, 23 - 26 anos, masculino�

Qual o seu nome ?

Danilo

Vocês tem uma propriedade ?

Temos uma chácara em Areia Branca, no município de Mandirituba.

E a quanto tempo vocês produzem orgânicos ?

Há cerca de 20 anos, primeiro meus pais trabalhavam para minha

madrinha, então eles comprar a propriedade, eu mesmo a minha vida

inteira trabalhei com orgânicos.

E quantas pessoas trabalham?

Somos em 4

Da família mesmo ?

Sim.

E para aprende desta produção ?

Sempre foi conhecimento da família, as vezes precisamos alguém da

Emater, mas nada que tenha que depender dos técnicos.

Em relação ao preço de mercado ? com se basear no preço ?

O prelo do orgânico é mais estável, o do convencional varia muito.

Mas e a decisão do preço propriamente ?

Varia conforme o colegas aqui, tentamos não deixar muito acima,

nem muito abaixo.



Quanto a proteção da lavoura? Como

vocês fazem?

Quando se percebe que vai gear, a gente

corre lá e coloca uma lona de plastico.

Mas quando a geada é muito forte não

adianta muito ainda mais para orgânicos.

Mas de proteção é isso que a gente sabe,

só se alguém tiver outra ideia.

Em relação a internet, vocês tem um site

ou grupo para conversar?

Nós temos um site, mas ele é bem sim-

ples, claro que quanto mais informações

melhor, mas fizemos mais de ultima hora,

para contar a nossa historia, pois somos

os primeiros do parana certificados oficial-

mente.

Você nota interesse nos produtores em

acessar e buscar?

Sim, tanto dos produtores como dos con-

sumidores, sempre perguntam se tem um

cartão ou site para contato.

E existe troca de informações com os

produtores?

Sim, temos reuniões da nossa certificado-

ra que é a Ecovida. E também é feito que chamamos de Olhar Externo, vem pessoas de outros grupos ou do núcleo de orgâni-cos pra ver se ta tudo certinho mesmo.

3ª Diogo Malinocsku - 28 anos - Masculino

Há quanto tempo é agricultor? E que

tipo de cultura você tem e já teve ?

Sempre fui agricultor familiar, já cultivei

bastante tabaco e agora champinhom.

Como você se baseia para definir o preço

de seus produtos?

Depende bastante da oferta e procu-

ra,principalmente no champinhom que

aqui na região não tem muitos produto-

res.

De onde vem o seu conhecimento para

plantar?

Vem das gerações anteriores e também

de técnicos que me ensinaram.

Como ele sabe que deve proteger a

lavoura, e que tipo de problemas ele já

passou com isso ?

Sim, mas não tem muito oque fazer varia

mesmo conforme o clima.



Sim, normalmente em conversas e no

facebook.


buscar isso ?

Eu busco a MalinBio, que é um empresa

de consultoria ambiental e agrícola.

Tem computador ou celular com acesso

a internet ?

Sim, informações agrícolas diversas.



Dicas de consultores prevendo alternativas

e mercados.

4ª Dirseu - 50 anos - Masculi-no

TCC - WEBSITE

UFPR124

Há quanto tempo é agricultor? E que tipo de cultura você tem e já

teve ?

Ah desde pequeno eu já trabalhava na roça. E que eu planto mais é o

fumo e o milho e algumas hortaliças para o consumo próprio.


Eu aprendi como meu pai tudo né, como trabalhar como o arado, in-

clusive hoje eu ainda trabalho com ele, não com o trator, colho fumo

tudo assim.


Eu sempre vou na firma, na empresa, que dai eles pagam a base que

ta definida. Mas sempre é a empresa que defini.

Como ele sabe que deve proteger a lavoura, e que tipo de proble-

mas ele já passou com isso ?

Ah é o granizo né, é o que mais estraga. Mas é coisa da natuza mes-

mo, não tem como resolver.

Você conversa e troca informações com outros agricultores?

Ah a gente sempre conversa, quando vamos no fórum e trocamos

umas ideias.

Quando precisa de orientação onde vai buscar isso ?

Orientação eu busco mais no agrônomo

Tem computador ou celular com acesso a internet ?

Temos celular mas é meus filhos que usam.

O que você gostaria em um site para a agricultura familiar ?

Ah hoje em dia o mais fácil é o do conversar, trocar e mensagem e

essas coisas.

5ª José - 36 anos - Masculino


teve ?

Desde piazinho. E o mais forte é o fumo e milho, mas tenho algumas



hortaliças e criação de gado e uns porqui-

nhos, para consumo próprio


plantar?

Veio de meus pais.


de seus produtos?

Na verdade é a Souza Cruz que compra.

Pois olha esse ano estava mais ruim, pois

pagaram mais mal o preço, tinha qualida-

de mas foi valorizado bem menos.



passou com isso ?

O granizo, na verdade nós plantamos

fumo a 12 anos, 10 anos caiu granizo,

10 anos tivemos prejuízo. E em um ano

tivemos 3 vezes. Tipo tivemos as perdas,

ta certo que o seguro paga, mas é pouco,

mas tudo bem faz parte.



Temos, claro, lógico, sentamos na roda e

trocamos ideias, que uma ideia de um ou

do outro pode ser melhor.


buscar isso ?

Geralmente a Emater.


a internet ?

Tenho celular, mas não internet.



De tudo é bom.

6ª Wilson - 43 anos - Masculi-no



Desde criança. Eu plantei fumo e atual-

mente verduras.


plantar?

Veio do pai.


de seus produtos?

Quem vai comprar, esse é o problema.



passou com isso ?

Já tive, e não tive solução nenhuma. O

fumo ainda tinha jeito, mas como eu não

aplico nada nas verduras, pois planto orgâ-

nicos.



Sobre hortaliças são pouco na região que

plantam. Então não tem muito com quem

falar.


buscar isso ?

Eu vou na Emater.


a internet ?

TCC - WEBSITE

UFPR126

Tenho computador, mas é para meus filhos.


Eu precisava de um técnico, que me atendesse, pois já tentei plantar

tomate e não deu certo.

7ª Simão - 35 anos - Masculino


teve ?

Desde sempre. Olha a gente da lavoura tem de plantar de tudo, o que

eu plantava era tabaco, mas agora tenho também cenoura, feijão, soja

e milho


Aprendi com meus pais, e fique na atividade.


Olha, é preço de mercado, no tabaco a gente trabalha por tabela, mas

em geral temos uma media, que tentamos alcançar durante a safra e

se está muito abaixo a gente reclama com o comprador.



Já, no tabaco e soja tive granizo, e fungos, no primeiro ano que plan-

tamos soja eu não conhecia muita coisa, te uma doença que atacou,

que eu poderia evitar, mas não tinha o conhecimento.


Bastante.


Bom busco orientação técnica, técnico da cooperativa ou da Emater.


Tenho celular, e acesso mais site de pesquisa, pesquisa de preço de

equipamento o insumos.




Toda informação é bem vinda.

8ª Noel - 45 anos - Masculino



Desde os 9 anos. Plantei milho, salsa e um

pouco de feijão, agora mais milho e fumo.


plantar?

Veio dos meus pais.


de seus produtos?

A gente faz umas pesquisa, e vê quem

paga melhor.



passou com isso ?

Já tive uns problemas, mas não tem muita

solução.



Sempre, essa é a melhor coisa pra saber

mais.


buscar isso ?

A gente vai na Emater, dai a gente vê com

o instrutor pra ver qual tipo de fumo é

melhor pra plantar.


a internet ?

Tenho, mas uso pouco, é mais a minha

filha mesmo.



Gostaria de preço, informação de o que

plantar, previsão de mercado, e tempo

de plantar. Qual é a mais valorizada pra

exportação.

9ª Josnei - 30 anos - Masculi-no



Desde a infância. Tabaco, milho e feijão e

batata e hortaliças pra consumo próprio.


plantar?

Aprendi com meu pai.


de seus produtos?

Na maioria das vezes é tabelado, dai

conhecemos o valor e a que classe aquilo

pode ser includo, mas é conforme o mer-

cado, que é o comprador que da o preço.



passou com isso ?

O granizo, que estamos sempre sujeitos.



Sim, gosto muito, sempre busco conhecer

novas atividades e tecnologias


buscar isso ?

TCC - WEBSITE

UFPR128

Emater e prefeitura e técnicos das cooperativas.


Tenho, geralmente é algumas curiosidades de alguma planta ou do-

ença que pode afetar a plantação.


Orientação técnicas, de manejo cultivo e tecnologia.

10ª João - 32 anos - Masculino


teve ?

Desde que criança. Soja, tabaco e feijão.


Aprendi com a família.


É o mercado, integração, nós produzimos frango de corte para seara,

o leite vai pra laticínios que vai pro governo do estado, e tudo é defini-

do antes.



Ja, mas temos seguro�


Sim, buscar coisas novas pra propriedade, sempre em exposições e

eventos.


Procuro um técnico agrícola e agronomo.


Tenho, mas sem internet.


Previsão do tempo, informação do solo.

Documents

Tcc - Web Design - Desenvolvimento de Website para Apaio à Agricultores Familiares