12 truques de design de interface do usuário para dispositivos móveis e aplicativos da Web que ninguém lhe contou - até agora
Publicados: 2016-02-28[ Proto .io é uma ferramenta de prototipagem de aplicativos móveis usada por empreendedores e startups para criar protótipos realistas totalmente interativos que parecem aplicativos reais.]
Perguntamos a sete designers de interface do usuário, desenvolvedores e empreendedores quais truques de design de interface do usuário para aplicativos móveis e da web eles aprenderam da maneira mais difícil ou aprenderam ao longo de suas carreiras. Ou ninguém nunca contou a eles sobre essas dicas, ou ninguém parece saber sobre os problemas quando eles os trazem. De qualquer forma, aqui estão 12 coisas que você não precisa aprender por tentativa e erro – a menos, é claro, que você já tenha aprendido!
Os 3 principais truques de design de Duffy
John Geletka é vice-presidente executivo de estratégia digital da Duffy (@duffydesignx), uma agência com mais de 30 anos de experiência em design. Aqui estão alguns truques que ele aprendeu ao longo dos anos.
Dois pode ser um número mágico.
“Com o design responsivo, sempre crie duas telas ao mesmo tempo: retrato móvel (320px) e desktop (1200px). Isso torna o processo muito mais rápido”, diz Geletka.
Comece com um design básico.
“Reduza todos os recursos, sinos e assobios em primeiro lugar. Tire o lixo do seu caminho e concentre-se no objetivo do aplicativo”, diz Geletka. “Isso significa não adicionar compartilhamento, economia e todas as integrações ao seu design no início. Certifique-se de obter a ideia principal.”
Não tenha medo de pegar uma caneta.
“As ferramentas digitais são ótimas, mas às vezes você pode fazer mais no papel em 10 minutos”, diz Geletka. “Se você está preso ou com pouco tempo, use papel.”
Alcance o equilíbrio com este truque de design de interface do usuário da Web
Brandon Termini é fundador e diretor criativo da Handsome (@HandsomeMade), uma agência comprometida em criar designs de interface do usuário de aplicativos da web e produtos digitais “propositadamente bonitos e deliciosos”.
Use o peso óptico correto.
“O equilíbrio é extremamente importante ao criar interfaces bem-sucedidas. Um bom equilíbrio permite que seus usuários digitalizem facilmente seu aplicativo da maneira que você deseja”, diz Termini. “Vejo essa regra sendo quebrada com mais frequência ao usar vários ícones nas interfaces. Alguns ícones são mais ponderados horizontalmente, enquanto outros são mais verticais, e é nosso trabalho garantir que, quando reunidos, eles pareçam igualmente equilibrados.”
Peso Óptico e Botões de Reprodução
“Se você está projetando um botão de play, a resposta não é colocar um triângulo de lados iguais horizontalmente e verticalmente centrado dentro de um círculo. Claro, geometricamente eles estão centralizados, mas o triângulo parece opticamente mais pesado à esquerda por causa de sua altura maior”, diz Termini. “Não se preocupe – você pode fazer duas coisas para corrigir isso: ou mover o triângulo ligeiramente para a esquerda para enganar os olhos para vê-lo centralizado, ou reduzir a largura do triângulo ligeiramente para fazer com que todos os lados pareçam iguais.”
Do design de interface do usuário do aplicativo Web para dispositivos móveis
Nossos próximos três truques de design de interface do usuário para aplicativos móveis e da web vêm de Christian Dodd, vice-presidente e diretor de estratégia de experiência do usuário e Nathan Koch, diretor de tecnologia criativa da Cramer-Krasselt (@cramerkrasselt). Cramer-Kasselt é a segunda maior agência de publicidade independente dos EUA, com clientes como Porsche, Corona Extra e Heinz, então Dodd e Koch se valem de um rico reservatório de experiência para nos trazer este conselho:
Não se esqueça de nenhuma interação de foco na Web ao migrar para dispositivos móveis e tenha um plano claro para lidar com elas no início do design.
“O conteúdo escondido atrás de um estado de foco no desktop pode ser tratado de várias maneiras no celular: diretamente na página e escondido atrás de um toque. Nenhuma solução para lidar com eventos de foco na área de trabalho funciona em todos os casos”, dizem Dodd e Koch. “O conteúdo explicativo/utilitário geralmente se beneficia de ser exibido na página, e o conteúdo exploratório geralmente faz mais sentido por trás de um toque. Em geral, à medida que os usuários ficam mais à vontade para rolar em todos os dispositivos, ocultar conteúdo atrás de estados de foco e ocultar/mostrar widgets está se tornando cada vez menos necessário.
Recomendado para você:
O que significa a provisão antilucratividade para startups indianas?
Como as startups de Edtech estão ajudando a qualificação da força de trabalho da Índia e se preparando para o futuro
Ações de tecnologia da nova era esta semana: os problemas do Zomato continuam, EaseMyTrip publica...
Startups indianas pegam atalhos em busca de financiamento
Plataforma de marketing digital Logicserve Bags Financiamento de INR 80 Cr, renomeia como LS Dig...
Relatório adverte sobre o escrutínio regulatório renovado no espaço Lendingtech
Tentar fazer com que o vídeo de reprodução automática funcione na Web para dispositivos móveis geralmente não vale a pena.
“Os desenvolvedores de sistemas operacionais móveis não permitem a reprodução automática de vídeo por um motivo. Em geral, áudio e vídeo são mais perturbadores para o usuário em dispositivos móveis”, dizem Dodd e Koch. “Usuários móveis estão acostumados a fazer escolhas deliberadas para consumir mídia.”
Há mais no design responsivo do que apenas reduzir o tamanho do seu navegador.
“A detecção de recursos também é uma parte importante do desenvolvimento da web móvel”, dizem Dodd e Koch. “Não pense que você não pode adivinhar eventos de toque em um site de desktop, os detalhes da interação móvel são mais sofisticados do que podem parecer.”
Há mais na regra de três do que você pensa
Karolyn Hart é diretora de operações do InspireHUB (@Inspire_HUB) e criadora do IHUBApp, um dos primeiros aplicativos da web móvel de nível empresarial do mercado.
Tente manter todos os elementos de design da interface do usuário do aplicativo Web em grupos de três.
“Nós nos deparamos com a 'Regra de Três' enquanto pesquisávamos como criar confiança em nossa interface para nossos clientes. A V1.0 da nossa plataforma não estava atingindo a marca”, diz Hart. “As pesquisas mostram que três é o número ideal que aumenta a confiança. Menos de três e as pessoas se sentem inseguras, mais de três e se sentem sobrecarregadas.”
“Então, fizemos um desafio de UX de que tudo deve ser apresentado em três”, diz Hart, “desde decisões a etapas à medida que nossos clientes preenchem seus aplicativos. A regra transformou nossa ferramenta. Nosso back-end é extremamente sofisticado para acomodar a simplicidade do design, mas a recompensa valeu a pena!”
Mantendo os gestos simples e intuitivos
Jason Suriano é fundador e CEO da Rocketfuel Productions Inc. (@TrajectoryIQ). Com mais de 13 anos de experiência com design de interface do usuário para aplicativos móveis e da Web, e tendo criado projetos online e móveis para empresas como a Discovery Communications, Suriano pegou algumas dicas profissionais. Aqui está o favorito dele:
No celular, suponha que todos os dedos sejam desajeitados.
“Um truque que implementamos ao projetar jogos para celular é tornar toda a tela inicial uma área tocável. O que isso significa é que, se o usuário tocar no botão iniciar e errar, o aplicativo ainda carregará a tela de jogo subsequente, garantindo que o usuário continue no aplicativo”, diz Suriano.
“Como a UI/UX móvel é definida por toques, toques duplos, furtos e gestos, um passo em falso ao projetar algo simples como uma tela inicial pode deixar seu usuário preso ou frustrado, forçando-o a apertar o botão home e sair do aplicativo”, acrescenta. .
Mantendo a mente aberta para novos truques de design de interface de usuário do aplicativo Web
Nolan Kier e é Gerente de Projetos e Associado de Desenvolvimento de Negócios na Messapps (@Messapps), uma empresa de desenvolvimento de aplicativos com sede em Nova York. “Apesar de ter sido fundada há pouco menos de três anos, a Messapps já se tornou uma das empresas de desenvolvimento de aplicativos mais respeitáveis e inovadoras no campo de desenvolvimento de aplicativos”, diz Kier, “e aprendemos muito sobre a interface do usuário de aplicativos da web truques de design nesses três curtos anos.”
Continue pesquisando novas e melhores maneiras de fazer o trabalho.
“Aprendemos muitos truques ou novos métodos para concluir uma tarefa pesquisando o problema ou aprofundando um problema de desenvolvimento específico para determinar quais respostas podem ser encontradas”, diz Kier. “Exemplos disso incluem aprender a escrever documentos legais escrevendo novos trechos de código para o LaTeX, que é algo semelhante a um editor de texto com um estilo/formato de programação. Além disso, o Mathematica, que é como o Mathcad para MacOS, tinha esse recurso oculto que permitia ao usuário criar um esquema 3D difícil usando o software.”
“Para o design, tropeçar em como compactar quadros usando coisas como modificar canais alfa e a capacidade de compactar imagens individuais usando algoritmos personalizados foram pequenos truques que ajudaram no processo”, diz Kierk. “Estar no negócio de design e desenvolvimento de UI de aplicativos da Web exige inovação que corresponda à evolução da tecnologia. Como resultado, nossos designers e desenvolvedores retrabalham constantemente nossos processos internos e externos para “reinventar a roda” e descobrir novas maneiras de projetar e desenvolver”.
Encontrar as pessoas certas para trabalhar
Robert Pieta é engenheiro de iOS e CEO da Porter Key (@PorterKeyboard), um teclado iOS inteligente que fornece sugestões contextuais. Aqui está o seu maior conselho como engenheiro e empresário:
Encontre um designer de desenvolvedor ou desenvolvedor de designer.
“Alguém que entenda e tenha experiência sênior de ambos os lados ajudará a resolver problemas de comunicação e ajudará a manter um projeto dentro do cronograma”, diz Pieta. “Há dois benefícios principais nisso. Primeiro, uma pessoa com experiência em design e desenvolvimento pode ajudar a preencher as lacunas de comunicação. Tanto o design quanto o desenvolvimento têm seus próprios termos-chave, gírias, suposições implícitas e inquilinos principais. Ao conhecer os dois mundos, os problemas de comunicação podem ser detectados preventivamente.”
“Segundo, um desenvolvedor com experiência em design pode estimar a complexidade e os requisitos de recursos muito melhor do que um único desenvolvedor, designer único ou mesmo gerente de produto”, acrescenta Pieta. “Muitas vezes, pequenas mudanças no projeto podem levar a uma diminuição significativa no tempo de desenvolvimento. Isso é especialmente verdade em dispositivos móveis, onde certos paradigmas de design são virtualmente pré-fabricados. Compreender quais personalizações são fáceis de implementar e quais animações são simples de usar ajudará a garantir que desenvolvedores e designers aproveitem o processo.”
“Algumas equipes existentes podem alegar que reuniões em pé com desenvolvedores e designers resolvem esses problemas”, diz Pieta, “mas, muitas vezes, esse não é o caso. A reunião é muito curta para aprofundar com precisão as suposições de design implícitas, pesquisas anteriores de usuários, decisões de arquitetura de código existentes, escolha de idioma e mais opções que definem o projeto. Apenas uma pessoa com experiência de ambos os mundos será capaz de preencher a lacuna de forma rápida e eficaz.”
E mais um truque nosso: use a ferramenta de prototipagem certa
Alguns truques de design de interface do usuário para aplicativos móveis e da Web podem ser ensinados, e alguns só podem ser aprendidos da maneira mais difícil, por meio da experiência. Felizmente, os designers e desenvolvedores de hoje podem construir sua experiência, como dizem, nos ombros de gigantes.
[ Proto .io é uma ferramenta de prototipagem de aplicativos móveis usada por empreendedores e startups para criar protótipos realistas totalmente interativos que parecem aplicativos reais.]