univercidade » semana de designarquitetura de informaçãoe design de interfacesnos produtos interativosda globosatcomo func...
olá, muito prazer! :-)
formação acadêmica•  Doutorando em design: ergonomia e usabilidade da interação humano-•  computador (desde 2011).•  Mestr...
experiência docente                 Professor em cursos de pós-graduação, em disciplinas correlatas aarquitetura de inform...
experiência profissional                                                                 2006 - 2008                      ...
principais clientes atendidos
agenda•  O que é Globosat?•  O que é UX?•  Metodologia de projeto da equipe de UX•  da Globosat•  Como implementar UX nos ...
o que é globosat?
o que é globosat?
o que é globosat?                                                                                  •  Programadora de TV p...
o que é globosat?Programadora de TV por assinatura brasileira, com 34 canais e conteúdo diversificado.
alguns dos canais globosat...
tv aberta X tv por assinaturaTV por assinatura: audiência segmentada.
surgimento das novas mídiasde 1995 até 2004 (web 1.0)              depois de hoje (web 2.0)                               ...
produtora de tv por assinatura e o cenário das novas mídias                            De 1995 até 2008...  Sites de apoio...
produtora de tv por assinatura e o cenário das novas mídiasProdutos web: audiência mais segmentada que o público da TV.
produtora de tv por assinatura e o cenário das novas mídias          A partir de 2008 (criação da diretoria de novas mídia...
novo paradigma: convergência entre as novas e as antigas mídias* Fonte: busca por imagens do Google
novo paradigma: convergência entre as novas e as antigas mídias                       Cada vez mais comum o consumo simult...
novo paradigma: convergência entre as novas e as antigas mídias                                                           ...
novo paradigma: convergência entre as novas e as antigas mídias                                                           ...
produtora de tv por assinatura e o novo paradigma (convergência)             Hoje (oferta de conteúdos não-lineares em mul...
produtora de tv por assinatura e o novo paradigma:      quem cria     os produtos   multi-plataforma?
quem cria os produtos multi-plataforma da globosat?                   Diretoria de novas mídias•  Gerentes                ...
quem cria os produtos multi-plataforma da globosat?                   Diretoria de novas mídias•  Gerentes                ...
quem cria os produtos multi-plataforma da globosat?      ... e também os profissionais de UX.
quem cria os produtos multi-plataforma da globosat?
quem cria os produtos multi-plataforma da globosat?
quem cria os produtos multi-plataforma da globosat?
o que é ux?
“ As pessoas buscam experiências  enriquecedoras...”
...mas isto é uma experiência enriquecedora?                                                                 Que horas são...
...mas isto é uma experiência enriquecedora?                                       Qual botão eu aperto para subir?* Fonte...
...mas isto é uma experiência enriquecedora?                                         “Vá pela direita” ou “Não vá pela dir...
...mas isto é uma experiência enriquecedora?                                          Onde fica o banheiro masculino?* Fon...
...mas isto é uma experiência enriquecedora?                                          Essa novela passa em qual canal?* Fo...
...mas isto é uma experiência enriquecedora?                                          Já tem quanto tempo de jogo?* Fonte:...
...mas isto é uma experiência enriquecedora?                                          Já tem quanto tempo de jogo?* Fonte:...
“     Projetar tendo a experiência humana      como um resultado explícito e o      engajamento humano como um      objeti...
isso pode ser uma experiência enriquecedora!Memorial da Guerra do Vietnã: listagem não-convencional dos nomes dos soldados...
isso pode ser uma experiência enriquecedora!                                          Restaurante Bubba Gump* Fonte: foto ...
isso pode ser uma experiência enriquecedora!                                          Restaurante Johnny Rockets* Fonte: f...
isso pode ser uma experiência enriquecedora!                                           Escultura de toalha na cabine do na...
o que é ux?       ux        =user experience
o que é ux?       ux        =user experience
ux (user experience)•  Conjunto de experiências e satisfação•  que um usuário sente ao utilizar um•  produto.•  Uma boa UX...
ux (user experience)* Fonte: Designing interactions, de Bill Moggridge <http://www.designinginteractions.com/book>
ux (user experience)                                                                           planejar + criar + executar...
“ Sabe quando perdido? Meu trabalho ée  fica confuso,                você usa uma interface      fazer com que isso não ac...
interface design X ux design                                               Interface design (projeto da interface)* Fonte:...
interface design X ux design                                      UX design (projeto da experiência do usuário)          O...
ux (user experience):quem é responsávelpelo projeto da ux?
quem é responsável pelo projeto da ux?                  AI     Arquiteto de Informação                                    ...
quem é responsável pelo projeto da ux?                                                                                    ...
quem é responsável pelo projeto da ux?Alguns exemplos dos entregáveis do arquiteto de informação
quem é responsável pelo projeto da ux?      Responsabilidades do designer de      interfaces:      •  Definir a identidade...
quem é responsável pelo projeto da ux?Alguns exemplos dos entregáveis do designer de interfaces
metodologia   de projetoda equipe de ux  da globosat
metodologia de projeto da equipe de ux da globosat                                                                        ...
metodologia de projeto da equipe de ux da globosat                           A execução do projeto é realizada “de dentro ...
metodologia de projeto da equipe de ux da globosat                            apresentação                                ...
metodologia de projeto da equipe de ux da globosat                            apresentação                                ...
metodologia de projeto da equipe de ux da globosat                            apresentação                                ...
metodologia de projeto da equipe de ux da globosat                            apresentação                                ...
metodologia de projeto da equipe de ux da globosat1. DEFINIÇÃO                Análise do         Definição do         Real...
metodologia de projeto da equipe de ux da globosat:   análise do briefing
“ Compre seja razoável. Escolha frutas  o preço          o que está faltando, desde que      mais ou menos doces, produtos...
análise do briefing Como o cliente       Como o líder de        Como o analista     Como o programador    O que os beta-te...
metodologia de projeto da equipe de ux da globosat:         definição      do público-alvo
definição do público-alvo
definição do público-alvo                                                      Exemplo de estudo etnográfico* Fonte: Arqui...
definição do público-alvo                                                                Exemplo de personas* Fonte: Arqui...
definição do público-alvo                      Interfaces projetadas de acordo com a tarefa dos seus usuários             ...
metodologia de projeto da equipe de ux da globosat:        realização      de benchmarks
realização de benchmarks
realização de benchmarks                                                              Exemplo de benchmark* Fonte: Arquite...
Benchmark com foco em programas e programaçãoForam analisados mais de 25 sites de canais de TV nacionais einternacionais, ...
Exemplos do benchmark: CBS (EUA)                                                         PÁGINA INICIAL:                  ...
Exemplos do benchmark: Fuse TV (internet)                                                                  PÁGINA INICIAL:...
metodologia de projeto da equipe de ux da globosat:            brainstorm
brainstorm                                          Exemplo de reunião de brainstorm* Fonte: foto de Eduardo Rangel Brandão
brainstorm                                          Exemplo de reunião de brainstorm* Fonte: foto de Eduardo Rangel Brandão
brainstorm                                     Exemplo de resultado de reunião de brainstorm* Fonte: foto de Eduardo Range...
metodologia de projeto da equipe de ux da globosat:          definição         de conceitos
definição de conceitos                                                                            site gnt                ...
definição de conceitos                                                                site gnt   eixos de                 ...
definição de conceitos
metodologia de projeto da equipe de ux da globosat:          lista de      funcionalidades
lista de funcionalidades
lista de funcionalidades
lista de funcionalidades
metodologia de projeto da equipe de ux da globosat:           inventário          de conteúdo
inventário de conteúdo
inventário de conteúdo
inventário de conteúdo
metodologia de projeto da equipe de ux da globosat:         diagramas        de navegação
diagramas de navegação               0.0.              Home             Multishow                 1.0.              Índice...
diagramas de navegação                                                                     Home do GNT                    ...
diagramas de navegação                                                                 GNT                                ...
diagrama de navegação                                                                                         0.0.        ...
metodologia de projeto da equipe de ux da globosat:          lista de telas
lista de telas
lista de telas
metodologia de projeto da equipe de ux da globosat:            wireframes
wireframes                                       BARRA DA GLOBO.COM                                                1      ...
PÁGINA INICIAL                                                                                                            ...
SOBRE AS PEGADORAS                                                                                                        ...
metodologia de projeto da equipe de ux da globosat:                layouts
layouts
layoutsPadrão dos sites Globosat
layoutsPadrão dos sites Globosat
layoutsPadrão dos sites Globosat
layoutsPadrão dos sites Globosat
layoutsPadrão dos sites Globosat
metodologia de projeto da equipe de ux da globosat: descrição funcional
descrição funcional                                                                                                       ...
DESCRIÇÃO FUNCIONAL DE TELASSporTV | Nova HomeNOVA HOME DO SPORTV                                                         ...
descrição funcional                  1. Marca do evento. Não possui link para voltar à página inicial.        8           ...
descrição funcional                                                                                                     7....
descrição funcional                  7.7. Calendário (continuação):                  •  Além de selecionar cada data, o us...
descrição funcionalPrograma - modelo A                          Programa - modelo B                                Program...
metodologia de projeto da equipe de ux da globosat:metodologia clássica        x metodologia ágil
metodologia clássica de projeto (water fall)                                                                              ...
metodologia clássica X metodologia ágil                                                       Derrube o muro              ...
metodologia ágil de projeto (washing machine)                                                                             ...
como o ux designer trabalhaBrainstorms e rascunhos        Geração de alternativas   Compartilhamento                      ...
como o ux designer trabalha* Fonte: Leah Buley (IA Summit 2008) citada na palestra Agile user experience, de Rafael Rez de...
como o ux designer trabalha                                              A melhor ferramenta para o projeto da UX* Fonte: ...
como o ux designer trabalha: lista de funcionalidades* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: diagramas de navegação* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: diagramas de navegação* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: diagramas de navegação
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch da interface* Fonte: fotos de Steffania Paola
como o ux designer trabalha: descrição funcional
como o ux designer trabalha: descrição funcional
como o ux designer trabalha: sketch X interface* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha: sketch X interface
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
como o ux designer trabalha     Projeto aprovado           pelo diretor                             o/* Fonte: foto de Edu...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de proj...
Upcoming SlideShare
Loading in...5
×

Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de projeto de uma equipe de UX (User eXperience)

718

Published on

Palestra realizada na Semana de Design da UniverCidade, no dia 9 de junho de 2011. Mais informações em http://www.eduardobrandao.com/apresentacoes/arquitetura-de-informacao-e-design-de-interfaces-nos-produtos-interativos-da-globosat-como-funciona-a-metodologia-de-projeto-de-uma-equipe-de-ux-user-experience/

Published in: Design
1 Comment
5 Likes
Statistics
Notes
No Downloads
Views
Total Views
718
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Arquitetura de informação e design de interfaces nos produtos interativos da Globosat: como funciona a metodologia de projeto de uma equipe de UX (User eXperience)"

  1. 1. univercidade » semana de designarquitetura de informaçãoe design de interfacesnos produtos interativosda globosatcomo funciona a metodologia de projeto de umaequipe de ux (user experience)Eduardo Rangel Brandão, M.Sc.9 de junho de 2011
  2. 2. olá, muito prazer! :-)
  3. 3. formação acadêmica•  Doutorando em design: ergonomia e usabilidade da interação humano-•  computador (desde 2011).•  Mestre em design: ergonomia e usabilidade da interação humano-•  computador (2006).•  Especialista em ergonomia e usabilidade (2004).•  Bacharel em desenho industrial: comunicação visual (2003).•  Bacharel em desenho industrial: projeto de produto (1997).
  4. 4. experiência docente Professor em cursos de pós-graduação, em disciplinas correlatas aarquitetura de informação, design de interfaces, ergonomia, usabilidade e metodologia de pesquisa Desde 2008 Desde 2005 2007 - 2008 2006 - 2009
  5. 5. experiência profissional 2006 - 2008 2005 Desde 2008 Arquiteto de informação senior Pesquisador da FAPERJ AI senior (2008 - 2010) e coordenador de UX(User eXperience) da equipe de novas mídias (desde 2011) 2000 - 2003 1999 - 2000 Designer de interface Designer de interface Desde 2004 Pesquisador do Laboratório de Ergonomia e Usabilidade da PUC-Rio 1995 - 1997 Designer 1999 de interface Designer de interface 1999 Designer de interface
  6. 6. principais clientes atendidos
  7. 7. agenda•  O que é Globosat?•  O que é UX?•  Metodologia de projeto da equipe de UX•  da Globosat•  Como implementar UX nos produtos•  interativos da Globosat?
  8. 8. o que é globosat?
  9. 9. o que é globosat?
  10. 10. o que é globosat? •  Programadora de TV por assinatura •  brasileira, líder no mercado. •  Criada em 1991, hoje possui 34 canais •  e mais de 1.300 funcionários. •  Oferece conteúdo diversificado: •  cinema, jornalismo, shows, séries, •  documentários, cobertura de eventos •  esportivos e entretenimento variado. •  As 100 exibições de maior audiência •  da TV por Assinatura, em 2010, foram •  da Globosat. •  Cerca de 52% do tempo dedicado à TV* Fonte: Sobre a Globosat <http://canaisglobosat.globo.com/index.php/sobre>* Fonte: Jun 2011 •  por assinatura no horário nobre está* Fonte: IBOPE/MW - 8 mercados - Tabela de Programação - 19h00-25h00* Fonte: Jan-Dez 2010 •  distribuído entre os Canais Globosat.* Fonte: IBOPE/MW - 8 mercados - Indivíduos com TV por assinatura - 19h00-01h00* Fonte: Jan-Mar 2011
  11. 11. o que é globosat?Programadora de TV por assinatura brasileira, com 34 canais e conteúdo diversificado.
  12. 12. alguns dos canais globosat...
  13. 13. tv aberta X tv por assinaturaTV por assinatura: audiência segmentada.
  14. 14. surgimento das novas mídiasde 1995 até 2004 (web 1.0) depois de hoje (web 2.0) 2004 webmaster editor usuários colaboradores site celular site podcasts rss widgets usuários rede social
  15. 15. produtora de tv por assinatura e o cenário das novas mídias De 1995 até 2008... Sites de apoio aos canais de TV por assinatura e à grade de programação.
  16. 16. produtora de tv por assinatura e o cenário das novas mídiasProdutos web: audiência mais segmentada que o público da TV.
  17. 17. produtora de tv por assinatura e o cenário das novas mídias A partir de 2008 (criação da diretoria de novas mídias)... Sites de apoio aos canais de TV por assinatura e à grade de programação. Sites temáticos, para atingir uma nova audiência(que busca assuntos específicos: esportes, música, moda, beleza, culinária, etc.).
  18. 18. novo paradigma: convergência entre as novas e as antigas mídias* Fonte: busca por imagens do Google
  19. 19. novo paradigma: convergência entre as novas e as antigas mídias Cada vez mais comum o consumo simultâneo de internet e TVEsse é um hábito de quem é jovem, tem smartphone, tablet, notebook e usa redes sociais. Exemplo de aplicativo de 2ª tela para acompanhar a programação da TV (second-screen companion app).* Fonte: Metamirror & the future of TV <http://www.designbynotion.com/metamirror-next-generation-tv/>
  20. 20. novo paradigma: convergência entre as novas e as antigas mídias Exemplo de aplicativo de 2ª tela para acompanhar a programação da TV.* Fonte: Metamirror & the future of TV <http://www.designbynotion.com/metamirror-next-generation-tv/>
  21. 21. novo paradigma: convergência entre as novas e as antigas mídias Exemplo de aplicativo de 2ª tela para acompanhar a programação da TV.* Fonte: Metamirror & the future of TV <http://www.designbynotion.com/metamirror-next-generation-tv/>
  22. 22. produtora de tv por assinatura e o novo paradigma (convergência) Hoje (oferta de conteúdos não-lineares em multi-plataformas)A Globosat não é mais uma programadora de TV por assinatura, é uma produtora de conteúdo.
  23. 23. produtora de tv por assinatura e o novo paradigma: quem cria os produtos multi-plataforma?
  24. 24. quem cria os produtos multi-plataforma da globosat? Diretoria de novas mídias•  Gerentes •  Analistas de produto•  Coordenadores •  Editores•  Programadores front-end •  Assistentes de arte•  Desenvolvedores •  Estagiários
  25. 25. quem cria os produtos multi-plataforma da globosat? Diretoria de novas mídias•  Gerentes •  Analistas de produto•  Coordenadores •  Editores•  Programadores front-end •  Assistentes de arte•  Desenvolvedores •  Estagiários ... e também os profissionais de UX.
  26. 26. quem cria os produtos multi-plataforma da globosat? ... e também os profissionais de UX.
  27. 27. quem cria os produtos multi-plataforma da globosat?
  28. 28. quem cria os produtos multi-plataforma da globosat?
  29. 29. quem cria os produtos multi-plataforma da globosat?
  30. 30. o que é ux?
  31. 31. “ As pessoas buscam experiências enriquecedoras...”
  32. 32. ...mas isto é uma experiência enriquecedora? Que horas são?* Fonte: Bad Human Factors Designs <http://www.baddesigns.com>
  33. 33. ...mas isto é uma experiência enriquecedora? Qual botão eu aperto para subir?* Fonte: busca por imagens do Google
  34. 34. ...mas isto é uma experiência enriquecedora? “Vá pela direita” ou “Não vá pela direita”?* Fonte: Bad Human Factors Designs <http://www.baddesigns.com>
  35. 35. ...mas isto é uma experiência enriquecedora? Onde fica o banheiro masculino?* Fonte: foto de Eduardo Rangel Brandão
  36. 36. ...mas isto é uma experiência enriquecedora? Essa novela passa em qual canal?* Fonte: foto de Eduardo Rangel Brandão
  37. 37. ...mas isto é uma experiência enriquecedora? Já tem quanto tempo de jogo?* Fonte: foto de Eduardo Rangel Brandão
  38. 38. ...mas isto é uma experiência enriquecedora? Já tem quanto tempo de jogo?* Fonte: foto de Eduardo Rangel Brandão
  39. 39. “ Projetar tendo a experiência humana como um resultado explícito e o engajamento humano como um objetivo explícito pode ser praticado em qualquer meio e em toda a mídia. ”* Fonte: palestra “The future is already here - three trends in IA”, de Erin Malone <http://www.slideshare.net/emalone/the-future-is-already-here-three-trends-in-ia>
  40. 40. isso pode ser uma experiência enriquecedora!Memorial da Guerra do Vietnã: listagem não-convencional dos nomes dos soldados* Fonte: Memorial da guerra do Vietnã, arquitetura da informação evocando emoções, de Koji Pereira <http://www.digfordesign.com/2009/memorial-da-guerra-do-vietna/>
  41. 41. isso pode ser uma experiência enriquecedora! Restaurante Bubba Gump* Fonte: foto de Eduardo Rangel Brandão
  42. 42. isso pode ser uma experiência enriquecedora! Restaurante Johnny Rockets* Fonte: foto de Eduardo Rangel Brandão
  43. 43. isso pode ser uma experiência enriquecedora! Escultura de toalha na cabine do navio* Fonte: fotos de Eduardo Rangel Brandão
  44. 44. o que é ux? ux =user experience
  45. 45. o que é ux? ux =user experience
  46. 46. ux (user experience)•  Conjunto de experiências e satisfação•  que um usuário sente ao utilizar um•  produto.•  Uma boa UX deixa as pessoas felizes e•  torna os negócios mais bem sucedidos.•  Quando a UX é ignorada, os resultados•  podem ser catastróficos!
  47. 47. ux (user experience)* Fonte: Designing interactions, de Bill Moggridge <http://www.designinginteractions.com/book>
  48. 48. ux (user experience) planejar + criar + executar UX = conteúdo a.i. / design tecnologia* Fonte: O futuro da arquitetura de informação, de Rogério Pereira <http://webinsider.uol.com.br/2009/07/14/o-futuro-da-arquitetura-de-informacao/>
  49. 49. “ Sabe quando perdido? Meu trabalho ée fica confuso, você usa uma interface fazer com que isso não aconteça! Eu decido quais telas existem e o que acontece quando você clica em alguma coisa. ”* Fonte: Arquitetura de informação: onde estamos, de onde viemos e pra onde vamos?, de Carolina Leslie e Luciana Cattony* Fonte: <http://www.slideshare.net/lulileslie/arquitetura-de-informao-165537>
  50. 50. interface design X ux design Interface design (projeto da interface)* Fonte: Whats the difference between UI design and UX design?, Xianhang Zhang <http://www.quora.com/Product-Design/Whats-the-difference-between-UI-Design-and-UX-* Fonte: Design-1>
  51. 51. interface design X ux design UX design (projeto da experiência do usuário) O desenho de uma mosca, gravada na porcelana, melhora o objetivo da tarefa. Se um homem vê a mosca, ele mira nela, reduzindo em 80% o derramamento de “líquido” ;-)* Fonte: Whats the difference between UI design and UX design?, Xianhang Zhang <http://www.quora.com/Product-Design/Whats-the-difference-between-UI-Design-and-UX-* Fonte: Design-1>
  52. 52. ux (user experience):quem é responsávelpelo projeto da ux?
  53. 53. quem é responsável pelo projeto da ux? AI Arquiteto de Informação DI Designer de Interface* Fonte: imagens retiradas do vídeo Lip Dub - Flagpole Sitta by Harvey Danger <http://www.vimeo.com/173714>
  54. 54. quem é responsável pelo projeto da ux? Responsabilidades do arquiteto de informação: •  Definir as estratégias do produto. •  Projetar os sistemas de organização, •  navegação e rotulagem. •  Definir as funcionalidades da interface. •  Definir as regras de otimização de •  busca. •  Ter uma abordagem macro (visão 360º AI Arquiteto de Informação •  do projeto).* Fonte: imagem retiradas do vídeo Lip Dub - Flagpole Sitta by Harvey Danger <http://www.vimeo.com/173714>
  55. 55. quem é responsável pelo projeto da ux?Alguns exemplos dos entregáveis do arquiteto de informação
  56. 56. quem é responsável pelo projeto da ux? Responsabilidades do designer de interfaces: •  Definir a identidade visual do produto. •  Definir o grid da interface. •  Diagramar as telas da interface. •  Aplicar técnicas para direcionar o olhar •  dos usuários para os elementos mais •  importantes em cada tela. •  Ter uma abordagem micro (visão DI Designer de Interface •  específica de cada tela).* Fonte: imagem retiradas do vídeo Lip Dub - Flagpole Sitta by Harvey Danger <http://www.vimeo.com/173714>
  57. 57. quem é responsável pelo projeto da ux?Alguns exemplos dos entregáveis do designer de interfaces
  58. 58. metodologia de projetoda equipe de ux da globosat
  59. 59. metodologia de projeto da equipe de ux da globosat apresentação interação estrutura conte- údo* Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  60. 60. metodologia de projeto da equipe de ux da globosat A execução do projeto é realizada “de dentro para fora”... apresentação interação estrutura conte- údo* Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  61. 61. metodologia de projeto da equipe de ux da globosat apresentação interação •  Levantamento do tipo da informação •  que será incluída. estrutura •  Levantamento das características do •  produto. conte- údo •  Detalhamento do conteúdo.* Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  62. 62. metodologia de projeto da equipe de ux da globosat apresentação interação •  Organização do conteúdo. estrutura •  Organização da estrutura da interface. •  Categorização do conteúdo e suas conte- údo •  características.* Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  63. 63. metodologia de projeto da equipe de ux da globosat apresentação interação •  Definição dos elementos de auxílio para •  a navegação e mecanismos de busca. estrutura •  Definição das nomenclaturas e rótulos. conte- údo* Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  64. 64. metodologia de projeto da equipe de ux da globosat apresentação •  Padrões de desenho de páginas. interação •  Resolução de monitor estrutura •  Utilização de imagens conte- •  Aplicação de ícones, cores, tipografia e údo •  diagramação da tela.* Fonte: Analisando o desempenho das lojas on-line: sua influência sobre o poder de decisão e de compra dos usuários, de Eduardo Rangel Brandão e Cláudia Mont`Alvão
  65. 65. metodologia de projeto da equipe de ux da globosat1. DEFINIÇÃO Análise do Definição do Realização de Brainstorm Definição de Lista de briefing público-alvo benchmarks conceitos funcionalidades2. PROJETO Inventário de Sist. de organização, Wireframes Descrição Layouts Validação conteúdo navegação, rotulagem funcional de e busca telas3. PRODUÇÃO Monitoramento Novos releases
  66. 66. metodologia de projeto da equipe de ux da globosat: análise do briefing
  67. 67. “ Compre seja razoável. Escolha frutas o preço o que está faltando, desde que mais ou menos doces, produtos de limpeza com um cheiro bom e carnes que não sejam vermelhas. Ah, compre algumas coisas especiais para o meu sobrinho, que vai passar uns dias aqui em casa. ”* Fonte: A importância do briefing em sites de empresa, de Daniel Aisenberg <http://webinsider.uol.com.br/vernoticia.php/id/2162>
  68. 68. análise do briefing Como o cliente Como o líder de Como o analista Como o programador O que os beta-testers Como o consultor de explicou projeto entendeu planejou codificou receberam negócios descreveuValor que o cliente Como o projeto foi O que a assistência Como foi suportado Quando foi entregue O que o cliente pagou documentado técnica instalou realmente necessitava
  69. 69. metodologia de projeto da equipe de ux da globosat: definição do público-alvo
  70. 70. definição do público-alvo
  71. 71. definição do público-alvo Exemplo de estudo etnográfico* Fonte: Arquitetura de informação: onde estamos, de onde viemos e pra onde vamos?, de Carolina Leslie e Luciana Cattony* Fonte: <http://www.slideshare.net/lulileslie/arquitetura-de-informao-165537>
  72. 72. definição do público-alvo Exemplo de personas* Fonte: Arquitetura de informação: onde estamos, de onde viemos e pra onde vamos?, de Carolina Leslie e Luciana Cattony* Fonte: <http://www.slideshare.net/lulileslie/arquitetura-de-informao-165537>
  73. 73. definição do público-alvo Interfaces projetadas de acordo com a tarefa dos seus usuários Um produto da Apple... Um produto da Google... O aplicativo da sua empresa.* Fonte: Simplicity, de Eric Burke <http://stuffthathappens.com/blog/2008/03/05/simplicity/>
  74. 74. metodologia de projeto da equipe de ux da globosat: realização de benchmarks
  75. 75. realização de benchmarks
  76. 76. realização de benchmarks Exemplo de benchmark* Fonte: Arquitetura de informação: onde estamos, de onde viemos e pra onde vamos?, de Carolina Leslie e Luciana Cattony* Fonte: <http://www.slideshare.net/lulileslie/arquitetura-de-informao-165537>
  77. 77. Benchmark com foco em programas e programaçãoForam analisados mais de 25 sites de canais de TV nacionais einternacionais, abertos, pagos e de internet. §  ABC (EUA) §  UK-TV (Austrália) §  BBC America (EUA) §  AXN (Brasil) §  CBS (EUA) §  Fox (Brasil) §  Discovery Channel (EUA) §  FX (Brasil) §  Fox (EUA) §  HBO (Brasil) §  FX (EUA) §  MTV (Brasil) §  HBO (EUA) §  People & Arts (Brasil) §  MTV (EUA) §  Sony (Brasil) §  NBC (EUA) §  TNT (Brasil) §  VH1 (EUA) §  VH1 (Brasil) §  Warner Channel (EUA) §  Warner Channel (Brasil) §  AXN (Espanha) §  Current (Internet) §  Bravo! (Canada) §  Fuse (Internet) §  Channel 4 (Inglaterra) §  Much Music (Internet)Todos os sites de canal destacam, prioritariamente, a grade de programação,o conteúdo dos programas, os vídeos e as ferramentas de interação ao redordo conteúdo. Além disso, todos os sites apresentam modelos decompartilhamento de conteúdo.
  78. 78. Exemplos do benchmark: CBS (EUA) PÁGINA INICIAL: Pontos Fortes: 1. -  Quando o usuário clica no link “shows”, há a apresentação de todos os programas que compõem a grade de programação do canal, devidamente organizados através de categorias como: . Clássicos da TV. 1 . Filmes e especiais. . Horário nobre. . Programas da manhã/tarde. . Programas da noite. . Programas exclusivos da web. Pontos Fracos: 1. - Não há a apresentação dos programas de acordo com uma grade de programação, ou seja, não apresenta-se o dia e o horário em que cada programa será veiculado no canal. Logo, o usuário visualiza apenas a lista de programas, mas não tem alguma informação sobre quando o mesmo será exibido, nem sobre que horas será exibido. http://www.cbs.com/
  79. 79. Exemplos do benchmark: Fuse TV (internet) PÁGINA INICIAL: Pontos Fortes: 2. -  Destaque principal, bem evidente na página. 3. -  Exibição da grade de programação. Este elemento é bem posicionado, fornecendo uma rápida visualização do mesmo. O link “View full schedule” leva para a página com a grade completa. 2 3 4. - Player de vídeo embedded, permitindo a visualização dos mesmos na página inicial do site. Pontos Fracos: 2. -  O destaque principal não é 4 utilizado em forma de slideshow, impedindo que mais de uma matéria (ou conteúdo) ganhe maior relevância na página inicial. 3. - Os dias da semana se “movem” na grade de programação (o dia corrente sempre aparece no http://www.fuse.tv/ início), fazendo com que não haja uma visualização padronizada dessa grade.
  80. 80. metodologia de projeto da equipe de ux da globosat: brainstorm
  81. 81. brainstorm Exemplo de reunião de brainstorm* Fonte: foto de Eduardo Rangel Brandão
  82. 82. brainstorm Exemplo de reunião de brainstorm* Fonte: foto de Eduardo Rangel Brandão
  83. 83. brainstorm Exemplo de resultado de reunião de brainstorm* Fonte: foto de Eduardo Rangel Brandão
  84. 84. metodologia de projeto da equipe de ux da globosat: definição de conceitos
  85. 85. definição de conceitos site gnt pro- pro- gra- gra- ma- mas ção informações / ferramentas / fatos aplicativos saúde gastro- bem- e nomia estar belezaNota:As informações/fatos relacionados aostemas, aos programas e à programação sãoinputs para a oferta de conteúdos e serviçosdo site.As ferramentas/aplicativos se integram aoseixos de navegação, na tentativa de captarnovos usuários, manter a audiência e criaruma experiência lúdica.
  86. 86. definição de conceitos site gnt eixos de programas programação gastronomia moda e beleza bem-estar navegação tipos de texto vídeo foto conteúdoferramentas blog comentários rating share formatos botão 1 full-banner rectangle links shoppingcomerciais (120 x 90) (468 x 60) (300 x 250) patrocinados aplicativosdistribuição (orkut / badges celular podcasts rss widget facebook)
  87. 87. definição de conceitos
  88. 88. metodologia de projeto da equipe de ux da globosat: lista de funcionalidades
  89. 89. lista de funcionalidades
  90. 90. lista de funcionalidades
  91. 91. lista de funcionalidades
  92. 92. metodologia de projeto da equipe de ux da globosat: inventário de conteúdo
  93. 93. inventário de conteúdo
  94. 94. inventário de conteúdo
  95. 95. inventário de conteúdo
  96. 96. metodologia de projeto da equipe de ux da globosat: diagramas de navegação
  97. 97. diagramas de navegação 0.0. Home Multishow 1.0. Índice de programas 1.1. 1.2.Programa Programa “XPTO” TVZ 1.2.1. 1.2.2. 1.2.3.Índice de Índice de Índice do artistas clipes TVZ News 1.2.3.1. 1.2.1.1. Página dePágina do matéria do artista TVZ News1.2.1.1.1.Página do clipe
  98. 98. diagramas de navegação Home do GNT Página Página da da tag tag “SPFW” “Choco- Home de Home deGourmet GNT Estilo GNT late” spfw chocolate Índice Índice Índice Índice de receitas de de de desfiles produtos matérias Delícia de Desfile Cantão Máscara Cantão promete Página banana com Página Outono-Inverno Página Página revolucionar na Lancôme à da receita lascas de do SPFW 2010 do da passarela do base de chocolate desfile produto Chocolate matéria SPFW chocolate spfw chocolate spfw
  99. 99. diagramas de navegação GNT Moda eProgramas Programação Gastronomia Bem-Estar Matérias Promoções Blogs Orkut Rádio GNT Loja GNT BelezaPrograma Matéria Promoção Episódios Matérias Episódio Matéria Nota: Arquitetura do novo site do GNT (foco nos eixos Sobre o temáticos, além de uma programa navegação mais simples, mais enxuta, com menos níveis, proporcionando facilidade e rapidez no acesso ao conteúdo). Matérias Legenda: Matéria Página Conjunto de páginas Site externo
  100. 100. diagrama de navegação 0.0. Página inicial 10.0. Busca 3.0. 4.0. 5.0. 6.0. 7.0. 8.0. 9.0. Vídeos Matérias Fotos Blogs RSS Promoção Fale1.1. 1.2. 1.3. 2.0. conoscoPrograma (A) Programa (B) Programa (C) Programação 1.1.3. Envie seu vídeo 1.1.1. 1.1.4. 1.1.5. 1.1.6. 1.1.7. 1.1.8. Episódios Matérias Fotos Sobre o programa Apresentadores Ficha-técnica 1.1.2.1. 1.1.2.2. Vídeos (A) Vídeos (B) LEGENDA: Conteúdo automático Conteúdo editorial Conteúdo estático Conteúdo fixo 1.1.1.1. 1.1.7.1. Episódio Biografia 1.1.4.1. Conteúdo automático + editorial Matéria 1.1.5.1. Fotos
  101. 101. metodologia de projeto da equipe de ux da globosat: lista de telas
  102. 102. lista de telas
  103. 103. lista de telas
  104. 104. metodologia de projeto da equipe de ux da globosat: wireframes
  105. 105. wireframes BARRA DA GLOBO.COM 1 A estrutura da página inicial do GNT contém os seguintes elementos: 2MARCA2.1 2.2 HEADER FULL-BANNER (468 X 60) GNT 1. Barra da Globo.com.HOME GNT PROGRAMAS ▼ PROGRAMAÇÃO GASTRONOMIA MODA E BELEZA BEM-ESTAR 3 2. Header. PÁGINA INICIAL | EXCLUSIVO NA WEB | VÍDEOS | FOTOS | NOTÍCIAS | BLOGS | PROMOÇÕES 3.1 2.1. Marca do GNT. 4 BUSCA 10 2.2. Publicidade (full-banner: 468 x 60). DESTAQUE OPCIONAL (COBERTURA DE EVENTOS) 3. Menu de navegação global (eixos principais). BOTÃO 1 11 5 (120 X 90) 3.1. Menu de navegação local. 12 4. Destaque opcional (cobertura de eventos). MINI-GRADE DE12.1 PROGRAMAÇÃO DO GNT 5. Destaque principal (slideshow). (NO AR / A SEGUIR) 6. Destaques secundários (produtos web). DESTAQUE PRINCIPAL (SLIDESHOW) DESTAQUES 12.2 7. Publicidade (rectangle: 300 x 250). DA PROGRAMAÇÃO GNT (SLIDESHOW) 8. Destaques terciários (sites externos). 9. Publicidade (links patrocinados). 13 10. Campo de busca. SHOPPING 11. Publicidade (button 1: 120 x 90). 6 14 12. Box de programação. DESTAQUE DESTAQUE DESTAQUE PARCERIA 12.1. Mini-grade de programação. SECUNDÁRIO SECUNDÁRIO SECUNDÁRIO 12.2. Destaques da programação (slideshow). 13. Publicidade (shopping). 14. Box de parceria com outros sites (opcional). 7 8 15. Rodapé. Legenda: RÁDIO GNT TWITTER GNT LOJA GNT Conteúdo do GNT RECTANGLE (300 X 250) Conteúdo do tema 9 Conteúdo externo LINKS PATROCINADOS Distribuição Publicidade RODAPÉ 15
  106. 106. PÁGINA INICIAL 1 Logo Multishow 1.1 Header > Visite www.multishow.com.br 1. Header. 1.1. Logo Multishow com link para o- Página inicial 2 3 Horário: 5 site do canal. Deve-se utilizar uma Envie sua história de pegação QUARTA-FEIRA, 00h00 frase “call to action” para indicar a-  Sobre as pegadoras Horário alternativo: existência desse link. SEXTA-FEIRA, 00h00-  Sobre o programa dd/mm/aaaa - 00h00 4.1 2. Menu do site As Pegadoras. Texto de sinopse 6 3. Envie sua história: chamada com-  Envie sua história História de pegação da semana resumida texto de sinopse. link para o formulário de envio de Texto da matéria sobre o mensagem.-  Histórias de pegação programa da semana. Texto > Saiba mais 4.1. Destaque editorial principal - da matéria sobre o programa-  Blog Celular 7 obrigatório (publicação de textos, da semana. Texto da matéria fotos e vídeos). Matéria(s) sobre o sobre o programa da-  Fotos Texto de chamada programa da semana. semana. Texto da matéria sobre o programa da semana. Texto da do produto. 4.2. Destaque editorial secundário --  Vídeos matéria sobre o programa da semana. Texto Texto de chamada opcional (publicação de textos, fotos da matéria sobre o programa da semana. do produto. e vídeos). Matéria(s) sobre o-  Celular programa da semana, sobre > Mais de celular programas anteriores ou qualquer dd/mm/aaaa - 00h00 4.2 outro tema relacionado. Papel de parede História de pegação da semana passada 4.3. Galeria de vídeos (thumbnails - Texto de chamada Texto sobre programas anteriores. levam para a página do vídeo do produto. embeded). Texto de chamada > Mais histórias de pegação do produto. 4.4. Galeria de fotos (thumbnails - levam para a página da galeria de > Mais papéis de parede fotos). Vídeos 4.3 Fotos 4.4 dd/mm/aaaa Protetor de tela 5. Horário de exibição e horários dd/mm/aaaa Texto texto txt. alternativos. Texto texto txt. 00h00m00s Texto de chamada 6. Sinopse resumida do programa. dd/mm/aaaa do produto. dd/mm/aaaa Texto de chamada 7. Lista de produtos relacionados: Texto texto txt. Texto texto txt. do produto. papéis de parede, protetores de tela 00h00m00s e celular. > Mais vídeos > Mais fotos > Mais protetores de tela 4. Miolo
  107. 107. SOBRE AS PEGADORAS 1 Logo Multishow 1.1 Header > Visite www.multishow.com.br- Página inicial 2 3 Horário: 8 Envie sua história de pegação QUARTA-FEIRA, 00h00-  Sobre as pegadoras Horário alternativo: - Pegadora 1 Sobre as pegadoras SEXTA-FEIRA, 00h00 - Pegadora 2 - Pegadora 3 Texto de sinopse 9 resumida texto de sinopse.-  Sobre o programa FOTO DA FOTO DA FOTO DA > Saiba mais-  Envie sua história PEGADORA PEGADORA PEGADORA Celular 10-  Histórias de pegação Texto de chamada-  Blog do produto. Pequeno Pequeno Pequeno Texto de chamada texto sobre a texto sobre a texto sobre a-  Fotos do produto. pegadora. pegadora. pegadora. > Mais de celular-  Vídeos Entrevista Entrevista Entrevista Papel de parede-  Celular Fotos Fotos Fotos Texto de chamada Vídeos Vídeos Vídeos do produto. Texto de chamada do produto. Histórias de pegação > Mais papéis de parede Link para a história de pegação 1 Protetor de tela Link para a história de pegação 2 Texto de chamada do produto. Texto de chamada Link para a história de pegação 3 do produto. > Mais protetores de tela > Mais histórias de pegação
  108. 108. metodologia de projeto da equipe de ux da globosat: layouts
  109. 109. layouts
  110. 110. layoutsPadrão dos sites Globosat
  111. 111. layoutsPadrão dos sites Globosat
  112. 112. layoutsPadrão dos sites Globosat
  113. 113. layoutsPadrão dos sites Globosat
  114. 114. layoutsPadrão dos sites Globosat
  115. 115. metodologia de projeto da equipe de ux da globosat: descrição funcional
  116. 116. descrição funcional 1. Marca GNT GNT 1 RIO SUMMER RSS do blog 6 2. Widget “busca” do Word-Press. 2 7 8 Busca Título do post 3. Menu de navegação (widget “categorias” do Qua, dd/mm/aa por Fulano | categoria Entrevistas | tags Kalil Texto editorial com a cobertura Word-Press): cada item representa uma categoria e 3 especial do evento Rio Summer Agenda dos leva para o permalink desta categoria (com exceção texto editorial. Texto editorial com desfiles dos itens “Página inicial” - que leva para a home do a cobertura especial do evento Rio blog - e “Sobre o Rio Summer - que leva para uma Menu de página estática”). Os itens do menu são: Navegação Summer texto editorial. 99 Comentários - Página inicial(categorias) - Cobertura dos desfiles 9 - Galeria de fotos Widget - Itens da temporada Título do post - Dicas de beleza Qua, dd/mm/aa por Fulano | categoria Entrevistas | tags Kalil Ego 4 Texto editorial com a cobertura - Dicas de lugares especial do evento Rio Summer - Direto do backstage Tag-cloud - Entrevistas texto editorial. Texto editorial com 10 a cobertura especial do evento Rio Widget - Consultoria de moda Summer texto editorial. Twitter - Sobre o Rio Summer 5 99 Comentários 4. Tag-cloud: widget “tags” do Word-Press. 11 Últimas do 5. Últimas do Rio Summer: widget “posts recentes” Título do post do Word-Press (lista os últimos posts publicados).Rio Summer Qua, dd/mm/aa por Fulano | categoria Entrevistas | tags Kalil Texto editorial com a cobertura Links especial do evento Rio Summer 6. Header com a marca Rio Summer e link para a texto editorial. Texto editorial com assinatura do RSS do Blog. a cobertura especial do evento Rio Summer texto editorial. 7. Área de publicação dos posts (configurada para 99 Comentários publicar 10 posts. Após ultrapassar esse limite, a 12 paginação “anterior” e “próximo” é ativada). Blogs GNT [ Continua no próximo slide ... ]
  117. 117. DESCRIÇÃO FUNCIONAL DE TELASSporTV | Nova HomeNOVA HOME DO SPORTV 4. PROGRAMAÇÃO DO SPORTV: NÃO PERCA NO SPORTV: A área de navegação pelos programas divide-se em: a (a) Cards com destaques da programação. IMAGEM IMAGEM (b) Flash com o destaques para os programas principais. (c) Lista com todos os programas do SporTV. Título Título A Texto do destaque texto Texto do destaque texto (d) Lista com todas as modalidades do SporTV. C texto texto. texto texto. E Cada uma destas sub-áreas deve ser tratada de forma a B destacar as diferenças da informação apresentada, como: D Título Texto Título Texto a - Cards com destaque para a programação: do destaque texto do destaque texto IMAGEM IMAGEM Os cards com destaque para a programação do SporTV texto texto. texto texto. fazem referência aos programas que serão exibidos no dia (ex: Arena SporTV, Expresso da Bola, Tá na Área, etc.), ou à eventos específicos (ex: Liga Mundial de Vôlei, Título Texto Título Texto Master Series, Taça Libertadores, etc.). do destaque texto do destaque texto IMAGEM IMAGEM texto texto. texto texto. §  Contém 6 cards, no máximo (2 colunas com 3 cards em cada uma). §  SEMPRE DEVE SER UTILIZADO UM NÚMERO PAR DE Veja todos os programas: b CARDS (2 cards, 4 cards ou 6 cards). §  NUNCA DEVE SER UTILIZADO UM NÚMERO ÍMPAR DE CARDS (1 card, 3 cards ou 5 cards). Para mais informações, passe o mouse sobre a marca de cada programa Todos os programas c a1 - Cada card segue o padrão do site SporTV e contém: §  Imagem contextualizada com o assunto do card Arena SporTV » Jogos para Sempre » Redação SporTV » (imagem com funcionalidade - link). Bem, Amigos! » Linha de Chegada » SporTV Tá na Área » §  Título do card (título com funcionalidade - link). Caminhos da Aventura Oi » Missão Pan 2007 » SporTV News » §  Texto com 3 linhas, no máximo (texto com Dossiê SporTV » Momento Olímpico » Troca de Passes » funcionalidade - link). Expresso da Bola » Mundo Fitness » Zona de Impacto » Fora do Eixo » Navegando » Título a1 Texto do destaque texto IMAGEM Todas as modalidades d texto texto.NOTA IMPORTANTE: Os gráficos aqui representados não fazem qualquer referência a interface ou layout do site.
  118. 118. descrição funcional 1. Marca do evento. Não possui link para voltar à página inicial. 8 ...........................................................................................................................1 9 4 2. Menu de navegação. Cada item possui um link que leva para a “home” da editoria relacionada.2 ........................................................................................................................... 10 3. Twitter do GNT. Utiliza o widget HTML/Javascript, com título customizado e3 5 exibindo 4 updates. ........................................................................................................................... 11 4. Destaque editorial principal. Contém os seguintes elementos: §  Título editorial. 6 §  Sub-título editorial. §  Imagem/foto. Observação: o destaque editorial principal não é obrigatório. Apenas 1 destaque editorial principal pode ser exibido na página. 7 ........................................................................................................................... 5. Destaques editoriais secundários. Contém os seguintes elementos: §  Título editorial. §  Sub-título editorial. §  Imagem/foto. Observação: os destaques editoriais secundários não são obrigatórios. É possível 12 exibir no mínimo 1 e no máximo 5 destaques editoriais secundários na página.
  119. 119. descrição funcional 7.5. Sub-header (continuação): O desenho ao lado mostra o comportamento do filtro da grade de programação com o radio- button “filtrar grade” selecionado – a partir dessa seleção, os demais filtros da página são ativados. 7.51 Escolha uma modalidade, programa ou time 1) O radio-button “filtrar grade” ativa os demais ao vivo inédito filtros da página (drop-down de modalidade, exibir todos os programas Filtrar grade Selecione ▼ Selecione ▼ programa ou time e os check-boxes “ao vivo” e “inédito”)2 Escolha uma modalidade, programa ou time 2) No drop-down, o usuário deve escolher uma ao vivo inédito modalidade, ou um programa, ou um time... exibir todos os programas Filtrar grade Selecione ▼ Selecione ▼ Modalidade 3) ... após escolher uma opção no drop-down Programa (modalidade, programa ou time), o drop-down Time complementar é ativado com as opções correspondentes:3 •  Modalidade = lista de modalidades * Escolha uma modalidade, programa ou time •  Programa = lista de programas * ao vivo inédito •  Time = lista de times * exibir todos os programas Filtrar grade Modalidade ▼ Selecione ▼ * São listadas somente as modalidades, programas ou times que possuem página no site do SporTV4 Escolha uma modalidade, programa ou time 4) O usuário escolhe uma das opções listadas no ao vivo inédito drop-down correspondente exibir todos os programas Filtrar grade Modalidade ▼ Selecione ▼ Atletismo Basquete Esportes aquáticos
  120. 120. descrição funcional 7.7. Calendário (continuação): •  Além de selecionar cada data, o usuário também pode navegar através dos botões “anterior” (seta para a esquerda - ◄) e “próximo” (seta para a direita - ►). Quando não há mais navegação para um dia anterior ou próximo, o botão correspondente fica desativado. Dias ativados Dias desativados (com programação (sem programação 7.7 disponível) disponível) DOM SEG TER QUA QUI SEX SAB DOM SEG TER QUA QUI SEX SAB ◄ 19 20 21 22 23 24 25 26 27 28 29 30 31 01 ► JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL AGO hoje Botão “próximo” desativado (sem navegação para os próximos dias) Dia selecionado pelo usuário (por default, o calendário é carregado com o dia corrente selecionado) DOM SEG TER QUA QUI SEX SAB DOM SEG TER QUA QUI SEX SAB ◄ 19 20 21 22 23 24 25 26 27 28 29 30 31 01 ► JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL AGO hoje DOM SEG TER QUA QUI SEX SAB DOM SEG TER QUA QUI SEX SAB ◄ 19 20 21 22 23 24 25 26 27 28 29 30 31 01 ► JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL AGO hoje
  121. 121. descrição funcionalPrograma - modelo A Programa - modelo B Programa - modelo C Repete em todas as páginas STV STV STV STV STV Mini-grade de programação STV STV Rádio HOME Multishow HOME HOME HOME HOME Mini-home HOME HOME HOME Box comunidades HOME Repete em todas as páginas Sinopse do programa Sinopse do Mini-guia de episódios programa Mini-guia de episódios Loja Multishow LEGENDA: Conteúdo automático Conteúdo editorial Conteúdo estático Conteúdo fixo Conteúdo automático + editorial
  122. 122. metodologia de projeto da equipe de ux da globosat:metodologia clássica x metodologia ágil
  123. 123. metodologia clássica de projeto (water fall) •  Processo orientado à página/tela. •  Fases de projeto isoladas em •  equipes/times separados. •  Documentação muito detalhada. •  Pouca flexibilidade.* Fonte: The experience of making 8p.com.br, de Marcelo Gluz e Patricia Fontes
  124. 124. metodologia clássica X metodologia ágil Derrube o muro Arquitetura de informação Design de interfaces* Fonte: User experience deliverables, de Peter Morville <http://semanticstudios.com/publications/semantics/000228.php>
  125. 125. metodologia ágil de projeto (washing machine) •  Processo orientado à •  funcionalidade. •  O caso de uso é contruído •  através da colaboração de •  profissionais de diferentes •  áreas. •  Documentação pouco •  detalhada. •  Muita flexibilidade. •  Muita comunicação/diálogo •  entre os membros da •  equipe/time.* Fonte: The experience of making 8p.com.br, de Marcelo Gluz e Patricia Fontes
  126. 126. como o ux designer trabalhaBrainstorms e rascunhos Geração de alternativas Compartilhamento e interação com a equipe
  127. 127. como o ux designer trabalha* Fonte: Leah Buley (IA Summit 2008) citada na palestra Agile user experience, de Rafael Rez de Oliveira <http://www.slideshare.net/logicadigital/agile-user-experience-* Fonte: presentation>
  128. 128. como o ux designer trabalha A melhor ferramenta para o projeto da UX* Fonte: Agile user experience, de Rafael Rez de Oliveira <http://www.slideshare.net/logicadigital/agile-user-experience-presentation>
  129. 129. como o ux designer trabalha: lista de funcionalidades* Fonte: foto de Eduardo Rangel Brandão
  130. 130. como o ux designer trabalha: diagramas de navegação* Fonte: foto de Eduardo Rangel Brandão
  131. 131. como o ux designer trabalha: diagramas de navegação* Fonte: foto de Eduardo Rangel Brandão
  132. 132. como o ux designer trabalha: diagramas de navegação
  133. 133. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  134. 134. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  135. 135. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  136. 136. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  137. 137. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  138. 138. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  139. 139. como o ux designer trabalha: sketch da interface* Fonte: foto de Eduardo Rangel Brandão
  140. 140. como o ux designer trabalha: sketch da interface* Fonte: fotos de Steffania Paola
  141. 141. como o ux designer trabalha: descrição funcional
  142. 142. como o ux designer trabalha: descrição funcional
  143. 143. como o ux designer trabalha: sketch X interface* Fonte: foto de Eduardo Rangel Brandão
  144. 144. como o ux designer trabalha: sketch X interface
  145. 145. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  146. 146. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  147. 147. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  148. 148. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  149. 149. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  150. 150. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  151. 151. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  152. 152. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  153. 153. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  154. 154. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  155. 155. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  156. 156. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  157. 157. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  158. 158. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  159. 159. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  160. 160. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  161. 161. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  162. 162. como o ux designer trabalha* Fonte: foto de Eduardo Rangel Brandão
  163. 163. como o ux designer trabalha Projeto aprovado pelo diretor o/* Fonte: foto de Eduardo Rangel Brandão

×