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.

Post from: Dica1

A Revolução Mobile chegou. Você está preparado?

Antes de continuar você pode querer ler:  Uma análise da caixa de busca do portal ESPN Brasil e Transforme seu Perfil em um Infográfico.

Segundo Yomar Augustos, o nome Unity foi inspirado no ideal de estabelecer a unidade nos países africanos após o apartheid. Em uma entrevista para revista Info Exame da editora Abril, Yomar declara que foi Fantástico saber que sua criação foi vista por quase 30 bilhões de pessoas no mundo interio.

Veja mais detalhes sobre Yomar Augustos no blog Tipos do Brasil.

Post from: Dica1

Unity – A tipografia oficial da Copa do Mundo 2010 é de um brasileiro

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.

Post from: Dica1

Transforme seu Perfil em um Infográfico

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

Post from: Dica1

Mito – Usuários não utilizam a barra de rolagem

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e Grande Botão de Chamada a ação.

1.The Drawar

2.Site Inspire

3.Design Shack – CSS Gallery

4.Siiimple

5. Grid Based Design

Post from: Dica1

5 Melhores Galerias de sites para Inspiração

Post from: Dica1

Promoted Tweets – Plataforma de Publicidade do Twitter

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.

Post from: Dica1

Uma análise da caixa de busca do portal ESPN Brasil

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)

Post from: Dica1

O Circulo Dourado

Dentre vários artigos relacionados a usabilidade também conhecida como UX (User Experience), os que falam dos chamados Call to Action Buttons (Botões de chama a ação) têm uma atenção especial.

Minha intenção neste texto não é falar especificamente sobre os Botões, quem tiver curiosidade ou interesse sobre o assunto segue os links de meia dúzia de artigos bem interessantes.

Como disse e sugere o titulo, minha intenção não é falar sobre os Botões, mas sim falar sobre o botão. Estava a visitar os links que meus seletivos followings twittam, quando deparei com este, que apelidei de (Call to Action Button Big) Grande botão de chamada a ação, não resisti e resolvi escrever este rápido post.

Já tinha visto vários botões grandes, mas este superou todos eles. Tive que reduzir bastante a imagem para caber no post.

Para visualizar no tamanho original basta clicar na imagem ou ir até o site http://www.logolicia.com.br/

Uma coisa curiosa é que o Botão é tão grande que acaba tirando a atenção do usuário que está a utilizar o formulário, que deve ser preenchido antes de clicar no Big Button.

Faça sua analise sobre o Grande botão e deixe seu comentário.

Post from: Dica1

Grande Botão de Chamada a ação

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).

Post from: Dica1

Cuidado para não estar traumatizando seus usuários