A aplicação desta boa prática colaborou no processo de identificação dos objetivos dos usuários do portal ou sistema. Estes objetivos geralmente estão relacionados ao tipo de conteúdo que os usuários desejam encontrar enquanto interagem com o produto. Uma vez que estes objetivos foram identificados, foi possível determinar e priorizar as tarefas mais relevantes para os usuários, resultando em uma interface mais acessível para os usuários. Uma vez identificados os tipos de conteúdo de maior aceitação por parte dos usuários, foi desenvolvido um novo componente de interface, que visa otimizar o acesso aos conteúdos de maior aceitação por parte dos usuários. Este componente apresenta as últimas publicações de cada tipo de funcionalidades identificadas na análise, possibilitando um percurso mais otimizado até as informações desejadas pelos usuários.
Durante o processo de definição da interface, foi realizado um estudo com objetivo de identificar padrões de UI que fossem mais apropriados onde devem constar as seguintes características: simplicidade dos elementos (formas simples, como retângulos, círculos, quadrados etc.), foco na tipografia (fontes que correspondem ao esquema do layout definido), foco na cor (tons que tendem a ser vibrantes, cores “chapadas” - design flat), interface objetiva e simples (interface com cores claras e layout simplicista), dentre outras características.
O Google Fonts possuem uma biblioteca diversificada de fontes para melhorar a tipografia dos sites e sistemas, trazendo resultados mais modernos e criativos, porém quanto mais fontes forem adicionadas, maior é o tempo de carregamento do site, logo selecionar, no máximo, três fontes é recomendável. Outra dica importante é usar fontes serifadas e em negrito nos títulos das páginas.
O estudo para interfaces tem como finalidade a identificação de recursos junto a tendências de design com a abordagem das aglomerações de elementos de interface, bem como a forma de tratá-las. Foi identificado neste estudo que as interfaces que utilizam o conceito material design são geralmente dispostas em regiões distinguidas por cores vibrantes e elementos visuais (botões, ícones, imagens etc.) com efeitos de movimento e profundidade ou interfaces ordenadas em blocos com tons claro e ênfase na simplicidade dos elementos visuais. Desta forma, propor interfaces do com layout ordenado em blocos com o intuito de reduzir as aglomerações dos elementos da interface.
Existem disponíveis na internet vários templates responsivos que usam o material design e são excelentes para uso em sistemas, pois organizam as informações em blocos e as cores usadas são bem harmônicas.
• Planejar auditoria de conteúdo: no caso de haver gestão destes
• Dividir e testar o conteúdo: testar diferentes configurações de layout assim como os componentes destes (ícones, tipografia, tonalidades)
• Antecipar os erros: utilizando mecanismos de validação em campos de entrada dos elementos utilizados para a interação dos usuários
Boa prática para minimizar o alto impacto eventual do excesso de requisições dos componentes (CSS, javascripts, fontes, imagens etc.). Existem componentes que carregam a página de forma gradativa e exibindo elementos alternativos sem a deformação do layout sem a necessidade de indispor as informações até o completo carregamento de todos os componentes da página em questão.
Carregar dinamicamente os componentes pode substituir a necessidade da paginação na parte de baixo da página, pois a medida que o usuário vai navegando os elementos vão sendo carregados.
Em sites, o carregamento dinâmico pode surgir na área de notícias, carregando as mais antigas assim que o usuário rolar a página pra baixo. Em sistemas, o carregamento pode ser feito nas tabelas que mostram dados que foram cadastrados, como os usuários, porém isso não elimina a necessidade de um campo de busca no topo da tabela para que o usuário consiga encontrar de forma mais rápida o dado desejado.
Uma interface adaptativa (responsiva) com layout e funcionalidades que se adaptam a diversas resoluções de dispositivos (gadgets). Este comportamento adaptativo da nova interface tem como objetivo possibilitar aos usuários deste ambiente uma experiência de uso mais agradável enquanto navegam e interagem. Mediante a interface responsiva, o usuário do novo portal tem a possibilidade de acessar o conteúdo desejado em diversos tipos de dispositivos (desktop, smartphone, tablet, Mac etc.), de modo que este conteúdo se adapte adequadamente aos dispositivos utilizados por estes usuários.
Devido ao sites ou sistemas fazerem uso de diversos tipos de conteúdo (produções textuais, imagéticas, sonoras etc.) e elementos de interface (widgets, plugins, themes etc.), fez-se necessário o uso de métodos (minificar CSS e JS, verificação de erros e falhas, análise de performance/carga etc.) para observar a performance e eficácia dos códigos. Esta boa prática foi aplicada durante o processo de desenvolvimento e testes da nova interface do portal com intuito de obter um ambiente virtual em que ao mesmo tempo que dispõe seus diversos conteúdos, recursos e funcionalidades, também se destaque por ser eficiente ao ponto de atender as necessidades dos usuários (consumo de informação) de forma otimizada.
O Google disponibiliza a ferramenta PageSpeed1 que permite orientar de forma abrangente neste quesito.
Os testes podem revelar pontos de melhoria de performance
Outra ferramenta bastante útil é a Pingdon (https://tools.pingdom.com)
Interface é a aparência de um produto, contudo, quando o web é o meio para acesso, estas estruturas de interação as compõem. Este cenário pode compor um cenário paradoxal, pois existem muitas possibilidades de interação e isso pode dificultar a simplicidade de funcionamento de um procedimento para o usuário. Uma boa prática seria a criação de controles por demanda, ou seja, em vez de todas as possibilidades aparecerem de uma vez (sem que de fato o usuário necessite), estas serão acessadas de acordo com as opções desejadas (incluindo campos de texto - autocompletar).
Estas opções poderiam aparecer em campos de buscas dentro do site, de acordo com o seu devido contexto.
Neste exemplo os controles estão vinculados a opção de busca do usuário
Neste exemplo, conhecendo as funcionalidades mais acessadas, prioriza-se estas com uso de abas
De forma a situar e permitir a transparência do processo para o usuário, o uso de estruturas de navegação são apreciadas como as breadcrumbs (exemplo abaixo) conhecidas em diversos frameworks.
A partir de um padrão preestabelecido, as breadcrumbs poderiam aparecer em todos os sites e ferramentas desenvolvidos na instituição. Tendo a preocupação para que haja uma consistência no posicionamento e na aparência desta estrutura em todas as páginas da ferramenta.
Algumas fontes citam duas regras cardinais de navegação:
• O usuário deve sempre saber onde está no site: é confortável o conhecimento desta situação, que pode ser alcançada através de realces, itens de menu, breadcrumbs (trilha de navegação) e títulos.
• O sistema de navegação permanece consistente: em outras palavras, não mova sua barra de menu ao redor. Imagine como seria frustrante se você estivesse perdido em uma cidade, e as placas das ruas alternavam entre postes, laterais de edifícios,
calçada, etc.
Para a completa compreensão do usuário os componentes de navegação (menu, busca ou filtros e links) devem estar bem definidos e bem localizados e a qualquer momento acessíveis para que o próximo passo fique a disposição.
