projetando experiencias

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