Marco Gomes

Criador da boo-box. Empreendedor dedicado, nerd veterano, interneteiro profissional, cristão aprendiz, fotógrafo amador, marido apaixonado.

Textos marcados como ‘interface’

Produtividade: Simplicidade e Foco

Em um mundo onde os prazos são curtos, os objetivos ambiciosos e os recursos limitados, como mover o mundo com apenas um ponto de apoio e uma alavanca?

Ao longo de minha experiência como desenvolvedor e líder de equipes de desenvolvimento web, aprendi que o caminho mais fácil pra produtividade é: retirar tudo que não for essencial e se concentrar no objetivo.

Simplicidade

Um artigo do Zen Habits, comentado pelo Sérgio F. Lima, diz que você deve tirar tudo que “for possível”, quando nada mais puder ser retirado, aí sim você pode começar a organizar.

Atingir a simplicidade é menos fácil do que parece, constantemente me pego discutindo sobre o porque a boo-box não deveria ter “aquele recurso tão legal”. O mesmo com qualquer outro projeto, como o Wallpapr e os novos produtos da empresa.

Ser simples sem deixar pedaços faltando é uma habilidade que venho exercitando, tirar tudo é fácil, manter apenas o necessário não. Se perguntar se a ferramenta precisa de um recurso é complicado, porque você, que é especialista na ferramenta sempre tem mais habilidade pra manuseá-la que qualquer outro usuário, logo, teria facilidade pra absorver o novo recurso. Mas pense no novo usuário, que não quer se preocupar em aprender mais uma ferramenta, ele precisa do recurso novo? Interface boa é que não exige que o usuário pense pra utilizá-la.

A simplicidade é importante na produtividade porque é retirando toda a gordura que você consegue reduzir seu projeto de modo que ele caiba no prazo. Costumo dizer que é possível entregar qualquer produto em qualquer tempo, tudo depende de quantas partes você vai retirar pra cumprir o prazo.

Foco

Um dos maiores problemas que encontro em equipes de desenvolvimento é a falta de foco. Explico: O programador pega um projeto, ao invés de começar pelo início ele vai logo fazendo o final (que normalmente é a parte que ele mais gosta), depois, faz uma parte do meio, seguido do final do início, depois faz umas coisinhas de um outro projeto e volta novamente pro projeto inicial, fazendo o final do meio, logo depois faz o início do final… O prazo acaba e o projeto está embolado, com várias partes soltas completamente inúteis e “só falta integrar o componente de controle de usuários com o gerenciamento de produtos usando um Web Service, coisa simples” mas nunca fica pronto.

Se concentrar no trabalho e esquecer o resto do mundo pode ser muito difícil pra algumas pessoas. Instant Messengers, Twitter, excesso de janelas e programas abertos, alertas em tempo real pulando na sua frente e apitando sempre que chega um e-mail ou um contato fica online, podem ser a bomba atômica da sua produtividade. Desarme-os.

Além disso você pode se pegar distraído por excesso de objetos em sua mesa, excesso de poluição visual em seu campo visual, celular apitando, pessoas conversando, barulhos de TV. É possível eliminar todas essas distrações e, mesmo que você jure que elas não atrapalham existem estudos (e minha experiência própria) comprovando que tudo influencia seu subconsciente, alterando seu estado de tranquilidade e melhorando ou piorando seu poder de concentração.

Ferramentas

Tão importante quanto limpar seu ambiente de trabalho é limpar sua mente, tenha sempre em mãos um lugar em que possa despejar qualquer idéia/tarefa que de repente pipoque em sua cabeça. Se livrar das distrações mentais na hora que elas aparecem é importante pra que você não fique se torturando: “tenho que lembrar de pagar a conta de luz, tenho que lembrar de pagar a conta de luz”.

Um dos meios que consegui pra me livrar de distrações mentais é usar a metodologia GTD do David Allen[bb], cujo princípio é exatamente este: Guarde seus lembretes em um sistema confiável na hora que eles aparecem na sua mente, assim seu cérebro fica livre pra produzir sem distrações novamente. Mas esse é apenas um dos meios, e eu nem sigo tão à risca assim. Se quiser saber mais sobre GTD pesquise na Web e compre o livro[bb].

Quando quis passar a guardar minhas tarefas em um sistema, fui testando várias ferramentas diferentes que pudessem se adaptar à metodologia GTD: blocos de papel, Remember The Milk, Things, e-mail, iGTD.

Os blocos de papel são bons se aliados a outras ferramentas, na rua usa o papel e em casa coloca num sistema digital. Se mantidos apenas em blocos de papel suas tarefas podem se perder no tempo, e pode ficar extremamente difícil achar alguma coisa após algumas semanas. Papel não funciona bem no longo prazo.

Ferramentas cheias de recursos como o Remember The Milk, Things e iGTD confundem sua cabeça, não importa se você usa Photoshop, um Home Broker ou Eclipse pra trabalhar, pra coletar e organizar tarefas a interface não pode ser cheia de botoes, modo de visualização em tabela ou lista, organizadas por prioridade, data, nome, projeto… Isso tudo só atrapalha.

Os programas supracitados funcionam muito bem pra várias pessoas, mas pra mim não deu, muita complicação me fazia querer criar a tarefa já com projeto, prioridade, data, tags, isso matava completamente minha produtividade. O recomendado é simplesmente criar uma pequena sentença que te faça lembrar o que fazer “enviar e-mail pro Navarro perguntando como estão os ganhos com a boo-box” pronto, depois eu coloco ela no projeto certo, insiro tags e prioridade, mas na hora em que lembro da tarefa só preciso guardá-la em outro lugar pra ela parar de me atrapalhar, assim volto a pensar no código JavaScript que estou escrevendo.

O melhor meio que encontrei foi o texto puro, sim, arquivinho de texto, simples, com acesso rápido na barra de ferramentas do sistema operacional. São três arquivos segundo o contexto:

  • boo-box: tarefas e projetos relacionados com o não-trabalho :)
  • marcogomes: projetos e tarefas da vida pessoal, Wallpapr, envio de coisas pelo correio, lista de compras, moradia etc.
  • check: todos os artigos que tenho que ler na Web, sempre que encontro um artigo que merece ser lido eu coloco neste arquivo, assim ele incha sem poluir meus outros contextos com artigos, esta é a maior lista.

Quando preciso anotar algo, abro o arquivo certo e anoto, mais tarde organizo.

A sintaxe dos arquivos:

Wallpapr:
- implementar permalink @done
- corrigir, how many *do* you want
- Linkar as imagens pra main photopage

Publicar diff do Zuardi:
- implementar diff http://moourl.com/b4ek8
- anunciar no blog @blog

Projetos são seguidos de dois pontos, tarefas precedidas por hífen, identação significa subprojetos, tags são inseridas no final começando com arrouba. Pronto, simples assim, nada mais.

Pra editar e gerenciar o arquivo estou usando o TaskPaper, que comprei no pacote MacHeist, facilita a edição e manipulação das tarefas sem complicar a interface. Porém, existe versão dele na Web e você, mesmo que não use Mac, pode usar qualquer bom editor de texto.

Nunca se prenda em rédeas, mais importante que ferramentas e metodologias é você se libertar das distrações e conseguir achar seu caminho para a iluminação produtiva =D

Interfaces Modais e Quasimodais

Projeto de Interfaces

Pretendo, a partir de agora, escrever um pouco sobre a construção de interfaces, na minha eterna luta por tornar o mundo um pouco melhor e os computadores mais fáceis de usar… Pra quem não sabe, o boo-box surgiu da pergunta: E se eu pudesse clicar na foto e comprar o All Star que a Gisele Bündchen está usando?

A construção de interfaces é normalmente tomada como frescura por profissionais de outras áreas do desenvolvimento de aplicativos e websites, é comum vermos sistemas extremamente complexos, com mais tabelas no banco de dados que a quantidade de ex-namoradas do programador, processo de produção minuciosamente acompanhado por um profissional de gestão de projetos, seguindo regras ITIL e ISO, mas com interface sofrível e absurdamente não utilizável.

Jef Raskin foi um visionário, fundou o projeto Macintosh e mudou o mundo com suas idéias sobre Interfaces Humanas[bb] (saiba mais na Wikipédia). Um de seus principais pilares era “tarefas simples devem permanecer simples”. Por que ajustar a hora em relógios digitais é tão complexo enquanto em relógios analógicos (de ponteiros), que são mais antigos, é tão fácil? Por que achar aquele doc sobre “A Teoria Cognitiva de Piaget” no seu Windows Explorer é tão mais difícil que achar um documento na sua pasta da faculdade? Tarefas simples devem permanecer simples.

Interfaces Modais facilitam o erro

Interfaces Modais têm seu comportamento alterado de acordo com um comando do usuário. Um bom exemplo é a tecla Caps Lock, você ativa ela sem querer, ou se esquece que ativou, E DE REPENTE SEU TEXTO COMEÇA A GRITAR COM O LEITOR. Teria evitado várias brigas no MSN caso isso pudesse ser deligado. O maior problema é que os usuários esquecem que mudaram o modo da interface e ela passa a se comportar de maneira inesperada. Tenho um amigo progamador que arranca a tecla “Power” de todos os teclados que usa, pra não desligar o computador por engano.

Interfaces Quasimodais dificultam o erro

A solução proposta por Raskin para Interface Modal era a Quasimodal, quasi em grego significa (adivinhe?) quase. Ou seja, interfaces “perto de serem modais”.

Uma interface quasimodal exige que o usuário ativamente mantenha o modo ativado, um bom exemplo é a tecla Shift, eu duvido que alguém tenha “gritado” com seus leitores por “esquecer que estava com o dedo no Shift”. Outro exemplo são os microfones de aviões, aeroportos ou lojas de departamento, caso a ativação seja simplesmente pressionando um botão, podem ocorrer situações em que o microfone fica transmitindo conversas inapropriadas. Se a ativação for pressionando constantemente um botão, esses erros desaparecem, ninguém vai xingar o chefe enquanto estiver pressionando o botão de “transmitindo”.

Outro exemplo de erro em interfaces modais são as janelas de monólogo, famosos alertas usados em websites e programas de desktop, uma janela com uma frase qualquer e somente uma opção: o botão Ok. Quantas vezes eu digitei caracteres insanamente, nervoso por meu “teclado ter parado de funcionar ou o computador estar travado” quando, na verdade, havia um alerta escondido embaixo de alguma janela ou perdido no segundo monitor (quando estou usando dois).

JavaScript Alert
Alerta “monólogo”.

A solução, segundo Raskin, são mensagens semitransparentes, que desaparecem após alguma ação do usuário, como movimentar o mouse ou apertar qualquer tecla. Somado a isso podemos ter um log das mensagens, caso o usuário perca a mensagem pode olhar no log e verificar quais foram os avisos que recebeu. Essa solução resolve o problema do falso travamento e melhora a usabilidade, pois você não precisa clicar no inútil “Ok”.

Aviso semitransparente da boo-box
Aviso semitransparente após o envio de e-mail no boo-box

capa de The Human Interface

Você pode conferir as idéias de Jef Raskin no livro “The Humane Interface”[bb], de 2000, onde ele destrincha, com certo humor, os erros das interfaces computacionais que estamos acostumados a usar e propõe boas soluções, mostrando que nem sempre “manter a solução que já vem sendo utilizada” é a solução mais inteligente para um problema.

Além do livro confira também o blog da Humanized, a empresa de Aza Raskin, o filho do gênio, onde ele dá continuidade ao trabalho do pai, que morreu em 2005.

Um bom exemplo de interface que leva em consideração as idéias de Jef e Aza Raskin é o Songza.com (via Cairo Gomes). Projetado pelo próprio Aza, é um sistema que busca músicas pra serem ouvidas facilmente, pegando videos do YouTube e tocando apenas o áudio, preste atenção na facilidade e fluidez de uso da aplicação.

Wallpapr – Nova versão

Está no ar a nova versão do Wallpapr, o meu serviço que busca de papéis de parede legais no Flickr.

Wallpapr

Resolvi refazer o serviço porque saiu uma nova versão do jQuery, a melhor biblioteca JavaScript que há, eu precisava testá-la. Queria também matar minha sede por simplificar interfaces, arrancando tudo quanto é elemento supérfluo.

Depois de algumas horas de briga com os Internet Exploders, saiu o que você pode conferir em http://marcogomes.com/wallpapr/en/

Principais novidades:

  • Interface novinha em folha, bem mais simples e com menos elementos.
  • Animações JavaScript pra todo lado.
  • Feito com jQuery e não mais prototype.js e script.aculo.us.
  • Maior velocidade no resultado das buscas, já que não há mais o proxy rodando no servidor, graças ao… (próximo item)
  • uso da técnica JSONP, que acessa a API do Flickr diretamente pelo JavaScript, sem necessidade de programação server-side.
  • Não funciona no Opera Browser
  • Não tem Google AdSense

É importante salientar que, graças ao novo jeito de carregar JSON do jQuery, o Wallpapr não tem nem uma linha de código rodando no servidor, acesso a API do Flickr é feito diretamente pelo JavaScript rodando no cliente, graças à isso posso continuar mantendo minha saudável aversão à programação server-side \o/

12º EWD Brasília

12o EWD - logo

Quinta-feira o Bruno Psysapiens me aborda no chat por texto do Skype:
_ Vai transmitir o EWD pelo Skype?
_ Se tiver wi-fi disponível… – eu respondi.
_ Evento de web sem wi-fi?
_ É mesmo, tem que ter internet disponível.

Dois dias depois…

Começo perguntando, como um evento de internet pode não ter wi-fi disponível? E o live blogging? e as conferências Skype? Será que eles não se interessam pela divulgação que a blogosfera pode proporcionar?

Hebert Mascarenhas, Baião de Dois:

Título: Sou fã da Gringo e do Grupo Fermento

Demonstração de vários cases de ações online feitas para Brasília. Sites, hotsites, advergames, uso extensivo de Flash. Destaque para uma _vitrine interativa_ feita para a Brasil Telecom, com touch-screen termo-estático e uma aplicação Flash para escolha e comparação de celulares, muito interessante.

Mantras como “tenha sempre em mente o objetivo do projeto”, ou “sempre que possível, use o entreteninmento”, “busque novas soluções”.

Citação ao Rapha: Em uma ação que envolta um game, concentre-se na ação e não no game.

Michel Lent, 10 Minutos Interactive (audio):

Título: WEB 2.0 e as novas fronteiras do mercado e da profissão.

Viemos de um mundo analógico, a 20 anos atrás o mundo era quase que totalmente analógico, com cada aparelho com uma função específica e definida, telefone, rádio, TV, toca-discos.

O CD foi o primeiro meio de informação digital popular. Hoje, 40 anos após a criação dos primeiros dispositivos digitais, a informação está completando um processo de digitalização.

Convergência de dispositivos gera convergência de mídia. Todos os aperelhos podem fazer tudo, a informação está em todo lugar. Não temos mais um mundo de dispositivos, mas um mundo de telas. A informação muda de acordo com a “tela”.

No futuro vamos esquecer a Web, ela é a ferramenta, você precisa se interessar no “porque” do projeto. Num futuro muito próximo as pessoas vão usar a mais internet através de telas pequenas (celular) do que através de telas médias (desktops).

A Web 2.0

O avanço da tecnologia democratizou o poder de publicação e oferta de serviços online. Qualquer pessoa com acesso à Internet tem ferramentas e oferta de serviços para se tornar publicador.

Resumo da Internet

  1. Redes sociais e comunicacao
  2. Producao e consumo de conteúdo
  3. Ferramentas online
  4. Negócios e serviços

A era do ‘eu mídia’:

Na era do eu mídia, os usuários querem se ver acima de tudo. Com a convergência de dispositivos a fronteira entre a Web e outras mídias desaparece.

Especialização e colaboração

Mas o usuário não ‘engole’ coisas mal-feitas por empresas, elas aceitam coisas ‘toscas’ se tiverem sido feitas por outros usuários. Publicidade não pode ser mal-feita se for produzida por agências.

Procure colaborar com gente especializada para um trabalho realmente bem feito.

5 Conselhos

  1. Para os estudantes: conceito e teoria antes, técnica e ferramenta depois.
  2. Para os profissionais: há vida além da agência, o “cliente” também precisa de experts.
  3. Para os clientes: trate seu fornecedor com carinho, ele é seu maior aliado para o sucesso.
  4. Para os jovens empresários: *erro com o dinheiro dos outros*, considere um emprego antes de abrir sua agência.
  5. Para todos nós: Estamos só começando, tem muito mais pro vir.

Maurício Moreiria, TV1

Titulo: Usabilidade: visão e processo para implementar projetos com foco no usuário

A usabilidade começou com Jakob Nielsen, e colocou fundamentos muito sólidos, apesar de ter proposto coisas questionáveis ele tem sua importância na garantida.

O que temos de novo na usabilidade é o ambiente. A convergência de mídias, a usabilidade de dispositivos como celular e Microsoft Surface.

Vídeo do Rafinha, sobre o “usuário” da Internet. Imergido num mundo de tecnologia onde produzir conteúdo é muito fácil.

Definindo usabilidade:
“A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação e realização de tarefas de maneira eficaz, eficiente e agradável.”

Profissionais que trabalham com desenhos de interface precisam ter o _foco na necessidade do usuário_ (jargão detectado).

Explicação extensa do papel do arquiteto de informação e do designer.

Cases de usabilidade (boa ou ruim):

  1. Globo.com e seu menu lateral com padrões de cores para diferenciar links para págias internas, menus expansíveis, sub-sites, assuntos.
  2. Globo.com e conversa entre arquiteto e montador HTML para inserção de textos descritivos (title) para links.
  3. Americanas.com e a página 404 customizada e mais amigável.
  4. Flickr e a paginação de thumbnails que deslizam, sumindo conforme você pede mais.
  5. Flickr mecanismo de paginação.
  6. Usabilidoido, mau-uso de ícones na árvore.
  7. Submarino, a busca não pode ser organizada por preço.

Ele disse também: O usuário não lê exaustivamente, ele imprime pra ler depois [heeeeein !?!?!?].

André Matarazzo, Gringo.nu (audio)

Título: O valor da originalidade na Criação Web.

Não tem educação formal em Web. Morou no Canada e Holanda, ficou 4 anos trabalhando com sites institucionais. Ao perceber sua insatisfação com esse tipo de design pra Web, resolveu se enveredar na propaganda e entretenimento na Web.

Propaganda antiga:

Conteúdo interessante
Propaganda chata
Conteúdo interessante
Propaganda chata
Conteúdo interessante
Propaganda chata

Televisão, rádio, revista, etc.

Advertainment

A propaganda vestida de entretenimento. O contato do cliente com a marca é suave e indireto. Se há interesse, existem outros lugares para encontrar mais informações.

Sony Bravia

Milhões de bolinhas coloridas de silicone ladeira abaixo. Pra mostrar que a TV tem cores mais vivas, “like no other”. Poético.

Conteúdo não é texto + foto (já ouvi o Rapha falar isso). Conteúdo é o que as pessoas levam do contato com sua marca. Em marketing tudo é percepção.

Escolha um caminho e ataque com força, como na TV, com a idéia de “cor” eles transmitiram uma mensagem poética.

Processo Gringo

  1. Ideia – noção de budget e timeline
  2. Estrutura/Features – budget timeline
  3. Visual
  4. Produção – Flash, 3D, video, HTML, backend, sons, tagging, etc.
  5. QA (controle de qualidade)
  6. Entrega

Blogando ao vivo do Digital Age 2.0

Digital Age 2.0 logo

Estou no Digital Age 2.0 ao lado do Manoel Netto Tecnocracia e Alexandre Fugita Techbits.

Até agora três palestras em inglês muito interessantes, reforçando a idéia de que quem trabalha com Internet precisa saber inglês.

Os primeiros palestrantes

Digital Age 2.0 - Martin Lindstrom

Martin Lindstrom

Falou sobre marketing feito pelo consumidor, com branding (construção de marca) feita também pelo usuário. A idéia é: Deixe seus consumidores falarem sobre seu produto e sua marca. Excelente palestra, encontrei-o nos bastidores depois e apresentei o boo-box e nossa sincronia de idéias =)

John Battelle

Autor do livro A Busca (The Search) usou seu livro como roteiro, mas sem jabá descarado. Gostei especialmente da quando ele falou sobre as mudanças na interação humano-computador. No início era a linha de comando, depois o jogo de procurar e achar com o mouse, agora voltamos à linha de comando, mas com linguagem humana. A moderna interface com computadores é feita através da busca.

Josh Bernoff

VP da Forrester e analista de tecnologia e convergência, falou sobre Retorno no Investimento (ROI) de ações de marketing na Internet, sobre a ineficiência de propagandas na TV, e eficiência de ações online. Mostrou vários exemplos de ações online que tiveram muito maior retorno do que as milhonárias ações offline. Exemplos já conhecidos de Will It Blend, e da Adidas foram rapidamente mostrados.

O poder dos blogs

Um tema que foi repetido nas três palestras é o poder do consumidor, a idéia de deixar seu consumidor falar sobre sua marca é uma tendência.

O poder dos blogs foi reconhecido e isso me deixa especialmente feliz, eu, o Manoel Netto e o Fugita já sabemos (e bem) disso, você também sabe, mas aqui está lotado de empresários que, em sua maioria, não sabem ouvir seus consumidores, foi mais um passo pra explicar isso pras grandes corporações.

Agradeço ao Guilherme Felitti do IDG Now que conseguiu (na brodagem) minha entrada no evento =)