Xbilidade.net

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.

Há algum tempo prometi que colocaria minha monografia da graduação à disposição e acabei não cumprindo. Para não saírem a dizer por aí que eu não cumpro o que prometo já está a disposição para quem quiser acessar.

Monografia: Construção de Layouts com Lista de Estilos para Amenizar o Tráfego de Dados nos Servidores Web

O enredo é sobre o desenvolvimento de websites com padrões web. Desde quando iniciei a minha carreira como profissional web, encontro uma resistência muito grande do mercado em aceitar os padrões web (pelo menos aqui no Mato Grosso). As desculpas eram as mais esfarrapadas possíveis, tais como: vai demorar mais, vai ficar mais caro ou a melhor pior de todas: ‘meu sobrinho fez um curso de web design e sabe fazer isso aí por x reais’.

Como sempre na minha vida, tenho que provar tudo que estou a dizer, resolvi provar que seguir os padrões web é muito melhor.

Das muitas coisas que tinha que provar, optei por aquela que comercialmente é mais visada: custo do site.

Muitas empresas que contratam alguém para desenvolver sua marca na Internet, acaba chorando muito no preço de construção da marca e esquece do preço de manutenção da marca.

Se você é bem posicionado nas buscas, teus clientes acessam com frequência seu website, a maioria do conteúdo do seu site é de interesse do seu público alvo, isso vai gerar um grande tráfego de dados no servidor de hospedagem e para que não sabe, os servidores cobram por cada bit que é transferido, logo, o que era barato para desenvolver, sai caro para manter.

É aí que entram os padrões web [HTML ou XHTML (não quero defender um ou outro aqui, já que ambos são para o mesmo intuito), CSS (para tornar o xHTML bonitinho ;P) ], todo aquele emaranhado de tags de tabelas, são substituídos por um código semântico, que pode ser lido por qualquer dispositivo (celulares, ledor leitor de telas, ipods, qualquer navegador) sendo apresentado o conteúdo da mesma forma para qualquer usuário independente do dispositivo utilizado para acessar a informação.

Se quiserem saber mais detalhes dessa loucura toda e os resultados obtidos, acessem a monografia:  Monografia: Construção de Layouts com Lista de Estilos para Amenizar o Tráfego de Dados nos Servidores Web

Aos curiosos que não vão clicar no link o resultado, para meu alívio, é que os padrões web diminuem o tamanho dos arquivos de conteúdo já que eliminam figuras decorativas e elementos de tabelas desnecessários a apresentação do conteúdo. Todas as figuras decorativas são carregadas uma única vez no arquivo CSS que deixa em cache as figuras para serem apresentadas nas outras páginas.

Estive um pouco ocupado com trabalhos extras, mas depois de ver este projeto da Microsoft, não poderia deixar de postar minha opnião sobre isto.

Trata-se do Microsoft Surface, uma superfície multitouch com uma navegabilidade incrível.

Se for reparar, a Apple tem algo muito parecido, é o que apresenta no seu novo dispositivo, o iPhone.

Não sei quem começou primeiro a desenvolver este tipo de interação, o fato é: não importa quem começou, o importante é a facilidade de navegação que os usuários terão com estes dispositivos. Eu não sou um dos grandes fãs da Microsoft, mas tenho que tirar o chapéu para este dispositivo, que me faz acreditar que filmes futuristas, como minority report cheguem um dia a tornarem-se reais.

Imagine as possibilidades que um acessório deste representa, talvez um controle remoto para TVs de alta definição, verificar o canal desejado antes mesmo de mudá-lo na tela da TV. A parte mais interessante que é um exemplo que se vê no site, é a escolha do cardápio na própria mesa.

Enfim, está aí mais um dispositivo para que as grandes mentes usem a criatividade para tornar a vida dos cidadãos comuns mais simples e divertida!