Projetando ExperiênciasArquitetura de Informação e User Experience DesignVII Semana de Biblioteconomia – ECA/USP26.set.201...
Oi. Meu nome é Paula =)
Oi. Meu nome é Paula =)• Formada na Biblio-ECA/USP em 2009
Oi. Meu nome é Paula =)• Formada na Biblio-ECA/USP em 2009• Trabalho como User Experience Designer
Oi. Meu nome é Paula =)• Formada na Biblio-ECA/USP em 2009• Trabalho como User Experience Designer• Semana de Biblio = Com...
O AMOR POR LIVROS ME LEVOU      PARA ABIBLIOTECONOMIA
e um livro me “tirou” das Bibliotecas…                                  • Ansiedade de Informação : como                  ...
Arquiteto de Informação, por Wurman                                     devem ser tornar o                                ...
Arquiteto de Informação, por Wurman                                              devem ser tornar o                       ...
Arquiteto de Informação, por Wurman                                                  devem ser tornar o                   ...
Arquitetura de informação?
Design de                    Interação?Arquitetura de informação?
CONCEITOS QUE VALEM A PENA VISITAR.
CONCEITOS QUE VALEM A PENA VISITAR.                       CONHECER
CONCEITOS QUE VALEM A PENA VISITAR.                       CONHECER                        REVISITAR
CONCEITOS QUE VALEM A PENA VISITAR.                       CONHECER                        REVISITAR                      A...
CONCEITOS QUE VALEM A PENA VISITAR.                       CONHECER                        REVISITAR                      A...
ARQUITETURA DE INFORMAÇÃO #1 “Arquitetura de Informação é a arte e a ciência     de organizar, estruturar e categorizar a ...
ARQUITETURA DE INFORMAÇÃO #1              O princípio básico da Arquitetura de Informação é a busca              pelo equi...
ARQUITETURA DE INFORMAÇÃO #1                                  @louisrosenfeld   @morville                          são bib...
USER EXPERIENCE #2
USER EXPERIENCE #2Como eu me sinto quando...
USER EXPERIENCE #2     "a maneira como uma pessoa se sente     sobre o uso de um produto, sistema ou       serviço. [Isso ...
USER EXPERIENCE #2
USER EXPERIENCE #2
USER EXPERIENCE #2
USER EXPERIENCE #2
USER EXPERIENCE #2Product Experience vs User Experience
USABILIDADE #3
USABILIDADE #3 Usabilidade é o componente do Standard de ISO 9241-11 (1998), e é definido da seguinte forma: “Usabilidade ...
USABILIDADE #3Atributos (de uma interface) com boaUsabilidadepor Jakob Nielsen•    Ser fácil de aprender•    Ser eficiente...
USABILIDADE #3Fonte: Design para a Internet. Felipe Memória
USABILIDADE #3Jakob Nielsen               Donald NormanPhd. IHC, “user advocate”   Psicólogo e Cientista                  ...
USABILIDADE #3BônusHá usabilidade em TUDO mesmo, até no jeito certo de usar o papel higiênico (se quiser evitaro desperdíc...
USABILIDADE #3BônusHá usabilidade em TUDO mesmo, até no jeito certo de usar o papel higiênico (se quiser evitaro desperdíc...
DESIGN CENTRADO NO USUÁRIO#4Lembra dos Controles?
DESIGN CENTRADO NO USUÁRIO#4Lembra dos Controles?           Lembra do “tio” Norman?
DESIGN CENTRADO NO USUÁRIO#4Lembra dos Controles?           Lembra do “tio” Norman?
DESIGN CENTRADO NO USUÁRIO#4  por Donald Norman  • A psicopatologia das coisas do    dia-a-dia  • A psicologia nas ações d...
DESIGN CENTRADO NO USUÁRIO#4                                                         Um produto bem projetado envolve muit...
DESIGN CENTRADO NO USUÁRIO#4                                                      1 - Identificar Requisitos              ...
DESIGN CENTRADO NO USUÁRIO#4       “O Design Centrado no Usuário, quando radical demais, acaba se    tornando economicamen...
DESIGN DE INTERAÇÃO #5by @p_kwiatkowski
DESIGN DE INTERAÇÃO #5      Design de Interação é a arte de facilitar ou fomentar interações entre             humanos med...
IHC #6IHCInteração Humano ComputadorInteração homem-computador (human-computerinteraction): É uma disciplina muito próxima...
CONTENT STRATEGY #7                                                                  “Planejamento, design e criação de   ...
ENTREGÁVEISCONCEPÇÃO                   IMPLEMENTAÇÃORoad Map                    Casos de UsoBenchmark                   Do...
ENTREGÁVEIS (alguns) Road Map É um plano de ação, um roteiro, um passo-a-passo para o desenvolvimento de um projeto que pr...
ENTREGÁVEIS (alguns)Jornada do Usuário(Consumer Journey)Entender o caminho que diferentes personaspercorrem na experiência...
ENTREGÁVEIS (alguns)Mapa do Site e FluxogramaMapa do Site é um organograma mostrando todas aspáginas que o site irá conter...
Mas o que eu faço afinal ?http://www.intuicaocriativa.wordpress.com/
CASES (alguns)Record NewsFoco nos vídeos, divisão das categorias conformeprogramação. Ressaltar os apresentadores.        ...
CASES (alguns)RebeldeAtender público da Novela, amantes da banda, e fã clube.Dar espaço para Covers da Banda.             ...
CASES (alguns)CineclickReestruturação da Arquitetura do site para dar visibilidade ehierarquia ao conteúdoEsse + Esse = re...
CASES (alguns)OfficebookA ideia era usar a Timeline do Facebook - através do FacebookConnect - e entregar de volta para o ...
tá, agora sou Arquiteta de Informação, preocupada com o usuário e                      Usabilidade das interfaces
mas e a biblioteconomia?
Paul Otlet: o precurssor                           1892 . "Something about bibliography”                           Os livr...
Ranganathan: o defensor                     1931 . “Raganathan”                     1.   Os livros são para serem usados: ...
Bibliotecários sempre criaram e   organizaram informação.Responsáveis pela organização       do Conhecimento
Bibliotecário trabalha com informação e todos osformatos. É capaz de fazer busca em todos os recursosinformacionais. Sabe ...
E... Como o conhecimento de Arquitetura deInformação pode ser usado nas bibliotecas?
Estudo de Comportamento de Busca e Uso das novas tecnologias.  = Infoeducação : ensinar a buscar informação, reconhecer a...
 Técnicas de rotulação, mapas conceituais, mapas mentais, designcentrado no usuário= Bibliotecas centradas no usuário, em...
CAMINHO DAS PEDRASLista de Discussãohttp://lists.ibiblio.org/mailman/listinfo/aifia-ptGrupo no Facebookhttps://www.faceboo...
Obrigada ;)  @paulinhah
Projetando experiencias
Upcoming SlideShare
Loading in …5
×

Projetando experiencias

5,481 views

Published on

Published in: Career
  • Be the first to comment

Projetando experiencias

  1. 1. Projetando ExperiênciasArquitetura de Informação e User Experience DesignVII Semana de Biblioteconomia – ECA/USP26.set.2012 por Paula Macedo
  2. 2. Oi. Meu nome é Paula =)
  3. 3. Oi. Meu nome é Paula =)• Formada na Biblio-ECA/USP em 2009
  4. 4. Oi. Meu nome é Paula =)• Formada na Biblio-ECA/USP em 2009• Trabalho como User Experience Designer
  5. 5. Oi. Meu nome é Paula =)• Formada na Biblio-ECA/USP em 2009• Trabalho como User Experience Designer• Semana de Biblio = Compartilhar minha experiência e aprender com vocês
  6. 6. O AMOR POR LIVROS ME LEVOU PARA ABIBLIOTECONOMIA
  7. 7. e um livro me “tirou” das Bibliotecas… • Ansiedade de Informação : como transformar informação em compreensão. Richard Saul Wurman “Existe um tsunami de dados que bate sobre as portas do mundo civilizado. É um maremoto crescente de dados desconexos formado por bits e bytes, vindo em uma forma desorganizada, descontrolada, incoere nte e cacofônico”.Obs. Grifos e adaptações livres
  8. 8. Arquiteto de Informação, por Wurman devem ser tornar o complexo claro, transformar a informação em algo compreensível para outros seres humanos.Obs. Grifos e adaptações livres
  9. 9. Arquiteto de Informação, por Wurman devem ser tornar o complexo claro, transformar a informação em algo compreensível para outros seres humanos. - alguém que humaniza a tecnologia focando nas pessoas. - organiza os padrões inerentes da informação, torna o complexo, claro. - cria estruturas ou mapas de informação que permite outros encontrarem seu caminho para o conhecimentoObs. Grifos e adaptações livres
  10. 10. Arquiteto de Informação, por Wurman devem ser tornar o complexo claro, transformar a informação em algo compreensível para outros seres humanos. - alguém que humaniza a tecnologia focando nas pessoas. - organiza os padrões inerentes da informação, torna o complexo, claro. - cria estruturas ou mapas de informação que permite outros ME GUSTA! encontrarem seu caminho para o conhecimentoObs. Grifos e adaptações livres
  11. 11. Arquitetura de informação?
  12. 12. Design de Interação?Arquitetura de informação?
  13. 13. CONCEITOS QUE VALEM A PENA VISITAR.
  14. 14. CONCEITOS QUE VALEM A PENA VISITAR. CONHECER
  15. 15. CONCEITOS QUE VALEM A PENA VISITAR. CONHECER REVISITAR
  16. 16. CONCEITOS QUE VALEM A PENA VISITAR. CONHECER REVISITAR APROFUNDAR
  17. 17. CONCEITOS QUE VALEM A PENA VISITAR. CONHECER REVISITAR APROFUNDAR
  18. 18. ARQUITETURA DE INFORMAÇÃO #1 “Arquitetura de Informação é a arte e a ciência de organizar, estruturar e categorizar a informação para torná–la mais fácil de encontrar e de controlar”Obs. Grifos e adaptações livres
  19. 19. ARQUITETURA DE INFORMAÇÃO #1 O princípio básico da Arquitetura de Informação é a busca pelo equilíbrio entre os três fatores: Conteúdo, Contexto e UsuáriosObs. Grifos e adaptações livres
  20. 20. ARQUITETURA DE INFORMAÇÃO #1 @louisrosenfeld @morville são bibliotecários <3Obs. Grifos e adaptações livres
  21. 21. USER EXPERIENCE #2
  22. 22. USER EXPERIENCE #2Como eu me sinto quando...
  23. 23. USER EXPERIENCE #2 "a maneira como uma pessoa se sente sobre o uso de um produto, sistema ou serviço. [Isso inclui] percepções de uma pessoa de aspectos práticos, tais como a utilidade, facilidade de utilização e eficiência do sistema. "Obs. Wikipedia, tradução e adaptação livres
  24. 24. USER EXPERIENCE #2
  25. 25. USER EXPERIENCE #2
  26. 26. USER EXPERIENCE #2
  27. 27. USER EXPERIENCE #2
  28. 28. USER EXPERIENCE #2Product Experience vs User Experience
  29. 29. USABILIDADE #3
  30. 30. USABILIDADE #3 Usabilidade é o componente do Standard de ISO 9241-11 (1998), e é definido da seguinte forma: “Usabilidade é a eficiência, eficácia e satisfação com a qual os públicos do produto alcançam objetivos em um determinado ambiente”.Fonte: WebInsider. Usabilidade: um pouco da história e definição
  31. 31. USABILIDADE #3Atributos (de uma interface) com boaUsabilidadepor Jakob Nielsen• Ser fácil de aprender• Ser eficiente na utilização• Ser fácil de ser recordado• Ter poucos erros• Ser subjetivamente agradávelFonte: Design para a Internet. Felipe Memória
  32. 32. USABILIDADE #3Fonte: Design para a Internet. Felipe Memória
  33. 33. USABILIDADE #3Jakob Nielsen Donald NormanPhd. IHC, “user advocate” Psicólogo e Cientista Cognitivo
  34. 34. USABILIDADE #3BônusHá usabilidade em TUDO mesmo, até no jeito certo de usar o papel higiênico (se quiser evitaro desperdício).
  35. 35. USABILIDADE #3BônusHá usabilidade em TUDO mesmo, até no jeito certo de usar o papel higiênico (se quiser evitaro desperdício).
  36. 36. DESIGN CENTRADO NO USUÁRIO#4Lembra dos Controles?
  37. 37. DESIGN CENTRADO NO USUÁRIO#4Lembra dos Controles? Lembra do “tio” Norman?
  38. 38. DESIGN CENTRADO NO USUÁRIO#4Lembra dos Controles? Lembra do “tio” Norman?
  39. 39. DESIGN CENTRADO NO USUÁRIO#4 por Donald Norman • A psicopatologia das coisas do dia-a-dia • A psicologia nas ações do dia-a- dia • Conhecimento na cabeça e no mundo • Saber o que fazer • Errar é Humano • O desafio do Design • Design centrado no usuário
  40. 40. DESIGN CENTRADO NO USUÁRIO#4 Um produto bem projetado envolve muito mais que apenas um conteúdo de qualidade – facilidade de uso, desempenho e design gráfico também são importantes. A satisfação subjetiva, a “agradabilidade”, tanto estudada por Don Norman, também faz parte desse todo.Fonte: Design para a Internet, p.10. Felipe Memória
  41. 41. DESIGN CENTRADO NO USUÁRIO#4 1 - Identificar Requisitos 2 - Criar soluções alternativas 3 - Construir protótipos testáveis 4 - Avaliar com usuáriosFonte: Think Design. Services: User Experience.
  42. 42. DESIGN CENTRADO NO USUÁRIO#4 “O Design Centrado no Usuário, quando radical demais, acaba se tornando economicamente irrealista e inviável. O Design de Persuasão, por outro lado, pode forçar mudanças de comportamento que não são naturais para os usuários do produto.”Fonte: Blog de Ai. Design centrado no usuário vs. Design de persuasão
  43. 43. DESIGN DE INTERAÇÃO #5by @p_kwiatkowski
  44. 44. DESIGN DE INTERAÇÃO #5 Design de Interação é a arte de facilitar ou fomentar interações entre humanos mediadas por artefatos (produtos) e serviços.1) Focar sempre no usuário2) Encontrar boas soluções3) Gerar muitas idéias e buscar uma prototipação rápida4) Saber trabalhar de forma colaborativa5) Criar soluções apropriadas6) Desenvolver com um amplo campo de influências7) Saber incorporar a emoção para seus projetos – O aspecto emocionaldentro do desenvolvimento de um produto é o elo de ligação entre aspessoas e os aparatos tecnológicos. Produtos sem o componente emocionalestão desconectados das pesssoas e são produtos sem-vida.Fonte: Dan Saffer. Designing For Interaction.
  45. 45. IHC #6IHCInteração Humano ComputadorInteração homem-computador (human-computerinteraction): É uma disciplina muito próxima do “designde interação”, mas com métodos mais quantitativos. Aoinvés de questionar como os homens se relacionamentre si, investiga a relação dos homens com asmáquinas. Os sistemas operacionais dos computadores,como o Windows, são um exemplo de IHC
  46. 46. CONTENT STRATEGY #7 “Planejamento, design e criação de métodos de gestão de conteúdo. Buscando promover soluções de conteúdo para alcançar objetivos de negócio e de comunicação, com conteúdos que sejam úteis, usuais, que sejam facilmente encontrados e compartilhados.” Louis Rosenfeld "Traça um roteiro possível para indivíduos e organizações para criar e manter o conteúdo que o público realmente se interessa. ” Kristina Halvorson, Content Strategy for the Web.Fonte: UX BOOTH. Complete Begginer´s Guide to Content Strategy.
  47. 47. ENTREGÁVEISCONCEPÇÃO IMPLEMENTAÇÃORoad Map Casos de UsoBenchmark Documento de EspecificaçãoMétricas de Sucesso(KPIs) Análise HeurísticaPersonas Teste de UsabilidadeModelo conceitual Controle de QualidadeBlueprint Análise de AcessibilidadeEcossistema Recomendações deSEOConsumer JourneyEntrevista VERIFICAÇÃOObservação etnográfica Teste de UsabilidadePesquisa Quantitativa TesteA/BCard Sorting Eye TrackingInventário de Conteúdo Análise de MétricasAnálise de Tarefas AnáliseMapa do Site Quantitativa e QualitativaFluxogramaWireframesProtótipos NavegáveisStoryboardsMoodboards http://tinyurl.com/entregaveisdeux
  48. 48. ENTREGÁVEIS (alguns) Road Map É um plano de ação, um roteiro, um passo-a-passo para o desenvolvimento de um projeto que precise de entregas faseadas, ajudando a coordenar e planejar os avanços. Além de deixar claras as datas, ajuda também a enxergar o conjunto de tecnologias que podem ser aplicadas para o projeto e o esforço necessário para cada etapa.BenchmarkÉ a observação e estudo de produtos que tenhamsemelhança, em comportamento ou conteúdo, com oprojeto que vamos desenvolver. É a análise dos pontospositivos e negativos que devem ser considerados nomomento em que iremos criar o “jeitão” das telas e seuscomportamentos.PersonasSão formatos de entender e enxergar melhor esse usuário.Pode ser uma descrição mais simples (como na imagemacima) ou detalhadíssima, com o intuito de personificarum usuário fictício dentro do público-alvo. http://tinyurl.com/entregaveisdeux
  49. 49. ENTREGÁVEIS (alguns)Jornada do Usuário(Consumer Journey)Entender o caminho que diferentes personaspercorrem na experiência com a marca.Entender quais são as necessidades, emoções,problemas, desejos e angústias do consumidorem cada etapa dessa experiênciaEcossistema (BrandEcossystem)Quando um projeto é formado por diversas peças(um site, um aplicativo mobile, uma página noFacebook, um banner, um hotsite etc.), é um mapadetalhado de como esses diversos ambientesconversam entre si. Para onde você quer levar cadausuário e por quê? Qual o caminho que você esperaque ele percorra? http://tinyurl.com/entregaveisdeux
  50. 50. ENTREGÁVEIS (alguns)Mapa do Site e FluxogramaMapa do Site é um organograma mostrando todas aspáginas que o site irá conter, especifica as várias telas emostra a relação hierárquica entre elas. Geralmente éproduzido no início do projeto e refinado durante todas asetapas conforme as demandas posteriores.Fluxograma é um sitemap com QI acima da média onde éorganizado o fluxo de informações. Desta forma é mais fácilcompreender a transição (e variáveis) das informações emcada tela.Wireframe e Protótipos NavegáveisA planta baixa do site, seu esqueleto. O resultado de pesquisasonde podem ser encontrados todos os elementos em cada tela esuas disposições e orientações. O intuito é mostrar a hierarquia dasinformações, das telas e o fluxo de navegação que irá existir.Protótipos navegáveis são uma variação dos wireframes, mas comlinks entre as telas. Você pode clicar e navegar entre elas, como seestivesse navegando no produto final. Pode ser usado comdiversos objetivos: desde ser exibido em um teste de usabilidadeaté fazer com que o público interno do projeto (desenvolvedores,gerentes de projeto, designers, cliente) visualizem mais facilmentecomo determinada peça vai funcionar http://tinyurl.com/entregaveisdeux
  51. 51. Mas o que eu faço afinal ?http://www.intuicaocriativa.wordpress.com/
  52. 52. CASES (alguns)Record NewsFoco nos vídeos, divisão das categorias conformeprogramação. Ressaltar os apresentadores. http://www.behance.net/paulinhah
  53. 53. CASES (alguns)RebeldeAtender público da Novela, amantes da banda, e fã clube.Dar espaço para Covers da Banda. http://www.behance.net/paulinhah
  54. 54. CASES (alguns)CineclickReestruturação da Arquitetura do site para dar visibilidade ehierarquia ao conteúdoEsse + Esse = relação entre filmes e pessoas. http://www.behance.net/paulinhah
  55. 55. CASES (alguns)OfficebookA ideia era usar a Timeline do Facebook - através do FacebookConnect - e entregar de volta para o usuário um Documentoem Word, Power Point e Excell totalmente customizado eeditável, onde os consumidores poderiam ver quanta coisadiferente é possível se fazer com o pacote Office.Graph API Explorer - desenvolvedor do Facebook onde épossível saber todas as informações do Facebook quepodemos usar e à partir disso começamos a montar queinformações seriam legais de ter no Documento final.O Officebook está hospedado no Windows Azure - na nuvem -e virou até case interno para a Microsoft. http://www.behance.net/paulinhah
  56. 56. tá, agora sou Arquiteta de Informação, preocupada com o usuário e Usabilidade das interfaces
  57. 57. mas e a biblioteconomia?
  58. 58. Paul Otlet: o precurssor 1892 . "Something about bibliography” Os livros são uma forma inadequada de armazenar informações, porque a disposição dos fatos contidos dentro deles foi uma decisão arbitraria por parte do autor, tornando cada fato difícil de ser localizado. Um sistema melhor de armazenamento, propôs Otlet em seu ensaio, seriam cartões contendo pequenos trechos com informação, os quais permitiriam que "todas as manipulações de classificação e continua busca“Fonte: Wikipedia.
  59. 59. Ranganathan: o defensor 1931 . “Raganathan” 1. Os livros são para serem usados: design por design não é nada, design bom é design usável. 2. Todo leitor tem seu livro. Conheça as necessidade do seu público alvo: pesquise. 3. Todo livro tem seu leitor. Defina seu público alvo: pesquise 4. Poupe o tempo do leitor. Usabilidade! 5. Uma biblioteca é um organismo em crescimento . Projete para o futuro, a web está e está em TODO o lugar.Fonte: Wikipedia.
  60. 60. Bibliotecários sempre criaram e organizaram informação.Responsáveis pela organização do Conhecimento
  61. 61. Bibliotecário trabalha com informação e todos osformatos. É capaz de fazer busca em todos os recursosinformacionais. Sabe onde e como encontrarinformação relevante. Analisa o comportamento debusca do usuário.
  62. 62. E... Como o conhecimento de Arquitetura deInformação pode ser usado nas bibliotecas?
  63. 63. Estudo de Comportamento de Busca e Uso das novas tecnologias. = Infoeducação : ensinar a buscar informação, reconhecer as fontes, interagir. Cria espaços de informações encontráveis e acessíveis = permitir que usuários aprendam a se movimentar na biblioteca, encontrar sozinho os documentos, decidir onde e como vão consumir a informação  Pontos de Contato entre a Informação e Usuário, Interação e Comunicação Multimídia = levar a biblioteca para fora dela, onde ela pode se comunicar além do espaço físico (sala de aula, site, blog, facebook...) = arquitetura de bibliotecas digitais e virtuais, meios de comunicação e interação entre os usuários e também com a comunidade científica.Inspiração: Stanislaw Skorka. Building the bridge : Librarian as Information Architect.
  64. 64.  Técnicas de rotulação, mapas conceituais, mapas mentais, designcentrado no usuário= Bibliotecas centradas no usuário, em como ele busca e consome ainformação. Usabilidade, Interação Humano Computador= Salas de leitura, espaços físicos, pontos de acesso (fora da biblioteca)catálogos, site da biblioteca, softwares de bibliotecas= arquitetura de bibliotecas digitais e virtuais, meios de comunicação einteração entre os usuários e também com a comunidade científica.Análise Heurística= novas metodologias para avaliar recursos informacionais Inspiração: Stanislaw Skorka. Building the bridge : Librarian as Information Architect.
  65. 65. CAMINHO DAS PEDRASLista de Discussãohttp://lists.ibiblio.org/mailman/listinfo/aifia-ptGrupo no Facebookhttps://www.facebook.com/groups/uxjobs/Blog de Aihttp://arquiteturadeinformacao.com/Meu Bloghttp://intuicaocriativa.wordpress.com/Meu Twitterhttps://twitter.com/paulinhahLinks no Delicioushttp://www.delicious.com/paulinhahPara seguirhttps://twitter.com/i/#!/paulinhah/aiPara encontrar trabalhohttps://twitter.com/i/#!/paulinhah/jobshttps://twitter.com/uxjobsbr
  66. 66. Obrigada ;) @paulinhah

×