bibliografia

Diversas ferramentas 0800 (ou quase) para criar wireframes e protótipos

Balsamiq: Ferramenta de prototipação (tela)

Nos últimos dois anos, surgiram rapidamente, aqui e ali, uma série de boas ferramentas especializadas e acessíveis, para auxiliar o trabalho do arquiteto de informação e do designer de interfaces, muitas delas free. Concorrem com os bam-bam-bans Axure e Visio.

Para quem está começando a se familiarizar com o campo, são uma mão-na-roda. Aqui vai a lista de links para lugares de onde estas novas ferramentas podem ser baixadas, instaladas como plug-ins, ou até utilizadas online:

- Blasamiq Mockup – Free para SFL*
- Pencil – Free.
- Prototype Composer – Free.
- WireframeSketcher – Free para SFL.
- iPlotz – Free ou $15/mês.
- Protonotes – Free online.
- Adobe Flash Catalyst – Free beta.
- Hot Gloo – Free beta online.

As tradicionais:
- Axure – $589.
- Omnigraffle – $100.
- Microsoft Visio – $200.

E não esquecer a possibilidade de usar o Fireworks.

Artigo completo(em inglês):
http://www.uxforgood.org/blog/free-wireframing-and-prototyping-tools-for-ux-professionals.html

-
* SFL – Sem Fins Lucrativos

arquitetura de informação
bibliografia
design
tecnologia
usabilidade

Comments (4)

Permalink

Eye-tracking, percepção, criatividade e o fracasso dos banners publicitários

O anúncio do próximo livro de Jakob Nielsen sobre eye-tracking, que vai sair em agosto, e um papo com o Luis Rocha, da WebDesign, me levou a escrevinhar algumas considerações sobre esta moderna técnica de pesquisa, e suas relações com a teoria da percepção, a criatividade, os testes tradicionais de usabilidade etc.

Na prática, é difícil analisar a comunicação interativa com base nos princípios estabelecidos para descrever a comunicação tradicional. A psicologia da Gestalt procurou estabelecer princípios universais aplicados à percepção visual que descrevem como ocorre o fenômeno perceptivo nos seres humanos.

Os princípios da percepção mostram que as pessoas procuram padrões em tudo que observam. Elementos similares têm, para fins de percepção visual, o mesmo grau de importância. Assim, o reconhecimento de padrões implica o discernimento de semelhanças e de diferenças entre os elementos percebidos. Os elementos que mantém semelhança visual entre si – de cor, de forma, de alinhamento, direcionamento, movimento ou outra característica – passam a constituir uma mesma unidade perceptiva.

Atualmente sabe-se que este agrupamento também pode se dar devido a fatores culturais. Isto acontece quando resultados da pesquisa de eye-tracking indicam que os usuários inconscientemente evitam as fontes extravagantes, banners coloridos e animações, pois seriam associados culturalmente a mensagens publicitárias.

O processo de agrupamento visual também pode acontecer quando há conjuntos destacados de opções na homepage, gerando distintas taxonomias no modelo mental do usuário.

Nesse sentido, suponho que alguns princípios da Gestalt continuam válidos até os nossos dias, nas telas de computador, como a semelhança, a proximidade, a continuidade, o fechamento, a busca do equilíbrio etc.

Esses princípios possivelmente determinam o comportamento ocular dos usuários, descoberto pelos estudos de eye-tracking, como o de que grandes blocos de texto são evitados, listas mantém a atenção do leitor, e o espaço branco e a coluna única são boas opções de projeto. Mas por enquanto essa relação de causa e efeito pode ser considerada apenas uma hipótese.

O design de ambientes digitais, como websites, na maior parte das vezes trabalha com as características e limitações das capacidades cognitivas humanas. E muitas vezes os projetos são fortemente impactados por estas limitações.

É o caso de interfaces que envolvem questões de segurança e os ambientes virtuais de aprendizagem, por exemplo. A área de estudos faz parte da Ergonomia Cognitiva. Um dos recursos empregados pela Ergonomia na coleta de dados empíricos e no teste de hipóteses é o método experimental.

Esse método, a exemplo do eye-tracking, implica a elaboração de um conjunto de procedimentos para o registro do desempenho humano durante a tarefa. Os experimentos com o emprego do eye-tracking configuram uma das melhores oportunidades, ao alcance dos profissionais e pesquisadores, para se aplicar o método científico para fins de avaliação de projetos de sites e ambientes digitais.

Por mais que se apóiem decisões em uma ou outra teoria, como a psicologia da Gestalt, estas são furadas se não possuírem dados empíricos que as sustentem. Daí a necessidade da coleta de dados e o teste de hipóteses. O objetivo é utilizar os dados experimentais para comprovação empírica e, se for o caso, corrigir o projeto antes que o custo de um retrabalho possa crescer.

Nesse sentido, em primeiro lugar, deve-se partir de hipóteses sobre como se daria a interação visual do usuário e de boas suposições sobre como esta interação pode ser convertida em retorno do investimento. Neste caso, o eye-tracking pode vir como técnica complementar ao teste de usabilidade tradicional. Isto sem dúvida impactará positivamente e contribuirá para o sucesso do projeto, seja uma escola virtual ou um site de comércio eletrônico.

Outras etapas de um estudo com eye-tracking devem envolver a definição de uma amostra adequada de participantes no experimento, que reflita com precisão o público-alvo. E o controle das variáveis para que as condições estejam controladas e os resultados do estudo possam ser validados cientificamente.

Ao monitorar a navegação visual dos usuários e seu esforço cognitivo, o eye-tracking fornece pistas para entender o seu pensamento, com ou sem a necessidade de verbalização. Os dados resultantes podem ser analisados estatísticamente e renderizados graficamente para evidenciar padrões. Não é possível inferir processos cognitivos específicos diretamente a partir de uma fixação do olhar. Por esta razão, eye tracking é combinado com outras metodologias de análise e a intermediação de um especialista em usabilidade é necessária.

Os resultados do eye-tracking devem ser implementados de forma complementar aos estudos tradicionais de usabilidade, como o teste formal, o “thinkaloud”, entrevistas ou o Quiz. Existem hoje equipamentos de eye-tracking discretos e não-invasivos. Mas é preciso não se criar uma idéia de supervalorização do eye-tracking como ferramenta de pesquisa, devido exclusivamente à sua aparência de sofisticação. Os diferentes métodos de avaliação se complementam e podem trazer bons insights qualitativos, mesmo aqueles mais simples como o card sorting.

A confrontação desses dados com as diretivas heurísticas dos autores consagrados como, por exemplo, Jakob Nielsen, nos auxiliam a determinar uma check-list para as modificações a serem efetuadas na interface. Esta check-list pode conter perguntas à equipe como: “nós estamos dando mais ênfase a textos do que imagens?”, “qual informação importante está situada na parte superior esquerda das páginas?”, ou “o tamanho das fontes está adequado à atitude de leitura requerida pelo conteúdo?”

Como tudo na informática, os equipamentos de eye-track vão se tornando com o tempo melhores e mais acessíveis. O perfil de projeto que se beneficia de um estudo como esse inclui aqueles em que a interpretação do conteúdo é crítica para execução das tarefas com baixa taxa de erros, em um intervalo de tempo relativamente curto.

Um exemplo são os sistemas de controle de vôo, os terminais de auto-atendimento de bancos e os sites financeiros. Além disso, podemos incluir a avaliação de publicidade on-line, comerciais de TV digital e até pontos de venda em supermercados e embalagens tradicionais. Se o site se apóia em faturamento da venda de banners, é importante realizar o estudo de eye-tracking para habilitar uma maior criatividade na localização ou tipo de anúncios.

Na minha opinião, estudos como o eye-tracking e outros, ao apontar o que realmente ocorre com os usuários na sua interação com os produtos, abrem um campo criativo enorme ao design, desafiando-o a solucionar problemas com base em fatos concretos e não em pressuposições corriqueiras baseadas no senso comum das equipes e do cliente.

Por exemplo, ao demonstrar que os leitores online ignoram banners, focando neles apenas por uma fração de segundos, esses estudos desafiam todos os designers e comunicadores a sermos mais criativos e a respeitar os limites cognitivos dos usuários. Por exemplo, criando bons anúncios textuais e posicionando-os próximos ao conteúdo relevante, sem irritar os usuários com ações não solicitadas por eles.

Na verdade, a galera adora bolar coisinhas engraçadinhas para receber prêmios, mas, como o eye-tracking comprova, essas ações muitas vezes não são convertidas em cliques ou vendas, e não proporcionam o retorno do investimento. Além disso, sabe-se que os usuários gastam muito tempo procurando botões e menus. Os links de navegação precisam de um design bem feito, e este é outro desafio criativo colocado pelos estudos de eye-tracking aos designers.

-

Para saber mais, fique de olho neste lançamento:
Eyetracking Web Usability , de Jakob Nielsen e Kara Pernice (sai em agosto).

Este outro livro, é voltado para a mídia impressa:
Eyetracking the News: a study of print and online reading - de Sara Quinn, Pegie Stark, Rick Edmonds – The Poynter Institute

Estudo clássico na Web:
Eyetracking the News (Poynter Institute)

bibliografia
ergodesign
testes
usabilidade

Comments (0)

Permalink

Livro sobre cardsorting

O aguardado livro de Donna Spencer sobre Card Sorting, editado pela Rosenfeld Media, já saiu da gráfica e pode ser baixado para degustação por aqui. Em breve, à venda com desconto direto da editora. A Rosenfeld Media está preparando uma série de outros títulos específicos sobre AI, que incluem prototipação, storytelling e pesquisa remota, entre outros.

arquitetura de informação
bibliografia
usabilidade

Comments (0)

Permalink

AI: Ferramentas de prototipação, análise de tarefas e logs

Merlin – Kmade
A ferramenta KMADE apóia a edição e análise de árvores hierárquicas de tarefas e pode ser baixada gratuitamente no site do Projeto Merlin (Methodes pour lÉrgonomie des Logiciels Interactifs), mantido pelo INRIA (Institut National de Recherche en Informatique et en Automatique).
http://www-rocq.inria.fr/merlin/kmade/

Denim
Para a prototipagem e modelagem de websites, a ferramenta Denim é uma alternativa e pode ser obtida gratuitamente no site da Universidade de Washington. Suporta os designers nos estágios iniciais do projeto de um sistema, com diferentes níveis de refinamento nos sketches.
http://dub.washington.edu/projects/denim

16 Ferramentas de Prototipagem
Link de um artigo que apresenta e analisa 16 ferramentas para prototipagens e wireframes de sites, todas com seus preços, inclusive algumas gratuitas ou 30 dias. Com os respectivos links.
http://www.sitepoint.com/article/tools-prototyping-wireframing/2/

Wireframes
Este é um blog com inúmeros exemplos de wireframes, modelos e de sketches (até de papel e lápis). É a base do projeto da ferramenta FLUIDIA (http://www.fluidia.org/) em desenvolvimento para a prototipação de interfaces com o usuário.
http://wireframes.linowski.ca/

UseMonitor
Pretende ser a primeira ferramenta de análise de logs voltada para a produção de medidas de usabilidade: UseMonitor. Implementa a análise de dados de log segundo uma abordagem orientada a tarefas. Em desenvolvimento da versão beta.
http://www.labiutil.inf.ufsc.br/testeUsemonitor.html

arquitetura de informação
bibliografia
download
tecnologia
usabilidade

Comments (0)

Permalink

Segunda edição na pista

Capa da 2a. edição do livro “Ergodesign e Arquitetura de Informação”
Capa da segunda edição criada por Bruno Porto.

Até que enfim saiu a segunda edição do meu livro “Ergodesign e Arquitetura de Informação“, que está disponível na Loja Virtual da Editora Quartet e, em breve, estará sendo distribuído às demais livrarias e lojas online. Também já pode ser encontrado na Livraria do Museu da República, na Rua do Catete, no Rio. Esta edição tem mais duas seções que não apareceram na primeira: uma sobre cardsorting e outra sobre os componentes da AI. É indicado para os que estão se iniciando agora no tema.

Ergodesign e Arquitetura de Informação – trabalhando com o usuário
Autor : Luiz Agner
Editora : Quartet
Edição : 2ª – 2009
Classificação : Comunicação
ISBN : 978-85-7812-017-7
Formato : 14 x 21 cm
Páginas : 196 p.

arquitetura de informação
bibliografia
ergodesign
luiz-agner
meu livro
usabilidade

Comments (1)

Permalink

Baixar a minha tese da PUC sem senha…

Um link secreto para baixar a minha tese direto do site da PUC, sem senhas nem logins. Tudo liberado. Anote aí: http://www.maxwell.lambda.ele.puc-rio.br/cgi-bin/db2www/PRG_0651.D2W/SHOW?Mat=&Sys=&Nr=&Fun=&CdLinPrg=pt&Cont=11195:pt :)
-
Agner, Luiz; Moraes, Anamaria (Orientador). Arquitetura de Informação e Governo Eletrônico: Diálogo Cidadãos-Estado na World Wide Web – Estudo de Caso e Avaliação Ergonômica de Usabilidade de Interfaces Humano-Computador. Rio de Janeiro, 2007. 354p. Tese de Doutorado – Departamento de Artes e Design, Pontifícia Universidade Católica do Rio de Janeiro.
-
Agner, Luiz; Moraes, Anamaria (Advisor). Information Architecture and E-Government: Citizens-State Dialogue on the World Wide Web – Case Study and Ergonomic Evaluation of Human-Computer Interface Usability. Rio de Janeiro, 2007. 354p. Doctorate Thesis – Departamento de Artes e Design, Pontifícia Universidade Católica do Rio de Janeiro.

arquitetura de informação
bibliografia
luiz-agner
tese
usabilidade

Comments (1)

Permalink

Bibliografia de cibercultura

Alex Primo, professor do Programa de Pós-Graduação em Comunicação e Informação da UFRGS e autor de Interação Mediada por Computador e Comunicação e Interações, acaba de por no ar um blog só sobre bibliografia da cibercultura. Sua lista aborda temas que cobrem desde a cibercultura/contracultura, até as redes sociais online, passando por hipertexto, webdesign, web 2.0, jornalismo online, inteligência coletiva e interação humano-computador. Mas o autor avisa que não se trata de uma lista bibliográfica exaustiva e sim sugestões para o início de uma pesquisa.

Confira em :
bibliografiadecibercultura.com

bibliografia

Comments (2)

Permalink

Fundamentos do grid

Publico aqui a apresentação sobre grids realizada na UniverCidade, no curso de Desenho Industrial, com base nos conceitos emitidos por Timothy Samara.

bibliografia
design

Comments (0)

Permalink

Grids para o design de interação

Capa de “Grids: Construção e Desconstrução” de Timothy Samara

A revista WebDesign, publicação impressa da Arteccom, é o principal veículo de comunicação sobre o design para web no país. Apresenta mensalmente artigos, entrevistas e reportagens sobre a criação e o desenvolvimento de projetos interativos. A WebDesign deste mês publicou uma matéria de capa sobre a discussão do emprego de grids em projetos para a web. Participaram os designers João de Souza Leite, professor da ESDI e da PUC-Rio, José Ricardo Cereja, coordenador da Infnet, Marcelo Gluz, gerente da Globo.Com, Evelyn Grumach, da EGDesign, entre outros. Todo o debate girou em torno dos conceitos do clássico livro “Grids: Construção e Desconstrução” de Timothy Samara, recém-publicado no Brasil.

Convidado pelo diretor de redação Luis Rocha a participar da matéria, me animei a registrar reflexões sobre este interessante tema que tem perpassado toda a história do Design no séc. XX, e pontuado algumas de minhas aulas na UniverCidade. Abaixo, elas são reproduzidas na sua íntegra:

-

Função do grid – Segundo Timothy Samara , todo trabalho de design pressupõe a solução de problemas visuais e organizativos. As ilustrações, fotos, símbolos, massas de textos, chamadas, subtítulos, gráficos, links e botões devem ser reunidos para transmitir a informação e facilitar as tarefas do usuário. O grid é a maneira racional de juntar todos esses elementos. A função do grid é introduzir uma ordem sistemática num leiaute e permitir que o designer diagrame com eficiência uma grande quantidade de informação. Também permite vários colaboradores num mesmo projeto.

Vantagens - A principal vantagem da utilização do grid em projetos interativos é permitir a consistência visual da interface ao longo de todas as suas telas. Esta é uma característica fundamental, pois se relaciona diretamente a um importante princípio heurístico da usabilidade, defendido por diversos pesquisadores da área como Ben Shneiderman e Jakob Nielsen.

Grid no projeto de interação – O grid para a construção de um projeto interativo deve preferencialmente trabalhar com uma abordagem líquida, permitindo flexibilidade para apresentação da informação em diversas resoluções e diferentes dispositivos de acesso . Deve ser orgânico na ordenação dos elementos e da informação. A largura e altura das colunas podem variar, por exemplo, e o usuário poderá habilitar um corpo maior para o texto, para o seu maior conforto de leitura, causando um natural deslocamento do conteúdo. Nesse sentido, um grid hierárquico é o mais adequado para a web, pois permite a padronização das áreas de exibição com mais flexibilidade.

Elementos do grid - Os elementos principais de um grid para um projeto interativo são aqueles que permitirão acomodar com naturalidade os sistemas clássicos de navegação embutidos no conteúdo dos websites: a navegação global, local, e a contextual. Sem estas características elementares não há boa arquitetura de informação.

Grid hierárquico – Apesar de o grid hierárquico ser o mais adequado para as telas de sistemas interativos na web, acredito que, no limite, qualquer tipo de grid possa ser empregado com sucesso, inclusive uma combinação deles em diferentes subsites. Mas note que o conteúdo dinâmico dos sites e o redimensionamento das janelas exigem flexibilidade e desencorajam uma abordagem modular estritamente tradicional.

Violação do grid - Na web, com suas diversas camadas, há inúmeras oportunidades de o designer superar as regras clássicas do grid, desconstruindo-as a partir do uso de técnicas de programação como CSS, Action Script e Ájax. Inclusive pode-se colocar nas mãos do usuário a decisão final sobre a apresentação visual da informação na tela, permitindo-lhe a distribuição dinâmica dos blocos de conteúdo através do grid ou fora dele. O único limite existente para este tipo de experimentação é o próprio usuário, acredito eu, pois a “violação” das características tradicionais de um grid só tem sentido na medida em que colocar maior controle sobre a apresentação do conteúdo nas mãos do usuário, facilitando as suas tarefas. Em resumo, o limite é a usabilidade e encontrabilidade da própria informação.

Grids X criatividade – Não penso que seja um problema somente de tecnologia. Você também pode utilizar tecnologias interessantes como CSS e abordagem tableless para criar um projeto monotonamente cansativo e pouco inovador. A web está ficando mais madura, e nossas relações com ela estão mudando, entretanto as oportunidades de inovação e de criatividade muitas vezes são bloqueadas por limitações não nossas, ou da tecnologia em si, mas dos clientes, ou do modo tradicional como a maioria das empresas é administrada. Estas, muitas vezes, trabalham com expectativas preconcebidas sobre o resultado gráfico a ser alcançado. Ainda há muitos economistas, engenheiros e advogados aprovando os projetos de design lá no lado dos clientes.

Usabilidade do grid – Outro desafio é que, ao desconstruir os grids previsíveis, os designers são desafiados a manter a facilidade de uso com layouts que destoam do que estamos acostumados. A adequada análise das tarefas do usuário e da encontrabilidade da informação, neste caso, é essencial. Isto poderá implicar uma maior necessidade de testes de usabilidade, e outras técnicas de projeto, como o card sorting, para garantir a boa arquitetura de informação.

bibliografia
design
luiz-agner

Comments (4)

Permalink

Design de interação

Os editores Keiichi Sato (Illinois Institute of Technology) e Kuohsiang Chen (National Cheng King University, Taiwan) do International Journal of Design estão pedindo artigos para um número especial sobre aspectos culturais do Design de Interação.

O Journal of Design é uma publicação de design em várias áreas – design industrial, comunicação visual, design de interface, design de animação e jogos, design arquitetônico e urbano. Entre seus objetivos está a troca de idéias e a publicação de descobertas de pesquisadores de diferentes culturas.

Mais informações: www.ijdesign.org/ojs/index.php/IJDesig

bibliografia
design

Comments (2)

Permalink