Categorias

Newsletter

  • http://chocoladesign.com/wp-content/uploads/2016/09/website-apps-cover.jpg
    Design Mobile UX/UI Design

    Diferença entre design de websites e apps

    Existem diferenças fundamentais entre fazer design de websites e apps, e isto deve influenciar totalmente sua forma de pensar estes projetos.


    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!

    FIQUE ATUALIZADO !

    Insira aqui o seu email para receber gratuitamente as atualizações do blog!

    I will never give away, trade or sell your email address. You can unsubscribe at any time.


    • Elenízio Oliveira

      Cara, ficou muito bom. Informações valiosas! Eu até então como usuário comum sempre pensava mais no aspecto visual dos websites e apps, mas não muito nessa questão da função de um e de outro. Valeu! 🙂

    • Matheus de Mello

      Olá, parabéns pelo trabalho!
      Queria saber se vc tem algum conselho para quem quer investir na área de desenvolvimento de apps. Por onde começar, como conseguir clientes etc. Obrigado

      • Olá @matheusdemello:disqus! O ideal, para começar, a se informar bem sobre as diversas áreas em que você pode atuar (front-end, back-end, tecnologias de apps nativos como iOS e Android, etc.) e decidir por uma delas.

        Qualquer dica que eu for te dar depende do nível de conhecimento que você já tem, mas pressupondo que você seja um total iniciante, seria ideal procurar ter uma noção de geral de como as coisas funcionam para apps mobile e apps web, como diferem entre si, e ter uma boa base de lógica de programação.

        Seu melhor amigo, nestas horas, vai ser o Google, e fará MUITA diferença se você tiver domínio do inglês, no mínimo em um nível em que consiga se virar para ler e entender (lembrando, também, que todas linguagens de programação são em inglês).

        Sobre conseguir clientes, você tem a possibilidade de trabalhar como funcionário de alguma empresa ou como freelancer. No caso de um programador, geralmente os freelas são para empresas ou agências que vão revender seu serviço como parte de um projeto maior, mas nada impede que você também trabalhe para um cliente final.

        Enfim, o assunto é muito amplo e eu precisaria de mais informações a seu respeito para dar dicas melhores. Se quiser, pode comentar aqui um pouco do seu background que respondo assim que possível.

        Abraços!