Se tem um tema dentro da estrutura de Arquitetura de Informação que eu gosto, esse tema é sem dúvida o Sketching, quer seja pelo meu passado desenhista, quer seja pela sua praticidade.

O Processo de arquitetura de informação de forma simplista consiste na propotipagem, é o desenvolvimento de protótipos que se tornam o que chamamos Wireframes. Evidente que cada empresa utiliza um tipo de processo, muitas vezes até suprimindo alguns passos as vezes vitais, mas… de maneira crua, temos: Estudo da Informação, passo em que se separa e hierarquiza o conteúdo, Sketching (Discussão da abordagem), Prototipagem (vulgo Wireframe), Teste de Usabilidade.

Vamos ao que interessa, Sketching é o que podemos chamar de esboço ou rascunho, do projeto em questão. É uma maneira poderosa de discutir idéias. Como funciona? Simples, o arquiteto de informação vai rascunhar suas idéias básicas, baseado no contexto geral do projeto, ele vai fazer as diversas telas principais rapidamente, levar para uma reunião com os envolvidos e então apresentar tal idéia. O objetivo é que seja algo dinâmico, que não consuma muito tempo, e que alinhe o grupo todo sobre o que será desenvolvido.

O Sketching pede do profissional um conhecimento básico de desenho, isso se ele quiser fazer a mão livre, mas… para os mais desajeitados eu recomendo: www.uistencils.com ,não, eu realmente não estou ganhando nada indicando tais réguas, apenas sou também um usuário das mesmas e posso garantir que são muito boas.

Vamos a um exemplo de Skecthing voltado a User Interface.

Perceba que tais desenhos podem ser produzidos rapidamente, o foco é levar isso mesmo para ser discutido. Mas existem outras formas de se fazer isso, utilizando também os Skecthes recortados.

Nas mãos de um arquiteto habilidoso o Skecthing pode se transformar em uma ferramenta extremamente poderosa, isso porque vai direto no ROI (falaremos disso mais a tarde), onde você reduz um re-trabalho e deixa de antemão toda a equipe alinhada com seu pensamento.

Quando discutido entre designers, desenvolvedores e outros, tais rascunhos minimizam o processo de aprovação do wireframe por parte dos seus parceiros de equipe, em resumo, eles antes mesmo de começaram o processo de criação e desenvolvimento poderão enfatizar pontos críticos que deixarão de existir nos Wireframes vide a discussão ter sido realizada.

É comum muitos grupos de UX ignorarem a prática do Sketching, quer seja por dizer que não há tempo hábil de se fazê-lo,  ou mesmo por não haver tal cultura. Mas eu já participei de inúmeros projetos onde utilizei eu mesmo o Sketching, e pude perceber os seus benefícios. Não é incomum inclusive em uma reunião, o responsável pela estrutura navegacional utilizar uma lousa branca de reunião para traçar as primeiras idéias antes de executar uma UI.

Tais discussões são tão benéficas que muitas vezes a solução não sai do próprio especialista e sim do grupo como um todo, da mente coletiva. Onde se agrega as inúmeras impressões ao se olhar para algo que lembra uma UI discorrendo sobre o que vai ser a aplicação em si.

Uma coisa é você discutir o Abstrato, e isso pode ser absurdamente perigoso, a outra é discutir algo visual, que se vê de fato. Não é incomum perceber que o arquiteto pensou em uma solução, o designer visualizou na cabeça uma estrutura de layout, e o desenvolvedor já estava prevendo uma outra user interface… isso porque as palavras por mais maravilhosas que sejam não conseguem ser tão dinâmicas e concretas como um simples rabisco.

O Sketche feito para mobile é ainda mais funcional, pois trata-se de telas mais simples. Ainda no uso do mesmo, alguns arquitetos recortam tais telas e colam com durex/espadrapo na lousa, simbolizando a navegação, discutindo e mexendo na dinâmica do fluxograma do projeto e utilizando o canetão para simular o fluxo.  O Visual ajuda a encontrar falhas, e quanto antes elas forem percebidas menor o custo para o projeto, menor o custo para o desenvolvimento de Wireframes, menor o custo para o desenvolvimento de Layout e do próprio código. Logo, ROI imediato.

Não a toa, o Balsamiq, um sistema criação de wireframes, não pode ser visto como, exatamente um sistema para criar wireframes.. rs. O Balsamiq é um gerador de sketches, ele tem esse estilo rascunho exatamente para simular essa prototipagem rápida.

Como Bill Buxton diz em seu livro “Sketching User Experience”, Sketches (esboços) são rápidos para criar e também é fácil de eliminar, razão pela qual eles são tão poderosos.

_________________________________________

Eduardo Horvath é UX Specialist e Designer na DClick.
Design de Mídia Digital.

Gráfico extraído do livro: Designing for Interaction

É, Tyler, não adianta esfregar os olhos não.

FONTE: Fabricio Teixeira

Quem trabalha com arquitetura de informação e usabilidade sabe que o aluguel ou compra de um equipamento profissional de eye-tracking pode custar os olhos da cara. (Pausa para reflexão sobre o trocadilho infame.)

Mas essa semana a Tobii Technology lançou, em parceria com a Lenovo, o primeiro laptop equipado com sistema de eye-tracking nativo. O sistema está programado para executar comandos baseado na direção dos olhos dos usuários. Você olha para determinado canto da tela e o menu aparece. Você pisca um dos olhos e dá o play em um vídeo.

Se a tecnologia se popularizar, preparem-se para projetar também interações com os olhos – além dos cliques, toques e recentes gestos. Interessante como o conceito de “interface” tem buscado inspiração em novos sentidos e partes do corpo. E é bom a gente estar preparado :)

Fonte: Arquitetura de Informação

Quando o excesso de ícones de redes sociais começa a atrapalhar a interface de seu site, é hora de repensar a vida. Além de poluição visual, muitas vezes acaba distraindo a atenção do usuário daquilo que você tanto quer que ele compartilhe: o conteúdo.

Os ícones de compartilhamento podem até servir como um lembrete, no final de um texto muito extenso, como cita esse artigo.

“The reason behind adding one share widget to the bottom of each article is based on logic and user experience. If a person enjoys your content enough that they read through the entire article, they will be more inclined to share it. So when they get to the very end of the article, what should be there waiting for them to spread information they are interested in? A non-obtrusive share button that does not distract from the rest of your article. You only have a few seconds to grab the reader’s attention, and adding more widgets will create more clutter that users don’t want.”

Tenho a tendência a acreditar que, se o conteúdo é realmente bom, ele será compartilhado mesmo sem nenhum desses botões. Em todo caso, não custa lembrar o usuário que não está acostumado a copiar a colar links da barra de endereços.

Mas será que o The Washington Post não está exagerando?

Pós-Graduação – PUC Minas

PUC Minas Virtual lança programa de atualização em Design de Interação!

Trata-se de um curso de apresentação e consolidação de conceitos básicos referentes ao Design de Interação e que propõe, após esta parte inicial teórica e básica, a aplicação prática destes conceitos no desenvolvimento de projetos interativos.

OBJETIVOS

Apresentar conceitos básicos de Design de Interação, de Usabilidade e de Design Centrado no Usuário. Proporcionar aos alunos uma visão do processo de desenvolvimento de produtos interativos, onde deve ser levado em conta o usuário, o objeto (sistema ou produto) a ser desenvolvido e o ambiente onde ocorrerá a interação. Estes aspectos devem ser levados em consideração de forma a complementar a noção acerca dos objetivos do desenvolvimento do produto em si.

A QUEM SE DESTINA

Profissionais que tenham contato e/ou experiência com o desenvolvimento de produtos interativos (multimídia ou web) e desejam atualizar-se de maneira rápida e fundamentada nos conceitos de Design de Interação, levando-se em conta o usuário e os aspectos de usabilidade. Graduados nos cursos de ciência da computação, sistemas de informação, desenvolvimento e engenharia de sistemas, comunicadores, publicitários e designers.

CONTEÚDO DO CURSO

Fundamentos de Design de Interação;
Design Centrado no Usuário;
Usabilidade;
Projeto Interativo

CARGA HORÁRIA

120 horas

METODOLOGIA

O curso será desenvolvido pela Internet e os alunos contarão com o apoio dos professores e de tutores. A concepção de ensino-aprendizagem adotada respalda-se na interação entre os participantes do curso (aluno-professor, aluno-aluno, tutor-aluno). Essa interação pode ser sincrônica, por meio de chats, ou assincrônica, no ambiente virtual específico do curso. O material didático inclui CD-ROM, textos básicos e Manual do Aluno, guia que contém orientações para a navegação no sistema. Durante o desenvolvimento do curso, os alunos deverão fazer as leituras indicadas e realizar as tarefas propostas, dentro de prazos previamente estabelecidos em cronograma.

CERTIFICAÇÃO

Para receber o certificado do curso de atualização o aluno deverá completar todas as atividades propostas pelos professores conforme cronograma do curso.

BENEFÍCIOS

Horário flexível, respeitado o cronograma das atividades e o prazo limite estabelecido para a conclusão do curso
Possibilidade de realização do curso em casa ou em local de trabalho
Atendimento individualizado
Material didático básico elaborado para o curso e, em parte, incluído no valor total do investimento.
Suporte tecnológico durante todo o período de realização do curso

REQUISITOS TECNOLÓGICOS

O aluno deve possuir ou ter acesso a computador com a seguinte configuração mínima: Processador Pentium III – 500 MHz (recomenda-se Pentium 4 – 2 GHz), 256 MB de memória RAM (recomenda-se 384 MB);
Drive de CD-ROM 8X;
Placa de vídeo configurada para 800 x 600 pixels e 256 cores (recomenda-se 1024 x 768 pixels e 65.536 cores/16 bits);
Placa de som com caixas acústicas (ou fones de ouvido) e microfone;
Windows 2000 (SP4) ou XP (SP2);
Microsoft Internet Explorer (versão 6.0x ou superior);
Máquina Virtual Java (Java Runtime Environment ) da Sun Microsystems (versão 1.4.2 ou superior);
Acesso à Internet, com velocidade mínima de conexão de 56 kbps ;
Correio eletrônico pessoal (e-mail).

Obs.: “O portador de necessidades especiais no campo da visão deverá possuir ou ter acesso a um programa ( software ) de leitura de tela, compatível com Windows 2000 (SP4) ou Windows XP (SP2), que deverá estar instalado no computador que será utilizado para acompanhar o curso.”

REQUISITOS ACADÊMICOS

Entrega da documentação exigida na Secretaria Acadêmica da PUC Minas Virtual conforme endereço divulgado.
Cópia de documento de identidade de valor legal e do CPF (não precisa ser autenticado).
Curriculum Vitae (sucinto).
Cópia do boleto de pagamento da Matrícula (1ª parcela do curso)

APÓS FAZER A SUA INSCRIÇÃO PELA INTERNET, envie os documentos por correio à PUC Minas Virtual com a identificação do curso e do nome do aluno: PUC Minas Virtual A/C: Secretaria Acadêmica Rua Espírito Santo 1059, 12º andar Centro CEP: 30160-922 – Belo Horizonte, MG

SELEÇÃO

A seleção será feita com base na análise do histórico escolar, do curriculum vitae e da exposição de motivos apresentados pelo candidato.

INSCRIÇÕES ATÉ 05/09/2010

DURAÇÃO DO CURSO

Outubro/2010 a Março/2011

MESES X MENSALIDADE = VALOR TOTAL

6 x 200,00 = 1.200,00

COORDENAÇÃO ACADÊMICA

Simone Alves Nogueira

Importante: Este curso, por ser da modalidade de Atualização, pode ser feito por graduandos e graduados! Para mais informações, acesse o site da PUC Minas Virtual

O que é?

Os cursos de atualização propõem a complementação, a ampliação e a atualização de conhecimentos teórico-práticos em áreas específicas, permitindo ao aluno a continuidade e o aprofundamento dos estudos.

Eles são ofertados em módulos de curta duração, com certificação específica de cada área. Podem ser cursados por alunos da graduação e têm validade como Atividade Complementar de Graduação.

LINK para o CURSO

Poderíamos listar uma dúzia de outras coisas as quais os visitantes de um site não deveriam perder o tempo pensando, como:

Onde estou?

Onde devo começar?

Quais são as coisas importantes nesta página?

Por que eles deram este nome a isto?

A coisa mais importante que devemos fazer, ao estar construindo um site, no processo de Arquitetura de Informação e o Wire-frame, simplesmente, é compreender o princípio básico de eliminar perguntas.

Se fizermos isso, começaremos perceber tudo aquilo que nos faz pensar na Web, e vamos acabar aprendendo a reconhecê-los e evitá-los nas páginas que estiver criando.

Não é possível deixar tudo evidente. (KRUG, 2006, p.7)

O nosso objetivo, eu poderia dizer “Obrigação”, precisamos fazer (criar) páginas claras, de forma que apenas olhando-a o usuário comum saiba o que ela é e como usá-la.

Se estamos fazendo algo original ou pioneiro ou algo muito complicado, temos que estabelecer um relacionamento com a página auto-explicativo. Nesta página é preciso de um raciocínio para entendê-la. Mas, não esqueçamos de sempre questionarmos o que estamos fazendo e se possível aplicar testes de usabilidade para verificar a COGNIÇÃO do usuário.

Aparência, nomes, a organização da página e a pequena quantidade de textos, devem trabalhar juntos para criar um reconhecimento quase instantâneo… USABILIDADE na Página. Se não conseguimos neste projeto pioneiro tornar a página clara, precisamos alcançar pelo menos uma página auto-explicativa.

Por que isso tudo é importante?

“Na internet, os competidores estão sempre a um clique de distância, de modo que, se você frustrar os usuários, eles irão para outro lugar” (KRUG, 2006, p.7)

Um mal site, o usuário se frustra. A culpa disto não é o usuário que não sabe navegar, mas sim de quem construiu o site. Já o grande Jakob Nielsen diz a nós uma frase muito importante:

“…Se as pessoas não puderem ou não utilizarem um recurso no seu site, ele pode muito bem não existir.”

A possibilidade de começar tudo de novo não é sempre atrativa… cuidem de fazer um site exato.

As páginas claras, faz com que tudo pareça melhor. Não fazendo as pessoas pensarem faz com tudo seja melhor para todos… Usuários e Sites. A eficácia é sempre uma ótima meta para os designers.