Como melhorar a experiência do usuário com “Empty States”

Bruna Bites | | melhores praticas para seu app

Antes de mais nada… O que são Empty States? Na tradução livre do inglês “Estados Vazio” é o que o usuário vê no aplicativo quando não há dados ou resultados para serem exibidos. O que é bem comum, já que ocorrem, em geral, porque:

  • Primeiro uso: o usuário apenas se inscreveu e não informou outros dados necessários para uma dada funcionalidade;
  • Dados removidos: Os dados informados pelo usuário não foram encontrados ou não existe correspondência para eles;
  • Houve um erro ao carregar os dados na tela (estamos falando de produto móvel, que depende de conexão, isto pode acontecer mais do que o esperado).

Em cada uma destas situações, deixar o espaço vazio realmente vazio, pode causar um problema de experiência, empatia e de uso do aplicativo. Um artigo bem legal da Tech Crunch faz uma análise profunda sobre o assunto e mostra como obter atenção do usuário a partir do uso de “Empty States”. E por aqui, nós vamos apontar na prática alguns exemplos de como usar este espaço para direcionar o usuário e que podem ajudar bastante.

1. Eduque: Direcione o usuário a executar a ação essencial do propósito do aplicativo:

Criar listas, cadastrar itens favoritos e efetuar buscas para novos usuários de uma aplicativo, podem ser ações simples ou grandes mistérios de como usar:

leroy-merlin_alertas

O empty state é 100% vazio neste exemplo. Além da funcionalidade não ser intuitiva, não existe um guia ou passo-a-passo para o usuário, ele chega no famoso “fim da linha” e não tem indicação de como proceder.

airbnb_whislist

Esse é um exemplo de como fazer o usuário executar da melhor forma a ação requerida na funcionalidade. Ele entrelaça o ciclo do usuário para não perdê-lo. Além de explicar o que é a funcionalidade, ele ainda orienta como usá-la imediatamente com um claro e destacado botão de ação, o famoso “click to action”.

2. Surpreenda: Use elementos simpáticos e ganhe a empatia de seu usuário:

Não tem coisa mais chata que a frustração de explorar uma funcionalidade e ela não ter o resultado imaginado. E pior, receber qualquer tipo de mensagem ou alerta que sugere o tamanho de sua estupidez por não “saber” usar.

swarm_msgs_01

Aqui é possível entender que não tem nenhuma mensagem, certo? Porém não explica muito o que é possível fazer e nem é muito animadora e tampouco positiva.

swarm_msgs_02

Já essa tela mostra que existe algo que pode ser feito, dando alguma esperança para o usuário. Mas percebam que ainda assim, ela tem pouca empatia e não é muito atrativa.

É importante lembrar que uma experiência positiva só se constrói com elementos positivos. Não consigo imaginar como tirar algo positivo com uma tela assim.

swarm_msgs_03

Agora sim! Uma tela completa com uma imagem simpática, informação indicativa e ainda um botão ação.

De forma descontraída e bastante simpática, o app explica o que está acontecendo e como é possível seguir adiante. Simples assim!

3. Segure e assegure: Faça o usuário tomar a decisão e a ação imediatamente:

O usuário precisa apenas usar o app, e não ter mestrado obtido no Google ou Youtube sobre como usá-lo. Facilitar decisões e ações é fundamental, mesmo porque, quando a coisa fica muito difícil, a taxa de desistência e desinstalação aumenta.

Por exemplo, ok que já deu para entender como usar o treco, mas poderia facilitar dando um atalho e não apenas um zero desolador.

tudo-gostoso_receitas-favs

Imagine se além de mais simpático e educativo, existisse um atalho para que a ação fosse feita, o famoso click to action, lembra?! O dedo iria direto nele e logo o espaço vazio seria preenchido, né? O exemplo abaixo indica bem como isto funciona:

pinterest_msgs

Um Empty State não só deve ter seus elementos planejados para não causar desconforto ao usuário com mensagens chatas ou confusas, mas principalmente, para conduzir a navegação de volta ao fluxo útil do produto. E claro, usar elementos simpáticos e bonitos podem transformar a experiência do usuário.

Vem notícia boa logo mais!

Bruna Bites | | tive uma ideia

Porque nós amamos mobile e design e também porque queremos cada vez mais compartilhar conhecimento, conectando pessoas para transformar aplicativos em bons negócios, fomos buscar reforços de peso no mercado de startups.

Fiquem atentos, pois conseguimos dar um passo muito importante que vai transformar a SobreApps numa empresa que vai além, e vai transformar a maneira de se criar produtos digitais e mobile no mercado brasileiro.

Os 6 erros mais comuns em projetos mobile

Bruna Bites | | tive uma ideia

Ao longo de todos esses anos que trabalhamos com projetos mobile, muitos compartilharam ideias de aplicativos e nos perguntaram se daria certo, se a ideia era boa. O curioso é que a primeira pergunta nunca foi qual o melhor jeito de construir o app ou de colocar esta ideia na prática.

Após inúmeros projetos e produtos, de empreendedores, empresas grandes ou pequenas, identificamos os erros mais comuns e que mais comprometem o sucesso de um produto que além de comprometerem a qualidade final, quebrarem prazo e aumentarem o custo (seja para o cliente ou para quem está desenvolvendo, não tem jeito, vai dar prejuízo) desgastam a relação entre os membros dos times.

São eles:

1) Começar o desenvolvimento e só depois iniciar o layout:

Uma comparação é ao construir uma casa. Começar a desenvolver antes de pensar no layout, equivale a começar a subir paredes sem saber exatamente onde elas devem ficar. Percebe que a chance disso dar certo é muito baixa, certo? É incrível a quantidade de projetos iniciados assim. O custo para implementar o layout, o fluxo e os comportamentos depois acaba ficando mais alto, sem contar a gravidade de não trabalhar corretamente o UX ou acabar diminuindo a liberdade de criação no design por medo de não dar certo na hora de implementar em um sistema já pronto.

O melhor é iniciar o projeto tendo uma estratégia do produto mínimo (MVP) alinhando UX/UI e também envolvendo desenvolvedores – porque não? – para que quando for iniciar o desenvolvimento os trilhos já estejam montados para fluir o máximo possível.

2) Começar desenvolvendo e depois integramos com APIs:

Se usarmos a analogia de construção de casa, isto seria como começar pelas paredes e telhado para depois fazer o alicerce. Esta situação é uma das mais comuns, muitas vezes pelo fato da equipe de backend e web ter outras atividades priorizadas. Em geral, o retrabalho nos aplicativos no momento de integrá-los após já construídos é significativo, podendo inclusive inviabilizar algumas funcionalidades porque a arquitetura não comporta o comportamento desejado.

O backend e os WebServices devem ser feitos antes do início do desenvolvimento do app, e é fundamental que esteja 100% alinhado com os comportamentos previstos na etapa de UX e UI.

3) Não ter um UX/UI com conhecimento Mobile:

Investir tempo para aprendizado em Mobile e suas melhores prática é fundamental. Estamos cada vez vendo mais layouts com características muito mais de web que de mobile, talvez pelo boom de criação e planejamento de aplicativos e demanda de profissionais, o que acaba comprometendo o produto final. Além de velocidade e qualidade, na maioria das vezes os fluxos e comportamentos não são comuns para um app na visão do usuário, o que gera desconforto e péssima reputação.

O melhor a fazer é estudar e praticar muito os guides de cada OS e assim, potencializar as chances de sucesso do produto.

4) Não realizar testes com cenários de rede e memória:

Ok, é muito difícil realizar testes em todos os aparelhos necessários, pelo alto valor de investimento na compra dos devices e pelo tempo para execução da rotina de teste (impressionante como tem pressa quem quer desenvolver um app!). Por isto muitos acabam realizando a maior parte dos testes em simuladores. Este erro compromete muito o pós lançamento, pois na vida real os usuários vão usar diferentes modelos de smartphones e tablets, com diferentes configurações de memória e tela, com inúmeros vídeos, músicas, fotos e apps instalados, e com todo tipo de sinal de rede (de inexistente ao ótimo).

Neste caso, o melhor a fazer é ter claramente qual o comportamento esperado para situações sem rede ou pouco sinal e testar no maior número de equipamentos possível, com diferentes cenários de rede (wifi, edge, 3G, 4G…) e memória.

5) Incluir versões antigas de OS:

É claro que quanto maior o número de usuários melhor, mas é preciso se desapegar de alguns. Se são lançadas novas versões de OS (Android e iOS por exemplo) é porque é preciso ajustar algumas coisas e evoluir outras. Apesar disso, é comum o desejo de manter versão 2.3 do Android e 6 do iOS para suportar o maior número de equipamentos possível, o que é um erro super comprometedor porque isto promove o nivelamento por baixo.

O melhor a se fazer é determinar as duas últimas versões e manter sempre o foco na próxima, para que os usuários possam usufruir do máximo de possibilidade de implementação que depende do OS.

6) Mudar escopo no meio do desenvolvimento:

Ter alguns ajustes no meio do caminho é aceitável. Mas o que ocorre com muita frequênciaé mudar o escopo adicionando ou alterando funcionalidades quando o projeto já está na fase de desenvolvimento. Isso gera potenciais  atrasos, diminuição da qualidade de entrega e na maioria das vezes, desmotivação da equipe.

Para evitar conflitos e administrar possíveis mudanças no produto o que aconselhamos é dividir o escopo em pequenas partes entregáveis e imutáveis.

É preciso reconhecer que na maioria dos projetos de aplicativos a equipe responsável nas empresas não tem experiência com apps, e em muitos casos até com tecnologia. Nas nossas observações, em geral, o cliente dono do produto é originado das áreas de comunicação das empresas, o que, em muitos casos, não permite clareza sobre o processo de desenvolvimento.

— ~ —

Por conta disso, para evitar esses erros do projeto é preciso ter 3 pontos que devem ser considerados dogmas e nunca serem ignorados:

1) Estabelecer um processo de entendimento, criação, documentação, desenvolvimento, testes e implantação muito claro e com vários pontos de validação do cliente. Sendo que sem determinadas validações o processo não pode evoluir para o próximo passo.

2) Comunicação e Alinhamento periódicos com as equipes envolvidas para que dependências, decisões e status sejam discutidos e devidamente compartilhados – o desenvolvimento de aplicativos se dá muito bem com scrum!

3) Sinceridade! A equipe desenvolvedora e a equipe cliente precisam trabalhar sempre com a verdade. Se é possível ou impossível, se é bom ou ruim, bonito ou feio, interessante ou ridículo… Além do entendimento das necessidades e limitações, com isto, é possível garantir objetividade e responsabilidade dos envolvidos.

[box type=”shadow”]A SobreApps tem uma equipe especializada em desenvolvimento e gestão de projetos mobile. Quer evitar atrasos e aumentar a qualidade? Entre em contato e saiba como: alo@sobreapps.com.br[/box]

Tem que ser diferente do site!

Bruna Bites | | melhores praticas para seu app

É muito comum encontrar avaliações e comentários negativos sobre aplicativos que tenham navegação como o site mobile ou que são apenas uma webview (abrir o site dentro do app, como se fosse no navegador normal).

Os principais motivos de criar um produto assim são:

  1. Baixo Custo: sim, é mais muuuuuuuito mais fácil desenvolver neste formato e o layout pode ser totalmente aproveitado do site.
  2. Rápida implementação: se é mais fácil, tem que ser mais rápido, certo?
  3. Resistência ao novo: famoso pensamento de “em time que está ganhando não se mexe”.

Apesar de todos estes pontos, é sempre importante entender o que o usuário espera do aplicativo quanto a comportamento, navegabilidade e funcionalidades. Por conta disso, na maioria dos casos, esse “barato” pode sair caro, já que não vale de nada um aplicativo se os usuários não o usam.

Por isso é importante observador os principais motivos para o app possuir navegação nativa:

  1. Usuário está mais acostumado e espera um layout e um comportamento diferente do site, afinal, ele está baixando o app e não entrando no site;
  2. Não existe muito motivos para criar o app se ele vai ser igual ao site mobile, o ideal é ter funcionalidades complementares;
  3. As lojas (Apple e Google, por exemplo) dão predileção para apps nativos e que seguem os guias de layout para colocar em destaque, e estar em destaque é sinônimo de mais usuários.

A verdade é que em alguns exemplos, os usuários acabam tendo uma má impressão do produto, como no exemplo do app da Livraria Saraiva na App Store:

saraiva_apps_vs_sites
As duas primeiras imagens mostram site e aplicativo que são basicamente iguais. E com isso os comentários nem um pouco agradáveis.

Veja também o exemplo do app da Magazine Luiza (Magazine Luiza – Android) e (Magazine Luiza – iOS) comparado com seu mobile site (:

ml_apps_vs_sites
Alguma diferença entre aplicativo e site? Praticamente nenhuma. E vale dizer que usando o site se comportou até melhor que o app.

 

Lembre-se sempre: aplicativo é uma coisa, site é outra totalmente diferente e, muitas vezes, o que funciona em um deles não funciona no outro, pelo simples fato de termos plataformas, recursos  e usuários diferentes. Sempre coloque essas questões na balança na hora de decidir o que sua empresa realmente precisa.

Photo by Aurimas Adomavicius

Startups na Campus Party 2015

Bruna Bites | | inovação

Acabou neste sábado dia 7 de fevereiro a Campus Party 2015. Além das várias palestras muito legais, o setor de Startups & Makers ganhou destaque este ano pela diversidade de temas e sobretudo, pela relevância dos negócios.

As Startups foram divididas em dois blocos: o primeiro (dias 4 e 5 de fevereiro) foram aquelas com sistemas e negócios iniciados, que já passaram por aceleração ou incubação; o segundo (dias 6 e 7 de fevereiro) foram aquelas em fase de pré-lançamento, que estavam conceituando, prototipando, desenvolvendo ou em beta teste (versão inicial para testes e ajustes).

A SobreApps visitou os dois grupos e encontrou alguns negócios interessantes, que merecem atenção nos próximos meses:

Primeiro Grupo:

  1. SmartCoin: Gateway de pagamento que tem como principal proposta a simplicidade. Sem burocracias para aprovação dos pagamentos (pois usa tecnologia e inteligência para evitar fraudes) permite que seu negócio (e app) aceite as principais bandeiras de cartão e até BitCoin! Vale a pena conhecer mais, promete revolucionar o mercado de Gateways que com pouca frequência atende as principais peculiaridades dos negócios.
  2. TraktoPRO: Excelente ferramenta para freelancers, permite efetuar cálculos de orçamentos de forma rápida e prática e montar uma proposta comercial de forma segura e elegante. Vale a pena conferir e testar para entender se atende seu negócio. Com certeza vai ajudar a fechar muitos freelas!
  3. Eyso: Plataforma que permite diagnosticar e a otimizar a aquisição orgânica de usuários do seu app. Além de diagnóstico de ASO e serviços de App Marketing, propõe o crescimento de downloads do aplicativo de forma exponencial. Fica a dica mesmo, é muito interessante e eficaz.

Segundo Grupo:

  1. Brabov: nas versões iOS, Android e Web, a ferramenta permite coletar dados e gerenciar a produção da fazenda. Voltado para o mercado pecuário, apresenta bastante potencial não só pela carência do nicho escolhido, mas também pelo modelo de negócio implementado. Vale a pena conferir e acompanhar.
  2. Ponto Educa: ferramenta de fidelidade que permite com que o usuário acumule pontos efetuando compras nas lojas parceiras e trocar por desconto em cursos. Não só a ideia surpreende como também os parceiros já conquistados. Fique de olho porque promete muito!
  3. Ideia Labs: inicialmente com automação de iluminação (lâmpadas inteligentes + aplicativo para controle) a Startup promete avançar para os demais recursos residenciais e comerciais. Ficamos na torcida e aguardando nossa lâmpada para testes.

Instant Skills – Habilidades Instantâneas

Bruna Bites | | inovação

O “faça você mesmo” é uma das maiores características culturais dos Estados Unidos e de muitos países da Europa. Guias e mecanismos que permitem aprender habilidades rápidas, ou “instant skills”, para resolver pequenas emergências ou realizar um projeto doméstico exitem aos montes em sites gringos e vem ganhando cada vez mais espaço por meio de aplicativos, gadgets e outras tecnologias. Mas a grande pergunta é: será que esta moda pega no Brasil?

Nos tempos da minha avó todo mundo fazia tudo. Logo depois, com o excesso de coisas automáticas surgindo, cresceu o comportamento de valorização do “ter” em detrimento do “saber”. Em contrapartida, a cada dia o status de “ter e ser” está dando espaço para “saber, fazer e criar”. Muitos atribuem isto ao fácil acesso às informações (obrigada Internet pela graça alcançada), pela reconfiguração da forma como as pessoas trocam experiência (grupos e fóruns online, seus lindos), e da necessidade de se buscar relaxamento (o estresse nosso de cada dia) fazendo algo artesanal ou criativo, ou ainda, para economizar uns bons trocados.

Com esta nova atribuição de valor ao conhecimento e à prática, podemos vivenciar uma crescente inversão do processo de produção, o que muitos chamam de a Segunda Evolução Industrial. Percebendo isto, várias empresas e players estão se movimentando para morder um pedaço do mercado promissor que se abre.

Existem vários exemplos de coisas e movimentos surgindo neste sentido. Exemplos que gostamos muito são os aplicativos Snapguide e Instructables famoso espaços colaborativos de ”como fazer”. No Brasil temos várias iniciativas muito bacanas, porém não tão populares como merecem, como: Makers Brasil – que ensina a crianças e adultos sobre tecnologia e como utilizá-la, LabMob – que dá aulas de marcenaria para um público variado, Garagem Fab Lab – um laboratório de fabricação digital aberto a todos – e muitos outros sites ou movimentos no estilo. Além, é claro, dos vários vídeos no YouTube que ensinam desde descascar ovo até fazer sua própria maquiagem. Quem nunca buscou como fazer algo de extrema urgência por lá?

Drones, Arduinos e Impressoras 3D estão abrindo espaços tecnológicos para a popularização da tecnologia a favor dos usuários que querem fazer por si mesmos e preferem o exclusivo. Com o tempo, outros segmentos além de Jardinagem, Culinária, Pequenos Consertos domésticos, Carpintaria, Modelismos e Artesanato irão apontar para este lado, já que o estilo de vida também está se transformando.

Às vezes é muito mais interessante se fazer as coisas por si mesmo. Existem benefícios inegáveis quando você realiza pequenos projetos ao invés de buscar um profissional para isso. Por um lado, se economiza um bom dinheiro. E por outro lado, entra a característica mais engrandecedora em se adquirir um “instant skill”: aquele conhecimento será seu e você poderá usá-lo sempre, seja numa emergência ou simplesmente para começar uma vida mais sustentável.

O lance é que no Brasil ainda existe muito espaço para crescimento dessa cultura. Seja a criação de aplicativos que permitam pequenos empreendedores a construir suas próprias peças num desses espaços garagem com impressoas 3d. Seja montando um sistema raspberry que servirá como media center da sua casa a um quinto do custo de um sistema comercial.

Viram como vale pena? Que tal aprender um “instant skill” agora:

Expandindo experiências visuais

Bruna Bites | | filosofando

Um dos nossos objetivos é abrir um espaço para discussão com contribuição de amigos e parceiros que possuem conhecimento na área mobile ou correlatas.

Nosso primeiro a topar foi Guilherme Tosetto: fotógrafo, mestre em arte multimídia, que se interessa pelos usos da fotografia nas várias áreas do conhecimento humano e também por todo tipo de aparato fotográfico. Atualmente vive em Lisboa onde desenvolve doutorado sobre acervos fotográficos de museus e usa o restante do tempo para testar todos aplicativos de captação e edição de imagem que encontra por aí.

Que nossas mediações sociais se dão cada vez mais por meio de telas e aplicativos já não é novidade. Há alguns que criticam a substituição das relações físicas pelas virtuais, mas há muito mais pessoas que estão cada vez mais apegadas aos seu gadgets e apps para compartilhar informações, fotos e vídeos nas milhares de telas e janelas disponíveis por aí.
O que vale a pena pensar daqui para frente é como estas práticas sociais e culturais vão se expandir em um futuro post-screen (pós-tela), perceber as tendências e entrar nesta onda, antes que fiquemos para trás.
Alguns conceitos são essenciais para compreender o que estamos vivendo e o que vem por aí:

– estamos em um momento de convergência de mídias, todo o aparato comunicacional está em nossas mãos, somos chamados para a interatividade o tempo todo e, principalmente, somos desafiados a agir sobre estes conteúdos que circulam em rede ao nosso redor;

– a diferença entre trabalho e lazer se tornou irrelevante, não há mais barreiras. Estamos constantemente administrando telas nos mais diferentes níveis, seja respondendo ou deletando mensagens, enviando fotos ou postando algum link em nossas redes sociais;

– os aplicativos alargam nossas experiências culturais e expandem nossa acessibilidade a conteúdos visuais até então inacessíveis. Podemos testar novas maneiras de fotografar por meio de apps com centenas de filtros que vão além daquilo que vemos com nossos próprios olhos, criando distorções, simulando equipamentos vintage, entre outras possibilidades – e até de filmar, por exemplo, vídeos acelerados ou em slow motion;

Sobre esta expansão da experiência visual e cultural pela acessibilidade de novos conteúdos, o Museu de Arte Moderna de São Paulo serve como um belo exemplo. O MAM criou dois aplicativos: um deles é o MAM Quebra-Cabeça, um jogo em que o usuário pode montar quebra-cabeças a partir de 51 obras selecionadas do acervo, podendo escolher qual obra lhe atrai mais, define o nível de dificuldade e ainda pode compartilhar o desafio com outros usuários. O outro aplicativo é o MAM Coleção, desenvolvido a partir do Google Open Gallery, disponível apenas para Android. Com este aplicativo o usuário pode conhecer parte do acervo, selecionando obras a partir de exposições recentes realizadas no próprio Museu, e ir além. Ao selecionar uma obra, sua imagem pode ser ampliada com a ferramenta do zoom, permitindo alcançar detalhes que não poderiam ser vistos em uma exposição convencional a olho nu, por questões de montagem e até de segurança da obra.

A partir de exemplos como estes podemos pensar outras formas de explorar conceitos, como a convergência, visualidade e acessibilidade permitida pelos aplicativos no campo da cultura. As ferramentas e o contexto estão dados, basta pensar e construir.


Para saber mais do Guilherme, acesse:

Instagram: instagram.com/guitosetto
Linkedin: pt.linkedin.com/pub/guilherme-tosetto/83/b07/56b/
Twitter: twitter.com/guitosetto

Como funciona o bloqueio remoto de dispositivos Android

Bruna Bites | | inovação

Com a última atualização do Android Device Manager é possível bloquear remotamente dispositivos Android na versão 2.2 ou superior.

tela-02

Acessando a página do serviço você verá a localização do dispositivo, mas o recurso “Bloquear” ainda estará apagado. Para ativar você deve enviar uma notificação para o aparelho e autorizar o aplicativo. (A opção de gerenciamento fica no menu Configurações > Segurança > Administradores do Dispositivo).

Você precisa definir uma nova senha para ser inserida uma vez que o dispositivo for recuperado. Ela pode ser diferente do seu PIN para a tela de bloqueio, assim mesmo que a senha esteja comprometida, você pode substituir por um nova.

Após o procedimento, você já poderá ver as opções ativas de Bloquear e Apagar.
Dica: se as opções não estiverem ativas ainda, atualize a página.

tela-03

A solicitação de bloqueio apaga imediatamente a tela do aparelho perdido ou roubado e passa a solicitar a novo senha. No entando, o gadget deve estar conectado ao Wi-Fi ou 3G/4G – mesmo que esteja ativamente sendo usado. Se o ladrão desativou o telefone ou habilitou Modo Avião, o bloqueio terá efeito assim que a conexão de dados é restabelecida. E se for impossível recuperar seu smartphone, há ainda a medida extrema de limpar sua memória completamente.

via: Oficial Android Blog