1
ÍNDICE
INTRODUÇÃO .............................................................................................................................3 OBJETIVOS ................................................................................................................................4 PÚBLICO-ALVO ..........................................................................................................................5 CONTEÚDOS DO WEBSITE ..........................................................................................................6 ESTRUTURA DO WEBSITE ...........................................................................................................7 FORMAS DE NAVEGAÇÃO ...........................................................................................................9 INTERFACE ..............................................................................................................................10 OPTIMIZAÇÃO ..........................................................................................................................12 AS REDES SOCIAIS ...................................................................................................................13 ESTÉTICA.................................................................................................................................14 DESIGN ....................................................................................................................................16 USABILIDADE ...........................................................................................................................17 ACESSIBILIDADE ......................................................................................................................18 LAYOUT ...................................................................................................................................19 CONCLUSÃO ............................................................................................................................22 BIBLIOGRAFIA ..........................................................................................................................23
2
INTRODUÇÃO Este projeto é uma solução de melhoria para o site da Escola Superior de Educação em Ciências Sociais (http://www.esecs.ipleiria.pt/Paginas/default.aspx). Escolhi este site não por achar que precisa urgentemente de uma nova cara, mas porque como estudante, e usando isso a meu favor (pois considero que a maioria dos utilizadores estão na mesma situação que eu) poderiam ser feitas melhorias para que este fosse mais funcional e acessível. Utilizei vários sites online para me ajudarem a fazer uma análise do que poderiam ser melhorado e otimizado e para retirarmos o máximo partido do que temos. Sendo assim vou apresentar uma proposta do que eu acho que poderia ser feito para melhorar a experiência do utilizador.
3
OBJETIVOS O objetivo deste projeto é melhorar o website da escola valorizando a relação entre o interface e os conteúdos do mesmo. Achei necessário fazer esta reestruturação por achar que o site poderia ser mais apelativo e mais funcional a todas as pessoas. Desta forma quero manter o público fiel e cativar mais pessoas a interessarem-se pelo mesmo. A ideia seria pegar então no website atual e dar-lhe uma nova cara e uma nova organização. Para isto quero utilizar quatro objetivos específicos da comunicação, sendo estes a persuasão, a informação, o entretenimento e a educação. A persuasão vai permitir atrair o públicoalvo através da lógica - a lógica de que este trás vantagens ao ser utilizado. Se o novo site se mostrar claramente mais útil será mais fácil persuadir o utilizador a navegar no mesmo. A informação é um dos grandes pontos-chave a favor do site pois é uma das principais razões pela qual é visitado. O objetivo aqui é tornar a informação mais visível, mais fácil de procurar e mais clara. No que diz respeito ao entretenimento a minha visão era criar alguma coisa que mante-se o utilizador ocupado sem se aperceber aliando isso aos outros três objetivos da comunicação. E por fim a educação, que penso que se explica a ela própria. A ideia seria que o público-alvo pudesse reter algum conhecimento enquanto navega pelo website. Estes são os novos objetivos deste site que apesar de não ser um completo caos merece mais atenção pois se estiver mais organizado pode até ajudar e facilitar o trabalho de outras entidades, como por exemplo os serviços académicos.
4
PÚBLICO-ALVO O público-alvo do website tem entre 18 e 65 anos, vive em Portugal (ou estuda em Portugal), é de ambos os sexos e pertence às classes sociais B, C1, C, C2 e D. A deliberação do público tem em conta que estamos a falar de uma universidade e apesar de maioritariamente serem jovens que ocupam grande parte da comunidade escolar estendi o público-alvo até ao 65 pois existem pessoas que só decidem ingressar no ensino superior mais tarde e iniciativas como a dos 60+, em que pessoas com mais de 60 anos podem agora tirar um curso superior. O objetivo do projeto passa por criar um site que seja acessível a todos e fácil de entender independentemente da idade, cultura, estrato social, etc...
5
CONTEÚDOS DO WEBSITE O website tem um grande número de conteúdos pelo que vai ser sempre um pouco mais complicado de os organizar de maneira clara e simples, no entanto estes não podem ser removidos pois são informações que podem ser importantes para vários utilizadores. Os conteúdos passam por despachos, informações sobre os cursos, informações sobre a escola, contactos, etc… Todos estes se irão manter mas serão arrumados de uma maneira mais simples e mais prática do utilizador chegar até eles. Quanto a novos conteúdos gostava de introduzir a mascote, do deporto, do Instituto Politécnico de Leiria, daqui em diante IPL, em forma de Internet bot. Um Internet bot é uma aplicação de software concebido para simular ações humanas repetidas de maneira padrão, e pode ser implantado em sites em que há comunicação com o utilizador ou é necessária comunicação semelhante à humana. Esta nova medida pode poupar valiosos segundos de pesquisa ao utilizador e pode ainda aliviar a carga de trabalho de vários serviços da escola que são contactados muitas vezes para ajudarem na pesquisa de alguma informação que se encontra no site mas não está à vista. Este poderia responder a questões sobre cursos, contactos, eventos, etc… mas para além disso é uma maneira mais interativa de interagir com o utilizador. Quando o bot não soubesse responder a uma pergunta facultaria os dados de contacto da escola como o email ou o número de telefone de vários serviços.
6
ESTRUTURA DO WEBSITE A estrutura organizacional do website é uma das principais coisas que quero mudar. De momento existem muitos tópicos espalhados pela página, o que pode criar uma certa confusão na cabeça do utilizador, especialmente se este não estiver habituado a frequentar sites do mesmo estilo. É necessário fazer algo simples e direto assim como intuitivo. Estas medidas fazem não só com que a experiência de pesquisa seja mais agradável mas também com que o utilizador sinta vontade de voltar da próxima vez que tiver uma dúvida. Atualmente a estrutura do website é a seguinte:
Podemos observar quatro locais distintos onde encontramos informações pertinentes. O facto de haver tanta informação numa só página confunde o utilizador fazendo com que esta não seja tão navegável como poderia ser pois está muita coisa a acontecer ao mesmo tempo. Isto complica a tarefa de procurar certas respostas no site. Nenhum utilizador gosta de andar para trás e para a frente numa página à procura da informação.
7
A minha proposta para a estrutura do site seria a seguinte:
A primeira barra seria a barra de menus, e barra final serve apenas para os contactos e outros tópicos menos importantes mas pertinentes, e os três retângulos servem apenas para um tópico e são rotativos como poderemos ver mais a frente no layout final.
8
FORMAS DE NAVEGAÇÃO A forma de navegação do site não vai fugir muito ao que já está a ser usado no momento. No entanto para facilitar e tornar a navegação mais simples decidi incorporar drop down menus. Um drop down menu é um elemento gráfico, similar a uma lista que permite ao utilizador escolher um tópico dessa lista. Quando a lista está inativa o que nos é apresentado é apenas um tópico. Somente quando carregamos nesse tópico podemos ver em forma de lista todos os outros assuntos. Esta nova forma de navegação vai fazer com que o utilizador tenha informação mais detalhada sobre o que procura sem ter que sair da home page. Para além de ocupar menos espaço na página reduzindo a sensação de caos fica esteticamente mais bonito, o que é um ponto a favor, pois quanto mais agradável a experiência maior a probabilidade do utilizador voltar. Outro elemento que quero incorporar são os slideshows, que apesar de já existirem no site atual, para além de desalinhados não estão muito funcionais. Os slides irão então ficar no local dos três retângulos que foram apresentados na nova estrutura do website no tópico acima. A ideia é tornar a navegação mais intuitiva e mais simples.
9
INTERFACE O interface tem vários significados que ao longo do ano têm vindo a mudar. Atualmente é aceite, também, como o painel de controlo gráfico que os utilizadores usam para interagir com um dispositivo de hardware, apesar de este poder ter vários significados. Para me guiar neste projeto usei as 7 leis de Carlos Scolari. 1- O interface é uma metáfora: Scolari acredita que os interfaces são dinâmicos nas mãos dos usuários e é onde acontecem os processos semióticos e cognitivos. 2- O interface não é transparente: Os utilizadores pensam sempre em novas maneiras de utilizar os interfaces, de os interpretar os muitas vezes de se desviarem da finalidade pretendida. Com este novo interface do website o objetivo é evitar que isto aconteça e que as coisas sejam o mais claro possível. 3- Os interfaces formam um ecossistema: Um interface nasce da fusão de duas tecnologias ou de uma tecnologia e de um utilizador. É de evitar a ausência de dialogo do interface com a restante rede. 4- Os interfaces não desaparecem, transformam-se: Os interfaces podem renascer e reencarnar em novos dispositivos. Estão em constante adaptação a diferentes formatos e dispositivos de tecnologia. 5- Se um interface não consegue realizar algo, simulá-lo-á: Os interfaces são restritos ao seu meio tecnológico e nem sempre pode simular a interação do "mundo real". Quando isso acontece, os designers e engenheiros usam protocolos e processos para tornar a interação mais natural. Por exemplo, nós vivemos num mundo de três dimensões físicas, mas muitas vezes a tecnologia é-nos apresentada de maneira bidimensional. No mundo real usamos papel, pastas, etc… os designers tentam imitar estes “objetos” banais através da criação de efeitos tridimensionais no nosso computador. Desta forma, os utilizadores não têm que reaprender integralmente um novo vocabulário visual. 6- Os interfaces co evoluem com os seus utilizadores: Os utilizadores aplicam os seus conhecimentos e compreensão a qualquer interface que lhes seja apresentado. Eles podem optar por aceitar o interface e realizar as interações para as quais ele foi desenhado, negar o interface e as suas capacidades e por último, ao longo do uso do interface tentar fazer com que este atue como nunca foi projetado para atuar. Este último
10
é útil na medida em que podemos descobrir novas formas de evoluir o interface e novas ideias para novos interfaces. 7- Os interfaces estão sujeitos às leis de auto-organização: Este ponto foca a organização em que se estabelece a evolução do interface. Novas trocas podem produzir novos usos e permitir que o interface cresça.
11
OPTIMIZAÇÃO O site atual tem alguns problemas como: o menu, que tem pouca visibilidade; não existe diferenciação da informação importante da menos importante; a agenda está a ocupar espaço desnecessário porque pode até não ter dia nenhum… Depois de alterar todos estes pontos negativos temos de ter a certeza que temos um site que não só se adapta bem aos utilizadores do computador mas a outros meios também. Quero com isto dizer que este tem de ser responsive, isto é, que se adapta automaticamente se o utilizador estiver num pc, tablet ou telemóvel, de maneira a que fique sempre bem, funcional e fácil de utilizar. É também importante auditar o website no que diz respeito ao seu código - à linguagem de programação. Num determinado conteúdo devemos estabelecer o que é o título, subtítulo e parágrafos pois faz toda a diferença de como o conteúdo é visto, tanto para o robô do motor de busca, como para o utilizador (nada mais agradável do que ler uma notícia bem formatada). Para tal, devem utilizar-se as tags H1 (títulos), H2 (subtítulos, quando existirem) e H3 (parágrafos), assim como evidenciar pontos chaves no conteúdo pelo uso da tag "strong" (bold). O correto uso de listas, como já foi referido acima, também ajudam na visualização e na qualidade, assim como imagens e vídeos são extremamente bem-vindos para enriquecer ainda mais o conteúdo.
12
AS REDES SOCIAIS O Facebook tem-se mostrado uma ótima forma de conseguir mais tráfego para sites, blogs, e lojas virtuais na internet. Divulgação no Facebook serve para qualquer tipo de negócio, seja on-line ou off-line. Achei pertinente falar deste tópico neste projeto pois as redes sociais têm sido cada vez mais um instrumento de divulgação e difusão de várias mensagens, com o incrível bónus de que a maioria são gratuitas reduzindo assim custos da divulgação do nosso produto. Acho relevante o site da ESECS ter uma página no Facebook pois permite chegar de maneira rápida aos utilizadores. Nesta poderia ser anunciado o novo design da página e também explicadas as novas funcionalidades que esta contém. Assim seriam levados ate à página e era evitada aquela sensação de choque quando entrassem no site pois saberiam à partida que algo teria mudado. Seria útil uma certa relação entre o site e o Facebook no que diz respeito a determinados tópicos, como por exemplo, atividades que existam na escola ou workshops, que muitas vezes passam despercebidos no site e acabam por ter pouca adesão. Penso que não era necessário para a escola ter outro tipo de redes socias, visto que o Facebook é a mais usada e já teria um grande alcance.
13
ESTÉTICA Como já deu para entender pela nova estrutura que apresentei do website a parte estética deste também vai ser alterada. Quanto mais harmonioso e atrativo for mais pessoas atrai para ele. Atualmente este não é muito atraente, existem contudo, algumas opções mínimas para o personalizar como cores e o tamanho das letras, e nota-se que houve uma preocupação por parte de quem o “editou” de dar alguma personalização. Não lhe vou retirar a simplicidade, pelo contrário a minha ideia seria acentuá-la. Para o tipo de letra vou usar o Helvetica, algo bem simples e com vários estilos para podermos dar alguma personalização para além de que já é aceite pela maioria e tem uma boa visibilidade. Para as cores pretendo ficar pelas neutras como brancos, beges, e cinzentos e uma cor de mais forte de destaque que será o azul pois é uma cor bastante institucional. Como sempre tento reger-me pelas “Leis da simplicidade” de John Maeda. Dez leis para balancear simplicidade e complexidade no design – diretrizes e orientações para precisar menos e, de fato, ganhar mais. A base deste novo design assenta sobretudo em três leis do John Maeda reduzir, organizar e tempo.
REDUZI R - O modo mais acessível de alcançar a simplicidade é através de uma poderosa redução. Para isso decidi reduzir o número de tópicos que se encontram no site e organiza-los de uma maneira mais simples e arrumada, o que o torna significativamente mais simples. Devemos sempre reduzir opções que não tragam vantagens para o utilizador, como por exemplo o calendário que está na página atual.
O RGANI ZAR -
A organização faz com que um sistema de muitos pareça de poucos.
Baseando-me neste ponto, decidi organizar de maneira mais eficaz os tópicos da plataforma, como tem vindo a ser referido ao longo deste projeto, para que estes não estejam todos empilhados, como é o caso atual.
14
TEMPO- Economias de tempo sĂŁo sentidas como simplicidade. NinguĂŠm gosta de passar uma hora num site hĂĄ procura de qualquer coisa e por isso quanto mais simples e organizado este for mais depressa os utilizadores encontram o que procuram.
15
DESIGN Existem quatro princípios básicos do design: alinhamento, proximidade, contraste e repetição. O alinhamento é uma noção muito importante do design e faz uma grande diferença na maneira como um utilizador olha para a página. Neste novo layout que estou a projetar a ideia e ter a maioria dos elementos centrados, sem numa me esquecer que o olhar do utilizador, do ocidente, começa sempre a olhar para alguma coisa do canto superior esquerdo e descendo pela lateral. São noções importantes e a ter em conta quando se constrói algo para uma grande massa de pessoas. A proximidade ensina-nos que elementos semelhantes ou que estejam interligados têm de estar juntos. Partindo deste principio o novo esqueleto base do site não se transforma sendo sempre igual o que cria uma sensação de unificação mesmo quando mudamos de página. Esta medida evita também que o utilizador de confunda ou se perca no website. O contraste não é só cor, mas elementos também. Uma frase com tipografia diferente do restante texto pode ser contrastante. Até uma palavra ou frase a negrito pode dar o ar de contraste. Isso serve não só para destacar algo, mas também para diferenciar elementos. Este elemento será usado quando for preciso destacar ou abrilhantar alguma informação. A repetição refere-se ao que foi falado no princípio da proximidade, ou seja, a estrutura base do novo site tem de aparecer repetida em todas as outras páginas que forem abertas. Desta forma em qualquer tópico que clicarmos sabemos que o menu estará exatamente no mesmo sítio. É um princípio bastante simples mas muito útil na navegação.
16
USABILIDADE A usabilidade é um atributo de qualidade dos produtos que permite aferir se uma interface com o utilizador é fácil de utilizar. A usabilidade pode ser definida em 5 dimensões, sendo estas, a aprendizagem, a eficiência, a memorização, a robustez, e a satisfação. Existem ainda outros tópicos que podem ser importantes como por exemplo a utilidade do design. Interessa pouco que algo seja fácil de utilizar se não permite fazer o que se pretende. É igualmente inútil que um sistema permita, hipoteticamente, fazer o que se pretende, mas que não consigamos atingir esse objetivo porque a interface é demasiado difícil de utilizar. Na web, a usabilidade é um fator crucial de sobrevivência. Se um website é difícil de utilizar, as pessoas desistem. Se a homepage não apresenta, de forma clara, o que a empresa tem para oferecer e o que é que os utilizadores podem fazer no site, as pessoas desistem. Se os utilizadores se perdem num website, desistem. Se a informação contida num website é de difícil leitura e não responde às questões-chave dos utilizadores, eles desistem. A ideia deste novo website é evitar estas desistências e melhorar a qualidade dos serviços que a escola oferece. Se, a título de exemplo, os serviços académicos passarem a tarde a responder a emails ou a atender telefones de alunos que não conseguem encontrar um despacho no site da escola apenas porque este não estava bem sinalizado, acabam por perder tempo que poderiam gastar a responder a questões mais importantes como por exemplo questões sobre as propinas. A questão da usabilidade por mais simples que pareça acaba por resolver assuntos complexos e forma rápida e simples.
17
ACESSIBILIDADE A acessibilidade é uma questão muito importante nos dias de hoje. É preciso pensar em todo o tipo de público e todo o tipo de obstáculos que possam impedir ao utilizador de ter uma experiência agradável ao usar o website. A primeira coisa que reparei foi que o site da ESECS teve a preocupação de tentar ser user friendly. Existem os botões de aumentar o tamanho do texto, que eu acho que são uma ótima ideia, mas estão mal sinalizados e outro ponto importante que é a linguagem. No entanto quando tentei mudar a língua fui redirecionada para o site do IPL, e não consegui mudar a linguagem no site da ESECS. Quanto a isto a minha proposta seria manter a opção de aumentar o texto (zoom), mas talvez num tópico dedicado à acessibilidade onde estariam também outras opções. No que diz respeito à linguagem seria possível manter toda a estrutura do site mudando apenas a linguagem do mesmo. Num primeiro ponto poderíamos apenas introduzir a língua inglesa pois é a mais comum e a mais provável de ser percebida por pessoas que visitem o site e não falem a língua portuguesa, e num estado mais avançado incorporar outras línguas como o chinês visto que a escola tem um protocolo com alunos chineses. Isto poderiam também ser útil ao tornar-se um projeto para estes alunos que podiam ajudar ao traduzir o website para a sua língua. Outra coisa que gostava de introduzir na acessibilidade era o som (voice over), ou seja, uma opção que ao passarmos o rato por cima da palavra esta era-nos dita através do som. Se pudermos facilitar a vida a uma pessoa que seja já estamos a fazer a diferença.
18
LAYOUT
Este seria um protótipo do resultado final do novo website na escola. Uma página simples e clara. Podemos ver no topo a barra de menus muito similar a que existe no atual site mas com outro visual e um tamanho consideravelmente maior visto que a original tinha uma fonte um pouco pequena. Seguidamente temos o slideshow com a área dos docentes, a área dos alunos e Moodle. Este slideshow tem uns botões no topo que permite ao utilizador navegar por outros tópicos desta secção como o guia do estudante, a acessibilidade, pedidos diversos etc… E por fim a ultima barra contem o bot, ao qual podemos fazer diversas perguntas ( ex: a que horas fecham os serviços académicos? ; Qual foi o último despacho que saiu? ; Que cursos posso encontrar na ESECS? ), a ESECS que no fundo é um pequeno “Sobre nós” e os contactos. Tentei manter o design acessível e compreensível para todos os utilizadores.
19
Na versão mobile decidi optar por esta versão minimalista do site. Esta contem apenas os tópicos principais para uma pesquisa rápida. Neste caso não vi necessidade de criar algo muito pomposo pois os utilizadores do website da escola fazem-no maioritariamente através de um computador, no entanto muitas vezes é mais cómodo aceder à informação através do nosso telefone e por isso é necessário ter uma plataforma que esteja bem adaptada e que seja de rápido acesso.
20
Este website está também otimizado para os utilizadores de tablets. A página tem o mesmo aspeto que teria no computador. Neste caso não achei necessário fazer alterações no modo em como o conteúdo é visualizado pois um tablet tem um ecrã maior e uma melhor potência, o que lhe permite usufruir das funcionalidades deste website como se fosse um computador.
21
CONCLUSÃO Neste projeto abordei o assunto da reestruturação de um website. O website que escolhi foi o da minha própria instituição de ensino pois acho que poderia ser mais aproveitado e tem bastante potencial. Concluí de facto que as melhorias propostas iriam ter um impacto positivo para os utilizadores do site, pois estas tornaram-no mais “amigo” do utilizador, mais fácil de compreender e de mais fácil acesso a todos. Este trabalho foi muito importante para o meu conhecimento pois ganhei noções que não tinha e uma outra visão sobre a usabilidade. Tudo o que sugeri acima é completamente viável pois fiz uma intensa pesquisa sobre o assunto e falei com alguns programadores para saber se as soluções que idealizava poderiam, de facto, ser concretizadas com sucesso. No seu geral, foi um estudo realmente interessante e definitivamente instrutivo, elevando o grau de conhecimento da matéria estudada.
22
BIBLIOGRAFIA https://leandromarshall.files.wordpress.com/2008/01/o-que-c3a9-comunicac3a7c3a3o.pdf http://pt.wikipedia.org/wiki/Persuas達o#Alguns_m.C3.A9todos_de_persuas.C3.A3o http://pt.wikipedia.org/wiki/Bot http://www.esecs.ipleiria.pt/Paginas/default.aspx http://cssmenumaker.com/css-drop-down-menu http://coletivo.virtualad.com.br/index.php/7-leis-de-interface-do-usuario/ http://www.418qe.com/the-seven-laws-of-interfaces http://www.priberam.pt/dlpo/interface http://www.o-que-seo.com/optimizacao-de-sites http://cargocollective.com/tocadolobo/IPL-Sports-Academy https://www.ifixit.com/Device/iPad http://camacaricard.com/estudante.php http://www.tangivel.com/usabilidade http://en.wikipedia.org/wiki/Drop-down_list http://www.tele-centros.org/telecentros/parametro=9861&idioma=br.html https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.esecs.ipleiria .pt%2FPaginas%2Fdefault.aspx&tab=desktop http://www.marketingdigitaldicas.com.br/como-fazer-divulgacao-no-facebook Resumo_interface_7_laws.pdf
23