Xbilidade.net

Fato. Construir software está demandando cada vez menos tempo. E para não ter que reinventar a roda toda vez que um cliente solicita uma mudança de layout, entram em cena as ferramentas de prototipação.

Resolvi testar esta ferramenta: Mockup Screens. Uma ferramenta desenvolvida por Igor Ješe que tem dedicado bastante tempo atualizando funções essencial a criação rápida de protótipos. Mal comecei a testar e já tinha um update novo.

Logo na primeira tela percebe-se a facilidade de uso da ferramenta. Quando é iniciado, um form já está aberto em formato de janela windows (vêm por default), mas é possível mudar para formato web e também para monocromático.

Isto torna bastante flexível a sua utilização, designers de interface podem construir protótipos para web, windows ou mesmo DOS ou outro sistema no formato ‘tela preta’. Sem escrever código algum.

Mockup Screens é uma ferramenta paga, o que garante atualizações constantes e suporte de qualidade. Para quem deseja testar também, basta acessar o site e baixar a versão trial que permite testar a ferramenta por 30 dias, sem restrições, tudo no bom e velho arrastar e soltar, podendo salvar imagem das telas individualmente, fazer ligações (links) entre as telas.

[update]

Opções freeware também são uma boa escolha, aqueles que desejarem saber mais, basta manifestar nos comentários.

[/update]

Apresento mais um elemento da documentação de um website: Mapa de Fluxo de Navegação. Na arquitetura de informação, o estágio de Especificação permite organizar e documentar tudo o que é desejado para o website, detalhando a visão macro obtida no estágio anterior, Concepção.

O Mapa de Fluxo de Navegação permite reunir todos os wireframes desenhados, detalhando em cada objeto ou bloco de conteúdo suas interligações com outros objetos.

A princípio este Mapa de de Fluxo não chega a ser importante para o usuário final, mas permite aos gerenciadores do projeto terem a visão precisa dos resultados mesmo antes de algum código ser implementado, o que leva a prevenção de possíveis erros de hierarquia e classificação de produtos de forma visual.

O Felipe Memória, em seu livro Design para a Internet, alertou para o fato da complexidade dos Mapas de Fluxo de Navegação, por serem extramamente detalhados, ficam difíceis de serem impressos e esparramados em alguma mesa de reuniões. Entretanto, é visão detalhada que permite visualizar o produto como um todo, simulando uma navegação off-line para que o produto final não cause frustações à navegação do usuário final.

Figura: Exemplo de Mapa de Fluxo de Navegação com legenda da notação.

Para facilitar a leitura e impressão é preferível dividir o mapa em partes, assim como a figura que apresenta um Mapa de Fluxo com as bolhas principais.

Verificando os mapas de fluxo de navegação, nenhum hyperdocumento fica livre de vistoria e é verificado suas ligações com o todo o website, diminuindo o risco de haverem “páginas não encontradas”. Se isto ocorrer devido falhas no processo de Implementação é facilmente corrigido fazendo o Teste de Mesa, que consiste em verificar os links unitários manualmente, mas não descarta-se a possibilidade de utilizar um robô para o teste de mesa e fazer uma leitura do seu relatório.

Há alguns dias na lista de discussão de Arquitetura de Informação estava rolando uma thread que comentaram sobre ninguém nunca ter visto - de outros arquitetos de informação - wireframes, mapas de fluxo e outras modelagens que são necessários no processo de arquitetura de informação. É certo que alguns arquitetos de informação trocam figurinhas, pedem alguns pitacos, mas isso acaba ficando restrito a um grupo de conhecidos. É claro, muitos projetos também tem que ser mantidos em sigilo absoluto por pedido dos clientes.

Durante a minha passagem por uma instituição de ensino superior, depois de brigar muito pela importância da arquitetura de informação, consegui aplicar alguns testes de usabilidade, criei sitemaps, wireframes, mapas de navegação e irei disponibilizá-los aqui nas próximas postagens.

Antes que alguém pergunte, mas o que é esse tal de wireframe, eu explico:

Um wireframe é uma representação gráfica prévia de uma interface. No wireframe estão posicionados os elementos básicos da interface, a navegação entre a informação posicionada na tela. Existem dois tipos de wireframes: Estáticos e Navegáveis.

Os wireframes estáticos são mais simples, neles são desenhados os principais blocos de apresentação de informação sem muito detalhamento, apenas para se ter um ponto de referência do produto final.

Já os wireframes navegáveis, chegam a ser confundidos com protótipos, pois apresentam algumas respostas aos comandos (cliques e acionamento de teclas) aplicados. Por serem um pouco mais complexos, tendem a tomar um tempo maior de desenvolvimento.

Existem muitas ferramentas para fazer wireframes, entre as mais conhecidas o Axure e Microsoft Visio, alguns arquitetos de informação utilizam até mesmo o Microsoft Power Point ou outro programa de apresentação de slides para desenhar os rascunhos da interface.

Eu sempre usei o Axure para os wireframes e o Visio para fluxo de navegação. Já que formatei o PC, vou baixar novamente a versão trial do Axure para abrir os wireframes e exportar para formato de figura jpeg.

O Felipe Memória em seu livro Design para a internet publicou alguns cases e seus wireframes e mapas de fluxo, achei muito bacana a idéia e estou trazendo para o meu blog.

Alguém, por favor, me responda: Quem são os designers de interação da Microsoft?

Minha vida com computadores começou com o windows e eu tenho feito de tudo para defendê-lo, mas acabo queimando meu filme com algumas coisas que aparecem nele.

Primeiro: Toda ação pede uma confirmação para o usuário.

O que isso significa?

Está isentando a Microsoft de qualquer danificação que possa ocorrer, pois a ação foi confirmado pelo usuário, o defeito aconteceu por mal uso do sistema. Não sei se seria uma boa forma de tratar quem paga pelos seus produtos.

Eu que procuro solução para tudo, acabei encontrando uma forma de acabar com isso, mas o usuário iniciante, aquele que não tem tanta experiência com software, que não lê todas as telas, aquele que clica em links do MSN, não faz a menor idéia de como aprimorar sua experiência do uso do software.

Segundo: Botão desligar não desliga.

Todo mundo está acostumado com esse ícone (circulo com um corte na parte superior) sendo a representação gráfica para desligar. Tem ele no celular, na televisão, no DVD, e até na versão anterior do windows.

Agora que raios pensaram os Designers de Interação da Microsoft ao alterar um ícone tipicamente de desligar para colocar o computador em estado de espera?

Até que se colocasse o computador para hibernar era uma coisa, afinal, economizar energia para ligar e desligar o computador nessa época que vivemos de responsabilidade ambiental é totalmente aceitável. Agora em modo de espera o computador não desliga, ficam ligados processador, cooler do processador, memória, entradas de mouse e teclado, isso não economiza tanto quanto hibernar.

Mas a economia não vem ao caso neste post, o que me intrigou foi o ícone.  Minha vó não faz ideia do que seja uma “sessão na memória”, ela só quer desligar o computador igual faz com a TV preto e branco que ela adora. Apertar o botão e esquecer.

Não sei se isto foi solucionado no Service Pack 1 para o Vista. Está cada vez mais difícil arrumar desculpas para os erros bobos da Microsoft. No XP, ainda não foi corrigido o erro de orografia ortografia da tradução para o Português do Brasil. Vamos aguardar o SP3 ou migrar para algum software livre da vida, ou quem sabe um MAC OS não seria a solução dos meus problemas?

Igual a Fenix, revivi a série de revisões de livros que já li. Demorei a postar sobre os livros e agora tem muitas revisões acumuladas. Aos poucos irei escrevendo sobre outros livros.

Steve Krug, anote este nome. Autor do livro traduzido: Não me faça pensar!, no original em inglês: Don’t make me think! com certeza é o melhor escritor que eu já pude ler. Tive a oportunidade de ler tanto o original quanto o traduzido e ambos estão muito bons, o mesmo senso de humor da narrativa no original também é no traduzido.

Não me faça pensar é um livro que logo de início já dá o recado. Atenção desenvolvedores de sistemas e sites, não massacrem meu cerebro tentando achar a informação que está escondida nesse labirinto maluco.

Foi bem isso que pensei ao ler o livro.

Tudo nesse livro é para a melhoria da satisfação do usuário, que é o seu cliente. Steve dá a bronca, mas tudo com bom humor. Audaciosos, criou até leis da navegabilidade que se aplicadas, darão direcionamento e liberdade de escolha para quem está utilizando seu sistema ou site.

E para a nagevação pelo site ser um processo prazeroso e não uma tortura, ele oferece dicas de Arquitetura de Informação como textos básicos, simples, que vão direto ao ponto. A omissão de palavrs desnecessárias é a chave.

Tá difícil pra navegar, vai deixando um rastro para o usuário seguir, migalhas de pão(breadcrumbs), avise o usuário onde ele está (placa de rua).

 Sem dúvidas o melhor livro que li em 2007.

Título: Não me faça pensar!
Autor: Steve Krug
Ano: 2001
Editora: Market Books
Nível: Iniciante/ Intermediário
Indicação: Indicado para Designers de Interação e Arquitetos de Informação.
Status: Aprovado com louvor - vai para a cabeceira da cama.