projetando experiencias
TRANSCRIPT
Projetando ExperiênciasArquitetura de Informação e User Experience Design
VII Semana de Biblioteconomia – ECA/USP26.set.2012 por Paula Macedo
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 = Compartilhar minha experiência e aprender com vocês
O AMOR POR LIVROS ME
LEVOU PARA A BIBLIOTECONOMI
A
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, incoerente e cacofônico”.
Obs. Grifos e adaptações livres
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
Arquiteto de Informação, por Wurman
- 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 conhecimento
Obs. Grifos e adaptações livres
devem ser tornar o complexo claro,
transformar a informação em algo compreensível
para outros seres humanos.
Arquiteto de Informação, por Wurman
Obs. Grifos e adaptações livres
ME GUSTA!
- 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 conhecimento
devem ser tornar o complexo claro,
transformar a informação em algo compreensível
para outros seres humanos.
Arquitetura de informação?
Arquitetura de informação?
Usabilidade ?
Design Centrado no
Usuário
UX Design?User Experience?
Design de Interação?
Content Strategy?IHC?
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
APROFUNDAR
CONCEITOS QUE VALEM A PENA VISITAR.
CONHECER
REVISITAR
APROFUNDAR
“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”
ARQUITETURA DE INFORMAÇÃO #1
Obs. Grifos e adaptações livres
ARQUITETURA DE INFORMAÇÃO #1
Obs. Grifos e adaptações livres
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ários
ARQUITETURA DE INFORMAÇÃO #1
Obs. Grifos e adaptações livres
são bibliotecários <3
@louisrosenfeld @morville
USER EXPERIENCE #2
USER EXPERIENCE #2
Como 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 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
USER EXPERIENCE #2
USER EXPERIENCE #2
USER EXPERIENCE #2
USER EXPERIENCE #2
USER EXPERIENCE #2
Product Experience vs User Experience
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”.
USABILIDADE #3
Fonte: WebInsider. Usabilidade: um pouco da história e definição
Atributos (de uma interface) com boa Usabilidade por Jakob Nielsen
• Ser fácil de aprender• Ser eficiente na utilização• Ser fácil de ser recordado• Ter poucos erros• Ser subjetivamente agradável
USABILIDADE #3
Fonte: Design para a Internet. Felipe Memória
USABILIDADE #3
Fonte: Design para a Internet. Felipe Memória
“ Eu quero um site fácil de usar, agradável e “user friendly”
USABILIDADE #3
Jakob NielsenPhd. IHC, “user advocate”
Donald NormanPsicólogo e Cientista Cognitivo
USABILIDADE #3
BônusHá usabilidade em TUDO mesmo, até no jeito certo de usar o papel higiênico (se quiser evitar o desperdício).
USABILIDADE #3
BônusHá usabilidade em TUDO mesmo, até no jeito certo de usar o papel higiênico (se quiser evitar o desperdício).
DESIGN CENTRADO NO USUÁRIO#4
Lembra dos Controles?
DESIGN CENTRADO NO USUÁRIO#4
Lembra dos Controles? Lembra do “tio” Norman?
DESIGN CENTRADO NO USUÁRIO#4
Lembra 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 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
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
DESIGN CENTRADO NO USUÁRIO#4
1 - Identificar Requisitos
2 - Criar soluções alternativas
3 - Construir protótipos testáveis
4 - Avaliar com usuários
Fonte: Think Design. Services: User Experience.
DESIGN CENTRADO NO USUÁRIO#4
Fonte: Blog de Ai. Design centrado no usuário vs. Design de persuasão
“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.”
DESIGN DE INTERAÇÃO #5
by @p_kwiatkowski
DESIGN DE INTERAÇÃO #5
Fonte: Dan Saffer. Designing For Interaction.
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ário 2) 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 emocional dentro do desenvolvimento de um produto é o elo de ligação entre as pessoas e os aparatos tecnológicos. Produtos sem o componente emocional estão desconectados das pesssoas e são produtos sem-vida.
Interação homem-computador (human-computer interaction): É uma disciplina muito próxima do “design de interação”, mas com métodos mais quantitativos. Ao invés de questionar como os homens se relacionam entre si, investiga a relação dos homens com as máquinas. Os sistemas operacionais dos computadores, como o Windows, são um exemplo de IHC
IHCInteração Humano Computador
IHC #6
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.
ENTREGÁVEIS
CONCEPÇÃORoad MapBenchmarkMétricas de Sucesso(KPIs)PersonasModelo conceitual BlueprintEcossistemaConsumer JourneyEntrevistaObservação etnográficaPesquisa QuantitativaCard SortingInventário de ConteúdoAnálise de TarefasMapa do SiteFluxogramaWireframesProtótipos NavegáveisStoryboardsMoodboards
IMPLEMENTAÇÃOCasos de UsoDocumento de EspecificaçãoAnálise HeurísticaTeste de UsabilidadeControle de QualidadeAnálise de AcessibilidadeRecomendações deSEO
VERIFICAÇÃOTeste de UsabilidadeTesteA/BEye TrackingAnálise de MétricasAnáliseQuantitativa e Qualitativa
http://tinyurl.com/entregaveisdeux
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.
http://tinyurl.com/entregaveisdeux
BenchmarkÉ a observação e estudo de produtos que tenham semelhança, em comportamento ou conteúdo, com o projeto que vamos desenvolver. É a análise dos pontos positivos e negativos que devem ser considerados no momento em que iremos criar o “jeitão” das telas e seus comportamentos.
PersonasSão formatos de entender e enxergar melhor esse usuário. Pode ser uma descrição mais simples (como na imagem acima) ou detalhadíssima, com o intuito de personificar um usuário fictício dentro do público-alvo.
ENTREGÁVEIS (alguns)
ENTREGÁVEIS (alguns)
Jornada do Usuário (Consumer Journey)Entender o caminho que diferentes personas percorrem na experiência com a marca. Entender quais são as necessidades, emoções, problemas, desejos e angústias do consumidor em cada etapa dessa experiência
http://tinyurl.com/entregaveisdeux
Ecossistema (Brand Ecossystem)Quando um projeto é formado por diversas peças (um site, um aplicativo mobile, uma página no Facebook, um banner, um hotsite etc.), é um mapa detalhado de como esses diversos ambientes conversam entre si. Para onde você quer levar cada usuário e por quê? Qual o caminho que você espera que ele percorra?
ENTREGÁVEIS (alguns)
Mapa do Site e FluxogramaMapa do Site é um organograma mostrando todas as páginas que o site irá conter, especifica as várias telas e mostra a relação hierárquica entre elas. Geralmente é produzido no início do projeto e refinado durante todas as etapas conforme as demandas posteriores.Fluxograma é um sitemap com QI acima da média onde é organizado o fluxo de informações. Desta forma é mais fácil compreender a transição (e variáveis) das informações em cada tela.
http://tinyurl.com/entregaveisdeux
Wireframe e Protótipos NavegáveisA planta baixa do site, seu esqueleto. O resultado de pesquisas onde podem ser encontrados todos os elementos em cada tela e suas disposições e orientações. O intuito é mostrar a hierarquia das informações, das telas e o fluxo de navegação que irá existir.
Protótipos navegáveis são uma variação dos wireframes, mas com links entre as telas. Você pode clicar e navegar entre elas, como se estivesse navegando no produto final. Pode ser usado com diversos objetivos: desde ser exibido em um teste de usabilidade até fazer com que o público interno do projeto (desenvolvedores, gerentes de projeto, designers, cliente) visualizem mais facilmente como determinada peça vai funcionar
Mas o que eu faço afinal ?
http://www.intuicaocriativa.wordpress.com/
CASES (alguns)
Record NewsFoco nos vídeos, divisão das categorias conforme programação. Ressaltar os apresentadores.
http://www.behance.net/paulinhah
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
CASES (alguns)
CineclickReestruturação da Arquitetura do site para dar visibilidade e hierarquia ao conteúdoEsse + Esse = relação entre filmes e pessoas.
http://www.behance.net/paulinhah
CASES (alguns)
OfficebookA ideia era usar a Timeline do Facebook - através do Facebook Connect - e entregar de volta para o usuário um Documento em Word, Power Point e Excell totalmente customizado e editável, onde os consumidores poderiam ver quanta coisa diferente é possível se fazer com o pacote Office.
Graph API Explorer - desenvolvedor do Facebook onde é possível saber todas as informações do Facebook que podemos usar e à partir disso começamos a montar que informaçõ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
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 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.
Ranganathan: o defensor1931 . “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.
Bibliotecários sempre criaram e organizaram informação.
Responsáveis pela organização do Conhecimento
Bibliotecário trabalha com informação e todos os formatos. É capaz de fazer busca em todos os recursos informacionais. Sabe onde e como encontrar informação relevante. Analisa o comportamento de busca do usuário.
E... Como o conhecimento de Arquitetura de Informação pode ser usado nas bibliotecas?
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.
Técnicas de rotulação, mapas conceituais, mapas mentais, design centrado no usuário
= Bibliotecas centradas no usuário, em como ele busca e consome a informaçã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 e interaçã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.
Lista de Discussãohttp://lists.ibiblio.org/mailman/listinfo/aifia-pt
Grupo no Facebookhttps://www.facebook.com/groups/uxjobs/
Blog de Aihttp://arquiteturadeinformacao.com/
Meu Bloghttp://intuicaocriativa.wordpress.com/
Meu Twitterhttps://twitter.com/paulinhah
Links no Delicioushttp://www.delicious.com/paulinhah
Para seguir https://twitter.com/i/#!/paulinhah/ai
Para encontrar trabalhohttps://twitter.com/i/#!/paulinhah/jobshttps://twitter.com/uxjobsbr
CAMINHO DAS PEDRAS
Obrigada ;)
@paulinhah