O desenvolvimento de um website envolve, além das questões visuais e técnicas de programação, o pensamento voltado para a Arquitetura da Informação. Em meu Trabalho de Conclusão de Curso utilizei da técnica de cardsorting para se pensar a estrutura do site.
Esta técnica consiste em usar cartões com descrições do conteúdo das páginas de um site e pede-se ao pesquisado que disponha os cartões em grupos, no arranjo que for melhor em seu ponto de vista. Através do reconhecimento de padrões nas disposições feitas por cada pesquisado, estrutura-se a disposição do conteúdo do site.
Já a construção visual do site levou em consideração as suas múltiplas finalidades e múltiplos targets que deverá atender. Através de uma estrutura em blocos, classificados por cores, o usuário poderá identificar sua parte em uma "leitura" rápida pelo site. Além disso, busca-se estimular uma cultura de associação direta a algum elemento visual à área a qual o usuário procura no site, otimizando a navegação e direcionando melhor o usuário para aquilo que ele procura.
The development of a website envolves, besides the visual and programming techniques issues, the thinking and methodologies focusing on the Information Architecture. In my Undergraduate Final Piece, I've used the cardsorting technique to think the website structure.
This research methodology consists of using cards with descriptions of some pages (the content of them) and it is asked to the researched to dispose the cards in groups, in the arrangement that suits best their point of view. Through pattern recognition on the dispositions made by each researched, it is structured the content disposition of the website.
Now, or the visual construction of the website, I took into consideration its multiples finalities and targets that the site should reach. With a structure of blocks, classified by colors, the user can identify their part in a quick "read" of the website. Besides that, it aims to stimulate a culture of direct association to any visual element to the area which the user searches on the page, optimizing the navigation and directing the user in a better way.
O design faz uso de uma palheta de cores principal, composta de tons de azul (remetendo ao logotipo da UFF), o verde (para Ensino), o roxo (para Pesquisa) e o cinza (para Internacional). Extensão, Institucional e Notícias utilizam outros tons de azul, não utilizados na escala cromática da identidade da Universidade. Acrescido a isso, o uso de tipografias modernas e de fácil leitura ditam o tom de facilidade de acesso e universalização do acesso.
Além disso, o Portal Institucional contempla uma estrutura própria para os casos em que o site é voltado para um órgão interno (Pró-Reitoria ou Superintendência, por exemplo).
The design of the website makes use of a color palette mainly composed by shades of blue (referring to the UFF's logo), the green (to Teaching), the purple (to Research) and the gray (to Internationalization). Outreach, Institutional and News uses other shades of blue, not used on the chromatic scale of the University. Accompanied by this, the use of modern and ease-reading typos dictates the tone of access and universalization of the technology.
Besides that, the Institutional Portal also has a proper structure for the cases that the website is focused on a internal office (like a Pro-Rectory or Superintendence, for example).
Antes de todas as pesquisas e validações, precisa-se estabelecer diretrizes. A reunião deste conhecimento (obtido no desenvolvimento dos protótipos do site, da desk research e das pesquisas informais com os usuários) resultou no Guia de Diretrizes para a presença online da Universidade Federal Fluminense, documento que acompanha, condensa e instrui as tendências que nortearão toda a presença da marca UFF na internet.
Before all the researches and validations, it is necessary to establish guidelines. The gathering of all this knowledge (obtained from prototyping, desk research and informal researches with users) resulted on the Book of Guidelines to the online presence of Universidade Federal Fluminense, a document that accompanies, condenses and instruct the trends that will north all the online presence of UFF on the web.
O Comitê Gestor da Comunicação da UFF, criado a partir deste Guia, deverá atender os requisitos mínimos especificados e eles serão responsáveis por decidir quaisquer mudanças nas plataformas de comunicação online. O Comitê seria escolhido pelos chefes superiores (Pró-Reitores, Superintendententes etc.) de acordo com a disponibilidade de cada órgão.
Em trabalho direto com o Comitê, as Pró-Reitorias, Superintendências, Escritórios, Coordenações de Curso e Diretores de Faculdades/Institutos deverão elencar pessoas responsáveis pela manutenção e atualização de suas respectivas áreas nos portais e sistemas da UFF. Tal diretriz busca promover uma cultura de manutenção constante dos canais online das instituições.
Além do Comitê, o Guia discorre sobre orientações para o padrão editorial da comunicação da UFF e instruções para tradução dos websites. Todo o trabalho desenvolvido para o Guia deverá ser revertido em valor de marca (valor metafórico, de associação) para os usuários.
The Management Committee to UFF's Communication, created with this Book, should attend the minimum requirements specified and they'll be responsible to decide any changes on the platforms of online communication. The Committee will be chosen by the superior chiefs of the University (the Pro-Rectors, Directors etc.) according to the availability of each office.
In straight relation with the Committee, the Pro-Rectories, Superintendencies, Offices, Courses Coordinations and Institute/Faculties Directors should pick representatives responsible for the maintenance and update of their respective areas on the Portals and Systems of UFF. This guideline aims to promote a culture of constant upkeeping of the online channels of the institution.
Beyond the Committee, the Book talks about orientations to the editorial standard of UFF's communication and instructs about websites translations. All the things developed for the Book should be reverted in brand value to the users.
A aferição dos resultados atingidos foi através de pesquisas qualitativas porém voltadas para a Usabilidade. Os testes utilizados em meu projeto são chamados de First Click Test (Teste de Primeiro Clique em tradução liberal) e Testes de Preferência.
A rodada de pesquisas incluiu o desenvolvimento de três tarefas (classificadas em Fácil, Médio e Difícil), tanto para o layout atual quanto para o proposto e enviadas para 24 pessoas distintas. O resultado das tarefas demonstrou uma diferença substancial na solução das tarefas por parte dos pesquisados do layout proposto em relação aos pesquisados do layout atual. Estes desenvolveram as atividades com uma taxa de acertos inferior e demorando mais tempo para solucioná-las.
The gauging of the results were reached through some qualitative researches focused on usability. The tests made on my project are called First Click Test and Preference Test.
The research round included the development of three tasks (classified as Easy, Medium and Hard) both for the actual and the proposed layout and sent to 24 different people. The result of the tasks showed a substantial difference in the solution of the tasks by the researched with the proposed layout in relation to the researched with the actual layout. These developed the activities with a hit rate lower than those and taking more time to solve them.
A terceira e última leva de pesquisas consistiu em três Testes de Preferência, em que se pergunta ao pesquisado e a resposta está entre optar por um ou outro layout de website. Ao fim, comprovou-se a eficácia do layout proposto sobre o layout atual, pois é estatisticamente mais amigável e aceito pelo público-alvo que utiliza o site, além de ter sido desenvolvido, desde o princípio, com foco no usuário.
The third and last round of researches consisted of three Preference Tests, which I asked the researched and the answer was in choosing the actual or the proposed layout. By the end, it was proved the efficiency of the proposed layout over the actual one, because the new one is statistically and preferably more friendly and accepted by the target that uses the website, besides being developed, since day zero, focusing on the user.
