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

WEB DESIGN Desenvolvimento de Website para

Apoio Ă Agricultores Familiares

Lucas Henrique Zeferino

UFPR | Curitiba | 2015

Trabalho de Conclusão do Curso de Design Gráfico, do Setor de Artes, Comunicação e Design da Universidade Federal do Paraná.

Professora Orientadora: Stephania Padovani

Lucas Henrique Zeferino UFPR | 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 Padovani Departamento de Design

André Battaiola Departamento de Design

Kelli Smythe Departamento 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, incentivaram e acreditaram desde o começo.

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.

"É um erro acreditar que é possível resolver qualquer problema importante usando batatas."

Douglas Adams

RESUMO O presente trabalho visa documentar o desenvolvimento 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 ���������������������������������������������15 2.1 - Agricultura Familiar ������������������������������������������������������������������������������������15 2.2 - Jovem Agricultor �����������������������������������������������������������������������������������������17 2.3 - Produtos Orgânicos na Agricultura Familiar �����������������������������19 2.4 - O uso do Computador e da Internet no Meio Rural ���������������21 2.5 - Internet e Web Design �����������������������������������������������������������������������������21 2.6 Usabilidade �������������������������������������������������������������������������������������������������������24 2.7 Design Visual ����������������������������������������������������������������������������������������������������26 2.8 - Flat Design ����������������������������������������������������������������������������������������������������30 2.9 - Acessibilidade ����������������������������������������������������������������������������������������������� 31

3-Processo de Design ������������������������������������������� 33

3.1 - Representação Gráfica ����������������������������������������������������������������������������� 34 Processo de Design �������������������������������������������������������������������������������������������� 34

4-Análise de similares ������������������������������������������ 37

4.1-Caracterização dos websites ������������������������������������������������������������������38 4.2-Avaliação dos websites ����������������������������������������������������������������������������� 53 4.3-Síntese dos Resultados �����������������������������������������������������������������������������58 4.4-Pontos Relevantes ��������������������������������������������������������������������������������������� 60

5-Pesquisa com Público Alvo ���������������������������� 61 5.1-Aplicação ������������������������������������������������������������������������������������������������������������61 5.2-Persona ���������������������������������������������������������������������������������������������������������������64

6-Diretrizes de Desenvolvimento ��������������������65 7-Arquitetura da Informação ��������������������������� 69

7.1-Rascunho da AI ������������������������������������������������������������������������������������������������72 7.2-Tree Testing ������������������������������������������������������������������������������������������������������� 74 7.3-Representação Gráfica da AI ����������������������������������������������������������������� 80 7.4-Detalhamento da Arquitetura da Informação ����������������������������82

8-Wireframe �������������������������������������������������������������85

8.1-Refinamento do Wireframe �������������������������������������������������������������������88 8.2-Grid �������������������������������������������������������������������������������������������������������������������� 100

9-Interface ����������������������������������������������������������������101 9.1-Nomenclatura �������������������������������������������������������������������������������������������������101 9.2-Logotipo �����������������������������������������������������������������������������������������������������������102 9.3-Pictogramas ��������������������������������������������������������������������������������������������������104 9.4-Estudo de Cor �����������������������������������������������������������������������������������������������105 9.5-Tipografia ���������������������������������������������������������������������������������������������������������106 9.6-Layout Visual ������������������������������������������������������������������������������������������������107

10-Conclusão ����������������������������������������������������������� 113 11-Bibliografia ��������������������������������������������������������� 115

11.1-Anexos ���������������������������������������������������������������������������������������������������������������� 119

TCC - WEBSITE

14

UFPR

AGRICULTURA FAMILIAR

1-Introdução Nasci 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 oportunidade de abordar esse público, os agricultores familiares.

O agricultor familiar foi escolhido pois o cenário agroeconômico brasileiro é 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 agricultura 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 quadro 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%

Quadro: Comparativo

(IBGE, 2006)

Além das estatísticas apresentadas no quadro acima, pode-se considerar 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 agricultor familiar é colocado em um contexto bem desfavorável, para o seu desenvolvimento.

LUCAS HENRIQUE ZEFERINO

15

TCC - WEBSITE

Portanto, objetivo deste TCC é desenvolver,

Entretanto, alguns websites se destaca-

a partir dos conhecimentos de design, um

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

website com as funções necessárias para

com", com uma estrutura bem construída,

esse pequeno agricultor.

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

Os objetivos específicos são: conhecer o público alvo e o eleger como agente cru-

Em seguida, foi realizado uma pesquisa

cial no desenvolvimento do projeto, bus-

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

car os problemas reais e propor soluções

necessidades dos agricultores e foi en-

palpáveis e desenvolver um layout visual

contrado uma série de problemas. Com

pensando na interatividade e definições

essas informações coletadas e análisadas,

proporcionados pelo discorrer do projeto.

listou-se as possíveis soluções para os problemas encontrados.

Pensando na participação do usuário, foi empregado "Caracterização Dos Níveis"

Fundamentado no resultados das pes-

de Garrett (2000) com o intuito de clas-

quisas, foi desenvolvido um rascunho da

sificar e estruturar o processo de design.

arquitetura da informação, que poste-

Para cada nível de projeto proposto pelo

riormente, foi testada via Tree Testing. Os

autor, foram levantados práticas de design

resultados deste teste foram positivos e

correspondentes, de acordo com a neces-

exigiram poucas mudanças, permitindo o

sidade do projeto.

desenvolvimento do wireframes, que são a base visual do website.

O processo de desenvolvimento, começou com uma análise de similares, seguindo as

Com o estudo detalhado destes wirefra-

recomendações de Padovani; Spinillo; Go-

mes, foi possível desenvolver a interface

mes (2009) com o objetivo de encontrar

do projeto, composta de pictogramas,

pontos positivos e negativos dos concor-

cores, tipografias, logotipo e layout final,

rentes do futuro website.

desta forma foi proposto como ficaria o projeto para uma futura implementação.

Contudo a análise evidenciou o panorama pouco desenvolvido dos websites voltados a agricultura, onde existem portais com poucos diferenciais e carentes de propostas mais inovadoras.

16

UFPR

AGRICULTURA FAMILIAR

2-Referencial Teórico 2.1 - Agricultura Familiar Todos os seres vivos necessitam de alimento, das mais variadas formas, e os seres humanos não fogem a essa regra, que segundo Carvalho (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 sobrevivê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 sociedade, 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 produtores[...] Em geral, são agricultores com baixo nível de escolaridade e diversificam os produtos cultivados para diluir custos, aumentar a renda e aproveitar as oportunidades de oferta ambiental 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).

LUCAS HENRIQUE ZEFERINO

17

TCC - WEBSITE

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

“Das 374 mil propriedades rurais no

fazendas que se baseiam principalmente

estado, 320 mil pertencem a agri-

em membros da família para o trabalho e

cultores familiares, o que representa

gestão[...]".

quase 90% dos trabalhadores em regime de agricultura familiar. O

Por histórico, a necessidade de gerar

Paraná tem uma expectativa de safra

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

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

dos centros urbanos esse tipo de agricul-

e mais de 50% do valor bruto da

tor tende a ter um nível de escolaridade

produção vem da agricultura familiar.

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

Temos um terço das terras agricultá-

mo assim, a sua profissão exige um teor

veis, e a maioria abaixo de 50 hecta-

de conhecimento alto, que por sua vez era

res, o que mostra a potencialidade

passado para cada pessoa por um agricul-

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

tor mais experiente, embora seja valoroso

segundo estado produtor de etanol,

esse tipo de aprendizado deixa pouco

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

espaço para inovação.

soja, com doze milhões de toneladas, o Paraná também é o segundo,

Contudo, existe uma evolução ainda re-

depois do Mato Grosso. A agricultura

cente das politicas públicas, que a partir

familiar responde por mais de um

da década de 90, foi observada com o

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

reconhecimento e criação de entidades

2008)

para o apoio a agricultura familiar. Entre algumas destas entidades, nasceu o PRO-

Entretanto, mesmo com parâmetros

NAF que é o Programa Nacional de Forta-

internos expressivos, vemos que o Brasil

lecimento da Agricultura Familiar criada

demonstra inferioridade em relação ao

em 1995 e a Secretaria da Agricultura

resto do mundo, percebe-se nos dados do

Familiar criada em 2003. Como resultado

infográfico produzido Fao (2014):

desta evolução em 2006 promulgou-se a Lei da Agricultura Familiar reconhecendo

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%

mesmo como profissão, a partir dai abrindo 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 brasileiros um que se destaca é o Paraná:

Quadro: Comparativo

18

UFPR

AGRICULTURA FAMILIAR

O Brasil ainda faz parte de uma parcela pequena mundial, como Guanziroli et al. (2001) expõe como a agricultura familiar teve um papel fundamental na estruturação econômica e social de países desenvolvidos 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. Contudo, 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 Agricultor Uma 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 fenômeno populacional foi causado pelo crescimento da indústria e vida urbana, pois o processo de mecanização do campo tirou

LUCAS HENRIQUE ZEFERINO

19

TCC - WEBSITE

vários postos de trabalho." (FRANCIS-

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

CO, 2011)

ruim para as próprias pessoas, pois neste período, aumentaram as favelas em quase

Esse êxodo começou no Brasil a partir de

todas as grandes cidades brasileiras. E o

1950 de onde veio em uma tendência de

autor complementa com:

crescimento que vemos retratados nos dados do Censo Demográfico do IBGE (2010).

"Para a agricultura familiar (e tam-

Veja o gráfico abaixo:

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 importantes 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; Facilidade para formar uma família; Disponibilidade, 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

Gráfico retirado de (CASTRO, 2013)

modo geral; Falta de serviços de internet,

Segundo Castro (2013) essa saída em

transporte e lazer de qualidade no campo;

massa de pessoas (especialmente jovens)

Rigor (dureza) do trabalho no campo. Mes-

20

UFPR

AGRICULTURA FAMILIAR

mo depois de ponderam nas vantagens e desvantagem de permanecer 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 negativo, 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 Unidas, "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 definiçã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 sistemas 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 alternativas para agricultura familiar, pois diante das culturas traducionais, o

LUCAS HENRIQUE ZEFERINO

21

TCC - WEBSITE

agricultor enfrenta grandes corporações com produções focadas na produção em

Apesar das dificuldades, no Brasil essa cul-

massa que barateia o preço final (mas por

tura tem uma taxa de crescimento muito

vezes diminui a qualidade), mas na pro-

alta em um total de 50% ao ano sendo

dução de orgânicos existem necessidades

superior aos Estados Unidos com 30% e

que não podem ser supridas pelos gran-

a União Europeia com 20%. De nossos

des produtores.

estados os maiores produtores: Paraná com 4.122 propriedades, Rio Grande do

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

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

manda deste produtos, atrai o pequeno

2.000 e São Paulo com 1.000 segundo

produtor para essa alternativa:

Fleury e Lima (2005)

"A agricultura orgânica tem-se desta-

O crescimento da agricultura orgâni-

cado como uma das alternativas de

ca reflete na economia, como mostra o

renda para os pequenos agricultores,

documento de Plano Agrícola e Pecuário

devido à crescente demanda mun-

2013/2014, do Ministério da Agricultura,

dial por alimentos mais saudáveis.

Pecuária e Abastecimento e Secretaria de

Entretanto, deve-se ponderar sobre

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

os diferentes fatores que podem con-

comercialização anual de produtos orgâni-

tribuir para o sucesso dos pequenos

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

agricultores nessa atividade" (CAM-

é um grande mercado a ser explorado

PANHOLA; VALARINI, 2001)

ainda mais.

Apesar de suas vantagens Campanhola

Contudo, é das característica do público

e Valarini (2001) também listam algumas

que consome produtos orgânicos bus-

dificuldades para se desenvolver como

car mais informações de o que comem,

agricultor de produtos orgânicos como:

prezando mais pela qualidade dos alimen-

Produção em pequena escala, instabilida-

tos e uma aliada é a internet, que tem o

de decorrente da baixa capacitação ge-

poder de divulgar os produtos do agricul-

rencial, escassez de pesquisa científica em

tor e informar o consumidor, criando essa

agricultura orgânica, falta de assistência

conexão mais facilmente.

técnica da rede pública, maior demanda de mão de obra, dificuldades financeiras encontradas durante o processo de conversã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 dificuldade de processamento dos produtos agropecuários,

22

UFPR

AGRICULTURA FAMILIAR

2.4 - O uso do Computador e da Internet no Meio Rural O computador e a internet foram marcos, e trouxeram uma revolução no exercício de muitos empregos, além de criar novas categorias. Mesmo 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 apresentou 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 expansão do acesso a internet no Brasil, que o número de adeptos aumente 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 (Tecnologia da Informação e Comunicação) pode contribuir para aumentar a produtividade, sendo que o alcance dos benefícios agrícolas e econô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 recentes 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 modalidade de trabalho tende a crescer, se modernizando em vários aspectos, por conta da demanda de produtos mais saudáveis e o crescimento do incentivo a categoria.

2.5 - Internet e Web Design O conceito de computador começa a se desenvolver na segunda guerra mundial onde por necessidade se refinar a interação do homem-computador para aumentar a eficácia dos ataques, com isso os engenheiros começaram a se preocupar mais com essa questão.

(MORAES, 2002).

LUCAS HENRIQUE ZEFERINO

23

TCC - WEBSITE

No final de outubro de 1957, durante a

possibilidade de interatividade mais imer-

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

siva e na adaptatividade dos sites, além de

sucesso o primeiro satélite na órbita da

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

Terra, chamado “Sputnik 1” o qual chocou

transições, filtros e gradientes (HYPERAKT;

o mundo. Como resultado levou o Estados

VIZZUALITY, 2012).

Unidos a criar a ARPA (Agência de Projetos de Pesquisa Avançada), para acelerar

Para essas tecnologias funcionarem, ne-

mais ainda a corrida tecnologia da época,

cessitava-se uma forma de acessar todos

e um dos seus projetos mais famosos foi a

esses dados, e, assim, nasceram os nave-

internet. (FRANCIS, 2008)

gadores, também conhecido pelos termos em inglês web browser ou simplesmente

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

browser, e dentre os vários que existem os

da pelos militares para transmitir informa-

mais famosos foram: Mosaico em 1993 o

ções e pelas universidades acelerando e

primeiro navegador, o NetScape e o Opera

disseminação de pesquisas acadêmicas.

em 1995, o Internet Explorer em 1996 ,

Mas a internet como conhecemos hoje

em 2002 o Safari, 2004 o Firefox, que é

nasceu com a criação do "World Wide

um navegador criado de forma indepen-

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

dente pelos próprios usuários e em 2008

que foi desenvolvido de 1980 a 1991 e

o Chrome, hoje sendo o navegador mais

adotado pelo CERN (Organização Euro-

usado no mundo, em pesquisas feita pela

peia para a Pesquisa Nuclear) que foi a

Pingdom (2013).

responsável pelo seu desenvolvimentismo (SONNY, 2006).

Junto com essa evolução, nasceu uma especificação do design, conhecido como

Com seu crescente uso doméstico, a

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

internet começou a tomar grandes pro-

terminar, Jeffrey Zeldman propõem tal

porções, surgindo assim, necessidade de

definição :

desenvolver linguagens para os diferentes usos, como: HTML, que surgiu em 1992 e é

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

umas dar principais linguagens de pro-

tes digitais que facilitam e incenti-

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

vam a atividade humana, reflete ou

quinta versão; em 1996 com a plataforma

adapta-se a vontades individuais e

JAVA, com a possibilidade de miniaplicati-

conteúdos; e muda graciosamente

vos rodando direto das páginas do websi-

ao longo do tempo enquanto man-

te; FLASH em 1997 com a possibilidade de

tém a sua identidade" (ZELDMAN,

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

2007).

a adição de animação,vídeo e interatividade nas páginas; e mais atualmente em

Por esta definição, um conceito de web

2009, o CSS3 que revolucionou trazendo a

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

24

UFPR

AGRICULTURA FAMILIAR

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 funcionando: o web designer. Para Santos (2009) o papel do web designer se divide em três principais áreas: • Criador: concepção e o desenvolvimento de páginas Web; • Auditor: colabora no levantamento de requisitos no desenvolvimento 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 primeira 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 apurado 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 serviços para que sejam reutilizados por outros. Reutilize dados e serviços de outros sempre que possível.

LUCAS HENRIQUE ZEFERINO

25

TCC - WEBSITE

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

Assim tomo o conselho de Tidwell (2010):

co dispositivo - não pense em aplica-

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

tivos que estão no cliente ou servidor,

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

mas desenvolva aplicativos que estão

ocorram em relação ao desenvolvimento

no espaço entre eles.

de um website é essencial o conhecimento em usabilidade, que tratarei mais no

• Lei da Conservação de Lucros, de

próximo capitulo.

Clayton Christensen - lembre-se de que em um ambiente de rede, APIs abertas e protocolos padrões vencem, mas isso não significa que a

2.6 Usabilidade

ideia de vantagem competitiva vá

“...significa apenas o assegurar que algu-

embora.

ma coisa funciona bem: que uma pessoa de média (ou mesmo abaixo da média)

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

habilidade e experiência pode utilizar

mais importante entre as futuras

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

fontes de fechamento e vantagem

ficar irremediavelmente frustrado”. (KRUG,

competitiva serão os dados, seja

2000)

através do aumento do retorno sobre dados gerados pelo usuário, sendo

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

dono de um nome ou através de

a ligação inerente que usabilidade tem

formatos de arquivo proprietários."

com o Design Centrado no Usuário, visto

(OREILLY, 2006)

que ambos tem como parte do processo ter o usuário no centro dos decisões. E

Embora tudo isso seja de certa forma ino-

como diz Ribeiro (2012) um sistema que

vador, esta questão já é discutida desde

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

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

gir servirá melhor as suas necessidades,

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

aumentando a compreensão, a eficiência

os custos destes estudos; a necessidade

e a eficácia e diminuindo a possibilidade

de pessoal especializado na área; a pura e

de frustração. O que torna o resultado

simples falta de tempo ou a errada pre-

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

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

e agradável aos usuários.

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

Alguns web designers tem a tendência de

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

esquecer o usuário e acabam confiando

existe outros tipos de práticas de design

em sua própria experiência, mas acaba

como: Design Centrado no Sistema, De-

que não necessariamente o projeto será

sign Centrado na Empresa, Design Centra-

visto da mesma maneira pelo usuário.

do na Tecnologia e um que é menos recorrente, o Design Centrado no Conteúdo.

26

UFPR

AGRICULTURA FAMILIAR

Independente de qual processo é usado, o web site deve ser amigo 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 simultaneamente, 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 aprendizagem pouco acentuada será necessariamente mais rápido de utilizar, e

LUCAS HENRIQUE ZEFERINO

27

TCC - WEBSITE

o usuário irá realizar de forma eficiente as

A partir daí, o autor delimita algumas

tarefas ou ações pretendidas, sejam estas

diretrizes:

comprar um produto ou consultar uma informação.

• Os usuários não leem os textos cuidadosamente;

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

• Nos primeiros dois parágrafos de-

sites onde se observam elevadas ocorrên-

verá estar a informação mais impor-

cias de erros tendem a ser rapidamente

tante;

trocados por outros que proporcionem

• Os títulos e os parágrafos devem

ao usuário a possibilidade de realizem a

começar com as palavras que trans-

tarefa com maior sucesso e rapidez.

mitem informação realmente importante, uma vez que os utilizadores

5. Satisfação do utilizador: Uma interface

irão notar quando examinarem para

de sucesso é aquela que os utilizadores

baixo o lado esquerdo do conteúdo."

utilizam com prazer e satisfação, embora

(NIELSEN, 2006)

a satisfação seja um fator bastante subjecContudo, para que o usuário tenha uma

tivo.

experiência agradável, e necessário além E em um estudo de Nielsen (2006) cha-

de os conceitos de usabilidade implemen-

mado "F-Shaped Pattern" demonstrou um

tados, um bom projeto gráfico, assunto

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

que irei abordar a seguir.

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 movimentos 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 movimento vertical. " (NIELSEN, 2006)

2.7 Design Visual Para um website funcionar perfeitamente, um projeto gráfico eficiente é indispensá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 evidencia 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-

28

UFPR

AGRICULTURA FAMILIAR

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 horizontais para separar o conteúdo, forma de feedback e dar enfase nos títulos.

FORMA A forma se refere ou contorno externo de desenho 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 aparê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 filme "Grande Hotel Budapeste", nele é usado uma textura de papel, simulando um arquivo policial.

LUCAS HENRIQUE ZEFERINO

29

TCC - WEBSITE

ESPAÇO

PALHETA DE COR

É a distância entre formas, mas em web

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

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

quais escolher e de que forma usá-las vai

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

ter grande influencia no produto final do

que é nulo de elementos visuais.

projeto.

Como exemplar de espaço apresento o

Como no website "storyoftheweb.org.uk"

website "http://exhibitions.guggenheim.

que usa a cor para representar cada ses-

org" que trabalho com muito espaço em

são do site.

branco para sua navegação. " Uma vez que o conceito é formalTAMANHO

mente realizado, eles terão de ser

É a escala que cada objeto vai ter no

aplicados. Os princípios de design-

layout, ela serve para criar uma hierarquia

equilíbrio, ênfase, ritmo, unidade e

das informações, fazendo parte da linha

contraste -Defina o fundamento es-

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

trutural de um projeto e determinar

Como no website " blackestate.co.nz" que

como os vários elementos do projeto são organizados dentro da página web." (RESNICK, 2012) Seguindo as definições da autora, temos os princípios para design visual de website: EQUILÍBRIO Quando distribuímos igualmente os elementos de design na página. E pode

abusa de grandes imagens e títulos para

ser caracterizado como de duas formas:

seu layout.

simétrico e assimétrico. Sendo o simétrico quando o layout se propõem a ter os dois lados iguais, sugerindo um movimento

30

UFPR

AGRICULTURA FAMILIAR

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 é chamado 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 importância para sua experiência destro da plataforma.

UNIDADE Esse princípio é obtido quando todos os elementos do website se relacionam 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á sentido para o espectador.

CONTRASTE Constituído pelas diferenças visuais de tamanho, forma e cor dos elementos. Tem como objetivo melhorar a percepção diante das mensagens do website. Podendo ser um ponto fundamental de acessibilidade.

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.

LUCAS HENRIQUE ZEFERINO

31

TCC - WEBSITE

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, mudando o jeito que se fazia web design.

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 entendimento do usuário, pois permitindo-lhes aplicar algum conhecimento prévio sobre a interface.

Mas antes de desenvolver o que é o Flat Design, irei explorar um pouco de quais estilos vieram antes dele.

A simulação de tridimensionalidade, esteve presente nas primeiras interfaces feitas para o público geral. As sombras, gradientes 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.

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 design, mas sem o apelo da metáfora que o

Skeuomorphism tem.

Imagem do botão do Windows 95

Entre tando como diz Meyer (2015) "[...] o efeito pseudo3D nestes primeiros GUIs tendem a ser agressivos, exagerado, e visualmente perturbador."

Com o desenvolvimento da capacidade dos computadores e da internet, de sur-

32

UFPR

Em um documento oficial da Microsft sobre o que era proposto como o Windows 8, Clayton (2010) declara o Flat Design como "autenticamente digital", frase que para muitos designers representa perfeitamente esse estilo.

AGRICULTURA FAMILIAR

Mas com uma visão mais purista, Meyer (2015) traz outra definição: "Flat Design é um estilo popular de projeto que é definida pela ausê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, entender, 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

LUCAS HENRIQUE ZEFERINO

33

TCC - WEBSITE

que seu projeto pode chegar. Para isso, irei

Enquanto o para um texto normal em

delimitar algumas diretrizes para acessi-

forma normal é #757575:

bilidade que irai aplicar em meu projeto, seguindo o artigo de Jesse Hausler: "7 Things Every Designer Needs to Know about Accessibility".

Eu Sou Um Texto Pequeno.

Logos ou elementos atualmente em um

COR

estado desativado estão isentos desta

Atualmente 1 em 12 homens e 1 em cada

norma. Isso inclui botões inativos ou itens

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

de menu.

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

FOCO VISUAL PARA TECLADO Para quem navega somente com o te-

tomar providencias para auxiliá-las em

clado é importante que o a forma que

meu projeto.

é utilizada para indicar a seleção esteja evidente.

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.

ITENS CLICÁVEIS Para pessoas que usam o teclado ou software de reconhecimento de fala , eles precisam que exista um link clicável na

CONTRASTE

tela para funcionar, por isso tudo que for

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

assim, deve estar visível.

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 Contrast Checker (http://webaim.org/resources/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.

34

UFPR

AGRICULTURA FAMILIAR

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 centrado no usuário.

Na etapa inicial nomeada como "Estratégia" visa conhecer e desdobrar as necessidades do público e definir diretrizes bases para a execuçã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 desenvolvimentos 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 envolvendo, wireframe, grid, tipografia, cores, identidade visual e pictogramas, deixando os teste de usabilidade e refinamento para a fase de implementação. (NIELSEN, 1993)

LUCAS HENRIQUE ZEFERINO

35

TCC - WEBSITE

ETAPAS DO PROCESSO DE DESIGN

CARACTERIZAÇÃO DOS NÍVEIS (Garrett, 2000)

3�1 - Representação Gráfica Processo de Design

36

UFPR

ESTRATÉGIA

ESCOPO

ES

Necessidades do usuário

Especificações Funcionais

Des Inte

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.

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

Des dese fluxo facili usuá este func

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

Arq Info estru infor o ac cont

Identificação dos requisitos/oportunidades do sistema

Frag cont

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

Análise de similares

Entrevistas Brainstorming

Detalhamento das funcionalidades do sistema

is:

s ite

: o te

AGRICULTURA FAMILIAR

ESTRUTURA

ESQUELETO

SUPERFÍCIE

Design de Interação

Design da Interface e Design da Informação

Design Visual

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

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

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

Fragmentação do conteúdo

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 orientado à tarefa: Tratamento gráfico dos elementos da interface (a “cara” do site) Design Visual orientado à informação: Tratamento visual do texto, elementos gráficos da página e componentes de navegação

Definição da arquitetura da informação

Nielsen, 1995

Tree testing

REFINAMENTO

PROTOTIPAGEM

TESTE DE USABILIDADE

ANÁLISE RESULTADOS

cio-

LUCAS HENRIQUE ZEFERINO

37

TCC - WEBSITE

Nas etapas do processo de design foram

FRAGMENTAÇÃO DO CONTEÚDO

selecionadas determinadas práticas, con-

Após ter as funcionalidades descritas de

forme cada níveis e requisitos do projeto:

forma básica, listei como o website funcionaria em relação ao conteúdo aplicado

ANÁLISE DE SIMILARES

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

Analise de similares é um bom meio de

tes de informação. Para tornar o website

começar um projeto, pois analisando os

mais palpável para futura implementação.

concorrentes é possível encontra brechas que mercado que podem ser preenchi-

DEFINIÇÃO DA ARQUITETURA DA INFOR-

das, além disto, evidenciar erros e acertos

MAÇÃO

que podem ser evitados ou implementa-

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

dos.

quitetura da informação começa a estruturar como será a interatividade entre as

ENTREVISTAS

páginas e como será a hierarquia empre-

Com a bagagem de o que já existe no

gada. Após isso um Tree Testing que ira

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

revelar possíveis erros na arquitetura da

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

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

entrevista foi escolhido, com o objetivo

do, pois tratar puramente da organização

é conseguir dialogar de maneira menos

e entendimento da informação.

formal das situações que os agricultores passam.

NIELSEN, (1995) Sendo essa a ultima etapa, usei a meto-

IDENTIFICAÇÃO DOS REQUISITOS/OPOR-

dologia de Nilsen para desenvolver um

TUNIDADES DO SISTEMA

layout partindo do wireframe do site.

A partir dos dados retirados na análise

Enquanto, o teste de usabilidade e refina-

de similares e entrevistas, foi necessário

mento serão realizados na oportunidade

identificar as necessidades do usuário que

de uma implementação real do projeto.

o projeto abordou e quais seriam possíveis soluções.

BRAINSTORMING E DETALHAMENTO DAS FUNCIONALIDADES DO SISTEMA O brainstorming foi o método utilizado para desenvolver as funcionalidades iniciais do projeto, criando os primeiros conceitos a serem empregados no website. Com o objetivo, que desenvolver ferramentas novas, mas que suprissem as necessidades dos usuários

38

UFPR

AGRICULTURA FAMILIAR

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 importância, foram: » Suporte » Proximidade como o tema.

Percebe-se na pesquisa inicial dos sites, uma falta de conteúdo nacional, 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 Stephania 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 arquitetura 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 – superfície, a análise do design visual.

E a segunda etapa é a avaliação do website, nela é aplicado as mesmas 5 categorias da etapa anterior, mas agora julgando o website, respondendo cada pergunta com, sim, não ou não se aplica.

LUCAS HENRIQUE ZEFERINO

39

TCC - WEBSITE

4�1-Caracterização dos websites

1

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

Portal Orgânico

www.portalorganico.com.br Pessoas 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 informação sobre a produção, comercialização e preparação de produtos orgânicos. Sendo de notícias e de informação. Tendo a sua adaptatividade em forma de sugestão de outros post relacionados. Com gestão

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

de erro presente.

údo em uma galeria ou filtrar por tipo de publicação e sua forma de apresentação.

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

40

UFPR

Nível 2 – Escopo Os principais assuntos abordados são: Pro-

AGRICULTURA FAMILIAR

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 arborescê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 botõ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á visitada 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

LUCAS HENRIQUE ZEFERINO

41

TCC - WEBSITE

transição. Algumas características tipo-

maior para exaltar alguma informação.

gráficas do site é ser todo construído com Helvética, usando na maioria um tom de

O website mantem a sua identidade visual

cinza escuro em contrate com o fundo

pela cor predominante ser a mesma da

branco e é usado o uma aspas antes dos

marca e do uso exclusivo de tipografia

títulos. Os artigos e banners do site usam

sem serifa.

exclusivamente fotografias.

Paleta de cores: Principalmente Verde e As características dos elementos esque-

branco.

máticos é em geral aparece para separar os conteúdos linhas pontilhadas na horizontal e linhar verticais com espessura

Retirado via "color.adobe.com"

2

Representação do website www.agweb.com

AG WEB www.agweb.com Responsável: Farm Journal Media Ultima data atualizada: 28 de maio de 2015

42

UFPR

AGRICULTURA FAMILIAR

Nível 1 – Estratégia 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.

Nível 3 – Estrutura O tipo de arquitetura da informação é sequencial, o Nível de arborescência é 7x3, 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 poucas 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

LUCAS HENRIQUE ZEFERINO

43

TCC - WEBSITE

redes sociais.

artigos e banners do site usam exclusivamente fotografias. E na previsão do tempo

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

é usado ilustrações realistas para a repre-

clicáveis mostra-se que na maioria dos

sentação do clima.

casos é apresentado em forma de mudança do cursor, somente nos menus

As características dos elementos esque-

que troca a cor do fundo e da fonte onde

máticos é usado linhas acima dos títulos

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

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

do usuário é usado menu breadcrumb,

tom de cinza no fundo para evidenciar os

além do menu principal se manter fixo e

blocos de informação.

selecionado qual sessão o usuário está, e para reforçar isso de uma maneira não

O website mantem a sua identidade visual

textual está presente no titulo do artigo

pela cor predominante ser a mesma da

que muda de cor conforme qual menu ele

marca e do uso exclusivo de tipografia

está interligado.

sem serifa.

Feedback ao acionar área clicável, sinaliza-

Paleta de cores: Principalmente branco e

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

cinza, com detalhes de várias cores.

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

Nível 4b – Esqueleto Retirado via "color.adobe.com"

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 transição. Algumas características tipográficas do site é ser todo construí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

44

UFPR

AGRICULTURA FAMILIAR

3

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

IYFF+10

http://www.familyfarmingcampaign.net/en/home Responsável: IFAD - Fundo Internacional de Desenvolvimento Agrícola Ultima data atualizada: 15 de maio de 2015

Nível 1 – Estratégia 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 adaptatividade. 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

LUCAS HENRIQUE ZEFERINO

45

TCC - WEBSITE

de eventos e ter acesso a links uteis,

Nível 3 – Estrutura

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

O tipo de arquitetura da informação é

artigos e banners do site usam exclusiva-

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

mente fotografias. E pictogramas para os

utilizando um modelo convencional de

temas de cada post. As características dos

conceito com um portal/blog e a principal

elementos esquemáticos é usado linhas

modo de diálogo é menus.

a baixo dos títulos seguindo seu padrão

Nível 4a – Esqueleto

de cor. Linhas pontilhadas para separar os itens do calendário.

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

O website mantem a sua identidade visual

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

pela cor predominante ser a mesma da

veis, na maioria do site é usado texto, mas

marca e do uso exclusivo de tipografia

existe banners com imagens.

sem serifa.

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

Paleta de cores: Principalmente branco,

cáveis mostra-se que na maioria dos casos

verde e azul.

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

Nível 4b – Esqueleto Contem uma malha de diagramação por nível hierárquico, com 3 tipos de malha. A rolagem é na vertical, com uma proporção de 1366x2569 pixels.

Nível 5 – Superfície Recursos audiovisuais não são utilizados, estando presente somente os recursos visuais, como textos e imagens estáticas. Al-

46

UFPR

Retirado via "color.adobe.com"

AGRICULTURA FAMILIAR

4

OTA - Organic

Representação do website www.ota.com

https://www.ota.com/ Responsável: OTA - The Organic Trade Association Ultima data atualizada: 09 de maio de 2015

Nível 1 – Estratégia 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 associado da OTA. E funções que o usuário pode fazer: Ler notícias e colunas,

LUCAS HENRIQUE ZEFERINO

47

TCC - WEBSITE

compartilhar os posts via redes sociais, ver o calendário de eventos, se inscrever na associação, enviar um e-mail para contato.

Nível 3 – Estrutura O tipo de arquitetura da informação é sequencial, o Nível de arborescência é 11x4, 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 entrepaginas. Em relação as areias clicáveis, na maioria do site é usado texto, mas existe banners com imagens e pictogramas para redes sociais e para compartilhar posts.

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 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á visitada e ferramentas de auxílio à navegação inexistentes.

Nível 4b – Esqueleto Contem uma malha de diagramação por nível hierárquico, com 2 tipos de malha. A rolagem é na vertical, com uma proporção de 1366x2569 pixels.

48

UFPR

Nível 5 – Superfície Recursos audiovisuais não são utilizados, estando presente somente os recursos 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áticos é usado duas barras "//" para separar os títulos do menu .

O website mantem a sua identidade visual 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.

AGRICULTURA FAMILIAR

5

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

Agriculture�gov http://www.agriculture.gov.ie/ Responsável: Department of Agriculture, Food and the Marine Ultima data atualizada: 13 de julho de 2015

Nível 1 – Estratégia 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 adaptatividade, 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.

LUCAS HENRIQUE ZEFERINO

49

TCC - WEBSITE

Nível 3 – Estrutura O tipo de arquitetura da informação é sequencial, o Nível de arborescência é 10x1, 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 entrepaginas. Em relação as areias clicáveis, na maioria do site é usado texto, mas existe poucas fotos.

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 e no menu a troca de cor do link, em alguns casos o link fica sublinhado. 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.

Nível 4b – Esqueleto Contem uma malha de diagramação por nível hierárquico, com 2 tipos de malha. A rolagem é na vertical, com uma proporção de 1366x2569 pixels.

Nível 5 – Superfície Recursos audiovisuais não são utilizados, estando presente somente os recursos visuais, como textos e imagens estáticas.

50

UFPR

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 elementos esquemáticos é usado uma barra "|" para separar os títulos do menu, pictogramas 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.

AGRICULTURA FAMILIAR

6

Representação do website www.agriculture.com

Agriculture�com http://www.agriculture.com/ Responsável: Meredith Corporation Ultima data atualizada: 17 de julho de 2015

Nível 1 – Estratégia 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 configurações da conta. Recurso de adaptatividade presente 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

LUCAS HENRIQUE ZEFERINO

51

TCC - WEBSITE

detalhes sobre o clima na sua região, participar , perguntar e responder de discus-

de 1366x2569 pixels.

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

Nível 5 – Superfície

Nível 3 – Estrutura

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

O tipo de arquitetura da informação é

visuais, como textos e imagens estáticas

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

e pictogramas. Algumas características

utilizando um modelo convencional de

tipográficas do site ser construído com os

conceito com um portal/blog e a principal

títulos em Trade Gothic e o corpo do site

modo de diálogo é menus.

em Arial, variando entre as cores cinza,

Nível 4a – Esqueleto

branco e vermelho. Não tem banners. As características dos elementos esquemáticos é usado uma barra "|" para separar al-

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

guns títulos, pictogramas para os contatos

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

e caixas de cor para separar os conteúdos

veis, na maioria do site é usado texto, mas

da home.

existem fotos para notícias e vídeos, e pictogramas para as redes sociais.

O website mantem a sua identidade visual pela cor predominante em todo site.

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

Nível 4b – Esqueleto Contem uma malha de diagramação por nível hierárquico, com 3 tipos de malha. A rolagem é na vertical, com uma proporção

52

UFPR

Paleta de cores: Branco e vermelho.

AGRICULTURA FAMILIAR

7

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

Ministério do Desenvolvimento Agrário http://www.mda.gov.br/ Responsável: Ministério do Desenvolvimento Agrário Ultima data atualizada: 16 de julho de 201

Nível 1 – Estratégia 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 contraste 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.

LUCAS HENRIQUE ZEFERINO

53

TCC - WEBSITE

Nível 3 – Estrutura O tipo de arquitetura da informação é sequencial, o nível de arborescência é 13x2, 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 entrepaginas. Em relação as areias clicáveis, na maioria do site é usado texto, mas também é empregado fotos para o banners, notícias e vídeos, e pictogramas para 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 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.

Nível 4b – Esqueleto Contem uma malha de diagramação por nível hierárquico, com 2 tipos de malha. A rolagem é na vertical, com uma proporção de 1366x2569 pixels.

Nível 5 – Superfície Recursos audiovisuais não são utilizados, estando presente somente os recursos visuais, como textos e imagens estáticas,

54

UFPR

pictogramas e banners com animação. Algumas 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 caracterí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".

O website mantem a sua identidade visual pela cor predominante em todo site.

Paleta de cores: Branco e verde.

AGRICULTURA FAMILIAR

4.2-Avaliação dos websites Para essa avaliação, será usado quadros comparativos entre os site, para desenvolver cada aspecto de deles, levando em conta o concorrente.

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

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

Portal Orgânico

AG WEB

IYFF +10

OTA

Agriculture. gov

Agriculture.com

MDA

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

0

0

0

0

0

1

1

O website previne a ocorrê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 acessá-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

3,5

4

1

3,5

2,5

4,5

2

TOTAL

LUCAS HENRIQUE ZEFERINO

55

TCC - WEBSITE

Tabela nº2 de avaliação - Escopo Portal Orgânico

AG WEB

IYFF +10

OTA

Agriculture. gov

Agriculture.com

MDA

1

1

0,5

1

1

0,5

0,5

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 terminologia do usuário, evitando 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

4,5

5

5,5

4,5

4,5

4,5

3

Portal Orgânico

AG WEB

IYFF +10

OTA

Agriculture. gov

Agriculture.com

MDA

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 mutuamente excludentes?

1

1

1

1

1

1

1

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

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

TOTAL

Tabela nº3 de avaliação – Estrutura

56

UFPR

AGRICULTURA FAMILIAR

A classificação de informaçõ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 transformam em links todas as palavras-chave que se relacionam com os menus/ categorias do website)?

1

0

1

1

0

1

0

0,5

1

0,5

1

0

1

0,5

5

4,5

5

6,5

2,5

7

3,5

Portal Orgânico

AG WEB

IYFF +10

OTA

Agriculture. gov

Agriculture.com

MDA

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 claramente 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 à navegaçã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

O estilo de diálogo predominante é simples e intuitivo?

TOTAL

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

LUCAS HENRIQUE ZEFERINO

57

TCC - WEBSITE

As informações se complementam 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ânico

AG WEB

IYFF +10

OTA

Agriculture. gov

Agriculture.com

MDA

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é estã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 localizaçã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

0,5

0,5

0,5

1

0,5

1

0

1

1

1

1

1

1

1

4,5

5

6,5

7

6,5

7

4

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

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

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

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

TOTAL

58

UFPR

AGRICULTURA FAMILIAR

Tabela nº5 de avaliação – Superfície Portal Orgânico

AG WEB

IYFF +10

OTA

Agriculture. gov

Agriculture.com

MDA

O design gráfico evidencia as relações hierárquicas em cada página e a estrutura 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 escolhida é 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 majoritariamente 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 existentes) 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 selecionadas 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

0,5

1

0,5

1

0,5

0,5

0

8,5

10,5

9,5

11

9

10

8,5

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

TOTAL

LUCAS HENRIQUE ZEFERINO

59

TCC - WEBSITE

Para criar algo mais palpável, usando a

está presente em forma de erro e conclu-

forma de métrica que foi aplicada, para

são de uma tarefa.

criar uma nota geral para cada website, que consiste em somar as notas e desco-

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

brir a media, dividindo elas pelo número

lham com prevenção de erros, mas as

de questões avaliadas:

mensagens de erro não são tão claras. Os dispositivos de busca são satisfatórios e

Portal Orgânico: 6,4

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

AG WEB: 7,0

existe em nenhum site avaliado.

YFF+10: 5,6 OTA: 7,1

NÍVEL 2 - ESCOPO

Agriculture.gov: 6,0

Na parte de caracterização o assunto prin-

Agriculture.com: 7,5

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

MDA: 5,1

que mais apareceu foi de ler notícias e artigos,

A partir destas notas podemos estabelecer um objetivo de reavaliar o projeto no

Enquanto, a avaliação evidenciou que os

período de implementação e conseguir

sites estão bem neste quesito, providen-

uma nota maior que 8, para julgar satisfa-

ciando as informações necessárias nas

tório.

tarefas, não existindo repetição de elementos, com textos sucintos, econômico

4.3-Síntese dos Resultados

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

Na sínteses dos resultados, eu demonstro

NÍVEL 3 - ESTRUTURA

quais foram os principais pontos de cada

A caracterização é geralmente formada

nível de analise. No primeiro parágrafo

pela arquitetura da informação sequen-

de cada nível retrata a parte de caracteri-

cial, com o modelo de portal/blog e o

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

principal modo de dialogo é por via de

parte de avaliação.

menus. A arborescência é larga.

NÍVEL 1 - ESTRATÉGIA

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

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

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

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

tem categorias são mutualmente exclu-

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

dentes e em 3 de 7 possuem uma forma

dade mais comum é o de sugerir páginas

de dialogo simples e intuitiva.

relacionadas. O modo comum de busca é por meio de palavras-chave. O feedback

60

UFPR

2 de 7 tiveram um número de conceitos na página adequado.

AGRICULTURA FAMILIAR

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 navegaçã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 rolagem 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 estática. Entretanto, nenhum website destaca palavras importantes do texto e apenas 1 evita uso de animações de forma gratuita.

LUCAS HENRIQUE ZEFERINO

61

TCC - WEBSITE

tipografia é usado nos textos longo o cin-

4.4-Pontos Relevantes

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

Levando em conta os resultados vou le-

dela deve ser bem aplicada, buscando se

vantar mais os pontos e conclusões mais

diferenciar dos diferenciais

relevantes para o projeto.

FUNCIONALIDADES RELEVANTES • Percebe-se um padrão deste ramo,

Para levantar alguns funcionalidades

terem sites informativos com noticias.

encontradas nas amostras que podem ser

no formato de blog, com isso é desejável

implementadas no projeto.

se manter na mesma linha, mas fugir do modelo convencional de blog, para de

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

destacar.

rios, • Salvar seu conteúdo favorito,

• Implementar opções de acessibilidade

• Calendário de eventos.

preventivas, oferecer mais ferramentas de

• Cadastrar seus produtos e serviços.

ajuda ao usuário, e criar uma busca com

• Fórum para os agricultores

filtros mais voltados a real utilização.

• Vídeos Explicativos para auxílio • Opção de ter leitura em áudio no próprio

• 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 animações que ajudem ao usuário.

• Em geral a arquitetura da informação é larga em comprimento e rasa em profundidade. 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

62

UFPR

site.

AGRICULTURA FAMILIAR

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, obtendo resultados inesperados e possíveis interessantes para o desenvolvimento 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 LUCAS HENRIQUE ZEFERINO

63

TCC - WEBSITE

Já passou com isso ?

Você conversa e troca informações com outros agricultores?

As culturas com maior incidência são: HorQuando precisa de orientação onde vai

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

buscar isso ?

o interesse dos agricultores de aprender novos tipo de cultura.

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 relevantes retirados da entrevista:

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ônomo ou outros agricultores.

9 de 10 pessoas foram homens, entretanto grande parte deles eram casados e suas parceiras ajudam na cultura.

Diante dos preços do mercado, os entrevistados, 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 tabaDos 10 entrevistados, 9 tem idade abaixo

co a gente trabalha por tabela, mas

de 50 anos. Em geral possuem filhos entre

em geral temos uma média, que

10~20 anos, que são potenciais agricultores

tentamos alcançar durante a safra e

e mais atuantes na internet que seus pais.

se está muito abaixo a gente reclama com o comprador."

Simão, Agricultor.

64

UFPR

AGRICULTURA FAMILIAR

O maior problema presente no discurso dos entrevistados são climáticos, e dependendo do tamanho da safra, dificulta muito ações preventivas. 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.

Algumas ideias dadas pelos entrevistados para um site para o agricultor 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.

LUCAS HENRIQUE ZEFERINO

65

TCC - WEBSITE

5.2-Persona E a partir dos dados coletados nas entrevistas 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 compreendida. Para isso seguei as diretrizes descritas por Facca (2012).

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 ensinaram a profissão. Ele terminou o ensino médio pois seus pais valorizavam o estudo. Hoje ele é casado com Fernanda Ferreira 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.

66

UFPR

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.

AGRICULTURA FAMILIAR

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 escassez 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 cultura 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.

LUCAS HENRIQUE ZEFERINO

67

TCC - WEBSITE

ESPECIFICAÇÕES FUNCIONAIS

"F-Shaped Pattern".

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

• Ser um site responsivo, ou seja, se

guagem coloquial.

adaptar ao meios de suporte. Pois

• Prevenir a ocorrência de erros.

na pesquisa se usuário, uma parcela

• Paginas curtas

considerável navegava na internet via

• Posicionar as ações das tarefas de

dispositivos móveis.

forma lógica.

• Ter um ferramentas de auxílio, para tirar as dúvidas do usuário, em

DESIGN VISUAL

tarefas disponibilizar instruções. Por se trata, parcialmente, de um públi-

• Manter a identidade visual do site

co de pouca experiência com meios

em todas as páginas.

digitais.

• Proporcionar feedback aos coman-

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

dos do usuário.

preço de mercado das principais

• Seguir as diretrizes para acessibili-

culturas.

dade para o layout.

• Calendário com os eventos de inte-

• Desenvolver o projeto visual seguin-

resse do usuário.

do a estética do Flat Design 2.0

• Noticias e artigos de especialistas.

• O usuário ter um conta, onde poderá, 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 contatações de Nilsen (2006) no estudo

68

UFPR

6.1-Fragmentação de Conteúdo Para o site funcionar como um todo, precisa 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 retirados do site oficial do ministério da agricultura (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 Pesquisas Espaciais (http://agricultura.cptec.inpe.

AGRICULTURA FAMILIAR

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.

LUCAS HENRIQUE ZEFERINO

69

TCC - WEBSITE

70

UFPR

AGRICULTURA FAMILIAR

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 construí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: "Arquitetura 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, abordei 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

LUCAS HENRIQUE ZEFERINO

71

TCC - WEBSITE

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

do o primeiro esboço de como o website

za interdependente de usuários,

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

conteúdo e contexto dentro de um

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

complexo, adaptável ecologia da

conteúdo na arquitetura da informação,

informação. Em suma, precisamos

segue abaixo:

entender os objetivos de negócios por trás do site e os recursos dispo-

• FÓRUM:

níveis para o projeto e implemen-

Criar um tópico.

tação. Precisamos estar cientes da

Responder.

natureza e volume de conteúdo que

Curtir/desaprovar.

existe hoje e como isso pode mudar de um ano a partir de agora. E nós

• NOTÍCIAS E ARTIGOS:

temos que aprender sobre as neces-

Comentar.

sidades e comportamentos de busca

Favorita.

de informação dos nossos principais

Compartilhar.

públicos." (MORVILLE; ROSENFELD, 2006)

• CALENDÁRIO DE EVENTOS: Procurar por data/tipo/região.

No contexto o website que projetei será

Ver eventos futuros e dados mais precisos.

informativo mas abordando a informação

Programar aviso.

de forma interativa, visando a facilitação do uso e do entendimento, pois os agricul-

• INFORMAÇÃO DE PLANTAS:

tores familiares são menos favorecidos de

Ver a ficha técnica.

informação digital, portanto com menos

Melhores regiões para plantio.

experiência também.

Ver melhores condições de plantio características, preço de mercado.

Financeiramente os recursos para manter o website seria de ordem governamental,

• PÁGINA DO AGRICULTOR

com a possibilidade de ser um ponto de

Ver e buscar contatos dos produtores.

exposição do PRONAF (Programa Nacional de Fortalecimento da Agricultura

• CONTA DO USUÁRIO:

Familiar), tendo assim o seu conteúdo em

Cadastrar produtos/produtores.

parte gerando para o próprio website.

Ter funções personalidades em outras ferramentas do site.

Agora agrupando o contexto e as necessidades encontradas nas pesquisas de

• PREVISÃO DO TEMPO:

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

Nível de água no solo.

principais ferramentas para o site e quais

Chuvas e geadas.

seriam algumas funções presentes, crian-

Indicativo de melhor data para plantio e poda e previsão de colheita.

72

UFPR

AGRICULTURA FAMILIAR

• 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 livremente, 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, desenvolvo primeiramente no agrupamento das informação, para que o usuário encontre facilmente o conteúdo, contudo não saturando as páginas 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.

4�2

4

Agricultura e cultivo

Novidade s

5 Noticias

5�2

5�1 Artigos

Eventos

5�6

Preços

5�7

Plantas

5�8

Clima

Parte da arquitetura da informação - Autor

No rótulo de "Agricultura e Cultivo" é usado para separa os itens que estão interligados ao plantio, com informações mais técnicas, entretanto 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.

LUCAS HENRIQUE ZEFERINO

73

TCC - WEBSITE

7.1-Rascunho da AI 1

1�1

Home Page

Login

2

Erro de Login

2�1 E

4

4�1

Novidade s

Vitrine do Agriculto r

5 Noticias

5�1 Artigos

5�2 Eventos

5�3 Perto de Você

6 Detalhes do Evento

Legenda: C

Página de Confirmação

E

Página de Erro Tomada de decisão

Página Única

Janela

Multiplas páginas

74

UFPR

Conf irmação

5�4 Página do agricult or

C

5�5

Editar Vitrine

5�6

Preços

AGRICULTURA FAMILIAR

1�2

1�3

Criar Conta

Pesquisa r

2�3 Conf irmação

2�3

C

Erro

2�3 E

Result ados

2�3

Nenhum E Resultado

C

3�1

3�1

Mapa do Site

Link

4�2

4�3

5�7

Plantas

4�4

Deixe seu Recado

Agricultura e cultivo

5�8

Clima

5�9 Página do Recado

Ajuda

5�10 Todos

5�11

Sua conta

5�12 Orgões do governo

LUCAS HENRIQUE ZEFERINO

5�13 Quem Somos

75

TCC - WEBSITE

7�2-Tree Testing 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 interface 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,

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

76

UFPR

embora limitado, foi suficiente para o objetivo de avaliar a arquitetura da informação.

Para iniciar o teste, fui proposto três perguntas de identificação e quantificaçã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úblicos.

AGRICULTURA FAMILIAR

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

Em todas as questões, coloquei uma situação do cotidiano, tentando 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

LUCAS HENRIQUE ZEFERINO

77

TCC - WEBSITE

Artigos

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

Eventos

po final: "Caso você tenha alguma con-

Cadastrar Evento

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

Todos Eventos

hora de fazer a atividade ou alguma ideia,

Agricultura e cultivo

por favor escreva aqui."

Preços Plantas

Resultados

Clima Vitrine do Agricultor Página do Agricultor

Para esse teste, tive ajuda de 10 voluntá-

Agricultores Perto de Você

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

Editar Vitrine

res e 5 homens. Diante da pergunta sobre

Deixe seu recado

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

Todos os recados

se declarou com alta experiência, 30 com

Responder recados

média e 10% com baixa.

Ajuda Sua conta

TAREFA 1

Configurações

6 Sucesso Diretamente

Editar Vitrine

3 Falha Direta

Órgãos Governamentais

1 Falha Indireta

Quem Somos

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

78

UFPR

AGRICULTURA FAMILIAR

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 considerado, mostrando problemas neste caminho.

TAREFA 2 4 Sucesso Diretamente 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 informação, procurando também a informação na "Vitrine do Agricultor".

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 ?

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

LUCAS HENRIQUE ZEFERINO

79

TCC - WEBSITE

TAREFA 3 5 Sucesso Diretamente 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 segunda tarefa, existiu uma taxa alta de acertos 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 informação ?

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

80

UFPR

AGRICULTURA FAMILIAR

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 execuçã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 evidenciou 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 adicionadas entre o Mural e a Página do Agricultor.

A arquitetura da informação alterada está na próxima página.

LUCAS HENRIQUE ZEFERINO

81

TCC - WEBSITE

7.3-Representação Gráfica da AI 1�1

1

Home Page

FAQ

1�2

1�3

1�4

Reportar Erro

Mapa do site

Pesquisar

5�12

2�1

Result ados

3�1

Links fixos em todas as Páginas.

Noticias

Mapa do Site

4�1

Novidade s

Vitrine do Agricultor

5�2

5�1 Artigos

Eventos

5�3 Perto de Você

5�4 Página do agricult or

6 Detalhes do Evento

Legenda: C

Página de Confirmação

E

Página de Erro Tomada de decisão

Página Única

Janela

Multiplas páginas

82

UFPR

3�2

Link

4

5

2�2

Nenhum E Resultado

C

5�5

Editar Vitrine

AGRICULTURA FAMILIAR

1�5

1�6

Criar Conta

Login

2�3

Erro de Login

2�4 E

Conf irmação

2�5 C

Conf irmação

2�6

C

Erro

E

3�3

Sua conta

4�2

4�3

Agricultura e cultivo

5�6

Preços

5�7

Plantas

Mural

5�8

Clima

5�9 Recados

5�10 Dúvidas

LUCAS HENRIQUE ZEFERINO

83

TCC - WEBSITE

7.4-Detalhamento da Arquitetura da Informação

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-

Para facilitar o desenvolvimento das

ário logado.

etapas vindouras do projeto determinei claramente o que cada página na arquite-

4 - NOVIDADES

tura da informação ira conter de conteúdo e quais funções e ferramentas estarão

NOTÍCIAS

presentes:

Com as suas principais categorias, o

TODAS AS PÁGINAS

usuário pode ver todas as notícias, e ordená-las de acordo com alguns parâmetros, além de favorita e comen-

AUXILIO AO USUÁRIO

tar nas noticias.

Contendo uma função "O que posso fazer aqui?", que sobrepõem a tela

ARTIGOS

e aponta as principais funções de

Nesta página é para artigos variados,

aquela página.

também listada por categorias e

"FAQ", "Reportar erro!" e "Mapa do

com as mesmas funções da página

Site" no rodapé do website.

de notícias.

SUA CONTA

EVENTOS

Quando o usuário logar essa opção

Com um calendário interativo, man-

substituirá e as funções de "Login" e

cando o eventos próximos,

"Criar conta".

o usuário terá a oportunidade de

Nela o usuário poderá configurar a

programar para um aviso no e-mail

sua conta, trocar foto, e habilitar e

de um evento, cadastrar um evento,

desabilitar newsletter.

ver detalhes de cada evento e refinar os eventos que aparecem para ele.

BUSCA

Além de artigos e notícias relaciona-

O usuário pode pesquisar como pa-

das.

lavras chaves simplesmente, ou pode exibir mais opções para refinar a sua

4.1 - VITRINE DO AGRICULTOR

busca. Em caso de nenhum resulta-

É o espaço que se pode mostrar e buscar

do, sugeri o usuário olhar o mapa do

por agricultores. Tem um mapa com os

site.

agricultores próximos ao endereço colocado, categorias para encontrar agricultores

84

UFPR

AGRICULTURA FAMILIAR

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 selecionar 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 agricultor 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, quantidade 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.

LUCAS HENRIQUE ZEFERINO

85

TCC - WEBSITE

86

UFPR

AGRICULTURA FAMILIAR

8-Wireframe "Um wireframe, também conhecido como uma página de modelo 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 quantidade 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, geralmente 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, entretanto ainda em baixa fidelidade, alguns exemplos abaixo:

Rascunhos dos wireframes - Autor

LUCAS HENRIQUE ZEFERINO

87

TCC - WEBSITE

ALTERNATIVAS

ALTERNATIVA 1

Agora, com rascunhos expressando basicamente como será o wireframe da home do site. Escolhi quatro alternativas para desenvolver versões de alta fidelidade para assim decidir qual será utilizada.

A alternativa 1 segue um modelo parecido dos concorrentes, usando na grande maioria 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 equilibrar 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 website, 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 busca 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 diferente e agradável para o usuário, onde

88

UFPR

1º alternativa para wireframe - Autor

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 é utilizado 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.

AGRICULTURA FAMILIAR

ALTERNATIVA 2

AgriMundo

Login

Novidades

Criar Conta

Cultivo

Notícias

Preços

Artigos

Eventos

Plantas

Clima

Sua página

Editar vitrine

Este é o menu, selecione os itens que você pretende interagir!

Vitrine

Perto de você

?

Mural

Recados

Dúvidas

2º alternativa para wireframe - Autor

ALTERNATIVA 3

AgriMundo Novidades

Login/Criar Conta

Cultivo

Vitrine

Mural

?

Próximo Evento

Ultimas Notícias

Ver mais

Ultimos Artigos

Previsão do tempo

Ver mais

Preços

Ver mais

3º alternativa para wireframe - Autor

LUCAS HENRIQUE ZEFERINO

89

TCC - WEBSITE

8.1-Refinamento do Wireframe

refinando as informações, definindo o

Para o desenvolvimento foi escolhido a

todos os wireframes do site.

layout, alguns ícones, aplicando a marca e lugares que os itens estarão. Alguns textos foram criados para exemplificação. Segue

alternativa 3, pois a esse modelo mantém uma interatividade na home page, ficou

HOME

um layout agradável e mantém o requisito

É a página que o usuário vai ter o primeiro

de ser responsivo, além disto, o usuário

contato com o website, portanto é es-

pode acompanhar as ferramentas dire-

sencial que ela leve esse usuário para o

tamente da home. Com a página inicial

caminho certo, para isso, a home page foi

definida, foi realizado o desenvolvimento

desenvolvida para oferecer acesso rápido

Login/Criar Conta

Novidades

Vitrine

Cultivo

Mural

Barra superior e menu.

Alberto dos Santos Agricultor Salvador - BA

Vitrine

Mapa ilustrativo com mensagens do mural e agricultores da vitrine.

Alice Mayer Agricultora Salvador - BA

Vitrine

Rose Staker

“Estou com problemas de plantar morangos, toda vez que tento...

?

Mural

Ultimas Notícias

Botão de ajuda ao usuário.

Próximo Evento Agricultura

Mapa retoma negociação para conquista de novos mercados

Projeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21

20 à 25 de dezembro Local: Piraquara - PR

Politica

Economia

Festa das Flores

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

Assunto: Cultura de Flores, com exposição palestra e vendas.

Ultimos Artigos

Clima

Min 15º | Max 20º Clima Chuvoso com Sol Primavera Clima bom para plantas como café e hortaliças.

5 tipos de Trator para cada tipo de uso!

A tecnologia a favor do agricultor!

Seja mais produtivo com um pensamento empreendedor!

Blocos de informação, trazendo um pouco de cada ferramenta do website e direcionando o usuário para as páginas.

Preços Novembro de 2015

Milho 2,3%

Soja 5,4%

Tabaco 1,7%

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

Café 0,3%

SAC

Wireframe da página de home deste projeto - Desenvolvido pelo autor.

90

UFPR

Tomate 2,0%

Reportar Erro

Madeira 6,9%

Mapa do Site

Roda pé fixo, com informações técnicas e links para feedback e auxílio do usuário.

AGRICULTURA FAMILIAR

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 rolagem 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 reportar possíveis erros encontrados pelos usuários.

Entrando no conteúdo da home, é apresentado um mapa ilustrativo 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

LUCAS HENRIQUE ZEFERINO

91

TCC - WEBSITE

dispostas em primeiro no layout, além

Login/Criar Conta

disto criar uma estética dinâmica para a

home do website.

Novidades

Vitrine

Cultivo

Mural

Novidades > Artigos

Artigos 20/11/2015

Filtros

20/11/2015

Assuntos Data

Os blocos de informação foram desenvolvidos com o tamanho ideal para se encai-

Os artigos mais lidos 5 tipos de Trator para cada tipo de uso!

Maquinário

5 tipos de Trator para cada tipo de uso!

Plantio

A tecnologia a favor do agricultor!

A tecnologia a favor do agricultor!

xarem em relação a informação necessária

?

Seja mais produtivo com um pensamento empreendedor!

20/11/2015

20/11/2015

e do tamanho da tela, para que assim o site seja responsivo e o usuário tenha controle no conteúdo da home.

Dicas

Seja mais produtivo com um pensamento empreendedor!

Maquinário

5 tipos de Trator para cada tipo de uso!

20/11/2015

20/11/2015

ARTIGO O artigo foram pensado para dar dicas dos diversos assunto envolvendo a agri-

Dicas

Plantio

A tecnologia a favor do agricultor!

1

2

34

5

Seja mais produtivo com um pensamento empreendedor!

...

Mostrar: 6

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-

SAC

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

Reportar Erro

Mapa do Site

Wireframe da página de central de artigos deste projeto - Autor.

Login/Criar Conta

Novidades

Vitrine

Cultivo

Mural

Novidades > Artigos > Maquinário

5 tipos de Trator para cada tipo de uso!

Favoritar

Por Lucas | 20/11/2015

teúdo, assim como a central de notícias

Compartilhar

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

que muda a apresentação e tamanho das imagens em relação a central de notícias.

?

NUNC VOLUTPAT E

Nt est a maximus. Nam mauris lacus, sollicitudin id consequat vestibulum, bibendum a augue. Curabitur a dapibus diam. Donec porttitor consectetur 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 interdum 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 scelerisque, 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 E

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

Comentários Escreva aqui o seu recado

Os artigos mais lidos 5 tipos de Trator para cada tipo de uso!

Enviar

A tecnologia a favor do agricultor!

Rose Staker Agricultora não dá morango, o que faço ???

Seja mais produtivo com um pensamento empreendedor!

Responder

Relacionados Ferramenta

Clima Notícia

Novo plano de governo traz ...

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

SAC

Reportar Erro

Wireframe da página de artigo deste projeto - Autor.

92

UFPR

Notícia

A alta das chuvas Artigo

Como perceber que o tempo...

Mapa do Site

AGRICULTURA FAMILIAR

NOTÍCIA Embora parecida com um artigo, a notícia tem como foco descrever os acontecimentos 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 diminuindo 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 recados, 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.

Login/Criar Conta

Novidades

Menu breadcrumb.

Botão para o salvar a notícia nos favoritos da conta do usuário e compartilhar nas redes sociais.

Vitrine

Cultivo

Mural

Página Principal > Novidades > Noticias > Economia

Projeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21 Favoritar

Por Lucas | 20/11/2015

Compartilhar

?

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.

Ferramentas para postar comentários.

Comentários Escreva aqui o seu comentário

As noticias mais lidas 1 - Projeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21

Enviar 20/11/2015 | 21:34

Rose Staker Agricultora

2 - Mapa retoma negociação para conquista de novos mercados 3 - Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

não dá morango, o que faço ???

Responder

Relacionados Ferramenta

Clima Notícia

Novo plano de governo traz ...

Notícia

A alta das chuvas Artigo

Como perceber que o tempo...

Elementos de adaptatividade, referente a notícia.

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

SAC

Reportar Erro

Mapa do Site

Wireframe da página da notícia deste projeto - Autor.

LUCAS HENRIQUE ZEFERINO

93

TCC - WEBSITE

CENTRAL DAS NOTÍCIAS Essa página tem como objetivo mostrar 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.

Login/Criar Conta

Novidades

Vitrine

Cultivo

Mural Menu breadcrumb.

Novidades

Notícias 20/11/2015

Filtros de conteúdo.

Filtros Assuntos Data

As noticias mais lidas Projeto Rural Sustentável ajudará Brasil a cumprir objetivos da COP 21 Mapa retoma negociação para conquista de novos mercados

Agricultura

20/11/2015

Mapa retoma negociação para conquista de novos mercados

?

Elemento de adaptatividade, com as notícias mais do momento.

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

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

20/11/2015

Politica

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

Em reunião nesta quarta-feira com a ministra Kátia Abreu (Agricultura, Pecuária e Abastecimento), o governador do Distrito Federal, Rodrigo Rollemberg, pediu apoio da Empresa Brasileira de Pesquisa Agropecuária (Embrapa) para a implementação do parque tecnológi20/11/2015

Politica

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

Em reunião nesta quarta-feira com a ministra Kátia Abreu (Agricultura, Pecuária e Abastecimento), o governador do Distrito Federal, Rodrigo Rollemberg, pediu apoio da Empresa Brasileira de Pesquisa Agropecuária (Embrapa) para a implementação do parque tecnológi-

1

2

3

4

5

...

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

Wireframe da página de central de notícias deste projeto - Autor.

94

UFPR

Menu das páginas.

Mostrar: 4

SAC

Reportar Erro

Mapa do Site

AGRICULTURA FAMILIAR

EVENTOS Desenvolvido para ser um ponto de exposição dos eventos de agricultura, essa página divulga diversos tipo de feiras, palestras e etc, para que assim o agricultor ter a oportunidade de comparecer nestes eventos 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.

Filtros

Calendário de eventos

Número de eventos divididos pelos próximos meses.

Wireframe da página de eventos deste projeto - Autor.

LUCAS HENRIQUE ZEFERINO

95

TCC - WEBSITE

CLIMA

Com esses mesmos dados, a partir do dia

No canto direito do grid, está presente a

que o usuário plantou, a ferramenta calcu-

ferramenta de com a previsão geral de

la os melhores dias para poda, adubação,

acordo com a região, nela o usuário tem

aplicar defensivos e de colheita, isso tudo

as informações básicas de clima, mas

com a função "Avisar-me" quem envia um

também as especificas para agricultura,

aviso para o usuário lembrando das datas.

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.

Planta selecionada e uma estimativa da melhor época de plantá-la Previsão geral para a região selecionada

Ferramenta de previsão.

Wireframe da página de clima deste projeto - Autor.

96

UFPR

AGRICULTURA FAMILIAR

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

Gráfico com histó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.

LUCAS HENRIQUE ZEFERINO

97

TCC - WEBSITE

PLANTAS

ta outros itens do site relacionados a planta

Previsto para ser um "Data Center", ou seja,

que se está selecionada.

um centro de informação sobre plantas, mas com a contribuição da comunida-

Na estrutura principal da ferramenta, é

de do site, que pode sugerir alteração e

descrito as características da planta, onde

enriquecer todas as informações apresen-

o intuito destas informações é serem uteis

tadas.

para o exercício da agricultura.

Os elementos de adaptatividade então na

Nesta mesma diagramação, é apresentado

lateral esquerda do grid, por serem uma

uma galeria de fotos para caracterizar essa

função segundaria no layout. O primeiro

planta e um mapa com os pais com maio-

destes elementos mostra as principais cul-

res produções da cultura selecionada.

turas para o usuário e o segundo apresen-

Características e dados da planta selecionada.

Elementos de adaptatividade.

Mapa com os maiores produtores do mundo.

Imagens da planta.

Wireframe da página de plantas deste projeto - Autor.

98

UFPR

AGRICULTURA FAMILIAR

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 comentá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.

Filtro

Mensagens de recados.

Campo para envio de uma mensagens nova

Mensagens de dúvida.

Wireframe da página de mural deste projeto - Autor.

LUCAS HENRIQUE ZEFERINO

99

TCC - WEBSITE

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 agricultor busca. Servindo assim para buscar contatos ou fornecedores para alguma necessidade.

Filtro

Apresentação de novos agricultores no webstie

Resultados próximos a localidade selecionada

Menu das páginas

Wireframe da página da central de vitrines deste projeto - Autor.

100

UFPR

AGRICULTURA FAMILIAR

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, conhecer outros agricultores perto de sua localidade.

O usuário poderia escolher quais das informações dele, irão ser divulgadas na vitrine tais como, foto, nome e endereço, além disto, selecionar que tipo de cultivos ele tem.

Um campo de texto é destinado para o usuário deixar um depoimento 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.

Login/Criar Conta

Vitrine

Cultivo

Novidades

Mural

Galeria de fotos Cultivo

Vitrine

Galeria de Fotos

João Pedro Neves

Fazenda Imperio

Foto e dados do usuário

Endereço: Contato: Disponibilidade:

Texto do usuário, contando a sua historia ou suas experiencias.

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.

?

Cultivos:

Culturas que são cultivadas pelo produtor.

Milho

Milho

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

Milho

Milho

SAC

Reportar Erro

Mapa do Site

Wireframe da página de vitrine deste projeto - Autor.

LUCAS HENRIQUE ZEFERINO

101

TCC - WEBSITE

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.

1024 pixels 800 pixels

Grid modular do website - Autor.

102

UFPR

AGRICULTURA FAMILIAR

9-Interface 9.1-Nomenclatura Agora 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 utilizado um painel semântico de palavras, criando as ligações de significado partindo de palavras em comum.

Arvore de palavras - Autor

Os itens centrais do quadro representam o suporte e o tema do projeto 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 suporte é 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, Agriconet, AgriInfo, Agricultura Online, Agrinet, AgriMundo e Mundo Rural.

Destacando duas: AgriMundo e WebRural.

Por se diferenciar dos concorrente mas mantendo o conceito agrícola

LUCAS HENRIQUE ZEFERINO

103

TCC - WEBSITE

e além disto ter uma boa sonoridade, foi escolhido o nome AgriMundo para o website. 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 visualmente 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 aplicada 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 remete 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 agricultura. 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.

Logos dos websites concorrentes

Das sete marcas quatro utilizam um ícone acompanhando o lettering. As cores utilizadas são variadas, contudo as mais presentes é o verde, azul e bordo, enquanto três de sete das mascas utiliza preenchimento em branco e seis das sete logos utiliza fonte sem serifa.

Sendo assim o logotipo criado para esse projeto seguiu a tendência dos concorrentes 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",

104

UFPR

AGRICULTURA FAMILIAR

Siegel+Gale, uma agência americana especializada em branding, contou com três mil voluntários, que classificaram cem logos famosas 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 Nexa Bold

Fonte Desenhada

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.

LUCAS HENRIQUE ZEFERINO

105

TCC - WEBSITE

9.3-Pictogramas

Pictograma que representa uma planta, é utilizado no menu junto do rótulo de

Foi aplicado o uso de pictogramas no

cultivo.

projeto com o objetivo de facilitar a leitura e entendimento das informação do layout

Pictograma que representa

do site.

um clima chuvoso com sol, é utilizado na ferramenta de

"Ícones têm a capacidade de comu-

clima.

nicar idéias, funções e significados

Variações abaixo:

em uma linguagem visual comum."

(WILLIAMS, 2012) Para desenvolver esse pictogramas foram selecionados os títulos que seriam retratados. Então foi realizado rascunhos para definir as possíveis alternativas. Posterior refinados.

Pictograma que representa Todos foram desenhados para serem

uma vitrine, é utilizado na no

compreensíveis e seguirem a mesma

menu junto com o rótulo de

hierarquia visual. Seu estilo visual foi esta-

vitrine.

belecido de acordo com a tendência de pictogramas com linhas, como utilizados

Pictograma que representa

no mais recente sistema operacional da

uma taxinha, é utilizado na

Wicrosoft "Windows 10"

no menu junto com o rótulo de mural.

Pictograma que representa uma estrela, é utilizado na no menu junto com o rótulo de novidades.

Imagem retirada do menu de configurações do Windows 10

Pictograma que representa uma localização, é utilizado Pictograma que represen-

nas ferramentas de eventos

ta as datas, é utilizado na

e plantas.

ferramenta de eventos.

Pictograma que representa o horário, é utilizado na ferramenta de eventos.

106

UFPR

AGRICULTURA FAMILIAR

9.4-Estudo de Cor A 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 Kissmetrics (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 extremamente 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.

ARGETING TING W O ME N

TARGETI GETING N M EN

Colors women love the most 8

BL UE

PURPLE

GREE N

Colors women hate the most 8

ORANGE

BR OW N

GR AY

Colors men love the most 8

BL UE

GREE N

BL AC K

Colors men hate the most 8

BR OW N

ORANGE

PURPLE

Trecho do infográfico "How Colors Affect Conversions" do site Kissmetrics

LUCAS HENRIQUE ZEFERINO

107

TCC - WEBSITE

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

Prosseguindo com o as definições para

ser usado, e quais as cores secundarias

elaborar o layout final, foi escolhido traba-

a serem utilizada, para isso foi utilizado

lhar com duas tipografias (WRIGHT, 2014),

o site "flatuicolors.com" e o "color.adobe. com" para definir a base de cor seguindo o flat design e para buscar mais cores com o objetivo de definir a palheta de cores.

1

9�5-Tipografia

para assim criar a distinção clara de títulos e corpo de texto.

Elas foram encontradas no acervo do

2

"google.com/fonts" uma ferramenta criada pela Google que facilita e unifica as fontes para web.

R: 22

R: 39

G: 146

G: 160

B: 128

B: 96

A fonte que foi aplicada em títulos é a " Bitter":

Alternativas de verde - Retirado do site "flatuicolors.com"

Para distanciar dos concorrentes que utilizam o verde em seus websites, foi escolhida a opção 1, por ser um tom de verde não utilizado.

Representação da fonte Bitter

A partir da cor escolhida, foi desenvolvida uma palheta de cores, para se adaptar bem ao site e com uma carga de contras-

A fonte que foi aplicada nos texto de corpo foi a Rambla:

te adequada para a legibilidade

Palheta de cores - Autor

Definida com três tons de verde como principais cores e amarelo como secunda-

Representação da fonte Rambla

ria de destaque, os textos em branco ou

Ambos as fontes tem uma ótima legibili-

preto e o fundo em cinza.

dade, uma família completa e um nível de contraste agradável entre elas.

108

UFPR

AGRICULTURA FAMILIAR

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, definindo assim o conceito do website.

José Ferreira

Busca

Novidades

Cultivo

3

Vitrine

Mural

Vitrine e Mural dos Agricultores Alice Mayer

Rose Staker

Agricultora

Salvador - BA Culturas: Batatas - Alface - Tomate

Mario Ramos

Dúvida no mural

Recado no Mural

Estou com problemas de plantar morangos, toda vez que tento a folha fica amarelada e não dá morango, o que faço ???

Obrigado mesmo, eu estava precisando destas dicas!

? Últimas Notícias

Próximo Evento Agricultura

Mapa retoma negociação para conquista de novos mercados

Economia

Clima

Feira e Palestra

17 a 22 de novembro de 2015

Politica

Projeto Rural Sustentável ajudará Brasil nos objetivos da COP 21

Festa das Flores

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

Início: 10:00 Joinville - SC

Últimos Artigos Min 15º | Max 20º Curitiba - PR

Chuvoso com Sol

Clima favorável para o desenvolvimento de plantas como café e hortaliças

Politica

Maquinário

5 tipos de Trator para cada tipo de uso!

Plantio

A tecnologia a favor do agricultor!

Seja mais produtivo com um pensamento empreendedor!

Preços Cotações atuais - Novembro/2015

Milho 60kg

Soja 60kg

Algodão 15kg

Café 60kg

- Seco R$40,00

- Em Grão R$67,00

- Em Pluma R$75,05

- Tipo 6 Duro R$460,00

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

SAC

Cana de Açúcar 1 Ton

-

R$64,11

Reportar Erro

Tomate 23 Kg

- Mesa R$34,19

Mapa do Site

Layout final da home page - Autor

LUCAS HENRIQUE ZEFERINO

109

TCC - WEBSITE

BARRA SUPERIOR

branco e amarelo e o cambo que busca é

A barra superior do websites foi defini-

o única ferramenta que utiliza um fun-

da com o tom mais escuro de verde da

do com branco, para assim aumentar o

palheta de cores, para evidenciar esse

contraste da janela de busca quando for

elemento, a logotipo foi inserida com o

aberta,

José Ferreira José Ferreira

Busca Busca

Layout da barra superior - Autor

Novidades Novidades

Cultivo Cultivo

Faixa em degrade de amarelo, além do valor estético, essa linha funciona como barra de carregamento do site.

Mural Mural

Vitrine e Mural dos Agricultores Vitrine e Mural dos Agricultores Alice Mayer Alice Mayer Agricultora

Rose Staker Rose Staker Dúvida no mural

Mario Ramos Mario Recado noRamos Mural

Salvador - BA Salvador - BA Culturas: Culturas: Batatas - Alface - Tomate Batatas - Alface - Tomate

Estou com problemas de Estou problemas devez que plantarcom morangos, toda plantar morangos, toda vez que tento a folha fica amarelada e tento a folha fica amarelada e não dá morango, o que faço ??? não dá morango, o que faço ???

Obrigado mesmo, eu estava Obrigado mesmo, estava precisando destas eu dicas! precisando destas dicas!

Agricultora

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 .

Vitrine Vitrine

Dúvida no mural

Recado no Mural

Layout do menu do usuário - Autor

Menu da conta do usuário, onde ele pode ir par configurações do perfil, ver os alertas do mural ou sair da conta.

??

Últimas Notícias Últimas Notícias

Próximo Evento Próximo Evento

Layout da janela de busca - Autor Agricultura

Festa das Flores Festa das Flores Feira e Palestra

Agricultura

Mapa retoma negociação para conMapa negociação quistaretoma de novos mercadospara conquista de novos mercados

Feira e Palestra

17 a 22 de novembro de 2015 17 a 22 de novembro de 2015

Politica Politica Governador Rollemberg pede apoio

MENU

Economia

Economia Projeto Rural Sustentável ajudará Projeto Rural Sustentável Brasil nos objetivos da COPajudará 21 Brasil nos objetivos da COP 21

Novidades

Governador Rollemberg apoio da Embrapa para parquepede tecnológida Embrapa para parque tecnológico no DF co no DF

Cultivo

Layout do menu do website - Autor Clima Clima

Chuvoso Chuvoso com Sol com Sol

Salvador - BA Culturas: Batatas - Alface - Tomate

Preços Preços Cotações atuais - Novembro/2015

- Seco - Seco R$40,00 R$40,00

- Em Grão - Em Grão R$67,00 R$67,00

Plantio

informações daquele rótulo.

Algodão 15kg Algodão 15kg

- Em Pluma - Em Pluma R$75,05 R$75,05

Café 60kg Café 60kg

- Tipo 6 Duro - Tipo 6 Duro R$460,00 R$460,00

Mapa retoma negociação para conquista de novos mercados

Politica AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino SAC Governador Rollemberg pede apoio AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino SAC

da Embrapa para parque tecnológico no DF

Layout do rodapé - Autor Brasil nos objetivos da COP 21

Informações de autoria do site Clima

Cana de Cana de 1 Ton Açúcar Açúcar 1 Ton

Tomate 23 Kg Tomate 23 Kg

-

- Mesa - Mesa R$34,19 R$34,19

R$64,11 R$64,11

Próximo Evento Agricultura

Projeto Rural Sustentável ajudará

O menu utiliza o tom de verde médio da palheta de cores, nele contêm os rótulos e pictogramas e foi adicionado um efeito Politica de sombra para simular que Politica Seja mais produtivo Seja mais produtivo esta embaixo da barra superior. com um pensamento

Plantio A tecnologia a favor Rose Staker Mario Ramos com um pensamento A a favor 5 tipos de Trator para empreendedor! dotecnologia agricultor!

Dúvida no mural Recado no Mural cada tipo de uso! empreendedor! do agricultor! cada tipo de uso!

Estou com problemasQuando de Obrigado um itemmesmo, no eu estava plantar morangos, toda vez que precisando destas dicas! menu tento a folha fica amarelada e é selecionado, não dá morango, o que faço ??? abre uma aba com as

Últimas Notícias

Economia

3

Mural

Vitrine e Mural dos Agricultores Maquinário 5Maquinário tipos de Trator para

Layout da aba do menu - Autor Soja 60kg Soja 60kg

José Ferreira

Joinville - SC Joinville - SC

Vitrine

Cotações atuais - Novembro/2015

RODAPÉ

Busca

Início: 10:00 Início: 10:00

Últimos Artigos Últimos Artigos Min 15º | Max 20º Min 15º | Max 20º Curitiba - PR Curitiba - PR Clima favorável para o Clima favorável para desenvolvimento de o desenvolvimento plantas como caféde plantas como café Alice Mayer e hortaliças Agricultora e hortaliças

Milho 60kg Milho 60kg

Festa das Flores Feira e Palestra

17 a 22 de novembro de 2015

Reportar Erro ReportarInício: Erro10:00

Mapa do Site Mapa do Site

Joinville - SC

No rodapé foi aplicado o preto, para ser neutro e ser identificável como o fim da página.

Últimos Artigos Min 15º | Max 20º Curitiba - PR

110

UFPR

Chuvoso com Sol

3 3

Clima favorável para o desenvolvimento de plantas como café e hortaliças

Preços Cotações atuais - Novembro/2015

Politica

Maquinário

5 tipos de Trator para cada tipo de uso!

Plantio

A tecnologia a favor do agricultor!

Seja mais produtivo com um pensamento empreendedor!

?

AGRICULTURA FAMILIAR

José Ferreira

Busca

Novidades

CORPO DA HOME PAGE Cultivo

3

Vitrine

Mural

Vitrine e Mural dos Agricultores Alice Mayer

Rose Staker

Agricultora

Salvador - BA Culturas: Batatas - Alface - Tomate

Mario Ramos

Dúvida no mural

Recado no Mural

Estou com problemas de plantar morangos, toda vez que tento a folha fica amarelada e não dá morango, o que faço ???

Obrigado mesmo, eu estava precisando destas dicas!

? Últimas Notícias

Próximo Evento Agricultura

Festa das Flores

Mapa retoma negociação para conquista de novos mercados

Feira e Palestra

17 a 22 de novembro de 2015

Politica Economia

Projeto Rural Sustentável ajudará Brasil nos objetivos da COP 21

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

Início: 10:00 Joinville - SC

Layout do corpo da home page - Autor

Clima

Nos blocos de informação, foi adicionado pequenos efeitos, para auxilar o usuário entender Min 15ºa| Max 20º melhor os limites, e uma faixa vende foi colocada Curitiba - PR na parte inferior do bloco, para equilibrá-lo visualClima favorável para o mente em relação ao título.

Chuvoso com Sol

desenvolvimento de plantas como café e hortaliças

Últimos Artigos

Cada bloco tem o pictograma do rótulo que ele pertence, para assim ajudar o usuário a identifiPolitica car cada bloco.

Para o planeta foi utilizado uma versão estilizada do mapa mundo .

Maquinário

5 tipos de Trator para cada tipo de uso!

Plantio

A tecnologia a favor do agricultor!

Seja mais produtivo com um pensamento empreendedor!

SIMULAÇÃO DO WEBSITE - HOME Preços

Segue as simulações de como ficaram as páginas no browser:

Cotações atuais - Novembro/2015

Milho 60kg

Soja 60kg

Algodão 15kg

Café 60kg

- Seco R$40,00

- Em Grão R$67,00

- Em Pluma R$75,05

- Tipo 6 Duro R$460,00

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

SAC

Cana de Açúcar 1 Ton

-

R$64,11

Reportar Erro

Tomate 23 Kg

- Mesa R$34,19

Mapa do Site

Home aplicada em um navegador - Autor

LUCAS HENRIQUE ZEFERINO

111

TCC - WEBSITE

SIMULAÇÃO DO WEBSITE - EVENTOS

Página de eventos aplicada em um navegador - Autor

SIMULAÇÃO DO WEBSITE - CLIMA

Página de clima aplicada em um navegador - Autor

112

UFPR

AGRICULTURA FAMILIAR

SIMULAÇÃO DO WEBSITE - PÁGINAS RESPONSIVAS Busca

Novidades

Cultivo

3

Vitrine

Mural Vitrine e Mural dos Agricultores Rose Staker Dúvida no mural

Estou com problemas de plantar morangos, toda vez que tento a folha fica amarelada e não dá morango, o que faço ???

Vitrine e Mural dos Agricultores Alice Mayer

Rose Staker

Agricultora

Salvador - BA Culturas: Batatas - Alface - Tomate

Mario Ramos

Dúvida no mural

Recado no Mural

Estou com problemas de plantar morangos, toda vez que tento a folha fica amarelada e não dá morango, o que faço ???

Obrigado mesmo, eu estava precisando destas dicas!

Últimas Notícias Economia

Projeto Rural Sustentável ajudará Brasil nos objetivos da COP 21 Agricultura

Mapa retoma negociação para conquista de novos mercados

? Últimas Notícias

Clima

Agricultura

Mapa retoma negociação para conquista de novos mercados

Min 15º | Max 20º

Politica Economia

Projeto Rural Sustentável ajudará Brasil nos objetivos da COP 21

Clima

Clima favorável para o desenvolvimento de plantas como café e hortaliças

Chuvoso com Sol

Próximo Evento Min 15º | Max 20º

Próximo Evento

Festa das Flores Feira e Palestra

Curitiba - PR

Chuvoso com Sol

Curitiba - PR

Governador Rollemberg pede apoio da Embrapa para parque tecnológico no DF

Festa das Flores Feira e Palestra

17 a 22 de novembro de 2015

Clima favorável para o desenvolvimento de plantas como café e hortaliças

17 a 22 de novembro de 2015

Início: 10:00

Início: 10:00 Joinville - SC

Joinville - SC

Últimos Artigos

Últimos Artigos Maquinário

5 tipos de Trator para cada tipo de uso!

Politica

Maquinário

Plantio

Seja mais produtivo com um pensamento empreendedor!

Plantio

A tecnologia a favor do agricultor!

5 tipos de Trator para cada tipo de uso!

A tecnologia a favor do agricultor!

Politica

Seja mais produtivo com um pensamento empreendedor!

Preços Cotações atuais - Novembro/2015

Preços Cotações atuais - Novembro/2015 Milho 60kg Soja 60kg

Milho 60kg

Soja 60kg

Algodão 15kg

Café 60kg

- Seco R$40,00

- Em Grão R$67,00

- Em Pluma R$75,05

- Tipo 6 Duro R$460,00

AgriMundo© Criado e desenvolvido por Lucas Henrique Zeferino

SAC

Tablet

Reportar Erro

Mapa do Site

- Seco -

R$40,00

- Em Grão -

R$67,00

Algodão 15kg - Em Pluma - R$75,05

SAC

Reportar Erro

Mapa do Site

Mobile

LUCAS HENRIQUE ZEFERINO

113

TCC - WEBSITE

114

UFPR

AGRICULTURA FAMILIAR

10-Conclusão Por tratar de um cunho social, esse projeto tem como objetivo solucionar 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 surgiram 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), desenvolvendo 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.

LUCAS HENRIQUE ZEFERINO

115

TCC - WEBSITE

116

UFPR

AGRICULTURA FAMILIAR

11-Bibliografia 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-architecture>. 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, Brasí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 FAMILIAR 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_arquivos_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/

LUCAS HENRIQUE ZEFERINO

117

TCC - WEBSITE

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 Agriculture: A summary of the EFITA ICT Adoption Questionnaires (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 familiar 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-usability-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 resultados. 2011. Disponível em: <ftp://ftp.ibge.gov.br/Acesso_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.

monde. Disponível em: <www.ufrgs.br/pgdr/arquivos/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-design/>. Acesso em: 03 out. 2015.

MIQUEL, Cesar. Diretrizes de Iniciantes para Entrevistas. 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. Sebastopol, 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.oficinadanet.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.cloudforestdesign.com/2010/11/14/low-fidelity-vs-high-fidelity-wireframes/>. 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. Academic 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.

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.

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.

KISSMETRICS. Infographic: How Colors Affect Conversions. 2013. Disponível em: <https://blog. kissmetrics.com/how-colors-affect-conversions/>.

Acesso em: 12 nov. 2015.

OBRIEN, Dave. Tree Testing: A quick way to evaluate your IA. 2009. Disponível em: <http://boxesandarrows.com/tree-testing/>. Acesso em: 28 maio 2015.

KRUG, Steve, Rocket Surgery Made Easy - The Do-it-yourself Guide to Finding and Fixing KUSHNIR'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

118

UFPR

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-interfaces-para-dispositivos-moveis-parte1/. Acesso em: 13/10/2015

AGRICULTURA FAMILIAR

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-evolucao.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/desenvolvimento-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 Computaçã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/showLandingPage/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 DESENVOLVIMENTO 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_Anlise_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://somostodosum.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/typology13.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/2015 WASSMER, 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

LUCAS HENRIQUE ZEFERINO

119

TCC - WEBSITE

WIREFRAMING. Disponível em: <http://www.usability.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.

120

UFPR

AGRICULTURA FAMILIAR

11.1-Anexos

Tem algum agrônomo ou instituição do

Anexo 01

governo que vem auxiliar vocês?

Não, normalmente a gente tem pouco

Transcrição da entrevista

auxilio, e em geral oque temos a disposição em relação a assistência técnica está

1ª Fernanda, 25~28 anos, feminino.

pouco adaptada a nossa realidade, muito

Primeiramente o seu nome ?

então quando tem, oque é muito raro, eles

Fernanda

vão com uma capacidade de assistência

menos adaptada a realidade da agricultura familiar de orgânicos e agriecologica,

muito básica.

Como é a produção dos orgânicos ?

Aqui princialmente nossos produtos vem

Mas então, onde vocês buscam informa-

de um circuito de comercialização da

ção?

Ecovida, que é um processo que a gente

A gente trabalha com um sistema de

manda e recebe alimentos, por isso temos

informações horizontais, que é troca de

toda essa variedade de cereais e de verdu-

saberes, então fazemos muito intercambio

ras.

entre os agricultores, as próprias reuniões nos grupos ela proporcionam um troca de

Em geral quantas pessoas participam da

saberes, e a reuniões dos núcleos também

Ecovida?

proporcionam, dentro da Ecovida temos

4000 pessoas envolvidas

encontros com todos os 4000 mil agricultores.

É realizado somente no paraná?

Não, é em 3 estados, Paraná, Santa Ca-

Em relação a internet, vocês tem um site

tarina e Rio Grande do Sul, te coisas que

ou grupo para conversar?

pegamos também de São Paulo, que não

Temos um site da Ecovida que serve mais

está dentro da rede, que pegamos direto

para divulgação, mas temos dificuldades

em um empresa se São Paulo que são

de alimentá-lo. Nós da família também

mais industrializados.

temos um site e uma página no facebook.

E a quanto tempo vocês estão trabalhan-

Vocês vem interesse nos agricultores ?

do com orgânicos?

Muito. Temos um rapaz que fez para gente

Faz 23 anos que meus pais começaram.

o site, fez para outros 3 agricultores e tende a crescer mais.

E aqui no passeio publico?

Começamos em 1995, então fazem 20

Como funciona o preço dos produtos?

anos.

Nós trabalhos com preço justo, é bem

LUCAS HENRIQUE ZEFERINO

121

TCC - WEBSITE

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

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.

122

UFPR

AGRICULTURA FAMILIAR

Quanto a proteção da lavoura? Como

Como você se baseia para definir o preço

vocês fazem?

de seus produtos?

Quando se percebe que vai gear, a gente

Depende bastante da oferta e procu-

corre lá e coloca uma lona de plastico.

ra,principalmente no champinhom que

Mas quando a geada é muito forte não

aqui na região não tem muitos produto-

adianta muito ainda mais para orgânicos.

res.

Mas de proteção é isso que a gente sabe, só se alguém tiver outra ideia.

De onde vem o seu conhecimento para plantar?

Em relação a internet, vocês tem um site

Vem das gerações anteriores e também

ou grupo para conversar?

de técnicos que me ensinaram.

Nós temos um site, mas ele é bem simples, claro que quanto mais informações

Como ele sabe que deve proteger a

melhor, mas fizemos mais de ultima hora,

lavoura, e que tipo de problemas ele já

para contar a nossa historia, pois somos

passou com isso ?

os primeiros do parana certificados oficial-

Sim, mas não tem muito oque fazer varia

mente.

mesmo conforme o clima.

Você nota interesse nos produtores em

Você conversa e troca informações com

acessar e buscar?

outros agricultores?

Sim, tanto dos produtores como dos con-

Sim, normalmente em conversas e no

sumidores, sempre perguntam se tem um

facebook.

cartão ou site para contato.

Quando precisa de orientação onde vai E existe troca de informações com os

buscar isso ?

produtores?

Eu busco a MalinBio, que é um empresa

Sim, temos reuniões da nossa certificado-

de consultoria ambiental e agrícola.

ra que é a Ecovida. E também é feito que chamamos de Olhar Externo, vem pessoas de outros grupos ou do núcleo de orgânicos pra ver se ta tudo certinho mesmo.

Tem computador ou celular com acesso a internet ?

Sim, informações agrícolas diversas.

3ª Diogo Malinocsku - 28 anos - Masculino

O que você gostaria em um site para a agricultura familiar ?

Dicas de consultores prevendo alternativas

Há quanto tempo é agricultor? E que

e mercados.

tipo de cultura você tem e já teve ?

Sempre fui agricultor familiar, já cultivei bastante tabaco e agora champinhom.

4ª Dirseu - 50 anos - Masculino

LUCAS HENRIQUE ZEFERINO

123

TCC - WEBSITE

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.

De onde vem o seu conhecimento para plantar?

Eu aprendi como meu pai tudo né, como trabalhar como o arado, inclusive hoje eu ainda trabalho com ele, não com o trator, colho fumo tudo assim.

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

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 problemas ele já passou com isso ?

Ah é o granizo né, é o que mais estraga. Mas é coisa da natuza mesmo, 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 Há quanto tempo é agricultor? E que tipo de cultura você tem e já teve ?

Desde piazinho. E o mais forte é o fumo e milho, mas tenho algumas

124

UFPR

AGRICULTURA FAMILIAR

hortaliças e criação de gado e uns porqui-

agricultura familiar ?

nhos, para consumo próprio

De tudo é bom.

De onde vem o seu conhecimento para

6ª Wilson - 43 anos - Masculino

plantar?

Veio de meus pais.

Há quanto tempo é agricultor? E que Como você se baseia para definir o preço

tipo de cultura você tem e já teve ?

de seus produtos?

Desde criança. Eu plantei fumo e atual-

Na verdade é a Souza Cruz que compra.

mente verduras.

Pois olha esse ano estava mais ruim, pois pagaram mais mal o preço, tinha qualida-

De onde vem o seu conhecimento para

de mas foi valorizado bem menos.

plantar?

Veio do pai.

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

Como você se baseia para definir o preço

passou com isso ?

de seus produtos?

O granizo, na verdade nós plantamos

Quem vai comprar, esse é o problema.

fumo a 12 anos, 10 anos caiu granizo, 10 anos tivemos prejuízo. E em um ano

Como ele sabe que deve proteger a

tivemos 3 vezes. Tipo tivemos as perdas,

lavoura, e que tipo de problemas ele já

ta certo que o seguro paga, mas é pouco,

passou com isso ?

mas tudo bem faz parte.

Já tive, e não tive solução nenhuma. O fumo ainda tinha jeito, mas como eu não

Você conversa e troca informações com

aplico nada nas verduras, pois planto orgâ-

outros agricultores?

nicos.

Temos, claro, lógico, sentamos na roda e trocamos ideias, que uma ideia de um ou

Você conversa e troca informações com

do outro pode ser melhor.

outros agricultores?

Sobre hortaliças são pouco na região que

Quando precisa de orientação onde vai

plantam. Então não tem muito com quem

buscar isso ?

falar.

Geralmente a Emater.

Quando precisa de orientação onde vai Tem computador ou celular com acesso

buscar isso ?

a internet ?

Eu vou na Emater.

Tenho celular, mas não internet.

Tem computador ou celular com acesso O que você gostaria em um site para a

a internet ?

LUCAS HENRIQUE ZEFERINO

125

TCC - WEBSITE

Tenho computador, mas é para meus filhos.

O que você gostaria em um site para a agricultura familiar ?

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 Há quanto tempo é agricultor? E que tipo de cultura você tem e já 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 De onde vem o seu conhecimento para plantar?

Aprendi com meus pais, e fique na atividade.

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

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.

Como ele sabe que deve proteger a lavoura, e que tipo de problemas ele já passou com isso ?

Já, no tabaco e soja tive granizo, e fungos, no primeiro ano que plantamos soja eu não conhecia muita coisa, te uma doença que atacou, que eu poderia evitar, mas não tinha o conhecimento.

Você conversa e troca informações com outros agricultores?

Bastante.

Quando precisa de orientação onde vai buscar isso ?

Bom busco orientação técnica, técnico da cooperativa ou da Emater.

Tem computador ou celular com acesso a internet ?

Tenho celular, e acesso mais site de pesquisa, pesquisa de preço de equipamento o insumos.

O que você gostaria em um site para a agricultura familiar ?

126

UFPR

AGRICULTURA FAMILIAR

Toda informação é bem vinda.

O que você gostaria em um site para a

8ª Noel - 45 anos - Masculino

agricultura familiar ?

Gostaria de preço, informação de o que

Há quanto tempo é agricultor? E que

plantar, previsão de mercado, e tempo

tipo de cultura você tem e já teve ?

de plantar. Qual é a mais valorizada pra

Desde os 9 anos. Plantei milho, salsa e um

exportação.

pouco de feijão, agora mais milho e fumo.

De onde vem o seu conhecimento para

9ª Josnei - 30 anos - Masculino

plantar?

Veio dos meus pais.

Há quanto tempo é agricultor? E que tipo de cultura você tem e já teve ?

Como você se baseia para definir o preço

Desde a infância. Tabaco, milho e feijão e

de seus produtos?

batata e hortaliças pra consumo próprio.

A gente faz umas pesquisa, e vê quem paga melhor.

De onde vem o seu conhecimento para plantar?

Como ele sabe que deve proteger a

Aprendi com meu pai.

lavoura, e que tipo de problemas ele já passou com isso ?

Como você se baseia para definir o preço

Já tive uns problemas, mas não tem muita

de seus produtos?

solução.

Na maioria das vezes é tabelado, dai conhecemos o valor e a que classe aquilo

Você conversa e troca informações com

pode ser includo, mas é conforme o mer-

outros agricultores?

cado, que é o comprador que da o preço.

Sempre, essa é a melhor coisa pra saber mais.

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

Quando precisa de orientação onde vai

passou com isso ?

buscar isso ?

O granizo, que estamos sempre sujeitos.

A gente vai na Emater, dai a gente vê com o instrutor pra ver qual tipo de fumo é

Você conversa e troca informações com

melhor pra plantar.

outros agricultores?

Sim, gosto muito, sempre busco conhecer

Tem computador ou celular com acesso

novas atividades e tecnologias

a internet ?

Tenho, mas uso pouco, é mais a minha

Quando precisa de orientação onde vai

filha mesmo.

buscar isso ?

LUCAS HENRIQUE ZEFERINO

127

TCC - WEBSITE

Emater e prefeitura e técnicos das cooperativas.

Tem computador ou celular com acesso a internet ?

Tenho, geralmente é algumas curiosidades de alguma planta ou doença que pode afetar a plantação.

O que você gostaria em um site para a agricultura familiar ?

Orientação técnicas, de manejo cultivo e tecnologia.

10ª João - 32 anos - Masculino Há quanto tempo é agricultor? E que tipo de cultura você tem e já teve ?

Desde que criança. Soja, tabaco e feijão.

De onde vem o seu conhecimento para plantar?

Aprendi com a família.

Como você se baseia para definir o preço de seus produtos? É 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 é definido antes.

Como ele sabe que deve proteger a lavoura, e que tipo de problemas ele já passou com isso ?

Ja, mas temos seguro.

Você conversa e troca informações com outros agricultores?

Sim, buscar coisas novas pra propriedade, sempre em exposições e eventos.

Quando precisa de orientação onde vai buscar isso ?

Procuro um técnico agrícola e agronomo.

Tem computador ou celular com acesso a internet ?

Tenho, mas sem internet.

O que você gostaria em um site para a agricultura familiar ?

Previsão do tempo, informação do solo.

128

UFPR