Pular links da navegação e ir direto para o conteúdo

Publicado em 22 de May de 2009 às 07:04

Mockup: Como a interface ‘Compose Mail’ do Gmail deveria ser

Como designer de interfaces, é difícil usar um software sem pensar nos problemas de sua interface. No caso do Gmail sempre achei que o campo de destinatário e de assunto não deveriam ser os primeiros a preencher na tela de escrita de e-mails. E olhando bem, algumas outras coisas poderiam melhorar pra deixá-la ainda mais funcional. Ignorando estética e focando na usabilidade, aqui vai uma comparação:

Original:

Interface de Compose Mail Original

Minha sugestão:

Interface de Compose Mail do Gmail realinhada

Apesar das mudanças serem simples, concorda que as coisas fazem mais sentido? Geralmente quando clicamos para escrever um e-mail, já estamos formulando o corpo dele na nossa mente, por isso eu defendo que ele deveria ser a primeira coisa da interface. Além disso diminui muito a probabilidade de enviarmos a mensagem pela metade sem querer (muito comum), já que só infomaremos o destinatário depois de compô-la.

Afastar o botão “Discard” do “Save now” também faz sentido, pois são ações que quase se anulam e o usuário ao querer salvar poderia clicar por engano em descartar. Como é uma ação crítica justifica o uso do vermelho.

Já posicionar o link para anexar arquivo no início e próximo ao botão de enviar pode evitar outro problema comum: quando esquecemos de anexar o arquivo antes de enviar o e-mail.

Você concorda? O que achou?

Você é Desenvolvedor ou Designer?
Leia o blog do VTEX Lab, núcleo de inovação para ecommerce da VTEX. Também escrevo por lá. :)

Tags:, , ,

  • Rodrigo, esses problemas acontecem toda hora comigo e creio que a solução que você propõe me ajudaria bastante.

    Seguindo uma ordem provável de varredura visual e sua constatação de que antes de tudo rapidamente rascunhamos a mensagem do e-mail em nossa mente (a partir de uma necessidade) para só depois iniciarmos sua escrita propriamente dita, eu sugeriria apenas posicionar os links ‘Attach a file’ e ‘Add event invitation’ abaixo do corpo da mensagem e logo acima da linha do Subject.

    A propósito, o form de comentários do seu blog é similar à sua proposta: primeiro vem o campo do comentário em si e só depois os demais campos (‘Seu nome’, ‘Seu e-mail’ e ‘Website’) :-)

  • Istvan de França

    Eu não concordo, nem todos tem essa visão e utilização do cabeçario do e-mail, mas acho que seria interessante a opção para escolher o posicionamento que o usuario deseja, como se pudesse movimentar os blocos de cabeçario e corpo do e-mail de um lugar para o outro, como faz o netvibes por exemplo.
    Acho tb que essa segunda opção seria muito interessante para replys

  • Istvan, realmente se criassem um labs para que o usuário pudesse escolher o posicionamento seria muito bem aplicado nesse caso, o problema são os botões e os links que são mais complicados de serem movidos. Sua visão é interessante.

  • Perfeito!
    Eu sou craque em escrever e não anexar arquivos. Fato que me deixa muito irritado, pois dá sempre a impressão para a pessoa que irá receber a mensagem de que você não é uma pessoa atenta.
    Como procedemos para enviar a sua sugestão ao Google hein!?

    Abraços!
    :D

  • Isso mesmo Filipe, venho usando o form de comentários com essa ordem há um bom tempo e acontece até de receber e-mail de pessoas só pra falar que acharam a idéia boa. Sobre o posicionamento do link de “Attach a file” eu cheguei a colocá-lo logo depois do editor, mas minha mente não parava de mandar eu jogá-lo pra perto do botão de enviar. Quem sabe ele próximo ao botão enviar inferior não seria até melhor?

  • Vinícius Sales

    Ao meu ver, uma mudança de interface não faria assim tanta diferença. Qualquer uma das duas interfaces vai favorecer situações opostas.

    Agora, o que faz a diferença é o fato de uma nova interface evitar problemas como envio de emails antes de terminá-los ou sem anexos.

    Hoje já existe no Gmail a opção de “desfazer” o envio, caso ele tenha sido enviado acidentalmente. Ao enviar o email, é dado um intervalo de alguns segundos, que é o tempo que você tem para desfazer a ação.

    Também existe uma solução para evitar o envio de email sem anexos, mas não é muito eficaz. Caso o sistema detecte que foi mencionado no email que existem arquivos anexos, ele te lembra de anexá-los antes de enviar o email.

    As duas soluções que já existem poderiam ser integradas à nova interface atuando como complementos, e não como uma única solução para cada caso.

    Lembrando que elas podem ser habilitadas em Settings > Labs.

    No mais, acho que a opção de reposicionar o cabeçalho, como citaram, seria o mais viável. Assim cada um adequa à sua necessidade. Assim como já acontece com as boxes Chat e Labels.

  • Concordo em partes, mas tem que admitir que inserir o assunto após a mensagme é algo fora do padrão, realmente nunca vi isso… mas seria interessante!

  • Também acho que o botão anexar poderia aparecer abaixo também. Como o Cristiano disse as vezes você escreve a mensagem “segue anexo arquivo” e acaba esquecendo de anexar.

    Como a gente acabaria o texto mais na parte de baixo do editor, o uso do botão enviar inferior teria maiores chances de clique e um “anexar arquivo” ali serviria como um trigger para a gente não esquecer.

  • Olá Rodrigo, concordo sim com suas exposições concernentes à interface do Gmail. Utilizo o Gmail inclusive para gerenciar outras contas e já passei algumas vezes por problemas de usabilidade que vc citou como enviar e-mails sem anexar o arquivo e descartar mensagens por engano. Um abraço.

  • Ola Rodrigo,
    Também concordo em partes, acho que separar o botão de enviar do botão de descartar é mesmo muito util, mas eu colocaria o de enviar do lado direito e o de descartar do lado esquerdo.
    Nesse caso as abas de “Plain Text” e “Rich Text” ficariam do lado esquerdo, o que também seria melhor na minha opnião.
    E uma coisa que achei otima foi colocar o botão de anexar ao lado do de enviar, mas por que ele só está em cima? Eu acho que o botão enviar de baixo seria muito mais usado, logo o botão de anexar deveria estar em baixo também.
    So não sei o que eu faria com o botão “Abrir em Nova Janela” nesse caso, pois o botão de enviar ficaria no lugar dele.

    Mas somente minha opnião… acho que cada um vai ter uma diferente, o ideal seria uma opção no labs pra cada um montar a interface do seu jeito mesmo.

  • Concordo com muita coisa dita, e vi que funciona quando fui comentar sobre o texto, no caso agora, aqui funciona perfeitamente pq já sei dos dados abaixo(meus), mas no caso do gmail às vezes eu não tenho certeza se tenho o e-mail da pessoa. Então escrever a mensagem inteira pra depois ver que não tenho o e-mail da pessoa é BEM chato. Mas seria legal se desse para ter como escolher :)

  • E eu acho que campos “obrigatórios” como mensagem, título e anexo deveriam ficar de cor diferente para nos alertar após passar por eles e nada escrever.

  • Sei que estou atrasado, até porque cheguei a seu site por um post no twitter.

    Mas não concordo com a mudança da interface, porque por mais que eu também tenha esse pensamento de “rascunhar” a mensagem enquanto penso que irei enviar um e-mail, é muito mais comum pensarmos assim:

    Preciso enviar um e-mail para pessoa (empresa) tal à respeito de tal coisa.

    Muitos sistemas preveem as duas situações: Pessoa escreveu mensagem mas não o destinatário e aí não tem como envia-la mesmo e a pessoa escreveu um destinatário mas não assunto ou mensagem e aí é apenas alertado a respeito do fato.

    E isso, já é um grande motivo pra importância do destinatário e sua determinação como primeiro campo a ser preenchido.

    Já no caso do comentário (como é usado em seu site) e foi exemplificado por alguns, a situação é bem diferente. O destinatário já está determinado e nem é possível altera-lo, e o que eu escrevo de adicional são meus dados e não os dados de para quem será enviada a mensagem.

  • É interessante pensar alternativas para sistemas “clássicos” que usamos no dia-a-dia, mas acho coerente seguir sempre modelos conceituais que visem a consistência da interface sob a experiência e expectativa dos usuários. O Google segue um padrão estabelecido e usado há um tempo suficientemente razoável. Mudá-lo, provavelmente, causaria mais transtornos que benefícios de modo geral, e não alteraria em nada o funcionamento efetivo do sistema de e-mail – como deixa-lo mais rápido, por exemplo. É bom senso seguir, neste caso, a regra de “memória permanente” – reconhecer em vez de relembrar. Sobre o botão Discard, ele segue um agrupamento por distinção e localização lógicos (ver CYBIS, “Ergonomia e Usabilidade”, cap.1). Abraço e parabéns pelo blog.

Sobre

Nascido em 1984 é Desenvolvedor Web autodidata desde 2002. Hoje especialista em Design da Informação pela UFPE é Designer na equipe de UX no VTEX Lab (núcleo de inovação para ecommerce), da VTEX.

Saiba mais