Protótipo UI

Nesta fase do desenvolvimento do aplicativo, foram criadas duas propostas de interface tendo como base a persona, a interface do site do curso de Sistemas e Mídias Digitais e como objetivo a análise das necessidade da organização e disposição das informações, bem como o visual das telas, buscando melhorar a experiência do usuário. Foram utilizadas as 10 heurísticas de usabilidade Nielsen como diretrizes, verificando as atividades mais frequentes no aplicativo e atividades que poderiam apresentar problemas para a compreensão do usuário. Os protótipos para interface foram criados no Software Adobe Photoshop, aplicadas a plataforma online Invision para avaliação da navegação e da interface do usuário, além de gravadas com o software Adobe Captivate.

Ambos os protótipos foram desenvolvidos para telas com tamanho normal (mínimo de 470dp x 320dp) e densidade Hpdi (240dpi). Seguimos também o guia de estilo do Materia Design, buscando manter alguns princípios do sistema dentro do aplicativo, permitindo que o usuário identifique áreas de interação, padrões visuais e o que é necessário fazer para concluir uma ação. A partir dos primeiros parâmetros selecionados de tela, as interfaces foram criadas com as seguintes métricas: grid de 4 colunas com espaçamento de 16dp em visualização vertical e área de toque entre 40-51dp (7-9mm).

Primeiro protótipo:

• Cores: Foram selecionadas duas cores encontradas no site do SMD e modificadas para que contrastassem de forma harmônica na interface, permitindo distinguir os elementos, seja de áreas clicáveis e/ou quando acontece alguma interação.
• Ícones e imagens: Optamos pela utilização dos ícones de sistema disponibilizados pela Google para garantir que as convenções dos usuários de Android se mantivessem. Já as imagens utilizadas no passo a passo e premiação possuem características diferentes de todo o sistema, a fim de ressaltar e auxiliar o usuário na identificação do significado da mensagem passada. Imagens simples e de fácil legibilidade, com linhas grossas e fundo coloridas para destaque.
• Fonte: Mantivemos a fonte padrão Roboto, utilizada nos sistemas Android, pois, da mesma forma que os ícones, evitamos o choque na identificação e leitura dos usuários durante a navegação no sistema para o aplicativo.

• Cores: A intenção deste protótipo foi de fugir um pouco do padrão Material e mesclar de forma mais óbvia as cores no fundo do aplicativo, lembrando a característica de elevação e desfoque do fundo no sistema iOS.
• Ícones e imagens: Tanto os ícones como a fonte ficaram na cor branca para contrastar com o fundo. A intenção neste protótipo foi de utilizar o recurso call-to-action ao invés de poluir com imagens. As imagens do passo a passo passaram a ficar sem cor, apenas com a linha grossa para que se mesclasse com os ícones restantes do sistema.
• Fonte: Continuamos a utilizar a fonte Roboto neste protótipo.

• heurística: Visibilidade de status do sistema, Ajuda aos usuários a reconhecer, diagnosticar e sanar erros, Ajuda e documentação e Prevenção de erros: ainda não aplicado nos protótipos;
• heurística: Liberdade e controle do usuário: a qualquer momento o aluno poderá retornar aos semestres respectivos de desmarcar alguma opção selecionada por engano;
• A criação dos protótipos permitiu observar onde deve-se manter o foco do usuário e a hierarquia das informações em prol de uma interface agradável aos olhos, mesmo contendo bastante informações.
• O protótipo 1 servirá como base da interface a ser desenvolvida, pois com ela as informações dispostas tiveram mais foco, além da continuidade e transição dentro do sistema Android, porém, ainda permitindo acrescentar características únicas (heurística: Consistência e Estética e design minimalista).
• Componentes do protótipo 2 que passarão a incorporar o protótipo 1:
• Diálogo mais humanizado, claro e conciso. Subtítulos engraçadinhos para criar uma relação entre aplicativo e usuário (heurística: Correspondência entre o sistema e o mundo real);
• Indicadores de quantidade de disciplinas concluídas na tela de semestre, permitindo visualizar o total em cada semestre de forma rápida (heurística: Flexibilidade e eficiência de uso);
• Home com informações curtas e rápidas. Possibilidade de alterar as mesmas para gráficos (heurística: Flexibilidade e eficiência de uso);
• Imagem do usuário para personalizar o sistema;
• Componentes do protótipo 1 que serão modificados:
• Tela de semestres sofrerá alterações para receber de forma adequada as badges a medida que o usuário completar as disciplinas de cada semestre;
• Notificações e mensagens de incentivo (heurística: Visibilidade de status do sistema).
• heurística: Reconhecimento ao invés de lembrança: É preciso melhorar/adaptar a interface de forma que o usuário tenha ajuda contextual durante a seleção das disciplinas ao invés de relembrar ações pela memória;