HIG na prática: Como incorporar as diretrizes no seu aprendizado em design
Todo jovem designer de produtos digitais inicia sua jornada profissional com uma ideia completamente equivocada de como projetar interfaces mobile. Enquanto consumidores ativos de aplicativos, absorvemos quase que de forma involuntária diversos conhecimentos sobre componentes, padrões e navegação, levando determinada prática como correta sem reflexão e tornando complexo o que poderia ser bem mais simples.
Todo esse processo nos distancia dos desenvolvedores, dificulta o handoff, aumenta o tempo de entrega, gasta recursos e principalmente não entrega uma solução com a melhor experiência do usuário. Então se você, assim como eu, já irritou muitas pessoas dev por aí, chegou a hora de facilitar um pouco mais a vida deles — e a nossa!
Referências questionáveis
É comum no universo do desenvolvimento iOS utilizarmos apps de Big Techs como referência máxima no quesito usabilidade, e talvez esse seja nosso maior erro, o de projetar sem refletir o contexto do nosso produto. É fato que muitas vezes as plataformas com grandes quantidade de pessoas usuárias acabam ditando novos padrões de interfaces, mesmo com fluxo e navegação confusa. Afinal, não é porque o Facebook e LinkedIn são grandes empresas que a interface dos seus apps serão o melhor exemplo de boas práticas.
O que é a HIG?
A HIG, ou Human Interface Guidelines, é um guia de boas práticas para ter uma melhor experiência do usuário nas plataformas da Apple, como iOS, macOS, tvOS, iPadOS , watchOS e o mais novo visionOS 🥽. Basicamente você vai ter acesso a fundamentos de aparência, políticas específicas da empresa, definições técnicas, entre outros.
HIG como fonte de estudo
Ao contrário do que muitos acreditam, a HIG não é apenas sobre interface, mas sobre boas práticas que vão desde a arquitetura até se materializarem na UI. É através dela que desenvolvedores iOS podem entender porque os componentes funcionam daquela maneira, para determinada situação.
Por exemplo, você já se perguntou por que utilizar entre 3 a 5ícones na Tab Bar? Bem, além da própria anatomia humana (as polegadas de uma pessoas não suportariam 6 espaços para toque com qualidade), o fato de o máximo ser 5 ícones já indica que os aplicativos não devem possuir 500 mil funcionalidades, apontando que talvez seja o caso de construir a solução em um outro formato. O mesmo também vale para apps com 1 ou 2 ícones na Tab Bar, indicando que seja melhor um outro tipo de navegação.
O que posso aprender seguindo a HIG?
Todas as diretrizes presentes fazem parte de uma série de estudos, então se você é novo na área vale a pena se perguntar qual a razão de determinados padrões como forma de adquirir novos conhecimentos em UI e UX. Se liga em alguns exemplos básicos:
1. Semântica
Uma dificuldade grande quando se está começando a desenvolver produtos digitais é saber como chamar os componentes. Segmented controls, Tab Bars, Toggles, Toolbar, Search Bars, Status Bar fazem parte do nosso dia a dia, mas várias vezes não sabemos como chamá-los. Entender a semântica (ou nome) dos componentes para o handoff é essencial, ampliando as possibilidades de projeto e deixando mais claro para a pessoa dev como uma interação deve se comportar.
2. Evitar complexidade desnecessária
“Ah, mas eu quero ser criativo, a HIG não vai me limitar?
Se tem uma habilidade importante para uma pessoa designer junior é aprender a não complicar algo simples. Assim, quando se estuda formatos nativos evita-se o uso de componentes muito complexos sem necessidade, diminuindo o tempo e o desgaste no desenvolvimento. O handoff para as pessoas dev também flui de uma forma mais assertiva, além da implementação ter muito mais chances de ficar próxima do protótipo.
3. Escolher o melhor tipo de navegação
Entender sobre componentes é primordial para garantir que o usuário possa interagir com um aplicativo e entender o tráfego entre suas telas. Saber dos tipos de UI Bar, suas finalidades e estruturas faz parte de uma boa formação de design de produto. Sempre vale a pena se perguntar “O padrão de navegação está contribuindo para atender as necessidades e que o usuário deseja suprir com o uso do produto?”, baseando-se nos padrões da HIG.
4. Tecnologias voltadas para acessibilidade
A HIG é um ótimo guia para aprender sobre tecnologias que a Apple já possui voltadas para acessibilidade. Voice Over, Keyboard Support e audio descriptions são alguns dos exemplos. É fato que muitas vezes só nos desafiamos a projetar o que conhecemos, então é super importante saber o que já existe tecnologicamente.
Você sabia que o iPhone e iPad já suportam navegação por Eyetracking? Imagina a possibilidade de soluções voltadas para pessoas que precisam navegar com olhar…
5. Colocar o App na Loja
Se você ainda é novo nesse universo do desenvolvimento iOS provavelmente nunca sentiu dificuldade em colocar um aplicativo na App Store. Entre questões de segurança, descrição, arquivos, bugs e arquitetura, fica ainda mais difícil ser aprovado de primeira com componentes que não seguem a HIG. Não tenha dúvida, é muito mais fácil um aplicativo ser aprovado na na loja quando utiliza-se soluções nativas.
[EXTRA] Construir componentes no Figma ou Sketch
Como forma de facilitar nossas vidas — e estimular o uso de componentes nativos — a Apple disponibiliza uma infinidade de templates que são ótimos para estudo. Além do acesso a componentes prontos para prototipação, você consegue aprender sobre como eles documentam e categorizam seus produtos.
Bem, se esse artigo te fez pelo menos dar uma fuçada nas diretrizes do ecossistema Apple eu já fico feliz. Lembrando que precisamos sempre nos atentar ao que de fato faz sentido para a nossa solução e o que é apenas uma reprodução sem contexto.
Obrigada por ler até aqui :)
