dica1

Falar de desenvolvimento web para mobile é de extrema importância nos dias atuais. Sabemos que os celulares, androids, smartphones e blackberrys estão invadindo o mercado fazendo com que os profissionais da área de desenvolvimento sejam desafiados a criar soluções que atendam esse nicho de mercado.

Veremos aqui 4 dicas interessantes para começar a pensar em desenvolver para Mobile.

[Offtopic: Antes de continuar você pode querer ler:  Unity – A tipografia oficial da Copa do Mundo 2010 é de um brasileiro e Mito – Usuários não utilizam a barra de rolagem.]

foto by umpcportal.com

1 – Siga os padrões web!

Antigamente não existia um padrão de codificação para desenvolvimento web, depois da criação do W3C (World Wide Web Consortium) consórcio de gestão da web,  pôde-se após a proposta do XHTML determinar uma padronização de códigos para o desenvolvimento web.

Hoje já existe o HTML5 que veio com toda a certeza revolucionar, e com essa revolução propor padrões de desenvolvimento para a internet mobile que possam atingir o maior número de dispositivos possíveis.

2 – Procure fazer os layouts com tamanhos menores!

É preciso desenvolver seus layouts para mobile em tamanhos que possam se adequar a tela desses dispositivos móveis, focando sempre no conteúdo e a forma como esse conteúdo será exibido para o usuário.

3 – Faça testes, se possível no iPhone.

O desenvolvimento web mobile para a plataforma do iPhone realmente é um novo caminho que vai com toda certeza nortear esse novo desafio para os desenvolvedores. A Apple é uma empresa que disponibiliza informações de como os designers poderão criar ícones e imagens para seus produtos.

O suporte dado por eles é um diferencial e com o iPhone não poderia ser diferente. O iPhone é uma proposta de dispositivo mobile que pode ser tomada como exemplo para criação de sites. Porém existem outros aparelhos que também poderemos usar nestes testes.

4 – Seja Objetivo

O público que faz uso da web mobile são no geral pessoas que não tem muito tempo disponível, por isso é importante que o foco do desenvolvimento mobile seja o conteúdo que deve estar bem organizado e estruturado para uma leitura rápida e dinâmica.

Existem uma infinidade de emuladores de browsers mobiles para fazermos testes e assim podermos estar antenados com o que tem de novo na web em relação ao desenvolvimento Mobile.

Podemos destacar os browsers Webki, Opera Mobile, Opera Mini, outros browsers como do Blackberry, S60.

Existem diversas maneiras de colher dados para conhecer o perfil do internauta.

Antes de continuar você pode querer ler Mito – Usuários não utilizam a barra de rolagem e 5 Melhores Galerias de sites para Inspiração.

O site Íonz encontrou uma forma bem criativa de abastecer seu banco de dados com o perfil dos navegantes. Fizeram um sistema onde você responde à algumas perguntas, baseado nas respostas o sistema gera um infográfico traçando seu perfil, destacando suas preferências e mostrando a dos demais internautas.

Depois do infográfico gerado você tem a opção de personalizar e salvar como Papel de Parede do seu computador. Experimente, bem legal.

Há uma longa e antiga discussão entre os Web Designers se o usuário utiliza ou não a barra de rolagem ao navegar no site, impulssionado por esta duvida, muitos projetistas preferem apertar “acima da dobra”* todo conteúdo considerado de maior importância.

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e Cuidado para não estar traumatizando seus usuários.

*Acima da dobra é um termo referente ao conteúdo localizado na metade superior da primeira página de um jornal.  É comumente utilizado na web para descrever a área que você vê em um site antes de ter que rolar a página.

Neste excelente artigo The myth of the page fold: evidence from user testing mostra que foram feitas mais de 800 seções de testes no período de 6 anos constatando que as pessoas não tem problema em utilizar a rolagem do site.

Assim como no jornal onde o objetivo é que ele seja todo lido e não apenas o conteúdo acima da dobra, o site deve ser planejado para que o usuário seja atraído a navegar por toda a página.

Sendo assim uma das coisas que pode definir se o usuário vai rolar ou não a página é o posicionamento do conteúdo. No texto citado acima o autor mostra que menos conteúdo acima da dobra incentiva o usuário rolar a página em busca de mais  conteúdo.

Outra prática também citada no texto é posicionar o conteúdo abaixo da dobra de forma que parte dele apareça na área visível da página.

Um ótimo exemplo é o site da 37 Signals, o conteúdo está bem distribuído em uma longa página e a cada etapa da rolagem o usuário têm próximo de se a possibilidade de acessar as páginas dos produtos caso seja convencido.

Outro detalhe muito interessante é que no rodapé foram posicionadas as mesmas opções que estão no topo do site, poupando o usuário em ter que rolar até o início da página para acessar os produtos.

Alguns posts sobre o assunto que vale a pena conferir:
Myth #3: People don’t scroll
Scrolling and Attention
Life Below 600px
Screen Resolution and Page Layout

Como disse em um post anterior, a algum tempo venho estudando assuntos relacionados a Usabilidade.
Baseado em um frase que sempre digo (“A melhor forma de otimizar o conhecimento é praticando.”) resolvi por em prática estes estudos.

Passeia a analisar alguns sites em busca de possíveis erros ou acertos.
Como apontar o erro dos outros é fácil, a vitima da vez é o portal da ESPN Brasil.

Conversando pelo Gtalk com meu caro colega @jroqueweb grande conhecedor de PHP, Java Script e afins, um ótimo profissional (aproveitando para fazer um merchan dele, “risos”), ele mim indicou um blog que até então não havia conhecido: Porra Usabilidade. Um dos primeiros post deste blog comenta sobre a caixa de busca do ESPN.

Tenha em mente ao decorrer deste texto a primeira lei de Steve Krug: “Não me Faça Pensar”.

Descontente com a informação do blog e com minha dificuldade, mostrei o site para algumas pessoas, entre homens e mulheres (9 exatamente) dei um termo e pedi que elas pesquisassem no portal em questão.

O resultado foi exatamente o que esperava:

3 dos voluntários desistiram depois de passar alguns instantes subindo e descendo a página em busca de onde começar a pesquisar.
1 indicou a região onde procuraria o campo de pesquisa, mas não identificou a existência dele.
1 encontrou, seguindo a lógica de que aquele campo era o único que ela poderia digitar algo.
4 encontraram, mas demoraram muito, muito além do normal.

Agora tenho a certeza de que há algo errado.

Vou apontar quatro coisas que claramente contribuem para o fracasso desta caixa de pesquisa.

1 - O campo para digitar o termo está sem bordas.
2 - A barra “/” antes da palavra é incomum em campos de pesquisa.
3 - O campo de pesquisa está posicionado em um local que comumente é utilizado para colocar banners.
4 - Não há nenhuma sinalização clara que ali é um campo de pesquisa, como um icone de uma “lupa” ou as palavras “pesquisar”, “buscar”.

Depois de apontar os erros vamos às possíveis soluções.

Primeiro adicionei uma borda. Utilizei dois tons de cores para testar:

Troquei a palavra “agora” por  ”buscar” e “pesquisar”:

Agora no contexto para visualizar melhor as alterações:

Como diz no post Search: Visible and Simple o campo de pesquisa deve ser visível e simples.

Comentem mim chamando de maluco e cego, ou dizendo que não estou equivocado.

Inspirado nos posts do @empreendemia comecei a assistir alguns vídeos das palestras fantásticas do TED (evento fantástico com as melhores palestras sobre marketing, psicologia, sociedade e tecnologia do mundo), o credito total desta frase entre parênteses é do Millor Machado (rsrsrsrs).

Continuando,
entre os vários vídeos que assisti, gostaria de compartilhar com vocês a palestra do Simon Sinek.

Na palestra: How great leaders inspire action (Como grandes líderes inspiram a ação) Simon fala sobre o modelo de liderança que desenvolveu (o Golden Circle) dando exemplos de como empresas como a Apple usufruem deste modelo para serem tão inovadoras.

Obs.: Todas as citações entre aspas (” “) são trechos da palestra do Simon Sinek.

O que é o Golden Circle (o Circulo dourado)?

Simon percebeu que todos os lideres inspiradores e organizações do mundo, pensam, agem e se comunicam da mesma forma. Percebendo isto, desenvolveu o que chama de o circulo dourado.

O circulo dourado funciona em três simples níveis: Why, How e What (O que você faz, como você faz e por que você faz).

What - Ele diz que cada pessoa, cada organização no planeta sabe o que faz (100%).

How – Algumas sabem como fazem, como funciona o processo.

Why - Mas poucas pessoas ou organizações sabem porque fazem o que fazem, o que os motivam. Qual a sua causa? Qual o seu propósito? Porque sua empresa existi? Porque você sai da cama pela manhã?

A maioria das pessoas e empresas se comunicam de fora para dentro:

Exemplo – Se a Apple fosse como todas as outras, uma mensagem de marketing seria algo parecido com:

“Nós fazemos ótimos Computadores
Eles são lindamente projetados, fáceis de usar, possui interface amigável.”
Quer comprar um? Não.

Como disse Simon: “É assim que a maioria de nós se comunica, é assim que o marketing é feito, é assim que as vendas são feitas”.

“Nós dizemos o que fazemos, como somos diferentes ou como somos melhores e nós esperamos algum tipo de atitude, uma compra, um voto, alguma coisa do tipo.”

Puxando para minha área, sempre vejo empresas dizendo, nós fazemos os melhores sites, os mais bonitos, nós utilizamos as melhores tecnologias, nós somos os melhores. “Mas nada disso é inspirador”.

É assim que a Apple atualmente se comunica:

“Tudo o que fazemos,
nós acreditamos em desafiar o status quo.
Nós acreditamos em pensar de forma diferente.
A forma que desafiamos o status quo.
É fazer nossos produtos bem projetados, fáceis de usar e interface amigável.
Acabamos fazendo excelentes computadores.
Quer comprar um?”

O que aconteceu neste exemplo foi a simples inversão do processo.

“Isso prova que as pessoas não compram o que você faz; Elas compram o porquê você faz.”

Isso explica por que todo mundo se sente confortável em comprar um produto da Apple.

“O objetivo não é fazer negócios com todo mundo que precisa do que você tem. O objetivo é fazer negócios com pessoas que acreditam no que você acredita.“

“O objetivo não é apenas contratar pessoas que precisão de um emprego; é contratar pessoas que acreditam no que você acredita.”

Logo em seguida ele diz: “Se você contratar pessoas apenas porque elas podem fazer um trabalho, elas vão trabalhar pelo seu dinheiro, mas se você contratar pessoas que acreditam no que você acredita, elas vão trabalhar para você com o sangue suor e lagrimas.”

No vídeo ele fala muito mais além disso, mas vou parar por aqui para o post não ficar tão grande, para conferir todas estas citações e várias outras, vale o investimento de  18 minutos para assistir a palestra. (Link direto para o vídeo).

Para assistir o vídeo legendado em português basta clicar em Subtitles e escolher Português(Brazil)

Semana passada ocorreu um fato cômico na Perfil Virtual Agência Web da qual faço parte.

Vamos a narrativa do fato:

Ao comprar um refrigerante de uma marca famosa cujo o liquido é preto e saboroso (rsrsrs) ocorreu algo inédito.

Passamos quase 30 minutos tentando abrir o bendito refrigerante. Depois de passar por 3 pessoas, tentamos cortar o lacre com uma faca de serra, tentativa frustada, quando estávamos pensando em desistir, sério, iriamos desistir, até que Alexandre em um golpe sublime perfurou a tampa do tal refrigerante e encheu nossos copos espremendo a garrafa, ufa!

Foram minutos de muita tensão e agonia, pena que não tirei uma foto da garrafa.

Você deve estar se perguntando o que é que o fato desses malucos não terem conseguido abrir a garra do refrigerante da tal marca famosa tem haver com o título deste texto?

A resposta é simples:

Cuidado para não estar causando este mesmo trauma nos seus usuários, cuidado para não estar dificultando a vida destes inocentes que querem apenas encontrar com facilidade e rapidez as informações que desejam.

by kayla

A escolha do refrigerante, algo que era quase que automático, agora já tornou-se algo a se pensar, todas as vezes que vamos comprar refrigerante vem em nossas mentes o sufoco passado e por medo que a mesma dificuldade ocorra novamente optamos por uma outra marca.

O mesmo acontece em muitos sites que navegamos. Sites que dificultam nossa navegação e acesso ás informações nos causando uma má impressão o que nos faz deixar de utiliza-lo e ir em busca de um porto seguro, pois nosso tempo é valioso e não queremos passar minutos procurando algo que deveria estar em nosso alcance em poucos cliques.

Um layout mal elaborado pode espantar o usuário que consequentemente pode acabar encontrando um site do concorrente que sassei a sua sede sem dificuldades.

Então fica a Dica: Cuidado para não estar traumatizando seus usuários

No meu próximo post vou estar mostrando algumas coisas que facilitam a vida dos navegantes.

Por enquanto deixe seu comentário expressando alguma frustração que já passou ao navegar em algum site ou até mesmo tentando abrir uma garrafa de refrigerante (rsrsrsrs).