Diferença entre design de websites e apps

Jon Vieira
Aela
Published in
4 min readDec 15, 2015

Existem diferenças fundamentais nas funções de websites e aplicativos, e isto deve influenciar totalmente sua forma de pensar e desenhar estes projetos.

O fato de que ambos podem ser desenhados utilizando princípios semelhantes, que podem ser construídos utilizando as mesmas ferramentas e linguagens e que podem compartilhar a mesma plataforma (como o browser, por exemplo), pode trazer confusões a respeito dos objetivos de cada um deles.

Websites

Websites

Em termos bem simples, um website tem o objetivo de facilitar com que um usuário encontre facilmente uma informação que queremos que ele acesse, enquanto um app tem o objetivo de permitir ao usuário que execute uma tarefa que ele precisa.

Adicionalmente, um website visa permitir que o usuário interaja com uma empresa, marca ou produtos através de uma estrutura mais informativa, sem funcionalidades extremamente avançadas, servindo como uma ferramenta de marketing em que o designer tem a missão de garantir que uma mensagem seja devidamente recebida e facilmente encontrada. Em geral, o papel de um website é informar e gerar conversões, o que podemos traduzir por vendas, novos clientes, fidelização de clientes, posicionamento de marca, ou vários outros objetivos.

Em termos mais técnicos, a UI de websites tende a explorar imagens, elementos decorativos, textos mais longos e um apelo promocional, visando às conversões.

Aplicativos

Já os aplicativos geralmente têm seu propósito focado em um objetivo único, que é uma tarefa a ser executada pelo usuário. A arquitetura de informação e interações são essenciais, assim como nos websites. Porém, pensamos estes aspectos de forma diferente, visando auxiliar o usuário a concluir seus objetivos rapidamente.

Aqui temos interfaces bem mais enxutas com acesso fácil e rápido às funções primárias, foco no uso de tecnologia oferecida pelo dispositivo (GPS, gestos em touch screen, etc) e uma navegação mais linear, pois o usuário precisa ter claramente os caminhos para iniciar uma tarefa e ir até o fim.

Exemplo prático

Email

A título de exemplo, vamos usar o Gmail, um aplicativo cujo propósito é enviar e receber e-mails. A maioria das pessoas que acessam o aplicativo precisam, rapidamente, executar apenas a tarefa principal (neste caso, a troca de e-mails). Porém, podemos encontrar outras funções secundárias que agregam valor ao app, como por exemplo, um sistema de chat e ligações integrado (o Hangouts).

Em paralelo, um novo usuário vai se deparar com o website oficial, onde poderá tirar suas dúvidas a respeito do funcionamento do app. As informações são dispostas de forma a convencer o usuário a se cadastrar, ou seja, de forma a gerar conversão.

O interessante é que, uma vez convertido, o usuário dificilmente retorna ao website, a não ser que tenha problemas e precise dos canais de atendimento, o que vai ao encontro do propósito do website, que é permitir que ele interaja com a empresa e obtenha informações.

Portanto, observe que em ambas situações, estão presentes UX, arquitetura da informação, UI, front-end, back-end, web-hosting, etc. Temos a mesma base, porém com itens voltados ao propósito cada um dos casos:

  • App
  • Função principal (execução de uma tarefa): envio de e-mails
  • Funções secundárias (complementares à função principal): chat, ligações, etc
  • Site
  • Função principal (conversão): gerar novos cadastros
  • Funções secundárias: fornecer informações a respeito do app, formas de contato com a empresa, etc

Não confunda a complexidade do projeto com seu objetivo, pois muitos sites têm estrutura visual e técnica muito complexa, com aplicações embutidas (sistema de busca complexo em um site de notícias, por exemplo) ou ferramentas interativas tão elaboradas que deixariam qualquer programador de cabelo em pé e, ainda assim, cumprem os requisitos de website. Assim como temos aplicativos muito simples em sua estrutura que podem se tornar essenciais em nosso dia-a-dia (quem não usa o alarme do celular?).

Para concluir

Webapp

Depois de todas estas diferenciações, posso finalizar dizendo que também existem inúmeras similaridades entre ambas situações. Tanto o website quanto o app devem:

  • ser práticos e de fácil uso;
  • oferecer ao usuário uma experiência agradável durante todo o processo de conversão e de execução de tarefas;
  • ser (preferencialmente) pensados para múltiplas plataformas;
  • entre outros.

Espero que você tenha entendido as diferenças básicas de design de websites e apps e que informações sejam úteis para você evoluir em seus projetos e conduzir melhor seus estudos.

Você tem mais algum item que considera importante tanto em sites quanto em apps? Deixe nos comentários!

Abraços e até a próxima!

--

--

Jon Vieira
Aela
Writer for

Product Designer, currently @ Facebook VR/AR