Prototipagem em papel

O protótipo em papel nada mais é que um rascunho “responsável” da estrutura da página, ou seja, é rascunho mas há um limite para que não seja feito de qualquer modo e vire tempo perdido. Foi uma fase importantíssima para que o grupo pudesse soltar as idéias e pudéssemos discutir a organização de conteúdos cabeludos como Recordes de atletas e para-atletas, além de evitar perder tempo com a estrutura das páginas na fase do layout. Segue um exemplo não muito legível (a foto foi tirada com uma iSigth de um Macbook):

Era para ser a Inicial :)

Essa brincadeirinha no papel foi um pouco mais fácil porque já tínhamos criado o diagrama com a arquitetura da informação do site, se tivéssemos que criar a arquitetura ao mesmo tempo seria um desastre. Com a pilha de páginas em punho estava na hora de passar tudo pro computador.

Wireframes

Sim, eu usava o Flash para fazer os Wireframes e já usei o Microsoft Visio, todos com seus prós e contras. Para esse trabalho acabei usando o Axure RP e é realmente muito fácil de operar como dizem, principalmente para criar wireframes de baixa e média fidelidade. Quem quer criar um protótipo navegável vai ter que estudar um pouquinho a documentação do produto, eu particularmente não gosto deles prefiro que a navegação nesse caso seja feita pelo sitemap mesmo. Enfim, o Axure não é perfeito mas é a melhor opção talvez devido ser feito com a finalidade quase que exclusiva de criar protótipos de softwares. Wireframes do projeto prontos e aprovados é hora de ir para o layout, mas isso eu conto depois da apresentação de terça.

Reserve este dia em sua agenda: 08 de novembro. Pela primeira vez em Recife, o Dia Mundial de Usabilidade (World Usability Day) será comemorado com um evento que promete reunir muita gente legal compartilhando suas experiências e perspectivas com relação ao Design Centrado no Usuário em nossa cidade. O evento — que está sendo organizado pelo UXrecife e já conta com o apoio da Faculdade Maurício de Nassau, UXnet e TV CESAR — acontecerá no auditório da Livraria Cultura a partir das 17h00, contando ainda com coffee-break e sorteio de brindes.

O WUD 2007 em Recife está chegando!

Anota aí:

• Dia: 08 de novembro de 2007
• Hora: 17h00 às 20h30
• Local: Auditório da Livraria Cultura
  Rua Madre de Deus, s/n – loja 135, Bairro do Recife, Recife/PE – Telefone: (81) 2102-4033

Mais informações

• Sobre o evento em Recife
• Sobre o evento mundial

Já imaginou algum deficiente visual ouvindo o software ledor de tela, um daltônico ou alguém num monitor branco e preto lendo o seguinte:

Num monitor sem cores seria assim:

Solução

Num formulário não é proibido usar uma cor diferente para destacar os campos com erro de preenchimento, mas é preciso agregar informação textual relevante. Mesmo com áudio, vídeo e o escambau, o texto ainda é a forma básica quando se fala em acessibilidade na Web. Se na página você tem informações que auxiliem o preenchimento dos campos ou um formulário é bem pequeno é só usar um alerta textual simples como:
Erro, por favor verifique a digitação e preencha corretamente os campos necessários.

Pense num formulário de 3 campos, nele é fácil saber quais campos estão com problema quando você digita um e-mail inválido ou deixa um campo em branco. No caso de um formulário com muitos campos é preciso incluir na mensagem de erro uma lista dos campos com problema como no exemplo:
Erro, por favor verifique os campos:

• Email inválido
• CEP não corresponde a cidade informada

Nada de complicação, viu como essa foi fácil? :-)

• Acessibilidade fácil: Crie um link direto para o conteúdo

A 7 Graus, empresa da qual faço parte da equipe, solicitou que eu criasse um tema simples para blogs em WordPress como parte da estratégia de divulgação da empresa na web, nasceu o Cutepress. E parece que já vem sendo bem aceito por aí.

O tema é inspirado no conceito do Twitter e tem como preocupação a legibilidade e facilidade de uso além de ter um layout bem limpo. É baixar, colocar na pasta /wp-content/themes/ e ativá-lo na área de administração, pode customizá-lo a sua necessidade. Ele é opensource e está sob a GPL – GNU General Public License. Queria ter mais tempo pra fazer mais temas como esse.

Download do arquivo zip – 43KB

Mas minha questão é sobre uma dúvida que rolou na faculdade: Para nossa realidade o termo “Home” é mesmo o ideal? Alguns usam “Página Principal”, mas esse não é o sentido do termo home nas páginas em inglês, é? Na verdade a “casa” seria o início de tudo e não o principal. Geralmente sites têm uma homepage cujo o papel é só chamar para as outras seções e ao mesmo tempo ter um conteúdo principal que não é a home.

Na faculdade depois da discussão chegamos a conclusão de que para o público “não-geek” o termo ideal seria “Página Inicial” ou “Inicial” que é o sentido real da “homepage”, ser onde tudo pode começar. Se você for usar o termo em migalhas de pão, por exemplo, isso faz ainda mais sentido:

Home > Toystore > Cars
Inicial > Loja de binquedos > Carros

O Orkut, mesmo não sendo um exemplo de usabilidade a ser seguido, influencia muito na formação da carga de experiência do público alvo de muitos dos nossos projetos e nele é usado o termo “Inicial”, acredito que isso não deve ser ignorado.

Primeiro vai o tópico dele nomeado de “A já conhecida síndrome da corda caranguejo”:

Em resposta a:

[Ele inseriu a transcrição do texto: Cuidado ao dizer que é especialista]

Prólogo:

Creio que todos vocês já ouviram falar da famosa “Síndrome da corda de caranguejo”, coisa que há tempos existe em nosso Pernambuco. Enquanto há alguns querendo subir, há sempre outros para “puxar para baixo”.

————————————————

Caros amigos,

Simplesmente porque tivemos acesso a um universo mais amplo ao tomar conhecimento do termo Front-End Engineer, proporcionado pelo projeto do Yahoo! junto a Pitang, e resolvemos compartilhar esse conhecimento com outros através do nosso humilde curso, fomos alvos de um texto de tamanha pequenez (a fonte pequena para o dito texto é claramente proposital), que caracteriza, ao meu ver, uma agressão gratuita e despropositada.

Portanto, faço questão de comentar alguns pontos.

—————————————-

“FEED – Front End Engineer & Designer e eu brinco chamando de Engenheiro de frente e fim.”

Não inventamos esse termo, ele já exisitia. Talvez tenhamos agregado a palavra Designer e transformado tudo em uma sigla. No entanto, que pecado há nisso? Não seria a primeira sigla da História.

“Não “se especialize”, principalmente se o título for de cunho comercial.”

Comercial, você fala do curso, do movimento, da lista, de quê? Se for do curso, saiba que o fazemos muito mais por paixão do que pelo dinheiro. É claro que ganhamos dinheiro com isso, mas não é tanto quanto os olhos grandes podem tentar enxergar.

“Aqui em Recife esse curso forma um exército de FEEDs gritando para o mundo os valores dos padrões Web.”

Engraçado, estamos em guerra? Isso soa como se os alunos passassem por algum tipo de lavagem cerebral e onde implantássemos algum tipo de mensagem subliminar nas pesssoas. Todos saem gritando FEED por aí como zumbis.

““Front o que?” Tem a mesma relevância de colocar no currículo: Rich Media Application Engineer. E essa história de Rich Media todo mundo sabe que é um título criado para vender ferramentas em palestras.”

O André Valongueiro providenciou a resposta por mim: “Por aqui o termo é uma grande novidade mas lá fora já é algo realmente sólido, uma realidade. Bastar olhar essa lista de oportunidades para Front End Engineers, cadastradas no Yahoo! Hotjobs.” Quem quiser, pode retirar ou deixar de colocar no currículo, eu vou continuar usando.

Não tenho nada contra o curso, até estimulei muitos que estavam em dúvida se faziam ou não. Releia o texto e veja que eu poderia ter usado qualquer outro exemplo no lugar do Front End Engineer. :)

O curioso é ter usado justamente esse. Está parecendo desculpa de Senador Alagoano.

————————————————–

Epílogo:

Curiosamente, o autor do texto faz parte desta lista. A pergunta que fica é: se ele pensa assim, o que ele faz aqui? Por isso, peço ao “nobre colega” que retire-se desta lista antes que eu pessoalmente o expulse. Vai procurar sua turma, rapaz. Quem sabe existe alguma lista do tipo [eu-odeio-termos-comerciais-bonitinhos] ou qualquer coisa parecida. Quem sabe você encontra seus pares por lá.

Atenciosamente,

Berg Brandt

Front-End Engineer & Designer – FEED
Yahoo! Canada

“Mais FEED do que nunca”

Depois de ficar sem entender essa reação medonha dele eu preferi esperar esfriar a cabeça pra poder responder em privado e não falar coisas da qual me arrependeria, até porque segundo alguns da lista eu não sei escrever. Minha resposta foi:

Berg,
Pelo perfil desse e-mail que você acaba de enviar tenho certeza que não vai adiantar, mas aqui vai a resposta em privado:

Meu objetivo com o texto não foi atacar ninguém nem o curso, nem muito menos derrubá-lo. Meu blog nem eu tenho poder pra isso.

Você pode não lembrar, mas EU estava interessado em fazer o curso até porque eu já conhecia o termo Front End Engineer dos vários blogs que assino e me identifiquei com pioneirismo. Conversei com os 3 pessoalmente no dia da primeira palestra que houve na Marista sobre só cursar a parte de Javascript. Eu não iria falar mal de uma coisa que me interessa (motivo de eu estar na lista é o interesse). Eu pelo menos não vejo lógica nisso. Se eu tivesse cursado e quisesse falar mal diretamente do curso, falaria abertamente lá no blog até porque quem paga domínio e hospedagem sou eu. Mas não é esse o caso.

Tudo que fiz foi comparar os tempos de cursos de Flash onde os alunos saíam achando que Flash era a salvação de suas vidas profissionais, alguns se deram bem, mas muitos focaram tanto na ferramenta e acabaram ficando pra trás. A minha sensação de deja vú aconteceu ao ver alguns saindo do curso de vocês considerando que ser um Front End Engineer era a salvação profissional assim como outros fizeram se dizendo Flash Developer. O que quis então com o texto foi abrir os olhos para falar exatamente o que falei: que a Web é muito mais que só Flash ou só codificação ou só UX e que o profissional precisa ter uma especialidade sem esquecer da universalidade da Web. Eu não falei de lavagem cerebral, não achei que precisava explicar que o uso do termo “movimento interessante” naquele contexto quer dizer “movimento bom” e lembrar que “exército de FEEDs” vem seguido de uma pergunta com a resposta dada.

Sempre que falo de alguma coisa daqui de Pernambuco sou mal interpretado, vide o texto do EDW que fui atacado nessa mesma lista. Parece que pensar em falar de coisas do mercado daqui já é uma problema que precisa ser resolvido e quando começam a ler já procuram o lado destrutivo do texto.

A brincadeira com a tradução do termo dava pistas do tom e do objetivo não destrutivo do mesmo. Você tirou as suas conclusões, se sentiu ofendido e atacou. O que a gente faz nessas situações é respeitar a liberdade dos outros e se geramos esse tipo de incômodo só nos resta pedir desculpas e se explicar; e ficam aqui registradas as minhas desculpas. Porém com o que acabei de ler no seu e-mail acho que não vou ser desculpado. Eu não lhe conheço pessoalmente e até me lamentava por isso por ter ouvido coisas boas do seu trabalho. Mas eu também tiro as minhas próprias conclusões e pelo seu tom agressivo e intolerante acho que nem valeria a pena fazer o curso, nem continuar na lista e nem ser desculpado.

Assim que enviei isso só para ele, saí da lista. Depois fui sendo informado por colegas dos resultados do texto dele lá. Um dos membros da lista respondeu dizendo quase que exatamente o que eu tinha dito no e-mail acima e outros preferiram continuar considerando o sentido das frases fora do contexto e me atacar das formas mais estranhas, inclusive o André Melo que já tinha me atacado anteriormente na mesma lista por causa de outro texto sobre o EWD voltou a fazê-lo e ainda perguntar o que eu tinha contra eles. Eu é que pergunto o que ele tem contra minha pessoa, já que a única vez que falei com ele foi exatamente via lista pra responder ao ataque sobre o texto já citado.

Aos que pensam que eu escrevi o texto com objetivo de gerar polêmica se enganam, porque eu não preciso disso pra “ganhar audiência”. É certo que eu não venho escrevendo muito por aqui, mas meus quase 700 leitores do feed não seriam desrespeitados com truques para ganhar audiência. Meu objetivo é discutir assunto relacionados à web sem preocupação com quantidade, contador de visitas é coisa dos anos 90.

Eu ainda fico pensando se realmente tivesse feito uma crítica ao curso ou a algum deles, essa atitude infantil se justificaria? A resposta é claramente não, se fosse realmente uma crítica era preciso saber recebê-la e só agredir o crítico se ele o agrediu.

É triste e difícil participar desse tipo de situação, mas “esse tipo de blogueiro” aqui vai continuar escrevendo sobre o mercado daqui do jeito que sempre escreveu e continuar enfrentando de frente essa sensibilidade à flor da pele inexplicável de alguns colegas conterrâneos, porém se o nível de discussão sempre for esse é melhor nem aparecer na minha “audiência”.

1. Usar Javascript para mostrar o significado num balão
2. Abrir uma Lightbox com o conteúdo do significado

Mas os problemas de usabilidade nos incomodavam. Foi aí que na conversa surgiu mais ou menos a seguinte questão que não lembro quem fez: Nos livros usa-se notas de rodapé no final do texto, né?

Mas era exatamente isso que estávamos tentando fazer o tempo todo! Como ninguém conseguia chegar numa idéia tão simples, prática, lógica, acessível e usável como essa? Não é engraçado?

Dividido em 2 fases – Pré-projeto e Projeto Final – ele tem o objetivo de colocar em prática todos os conceitos que vimos na primeira parte do semestre. Essa divisão em fases acontece porque por mais que nós tentemos simular um ambiente de trabalho é preciso também que os professores avaliem as etapas e saibam o que orientar antes de chegarmos ao final.

O Pré-Projeto

O tema escolhido para esse semestre foi “Esportes Olímpicos”. Ficamos com Salto (Altura, Com Vara, Distância e Altura). Além do objetivo decidimos criar uma missão que é: Com o conteúdo (a) estimular mais a prática de Salto devido a pouca tradição e divulgação do esporte, (b) estimular também pessoas com necessidades especiais a praticá-lo e tecnicamente mostrar que é possível criar um site acessível sem esforço extra.

No documento, além de justificativa, objetivo, questionários e relatório do briefing, foi onde reportamos a análise de 3 sites com conteúdo e/ou estrutura relacionados ao tema. Trabalho duro de analisar pontos como Cores, Tipografia, Ergonomia e Gestalt os dois mais complicados. Também nessa fase foi onde conseguimos exercitar e arriscar na Arquitetura da Informação. Tínhamos ainda muita coisa indefinida que acostumamos chamar de “Pré-conteúdo” e “Pré-Briefing”. :P Mas foi entregue e conseguimos nota máxima em todas.

• Baixe o documento do Pré-Projeto – 48 páginas – 4.4MB

Ainda há muitos ajustes a serem feitos como ortografia, melhor padronização das análises e incluir a nova estrutura da Arquitetura da informação, mas é possível ter uma boa idéia. Não estamos aceitando sugestões (brincadeira…).

O Projeto

Essa semana começamos a modificar a Arquitetura da Informação para a realidade das novas idéias que surgiram e conteúdos definitivo coletado. Matamos alguns itens do menu principal com base no objetivo maior do site e discutimos em reunião que conteúdo cada página terá, anotando tudo. As anotações são muito úteis porque precisamos ajustar esse documento, pois ele fará parte do Relatório do Projeto Final.

Temos um prazo belezura: 30 de novembro para entrega de relatório impresso e CD anexo para cada professor. Nesse dia saberemos a data da apresentação, ou seja, o bicho está pegando… Horário de aula não é produtivo como 8 horas de trabalho. Nossa sorte é que não temos que usar linguagens dinâmicas (o projeto de Java e banco de dados é no próximo semestre) e os 5 conseguiram ser dispensados por prova de avaliação de competência na disciplina de Ambiente Web. A nossa responsabilidade já é um pouco menor, mas resolvemos não excluir a matéria do relatório e usar a aula livre para trabalhar no projeto.

Ontem definimos as próximas ações: Tratamento de conteúdo e Wireframes. Acabo de chegar da reunião de Wireframe com os rabiscos e, apesar de ainda faltar definir algumas páginas, já vou começar a transformar os protótipos de papel em tela digitais usando pela primeira vez o Axure e deixando um pouco o Wireframe em Flash de lado. Mostro as etapas aqui sempre que o tempo deixar.

Há mais ou menos 2 anos os browsers pararam de inventar suas regras e para o bem de todos começaram a seguir bem o padrão de CSS2 e se comportar igual para quase todas as funções do Javascript. Os conceitos de webstandards começaram a fazer sentido nas empresas lá fora, não demorou muito a fazer por aqui e hoje isso tudo virou curso, claro. Aqui em Recife esse curso forma um exército de FEEDs gritando para o mundo os valores dos padrões Web. Isso é ruim? Não! Isso é muito bom.

O ruim é fazer um curso desses e sair por aí se auto-intitulando um FEED, dizendo que é especializado em codificar páginas e dizendo que seu filho vai ser FEED quando crescer. É bem provável que o mercado vá dizer: “Front o que?” Tem a mesma relevância de colocar no currículo: Rich Media Application Engineer. E essa história de Rich Media todo mundo sabe que é um título criado para vender ferramentas em palestras. Há necessidade de bons codificadores no mercado? Sim e como! Mas pensando bem, um profissional Web que se especializa só em códigos do frente e fim não é um profissional incompleto?

Engenheiro de frente e fim é só um exemplo

Há quem seja bom em Photoshop e desenhe as melhores interfaces do mundo, mas se ele não souber como aquilo vai influenciar no PHP ou HTML e CSS final da página ele é um profissional web completo? Há outros que são bons pra caramba na programação em PHP, Java, Ruby… Mas se esses caras não sabem que as tags de imagens de uma galeria precisam estar fechadas e com um texto alternativo para cada uma, eles são profissionais web completos? E o cara que se especializa em Arquitetura da informação, acessibilidade e usabilidade e ignora totalmente as questões de projeto, ou mesmo o bom e velho HTML e Javascript?

Não é preciso ser absolutamente ótimo em tudo, mas é trivial que o profissional da Web num mercado tão novo e mutante tenha essa visão geral das coisas. E pare com o costume de pensar só no momento e dizer que é “Engenheiro Programador de Fatias do novo aplicativo comprado por aquela multinacional“… Olho no mercado, olho no todo, olho no futuro!