PROJETO GRÁFICO DO LIVRO DE DIRETRIZES DE DESIGN E USABILIDADE DE APLICATIVOS DE SMARTPHONE Aluno: Jessé Cerqueira Orientador: Manuela Quaresma Introdução É fato que Smartphones estão em voga no mercado desde a chegada do primeiro iphone, em 2008. O mercado desses aparelhos apresenta constantes mudanças e inovações tecnológicas, bem como seus aplicativos, que tentam se adequar cada vez mais às necessidades de seus usuários. Porém, as melhorias nos aparelhos e a crescente de vendas não necessariamente refletem na qualidade da experiência com produto, em termos design de interface, sendo necessário entender as necessidades dos usuários e os fatores que contribuem para uma boa interação com as interfaces. Partindo das complicações de uso que se fazem presentes em alguns aplicativos do mercado, a pesquisa intitulada "Design e Usabilidade de Aplicativos de Smartphone para Motoristas" compilou uma série de boas práticas no design de interfaces com base em recomendações existentes em publicações, através de uma revisão bibliográfica. Neste documento, foram reunidas diversas citações de pesquisadores de ergonomia e usabilidade em interfaces de aplicativos de smartphone que foram, mais tarde, consolidadas como diretrizes. Apesar de serem ordenadas, divididas em categorias/subcategorias e apresentadas com informações adicionais, as diretrizes estavam dispostas e formatadas de maneira que ainda gerava confusão, sem distinção entre os diferentes tipos de informação como recomendações, referências e descrições presentes no texto. A partir disso fez-se necessária a elaboração de um projeto gráfico para o documento. Objetivos O objetivo do projeto gráfico foi de formalizar o grande volume de informações em um documento digital organizado e compreensível ao público de desenvolvimento de aplicativos designers e programadores. Desta maneira, o livro digital (e-book) servirá de material de consulta capaz de oferecer direção para a detecção e correção de deficiências recorrentes na construção de interfaces de aplicativos de smartphone. Metodologia O documento digital original é uma compilação de diretrizes ordenadas e numeradas apresentadas em frases curtas, com suas referências de autores resumidas em tabelas. A maior parte das diretrizes também apresenta uma imagem de interface de aplicativo com uma legenda explicativa, relacionando a recomendação da diretriz com elementos presentes ou ausentes na imagem. Optou-se por manter as informações do documento original.
Figura 1: duas páginas consecutivas do documento original, apresentando a abertura do capítulo. Apesar de pertinentes, as informações do documento original não eram apresentadas de forma clara, em razão da falta de hierarquia visual e inconsistência no posicionamento dos elementos através das páginas. A partir dessas insatisfações foram realizadas as seguintes etapas de estudos que culminaram em um novo documento de diretrizes. 1. Formato Foi decidido que o livro seria finalizado em formato PDF e que suas páginas seriam de proporção 4:3. O formato PDF foi escolhido por ser amplamente difundido e permitir uso de hiperlinks que levem a páginas específicas do documento ou mesmo a referências na web, o que facilita a navegação pelo documento e a difusão de informações adicionais, sem criar mais conflitos de hierarquia visual. A proporção de tela 4:3 foi escolhida por ser suficiente para apresentar a maior parte das diretrizes com boas escalas de tipografia, imagens e margens tanto de página quanto de conteúdo. 2. Hierarquia visual A. Posicionamento Tendo em vista que os tipos de informações presentes no livro são recorrentes, foi escolhido um posicionamento fixo para os elementos do livro, buscando facilitar a localização de cada um destes. Para tal, as informações foram distribuídas em duas colunas principais, sendo a coluna da esquerda reservada para informações de organização e de recomendações; a coluna da direita foi reservada para imagens de exemplos e suas legendas explicativas. Em raros casos onde não há imagem de exemplo em dadas diretrizes, faz-se a exceção de se inserir uma segunda (ou mesmo, uma terceira) diretriz abaixo ou ao lado da primeira diretriz da página.
Figura 2: exemplo de página com duas diretrizes B. Tipografia Optou-se por escolher uma tipografia sem serifa que apresentasse boa legibilidade em telas. Para tal, foi escolhida a família tipográfica Metropolis, usada por todo o documento variando em tamanho, peso e cor. As variações de tamanho da tipografia se relacionam com a relevância da informação em relação a outras informações do mesmo tipo. Entre as informações de organização, optouse por enfatizar a letra referente à diretriz com uma maior escala que o restante, visto que é o elemento mais relacionado à diretriz sendo mostrada e o que mais varia de página a página, portanto, o mais capaz de ressaltar as diferentes diretrizes de uma mesma categoria ou subcategoria. Figura 3: tipos de texto referentes a informações de organização (de cima para baixo: numeração de categorias e subcategorias de diretriz, letra da diretriz e numeração de página).
Já entre as informações referentes à recomendação e exemplificação da diretriz, optouse por priorizar (em ordem de maior a menor importância e escala) a diretriz, suas recomendações adicionais, a legenda das imagens-exemplo e as referências resumidas. Figura 4: tipos de texto referentes às recomendações e seus exemplos (de cima para baixo, da esquerda para direita: diretriz, recomendações adicionais, referências e legenda de imagem). C. Cores Foi feito um estudo de cores buscando selecionar e utilizar dez cores distintas, ordenadas de forma que as categorias de diretriz apresentem uma matiz contrastante em relação às categorias adjacentes, com o intuito de ajudar o leitor a se situar e diferenciar mais facilmente as seções do documento. Figura 5: cores selecionadas para utilização em elementos gráficos das dez categorias de diretrizes. Após testes, optou-se por apresentar as cores em todos os elementos que não fossem informações discursivas das páginas (cabeçalho, numeração e letra correspondentes à diretriz, numeração da página, barras gráficas e demais elementos gráficos adicionados em contextos específicos). Desta forma, além de criar mais contraste entre as categorias de diretriz do documento, estabelece-se maior diferenciação entre elementos de organização/reforço de conteúdo e as recomendações em texto corrido.
Figura 6: diferença entre uma mesma página com e sem a diferenciação cromática de conteúdo. 3. Criação e revisão de informações A. Ilustrações de categorias Foram feitas dez ilustrações com base no tema central das categorias, apresentadas no início de cada categoria, de modo a reforçar suas aberturas e o códigos de cor. Figura 7: Ilustração de abertura da categoria 1, Contexto de Uso. B. Atualização das imagens-exemplo A maioria das imagens de interface de aplicativo foi substituída para representar versões mais recentes de aplicativos, apresentar melhor as vantagens ou desvantagens descritas pela diretriz ou diminuir a quantidade de interfaces de aplicativos para contexto de trânsito.
Departamento de Artes e Design Figura 8: Imagem de exemplo da diretriz 2.e. (esquerda), substituída por um exemplo atual da interface do aplicativo Waze (direita). As decisões discutidas anteriormente resultaram nas seguintes diferenças gráficas entre o documento original e atual: Figura 8: Comparação entre páginas do documento original e novo (respectivamente, esquerda e direita), que abordam a mesma diretriz 3.1.a). Conclusões O resultado conseguido até o momento contribui para uma maior distinção entre as informações e, por consequência, facilita o processo de localização e compreensão destas. Alguns itens que não tinham alterações previstas no planejamento inicial também sofreram melhorias, como algumas imagens de exemplos, que foram modificadas para apresentar interfaces atualizadas dos aplicativos. Em etapas futuras, é importante investigar e, quando possível, utilizar formas de tirar proveito das funcionalidades do formato PDF, como através do uso de hiperlinks e mídia como vídeos e/ou arquivos de áudio para exemplos de boas práticas de animação e som em aplicativos, que não são comunicáveis por imagens estáticas. Além disto, constatou-se a necessidade de revisão de algumas diretrizes, tanto em questão de validez quanto da formulação textual, levando em conta as novas informações e
achados de novas pesquisas no campo da usabilidade e ergonomia de interfaces de aplicativos. Referências 1 - KATZ, J. Designing Information: Human Factors and Common Sense in Information Design. John Wiley & Sons, Inc. 2012. 224 p. 2 - SAMARA, T. Design Elements: A Graphic Style Manual. John Wiley & Sons, Inc. 2007. 272 p.