Web Bem Feita

A idéia

Desde que surgiu a idéia de um domínio próprio, me veio na cabeça a pergunta “Sobre o que eu vou escrever lá..?”. A “mensagem” em si é a mesma, temas que fazem a web mais bem feita, como usabilidade, acessibilidade, utilidade, web standards, css, interação, e é claro, teorias, muitas teorias.

O que há de novo então?

Quem se lembra na primeira pesquisa com leitores, das opções “Testes de Usabilidade e Acessibilidade” como temas que os leitores preferiam.Foram de fato os mais votados, então nesse blog teremos análises (não testes de usabilidade, apenas análises) de tudo sobre tudo dos sites que quiserem (se você quiser uma análise do seu site, mande um email para rochester_jorge [a] Yahoo . com . br ; por enquanto será esse o endereço, em breve será do próprio domínio), então para evitar que alguém tente me pegar na saída da escola, somente os sites que quiserem serão analisados e destrinchados (bonita palavra :D) de layout a código, de acessibilidade a usabilidade, passando pela utilidade, claro.

E a parte de CSS e Standards, que tenho estudado bastante e acho que já posso passar algumas coisas interessantes pra frente.

O nome

Acredite já me passaram vários nomes na cabeça. Uns muito ruins (não cheguei ao extremo de “blogdorochester.com” mas chegou bem perto). Outros muito ruins MESMO. Entre os que eu (e o meu consultor de assuntos aleatórios, o Fabiano) mais gostei foram:

  • Não Use Isso – Pelos conceitos em que será baseado, além da usabilidade, como o “humanizado” apesar da tradução ser “usá-lo”, ou seja, estudos de usabilidade SEM se basear SÓ na usabilidade, só no uso.
  • Use Isso – Mesma referência anterior, mas meu lado negro preferia o primeiro.
  • Humanizado – Novamente pela base que terá.
  • Rochester.Blog.Br – Não disse que tinha chegado perto?
  • WebBemFeita – Conceito criado desde o blog anterior, que foi sendo amadurecido, e enfim, virou o nome oficial.

O Tema

Penso em criar mais pra frente um tema novo e exclusivo, pra evitar os milhares de problemas que já tive com temas. Mas esse, por enquanto, acho que está ótimo.

Apesar das alterações restantes (alguns recursos que pretendo implementar, e arrumar a sidebar que está horrível :P), o blog novo está com este post (quase igual a esse) e em breve voltarei a escrever o de sempre, e que vier de novo.

Então, por favor, atualizem os links, assinem o novo feed (by feedburner :D) e visitem o novo blog. Os posts antigos ficarão aqui mesmo, sem link novo pro outro blog. “O que passou passou…”

Depois de 69 artigos, 240 comentários, 1444 spams e uma média de visitas razoável no fim (parece que fechar o blog da mais visitas que manter, no fim a media subiu um pouco, em cerca de 250 visitantes / dia) morre mais um blog. Mas não choraremos por isso.

Agora é oficial, Blog antigo abandonado, blog novo na área.

Rochester Oliveira. Por uma Web Bem Feita

Uma palavra que anda sendo muito utilizada por aí é a tal folcsonomia, ou folksonomia, ou folksonomy, que é uma forma de classificar e organizar informações, que é usada principalmente em projetos web 2.0.

Esse método permite ao próprio usuário classificar as informações de uma forma que ELE julgue correta. Então o próprio usuário cria as “tags” que achar conveniente para uma foto, um link, um post, um podcast, ou qualquer outra informação que venha a ser classificada.

Qual é a vantagem de organizar tudo (ou uma parte da informação) dessa forma? O usuário participa na classificação na “construção” do conteúdo, na “construção” do próprio site, e de uma forma que seja mais fácil para ele recuperar essa informação (mas será que é também para os outros usuários?).

Um exemplo bom de comunidades geradas através da folcsonomia é a do WordPress (quem tem um blog aqui vai me entender) onde há a opção de navegação por tags em que você vê os posts que tiverem a mesma categoria, ou seja,você vai lendo sobre os assuntos que você mesmo escreve. Eu mesmo já achei muitos blogs bons por essa ferramenta, e quem usa WordPress e ainda não checou isso, recomendo que veja ;D.

Há muitos outros exemplos (muito) bem sucedidos que utilizam a folcsonomia ao organizar as informações que os usuários adicionam, Flickr, Delicious, technorati

Se parece ser tão bom, então qual é o problema de utilizar somente a Folcsonomia e deixar os usuários classificarem tudo? Alguém lembra do post onde eu falei que ia pra intercon na faixa? Lembram da pergunta que o Fred fez? Era sobre o problema que existe entre as esferas pública e privada na escolha de etiquetas para uma classificação folcsonômica. Ou seja, o problema que há quando se deixa o usuário classificar, pois a interpretação pessoal dele pode ser diferente da que outras pessoas pensam, que pode ser gerado por vários motivos, como vocabulário diferente em algumas regiões, sinônimos, erros simples de digitação…

A solução para isso (ao menos é o que eu e o gawry acreditamos :D) é a tal da “Folksonomia Controlada”, onde há sugestões de tags ou mesmo um dicionário de sinônimos, ou corretor ortográfico, que sugere alguma alteração para uma palavra que seja mais utilizada.

O “tchan” desse método de classificação é que vai além de separar o conteúdo em “categorias”, é a criação de comunidades (como no Flickr e WordPress), compartilhar o conteúdo, referenciar, dividir a informação… Segundo Clay Shirky é tudo aquilo que vai de encontro com os princípios básicos da Web.

That’s All 😀

Web-Bem-Feita

novembro 5, 2006

Alguns de vocês devem ter olhado o subtítulo do meu blog, ou mesmo visto comentários a respeito (com essa nomenclatura são poucos ainda) e devem ter se perguntado: “Afinal, o que é Web-Bem-Feita?”. Bem, essa é uma pergunta que nem a wikipédia sabe responder… Mas vou tentar 😀

É a aplicação de vários fatores que, como o nome diz, são sobre a criação bem feita de um site. Mas na grande maioria são conceitos, que se aplicados melhoram tanto a experiência do usuário, quanto o trabalho do Web Designer ( que fica mais fácil de atualizar, mais leve, tem mais retorno…) – e com certeza também é melhor para o cliente.

Entre as “filosofias” (pesquisas, estudos…) que são englobadas, as que eu dou mais destaque são:

  • KISS – Menos sempre é mais.
  • Usabilidade – Tornar fácil a utilização do produto.
  • Acessibilidade – Tornar fácil de acessar, não importando as condições de conexão ou plataforma do usuário.
  • Design de Interação – É o estudo de como a interface vai atingir o usuário, considerando sua experiência, entre vários outros fatores.
  • AI – Arquitetura e Organização dos elementos na página, de forma que o usuário identifique o que cada elemento deve ser, por exemplo, algo que seja um título, fica maior, com negrito, centralizado, e links de um menu ficam agrupados e com uma cor diferente.
  • SEO – A otimização dos sites para sistemas de busca (em buscas orgânicas).
  • Semiótica – Estudo através dos signos que tem como objetivo analisar como o objeto será entendido pelo usuário, o que o faz, por exemplo, clicar em um link invés de outro “semelhante”.
  • Tableless – Tabelas são para dados tabulares, não para marcação de layout.
  • Web Standards – Bem mais que uma “filosofia”, são os padrões de codificação.
  • Código semanticamente correto – Pois nem sempre a validação é tão importante.
  • Utilidade do site – Para mim é o que deve vir primeiro no planejamento.

Mas há algumas coisas que se deve tomar cuidado, como por exemplo, o uso do AJAX (apesar de programadores estarem melhorando cada vez mais, Yahoo mail nem se fala 😛 ) que se “mal utilizados” podem fazer o usuário simplesmente desistir do site, ou pior, não conseguir entrar nele. Utilizar o recurso certo no local certo,. Se um menu precisa só de css para funcionar, pra que utilizar AJAX, flash, 3D e mais um monte de coisa que só vai te dar dor de cabeça, e só vai atrapalhar o usuário?

A idéia do “bem-feito” é simples, e há quem faça assim sem dar nomes mesmo. “Mas você só usou um nome novo para definir coisas que já estamos acostumados…”, e a nomenclatura “Web 2.0” foi o quê? Quando viram que o mercado estava mudando, deram um jeito de fazer o resto dos profissionais mudarem também, então quem não mudava (ou não mudou ainda) é 1.0 , quem já fez o “upgrade” passa a ter o status de 2.0 (apesar da hipótese não desmentida de ser um golpe de marketing apenas). E muita gente ficou com medo de ter a classificação de 1.0, e passou a correr desesperadamente procurando a tal web 2.0 , para acompanhá-la, por isso muitos acreditam apenas na chance de ser uma jogada de marketing – “vamos falar que isso é melhor, que é evoluído, talvez cole”. Mas a grande diferença é que no conceito “bem-feito” são unidos aspectos “user-side” com algumas melhorias da tal Web 2.0 e outros aspectos que parecem esquecidos por muitos, como Usabilidade, Acessibilidade, SEO, Semiótica (que é muito desvalorizada na Web) e o conteúdo.

Há também várias outras “filosofias” propondo melhorias às atuais, como o divless (passando a usar listas invés de divs), e usar “humano” invés de “usável” (que transformaria usabilidade em humanilidade – acabei de criar a “tradução” 🙂 ). Cabe a nós decidirmos o que é bom para nós mesmos e para os projetos, ou o que é apenas modismo ou estratégia de marketing.

“E viva a Web-Bem-Feita”

That’s All 😀

Saindo do foco só para explicar o título :
[falávamos de palavras chave que chegam aos nossos blogs]
Ninguém : o povo do google deve se divertir vendo log de busca
Ninguém : um dia escrevo um post com “grobo” e “cicarelli”… o mundo é bizarro… As pessoas fazem umas buscas muito sem noção
Rochester : o da cicarelli eu perdi a oportunidade.. mas vou fz um qq dia, só sair um novo burburinho na net
Ninguém : pode fazer da cicarelli que ainda deve render muito
Rochester : pensei em fz agora, mas nem vo nao

Não resisti o teste de quanto tempo duram esses boatos na internet, desculpem-me os que chegaram aqui por engano 😀 .

Mas vamos ao que interessa…

Há algum tempo tenho visto pessoas escrevendo sobre a tal dificuldade de se “casar” Design com Usabilidade. Mais espeficicamente do confronto entre Design e Usabilidade. Será que existe mesmo esse confronto?

Quem falou sobre isso descreveu muito bem a usabilidade, que é basicamente a facilidade em se utilizar algo (na verdade é muito mais amplo que isso, mas a ídeia princial é essa mesmo), mas na hora de explicar o tal design…

Design não é só a “cara”, design é todo o projeto que se faz para criar algo. Aliás no Inglês a palavra significa tanto “projetar” , “construir” , “criar”, quanto o resultado que se tem desse projeto. E temos várias áreas dentro do design, como design gráfico, ou design de interação, que vai muito além da forma, ou da interface, que estudam inclusive o comportamento do usuário ao interagir com o objeto (que se aproxima de Usabilidade, e geralmente andam juntos, um completando o outro).

Mesmo que considerássemos Design como layout, não acho que haja confronto se soubermos o que estamos fazendo. Há quem diga que pensar no usuário torna o projeto difícil, trabalhoso, feio, e que não trás vantagens porque cliente só compra a cara bonitinha. Não penso assim. Não vou dizer que é facil “pensar” como o usuário, porque desenvolvedor não é usuário (principalmente no meu caso, que aprendi a criar, pra depois começar a navegar 🙂 ) mas não é impossivel, e às vezes nem “necessário”, afinal, temos os testes de usabilidade com usuários exatamente para isso. E um projeto com boa usabilidade não tem que ser feio, isso independe da usabilidade. É como pensar que Tableless limita a criação do layout. Depende de quem faz, temos vários exemplos disso (não citarei nenhum, por enquanto) tanto bons quanto ruins.

Não há uma receita mágica para um site ter boa usabilidade, assim como não há receita para um ser site bonito, e não há nem sequer receita para se fazer um site “bem feito” (já ouviu falar de “Web-Bem-Feita”? 😀 Breve teremos mais explicações). Existem recomendações, convenções, e padrões que ajudam muito.

A questão mais complicada é vender para o cliente a idéia de que não basta algo bonitinho para ter retorno na web, aí entra a diferença de um projeto apenas com forma, e outro com forma, usabilidade, seguindo os padrões (e mais todos os opcionais de fábrica para a versão 2.0)…

O tal confronto “Design X Usabilidade” não existe pelo simples fato de serem estudos que se completam e auxiliam, assim como a forma completa a estrutura, o CSS completa o HTML, e o queijo completa a goiabada 😀

That’s All 🙂

Novo Yahoo mail beta

outubro 5, 2006

Vi muita gente comentando sobre o novo yahoo mail, e não poderia deixar de escrever aqui sobre o beta mais beta que já apareceu. Eu virei “beta tester” por acaso, acho que é pela minha mania de abrir links em uma nova aba, aí eu fiquei travado na tela de “propaganda” dele. Depois então me rendi e resolvi ver como é.

A interface de cara surpreende, um layout mais clean, e com tamanho de fonte que me lembra sites em flash. Ele tem Ajax a rodo ali, a cada 10 minutos ele recarrega a parte de email pra ver se ter algo novo, e a cada reload ele mata o navegador 😀 . Entre as mudanças bruscas pra mim o destaque vai pra opção de “endereços”, que fiquei muito tempo procuando entre um dos menus que se destacavam mais (porque antes ele era assim) e só depois de muita luta descobri que ele está agora junto as pastas de email, no “menu” lateral esquerdo com o nome de “contatos”.

Ele tem entre várias opções de atalhos do teclado, de arrastar e soltar, e uma opção de clique duplo que abre o email em uma aba individual. Agora pense em um usuário navegando. Muitos deles têm a mania de clicar 2 vezes para abrir um link, por costume com os aplicativos do windows. Ele entra para checar seu email, e vai na pasta entrada (naturalmente sem ler nenhum dos “tutoriais” que tem no yahoo mail) e clica 2 vezes para abrir o email, o seu pc para por alguns instantes e volta com o email aberto, as sem os emails anteriores =P (mesmo que ele ache a pasta entrada novamente, ele vai repetir o processo, abrindo todos os seus 25 spams recebidos ao dia – Eu abri 5 emails e o firefox ficou extremamente lento, então tive que fechar todas as “abinhas” dele) .

Depois de “brincar” um pouco, olhei bem na interface pensando “Como faço para sair do Yahoo Mail Beta e ir para o antigo?”. Isso sim foi difícil. Procurei muito e acabei caindo em uma página com as funcionalidades do novo yahoo mail beta. Lá falava de um tal botão “retornar” no canto superior esquerdo da tela. Imediatamente fui para minha aba dele, e dei de cara com a Logo do yahoo mail beta, e mais nada. então fiquei vasculhando com o olho em todas as extremidades, até que vi embaixo do texto “bem vindo rochester jorge” a tal opção.

Apesar dos apesares, eu gostei muito do novo yahoo mail. Recomendo um teste (talvez por apenas um dia ou dois), mesmo que só para sentir o gostinho da quantidade de Ajax que roda ali (tente explorar as opções, e testar as teclas de atalho, enfim, fuçar 😀 ), e ver o poder que há nas maõs dos Web Designers, e alguns insitem em ignorar tudo isso.
That’s All 🙂

Post Relâmpago

agosto 27, 2006

Para quem acompanhou a polêmica toda do MXStudio, sobre Flash e ficou com o dedo coçando para participar… bem, como sou um rapaz bonzinho, deixo o link do tópico recém-criado para toda essa discussão.

That’s All 🙂

Bem, depois da publicação da minha coluna no MXStudio, me deparei com um post do Lucas Marçal, falando que não concordava e tal. É sobre a polêmica gerada quanto ao uso do flash para a criação de sites completos, e eu realmente acho que não vale a pena…

Não vou repetir aqui todos os motivos que ja foram tão falados, ou mesmo acrescentar novos argumentos (e acreditem, ainda há MUITOS) basta dizer que os próprios desenvolvedores dos sites estão vendo que não compensa. Do site do Pé Na Trilha por exemplo, que era um e-commerce feito todo em flash. Os caras agora estão com uma versão em html, que provavelmente dá um retorno maior, com metade do consumo de banda, ou dores de cabeça que já são padrão para nós (Peço desculpas ao pessoal do pé na trilha por citá-los aqui, e pela hipótese levantada).

Enfim, se quem usou para um projeto grande como esse acabou desistindo… Quem sou eu para falar mais alguma coisa =]

That’s All 🙂

Fator Cultural

agosto 10, 2006

Bem, para não passar muito tempo em branco, resolvi escrever algo bem curto, mas interessante…

Para entender como Design de Interação (assim como tudo na vida) é um fator cultural, vamos pegar um exemplo simples para nós, mas que um usuário dificilmente entenderia. Imagine um administrador de redes com seu celular andando na rua e falando com o estagiário que está na empresa. “Como está o tráfego por aí?”, “Os pacotes estão chegando aos usuários?”, “Os usuários estão satisfeitos?”, “Já baixou o Demo hoje?”,”Já verificou como é que tah a banda hoje?”

Ou seja, no entendimento de quem fala, tudo isso é normal, mas quem vê de fora irá entender as coisas de acordo com o vocabulário que a pessoa está acostumada, que geralmente não é o técnico…

OBS: Tomem cuidado as falar esse tipo de frase perto de algum policial ou coisa do tipo… Além dele entender errado, pode dar pepino… XD

e é só

That’s All 😀

KISS – Keep It Simple, Stupid!

Antes de tudo…

Primeiramente, vem as desculpas… afinal demorei por motivos da atualização de uma BIOS… E ai… desgraça pouca é bobagem e o computador ficou de birra… Fiquei sem meu pc por 2 dias. Bem, vamos ao que interessa.

O que é

Fui apresentado a essa filosofia de programação há relativamente pouco tempo, enquanto estava trabalhando em um projeto e um amigo meu, ao ver a complicação que eu estava fazendo, me falou um pouco sobre o “KISS”.Vou tentar mostrar aqui sua aplicação em um site, no seu planejamento e algumas vantagens.

É um princípio utilizado na programação ou desenvolvimentos de alguns softwares (muitos consideram site um software…) que “prega” a simplicidade, partes pequenas (os chamados módulos) que se unem para resolvem um problema maior.

Para quem não entende bulhufas de inglês, o significado é mais ou menos “mantenha a coisa simples, estúpido” (amigável né?) que poderia ser comparado ao famoso “menos é sempre mais”. A idéia é bem simplória, “pra quê complicar?”, muitas vezes o jeito simples, modulado, “dividido”, é o melhor, mais fácil, mais atualizável, mais dinâmico, mais “limpo”. No fim, a relação custo/benefício é altamente positiva.

Pra que complicar?

“Mas se o jeito simples é tão bom, por que tem gente que faz do jeito complicado?”. Basicamente por pura falta de conhecimento. Vale lembrar que “simples” não é sinônimo de fácil. Às vezes é bem o contrário. Mas no final, acaba sempre “menos difícil”. Um exemplo bobo: Imagina um cara que fez um site sem CSS (sim, tem gente que faz ainda, e o pior, tem gente que tem que consertar isso… ) e quer mudar a cor da letra do site de preto (#000) para um cinza escuro (#333 por exemplo), imagina o trabalho que ele vai ter… Mas se o cara tivesse usado estruturas menores para basear as informações de cor de texto (um arquivo css), ele teria uma solução simples, onde bastaria ele mudar uma coisa que tudo fica diferente.

Ás vezes, a complicação é gerada também por uma falsa ilusão de que fazer um site sem nenhum projeto é mais fácil. Que chegar na frente do computador e criar algo bonitinho em um editor de imagem qualquer e usar o Front Page (argh!) para gerar um HTML qualquer é o jeito mais fácil (acho que peguei pesado na parte do front page…hehe).

Muitas pessoas poluem as páginas, colocam coisas demais que invés de ajudar a agregar mais informação útil, só atrapalha a navegação. Acho que isso ocorre porque há milhares de recursos diferentes para se utilizar em sites (muitos compensam mesmo serem utilizados), e as pessoas não sabem escolher o que utilizar, então cabe ao profissional puxar essa responsabilidade e falar de vez em quando algo do tipo “Acho que isso vai poluir demais, melhor não colocar”.

Considerações finais

Só uma interface bonita não é o suficiente para “fidelizar” o usuário. Ele tem que conseguir navegar no site, e a simplicidade muitas vezes é fundamental. Uma das grandes vantagens é que com uma navegação boa além do usuário gostar (se o site tiver um conteúdo interessante também) ele recomenda o site para um amigo, que recomenda para outro… Assim a coisa cresce, e muito.

A melhor tecnologia que pode (e deve!) ser usada em um site é a simplicidade.

That’s All 🙂

Rochester Oliveira – Coluna de Usabilidade
Para qualquer dúvida ou sugestão:
Mande um e-mail para Rochester Oliveira – rochester@mxstudio.com.br
ou visite o fórum de Usabilidade do MXStudio

Original no MXStudio

That’s All 🙂

Durante uma conversa no departamento de TI (os caras mais loucos do mundo 😉 ) surgiu a idéia de como seria se uma tal empresa de computadores resolvesse fabricar carros(o carro ficou realmente perfeito, só falta eles fabricarem xD). Fiquei pensando nisso, no poder que a marca tem na cabeça de todos nós, mesmo que alguns desconheçam certas marcas, e resolvi escrever sobre (incentivado pelo Fabiano).

Bem, segundo uma tal enciclopédia, marca é uma representação simbólica sobre um produto, um serviço, ou a própria empresa. Mas as marcas acabam gerando imagens na nossa cabeça, acabamos relacionando-as a coisas que vão além do nome da empresa. A Dell por exemplo, para muitos é mais do que "uma empresa que vende computadores", passa a idéia de segurança, de qualidade, e de uns tempos para cá também de boa relação custo/benefício. Propagandas grátis à parte, é esse o ponto principal para mim: O que mais além do nome da empresa sua marca acarreta?

Agora falando especificamente de sites, que idéia o usuário já tem do cliente (representado pela sua marca)? O que mais podemos adicionar a isso? Compensa fugir completamente dessa idéia já formada e quebrar paradigmas?

Ás vezes a marca do cliente traz às pessoas idéias que eles mesmos (os clientes, donos da marca) desconhecem. Idéias que só podem ser descobertas com uma pesquisa junto ao público.

Fica então a idéia de que marca não é só uma forma de representar a empresa e seus serviços, é também uma forma de passar ao usuário idéias, características da empresa, e estão aí algumas questões interessantes para se pensar um pouco.

That's All 🙂