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.

Ufa! Até que enfim terminou a minha mudança, apesar que transferir contas bancárias não é lá muito rápido, já estou na grande Belo Horizonte-MG. Para quem saiu de Rondonópolis-MT e aos 30°c já colocava blusa de frio, aqui aos 27°c é bem suportável.

Não é porque se é arquiteto de informação com uma quedinha para web designer que as coisas são fáceis, a busca por emprego na cidade grande também é concorrida.  E está na minha vez de batalhar por uma oportunidade.

Bom, deixei o blog a ver navios nesse período, mas tudo tende a melhorar agora que estou com conexão em casa.

Aqueles posts que prometi sobre os wireframes, fluxogramas serão os próximos a serem escritos, além dos resumos dos livros que li nesse meio tempo.

Espero que exista ainda algum leitor, mesmo com tamanha ausência de publicações.

Manterei a programação de 1 post por semana, mas já nesta semanas postarei mais algum. Até já!

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.

Vida de blogueiro inclui saber um pouco de informática mais baixo nível.

Pra minha sorte que fiz Ciência da Computação, não foi problema algum atualizar o wordpress (gerenciador do meu blog). Entretanto deve ter uma galera que atualizou e ficou com um problema no texto, algo como modifica??o modificação na apar?ncia aparência dos textos com caracteres especiais, exclusivos da lingua latina (portuguesa).

Vamos ao que interessa.

Se a tua versão era como a minha, anterior a 2.1, depois que foi instalado a atualização (2.2 em diante) as configurações do arquivo wp-congif.php que está no diretório onde foi instalado o wordpress serão:

<?php
// ** MySQL settings ** //
define(’DB_NAME’, ‘nome_do_banco’);    // The name of the database
define(’DB_USER’, ‘usuario_do_banco’);     // Your MySQL username
define(’DB_PASSWORD’, ‘uma-senha-dificil-de-entender’); // …and password
define(’DB_HOST’, ‘localhost’);    // 99% chance you won’t need to change this value
define(’DB_CHARSET’, ‘utf8′);
define(’DB_COLLATE’, ”);

Moral da história, nessas últimas duas linhas que estão descritas acima, é só fazer a seguinte modificação:

define(’DB_CHARSET’, ‘latin1′);
define(’DB_COLLATE’, ‘utf8′);

Isso fará com que o interpretador/compilador do servidor MySql transforme os dados na formatação para serem apresentados no blog.

OK, eu não sou um gênio que aprendi isso sozinho, quando fui atualizar recebi um lembrete disto. Mas vale divulgar para aqueles que não conseguem entender uma virgula (comma) em inglês.

Web Designer, seus problemas acabaram.

O Marco Antonio de Queiroz, popular MAQ, colocou no ar seu novo site. Acessibilidade Legal

Esse site é da pessoa que eu conheço que mais entende de Acessibilidade na Web, e quando falamos de acessibilidade, não falamos apenas de acessíveis a deficientes visuais, adicionamos aqui a esta lista acessíveis em qualquer dispositivo de interação e outras coisinhas que só o MAQ sabe explicar com coesão.

Agora que o site está pronto, acho que está na hora do MAQ escrever um livro.

A partir de agora, aqueles que não participam da lista de discussão da Acesso Digital também vai poder disfrutar das opniões e abraços criativos do MAQ.

Só um detalhe que eu não poderia deixar passar em branco, ou melhor, no escuro.

O MAQ é programador de computadores, mesmo com incapacidade de percepção visual. Se você dotado de todos os sentidos acha que é dificil programar, o MAQ tira de letra. Só que agora está aposentado, negócio dele agora é mostrar pra você e pra mim, que a Internet é livre e para todos.

Então você que é web-qualquer-coisa, antes de desenvolver qualquer sitezinho, leia um pouco do que o MAQ escreve e aprenda com o mestre.

Desta vez não farei resumo de livro algum e sim explicarei como faço para fazer o resumo dos livros que leio.

Ok, alguns que me conhecem vão estranhar o título do post e dizer: “lá vem ele com as técnicas de SEO (Search Engino Optmization)”.

Dica número 1:

- Leia o livro.

Não existe nada pior do que escrever sobre o que se desconhece. Lembro bem do ensino médio, a galera do colégio procurava sites que fazem resumos de livros por capítulos tudo para não ter que ler o livro inteiro. Mas o moral da história está em ler o livro.

Dica número 2:

- Separe o livro por capítulos ou pontos marcantes.

Os livros que eu leio já vêm separados por capítulos, alguns por histórias fechadas, mas existem alguns que possuem capítulos enormes, o que dificulta a leitura, me fazendo criar a dica número 3.

Dica número 3:

- Faça anotações ou marcas .

Sempre que um capítulo é muito grande, eu o divido por partes interessantes, pontos chaves do texto que contém dicas, elo de ligação para outra história.

Essa é a dica mais importante, pois fazendo marcas nos pontos chaves do livro, ao discorrer o texto sobre o livro poderá focar nesses pontos marcantes do livro.

Dica número 4:

- Organização do resumo

Um resumo não quer dizer uma redação de uma página. É preciso ter uma sequência de fatos que ligam cada parte do livro, incluindo falar sobre o autor do livro.

Composição do resumo:

Sempre que eu faço um resumo de livro, falo um pouco sobre o autor do livro, não é difícil achar informação sobre o autor, no próprio livro encontra-se no interior da capa ou mesmo na última página uma descrição do autor com formação acadêmica, experiência profissional e outros livros que escreveu.  Escreva um pouco sobre o autor, sobre a visão do autor acerca do assunto principal do livro, o primeiro parágrafo serve para chamar a atenção ao que o autor quer transmitir com o livro, fale sobre isso.

Depois, lembre-se das dicas acima, separe o livro por capítulos ou partes principais e vá fazendo marcas e anotações, ao terminar de ler o livro já terá boa parte do resumo esquematizada em anotações.

E assim como o autor ligou um capítulo a outro, também deve ser seguida a mesma ordem, se necessário esteja com o livro em mãos para citar alguma frase importante que defina o tema do livro ou alguma parte importante.

É muito válido, colocar a sua opnião sobre o livro, o que ficou claro, quais os pontos obscuros, excesso de figuras, formato do livro e tamanho da fonte está agradável ou não para a leitura.

Isso é tudo por enquanto, em breve, mais resumos estarão disponíveis.

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?

Eu participei do Earth Hour 2008!!!

É uma sensação incrível, participar de algo que tem muita gente participando ao mesmo tempo. Sem falar que economizei uma graninha desligando esse PC, as luzes e desliguei o motor da motoca

Mas e o que eu fiz?

Fui bater papo com dois amigos (Andrews Medina e  Junior) e aproveitei para ver as moças que passeavam na calçada em frente ao shopping.

Tenho que deixar claro uma coisa antes que alguém apanhe em casa: O Andrews só conversou, não olhou para as moças porque é casado, um homem correto.

Tá dado o recado Andrews, mas se você quiser eu conto a verdade. ;p

Mas como a necessidade é maior, após as 21:00 (horário de Brasília) voltei para a frente do PC.

Ano que vem tem mais!!!

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.

Apesar de falar da minha vida para todo mundo, acredito que ainda não falei sobre a minha situação de empregado.

Esta semana foi rescindido meu contrato com a UNIR (União de Escolas Superiores de Rondonópolis) e estou de volta as boas negociações do mercado de trabalho.

Esse período que passei na UNIR foi muito agradável e o mais dinâmico, tive a oportunidade de atuar nos mais diversos ramos da área de Tecnologia da Informação. Começei na Infra estrutura, toda aquela história de laboratórios e servidores, cabeamento e até rede wireless. Algum tempo depois fui informado que deveria dar suporte aos usuários.

Durante a graduação, sempre ouvi de professores e programadores que os usuários eram seres de outro mundo, que achavam defeito em tudo e que os usuários deveriam ser exterminados. Trabalhar mais próximo dos usuários fez com que eu mudasse tudo o que eu já ouvi sobre eles. São pessoas normais, que querem apenas trabalhar e não medem esforços para aprender.

Foi defendendo os usuários que aprendi algo que mudou a minha vida. Usabilidade. Era essa a palavra que eu mais falava, depois aprendi a diferenciar usabilidade de acessibilidade, navegabilidade, ergonomia e até design. Foi aí que mais uma vez a dinâmica da vida me trouxe uma nova oportunidade.

Fui efetivado como WebMaster. Achei um pouco antiquado para os tempos atuais, mas o pessoal do RH não tem culpa da atividade ainda não estar regularizada, na CTPS (carteira de trabalho) está registrado Programador de Sistemas. Bom, trabalhando como WebMaster (Web faz-tudo-qualquer-coisa), transformei um site que era um emaranhado de tabelas, em um site orientado pelos padrões web da W3C. E aos poucos pude mostrar que o site era uma mídia muito mais barata e que estava disponível e inutilizada, logo o conteúdo do site foi crescendo e tive que iniciar a brincadeira de Arquiteto da Informação e toda aquela parafernalha de wireframes, sitemaps, foi necessária.

E o site que era apenas informativo, virou um Portal que passou a reunir todos os sites independentes dos cursos oferecidos pelas Faculdades Integradas de Rondonópolis, logo apareceu o Núcleo de Estágio, site da Mostra Científica, Fórum, webmail, Portal do Aluno, Portal do Professor e tantos outros sistemas e sites que tornaram a experiência de WebMaster muito mais complexa. Como a equipe era muito pequena, eu já não conseguia definir qual era a minha profissão, foi aí que começei a dizer que eu sou um web qualquer coisa. Só não houve tempo suficiente para desenvolver o site do departamento de Tecnologia que era um sonho.

 Tive que deixar a casa, e durante os ultimos 3 meses começei a treinar alguém que pudesse continuar o meu trabalho se um dia eu fosse embora. Espero ter deixado um bom ensinamento sobre desenvolvimento web, arquitetura da informação, design gráfico, design de interação e planejamento de projetos para internet.

Dos muitos amigos que fiz neste periodo não esquecerei e manterei contato sempre.

Foi bom enquanto durou e estou ansioso para saber quais projetos e desafios me aguardam.