1

Ideia geral do que trata o captulo 6 do livro. Lembrando que todo o livro trata o assunto usabilidade e os captulos so sequenciais. J vimos nas apresentaes anteriores, assuntos como: a experincia do usurio na web, descobertas iniciais de usabilidade na web, problemas de usabilidade e no ltimo seminrio, busca.

O livro descreve experincias feitas por usurios (estudo). O maior problema para os usurios foi a dificuldade de encontrar o que procuravam.

Embora a rea de pesquisa tenha sido a questo individual de design mais problemtica (Busca: tema do seminrio anterior), quatro outras reas que, coletivamente foram chamadas de capacidade de localizar, causaram ainda mais dificuldades.

Ideia geral do que trata o captulo 6 do livro. Lembrando que todo o livro trata o assunto usabilidade e os captulos so sequenciais. J vimos nas apresentaes anteriores, assuntos como: a experincia do usurio na web, descobertas iniciais de usabilidade na web, problemas de usabilidade e no ltimo seminrio, busca.

O termo Arquitetura de Informao - AI - foi criado em 1976 por Richard Saul Wurman, na tentativa de evitar a ansiedade de informao que j existia quela poca. Arquitetura de Informao (IA Information Architecture), isto , como o espao das informaes estruturado determinam a facilidade de encontrar coisas clicando nos links de um site, em oposio ao uso direto de uma busca. Qualquer material, seja ele impresso ou digital, precisa ser concebido com princpios que considerem as limitaes e capacidades humanas para compreender e utilizar a informao. Certamente todos ns j passamos por dificuldade para encontrar alguma informao ou compreender uma estrutura de dados em livros, na internet ou aplicativos diversos como softwares, caixas eletrnicos, mquinas de vender, entre outros. A arquitetura da informao est associada com uma srie de elementos estruturais.

Arquitetura de informao - uma estratgia que permite estabelecer relaes adequadas entre pedaos de informaes, de forma que seja possvel resgat-las e utiliz-las de forma simples. No livro Information Architects, Wurman e outros autores apresentam exemplos de aplicao da nova rea que vai desde um simples mapa de metr, mapa de museu, imagens de diagnstico mdico, at um website. Portanto, possvel concluir que a AI no nasceu com a Internet, mas se encaixa perfeitamente a ela, como podemos ver nas quatro definies apresentadas por Rosenfeld e Morville (2006, p. 4): - O design estrutural de ambientes de informao compartilhada; - A combinao de organizao, rotulagem, pesquisa e sistemas de navegao em sites e Intranets; - A arte e a cincia de dar forma a produtos de informao e experincias para apoiar a usabilidade e encontrabilidade, e - Uma disciplina emergente e comunidade de prtica focada em trazer princpios do design e da arquitetura com a paisagem digital. Complementando, seria interessante apresentar e definir os trs pilares, (FIGURA 1), que sustentam a rede de conhecimento e, consequentemente, a AI e sua compreenso, segundo Rosenfeld e Morville (2006, p. 24): Usurios suas necessidades, hbitos, comportamentos e tarefas; Contexto cada organizao tem suas necessidades, especificidades e

particularidades, e Contedo documentos, dados, aplicativos, multimdias, e outros tipos que podem surgir no futuro Esta trinca nica para cada website. Quase um DNA. E a Arquitetura de Informao vem justamente equilibrar estes pilares, conforme mostra a figura 1, para que o usurio encontre no tempo e caminho correto a informao que procura. No projeto de websites, a Arquitetura de Informao responsvel pela modelagem da estrutura organizacional da informao, afim de oferecer uma melhor qualidade na categorizao e na navegao do usurio. Rosenfeld e Morville (2006, p. 49) ainda dividem as atividades da Arquitetura de Informao em quatro grandes sistemas, que sero explicitados nos prximos tpicos e correlacionados suas aplicaes em websites. Organizao agrupa e organiza todo contedo informacional; Busca lista as perguntas que o usurio pode fazer e as respostas que podem ser obtidas; Rotulagem define como ser a representao da informao com signos para cada segmento, e Navegao define os caminhos que o usurio ir percorrer.

Para definir estratgias adequadas de navegao e busca da informao necessrio definir como e quais componentes permitiro a visualizao e as aes para acesso s informaes e funcionalidades. O resultado disto a interface, que s ser concebida com sucesso se atividades como conhecer o usurio, o negcio e o contexto, alm da organizao de elementos informacionais e da definio dos modelos de interao forem respeitados. A pirmide metaforicamente chamada de iceberg para explicar que a INTERFACE apenas a parte visvel e que todas as atividades da arquitetura de informao esto abaixo da linha dgua. Antes de definir diagramas ou mapa de navegao necessrio entender o negcio e saber quais informaes, servios e processos devero ser consideradas no diagrama de navegao. As pesquisas do incio ao projeto de arquitetura de informao, pois permitiro a criao de estratgias e se convertero, posteriormente, em um projeto. A pesquisa fundamental para promover um entendimento contextual do negcio e abrir espao para a criao de estratgias. So atividades paralelas conhecer o usurio e o contexto de uso do produto. Devem ser considerados na etapa de PESQUISA o entendimento dos seguintes aspectos: Contexto: Entendimento dos objetivos e das questes polticas que podero direcionar ou reger o produto. Fazem parte desta etapa entender cronogramas, recursos humanos, infraestrutura tecnolgica, questes culturais e financeiras. Esta tarefa tem suporte na realizao de reunies para apresentaes iniciais, reconhecimento do contedo, entendimento das tecnologias de informao e

entrevistas com os stakeholders. Contedo: Compreender estruturas e significados dos contedos. Evolve estudos detalhados de documentos existentes (dados, aplicaes, imagens, vdeos, arquivos diversos) e, quando trata-se do re-projeto de um produto, podem ser feitas avaliaes heursticas. Mapas de contedos podem ser desenvolvidos para um entendimento conceitual do negcio (envolve fonte, modelo e tipo de contedo). Usurios: Faz parte entender suas necessidades e comportamentos das mais diversas formas, seja entrevistando ou observando. Mas faz parte tambm associar avaliaes das mais diversas formas, incluindo os testes de usabilidade. melhor fazer 5 entrevistas e 5 testes de usabilidade do que fazer um nico teste 10 vezes. Melhoria de produtos existente podem contar com tcnica de anlise para medir estatsticas de acesso, de uso ou de venda. Cabe aqui o uso de card sorting para iniciar o envolvimento dos usurios nas atividades entendimento dos contedos e suas hierarquias. A etapa de ESTRATGIA na arquitetura de informao conceber um framework conceitual de alto nvel para a definio da estrutura e da organizao do website. Isto ocorre a partir dos resultados alcanados na pesquisa que estudou o usurio, contexto e contedo. As atividades iniciam com a formao de ideias. E isto deve acontecer da forma mais conveniente para o projetista (utilizando papel e caneta, discutindo em equipe, pensando sozinho). O processo continua com a articulao das ideias e suas representaes traduzidas em notas, diagramas e esboos. Mas importante no utilizar softwares visuais para esta tarefa para no comprometer a gerao de ideias. Eles fazem perder tempo e energia com solues bem elaboradas visualmente e suas formataes, mas comprometem o foco do desenvolvimento das ideias. A comunicao destas ideias devero ter, no entanto, um formato adequado para que sejam compreendidas. So vrias as formas possveis: esquemas organizacionais, rotulao, cenrios, metforas, wireframes. Veja como usar alguns formatos de apresentao: Metforas: Uma forma interessante de persuadir, entusiasmar e convencer, pois utiliza modelos conhecidos para comunicar as ideias, principalmente as complexas. Podem ser classificadas em trs tipos: a) metforas organizacionais (similaridade na organizao), 2) metfora funcional (similaridade no uso) e 3) metfora visual (similaridade grfica e de elementos). Cenrios: Ajudam a comunicar a ideia por meio de uma visualizao do problema com mais entusiasmo. uma forma demonstrar a experincia do navegando e utilizando o produto, o que resulta na gerao de novas ideias. Para criar cenrios considere uma descrio detalhada que responda s seguintes questes: Quem so as pessoa que utilizaro o site? Por qu e como eles vo querer usar? Eles estaro com pressa ao explorar o site? Depois tente escolher 3 usurios principais com perfis bem diferentes. Crie um personagem para cada e lhe d nome, profisso, e uma razo para visitar o site. Depois comece a descrever o processo de uso de pedaos do site ou software.

Diagramas conceituais: So imagens de conceito abstrato sobre a utilizao ou estrutura do software. Plantas (blueprints) e Wireframes: As plantas, ou blueprints, mostram as relaes entre pginas e outros componentes e os wireframes mostram rascunhos visuais das telas com contedos e links das principais pginas. So verses de baixa nvel nesta etapa. As verses de alto nvel sero desenvolvidas na documentao. Relatrios de estratgia: uma forma de integrar os resultados alcanados at aqui: anlises e ideias. Ajuda a cortar grandes ideias, mas que no cabem no projeto. O relatrio apresentado de forma descritiva e deve conter ndice que oferecer uma idia geral do contedo. Apresentaes: Forma eficiente de resumir todas as ideias apresentadas no longo relatrio que dificilmente ser lido integralmente. Consiste em condensar as principais ideias para uma apresentao objetiva e clara.

Ufa! Depois de todo esse conceito srio e complexo, um momento de descontrao.

10

Extrado de "Ergodesign e Arquitetura de Informao" - Luiz Agner

11

Apesar de todos os elementos envolvidos, o foco deve ser sempre no USURIO

12

13

Card Sorting Mtodo de usabilidade que objetiva levantar como usurios do pblico-alvo agrupam informaes de forma que sejam teis para eles, possibilitando que sejam criadas estruturas de organizao de informao otimizadas e mais adequadas ao modelo mental dos usurios. O card-sorting uma tcnica usada por arquitetos da informao para descobrir como o usurio classifica determinada informao em sua mente

14

Sitemap Mostram as relaes entre pginas e seus contedos Sitemaps oferecem um esquema de navegao que parte de um contedo principal e j mostra a grandiosidade do projeto, o arquiteto de informao atravs de um sitemap j consegue rotular sees e consequentemente agrupar o contedo de maneira lgica e funcional. Existem softwares como o Visio e o OmniGraffle que servem para desenhar fluxogramas e so timos para arquitetar sitemaps.

15

Wireframes Wireframes servem a um propsito diferente: eles mostram como uma pgina deve parecer de uma perspectiva arquitetnica. Wireframes so a interseco entre a arquitetura da informao do site e o design e visual do mesmo. O wireframe fora o arquiteto a considerar onde as navegaes estaro na pgina, onde o usurio vai navegar e sobretudo o que ele vai ver naquele espao. O wireframe no tem como funo travar o trabalho do designer.

16

17

18

Bases: O conceito de design responsivo no uma grande novidade, mas tem chamado bastante ateno nos ltimos tempos com o crescimento do mercado de dispositivos mveis, principalmente por conta dos tablets e celulares de tamanhos e resolues cada vez mais variadas. Neste novo contexto dos navegadores e vrias resolues, o design responsivo surge como uma evoluo lgica do design de sites, tambm conhecido como web design. Antes grande parte da internet era acessada por resolues e navegadores muito semelhantes. At pouco tempo atrs bastava fazer um site que funcionava em Internet Explorer com resoluo mxima de 1024768 pixels que tudo estava resolvido, claro existiam outras caractersticas, mas a grande maioria estava nesse mesmo grupo no mximo havia os usurios de Mozilla Firefox. Hoje tudo mudou, temos TVs de 50 polegadas acessando internet, temos celulares que tem telas de 2 at 5, tablets de 6 at 11 polegadas e sem contar os prprios computadores, que tem telas de netbook at os mais novos iMacs da Apple, colocando uma margem de 11 at 26 polegadas. Esta caracterstica demonstra que um site pode ser visto de diversas formas e em diversos contextos, e para isto que os sites devem estar preparados. O design responsivo, como o prprio nome j indica, consegue responder ao tamanho da tela para se adequar da melhor forma. Ao invs de criar dois sites separados, um para mobile e um para desktops, como era muito comum hoje, voc faz apenas um site que vai se adaptar muito bem a qualquer tela em que ele for carregado.

19

Voc faz um site responsivo ou vai fazer dez sites diferentes Uma das principais vantagens do design responsivo tambm se torna um grande problema para as agncias digitais. Se voc quer que o seu site esteja adaptado aos celulares, smartphones, tablets, notebooks, desktops e TVs, voc provavelmente teria que fazer pelo menos 5 sites diferentes. A evoluo do design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter diversos sites para um s lugar. Mas esta facilidade de adaptao tambm cria um problema para as agncias digitais e todos aqueles profissionais que trabalham no desenvolvimento de sites. Como cobrar um site com design responsivo? Voc deve somar o valor de vrios servios ou deve ter um valor diferenciado? Voc deve oferecer design responsivo em pacotes diferenciados onde cada um tem foco em certos dispositivos?

19

Exemplificando

20

O site www.escaladesports.com o primeiro case do captulo. Embora essa seja uma nova verso, a estrutura continua a mesma, ento achei vlido usar como exemplo. Explicao: o site vende produtos como, por exemplo, mesas e bilhar e tabelas de basquete. No entanto, para chegar at os produtos em si, o usurio deve escolher a marca. Nos prximos slides esto as telas que o usurio passa para chegar at as mesas de bilhar da marca Mizerak.

21

Aqui a continuao da tela da homepage, somente para demonstrar que todo ele em funo das marcas e no dos produtos.

22

23

24