• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Curso Arquitetura de Informação @ iMasters Jan 2013
 

Curso Arquitetura de Informação @ iMasters Jan 2013

on

  • 2,976 views

Slideshow completo do curso.

Slideshow completo do curso.

Statistics

Views

Total Views
2,976
Views on SlideShare
2,850
Embed Views
126

Actions

Likes
19
Downloads
0
Comments
1

3 Embeds 126

http://samuelwiederkehr.tumblr.com 101
https://twitter.com 21
http://uxforthewin.tumblr.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Curso Arquitetura de Informação @ iMasters Jan 2013 Curso Arquitetura de Informação @ iMasters Jan 2013 Presentation Transcript

    • Introdução àArquiteturade InformaçãoUm pouco de história e princípios teóricos
    • Agenda do Curso Segunda. Terça. Quarta. Quinta. Sexta. Introdução Sistemas da AI Processo e Técnicas Processo e Técnicas Encerramento Parte 1 Parte 2 Definições Organização e Pesquisa Especificação Testes de História Rotulação Usabilidade Porque isso é importante Modelos Conceituais Navegação e Busca Concepção Implementação Mundo da AI UX Honeycomb
    • Sobre mimArquiteto de Informação na Gazeta do Povo – O principalJornal do Paraná.Mais de 5 anos na labuta.A maior parte deste tempo trabalhei na Agência Casa,onde coordenei a equipe de UX e desenvolvi projetos deestratégia de conteúdo e experiência do usuário, emdiversos tipos de plataformas como portais, aplicativos,campanhas, redes sociais, blogs e Intranets para clientescomo Infoglobo, Tecnisa, HSBC, Ford, Johnson & Johnson,Coca Cola, Unimed, o Boticário, Portobello, Buscapé,Bematech, entre outros.Meus projetos queridinhos são o redesenho do site doJornal Extra e do Globo, ambos no rio de Janeiro e dosquais provavelmente vou falar bastante.Jornalista formado na PUC-PR.Casado, fui até Ushuaia de Uno, estudo marcenaria noSENAI, montanhista vergonhosamente amador e gostariade morar no mato.Filósofo e músico todo mundo é, e eu também.
    • Definição de Arquitetura de Informação – Livro Urso 1. O design estrutural de ambientes de informação compartilhada. 2. A combinação de sistemas de organização, rotulação, busca e navegação em sites e intranets. 3. A arte e ciência de formatar produtos e experiências de informação  com  base  na  usabilidade  e  “encontrabilidade”. 4. Uma disciplina emergente e comunidade focada na prática de trazer princípios de design e arquitetura para o cenário virtual.
    • Mas o que eu Fazemos pesquisas para entender o usuário o cliente e os desenvolvedores, criamos protótipos e estruturas de conteúdo para definir soluções quedigo pro meu intermediam as vontades, necessidades e limitações de cada um e depois conferimos pra ver se tudo continua coerente durante o desenvolvimento dochefe? processo. Encontramos um ponto comum entre o que o cliente quer, o usuário precisa e o que dá pra fazer. Comunicamos isso da melhor forma possível para clientes e desenvolvedores para que os primeiros aprovem e os segundos executem da melhor forma possível. Defendemos a boa experiência do usuário através de uma boa arquitetura de informação e design de interação. Identificamos os meios mais eficientes de conectar os usuários com o que eles precisam. Definimos o melhor jeito de fazer um sistema que cumpra os objetivos do cliente, satisfazendo necessidades do usuário.
    • Mas o que eu Sou um Arquiteto de Informação. Eu organizo montesdigo pra minha enormes de informação em grandes sites e intranets para asVó? pessoas encontrarem o que estão procurando. Pense como se eu fosse um bibliotecário da internet. Sou um Arquiteto de Informação. Eu ajudo minha empresa a fazer com que seus clientes achem nossos produtos com mais facilidade no site. Eu sou um tipo de vendedor on-line. Eu aplico os conceitos de marketing, um por um, na internet. Sou um Arquiteto de Informação. Sou quem resolve o problema e excesso de informação do qual todo mundo reclama. Vó; eu trabalho com computador.
    • Definição interessante de dono desconhecido:O designer de experiência do usuário é um ponto deligação. Não é um especialista em um assunto, umdoutor, ou qualquer tipo de ser mágico. Nós nãotemos um conjunto de melhores práticas que podemser aplicadas automaticamente, nem temos todas asrespostas. Nossa maior habilidade deve ser a de quesabemos como ouvir.
    • História breve daArquitetura deInformação Aristóteles Orador – Discurso - Auditório Quem - O quê - Para quem? Arquitetura Do  grego:  αρχιτεκτονική Arché – αρχι  - Primeiro, ou principal Tékton – τεκτονική  - Construção Informação Do latim: informationis Delinear, conceber idéia.
    • Richard Saul Wurmanhttp://www.wurman.com/rsw/Usou  pela  primeira  vez  o  termo  “Arquitetura  de  Informação”  em  1976  no  livro  Ansiedade  de informação.Arquiteto especialista em design gráfico.
    • Louis Rosenfeld e Peter Morvillerosenfeldmedia.comsemanticstudios.com- Introduziram a Arquitetura de Informação nainternet.- Fundadores da primeira empresa a empregarconceitos de Arquitetura de informação nodesign de websites na empresa Argus em 1994.- Biblioteconomista e Cientista da Informação.
    • Por que isso é importante?- Custo de encontrar a informação- Custo de não encontrar informação- O valor da educação- O custo da construção- O custo da manutenção- Custo de treinamento- O valor da marca- Ganhar dinheiro, economizar dinheiro, melhorar asatisfação de seus empregados ou consumidores, ousó fazer do mundo um lugar melhor...
    • Porque os projetos dão errado: 1 Requerimentos mal definidos 2 Comunicação ruim entre cliente, usuário e desenvolvedores 3 Políticas de Stakeholdershttp://spectrum.ieee.org/computing/software/why-software-fails/0
    • 50%É a média do tempo gasto em refação nos projetos de TI.http://spectrum.ieee.org/computing/software/why-software-fails/0
    • 100XMais caro fazer alterações em um projeto finalizado.http://spectrum.ieee.org/computing/software/why-software-fails/0
    • 15%Dos projetos são abandonados depois deuma primeira entrega inadequada.http://spectrum.ieee.org/computing/software/why-software-fails/0
    • U$ 1.000.000.000.000 (É um trilhão, não se preocupe em contar os zeros.)Foram gastos em tecnologia de informação em 2010 porgovernos e organizações em todo o mundo.Para se ter uma idéia, foram gastos 1,5 trilhões na áreamilitar.http://spectrum.ieee.org/computing/software/why-software-fails/0
    • 83%É a média da melhoria dos KPI’s em projetoscom 10% do orçamento gasto em pesquisade usabilidade.http://spectrum.ieee.org/computing/software/why-software-fails/0
    • Aumentamos KPI’s - Conversões - Tráfego no site - Cadastros - Contatos de novos clientes - Vendas - Fatia de mercado - Transações - Taxa de sucesso em tarefas - Retenção - Produtividade - Pageviews - Uso do sistema - Visitas
    • Diminuímos KPI’s - Custos do projeto - Tempo de desenvolvimento do projeto - Custo de treinamento - Erros no uso do sistema - Tempo do usuário - Chamadas em help desk - Refações - Manutenção
    • Benefícios Subjetivos: - Satisfação do consumidor - Fidelização de clientes - Satisfação do cliente e de investidores - Percepção de valor da marca - Satisfação de funcionários - Clareza na comunicação - Facilidade de aprendizagem do sistema - Aumento da confiança do usuário - Eficiência na gestão de informação
    • Os empréstimos de pessoa física no Brasil em 2009 R$ 469 bi R$ 0,5 bi (7%) R$ 8,5 bi R$ 4,4 bi (52%)
    • O Spread Bancário de pessoa física em 2009 chegou a 26%. Mas vamos ser realistas e calcular o lucro dosempréstimos pela taxa mínima de juros do crédito parcelado automático que é de 3,93%
    • 4,4 Bilhões de R$ X 3,9 %R$175 milhõeslucro dos empréstimos feitos via ATM
    • Lembram que a média da melhoria dos KPI’s em projetos de UX é de 83% ? Vamos ser modestos, e imaginar que após um processo de redesenho de 6 meses, o número de empréstimo via ATM’s tenha aumentado 5%.
    • 175 Milhões de R$ X 5 % R$ 8,7 milhõesAumento do lucro dos empréstimos feitos via ATM depois do suposto redesenho.
    • Destes 8 milhões que o cliente ganhou, quantoserá que podemos cobrar pelo projeto ?
    • Fundamento da Arquitetura de InformaçãoModelo Conceitual de UCD - IDEO
    • Modelo – Urso Polar - Usuário, Contexto, Vídeo Noticioso burocrático Aúdio Oficial Conteúdo. Texto Entretenimento Gráficos Técnico Animações Institucional Imagens Informativo Comercial Interações Operacional Hipertexto Artístico Aberto ou restrito Publicitário Tipo de ambiente virtual (sistema off-line, Internet intranet...) Hardware/Software Contexto jurídicoAspectos Culturais/sociais/políticos Capital humano deAspectos funcionais operacionalizaçãoNível econômico/social Metodologia de desenvolvimentoEstado físico Metas, objetivos e implicaçõesMotivações Sazonais do ClienteAspectos Psicológicos/cognitivos Recursos financeirosNecessidades primárias/secundárias... TecnologiaErgonomia Tempo Know-how
    • Modelo - User Experience HoneyComb:
    • Utilidade O conteúdo é o rei. O que o usuário quer/precisa? O que o cliente quer/precisa? O que se tem/ou se pode ter? Útil é tudo o que serve ao usuário final independente de sua qualificação moral; não existe produção se não houver consumo. Útil para o usuário nem sempre é útil para o Arquiteto de informação, para o cliente ou para a sociedade como um todo.O site mais inútil da internetInfo Online, 2009
    • Usabilidade“Usabilidade  é  a  eficiência,  eficácia  e  satisfação  com  a  qual  os  públicos do produto alcançam objetivos em um determinadocontexto.” – Eficácia: É a capacidade de executar tarefa de forma correta e completa. – Eficiência: São os recursos gastos para conseguir ter eficácia. – Satisfação: O conforto e aceitação do trabalho dentro do sistema. Usabilidade é a medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação num contexto específico de uso. Norma ISO 94241-11
    • PhD Jakob Nielsenuseit.comDiretor do Nielsen-Norman Group,uma das maiores empresas deconsultoria em usabilidade nomundo.
    • Cinco atributos da usabilidade (NIELSEN, 1993)Facilidade de aprendizagemEficiência de usoFacilidade de memorizaçãoBaixa taxa de errosSatisfação subjetivaHeurísticas de NielsenFeedbackLinguagem do usuárioControle e liberdade para o usuárioConsistência e padrões de navegaçãoPrevenir ErrosMinimizar a sobrecarga de memóriaFlexibilidade e eficiência no uso - AtalhosDiálogos Simples e NaturaisBoas Mensagens de ErroAjuda e Documentação
    • Steve Krugsensible.comPopularizou a usabilidade com umlivro inovador, amigável e prático.Pioneiro no uso de metáforas e nadidática de ensino da usabilidade.
    • EncontrabilidadeO que o usuário quer?Quando ele quer?Como ele quer encontrar?Que recursos ele dispõe para encontrar?Sobrecarga de informação:Em Janeiro de 2009 existiam mais de 185 milhões de sites na internet. (Nielsen- Netratings)Mais de um milhão de sites surgem por mês em todo o mundo.(NETCRAFT, 2009)Em 2006 o mundo criou 161 exabytes de informação. (IDC, 2007)Estamos diante de diversos fluxos diferentes de informações complexas temque estar estruturadas com o objetivo de serem encontradas.
    • É difícil achar uma agulha no palheiro?
    • Depende da agulha
    • E depende do Palheiro
    • Credibilidade10 principais fatores influenciadores da credibilidade de um site:1 - Facilite a verificação das informações do seu site2 – Mostre que existe uma instituição organizada real por trás do projeto3 – Realce a experiência da sua organização nos conteúdos e serviços que oferece.4 – Mostre as pessoas honestas e confiáveis por trás do projeto5 – Facilite o contato6 – O design do seu site deve parecer profissional (ou apropriado para sua finalidade)7 – Faça seu site fácil de utilizar, e útil8 – Atualize seu site frequentemente (ou pelo menos mostre que foi revisadorecentemente)9 – Seja moderado com conteúdos promocionais(anúncios e ofertas)10 – Evite todo o tipo de erro, por menor que seja.http://credibility.stanford.edu/
    • AcessibilidadeSites devem ser acessíveis a todos, independente de: Restrição física Restrição tecnológica Restrição financeira Restrição socialDecreto-lei 5296 de 2 de dezembro de 2004Art. 2o Ficam sujeitos ao cumprimento das disposições deste Decreto,sempre que houver interação com a matéria nele regulamentada:I - a aprovação de projeto de natureza arquitetônica e urbanística, deCOMUNICAÇÃO E INFORMAÇÃO, de transporte coletivo, bem como aexecução de qualquer tipo de obra, quando tenham destinação pública oucoletiva; Itens de hardware funcionam como extensões do corpo humano.
    • Desejabilidade (credo!)AmigabilidadeNossa busca pela eficiência deve vir temperada pela apreciação do podere do valor de uma imagem, identidade, marca e outros elementos dodesign emocional.Um site pode e deve ser legal, divertido de usar, desde que não hajamconflitos de prioridade. As emoções e sensações são essenciais para aconvivência e sobrevivência humana.Entre  dois  sites  igualmente  eficientes,  a  “amigabilidade”  é  um  dos  fatores  que desempata o jogo. Os paradigmas nem sempre vendem mais, equando descobrem isso, eles começam a mudar.
    • Linguagem do usuáriohttp://www.cocacolabrasil.com.br http://www.cocacola.com.brhttp://www.cocacolazero.com.br http://www.thecoca-colacompany.com/
    • Valorabilidade (credo!)Valor AgregadoOs sites devem dar resultado para quem paga. Têm que valer a pena serempagos.Para as organizações sem fins lucrativos, a experiência do usuário devefavorecer a missão proposta. Para empresas com lucro, devem contribuir para ofaturamento da empresa e aumento da satisfação do cliente.É o que manterá seu projeto no ar por todo e todo o sempre amém.Os investimentos em publicidade na internet cresceram 44% em 2008, contra 9% da média domercado .Fonte: Meio & MensagemReceita do Google: U$ 4,2 Bi (2008)Estimativa de prejuízo do You Tube para 2009: U$174 MiFonte: RampRateReceita da Rede Globo: R$7,5 Bi (2008)Fonte: Blue Bus
    • E o Design?
    • Design de Interação / Design centrado no usuárioDesign de Interação é a maneira como um produtoproporciona ações em conjunto entre pessoas e sistemas. –UsabilidoidoPensar no relacionamento do homem com sistemas ou objetos.Colocar a lógica fechada dos ambientes técnicos em função dasvariações da cognição humana.O designer de Interação se concentra nas perguntas feitas pelousuário. (Morville e Rosenfeld)Alguns nomes que se veem por aí:User Experience DesignerInteraction DesignerInformation ArchitectUsability Engineer
    • Alguns nomes que se veem por aí:
    • Donald NormanSócio fundador do Nielsen Norman Group, pioneiroda aplicação da Psicologia Cognitiva ao designcentrado no usuário.
    • Desafios da Arquitetura Web Social Web Semântica Design Responsivo Acessibilidade Serviço X Negócio Desenvolvimento Ágil
    • ComponentesBásicos da AI
    • Louis Rosenfeld e Peter Morville, autores do clássico livro da capa com o “Urso  Polar”,  dividiram  a  Arquitetura  de  Informação  de  um  website  em quatro grandes sistemas, cada um composto por regras próprias e suas aplicações: Sistema de Organização Sistema de Rotulação Sistema de Navegação Sistemas de Busca* ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 3. ed. Sebastopol, CA: OReilly, 2006.
    • Sistema deorganização
    • Seu site é organizado? * Site acima: http://www.havenworks.com/
    • O que é um sistema de organização?O sistema de organização é o componente daArquitetura de Informação responsável por organizar ainformação do website.Sua função é definir as regras de classificação eordenação das informações que serão apresentadas eaplicar estas regras, categorizando todos osconteúdos oferecidos.Seu principal desafio é organizar a informação deforma que ajude o usuário a encontrar o que precisapara atingir seu objetivo.
    • Por quê categorizar as informações? Categorizar é uma habilidade natural que a mente humana usa para compreender o mundo ao seu redor. Categorizar é o processo cognitivo de dividir as experiências do mundo em grupos de entidades, ou categorias, para construir uma ordem dos mundos físico e social em que o individuo participa. JACOB e SHAW, 1998 Categorização é um mecanismo cognitivo fundamental que simplifica a interação do indivíduo com o ambiente: Ela não apenas facilita o armazenamento da informação, mas também reduz a demanda da(apud JACOB e SHAW, 1998) MARKMAN memória humana.* JACOB, E. ; SHAW, D. Sociocognitive Perspectives on Representation. Annual Review of Information Science and Technology (ARIST). Vol. 33, p.131-185, New York: Knowledge Industry Publications, 1988.
    • Formas de organização da informação Para organizar a informação é preciso classificá-la, definir quais documentos serão colocados em quais categorias. Para isso é preciso considerar as características da interface. Os pesquisadores Rosenfeld & Morville*, falam da importância  dos  “esquemas  de  organização”.  Citam alguns esquemas de organização através dos quais navegamos todos os dias, como listas de telefone, supermercados e guias de programação de televisão, que facilitam o acesso à informação. Os autores classificam os esquemas em: esquemas exatos e esquemas ambíguos.* ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 3. ed. Sebastopol, CA: OReilly, 2006.
    • Sistema de organização Esquema exato Esquema ambíguoDivide a informação em categorias bem Divide a Informação em categoriasdefinidas e mutuamente exclusivas. subjetivas. Baseia-se na ambigüidade inerente da língua e na subjetividadePossui regras claras para incluir novos humana.itens. Não possui regras claras de como incluirIndicado quando o usuário sabe novos itens.exatamente o que está procurando. Indicado quando o usuário não sabe exatamente o que está procurando.Páginas brancas da Páginas amarelas da lista telefônica (Esquema exato) lista telefônica (Esquema ambíguo)
    • Esquemas de organização exatosAlfabetoIndicado para grandes conjuntos de Informação e públicos muito diversificado.Ex: Dicionários, Enciclopédias, Listas Telefônicas.Tempo (cronológico)Indicado para mostrar a ordem cronológica de eventos.Ex: Livros de História, Guias de TV, Arquivo de notícias.Localização (geográfico)Compara informações vindas de diferentes locais.Ex: Previsão do tempo, pesquisa política, Atlas de anatomia.SeqüênciaOrganiza itens por ordem de grandeza. Indicado para conferir valor ou peso a informação.Ex: Lista de preços, rankings, classificações.
    • Esquemas de organização ambíguosAssunto (tema)Divide a informação em diferentes tipos, modelos ou perguntas a serem respondidas.Ex: Páginas Amarelas, Editorias do jornal, Supermercado.TarefaOrganiza a informação em conjuntos de ações. Raramente utilizado sozinho na Web.Ex: Menu aplicativos Windows (Editar, Exibir, Formatar).Público-Alvo (audiência)Indicado quando se deseja customizar o conteúdo para diferentes públicos-alvos.Ex: Lojas de departamento (classifica seus produtos em masculino, feminino e infantil).MetáforaUtilizado para orientar o usuário em algo novo baseado-se em algo que lhe é familiar.Ex: Desktop de um computador (utiliza a metáfora de uma mesa de escritório).HíbridoReúne 2 ou mais esquemas em uma mesma organização.Normalmente causa confusão ao usuário.
    • Faced classificationA classificação do mesmo conjunto de informações em diferentes esquemas échamado de faced classification (classificação facetada ou multi-dimensional). Cadaesquema representa uma dimensão na estrutura que organiza a informação.A web, por ser um ambiente virtual, permite facilmente apresentar a mesmainformação organizada de várias formas. No mundo físico, ao contrário, isso épraticamente impossível.A grande vantagem da faced classification é que ela oferece ao usuário diversasmaneiras de buscar a mesma informação, acomodando diferentes estratégias debusca e modelos conceituais.
    • Assunto Alfabeto http://www.almanaqueculinario.com.br/receitas-alfabeto/
    • Tempohttp://veja.abril.com.br/acervodigital/home.aspx
    • AssuntoTempohttp://www.redetv.com.br/portal/grade.aspx
    • Localização Assuntohttp://www.tecnisa.com.br
    • AssuntoLocalização http://www.submarinoviagens.com.br/viagens/destinos.aspx
    • Seqüência Híbrido (tarefa, assunto) http://migre.me/
    • Assunto Seqüênciahttp://www.folha.com.br/
    • Exemplos de sistemas de organização Público-alvo Assunto Tarefas http://www.caixa.gov.br/
    • Público-alvo Assuntohttp://www.boticario.com.br
    • Híbrido (assunto, localização, público-alvo)http://www.imoveiscuritiba.com.br
    • Metáforahttp://www.zoomii.com
    • Metáforahttp://www.petmoustache.com/index.html
    • Metáforahttp://www.sharpideas.com/
    • Dificuldades em organizar a informação na web Principais dificuldades Devido aos seus diversos aspectos cognitivos, a organização da informação na Web apresenta diversas dificuldades: Ambigüidade Heterogeneidade Multilocação Diferenças de Perspectiva Políticas Internas Estética
    • AmbigüidadeOs sistemas de classificação se baseiam na linguagem humana, que é naturalmente ambígua. Liquidificador  está  em  “eletrodomésticos”,“eletroportáteis”,  ou  “utilidades  domésticas”?http://www.magazineluiza.com.br/
    • HeterogeneidadeO conteúdo disponibilizado na web é altamente heterogêneo. Em um mesmo site podem estarpresentes conteúdos de diversos tipos (textos, vídeos, sons, etc.) e em diversos formatos(html, gif, jpg, ppt, pdf, doc, etc.). Assim, criar um único sistema de organização que atenda atodo o website pode ser impossível. Serviços Vídeo Publicidade Notícias Mobilehttp://www.globo.com/
    • MultilocaçãoNo mundo virtual um mesmo corpo pode ocupar dois ou mais lugares no espaço.http://www.musicovery.com
    • Diferenças de perspectivaO arquiteto precisa evitar que suas perspectivas pessoais influenciem a organização dainformação e buscar atender as diferentes perspectivas de cada usuário, o que aumenta acomplexidade do sistema de organização.http://www.dell.com.br/
    • Políticas internasMuitas vezes decisões políticas influenciam diretamente a organização da informação demodo a resolver interesses internos ao invés de atender as necessidades do usuário. A exigência de espaços para publicidade em muitos sites afeta profundamente a experiência do usuário.http://www.rpc.com.br/
    • EstéticaAlém de possuir uma organização compreensível um website precisa ser esteticamenteagradável. Porém a estética não deve prevalecer sobre a compreensão da informação. Esteticamente o site é bonito e agradável, mas seu conteúdo só é descoberto atrás das flores caso o usuário compreenda a metáfora visual aplicada.http://www.flowersforhope.com/garden/
    • Sistemas deRotulação
    • Antes, de falar de rotulação vamos falar um pouco de signos:Semiótica: O estudo dos signos.Signos são representações de experiências.Tudo aquilo que faz parte do universo cognitivo do usuário, nós podemos chamarde intuitivo, inclusive os processos de significação que podem variar de acordocom o contexto semântico.
    • Processo de significação:
    • Contextos semânticosCultural Funcional Pajero Clipe Brasil Espanha Temporal Gramatical Pia Broto Verbo 1960 2009 Substantivo (o pássaro pia)
    • Sistema de rotulaçãoRótulos são os signos que irão representar a estruturação do conteúdo do site. Eles devemcomunicar ao usuário qual é o conteúdo do site e o que ele pode ou não pode fazer.Château Pétrus Do AvôPomerol, Bordeaux, França. Campo Largo, Paraná, Brasil.Safra de 1899 Safra de 20095.203,00€, R$ 5,60
    • Regras de rotulaçãoCompletudeCubra todo o conceito transmitido pelo conjunto de rótulos.Níveis conteúdoNão misture conceitos com níveis diferentes de abrangência.SintaxeMantenha uniformidade na sintaxe dos termos.EstiloSiga um padrão de apresentação visual.PúblicoNão misture termos com abordagens diferentes no mesmo menu.
    • Recomendações para oSistema de rotulação- Crie categorias auto exclusivas.- Consulte outros sistemas de rotulação da categoria.- Use termos padronizados. Se necessário, crie um arquivo de autoridade.- Cuidado com sinônimos, homônimos e termos ambíguos. Estabeleça um padrão de usoou indique a desambiguação.- Evite siglas.
    • Recomendações para oSistema de rotulação- Pense na Amigabilidade.- Fale a linguagem do usuário. Faça um Card Sorting.- Estreite o Escopo para evitar ambiguidades. Se precisar divida o conteúdo do site emsub-sites.-Exiba os itens imediatamente inferiores.- Os termos devem se adequar a estrutura mental do usuário e não a estrutura internadas empresas.
    • Rótulos textuais Rótulos visuaisSignos em forma de palavras. Signos em formas de imagens. VACA Vantagens Vantagens Intuitividade Economia de espaço Facilidade de Eficiência de uso Aprendizagem Deixam a interface mais Implementação Rápida atrativa
    • Tipos de ÍconesÍcones Diretos ou literais Ícones indiretosRepresentam o conceito literalmente, mostram Se apropriam de uma parte do conceitouma figura do próprio conceito representado. representado na composição do signo. Ícones metafóricos Signos arbitrários Utilizam um outro conceito ou ato Definidos formalmente sem qualquer relação relacionado ao que respresenta. natural com seu significado. Ícones Concretos Ícones Abstratos Ícones Mistos
    • Ícones-Padrão
    • FolksonomiaTermo criado pelo arquiteto de informação Thomas Vander Wal(Folk = Povo + Taxonomia)É um recurso que permite que os próprios usuários criemseu  sistema  de  rotulação  por  meio  de  “tags”.  Os termos não precisam ter, necessariamente , umahierarquia ou qualquer tipo de relação entre si.
    • Folksonomia:Vantagens- Diminui os custos para categorizar o conteúdo porque não envolve profissionaisespecializados em categorização de conteúdos.- Permite que o usuário organize facilmente o conteúdo porque ele não precisa aprenderum vocabulário controlado.- Reflete o vocabulário do usuário.- Permite encontrar conteúdos inesperados graças as conexões criadas pelas tags.- Diminui as barreiras para a cooperação.DesvantagensPode ter inconsistências e ambigüidades devido a: Polissemia: palavras com muitos significados Sinonímia: múltiplas palavras com mesmo significado Inflexões: variações de gênero, número e grau da palavra Erros de ortografia e digitação. Pode ter muitas tags imprecisas ou irrelevantes (meta noise)
    • Polissemia Inflexão Sinônimos
    • Folksonomia Controlada- Apresentar instruções de como o usuário deve escolher a tag- Sugerir tags semelhantes e já utilizadas por outros usuários- Apresentar sinônimos- Aplicar correção ortográfica- Indicar o assunto ao qual as tags se referem- Sugerir ao usuário que classifique a informação em tags pré-definidas
    • Sistemade navegação
    • O que significa navegar na web?Navegar é alcançar um destino que está fora doalcance de campo de visão do ponto de partida.No mundo físico existe uma infinidade de pontos dereferências para o usuário se orientar (árvores, rios,montanhas, estrelas, placas, etc.).Em um website, ao contrário, esses pontos dereferência não existem. Assim, ao se projetar umwebsite ,é necessário criar um sistema de navegaçãopara estabelecer pontos de referência e umasinalização que oriente o usuário, caso contrário elese perde.
    • O que é um hipertexto?Hipertexto é o termo que remete a um texto em formatodigital, ao qual agrega-se outros conjuntos de informaçãona forma de blocos de textos, palavras, imagens ou sons,cujo acesso se dá através de referências específicasdenominadas hiperlinks, ou simplesmente links.Os links devem ser sinalizados claramente e suafuncionalidade ficar aparente na página.
    • Objetivo do sistema de navegaçãoO sistema de navegação é o componente daArquitetura de Informação que especifica as maneirasde navegar, de se mover pelo espaço informacional ehipertextual do website.Sua função é indicar ao usuário a sua localização emostrar o caminho correto para que ele chegue aoseu destino.
    • Os elementos do sistema de navegação são divididos em: Sistema de Navegação Embutido Sistema de Navegação Remoto Formado pelos elementos de navegação Formado pelos elementos externos a que são apresentados junto com o hierarquia do site. Sua função é prover conteúdo. Sua função é contextualizar e caminhos complementares para se oferecer flexibilidade de movimento: encontrar o conteúdo e completar as tarefas: - Logotipo - Barra de Navegação Global - Mapa do Site (sumário) - Menu Local - Índice Remissivo - Bread Crumb - Visita guiada - Passo a Passo - Cross Content
    • LogotipoTem a função de identificar o website e mostrar ao usuário a sua posição em relação a webcomo um todo. Por convenção, normalmente possui link para a home-page. Importante estarassociado a um slogan claro e informativo, para transmitir aos usuários o objetivo do site. Slogan Logotipo http://delicious.com
    • Barra de navegação globalContém os links para as áreas chaves do site, as grandes categorias do modelo deorganização. Freqüentemente é o único elemento de navegação comum a todo o website, porisso tem grande impacto na usabilidade. Carrinho de compras Serviços Categorias de produtos Busca http://www.casasbahia.com.br
    • Menu localApresenta links para páginas que estão próximas, na estrutura do website, à página que estásendo visitada (Páginas irmãs, filhas, pais, etc.). Três exemplos: Fixo Pull-down e pop-up Pie menu (radial menu) http://www.casasbahia.com.br http://www.faculdadespequenoprincipe.edu.br http://songza.com
    • Bread crumb (migalhas de pão)Informa onde o usuário se encontra na estrutura do site e fornece links para os níveishierárquicos superiores. http://www.blogblogs.com.br Bread crumb tradicional Bread crumb em forma de menu (tabbed) http://food.yahoo.com
    • Bread crumb (migalhas de pão)O bread crumb pode representar diferentes modelos de navegação. Segundo *Instone (2002),existem 3 tipos principais:Location Bread CrumbInforma a posição da página na estrutura do site mostrando links para todas as páginashierarquicamente superiores até a Home-Page. A página tem sempre o mesmo bread crumbindependente do caminho percorrido para alcançá-la.Path Bread CrumbMostra o caminho percorrido pelo usuário para alcançar a página. Se a mesma página puderser acessada por diferentes caminhos, ela apresentará diferentes bread crumbs.Attribute Bread CrumbEsta representação possui a peculiaridade de não oferecer zonas de salto em cada item daestrutura, mas sim um link simples para a página procurada. Este tipo de recurso é muitoencontrado em sites de e-commerce. *INSTONE, K. Location, Path & Attribute Breadcrumbs. User-experience.org, 2002.
    • Passo a passoInforma em qual passo de uma transação o usuário se encontra. Indicado para transaçõeslongas ou delicadas. A estrutura é amigável na identificação de problemas, pois o funil doprocesso permite uma análise de métricas mais aprofundada. http://www.fnac.com.br
    • Cross contentApresenta uma série de links relacionados ao conteúdo da página que está sendo visitada.Para serem úteis devem ser bastante contextualizados. http://perfumes.sacks.com.br
    • Mapa do siteApresenta toda a estrutura do website, normalmente na forma hierárquica. Reforça a hierarquiado website para que o usuário se familiarize com a sua organização. Facilita o acesso rápido edireto para o conteúdo. http://www.hsbc.com.br
    • Índice remissivoSão listas de palavras chaves organizadas em ordem alfabética ou por importância. Bastanteúteis quando o usuário já sabe o nome do conteúdo que procura. http://www.gm.com.br
    • Visita guiadaA visita guiada serve como uma boa ferramenta para introduzir novos usuários as áreas demaior conteúdo ou importância de um sistema. http://www.americanas.com.br
    • Recomendações  -­‐ para sistema de 10 princípios básicos navegação de qualidade: - Fácil de aprender - Ser consistente - Prover feedback - Presente de diferentes formas conforme o contexto - Oferecer alternativas - Economizar ações e tempo de utilização - Apresentar mensagens visuais claras e no momento adequado - Possuir rótulos compreensíveis - Estar em sintonia com o propósito do website - Suportar os objetivos e comportamentos do usuário *Extraído do livro de FLEMING, J. Web Navigation: Designing the User Experience. OReilly, 1998.
    • Recomendações -­‐*Um bom sistema de navegação deve responder 3 perguntas básicas: Onde estou? Onde estive? Aonde posso ir? *Extraído do livro de NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus, 2000.
    • Focalize sua navegaçãoNavegações flexíveis fornecem muitos atalhos mas podem gerar confusão para o usuário. Érecomendável diminuir a quantidade de opções de navegação nas tarefas mais críticas paraque o usuário possa focar melhor sua atenção. Página inicial Página de login (muitos links) (poucos links) http://www.amazon.com
    • Não esqueça da acessibilidadeTodas as páginas que possuem menus padronizados em um site, para serem além deacessíveis, terem uma boa usabilidade, têm de possuir teclas de atalho que permitam osalto para o conteúdo principal da página.Essas teclas de atalho podem ser colocadas pelo desenvolvedor sem prejuízo de qualqueroutro conteúdo. http://www.hsbc.cl
    • Sistemas de Busca
    • Verifique a necessidade de um sistema de busca: - Existe conteúdo suficiente? - Você precisa de uma busca ou de um sistema de navegação melhor? - Você tem tempo e know-how para otimizar seu sistema de busca? - Não existem alternativas melhores? - Seu usuário vai se aborrecer com a busca?Por que a busca é importante? - Buscas ajudam com grandes quantidades de conteúdo. - Buscas ajudam em sites muito fragmentados. - Buscas deveriam existir quando os usuários esperam por elas. - A busca pode dominar o dinamismo.
    • O que exibir para o usuário em páginas debusca?Leve em consideração: - O nível de experiência do usuário-alvo. - Os tipos de resultado que o usuário quer. - O tipo de informação que está sendo buscada. - A quantidade de informação que está sendo buscada.Tecnisa Midomi Google
    • Elementos do mecanismo de busca Interface inicial Página sem resultados Página de resultados Página de ajuda
    • Mecanismos  de  busca  não  são  só  “coisa  de  TI”Soluções para humanização de mecanismos de busca:-Correção ortográfica- Sugestões de busca- Auto-complete- Cross-content- Resultados Personalizados
    • Tipos de organização de resultados - Alfanumérico - Cronológico - Por relevância - Popularidade - Por avaliação qualificada - Por custo de clique (Quality score) - Por valores diversosFiltros de busca genéricos (Faceted Search)- Atributos do ConteúdoTipo de conteúdo CronológicoAudiência AutorCargos/funções DepartamentoAssunto Resultados personalizadosGeográfico etc...
    • Dicas para a página de resultados de busca:- Explique de onde os resultados vieram.- Deixe claro o que o usuário acabou de fazer.- Integre busca com navegação.- Repita o campo de busca e o texto buscado na página de resultados.- Diga quantos itens foram encontrados.- Inclua paginação.- Separe claramente resultados orgânicos de patrocinados.- Sugira como o usuário pode formular os termos da sua busca.
    • Dicas para a página de resultados de busca:- Mostre menos informações para usuários que sabem o que estão procurando e maisinformações para os que não sabem.- Permita a customização dos resultados.- Mostre a informação que o usuário mais deseja.- Ofereça suporte específico para cada tipo de busca.- Faça a caixa de buscas grande.- Agrupe os resultados em categorias (ver tipos de organização).-Ofereça sugestões de refinamento da busca.
    • Página sem resultados-Tem a função de indicar que não foram encontrados resultados e de facilitar uma novabusca.Dicas- Diga claramente que a busca não obteve resultados.-Sugira que o usuário revise os termos utilizados na busca e dê sugestões.-Exiba os termos utilizados na pesquisa, de preferência, no próprio campo de busca.- Disponibilize ajuda.-Disponibilize contato.
    • Página sem resultadosAnalise os termos buscados para incrementar os metadados do conteúdo do seu site.
    • Otimização de conteúdoSearch Engine Optimization(SEO)
    • 80% dos usuários iniciam a navegação atravésdo mecanismo de busca62% deles clicam na primeirapágina de resultados28% deles clicam nasegunda/terceira páginaQuer dizer, se seu siteestiver da quarta páginapara trás, é melhordistribuir imãs degeladeira.
    • As pessoas não lembram o endereço do siteE ficam menos que 5 minutos nas páginas de resultados
    • Vamos entender a diferença entre:Páginas de Navegação Páginas de Destino
    • O que realmente importa?- URL - Popularidade da página.- Metatags (Keywords, Description) - Tempo de indexação- Nome do site - Frequência da palavra- Títulos (h1, h2, h3, h4...) - Posição da palavra- Links- Corpo de texto- Links em imagens- Alts de imagens- Âncoras de texto remoto Os desenvolvedores dos mecanismos de busca estão sempre tentando priorizar a relevância do conteúdo e competindo para exibir os melhores resultados. Por isso os algorítimos dos buscadores são diferentes entre si e mudam constantemente .
    • Dicas White Hat Técnicas recomendadas para a otimização de conteúdo.- Escolha palavras-chave adequadas , de acordo com o conteúdo do seu site.- Defina uma estratégia, pesquisando as palavras mais buscadas.- Utilize termos compostos para especificar mais a busca.- Inclua sinônimos, termos derivados e palavras concorrentes.- Analise o log de busca do seu site para saber os interesses dos usuários.- Coloque as palavras chave nos locais mais relevantes da página.- Faça a palavra chave aparecer várias vezes.- Incentive que outras pessoas coloquem links para seu site no site delas.- Evite Javascript, Flash e Image Maps .- Mantenha o seu cadastro atualizado em sites de busca.
    • Dicas Black Hat Técnicas NÃO recomendadas para a otimização de conteúdo.- Spam Indexing Páginas feitas só para atrair forçadamente os mecanismos de busca.- Doorway Pages Otimizar uma página para uma palavra-chave de acordo com as particularidades domecanismo de busca.-Page Cloaking Criação de Doorways que somente os robôs dos mecanismos de busca conseguemacessar.    O  desvio  das  URL’s  indevidas    é  feito  por  meio  da  identificação  de  IP  ou  de  browser.
    • Reflexão final:Otimização em função do conteúdo, ou conteúdo em função da otimização? (O sapato pro pé ou o pé pro sapato?)
    • Pesquisa
    • O objetivo da etapa de pesquisa é entender detalhadamente oproblema e definir o escopo do projeto.É o processo de descobrir quem são seus usuários, o quê eles querem e quetipos de conteúdos e funcionalidades eles realmente usam. Também e nãomenos importante, é a hora de escutar seu cliente , entender o que ele espera ereunir os recursos disponíveis para alcançar este objetivo.Usamos diversas técnicas para responder perguntas deste tipo e ajudar você aentender o que fazer com as informações adquiridas.É uma atividade que requer muita habilidade de comunicaçãoporque o arquiteto é frequentemente o mediador entre oconhecimento do cliente e o time que construirá a solução.
    • Objetivos:Entender o comportamento do usuárioEntender os objetivos e necessidades do NegócioEntender o contexto do projeto (limitações e possibilidades)Identificar problemasIdentificar oportunidades
    • Mitos (desculpas) para não fazer pesquisa
    • Desculpa Nº1 Nós não temos tempo e/ou dinheiro. #NOT #YES Investindo em UX, se economiza tempo e dinheiro.
    • Desculpa Nº2 Nós já sabemos o que queremos. #NOT #YES Gestores geralmente não sabem o que os usuários querem. Nem o que eles mesmos querem.
    • Desculpa Nº3 Nós já fizemos Pesquisa. #NOT #YES É necessário fazer pesquisa específica de UX. UX não é marketing.
    • Sobre a pesquisa O QUE É A ENTREGA: Um lindo relatório contendo: Observações relevantes sobre o negócio usuários e sobre o produto. Temas Insights Oportunidades (CP) Referências
    • Variáveis da pesquisa Empresa (cliente) Usuário (público-alvo)-Planejamento estratégico - Objetivo do usuário-Proposta de valor (objetivo do negócio) - Experiência do usuário-Recompensa da empresa - Linguagem do usuário-Requisitos e diretrizes de implementação - Etnografia virtual-Público-alvo Contexto – Vamos ver depois
    • Empresa
    • Por que investir em planejamento?Por que planejamento?
    • Num projeto de web site, o planejamento tem diversas funções, como:Garantir a realização dos processos necessários para que o site alcance os seusobjetivos.Disseminar internamente requisitos e decisões, mesmo às equipes não diretamenteenvolvidas com o projeto, que legitimem o projeto do canal online.Evitar retrabalho e custos duplicados caso o site não atenda aos seus objetivos (que podeconsistir num projeto inteiramente novo).Prevenir imprevistos que comprometam o resultado do projeto. E controlar a qualidade dosprocessos e resultados.Gerar produtos que definam fatores de sucesso ou fracasso a serem repetidos ouevitados em novos projetos semelhantes.
    • Objetivos da organização – Questões Primárias Por que a organização existe? O que faz, como faz? Onde quer chegar num determinado período de tempo? Como chegar? Quais são as diretrizes da estratégia organizacional de imagem? Como funciona as políticas de publicação de conteúdo sobre produtos, atividades, notícias? Quais são as estratégias de vendas de produtos e serviços? Como funciona a políticas de relacionamento com os clientes?
    • Entrevista comStakeholdersÉ uma entrevista com todos os envolvidos noprocesso de publicação de conteúdo paramapeamento de necessidades expectativas eresponsabilidades dentro do projeto.O número de entrevistados depende de quantaspessoas terão responsabilidades direta eindiretamente em relação ao projeto, sejamclientes ou fornecedores.
    • Focus Group - Estratégico - Entrevistas com funcionários da empresa que representem setores envolvidos no projeto
    • VISÃOÉ  o  “sonho”  da organização, o futuro realizável que motiva o presente.MISSÃOÉ a identificação da organização, áreas de atuação, rumos.
    • Entendimento e a investigação da situação presente (identificaçãodos pontos de melhoria e mudança - tempo, custo e aplicação detecnologias, por exemplo - e a identificação de problemas)
    • Análise das forças e limitações internas ◊ A análise dos recursos (financeiros, patrimoniais, humanos, tecnológicos) ◊ A análise da estrutura organizacional ◊ A avaliação de desempenho (financeiro, produtividade, inovação, crescimento).
    • Análise do ambiente externo Do mercado, características atuais e tendências futuras, oportunidades, perspectivas. Das empresas que atuam na mesma área, com os mesmos clientes, consumidores ou recursos. Da conjuntura econômica, tendências políticas, sociais, culturais, legais, que afetam a sociedade e demais empresas. Da conjuntura tecnológica, na medida em que muitas indústrias estão sujeitas a rápidas e imprevisíveis mudanças nesta área.
    • Alinhando objetivos do site O que vamos fazer? A proposta de valor determina a função principal, o propósito, a razão do website. Ela marca a direção do projeto e o resultado esperado. Um website pode ter mais que uma proposta de valor, especialmente se ele atende a públicos-alvos diferentes. As propostas de valor de um website são derivadas da visão e missão da empresa e do seu planejamento estratégico.
    • Alinhando objetivos do site Qual é a recompensa esperada e como vamos medi-la ? A empresa sempre espera ganhar algo em troca investindo em um website: aumentar as vendas, reduzir custos, divulgar melhor a sua marca. Até mesmo organizações sem fins lucrativos esperam ganhar alguma recompensa quando lançam seus websites: captar mais doações, divulgar seus trabalhos, conquistar novos voluntários. Na fase de pesquisa o arquiteto deve compreender que recompensa a empresa espera receber e como ela será quantificada.
    • Alinhando objetivos do site Check requisitos e diretrizes Um website está dentro de uma empresa que determina um forte contexto para sua implementação e operação. Esse contexto cria requisitos e diretrizes para a implementação que devem ser respeitados para garantir a viabilidade do projeto.
    • Alinhando objetivos do site Identifique o público-alvo O público-alvo é o grupo de pessoas que vai utilizar o website: clientes, revendedores, funcionários, acionistas, imprensa, etc. A definição de quais públicos-alvos que o website deve atender é decorrente da sua proposta de valor do website e do planejamento estratégico da empresa. Um público-alvo muito amplo é mais difícil de se atender porque possuem perspectivas e necessidades diferentes, podendo demandar diferentes formas de organização.
    • Usuário
    • Objetivos do usuário Os objetivos indicam quais são as necessidades do usuário que o website deve atender e quais são os benefícios que o motivam a utilizá-lo. O objetivo do usuário está diretamente ligado a proposta de valor do site. Ele é a tradução da proposta de valor na visão do usuário, assim devem estar fortemente alinhados.
    • A experiência do usuário mostra o seu processo de utilização do website:- O que motivou o usuário a usar o site ?– Como o usuário inicia o uso do site ?- Por que etapas eles passa ?– Quais as informações necessárias em cada etapa ?– Como ele termina ?– Que decisões o usuário toma em cada etapa ?– Que uso ele faz das informações que obteve no website ?
    • Ferramentas de pesquisa
    • Análise HeurísticaÉ uma análise especializada do site atual a serredesenhado feita a partir de boas práticas(heurísticas) de usabilidade e de comportamentode consumidores na internet.O objetivo é otimizar o processo de pesquisa comusuários detectando problemas mais evidentesque podem ser resolvidos de maneira mais ágilsem muito custo de pesquisa.
    • Design EmocionalDesign emocional é o processo de definir conceitossubjetivos a partir de referências concretas.Definimos uma matriz de conceitos subjetivos epedimos a usuários reais para que posicionemdiversos layouts de sites sugeridos nesta matriz ,para que a equipe de design possa entender o queos usuários entendem sobre os determinadosconceitos.
    • Imersão TeóricaÉ uma análise especializada de pesquisasquantitativas existentes e referências teóricasdentro do campo de atuação do site a serredesenhado.O objetivo é encontrar referências que já existemno universo teórico que possam contribuir para odesenvolvimento do projeto.
    • BenchmarkingIdentificar as referências do mercado emdeterminadas áreas e as melhores práticasaplicadas nos produtos.É reunir em um documento tudo o que se tem demelhor sobre determinado produto para criar umabase de comparação para o novo produto a sercriado.
    • Análise de TráfegoÉ uma análise especializada dos dados de tráfegono atual site a ser redesenhado.O objeto de estudo depende do tipo de métricaproduzida atualmente pelo sistema de BI do site, ea partir destas informações (acesso , bouncerating, keywords...etc ) tirar conclusões acerca daotimização do uso dos conteúdos efuncionalidades do site.- relatórios internos da empresa(vendas, sugestões e reclamações)- Análise do log do mecanismo de busca - Análise das estatísticas de acesso ao site
    • Focus GroupÉ uma técnica de pesquisa qualitativa que visacaptar insights de usuários reais acerca do produtoa ser redesenhado. É uma conversa com um grupode 8-10 pessoas que sejam de um determinadopúblico alvo.O encontro é registrado em áudio e em fotografias,e pode ser complementado com desenhoscolaborativos entre outros recursos. O resultadofinal são problemas e necessidades reais dosconsumidores que servem de base para o desenhode um novo produto.
    • Entrevistas emContextoDescobrir o que as pessoas querem e precisam apartir do contexto real do seu cotidiano.A partir disto criamos personas e cenários que sãoa criação de personagens e situações fictíciasfeitas partir dos estudos com usuários, paradelimitar os diferentes o públicos e direcionar assoluções de design.
    • Etnografia VirtualA Etnografia é por excelência o método utilizado pela antropologia na coleta de dados.são analisadas as necessidades e prioridades de usuários,abordando questões sociológicas como: - Motivação - Identidade - Cultura - Espaço e tempo - Coordenação - Aprendizado
    • Inventário de ConteúdoLista detalhada de tudo o que deverá compor o site / sistema em ordem de importância ediferenças de funcionalidade.> Levantamento de Dados e Inventário metadados Tipo de Identificação Tipo de Nome da página Descrição Arquivo Tópico/Tema Público-alvo Numérica Conteúdo (formato) Chamadas0 Home Página principal do site Texto Navegação internas Geral1 Sobre Apresentação institucional Texto e imagem Institucional Apresentação Geral, anunciantes Apresentação,1.1 Histórico História do programa Texto Institucional história Geral, anunciantes Apresentação,1.2 Equipe Dados dos integrantes Texto e imagens Institucional quem somos Geral, anunciantes1.3 Café Colombo na Imprensa Clipping Texto e imagens Noticioso Repercussão Geral, anunciantes 1.3.1 ... Notícia do Clipping Notícia publicada Texto e imagens Noticioso Repercussão Geral, anunciantes Licença Creative Reprodução do1.4 Direitos Autorais Commons Texto Informativo conteúdo Geral, blogueiros Texto, imagem e2 Programas Arquivo dos programas áudio Programa Programa Geral2.1 ... Programa específico Descrição do programa Texto e áudio Institucional Programa Geral3 Indicações Lista das indicações feitas Texto e imagem Serviço Indicações Geral
    • Testes de Rápidos- Teste A/B- Pesquisa Multivariada- Crazy Egg, Omniture, Google Analytics.- Testes de Corredor.
    • Testes deUsabilidadeÉ uma observação de usuários reaisrealizando tarefas no site orientados por umespecialista, enquanto os envolvidos noprojeto observam e levantam suasconsiderações sobre o que pode ser feitopara melhorar o produto.É a maneira mais eficaz de assegurar que umproduto digital atenda as necessidades doconsumidor e de identificar as mais mínimasfalhas no uso de uma interface.
    • Teste deUsabilidade /Ágil Plano de testes Recrutamento Aplicação Análise Relatório ( ) 1°Dia 2°Dia 3°Dia 4°Dia 5°Dia
    • Teste deUsabilidade /Evolutivo Janeiro / Fevereiro / Março / Abril / Maio / Junho / Julho / Agosto / Setembro / Outubro / Novembro / Dezembro
    • Card SortingCard Sorting é uma técnica de classificação eorganização de conteúdo de acordo com o modelocognitivo de usuários reais.Escrevemos vários conteúdos e funcionalidadesem cartões para que os usuários os organizem deacordo com a forma que entendam melhor ,podendo sugerir diferentes termos e formas deorganização. O resultado é o conteúdo do futurosite organizado da maneira que as pessoas que ousarão entendem.
    • Ajuda a responder algumas perguntas, como:O usuário deseja ver o conteúdo agrupado por assunto ou porpúblico?Dentro de diferentes públicos do site, quais são as semelhançasentre eles?Quais as principais diferenças? (isso pode ajudar a decidir, porexemplo, se devemos criar mais de uma versão do site ou não);Como cada seção ou grupo de conteúdo deve ser chamado?
    • Como funciona? São feitos cartões de papel, cada um com um conteúdo ou recurso do site testado. Esses cartões são distribuídos em uma mesa e solicita-se que o participante os organize da maneira que achar mais correta.
    • Existem dois tipos de  Card-­‐Sorting: Aberto  Não há categorias pré-­‐estabelecidas.  O usuário as organizará da maneira que achar melhor.  Pode-­‐se  solicitar que o participante proponha rótulos para cada grupo criado.  sites novos ou redesenho Fechado  Categorias já predefinidas.  Os participantes organizam o conteúdo dentro das categorias já existentes.  Sites existentes com novos conteúdos  Confirmar card-­‐sorting  aberto.
    • Vantagens: Desvantagens: Simples aplicação - tanto para que  Não considera as tarefas dotesta, quanto para que é testado; usuário: não testa a organização na prática; Baixo custo - para aplicação sósão necessários cartões de papel,  Resultados divergentes - oscanetas, blocos de anotação e tempo. resultados podem variar muito entre os participantes; Rápido - podem-se aplicar váriostestes em um curto período de tempo.  Análise complexa: a análise não é tão simples e pode tomar muito tempo Condiz com o design centrado no se os resultados dos participantesusuário. forem muito divergentes.
    • Importante! Não é um método para validar umaarquitetura pronta; Deve ser feito somente após pesquisadas necessidades do usuário (personas,cenários, mapa mental) e inventário deconteúdo;usado para comparar duas Pode seropções de organização ou rotulação.
    • AplicaçãoSelecione o conteúdo o Conteúdo já existente no site; o Descrição dos processos (em caso de recursos); o Novo conteúdo (em caso de novas seções); o Possíveis conteúdos futuros.Selecione os participantes o Dentro do público-alvo; o Entre 7 e 10 sessões;Prepare os cartões o Cada conteúdo em um cartão o Numerar cartões o Anote a numeração após a aplicação.
    • Card Sorting Análise Manualmente ou por softwares especializados; Perceba os padrões e as diferenças no resultado; Diferenças podem ser: o Caminhos diferentes de navegação; o Conteúdos não compreendidos; o Conteúdos que podem pertencer a mais de uma categoria; o Diferenças entre os públicos. Não há roteiro exato para a análise; Pode ser complementada por outras pesquisas.
    • Card SortingReferências “Card  Sorting” -­‐ Donna Spencer e Jesse James Garrett “Card  sorting:  a  definitive  guide” - Donna Spencer http://www.boxesandarrows.com/view/card_sorting _a_definitive_guide/
    • Análise deRequisitos
    • Análise de Requisitos Requisitos Técnicos: Determinam as tecnologias que podem ser utilizadas. Deve-­‐se  compreender e respeitar esses requisitos para garantir a viabilidade técnica do projeto. • Formato/Função (internet, intranet, blog, rede social, site institucional ...) •  Linguagens de programação (HTML, Javascript, Flash, etc.) • Especificações dos computadores dos usuários (sistema operacional, browser, resolução do monitor, etc.) • Ferramentas de desenvolvimento e operação do website (editores de HTML, banco de dados, software de gerenciamento de conteúdos, etc.) •  Integração com sistemas legados (ERP, CRM, SAP etc.) •  Plataformas (Celular, Tablet, Desktop, Uso de hardware..etc) •  Restrições técnicas – Capacidade e estabilidade do servidor, plugins, outsourcing...etc)
    • Análise de Requisitos Requisitos Operacionais: Determinam os profissionais e máquinas que atuarão na operação do website. Servem para avaliar a capacidade da empresa em manter o website operando após sua implantação Criação ou revisão processos internos (resposta de  e-­‐mails,  manutenção de conteúdos, entrega de pedidos, etc.) Capital Humano de desenvolvimento e manutenção. Restrições jurídicas ou políticas. Tempo. Estrutura de trabalho. Estratégia de Conteúdo.
    • Requisitos Técnicos
    • Em quais situações e aparelhos as pessoas utilizam a tecnologia e as interfaces?http://www.flickr.com/photos/yohann-­‐aberkane/2836258475/sizes/l/
    • Vamos falar sobre:1. Internet no geral2. Intranet3. Dispositivos Móveis4. TV Digital
    • Ambientes Tecnológicos O design de sistemas interativos centrados nos usuários requer a análise de tarefas, papéis e necessidades dos utilizadores em cada contexto de interação e dos padrões de mudança entre estes contextos Paulo Jorge Souza baseado em: EBAI 2008 http://paginas.fe.up.pt/%7Epjsousa/index.php
    • • Será que a necessidade de informação do usuário é a mesma no horário de trabalho e no horário de lazer?• Os sites levam em consideração o que você está fazendo ou como você está se sentindo no momento em que os acessa?• A forma como você utiliza o computador é a mesma quando você está em uma mesa e quando está com o notebook no colchão da sala vendo TV?
    • • E se o Jornal Nacional transmitisse somente notícias boas para relaxar e tranqüilizar as pessoas que trabalharam o dia todo e estão estressadas?
    • Weekend News TodaySite que só publica notícias“boas”.
    • Ambientes Tecnológicos http://www.youlicense.com/ http://www.musicovery.com/
    • Intranet Por muito tempo não foram levadas a sério Motivos: 1.Alto investimento para manter profissionais qualificados cuidando de sua manutenção 2.Teoricamente,  “não alavancava vendas”,  pois não é um meio de comunicação com os clientes 3.Era tratado como um SISTEMA interno (leia-­‐se SOFTWARE)
    • Intranet Funcionário do Mês • Esta imagem da Intranet começou a mudar quando as empresas perceberam a importância da comunicação com seus funcionários • As empresas estavam cada vez maiores, espalhadas por vários países ao redor do planeta. Ainda assim • Somente 25% das empresas têm um funcionário dedicado totalmente à Intranet - Jakob Nielsen -­‐ 2007
    • Intranet A Intranet serve basicamente para: 1.Informar 2.Estimular 3.Automatizar Processos 4.Padronizar
    • IntranetCaracterísticas da Intranet• Os usuários são diferentes - Diferentes departamentos, cargos, níveis de conhecimento, necessidades especiais...• As tarefas são diferentes• O tipo de informação necessária é diferente• A capacidade das máquinas são diferentes - No caso das intranets, essa capacidade é conhecida, portanto os recursos devem ser adequados.
    • Intranet A aplicação dos conceitos da AI em Intranets 1. Organização 2. Rotulação 3. Navegação 4. Busca
    • Intranet 1. Organização • Diretório de Conteúdo (antigo Yahoo!) • Mais comuns: - Departamentos – Tarefas • Reduz a curva de aprendizagem • Muitos departamentos com tarefas semelhantes.
    • Intranet 2. Rotulação • Focar sempre no usuário - Pesquisa • Entrevista com Colaboradores • Card Sortings • Testes de Usabilidade • Análise de Métricas • Manutenção - Pesquisa – Termos de Busca
    • Intranet 3. Navegação • Menor nº de cliques possível • Trabalhos repetitivos • Ganho de tempo ($$$$$$) • Solução: - Links para  acesso  rápido  -­‐ home – Personalização – Links Cruzados
    • Intranet 4. Busca •  Alternativa rápida à navegação por seções o Notícias o Normas e Procedimentos o Execução de tarefa •  Análise constante para descobrir novos rumos para a arquitetura de SEARCH informação.
    • Intranet Para uma intranet REALMENTE funcionar: •  Centralize as decisões a um pessoa dedicada em tempo integral ao desenho da intranet; •   Cuidado com o Design centrado no Chefe • Prever o crescimento da intranet •  Mudanças drásticas necessitam de tempo para aprendizagem do novo sistema. Evitar essa mudanças. • PESQUISA, PESQUISA, PESQUISA... • TESTE, TESTE, TESTE, TESTE, TESTE...
    • Dispositivos Móveis  Mobile Phones (celulares e smarthphones)  PDA (Palmtops, PocketPCs, Netbooks)  Consoles Portáteis (vídeo-­‐games)
    •  O que é o celular no Brasil* 255 milhões de linhas 73 milhões de usuários de banda largamobile (Teleco) 82% de linhas pré pagas 77% ainda no GSM Centenas de aparelhos diferentes Dezenas de navegadores utilizados *Anatel – Junho 2012
    • Navegadores mais comuns para celular:Symbian (Nokia),RIM (Blackberry),Apple (iPhone),Windows Phone (vários celulares),Android (Google),Palm eLinux (vários celulares).
    • Mobilesites  Crescimento da rede Wi-­‐Fi;  Popularização da Tecnologia;  Acesso ao crédito;  A explosão do Android;
    • Mobilesites Brasil  -­‐ 50% dos acessos à web via mobile são feito pelo iPhone. (Segundo a própria Apple) StatCounter - 2012
    • 1. Utilização em diferentes situações eobjetivos: Negócios; Entretenimento; Busca por informações rápidas.
    • 2. Tela extremamente reduzida,se comparada aos computadorescomuns.
    • 3. Baixa velocidade deconexão na maioria dosacessos. O famoso caso da TIM.
    • #comofazComo tratar a Arquitetura deInformação em mobilesites?
    • “Pretinho  básico”PRIORIZAR conteúdos e interações: O que o usuário mais procuradentre os serviços da empresa? O que a empresa mais desejavender?
    • Back tothe Basics?Não necessariamente. Menos é Mais. Clichê.
    • HomeNavegação  “Rasa” Poucos  Sub-­‐níveis Menor nº de cliques possível
    • Minimizar ao máximo anecessidade de digitação. Sempre que possível, utilizar:  Droplists  Radio Buttons  Check boxes
    • Aproveitar ao máximocada clique.Aproveitar a rolagem dapágina.
    • Evitar:
    • Dar preferência a Linkscurtos:m.flickr.com m.globo.com m.yahoo.comm.google.com m.uol.com.brwww.rossiresidencial.com.br/mobile
    • Sempre deixar a opção do usuárioacessar o site na versão Desktop.
    • Design responsivo é sempre certo ?- Forma e função- Custo X Benefício- Web Standards
    • explorar recursos -Click to call - Click to SMS - GPS - Acelerômetro
    • Três modelos de Site:1. Modelo  “lista”para modelos mais básicos: 2. Modelo “grade”para modelos com teclado: 3. Modelo especial para touchscreen:
    • Tamanhos mais comuns de tela: Mobile Mobile Mobile Mobile Phone Phone Phone Phone 240 x 176 320 x 240 240 x 240 240 x 320 iPhoneFull iPhoneWeb iPhoneWeb 480 x 320 480 x 268 iPhone Full 320 x 416 320 x 480 http://developer.yahoo.com/ypatterns/about/stencils/
    • Modelo Lista: Navegação por setas Mínimo de Recursos gráficos possível Imagens com baixíssima qualidade Indicação de linksativos com mouseoverA Digitação dificultada (teclado numérico)
    • Modelo Grade: Navegação por setas ou esfera (BlackBerry) Recursos gráficos moderados Indicação de links ativos com mouseoverA Digitação facilitada no caso do BlackBerry
    • Modelo Touch: Navegação por toque Permite explorar mais recursos gráficos Não existe mouseover Evidenciar o que são botões e/ou links
    • Modelo Touch: Permite maior interação por interação com:  GPS  Sensor de movimento (acelerômetro)  Visualização de vídeos  etc.+ Evitar a necessidade de zoom Evitar links ou botões pequenos
    • IMPORTANTE: Mobilesites são miniaturas dos websites.
    • Mobilesitesou aplicativos Qual escolher?
    • Vantagens dos Mobilesites: Mais barato;  São indexados pelo Google;  Mais empresas  Não depende da aprovação da capacitadas; Apple; Desenvolvimento mais  Conteúdo não fica perdido emrápido; meio a 30 mil aplicativos; Facilidade de manutenção e  Não se restringe somente aoatualização; iPhone.  Garante que o usuário veja sempre a última versão do site; Distribuição facilitada;
    • Vantagens dos Aplicativos: Roda Offline e não implica em  Fica instalado no hardware docustos para o usuário; celular; Experiência mais rica de  Mantém um ícone para fácilnavegação; acesso;  Recursos Gráficos (3D e  Possibilidade de monetização. animação),  As vantagens do aplicativo tendem  Integração com câmera, a diminuir cada vez mais, devido à  GPS e Google Maps, evolução das conexões e dos browsers.  Acelerômetro,  Agenda,  Mobile Games, etc.
    • Qual a melhor opção?Depende dos objetivos do site.Planejamento é essencial.
    • TelevisãoDigital
    • TV no Brasil Televisão tem 97% de presença noslares brasileiros; 2 de dezembro de 2007: Rede Globo,Band, SBT, Record e TV Gazeta iniciaramjuntas as transmissões digitais; Modelo japonês de TV Digital.
    • Características básicas: Maior qualidade de Imagem e Som  Maior Experiência do Usuário Visualização de outras informações da tela  (saldobancário, resultados esportivos, notícias no rodapé, previsão meteorológica, redes sociais, etc.) Possibilidade de programação alternativa Integração com dispositivos móveis.“A  dona Maria vai poder assistir novela, ver oresumo do capítulo anterior, comentar sobre este capítulo, entre outras interações... somente apertando um botão do controle remoto”.
    • Redes Sociais: A Verizon lançou nos Estados Unidos o aplicativo que possibilita acessar as redes sociais Twitter e Facebook pela TV digital.
    • Ginga  -­‐ openginga.orgSistema Operacional desenvolvido pelaUniversidade Federal da Paraíba. Baseado em Linux, livre e de código aberto; Desenvolvedores do país todo podemaperfeiçoa-­‐lo Permite a criação de aplicativos para TV Digital;  Novo ramo de negócios - criação de aplicativos. Suporte a:  T-­‐Commerce  T-­‐Learning  T-­‐Health  T-­‐Gov
    • T-­‐Commerce Compras pelo controle remoto A TV é mais amigável ao público doque o computador; Credibilidade; A TV transmite maior segurança; Compra dentro do contexto daprogramação.
    • T-­‐HealthT-­‐Gov Boxee
    • T-­‐HealthT-­‐Gov
    • O que pode ocorrer eque devemos evitar: Excesso  de  controles-­‐remotos  oucontrole-­‐remoto  com  excesso  de  botões; Simplificar as interfaces para quepossam ser controladas com poucoscomandos; Caso contrário, a TV ficará tãocomplexa quanto o computador.
    • 1984 2000 2008 2013 2030 (?)
    • RequisitosOperacionais
    • Voltando ao começo da aula... Requisitos Operacionais: Determinam os profissionais e máquinas que atuarão na operação do website. Servem para avaliar a capacidade da empresa em manter o website operando após sua implantação Criação ou revisão processos internos (resposta de  e-­‐mails,  manutenção de conteúdos, entrega de pedidos, etc.) Capital Humano de desenvolvimento e manutenção. Restrições jurídicas ou políticas. Tempo. Estrutura de trabalho. Estratégia de Conteúdo.
    • Agora vamos falar de:Estratégia de Conteúdo
    • Conteúdo é o Rei.A web é , em suma, conteúdo. E só.
    • Estratégia de conteúdo é o ofício de planejar,desenvolver e gerenciar conteúdo informativo,em qualquer tipo de mídia.O desenvolvimento de uma estratégia deconteúdo deve ser precedido de uma auditoriae análise detalhada do conteúdo existente –Um processo críticamente importante que emgeral é mal trabalhado ou simplesmentedeixado de lado em muitos projetos digitais.
    • Em geral, a estratégia de conteúdo é responsável por: - Definição de temas e mensagens principais, - Recomendação de assuntos, - Definição do propósito do conteúdo - Análise de lacunas de conteúdo, - Frameworks de metadados e atributos de conteúdos relacionados. - SEO - Recomendações estratégicas para criação , publicação e governança de conteúdo.
    • Principais Atividades Estratégia editorial – Define os padrões de governança do conteúdo : Valores, tom de voz, linguagem, requisitos legais e regulatórios, controle de conteúdo gerado pelo usuário, Calendário editorial, e ciclos de vida do conteúdo.
    • Principais Atividades Web writing é a prática de escrever um conteúdo útil e usável , para uso principalmente em meios online. Isso é bem mais do que simples redação. É também uma profunda compreensão de princípios de experiência do usuário e compreensão da documentação de arquitetura de informação.
    • Principais Atividades Estratégia de Metadados é a identificação do tipo e estrutura de metadados, também conhecidos como dados sobre dados. Uma estruturação de metadados inteligente ajuda editores e publicadores a identificar, organizar, usar e reutilizar conteúdo de forma que seja relevante para sua audiência.
    • Principais Atividades SEO (Search engine optimization) é o processo de editar e organizar o conteúdo da página ou do site (incluindo metadados) como intuito de aumentar a relevância da página em mecanismos de busca.
    • Gestão de conteúdo é definir as tecnologiasnecessárias para captar, armazenar, entregar epreservar informações sobre uma organização.
    • Estratégia de canais de distribuição deconteúdo. Define como e onde , qualconteúdo estará disponível para os usuários.(Não esqueça do famoso e-mail marketing ecuide com mensagens que podem parecersimples intervenções publicitárias, mas quepodem ter algo a dizer.)
    • ConcepçãoO primeiro passo doabstrato para oconcreto
    • É a etapa de criação de soluções. Équando usamos todo o entendimento dosusuários e começamos a resolver seusproblemas com foco nos pontos fortes daestratégia de negócio. Aqui começamos adescobrir soluções inovadores à medidaem que são feitas as definições de Design.É o primeiro passo do abstrato aoconcreto.Tem por objetivo criar e avaliarorganização e apresentação dosconteúdos do site, bemcomo os modelos de interação.
    • Processo Iterativo 2. Avalia os Conceitos 4. Documenta Conceitos 1. Cria os Conceitos 3. Refina os Conceitos
    • 1. Criando os ConceitosÉ a etapa de pura estimulação cerebral, criaçãoe piração em cima do planejamento.O planejamento encontrou problemas. A funçãodo arquiteto de informação é encontrarsoluções criativas para esses problemas.
    • Concepção 2. Avaliando os Conceitos Depois de criados os conceitos, é hora de verificar se estes são apropriados ao projeto. o O modelo criado será fácil de usar e atende às necessidades do usuário? o Atende às necessidades do negócio? oÉ possível de ser implementado?
    • Concepção 3. Refinando os Conceitos Ao adotar uma idéia é necessário relacioná-la com outras idéias adotadas até chegar num MVP. o Casos de uso o Protótipos ágeis O Documentação
    • Modelos ConceituaisVamos falar de:Exemplo: Personas Cenários Experience Maps Design Games Brainstorm Sketch Protótipos – Próxima aula
    • PersonasO que são Personas?“Persona  é  uma  ferramenta  de  usabilidade  que  utiliza  pessoas  fictícias(pertencentes a seu público-alvo) para representar usuários de um site ouproduto.”  - Wikipedia O nome tem origem no teatro.
    • Personas Pra que serve?  Vai direcionar a arquitetura de informação de acordo com o planejamento.  Possibilita manter o foco nas necessidades e desejos do usuário;  Ajudam a questionar se tais recursos seriam realmente utilizados pelo público e se seria bem aceito/desejado;  Possibilita priorizar os esforços e recursos do projeto;  Elimina possíveis dúvidas durante o processo de design.  “Eu  imagino  que  o  usuário  iria  desejar  este recurso”;  “Se  minha  mãe  fosse  uma  cliente,  ela  iria  quer fazer  essa  tarefa”.  Permite a constante evolução do design centrado no usuário.
    • Personas Como criar Personas? Deve-­‐se  ter  o  planejamento  em  mãos,  ou  seja:  Pesquisa  de  público-­‐alvo;  Entrevistas pessoais com os clientes, prestadores de serviço, funcionários, revendedores e todos os possíveis públicos do site;  Focus Group;  Etc. A aplicação destas pesquisas possibilita identificar exatamente quais são os públicos do site e quais suas necessidades com relação ao meio internet: objetivos, cenários de uso, tarefas e preferências.
    • PersonasUma persona deve conter: Um nome - facilita a diferenciação entre  Habilidades com informática;cada persona e a torna mais real. O nome  Alguns poucos dados sobre a vidadeve traduzir as características da pessoa. pessoal, a fim de melhorar a memorizaçãoEx.: Se a persona pertence à classe social A do  perfil  e  torná-­‐lo  mais  interessante;e  é  jogadora  de  pólo,  não  é  ideal  chamá-­‐la  Motivações e necessidades;de  “Zé”ou  de  “Luís  Inácio  Lula  da  Silva”.  Tarefas e objetivos em relação ao site a Uma foto - também deve ser de acordo ser desenvolvido.  Ex.:  “comparar oscom o perfil da persona. Evitar fotos de diferentes  tipos  de  tarifas  do  serviço”,pessoas conhecidas. “aplicar  dinheiro  de  sua  conta-­‐corrente”, Dados demográficos (sexo, idade, etnia, “visualizar  os  mais  novos  lançamentos  deescolaridade, estado civil, classe social, etc.) filmes”.,  Uma frase que resuma a persona em Profissão, cargos e responsabilidades; relação  a  seu  site.  Ex.:  “O  revendedor  multi-­‐ Algumas poucas características que marcas”,  “o  revendedor  especializado”,  “odeterminam sua personalidade; comprador  assíduo”,  “o  comprador  por impulso”.
    • Personas  Os dados devem ser escritos em forma de narrativa, como em uma história real.  Evite características cômicas, pois tiram o foco e podem perder a credibilidade da persona. Exemplo  -­‐  Locaweb
    • Cenários O que é? Cenários são pequenas histórias sobre um usuário específico e sua atividade no site. São usados geralmente junto com as personas para definir quais devem ser os principais recursos do site e quais deles são os mais importantes (e que devem ganhar destaque no site). Os cenários podem ajudar na definição de tarefas para os testes de usabilidade também.
    • Cenários Pra que serve? O objetivo dos cenários é ilustrar uma situação comum do cliente em relação à  empresa  e  tentar  “prever” (imaginar) qual seria o próximo passo do cliente. Ex.:  “Andréa está no shopping fazendo compras, mas na hora de realizar o pagamento seu cartão não funciona corretamente. Frustrada, Andréa vai até sua casa, acessa o site do cartão e deseja obter respostas sobreo que pode ter acontecido com seu cartão”. Os cenários podem ser:  Direcionados  a  tarefas/objetivos:  “Você irá viajar no dia seguinte e deseja confirmar os dados e horários de seu vôo”.  Elaborados: junta os itens da persona à uma tarefa específica, de forma que se analise melhor o contexto de uso da ferramenta.
    • Personas / Cenários Desafios Observar as pessoas é fácil, mas resumir essas pessoas em poucas palavras ou ações é um pouco mais complicado. Deve-­‐se  tomar  cuidado  para  não  criar  personas  que  caracterizam um ideal de consumidores, muitas vezes exploradas pela empresa em campanhas publicitárias. Deve-­‐se  analisar  a  fundo  o  público  e  retratar  quais  são  suas  reais necessidades e anseios. Um persona mal planejada ou mal desenhada pode desestruturar o projeto do site, pois é ela que vai guiar todo o processo. Personas são um meio muito eficaz de comunicação interna da equipe. Na Microsoft, por exemplo, esse método é muito utilizado nos projetos de software. Eles criam cartazes atraentes comparando as características das personas, imprimem camisetas, bonés e até mesmo canecas com os seus rostos, tudo para lembrar constantemente a equipe do foco do projeto.
    • Modelos Conceituais O que são? Sinônimos: Mapas Conceituais / Diagramas de Afinidade  São diagramas que mostram relações entre diferentes conceitos abstratos.  Utilizado para evidenciar a variedade de idéias e interações dentro de um website e as relações entre elas.
    • Modelos ConceituaisComo são?Basicamente, eles são compostos por objetos e verbos.Mostram a relação entre dois objetos dentro de um determinado contextode forma bem simples.OBJETO - VERBO - OBJETO passeia com que veste Homem Cachorro Coleira
    • Modelos ConceituaisPara que servem?Em grandes projetos, com inúmeras interações, fica complicado explicarcomo essas relações e interações funcionariam na prática.Os modelos conceituais são utilizados para comunicar essas idéias (conceitosabstratos) para equipe envolvida no brainstorm.
    • Modelos ConceituaisComo montar? Nó Nó -­‐ Conteúdos -­‐ Processos -­‐ Pessoas -­‐ Dados -­‐ Grupos Categorias -­‐ Eventos -­‐ Sistemas -­‐Outros conceitos
    • Modelos ConceituaisCom o que se parece?
    • Modelos ConceituaisExemplo:
    • Modelos ConceituaisExemplo:
    • Modelos ConceituaisExemplo:
    • Brainstorm Frog DesignExemplo: -Você deve pensar fora da caixa, mas dentro da estratégia. -Comece com as perguntas corretas. Isso vai orientar você para as respostas corretas. – De Design. -Quanto mais tempo você dá para o brainstorm, menos tempo terá para se concentrar. -Ao criar metas impossíveis, mais provavelmente você irá pensar em soluções inesperadas. - Não se apaixone por suas idéias. Haja como se você estivesse numa troca de casais até que acabe seu tempo.
    • Brainstorm IDEO - As sete regras do brainstormExemplo: Adie o julgamento Não existem más idéias nesta etapa. Haverá tempo mais tarde para julgá-las. Estimule idéias radicais Quase sempre são as idéias radicais que geram inovação. É sempre mais fácil trazer idéias à realidade mais tarde! Construa sobre as idéias dos outros Pense  em  “e…”  em  vez  de  ‘mas…’.  Se  você  não  gosta  de  alguma  idéia, desafie a si mesmo a construir algo sobre essa idéia e torná-la melhor. Mantenha o foco no tópico do brainstorm Os melhores resultados são obtidos quando todos mantiverem a disciplina. Seja visual Tente recrutar o lado lógico e o lado criativo do cérebro. Somente uma conversa por vez Permita que idéias sejam ouvidas para que outras idéias se criem sobre elas. Almeje quantidade Estabeleça um objetivo alto para o número de idéias a serem criadas no brainstorm e ultrapasse-o! Lembre-se de que não há necessidade de explicar exaustivamente a idéia já que ninguém está julgando. Idéias devem fluir rapidamente.
    • SketchingExemplo: - Variedade rápida de idéias - Exploração de Alternativas - Melhores Discussões – Visual Thinking - Carregue um caderninho de rabiscos - Tenha um kit básico de ferramentas - Não confunda com protótipo de papel
    • Modelos ConceituaisExemplo: Em design, quantidade e qualidade são grandezas diretamente proporcionais. Nos vemos na próxima aula.
    • Especificação
    • Processo Iterativo 2. Avalia os Conceitos 4. Documenta Conceitos 1. Cria os Conceitos 3. Refina os Conceitos
    • Documentando osConceitosÉ nesta fase que as regras e diretrizes daarquitetura de informação são formalizadas nopapel.Esta fase é importante para garantir que todo oprocesso de design posterior siga essas diretrizes.Trata-­‐se  da conclusão de toda a etapa deConcepção, incluindo o material de pesquisa.
    • Definição de produtoA definição de produto é um documento comtodos os conceitos que foram formados a partirda pesquisa acerca das expectativas do cliente edas necessidades dos usuários.É uma referência estável para o desenvolvimentocoeso de todas as questões subjetivas do projetocomo design de interação , design visual eestratégia de conteúdo. Neste documentoestarão as principais conclusões da pesquisa e aconsolidação das expectativas do cliente para quetodo o projeto se desenvolva de maneiracoerente.
    • Mapa do Site É uma representação visual da estrutura do site. Este documento indica como o conteúdo e a organização estão organizados e consequentemente, como os usuários irão navegar no sistema.
    • Fluxogramas É uma representação visual das etapas que o usuário passa para realizar as tarefas mais complexas do site. Serve para representar um processo complexo e não uma estrutura hierárquica. Geralmente utilizado em projetos com conteúdo gerado pelo usuário ou em que requerem um esforço relativamente complexo de ser comunicado.
    • Inventário deConteúdoLista detalhada de tudo o que deverácompor o site / sistema em ordem deimportância e diferenças defuncionalidade.É o principal meio para entendercompletamente uma estrutura deconteúdo e documentar suas variações ederivações sem deixar nada de lado.
    • Wireframes É um documento que tem a função de estruturar o conteúdo e as funcionalidades de um projeto. A idéia é poder visualizar a hierarquia e a organização do conteúdo e das funcionalidades do site ou sistema que está sendo construído. É em preto e branco mesmo. O objetivo é estruturar o conteúdo e funcionalidades sem interferência do Layout que vai tratar posteriormente de tipografia, imagens, cores entre outros recursos visuais.
    • Arquitetos de Informação; que mostram e validam uns com os outros o futuro site, além de usarem na forma de protótipo em testes de usabilidade. Designers; que usam como base gráfica para o desenvolvimento do Layout. Redatores; que preenchem a estrutura com o conteúdo. Desenvolvedores; que irão fazer tudo funcionar.Quem é que usa? Clientes; que validam tudo de acordo com os requisitos do projeto. Usuários; que irão usá-lo como protótipo nos testes de usabilidade.
    • Estamos chegando na ponta do Iceberg
    • Projetando uma Vaca: As etapas do Wireframe Sketch (Rabiscoframe) Identificação (Mockup) Representação Protótipo Desenvolvimento Layout
    • Etapas do Wireframe: Sketch (low fidelity)
    • Etapas do Wireframe: Identificação
    • Etapas do Wireframe: Representação (High Fidelity)
    • Etapas do Wireframe:Protótipo Navegável
    • Ferramentas - Prototipação e Wireframe Mockup ScreensFore UI http://mockupscreens.com/http://www.foreui.com/ DenimAxure http://dub.washington.edu:2007/projects/denim/http://www.axure.com/ Fluid IAIRise http://www.fluidia.org/http://www.irise.com/ OversiteOmnigraffle http://taubler.com/oversite/http://www.omnigroup.com/applications/OmniGraffle/ Microsoft VisioBalsamic http://office.microsoft.com/pt-br/visio/FX100487861046.aspxhttp://www.balsamiq.com/ Adobe InDesignJustprotohttp://www.justproto.com/en/ Power Point (Nããããããããããão!!!!)
    • Baixa fidelidade X Alta fidelidade Vantagens Vantagens - Rapidez - Validação consistente e persuasiva com o cliente. - Custo - Facilita a compreensão de montagem do layout e da programação - Liberdade para o designer dos aplicativos. - Facilita a refação - Possibilita o teste com usuários antes da definição do layout. Desvantagens Desvantagens - Pouca credibilidade (principalmente com - Requer esforço e tempo, o que pode atrasar o processo e aumentar clientes) custos - Maior margem de erros - O foco pode se desviar prematuramente da arquitetura de - Difícil de ser testado informação para a interface e design visual.- Exige mais de programadores e designers - Pode amarrar o trabalho do designer - Requer desenvolvimento em conjunto. - Menos intuitivo.
    • - Enumere as páginas do Wireframe/Protótipo.- Coloque nomes claros nas páginas do Wireframe e nosarquivos de protótipos, incluindo a data da última revisão.
    • Dicas:Faça comentários, descreva textualmente as interações.Pode usar as laterais do protótipo para isso.Avalie se é mais produtivo simular as interações ou explicá-las.
    • Dicas: - Consulte Bibliotecas de padrões de navegação (Pattern Libraries). Comece a fazer a sua própria. - Estabeleça padrões para o desenvolvimento de Wireframes em grupo. Algumas bibliotecas de padrões: Martijn van Welie http://www.welie.com/patterns/ Yahoo Pattern Library http://developer.yahoo.com/ypatterns/ E muitas outras: http://delicious.com/viniciuskrause/biblioteca-de-padroes
    • Dicas:Distribua o conteúdo em ordem de importância decrescente, decima para baixo, da esquerda para direita. Lembre da hierarquiavisual. Mais importante Menos importante
    • Dicas:Lembre-se das convenções. Se não lembrar, dê umaolhada no que já existe.
    • Dicas:Faça testes informais com você mesmo ecom outras pessoas enquanto desenha.
    • Dica final:WIREFRAMENÃO ÉLAYOUT !!!
    • Implementaçãoe metodologias
    • ImplementaçãoO que é :É o acompanhamento do projeto durante o desenvolvimento, após asdefinições de Design. É a hora de garantir que os cliente ou desenvolvedoresnão tenham nenhuma dúvida sobre o projeto e que as decisões de designserão implementadas de forma coerente e detalhada.Também é quando ajudamos clientes que já tem um produto desenvolvido amelhorar seus resultados e desenvolver as habilidades de UX internamente.Objetivos:Assegurar o padrão de qualidade e a consistência do design nodesenvolvimento de projetos.
    • im.ple.men.tar1 Executar (um plano, p ex)2 Levar à prática por meio deprovidências concretas.3 Prover de implementos.(Dicionário Michaelis)
    • Fluxo básico de projetos digitaisProspeção Planejamento estratégico Criação Desenvolvimento Briefing AI Conteúdo Produção Publicação
    • O que entregamos:Pesquisa Concepção Especificação Workshops Relatórios Workshops Relatórios Workshops Relatórios Estruturas Wireframes
    • CriaçãoA função da arquitetura deinformação não é  “engessar”  acriação.O criador tem liberdade paraalterar a disposição doselementos se julgar necessário,mas o arquiteto de informaçãodeve validar se essas alteraçõesnão prejudicam a usabilidade dosite ou a experiência do usuáriocomo um todo.
    • HTML / CSS Deve validar:  Navegação (hiperlinks);  Acessibilidade;  Usabilidade;  Disposição dos elementos da</head> mesma forma do layout.<body>
    • DesenvolvimentoDeve validar as interações: Mensagens de erro econfirmação; Validação de formulários; Condicionais de navegação; etc.
    • Mas não adiantaas demais áreastomarem ciênciado projetosomente nofinal.
    • É imprescindível apresença da equipetoda durante todo oprocesso de design eimplementação.Garantir: Escopo Prazo Qualidade
    • Os problemas freqüentesna implementação deprojetos fizeram muitasoutras metodologiassurgirem, a fim dechegarem a um ideal.Foram chamadas deMetodologias Ágeis
    • Introdução às Metodologias Ágeis Minha avó me chamou para visitá-­‐la  e  para degustar seu famoso “arroz temperado” Sábado, às 13h, em sua casa. Baseado na explicação de Guilherme Chapiewski -­‐  http://gc.blog.br/
    • Como ela chegou nestehorário final? Ela irá acordar às 8h; Banho até as 8h30min; Café da manhã até as 9h; Consulta médica às 10h; Supermercado às 11h; Voltará para a casa às 12h; Almoço pronto às 13h.
    • O ônibus atrasar para ir ao médico?O médico demorar para atendê-­‐la? Não tiver os ingredientesnecessários no supermercado?
    • “Meu filho, você seimporta se eu fizeraquela sopa quevocê adora, ao invésdo arroz temperado?”
    • Objetivo primário:Reencontrar minha avó(concluído com êxito)Objetivo secundário:Saciar minha fome(concluído com êxito)
    • Escopo Variável Sempre há um escopo Teoricamente, devepermanecer do início ao fim doprojeto, pois foi assimprescrito no contrato.O que há, na verdade, é umailusão deprevisibilidade
    • Cliente acredita queencontrará: Escopo Previsível Prazo Previsível Custo Previsível
    • Empresa contratada acredita que saberá:  O que terá de fazer;  Em quanto tempo;  Quanto vai ganhar;  Com quais recursos.
    • Mito nº1 O cliente sabe o que quer desde o início do projeto; Inclusive de seus problemas de comunicação.
    • Mito nº2 A equipe consegue estimar exatamente o tempo necessário para produção.
    • Mito nº3 O cliente consegue comunicar todos os requisitos ou problemas que pretende resolver.
    • A previsibilidadevai por águaabaixo.
    • Variáveis dosprojetos: Custo Prazo Qualidade Escopo
    • O escopoabsorve asincertezasdo projeto
    • Freqüência de uso dos recursos de um sistema: Priorização do Escopo Princípio de Pareto se aplica ao software: 20% das funcionalidades geram 80% do valor para o cliente.Fonte: Lean Software Development, Mary Poppendieck e Tom Poppendieck,  Addison-­‐Wesley,  2003,  p.  32
    • 24 horas Ciclo PDCA 1. Plan 2. Do 3. Check 4. Act 2 semanasProcesso Iterativo eIncremental
    • Equipes enxutas e eficazes Entre 5 e 10 membros Auto-­‐organizadas Multidisciplinar
    • EntregasFreqüentes Conseqüência da priorização Metáfora da “Casa  Limpa”
    • Tempo Fluxo de Caixa do cliente Foco no Essencial - ROI Retorno desde o início do projeto (menor, mas contínuo)
    • Simplicidade éessencial
    • Flexibilidade paramudanças Mesmo durante a implementação; Mudanças garantem a vantagemcompetitiva do cliente.
    • Feedback rápido  O clienteé quem mais entende de seu produto e objetivos;  Deve estar presente em todo o processo de desenvolvimento;  Contribui para priorizar o escopo;  Economia de tempo e flexibilidade para ajustes.AGÊNCIACLIENTE
    • Incentivarcomunicaçãoentre a equipe Deixarambiente de trabalhoagradável; Trazer as pessoas paratrabalharem mais próximas; Fornecer ferramentas práticaspara facilitar essa comunicação.
    • Entregar sistemafuncionandoSEMPRE!Garantido pela: Iteratividade Comunicação facilitada Feedback rápido Escopo variável
    • Validar e testarsempre!Testar uma vez é melhordo que testar nenhuma.
    • O que todas asmetodologias buscam? Sistema para resolver umproblema do cliente; Sistema simples de manter eevoluir; Projeto com menor custo eprazo possível.
    • Metodologia Ágil Cultura Ágil
    • Cultura Ágil:Em 2001, 17 especialistas emgerenciamento de projetosforam a fundo nasmetodologias para descobriro que elas tinham emcomum.
    • Manifesto Ágil  Indivíduos e interações mais que processos e ferramentas  Software que funciona mais que documentação completa  Colaboração do cliente mais que negociação de contratos  Responder à mudança mais que seguir um plano www.agilemanifesto.org
    • A adoção com sucesso de metodologias ágeis podem serconsideradas como diferencial competitivo para asagências e produtoras de software.
    • É uma forma degarantir sempre aqualidade de seustrabalhos e o ROI docliente antes do tempo
    • E, claro,garantir asatisfação deseu cliente
    • Testes deUsabilidade
    • Mundo daArquitetura deInformação
    • Listas de DiscussãoSigia (Special Interest Group Information Architecture)American Society for Information Science and Technology (ASIS&T)http://www.asis.org/IXDAInteraction Design Associationhttp://www.ixda.org/join.phpAifiAAsilomar Institute for Information ArchitectureInglês: http://lists.iainstitute.org/listinfo.cgi/iai-members-iainstitute.orgPortuguês: http://lists.ibiblio.org/mailman/listinfo/aifia-ptAcesso Digitalhttp://groups.google.com/group/acessodigitalDesinteracInstituto Faber Ludenshttp://groups.google.com/group/desinterac
    • EventosUX weekAdaptive Path EuroIA American Society for Information Science and Technologyhttp://www.uxweek.com/ (ASIS&T) http://www.euroia.org/IA SummitAmerican Society for Information Science and UX LondonTechnology (ASIS&T) Clearlefthttp://www.iasummit.org/ http://uxlondon.com/Usability WeekNielsen Norman Group Interaction South Americahttp://www.nngroup.com/events/ IXDA http://www.interaction-southamerica.org/?lang=enInteractionInteraction Design Associationhttp://interaction.ixda.org/
    • FerramentasPrototipação e wireframeFore UIhttp://www.foreui.com/ Mockup Screens http://mockupscreens.com/Axurehttp://www.axure.com/ Denim http://dub.washington.edu:2007/projects/denim/IRisehttp://www.irise.com/ Fluid IA http://www.fluidia.org/Omnigrafflehttp://www.omnigroup.com/applications/OmniGraffle/ Oversite http://taubler.com/oversite/Balsamichttp://www.balsamiq.com/ Microsoft VisioJustproto Adobe InDesignhttp://www.justproto.com/en/
    • Ferramentas Card-sorting Web Sort http://websort.net/ Optimal Sort http://www.optimalsort.com/pages/default.html Questionários on-line Wufoo http://wufoo.com/ Google Docs http://docs.google.com/ Brainstorm e Mapas mentais Bubbl http://www.bubbl.us/ Mindmanager http://www.mindjet.com/
    • Análise de MetadadosGoogle Analyticshttp://www.google.com/analytics/Google Adwordshttp://www.google.com/adwords/Google Trendshttp://www.google.com/trends/Alexahttp://www.alexa.com/ Teste de usabilidade Clicktale http://www.clicktale.com/ Userfly http://userfly.com/ Morae http://www.techsmith.com/morae.asp Faststone Capture http://www.faststone.org/FSCaptureDetail.htm Jing http://www.jingproject.com/
    • Bibliotecas de Padrões de navegaçãoYahoo Pattern Libraryhttp://developer.yahoo.com/ypatterns/Weliehttp://www.welie.com/Muito mais:http://delicious.com/viniciuskrause/biblioteca-de-padroes Extensões Measure it https://addons.mozilla.org/pt-BR/firefox/addon/539 Firebug https://addons.mozilla.org/pt-BR/firefox/addon/1843 Web Developer https://addons.mozilla.org/pt-BR/firefox/addon/60 Delicious http://delicious.com/help/quicktour/firefox IE Tab https://addons.mozilla.org/pt-BR/firefox/addon/1419
    • Blogs – Mundo aforaLouis Rosenfeld Adaptive Pathhttp://louisrosenfeld.com/home/ http://www.adaptivepath.com/blog/Peter Morville Boxes and Arrowshttp://www.findability.org/ http://www.boxesandarrows.com/Jakob Nielsen UX Magazinehttp://www.useit.com/ http://uxmag.com/Donald Norman A List Aparthttp://jnd.org/dn.pubs.html http://www.alistapart.com/Luke Wroblewski UX Boothhttp://www.lukew.com/ff/ http://www.uxbooth.com/Jakub Linowski Smashing Magazinehttp://linowski.ca/thoughts/ http://www.smashingmagazine.com/http://wireframes.linowski.ca/Jesse James Garrethttp://blog.jjg.net/Donna Spencerhttp://maadmob.net/donna/blog/
    • Blogs – BrasilLuiz Agner Arquitetura de informaçãohttp://www.agner.com.br/ http://arquiteturadeinformacao.com/Rogério Pereira UX Blog - Locawebhttp://www.rogeriopa.com/ http://uxblog.locaweb.com.br/Leonardo Xavier Talk2http://leonardoxavier.typepad.com/mobilizado/ http://www.talk2.com.br/Luli Radfahrerhttp://www.luli.com.br/Frederick van Amstelhttp://usabilidoido.com.br/MAQhttp://www.bengalalegal.com/
    • Empresas Google http://www.google.com/corporate/ux.html Apple http://goo.gl/JmL3f IDEO http://www.ideo.com/work/human-centered-design-toolkit/ Huge http://www.hugeinc.com/ Frog http://www.frogdesign.com/ Cooper http://www.cooper.com/ Facebook http://developers.facebook.com/policy/ Clearleft http://clearleft.com/ FI http://www.f-i.com/ Adaptive Path http://www.adaptivepath.com/
    • 1 Respeitar o processo mas saberquando ignorá-lo.Tudo tem um jeito certo de fazer e um jeitoque tem que ser feito. É importante aplicaras técnicas corretas da forma correta, masàs vezes é importante resolver o problemade uma forma eficiente e sem frescura.
    • 2 Acreditar no que está fazendo e selivrar das buchas da forma maiseficiente possível.Não gaste um precioso tempo da sua vidafazendo uma coisa que você mesmo nãoacredita. As buchas virão com certeza,mas se empenhe em fazer algo que sejainteressante, onde você possa aprenderalguma coisa e que te dê orgulho.
    • 3 Não se apegar ao projeto. O mundotodo muda e o seu projeto também.As vezes a melhor solução pode não sairda sua cabeça. Esteja atento as melhoressoluções e não a sustentação da suavontade.
    • 4 Compartilhe rápido e frequentemente.Design centrado na preguiça não é umacoisa muito inteligente; iteratividade éfundamental pra qualidade. Fazer dezvezes a mesma página pode te livrar defazer dez vezes o mesmo site.
    • 5 Não seja um mala.Esqueça o seu ego. Não faça tudosozinho. Admita quando não souber dealguma coisa e vá atrás de saber oudescobrir quem sabe. Lembre-se de quevocê não faz sites para você mesmo entãonão faz muito sentido brigar pelo o quevocê simplesmente acha melhor.Argumente, defenda suas O usuário é ojuiz do seu trabalho.
    • 6 Coloque o seu na reta.Não seja um bunda mole. Tome decisões,tenha iniciativa, não fique esperandochegar serviço na sua mão. Existe ummundo de coisas a serem feitas. Inventemoda e faça o melhor possível pararesolver qualquer problema que o impeçade fazer um bom trabalho.
    • 7 Acompanhe o projetos do começo ao fim.Nossa responsabilidade não acaba quandoentregamos o Wireframe. Nosso compromissoé com o produto final, no ar, funcionando edando resultado. Acompanhe o processo dedesenvolvimento e vá atrás dos fundamentosdo seu projeto seja com cliente, planejamentoou atendimento.
    • 8 Aprenda como se faz; saiba um poucopelo menos de HTML CSS e quem sabePHP.Além de aumentar sua versatilidadeprofissional, vamos dar menos trabalhopara desenvolvedores e saber proporsoluções adequadas.
    • 9 Comunicar é mais importante quedocumentar.Não adianta produzir um monte depapelada técnica se ninguém as usa eninguém as entende. Um papel e canetamuitas vezes resolve o problema. Oimportante é ter certeza de que todos osinteressados entenderam sua mensagem.
    • 10 Foco na qualidade do seu trabalho.Se você não fizer isso pela empresa, façapor você. Preocupe-se em facilitar a vidadas pessoas para que no fim das contasalguma coisa legal vá para o ar e vocêtenha contribuído para isso acontecer.