USABILIDADE E NAVEGABILIDADE EM REVISTAS DIGITAIS RESPONSIVAS

USABILIDADE E NAVEGABILIDADE EM REVISTAS DIGITAIS RESPONSIVAS Maria Luciana Utida Santos lucianautida@gmail.com Laís Cristina Licheski lais_lic@hotmail.com Departamento Acadêmico de Desenho Industrial Universidade Tecnológica Federal do Paraná - UTFPR RESUMO O presente artigo apresenta de forma concisa, alguns dos principais elementos a serem estudados ao se desenvolver revistas digitais responsivas: usabilidade, adaptabilidade e navegabilidade. Novas mídias, além de possibilitar a geração de conteúdos de forma mais dinâmica e interativa, geram hábitos de leitura e navegabilidade próprios, sendo necessário que estes sejam considerados ao desenvolver conteúdos digitais, especialmente em projetos responsivos, onde é necessário que um mesmo conteúdo adapte-se a diferentes suportes de leitura e forma de navegação nativa de cada dispositivo. Palavras-chave: Revistas digitais. Usabilidade. Adaptabilidade. Navegabilidade. ABSTRACT This paper presents some of the key elements to be studied to develop responsive digital magazines: usability, adaptability and navigability. New media as well as allowing the generation of more dynamic and interactive content create reading habits and proper navigability, requiring them to be considered when developing digital contents, especially in responsive projects where it is necessary that the same content suits to different reading supports and native form of each navigation device. Keywords: Digital magazines. Usability. Adaptability. Navigability. INTRODUÇÃO Em pena Era da Informação há o constante aparecimento de novas tecnologias que permitem a transmissão de informações sobre os mais variados assuntos e a internet possibilitou transformar de vez a forma como a informação pode ser disseminada. A principal vantagem oferecida pela internet é a possibilidade de que todos possam produzir e veicular os mais diversos tipos de informação em seus blogs e websites de forma rápida e financeiramente viável. Em termos de comunicação, tal facilidade, para criar e compartilhar conteúdos, é um avanço maravilhoso, porém nem todos os sites e blogs são desenvolvidos levando em conta as necessidades atuais. Afinal novas mídias geram novas formas de leitura, e aparelhos como os tablets estão mudando não só o modo de consumir o conteúdo, mas também a forma de produzilo (DUARTE, 2010). A popularização da internet e destes dispositivos, junto ao

amadurecimento das tecnologias web, levaram a alterações na forma como o conteúdo é apresentado, cada vez mais interativo, fragmentado, e acima de tudo, acessível. É válido ressaltar que diferentes suportes de leitura têm diferentes necessidades em relação à forma como o conteúdo é construído. Informações que serão oferecidas de forma digital seguem diretrizes diferentes das utilizadas para conteúdo impresso, sendo importante que sejam consideradas ao criar tais conteúdos, afinal, segundo Horie e Pluvinage (2013, p.15) [...] uma revista digital é uma publicação periódica formatada para leitura em tablets e outros dispositivos móveis. Sua principal característica é a junção de elementos gráficos e editoriais tradicionais da mídia impressa com recursos digitais, que são os recursos interativos, hipertextuais e multimídia. Ou seja, para que uma revista seja realmente digital, não basta fazer um PDF estático de uma revista impressa. É necessário que a revista tenha, efetivamente, uma linguagem digital, e que reaja e responda aos toques do leitor na tela do dispositivo de leitura. Considerando-se apenas o formato digital (neste caso baseado em distribuição via websites web-based), a possibilidade cada vez maior de tais conteúdos serem acessados a partir de dispositivos móveis, como tablets e smartphones, faz com que seja necessário que estes sejam desenvolvidos para atender as necessidades específicas de leitura e navegação em tais dispositivos, e não mais serem atrativos e funcionais apenas em desktops. METODOLOGIA As informações contidas neste artigo têm como base projeto desenvolvido como Trabalho de Conclusão de Curso pela autora, que teve como objetivo o desenvolvimento de uma revista adaptável à leitura digital em diversos dispositivos (desktops, tablets e smartphones) com temática voltada à Design Gráfico. Durante a fase inicial do projeto foi realizado levantamento bibliográfico, pesquisas com possíveis usuários e análise de revistas digitais, visando verificar os recursos utilizados pelas mesmas e definir-se os requisitos do projeto. A fase prática abrangeu a criação do projeto gráfico e da codificação necessária para a criação de modelo da revista, bem como pesquisa com público-alvo para verificar a aceitação e usabilidade do modelo da revista. Embora o projeto desenvolvido seja de uma revista digital, as diretrizes utilizadas para sua criação podem ser utilizadas no desenvolvimento de websites, uma vez que o desenvolvimento de revistas web-based é bastante semelhante ao de sites. CONTEÚDO WEB EM DISPOSITIVOS MÓVEIS Falar sobre a necessidade de que os conteúdos disponibilizados em websites sejam adaptáveis a dispositivos móveis não é novidade, afinal desde a popularização do uso de smartphones, e posteriormente, dos tablets, fez-se necessário proporcionar a estes usuários, a visualização de websites de forma adequada e que fosse adaptada não apenas a um tamanho de tela menor, mas também às características físicas e especificações de uso de tais dispositivos (MCVICAR, 2012).

Além das características específicas de dispositivos móveis utilizados para a leitura de conteúdo digital, existem também diferentes formas de oferecer tal conteúdo aos leitores. As formas mais comumente utilizadas são através do design responsivo, sites para dispositivos móveis e apps nativos instalados em tablets e smartphones que podem ter seu conteúdo totalmente baixando antes da leitura ou ser acessado diretamente da internet. O presente artigo está voltado à utilização de design responsivo para apresentar conteúdo. Ao desenvolver revistas ou websites considerando a visualização em diferentes dispositivos, três aspectos são de suma importância para o projeto: usabilidade, adaptabilidade e navegabilidade. Usabilidade. É um atributo de qualidade que avalia a facilidade de uso de interfaces, também está relacionado aos métodos utilizados para melhorar a facilidade de uso durante o processo de design. A usabilidade avalia a facilidade com que tarefas são realizadas quando o usuário entra em contato com a interface pela primeira vez, e a velocidade de execução de tais tarefas uma vez que já se tem conhecimento do ambiente. Considera também a ocorrência de erros, satisfação ao utilizar a interface e se ela oferta ao usuário realizar as tarefas desejadas (NIELSEN, 2012). A facilidade de uso de um website ou revista digital é fundamental para satisfazer seus leitores. Sites que ofereçam ao usuário algum tipo de dificuldade em sua visualização, devido à dificuldade de navegação, baixa legibilidade, ou falha em explicar o que é oferecido, são mais facilmente abandonados. Ao primeiro sinal de dificuldade é mais provável que o leitor procure outro site que ofereça maior facilidade de uso do que tente aprender a utilizar/localizar informações no site atual. Considerar as heurísticas de usabilidade de Nielsen (disponíveis em http://tinyurl.com/cl3au4d) ajuda o designer ou programador a criar interfaces que atendam às necessidades básicas de projetos variados, pois promove, entre outros, o uso de: palavras e conceitos familiares ao usuário e convenções do mundo real; a padronização e consistência com a interface desenvolvida; o reconhecimento dos recursos e ações ofertados pelo sistema; a eficiência de uso tanto para usuários novos quanto avançados. Adaptabilidade. As diferentes formas de visualização e navegação em sites a partir de dispositivos móveis têm um impacto direto na hora de desenvolver um site ou revista (webbased); portanto, é necessário observar as diferentes necessidades dos usuários, o conteúdo desenvolvido, além da atratividade em diferentes tamanhos de tela. As funcionalidades presentes nas versões para desktop devem ser apresentadas de forma a facilitar seu uso no dispositivo escolhido pelo usuário, independentemente do sistema operacional utilizado. Ao desenvolver um site responsivo, é bastante comum a utilização de grids verticais que se adaptem a diferentes tamanhos de tela, o que permite bastante flexibilidade na diagramação das páginas através da combinação de colunas. A utilização de grids é bastante comum pois designers [...] partem da premissa que tal coerência visual permite que o leitor concentre-se no conteúdo, em detrimento da forma. Cada um dos elementos da página - texto ou imagem - tem uma relação visual com todos os outros elementos: a grade fornece um mecanismo pelo qual estas relações podem ser formalizadas (HASLAM, 2006, p.42).

Sites responsivos, ao serem visualizados em tablets, frequentemente têm layout semelhante à versão para desktop, com algumas alterações de posicionamento para melhor apresentação do conteúdo em telas menores. Em smartphones é comum o uso de apenas uma coluna, tendo as informações adicionais presentes na página posicionadas abaixo do conteúdo principal, facilitando assim a leitura em telas pequenas. Em relação à codificação de sites responsivos também existem várias formas de se conseguir o mesmo resultado, sendo necessário analisar as necessidades do projeto e então optar pela melhor opção a ser utilizada. Comumente são utilizados layouts fixos - onde elementos são medidos utilizando pixels e a adaptabilidade a diferentes tamanhos de tela são feitos utilizando media queries (que possibilitam aplicar regras de estilos baseados no tamanho de tela utilizado pelo leitor) - layouts elásticos - que definem os tamanhos de todos os elementos utilizando porcentagens e em s (medida que corresponde à altura da fonte utilizada nas configurações de leitura do navegador) e são automaticamente redimensionados de acordo com a largura de tela do dispositivo utilizado ou um misto das duas técnicas. É mais comum que sites com aparência mais básica, sem a presença de páginas altamente personalizadas, utilizem layouts elásticos por acelerar o tempo de desenvolvimento do projeto. Havendo a necessidade de layouts mais elaborados ou ao desenvolver revistas, o layout fixo (ou a combinação de elementos fixos e elásticos) é mais recomendado por permitir maior controle de sua apresentação em diferentes tamanhos de tela. Navegabilidade. De uma forma geral, o termo: [...] diz respeito à forma como se pode explorar a mobilidade na rede e nos sistemas hipermidiáticos de maneira que o interator ou usuário possa estabelecer seus próprios caminhos de busca, de leitura e de interaça o. Tambe m e a possibilidade de transitar em vários eixos, nós e links, onde inu meros trajetos diferenciados e relaço es de informaça o e de comunicaça o conseguem se complementar e se ampliar o tempo todo (MOURA et BENDITO, PADOVANI e SPINILLO, 2009, p. 182). Pode também ser definida como todos os links, rótulos e outros elementos que permitam o acesso a páginas e ajudem pessoas a se orientarem enquanto interagem com um website (KALBACH, 2007, p. 5, tradução livre da autora) e, portanto, é importante que tenha design consistente para não confundir os usuários e facilitar a eficiência na hora da implementação. Quando se fala em navegabilidade em sites responsivos, dá-se grande ênfase à apresentação e comportamento do(s) menu(s) presentes no site desenvolvido. De forma geral, é comum apresentar menus semelhantes aos visualizados em desktop, porém utilizando fontes em tamanho reduzido na versão para tablet ou transformar o menu em um ícone representado por três linhas horizontais que, ao ser acessado (através do toque), se expande ou é apresentado com algum tipo de transição e contém os links do site. Algo bastante importante - e que muitas vezes não é considerado ao se falar de navegabilidade em projetos responsivos - é que ao utilizar dispositivos móveis, os usuários desenvolvem novos padrões de navegação / utilização, diferentes dos utilizados em desktops e notebooks; portanto, é necessário que tais padrões sejam levados em consideração ao implementar sites e revistas responsivas. Eventos touch (tap, swipe, pinch, etc) são muito

comuns ao utilizar aplicativos nativos, é importante então, que estes sejam implementados aos sites para que possam oferecer ao usuário uma utilização mais próxima do que lhe é oferecido nativamente em tais dispositivos, aumentando assim sua usabilidade. Um exemplo de extensão da usabilidade em sites responsivos que raramente é oferecido, mas muito importante, é a possibilidade de navegar entre diferentes artigos utilizando swipe, a forma utilizada por apps e revistas nativas para se navegar entre páginas ou artigos. Vale à pena ressaltar que algumas revistas responsivas também não oferecem tal funcionalidade, sendo necessário tocar em setas direcionais para navegar entre artigos. DESENVOLVIMENTO DE MODELO DE REVISTA DIGITAL O modelo de revista digital desenvolvido durante o Trabalho de Conclusão de Curso, utilizou os três aspectos citados anteriormente para a criação de um modelo de navegação (e layouts utilizados nos artigos) adaptável a diferentes dispositivos. Em relação à usabilidade, foram utilizadas as já mencionadas heurísticas de usabilidade de Nielsen para criar uma interface que, além de facilitar o uso por parte dos leitores, também fosse flexível o bastante para se adaptar a diferentes dispositivos e permitir o desenvolvimento de layouts variados para os artigos sem que houvesse conflito entre eles e a interface. Como o projeto visava o desenvolvimento de um modelo de revista que utiliza painéis verticais para apresentar o conteúdo de cada artigo no lugar da tradicional rolagem de conteúdo utilizado em sites, foram desenvolvidos dois sistemas navegacionais (Figura 1): um para navegação entre diferentes artigos cuja versão para desktops e notebooks utiliza setas para o usuário navegar entre os artigos de forma sequencial e a versão para tablets e smartphones substitui as setas por eventos touch (swipe right / left); e outro que permite ao leitor acessar os diferentes paineis de um mesmo artigo, utilizando-se marcador colorido na lateral esquerda da tela para indicar a quantidade de painéis presentes no artigo e destacar a posição atual do leitor. Em computadores a navegação é feita clicando nos marcadores, utilizando as setas do teclado ou a mousewheel, novamente, em dispositivos móveis a navegação é feita utilizando eventos touch (swipe up / down). Figura 1. Wireframe dos sistemas de navegaça o da revista Fonte: Autoria própria, 2014.

De forma resumida, a navegação entre artigos é feita de forma horizontal, enquanto a navegação entre diferentes pontos de um mesmo artigo é feito de forma vertical, assemelhandose ao modelo comumente apresentado em revistas digitais para tablets (Figura 2). Figura 2. Navegaça o da revista Fonte: Autoria própria, 2014. Para garantir que o leitor possa optar pela leitura não linear da revista, ela apresenta um menu (Figura 3) que pode ser acessado através de um ícone, alinhado ao lado direito da tela. Ao acionar o menu, esse sobrepõe todos os elementos da revista proporcionando rápido acesso aos artigos presentes na edição. Figura 3: Menu do modelo da revista Fonte: Autoria própria, 2014. Para o projeto também foram desenvolvidos ícones, bastante simplificados e semelhantes aos comumente utilizados por sites e revistas digitais, que foram utilizados na navegação, indicação do tipo de conteúdo interativo e para instruir a respeito da utilização da revista.

As versões para computador e tablet utilizam grid vertical de 12 colunas por permitir grande flexibilidade ao desenvolver layouts, o que permitiu que a diagramação dos artigos fosse feita pensando nas necessidades específicas do conteúdo abordado. Em smartphones, seguiuse a abordagem utilizada em sites, utilizando apenas uma coluna. Considerando o caráter responsivo da revista, foi necessário que o tamanho das colunas e gutters fossem adaptados a diferentes tamanhos de tela. Optou-se pela utilização de layout fixo para seu desenvolvimento por apresentar artigos que necessitavam de diagramação mais complexa, tendo-se mais controle de como o artigo seria visualizado em diferentes dispositivos e tamanhos de tela. Definiu-se que o grid teria largura de 1200px, tamanho comumente utilizado em sites, para tablets, nas posições retrato e paisagem. O grid foi redimensionado proporcionalmente para adaptar-se a telas menores (Figura 4). Optou-se por utilizar gutters nas extremidades do grid para criar uma margem nas laterais do layout evitando elementos muito próximos às bordas do navegador em tablets, seu uso permitiu que os marcadores navegacionais (entre os painéis de um mesmo artigo) fossem posicionados no gutter do lado esquerdo da tela. Figura 4. Visualizaça o do grid em artigo nos dispositivos: notebook, tablet e smartphone Fonte: Autoria própria, 2014 É importante ressaltar que ao desenvolver sites/revistas responsivas com elementos interativos, também é necessário considerar os diferentes sistemas operacionais dos dispositivos móveis, uma vez que scripts podem apresentar diferenças de comportamento ou até mesmo não funcionar em determinados browsers/sistemas operacionais. Por esse motivo é necessário definir as necessidades apresentadas pelo projeto desde o início, evitando assim que alguns elementos apresentem problemas num estágio mais avançado de desenvolvimento e, portanto, apresentar maiores dificuldades na hora de fazer alterações. CONSIDERAÇÕES FINAIS Durante o processo de desenvolvimento de um modelo de revista digital responsiva, e em conjunto com as experiências da autora com o desenvolvimento de websites, observou-se que embora muitos esforços já sejam feitos para disseminar informações (tanto no formato de websites quanto revistas digitais) que possam ser acessadas de forma otimizada em diversos dispositivos, muitos sites ainda não apresentam tais recursos ou os apresentam de forma insuficiente ou inadequada. Essa inadequação pode estar ligada a diversos fatores, mas observa-

se que em sites cujo planejamento é mais extenso e envolve designers e programadores (ou é realizada por uma pessoa capacitada para realizar as duas funções) o resultado final é um site (ou revista) que apresenta melhor usabilidade e navegabilidade, assim como layouts melhor estruturados e maior consistência quando visualizados em diversos tamanhos de tela. Para tornar a experiência de leitura em dispositivos móveis mais eficaz ainda é necessário que funcionalidades nativas sejam implementadas ao desenvolver sites. Por enquanto browsers para dispositivos móveis ainda não oferecem tais funcionalidades de forma nativa e, até que apresentem, cabe aos designers e programadores implementarem a utilização de eventos touch em seus sites, tornando assim a navegação entre artigos de um mesmo site mais intuitiva e próxima dos padrões utilizados pelos usuários em dispositivos móveis. A realização de revista digital, cuja navegação num mesmo artigo ou entre artigos utiliza apenas eventos touch em dispositivos móveis, permitiu um maior entendimento acerca do assunto, percebendo a real necessidade de sua utilização e os benefícios que sua implementação traz ao usuário, afinal a facilidade de uso de um site está diretamente ligada ao tempo e números de futuras visitas de um mesmo leitor. REFERÊNCIAS DUARTE, Márcio. e-book: desvendando os livros feitos de pixels. Brasília, DF: M10 Design, 2010. Disponível em: <http://www.slideshare.net/marciom10/ebook-desvendando-oslivros-feitos-de-pixels>. Acesso em: 23 abr. 2014. HASLAM, Andrew. O livro e o designer II: como criar e produzir livros. 2. ed São Paulo: Edições Rosari, 2006. HORIE, Ricardo Minoru; e PLUVINAGE, Jean. Revistas Digitais para ipad e outros tablets - arte-finalização, geração e distribuição. São Paulo, SP: Bytes & Types (ebook), 2012. KALBACH, James. Designing web navigation. Sebastopol: O Reilly Media, 2007. MCVICAR, Elaine. Designing for Mobile Part 1: Information Architecture. Disponível em: <http://www.uxbooth.com/articles/designing-for-mobile-part-1-information-architecture>. Acesso em:15 abr. 2014. MOURA, M.. Hypermedia Design: A route for teaching digital culture Design de hipermídia: Caminhos para o ensino na cultura digital. In: Carla G. Spinillo; Petrônio Bendito; Stephania Padovani. (Org.). Selected readings on information design: communication, technology, history and education. 1ed.Curitiba: SBDI - Sociedade Brasileira do Design da Informação, 2009, v. 03, p. 01-202 NIELSEN, Jakob. 10 usability heuristics for user interface design. Disponível em: <http://nngroup.com/articles/ten-usability-heuristics>. Acesso em: 10 mar. 2014.

NIELSEN, Jakob. Usability 101: Introduction to Usability. Disponível em: <http://www.nngroup.com/articles/usability-101-introduction-to-usability>. Acesso em: 10 mar. 2014.