Diretrizes para desenho de interfaces para a plataforma Android

cada aplicação não se diferencie drasticamente das restantes (ícones, cores, tipografia, métricas, estilos de escrita, navegação, acessibilidade, entre outros), tornando assim as aplicações mais uniformes, consistentes e intuitivas para os utilizadores.

Como neste tipo de dispositivos os elementos visuais tocáveis são extremamente importantes, os ícones foram criados com pelo menos 48x48 density-independent pixel (dp) por forma a serem selecionáveis e intuitivos para as funcionalidades que representam ao longo da aplicação. A Figura 41 apresenta os vários tamanhos de ícones seguidos pela aplicação móvel.

Figura 41 - Diretriz de ícones [125].

Os ícones da barra de menu são botões gráficos que representam as ações mais importantes que os utilizadores podem tomar dentro da aplicação. Cada um deve aplicar uma metáfora simples que representa um único conceito, para que os utilizadores possam intuitivamente conhecer o seu significado. Os ícones utilizados são do género Font Awesome [126], pelo facto de também ser utilizado nos produtos da empresa, tornando a sua utilização uniforme e constante a todas as plataformas. A fonte Font Awesome oferece uma grande coleção de ícones, com tamanhos infinitos, que podem ser utilizados em todas as cores, sem o menor esforço, apenas alterando a cor da fonte.

A cor predominante foi o cinzento-escuro, uma vez que é a cor dominante nos produtos da empresa e pelo facto de esta cor simbolizar estabilidade, sucesso e qualidade. Se bem utilizado, o cinzento oferece equilíbrio e flexibilidade por ser o equilíbrio entre o preto e o branco, expressando neutralidade na interface gráfica. O cinzento é também uma das cores em destaque na paleta de cores padrão do Android [127]. As cores usadas dão ênfase aos componentes e oferecem um bom contraste entre os componentes visuais.

Os elementos textuais (escrita) da aplicação seguiram também as diretrizes do Android, por forma a manter a interface concisa, simples e amigável. Na Figura 42 é apresentado um bom e um mau exemplo de uso das diretrizes Android para o estilo de escrita.

Figura 42 - Diretriz de estilo de escrita [128].

Deste modo, deve-se descrever apenas o que o utilizador precisa saber, eliminando a redundância, como títulos repetidos no conteúdo do corpo de uma mensagem numa caixa de informações. Tentou-se sempre manter o texto tão curto quanto possível, como ilustrado na Figura 43.

Figura 43 - Exemplo de mensagem com estilo de escrita.

Na Figura 43 pode-se observar uma mensagem utilizada na aplicação com o estilo de escrita adotado pelas diretrizes Android. Sabendo que a tipografia também é bastante importante numa aplicação, estudou-se a diretriz da mesma, uma vez que a implementação bem-sucedida é essencial para ajudar os utilizadores a entender rapidamente a informação visualizada. Para além de se seguir estas tipografias deu-se especial ênfase a tipos de letra sem serifas, o que permite ao utilizador ler a informação com plena facilidade e com um elevado conforto visual. Foram também seguidas as diretrizes para métricas e grelhas, que destacaram na aplicação o espaçamento entre componentes. Em média os componentes devem ter um espaçamento de 48x48 dp, que a traduzir para um tamanho físico é cerca de 9 milímetros, como é apresentado na Figura 44.

Figura 44 - Diretriz de espaçamento de componentes [129].

O tamanho de 48x48 dp é um tamanho confortável para os componentes touchscreen e deste modo, os utilizadores serão capazes de forma confiável e precisa aceder manualmente a todos os componentes tocáveis. Esta diretriz foi bastante utilizada na aplicação, como se pode verificar na Figura 45.

Figura 45 - Exemplo de espaçamento entre componentes.

Na Figura 45 está representado o espaçamento entre componentes usado na aplicação, mas esta figura consegue também demonstrar algumas “dicas”, como a descrição dos campos nome de utilizador e palavra-passe, para que assim o utilizador tenha uma maior e melhor perceção do que colocar no campo correspondente.

Na navegação entre os ecrãs da aplicação também se adotou uma diretriz Android, de forma que os utilizadores possam navegar intuitivamente através da barra de topo. Esta organização da interface ajuda os utilizadores a navegar diretamente pelos ecrãs hierárquicos da aplicação. A Figura 46 apresenta a diretriz de navegação padrão usada pela plataforma Android.

Figura 46 - Diretriz de navegação padrão [130].

A Figura 46 apresenta o estilo de navegação usado pelo Android, também usado na aplicação móvel implementada, como é apresentado pela Figura 47 que segue a mesma diretriz.

Figura 47 - Exemplo da diretriz de navegação padrão utilizada na aplicação.

Esta diretriz de navegação padrão foi utilizada de forma constante na aplicação, sendo ela o caminho principal para o utilizador visualizar os ecrãs pretendidos. Adicionalmente usou-se

apresentada na Figura 48.

Figura 48 - Diretriz de navegação por painel [131].

A Figura 48 apresenta o estilo de navegação por painel utilizado pela plataforma Android, sendo esta uma forma de organizar o conteúdo que é frequentemente utilizado numa aplicação. Este estilo é também utilizado na aplicação móvel implementada, como é apresentado pela Figura 49.

Figura 49 - Exemplo da diretriz de navegação por painel utilizada na aplicação.

Uma boa navegação é importante para qualquer aplicação, por isso, todo este estudo foi importante, por forma a garantir que as diretrizes do Android fossem aplicadas de forma correta.

A clareza e simplicidade das notificações e das ações que o utilizador poderá ter sobre as funcionalidades existentes (confirmadas ou reconhecidas por meio de texto) têm uma importância elevada na usabilidade da aplicação e estão também contempladas nas diretrizes do Android, tal como apresentado na Figura 50.

Figura 50 - Diretriz de notificação de confirmação [132].

Neste tipo de mensagens de notificação, o utilizador poderá visualizar a ação que irá ser confirmada, o nome do item que a ação recai, o texto descritivo de aviso das consequências da ação, bem como os botões de cancelar e o outro botão com o nome descritivo da ação que se realizará. Tentando seguir a mesma diretriz foi criada uma estrutura similar para a apresentação de notificações de confirmação, por forma a esclarecer e permitir ações do utilizador, tal como apresentado na Figura 51.

Figura 51 - Exemplo de notificação de confirmação utilizada na aplicação.

Deu-se também especial atenção à acessibilidade da aplicação. O utilizador poderá ativar o modo de acessibilidade presente no dispositivo móvel e ser guiado na aplicação através, das imagens, textos e itens presentes nas listas.

Testes

Este capítulo apresenta os testes realizados e os resultados obtidos, nomeadamente testes unitários, integração, carga, segurança, e os testes de usabilidade, finalizando o capítulo com a discussão de resultados.