157
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014.
Foco no ser humano: pensando em usabilidade por meio de responsive web design
Alexandre Pires1 Ricardo Roberto Leme2
Recebido em 12. II. 2014. Aceito em 29. IV. 2014.
Resumo: Esse trabalho realizou a fundamentação teórica de ferramentas e conceitos atuais utilizados em desenvolvimento web, mobile fist, design responsivo e frameworks para frontend, visando o desenvolvimento de um protótipo para Escola Técnica Estadual Fernando Prestes, localizada em Sorocaba, interior de São Paulo, que utilizasse esses recursos e obedecesse as normas da NBR 9241-11. Para a definição do contexto de uso do protótipo foi amparado por uma pesquisa socioeconômica realizada com 706 discentes, o histórico dos últimos 2 anos de visitação ao website da instituição por meio da ferramenta Google Analytics e uma análise heurística do atual website da instituição. Conclui-se através da implementação do protótipo e a posterior pesquisa com os discentes que as tecnologias estudadas puderam ser adequadas ao contexto levantado por meio da análise dos dados o que propiciou a solução dos problemas encontrados e a demonstração dos temas abordados não apenas como tecnologias de ocasião, mas meios reais de promover a usabilidade e integração entre os mais variados dispositivos. Palavras-chave: usabilidade; web design responsivo; mobile first.
Abstract. Focus on the human being: thinking of usability through responsive web design. This work constituted the theoretical foundation of current tools and concepts used in web development, mobile fist, responsive design and front-end frameworks, aiming the development of a prototype to technical school Fernando Prestes, localized in Sorocaba, São Paulo, that utilizes these features and obey to NBR 9241-11 standards. To define the prototype context of use, a social-economical research was realized with 706 students, the current website 2 years access historic and a heuristic analysis of the current website of the institution. It was concluded after the implementation of the prototype and a second research with the students that the technologies studied were appropriated to the context raised by the analysis of the institution scenario, which led to the solution of problems found and the demonstration of the studied themes not only as occasion technologies, but as real ways of promoting usability and integration between the most variety devices. Keywords: usability; responsive web design; mobile first.
1 2
FATEC Itu – alexandre@graffitti.com.br (autor para correspondência) FATEC Itu – ricardo.leme@gmail.com
158
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
1 Introdução
Esse artigo tem o objetivo de apresentar a temática da usabilidade segundo as normas da NBR 9241-11 frente aos desafios do desenvolvimento front-end (interface) atual, como web
design
responsivo
(design
auto
ajustável),
plataformas
(framework)
para
desenvolvimento rápido e tendências com o mobile first, por meio do desenvolvimento de um protótipo para validação e entendimento das necessidades e cenários, além de servir de paradigma para pesquisas e para o desenvolvimento de projetos semelhantes. Como parte da pesquisa, para entendimento desse cenário, questionou-se como a usabilidade pode impulsionar ou inviabilizar um projeto, por meio da experiência e satisfação que o usuário tem ao longo da navegação no website. Este estudo pretende entender a necessidade de seus usuários e apresentar tecnologias de front-end, tendo como hipótese a premissa da capacidade de adaptação aos variados contextos que sugiram com o crescente do uso de aparelhos mobile, e sua importância como solução para problemas de usabilidade e experiência do usuário. Para apontar como se comporta o desenvolvimento dos recursos de front-end segundo a NBR 9141-11, foi desenvolvido um protótipo de website para a Escola Técnica Estadual (ETEC) Fernando Prestes, que atenda aos requisitos de usabilidade e ergonomia levantados com base em uma análise heurística, coleta de dados referentes perfil dos discentes, que servirão para definição do grupo de usuários padrão que farão uso dos recursos propostos no protótipo e por meio dos dados de comportamento extraídos dos históricos da ferramenta Google Analytics, para entender e validar a navegação dos usuários dentro do atual website da instituição. O trabalho está organizado em cinco seções. Na segunda seção, são apresentados os trabalhos relacionados encontrados na literatura. Na terceira seção, apresentamos a fundamentação teórica. Na quarta seção, são descritas o resultado da análise da criação do protótipo. Por fim, na sexta seção, são feitas as considerações finais.
159
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
2 Trabalhos relacionados
Um trabalho que merece destaque é desenvolvido por Barboza, Nunes e Sena (2000), que realizou a análise de websites governamentais, e que também se embasou na NBR 914111 e seguiu uma lista de critérios e recomendações ergonômicas e apontou a necessidade de correções e adequações. Outro trabalho relevante que faz a demonstração de uma análise de requisitos não funcionais de usabilidade real, desenvolvido por Ferreira e Leite (2003), traz uma análise realizada sobre o website do Submarino, e aponta a diversificação de usuários e a necessidade de se projetar uma interface que possa ser usada de formas variadas para atendê-los. Mais um trabalho relacionado é o desenvolvido por Pereira Junior e Capeto (2000), que fazem uma listagem de fatores que auxiliam a busca para garantir a usabilidade e eficiência, e que devem ser testados em um website, permitindo a preparação de avaliadores.
3 Fundamentação teórica 3.1 Usabilidade na web
Os websites utilizados atualmente são bem diferentes e trazem muito mais recursos que há 10 anos atrás, recursos multimídia, de navegação, interatividade, compartilhamento entre uma lista repleta de possibilidades, que cresce cada vez mais na busca de proporcionar uma experiência de navegação única e diferenciada para os usuários. Pensando nesses recursos e como eles são de fato entendidos e utilizados pelos usuários podemos adotar a NBR 9241-11 (norma técnica da Associação de Normas Técnicas (ABNT)), suas orientações “podem ser usadas na aquisição, projeto, desenvolvimento, avaliação, e comunicação da informação sobre usabilidade” NBR 9241-11 (2002, p.2), e por meio dela podemos esclarecer “os benefícios de medir usabilidade em termos de desempenho e satisfação do usuário” NBR 9241-11 (2002, p.2). Dessa forma torna-se possível mensurar por meio da NBR 9241-11 como o usuário encara uma tarefa, trabalha para desenvolvê-la até
160
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
atingir um determinado objetivo pretendido. Essa é uma das formas de se mensurar e qualificar a experiência de um usuário ao navegar em uma página da Web. Mas para isso é imprescindível que entendamos o que é usabilidade para podermos mensurá-la e tratá-la adequadamente, segundo a NBR 9241-11 (2002, p.3), usabilidade é “Medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação em um contexto específico de uso”, já para Benyon (1990, apud SHACKEL, 2011, p. 49) a definição original de usabilidade é de que os sistemas devem ser fáceis de usar e de aprender, flexíveis e devem despertar nas pessoas uma boa atitude. Apesar de duas definições em partes diferentes ambas abordam duas faces, uma técnica outra mais humana, que faz da usabilidade um aspecto básico e que deve ser abordado em qualquer projeto.
3.2 Mobile first
Mas como essas definições de usabilidade podem ser aplicadas em dispositivos móveis, aonde temos uma área de exibição de informações bem menor, na maioria das vezes o cursor do mouse antes utilizado em um computador convencional, é substituído pelo toque dos dedos da mão, outro problemas relevante é o desempenho baixo da internet móvel em algumas regiões ou países. Segundo pesquisa da International Data Corp, desde o último trimestre de 2010, a venda de smartphones ultrapassa a de computadores pessoais em escala global (WEINTRAUB, 2011). O barateamento da tecnologia e o aumento do poder dos sistemas operacionais que são executados nesses aparelhos são fatores que ajudam a impulsionar a venda e uso de dispositivos mobile, e a partir do momento que esses dispositivos passam a ser um agente de acesso à internet é necessário uma revisão de conceitos, como o vislumbre de que um website é acessado exclusivamente por meio de um computador convencional ou notebook. Passando assim não ser possível prever por onde um website será acessado. Como relatado por Wroblewski (2011), websites e aplicativos devem ser preparados e desenvolvidos sempre pensando primeiramente no ambiente móvel, mesmo que não haja planos inerentes por parte das organizações para essa plataforma, essa premissa também é
161
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
solidificada Eric Schmidt, então CEO do Google, na DLD (Digital-Life-Design) Conference, de 2011, aonde também diz que esse ambiente móvel traz uma forma de interação que sua geração nunca viu. Entendendo esse momento não apenas de dificuldade da transição para uma nova plataforma mas também a oportunidade que isso representa, existem algumas condições que necessitam ser pensadas para que o acesso a partir de dispositivos móveis seja possível em especial quanto ao layout dos websites Wroblewski (2011, p 108, tradução nossa) coloca os seguintes pontos:
Conheça navegadores móveis você está criando projetos para eles. Seja flexível, fluído e responsivo em seus layouts. Saiba onde esboçar as linhas em conjunto com as experiências do dispositivo. Reduza ao mínimo necessário.
Esses pontos trazem importantes premissas e que devem ser considerados em qualquer projeto web que pretenda atingir a plataforma mobile: ser flexível, fluido e responsivo, e principalmente, pensar com foco, e reduzir ao mínimo necessário, reduzindo elementos, textos, imagens para o que realmente for necessário ao usuário e principalmente entender que quem decide o que é necessário e a melhor forma de ser utilizado é o usuário e isso não pode ser definido aleatoriamente.
3.3 Frameworks para front-end
Conforme um projeto Web vai crescendo e mais pessoas trabalham em seu desenvolvimento, cada vez mais torna-se impreciso saber como cada um dos profissionais envolvidos estão trabalhando o layout ou estrutura do projeto para que ele atenda às necessidades encontradas durantes o projeto ou desenvolvimento como exibição de conteúdos dinâmicos, formulários, validações, disposição de informações, entre outros cenários possíveis. Para uniformização e redução de tempo na prototipação ou na construção e desenvolvimento front-end, surge a demanda da utilização de frameworks (EIS, 2013). Segundo o dicionário Michaelis, a palavra framework pode ser traduzido da seguinte forma “s. armação f.; estrutura f.” (MICHAELIS, 2003, p. 106), aplicando isso ao ambiente
162
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
de front-end, seria um conjunto de classes em CSS (Cascading Style Sheets) e, ou plug-ins em javascript, que servem de estrutura para prototipação, uniformização, desenvolvimento e redução do tempo na criação de recursos ou solução de problemas com base em experiências passadas. Essas estruturas fornecem subsídios para o projeto ao longo de todo seu ciclo de vida, facilitando desde o momento de sua prototipação, já que ele fornece recursos já construídos para situações rotineiras de um projeto como botões, menus, hyperlinks, grids, formulários, tipográficas etc, até futuras manutenções, já que o código e a estrutura tendem a ser uniformizados, e caso haja a necessidade da alteração de alguma parte ou recurso do projeto, essa pode ser feita sem grandes esforços ou modificações radicais. Por esses motivos cada vezes mais crescem quantidade de frameworks pré-fabricados disponíveis para download e utilização, como por exemplo o Twitter Bootstrap, que surgiu em 2011, iniciado e mantido pelo Twitter, atualmente na sua versão 3.0.0. Ele fornece uma grande estrutura de classes em CSS e plug-ins em javascript, com foco em mobile first e desenvolvimento responsivo, e pode ser baixo de forma gratuita através do GitHub3, onde também os usuários podem contribuir para o projeto submetendo melhorias ou correções para problemas encontrados no framework (Open Source). O mesmo acontece com o framework Foundation, criado pela ZURB, UIkit da YooThemes, Pure da Yahoo etc. A utilização desses frameworks podem fornecer recursos para usabilidade ou acessibilidade em um projeto, ajudando a atender algumas definições da NBR 9241-11, como eficácia e eficácia com que o usuário atinge objetivos, uma vez que o framework padroniza o desenvolvimento e a forma como as informações serão exibidas para o usuário, podendo assim prover uma capacidade de aprendizado mais rápida e uma satisfação maior no seu uso, sempre contemplando o contexto de uso. Com o grande número de frameworks existentes alguns websites como Responsive CSS Framework Comparison4 e A Collection of Best Front-end Frameworks for Faster and Easier Web Development5 que oferecem comparações entre esses frameworks para que haja um critério de desempate para adoção de um deles de acordo a necessidade do projeto, para o
3
https://github.com/twbs/bootstrap http://responsive.vermilion.com/compare.php 5 http://usablica.github.io/front-end-frameworks/compare.html 4
163
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
desenvolvimento do protótipo referente a pesquisa desse trabalho foi adotado o UIKit, os motivos e sua utilização serão descritas no capítulo 4.4 desse trabalho.
4 Criação do protótipo
Para o estudo e aplicação da NBR 9241-11 em um projeto real que contemplasse tanto o uso de um framework para front-end como desenvolvimento responsivo, foi proposto o desenvolvimento de um protótipo para a Escola Técnica Estadual Fernando Prestes, criada em 30 de dezembro de 1921 e instalada em 09 de junho de 1929 na cidade de Sorocaba, atualmente com 16 cursos entre presenciais e não presenciais com foco no eixo tecnológico, é a mais antiga escola técnica da cidade. Pela necessidade de informar sobre seus cursos, localização e informações úteis aos alunos, a 14 anos a instituição mantem uma página na web. Esse website já passou por diversas remodelações ao longo desse tempo e a 3 anos é mantido pelo alguns docentes da ETEC. Seu desenvolvimento sempre foi de acordo com as necessidades e demandas que surgem, logo não houve a preocupação com a adoção de uma estrutura padrão de criação das páginas, codificação, mobile ou usabilidade.
4.1 Levantamento de dados da ETEC
Como parte do estudo para esse artigo, foi fornecido pela ETEC Fernando Prestes uma pesquisa realizada por eles no início do ano de 2013, contendo dados do perfil socioeconômico dos alunos que ingressaram na instituição. A coleta e análise desses dados visa definir o perfil do usuário que irá acessar website, a fim de chegar a melhor eficácia para apresentação das informações e resultados obtidos. A pesquisa foi realizada com 706 pessoas, com faixa etária variada, de 15 até 60 anos. Um dado relevante que é absorvido por meio da pesquisa é o grau de escolaridade dos entrevistados, o questionário foi aplicado aos alunos justamente com a prova do vestibulinho,
164
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
por esse motivo existem alguns dados como “Ensino médio incompleto”, pois até a realização da prova ele ainda cursava o ensino fundamental. É possível observar que boa parte possui como base o ensino fundamental completo, esse dado ajuda na construção dos elementos dentro da interface, demonstrando qual deve ser a limitação da complexidade da estrutura do website. Esse dado serve como indicação, não apenas para a estrutura, mas também apontam quais os possíveis conteúdos que despertem mais interesse quando eles o utilizarem. O mesmo se aplica a renda familiar, sexo do entrevistado e o fato de estar empregado ou não.
Gráfico 1. Dados do sexo e grau de escolaridade dos alunos ingressantes no primeiro semestre de 2013. Fonte: ETEC Fernando Prestes.
Gráfico 2. Dados dos alunos empregados ingressantes e de renda familiar em salários mínimos (s.m) no primeiro semestre de 2013 (Valor do salário mínimo: R$ 678,00). Fonte: ETEC Fernando Prestes.
165
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
Ambos os gráficos ajudam a criar um perfil do usuário, para que seja possível especular qual a sua visão diante dos dados apresentados e qual deve ser o nível de experiência do website, para que as tarefas propostas não ultrapassem as suas capacidades, interesses ou que as informações apresentem falta de objetividade. Esses fatores podem ser possíveis motivadores de um indicador que será apontado no próximo capítulo, a Taxa de Rejeição. Outro dado levantado e que impacta diretamente na construção do protótipo e que pode apontar qual o nível da habilidade do usuário no uso de um computador com o fim de acessar a internet, é o fato dele possuir ou não internet na sua residência.
Gráfico 3. Dados dos alunos que possuem internet em casa que ingressaram no primeiro semestre de 2013. Fonte: ETEC Fernando Prestes. O gráfico permite concluir que mesmo que esporádico os alunos que estão ingressando na ETEC, faz ou já fizeram uso da internet para algum fim, indicando o conhecimento de elementos básicos encontrados em qualquer website, como hyperlinks, menus, botões, imagens, formulários etc. Esses dados contribuem para a construção de um perfil social e humano dos prováveis usuários do website, ajudando a adequar a interface as suas necessidades e buscando reduzir ao máximo o desconforto durante seu uso.
166
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
4.2 Análise do histórico do Google Analytics
Como parte do levantamento de dados da pesquisa para entendimento de qual é o público alvo do website, como ele se comporta ao utilizá-lo, qual navegador e sistema operacional usa, qual sua localização geográfica e quanto tempo permanece no website, foi utilizado o histórico de dados do Google Analytics para análise. A ferramenta Google Analytics “oferece análise digital avançada para qualquer pessoa com uma presença na web” (GOOGLE, 2013). A ferramenta oferece diversas informações de como é a experiência do usuário ao navegar pelo website, desde e o acesso até o momento que a experiência termina e o usuário deixa a página. Um das formas desse acompanhamento acontecer é via javascript, incluso em cada página do website, “Este snippet de código ativa o acompanhamento do Google Analytics em seu website, que coleta e envia a atividade dos visitantes” (GOOGLE, 2013). O código javascript está inserido no website da ETEC Fernando Prestes desde outubro de 2011, gerando relatórios diários que possibilitam uma análise sólida de padrões na utilização do website atual, além de ajudar a qualificar os conteúdos mais acessados e relevantes para a montagem do protótipo.
Figura 1. Dashboard da conta da ETEC Fernando Prestes no Google Analytics. Fonte: https://www.google.com/Analytics/. Dentro do Google Analytics existem inúmeras possibilidades de relatórios, não apenas para entender os acessos, mas também para ajudar na conversão de metas, para elaboração do protótipo de um website pensado para mobile (mobile first), foram analisados os dados de
167
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
visitas e visitas únicas (Figura 1), a diferença desses dois números representa o total de pessoas que visitaram o website mais de uma vez, ou seja do total 39,8% (135.530 acessos são de visitantes que retornaram, ou seja tiveram mais de uma interação com o website), outro dado levado em consideração foi a taxa de rejeição, 57,06%, que representa acessos únicos de pessoas que tiveram apenas uma interação com o website, e que a página de entrada foi a mesma de saída, o fato desse número elevado pode ser devido à falta de objetividade ou relevância da página e seu conteúdo durante o acesso ou no direcionamento da indexação da página para o Google.
Figura 2. Relatório de acessos por plataforma ao website da ETEC Fernando Prestes. Fonte: https://www.google.com/Analytics/ O relatório (Figura 2) aponta que apesar de pequena a porcentagem de acessos realizados por dispositivos mobile 3,12% (celulares e smartphones) e 0,87% tablets, juntos eles representam mais de 12 mil acessos e poderiam ser melhor capitalizados se o website estivesse preparado para receber essa demanda, e também é possível observar que mesmo a maioria dos acessos ainda serem feitos através do sistema operacional Windows, o segundo e terceiro sistemas operacionais mais utilizados para acessar o website da instituição são sistemas operacionais para mobile. Por fim outro relatório que foi considerado relevante foi acessos por páginas, para conhecimento das páginas de destino da navegação, descobrindo qual é a sua importância como destino ou saída do website, isso demonstra o comportamento dos usuários do website e qual a sua satisfação em relação ao conteúdo apresentado e sua relevância. Esses dados não criam um perfil dos usuários mas apontam uma parcela do contexto tecnológico (contexto de uso) que estão inseridos e quais são as tarefas desenvolvidas indicando um ponto de partida, como a importância de pensar no conteúdo apresentado pelo website atual, a adoção de tecnologias mobile de seus usuários e sua satisfação com o
168
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
conteúdo apresentado. Esse ponto de partida ajuda a projetar o protótipo, e indica os possíveis caminhos dos usuários pelo website permitindo levar até eles de forma mais fácil o que lhe for de interesse melhorando sua satisfação e experiência.
4.3 Problemas e gargalos do website atual
Para entendimento das carências e esforços necessários para o desenvolvimento do protótipo foi realizada uma análise para investigar a gravidade e impacto dos problemas do website atual da ETEC Fernando Prestes com base nos dados socioeconômicos e do Google Analytics. Para entender a gravidade dos problemas de usabilidade do website atual foi adotada uma combinação proposta Nielsen (1995, tradução nossa).
A frequência com que ocorre o problema: é comum ou raro? O impacto do problema caso ocorra: Será que vai ser fácil ou difícil para os usuários a superar? A persistência do problema: É um problema que acontece uma vez e os usuários possam supera-lo, já que sabe sobre ele ou acontece repetidamente e os usuários podem ser incomodados pelo problema?
E para classificar a gravidade dentro de um padrão para definição das prioridades para a criação do protótipo e avaliação usabilidade, foi adotada uma escala de 0 a 4 proposta por Nielsen (1995, tradução nossa).
0 = não concordo que este é um problema de usabilidade em tudo 1 = problema cosmético: não precisa ser corrigido a menos que haja tempo extra disponível no projeto 2 = problema de usabilidade menor: a sua correção deve ser dada prioridade baixa 3 = problema de usabilidade maior: importante a correção, para isso deve ser dada alta prioridade 4 = Usabilidade catástrofe: imperativo corrigir isso antes que o produto seja liberado
O atual website, também acumula uma histórico de solicitações e reclamações levantadas com professores e e-mails enviados a instituição, que serão levados em consideração para apontar os problemas encontrados e sua gravidade.
169
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
Para a análise heurística e para poder estimar o grau de desconforto diante das atividades propostas no atual website, foram adotados os Primeiros Princípios do Interection Design de Bruce Tognazzini6. Com base nessas fundamentações a analise dividiu-se em 2 pontos entendidos como fundamenteis ao projeto.
4.3.1 Navegação
O atual website não oferece uma experiência mobile, isso diante dos fatos apresentados até aqui quanto a aumento do uso de dispositivos móveis e aumento dos acessos por esse meio pelos usuários ao website, faz desse fato uma falha de usabilidade nível três, pois apesar de ser um problema persistente, que atinge todas as páginas, limita e coloca barreiras a navegação, não é um impeditivo de acesso. Outra barreira encontrada é o excesso de clicks necessários para navegação dos menus e sub menus, o que impõe ao usuário um alto grau de aprendizagem e a criação de mapas mentais para a localização dos hyperlinks para as páginas (Figura 3). Outro limitador da navegação que recebeu críticas de pessoas que fizeram acesso ao website, foi o excesso de hyperlinks dentro do sub menu “Cursos” (Figura 3), esse sub menu atualmente apresenta 16 hyperlinks, referentes ao cursos da instituição, isso faz dele extenso verticalmente, e em telas de resolução pequena não é possível ver os últimos cursos da listagem, esses dois problemas são recorrentes e impõe barreiras ao usuário e é imperativa a correção de problema pois esse menu é presente em todas as páginas do website e a principal forma de navegação entre elas.
6
http://userdesign.org/principios.html#1
170
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
Figura 3. Atual menu do website da ETEC Fernando Prestes. Fonte: http://www.etecfernandoprestes.com.br/ Esses pontos chamam a atenção para várias falhas, como o fato das interfaces não serem facilmente exploráveis, haver muitas estruturas que para sua exibição são dependentes de repetitivas ações do usuário, esses fatores aumentam os compromissos dos usuários sendo uma interface de difícil memorização e aprendizagem.
4.3.2 Antecipação
Todo o layout e informações presentes no website atual são acrescidas com o acontecer das necessidades da instituição, isso fez da página inicial, em especial, tornar-se poluída por elementos que por um momento atenderam a uma necessidade mas que depois passou a representar um débito informativo que se perpetua na página. Além da poluição e propagação de informações em débito, o acumulo desses dados faz aumentar a rolagem na página, deixando a página inicial extensa verticalmente, reduzindo a eficiência do usuário ao alcançar objetivos específicos e aumento de recursos gastos e desconforto. Esses pontos podem ser mais indicadores da alta taxa de rejeição vista no capítulo 4.2, pela falta da antecipação de quais informações, conteúdo ou interações são mais indicados ou
171
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
preferidos para a página inicial e elementos estáticos (rodapé e cabeçalho do website, por exemplo), e a baixa latência da reciclagem de informações das páginas mais acessadas.
4.4 Desenvolvimento do protótipo
O resultado dos dados levantados foi a definição do contexto de uso e o sistema de trabalho para a construção do protótipo, o framework utilizado foi o UIKit, as motivações para seu uso foi devido ao padrão semântico na criação das suas classes em CSS, todas as classes possuem o prefixo “uk-”, que ajuda na leitura e identificação de quais são as classes do framework e quais pertencem a uma camada de customização do projeto ou até mesmo a outro framework que possa ser utilizado futuramente para implementação de algum recurso, por exemplo, além da ampla documentação que ele possui sobre suas funcionalidades e recursos. Outra motivação importante para a utilização do UIKit é o fato dele trazer de forma nativa um recurso que foi proposto para correção dos problemas apresentados no menu do atual website da ETEC, o off canvas. Wroblewski (2012, tradução nossa) define esse padrão de navegação como “o padrão off canvas para o layout multi-dispositivo aproveita o espaço fora da tela para manter o conteúdo ou navegação escondido até que um tamanho maior da tela permite que ele seja visível ou um usuário entra em ação para expô-lo”. Essa funcionalidade que é nativa do framework e soluciona não apenas o problema para os menus em dispositivos mobile (Figura 4), mas também para resoluções maiores.
172
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
Figura 4. Exemplo de website que utiliza off canvas como solução para exibição de determinados conteudos. Fonte: http://www.lukew.com/ff/entry.asp?1514 Para o ambiente mobile o conceito de off canvas foi adotado, não apenas para a listagem dos cursos da instituição mas também para todo o menu, que foi suprimido da tela principal. O off canvas traz recursos para melhoria da navegação tanto para exibição de menus ou listagens em uma plataforma mobile como em resoluções convencionais de um notebook ou computadores convencionais, essa foi a solução optada para o protótipo da ETEC, para quando o usuário clicar no hyperlink “Cursos” (Figura 5). Essa opção atende não apenas o momento atual da ETEC, que é exibir seus 16 cursos, mas também permite que sejam inseridos mais cursos futuramente e caso o espaço vertical imposto pela resolução ou tamanho da janela sejam pequenos é exibida uma barra de rolagem que permite a exploração do conteúdo.
173
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
Figura 5. Demonstração do conceito off canvas no protótipo. Fonte: Autor do artigo, 2013 Para construção dos elementos visuais e logos foi adotado o manual de identidade visual para as Escolas Técnicas Estaduais do Centro Paula Souza7 (Autarquia do Governo do Estado de São Paulo que rege as ETECs), e os padrões de cores utilizado pela ETEC em seus documentos e uniforme. Elementos como transições e carrosséis de imagens obedecem a movimentos nativos do dispositivo, ou seja as imagens podem ser movidas com o passar dos dedos sobre elas para direita ou esquerda, isso além de solidificar a integração com o dispositivo, também fornece mais autonomia ao usuário. Com base nos dados de visitação foram selecionados e definidas as páginas de maior acesso para o menu de cabeçalho, páginas de menor visitação foram colocadas no rodapé. Também foram centralizadas informações que antes eram segmentadas mas pertenciam ao mesmo universo, as informações sobre os cursos por exemplo, no atual website informações como perfil profissional, grade curricular, plano de curso, plano de trabalho docente, corpo docente e downloads, pertencentes a um curso, eram segmentado, e no protótipo foram
7
http://www.centropaulasouza.sp.gov.br/quem-somos/manual-de-identidade/logo/etec/default.asp
174
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
unificados em uma página além de centralizar informações aumentando a eficiência, também reduz o desconforto gerado pelo excesso de clicks. Essas decisões foram baseadas no conceito de mobile first, para que houvesse o foco no que realmente é importante, levando em consideração primeiramente sua exibição e comportamento em um ambiente mobile e posteriormente em resoluções maiores, sendo essas sugestões fundamentadas pelos dados coletados ao longo da pesquisa. Para redução da rolagem e dispersão provocada na página inicial foram definidos módulos para organização conteúdo, atendendo a proposta de levar o conteúdo mais relevante aos usuários e a compromissos da instituição como a exibição de banners de parceiros que é um fator gerador de renda para a Associação de Pais e Mestres da escola (APM). As propostas foram pensadas não apenas como soluções paliativas, mas colocadas em um contexto de escalável de uma instituição que cresce constantemente, não apenas como novos cursos, mas com eventos, docentes, discentes, notícias, para que a interface continue a passar credibilidade e índices como a taxa de rejeição não sejam tão elevados como atualmente, fundamentado pelos princípios de eficiência e eficácia da NBR 9241-11, e o contexto de uso que as dados propiciaram.
5 Conclusão
Esse artigo buscou alinhar os fundamentos da NBR 9141-11 com tecnologias e conceitos recentes. Ao longo deste foi realizada uma densa análise dos dados obtidos por meio da pesquisa socioeconômica e dos dados do Google Analytics. Esses dados foram relacionados entre si para apontar o perfil dos usuários e o contexto de uso, indicando qual seria a aceitação para as soluções projetadas baseadas no levantamento dos problemas encontrados por meio da análise heurística, além de definir quais são os interesses dos usuários e assuntos que devem ser abordados com mais destaque na interface do protótipo. Ao longo do trabalho não apenas pelo referencial teórico, mas também pelos dados de visitação obtidos da instituição, comprovou-se a necessidade por parte dos visitantes pela otimização do website para dispositivos mobile, além de atestar as premissas levantadas no início desse projeto, confirmando que as ferramentas de front-end estudadas realmente podem se adequar
175
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
a cenários específicos como o definido pela pesquisa realizada, comprovando sua importância como fatores de sucesso no projeto de soluções voltadas para a usabilidade em uma realidade prática. O embasamento teórico e os resultados obtidos a adoção do design responsivo e mobile first comprovaram sua utilização, ao desenvolver do protótipo, como fatores que impulsionariam sua utilização, gerariam melhorias dos indicadores estudados. Porém essas ferramentas, bem como a NBR 9141-11, não devem ser utilizadas de forma isolada, ou como solução definitiva para problemas de interação com os usuários, e sim como nessa pesquisa é importante o levantamento do perfil dos usuários e seu cenário de uso para que seja possível o questionamento se em outro projeto essas soluções também seriam as ideais ou bem recebidas. Uma proposta que durante o desenvolvimento da pesquisa não pode ser abordada e poderia servir de referência para futuros trabalhos, é a adequação do website voltadas à acessibilidade, para pessoas com limitações físicas, visuais totais ou parciais, cognitivas etc. Ou ainda a proposta de integração com um sistema de gerenciamento de conteúdo que integrado com o protótipo viabilize a gestão de conteúdos dinâmicos. A sinergia entre as ferramentas estudadas combinada com o apoio no fornecimento dos dados e informações que foram necessárias para o desenvolvimento desse trabalho pela ETEC Fernando Prestes, propiciaram o entendimento real de qual era o contexto, objetivos e sistema de trabalho da instituição, o que permitiu a construção de uma proposta sólida e de forma escalável para os problemas encontrados. Esses pontos solidificam as tecnologias estudas como conceitos importantes e que devem ser levados em consideração para o desenvolvimento de projetos para web como uma forma de agregar valor e integração, e não apenas como tecnologias de ocasião. Atualmente, segundo o Centro Paula Souza8, existem 211 ETECs no estado de São Paulo. Motivado por esse grande número de instituições e pelo volume de dados analisados e os resultados obtidos, foi criado um repositório na ferramenta GitHub9, onde foi armazenado o código fonte do protótipo criado para esse trabalho, com o objetivo de fornecer os subsídios
8
http://www.centropaulasouza.sp.gov.br/quem-somos/manual-de-identidade/mapa-dasunidades/mapa__fatec_etec_2013.pdf 9 https://github.com/graffitti/Etec-WEB
176
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. PIRES, A.; LEME, R. R.
básicos para que as demais instituições tenham um ponto de partida para analisar suas necessidades e cenários e também desenvolverem seus websites focados em usabilidade ou ainda a possibilidade da colaboração de outras pessoas na formação de características que ajudem a melhorar os recursos propostos.
6 Referências Bibliográficas
Associação Brasileira de Normas Técnicas. NBR 9241-11. Requisitos Ergonômicos para Trabalho de Escritório com Computadores Parte 11 – Orientações sobre Usabilidade. Rio de Janeiro: ABNT, 2002. BARBOZA, Elza Maria Ferraz; NUNES, Eny Marcelino de Almeida; SENA, Nathália Kneipp. Web sites governamentais, uma esplanada à parte. Ci. Inf. [online]. 2000, vol.29, n.1, pp. 118-125. ISSN 0100-1965. BENYON, David. Interação humano-computador. 2 ed. São Paulo: Pearson, 2011. EIS, Diego. Construindo um Framework com Diego Eis da Locaweb. Organizado por Locaweb. Disponível em: https://www.eventials.com/pt-br/locaweb/construindo-umframework/. Acesso em: 29 set. 2013. FERREIRA, Simone Bacellar Leal; LEITE, Julio Cesar Sampaio do Prado. Avaliação da usabilidade em sistemas de informação: o caso do Sistema Submarino. Rev. adm. contemp. [online]. 2003, vol.7, n.2, pp. 115-136. ISSN 1982-7849. GOOGLE. Como o Google Analytics afeta o código de seu website. Disponível em: https://support.google.com/Analytics/answer/1008009?hl=pt-BR&ref_topic=1008008. Acesso em: 07 out. 2013. ______. Introdução ao Google Analytics. Disponível em: https://support.google.com/Analytics/answer/1008065?hl=pt-BR&ref_topic=1008008. Acesso em: 07 out. 2013. PEREIRA JUNIOR, Clorisval; CAPETO, Rodolfo. Indicadores para avaliação de websites. Disponível em: http://www.lbd.dcc.ufmg.br/colecoes/ihc/2000/0020.pdf. Acesso em: 07 nov. 2013. WEINTRAUB, Seth (Estados Unidos). Industry first: Smartphones pass PCs in sales. Disponível em: http://tech.fortune.cnn.com/2011/02/07/idc-smartphone-shipment-numberspassed-pc-in-q4-2010/. Acesso em: 7 abr. 2013.
177
Revista de Ciência, Tecnologia e Cultura da FATEC Itu Itu/SP, n°. 3, p. 157 – 177, junho de 2014. Foco no ser humano...
WROBLEWSKI, Luke. Mobile first. New York: A Book Apart, 2011. ______. Multi-Device Layout Patterns. Disponível em: http://www.lukew.com/ff/entry.asp?1514. Acesso em: 04 nov. 2013.