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