Método The Bridge
User experience designer com + de 10
anos de atuação como designer web, e
5 anos como designer mobile.
Experiência profissional
Daniel Coscarelli
• Sobre o método
• Os estágios do método
• Atividades em grupo
• Entregáveis gerados com o
uso do método
• Programa para criar fluxos
e mapas mentais
Índice
Sobre o método
• É um método participativo.
• Requisitos funcionais são desenvolvidos (perspectiva dos usuários).
Os estágios do método
• Expressar os requerimentos
dos usuários em fluxos de
tarefas.
• Mapear os fluxos.
• Criar a interface visual.
Atividades em grupo
• Expressar os requerimentos dos usuários em fluxos de tarefas.
Faça uma lista com pelo menos 5 informações que você considera ser importante ter
em uma página inicial pública de uma empresa de turismo. Realize esta mesma tarefa de
listagem, porém, desta vez pensando na página inicial logada. Duração: 10 minutos.
• Mapear os fluxos.
Discuta entre os outros participantes, quais informações dentre todas as que foram
listadas, será realmente importante e de valor para o cliente final. Passe para os post-its
cada uma destas tarefas, de forma individual. Duração: 15 minutos.
• Criar a interface visual.
Fluxogramas, sketches, mapas de conteúdo, protótipos, etc. Estes são alguns dos
entregáveis possíveis que você irá fazer antes de criar a interface visual.
Sugestão para esta atividade: crie sketches das telas, e aproveite para testar a usabilidade e
experiência que os usuários terão com as interações escolhidas. Duração: 10 minutos.
Entregáveis gerados com o uso do método
Fluxogramas
Entregáveis gerados com o uso do método
Mapas de Conteúdo
Entregáveis gerados com o uso do método
Protótipos
Programa para criar fluxos e mapas mentais
Obrigado!
Dúvidas? Fique à vontade.
UX Designer Consultant
www.danielcoscarelli.com.br

Mais conteúdo relacionado

PDF
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
PPT
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
PDF
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
PDF
Sweet Child O' Themes
PDF
Do marketplace ao WordPress - WordCamp BH 2015
PDF
Guia do Front-end das Galáxias
PPTX
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
PDF
Elo perdido entre design e programação
WordCamp Rio de Janeiro 2015 - Vinícius Lourenço | Desenvolvendo Plugins para...
WordCAmp RJ 2015 - A importância do Design/UX Para os desenvolvedores de Word...
Design para WordPress- Anyssa Ferreira - WordCamp BH 2015
Sweet Child O' Themes
Do marketplace ao WordPress - WordCamp BH 2015
Guia do Front-end das Galáxias
WordCampBH 2015 - O mínimo essencial para o bom desempenho do seu projeto em ...
Elo perdido entre design e programação

Mais procurados (20)

PDF
O Papel do desenvolvedor Front End
PDF
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
PDF
Estrutura de um Front-End eficiente (para iniciantes)
PDF
Não me faça pensar
PPTX
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
PDF
Por que devo aprender JavaScript?
PPTX
Componentizando a Web com Polymer
PDF
Blogs para professores de idiomas, porque e como fazer
PPTX
Criando aplicações Híbridas com AngularJs, TypeScript e Material Design
PPTX
Criando Seu Primeiro App com Xamarin.Forms
PDF
Gerenciando Projetos Com Ruby On Rails
PPTX
Clean code: programando com WordPress de forma profissional
PDF
WordPress para Gestores de Conteúdo - WordCamp BH 2015
PDF
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
PPT
Ai1415 ad-tp2-g4-a
PPTX
Wordpress :: Plugins - visão geral
PPTX
Introdução ao Native Script
PPTX
Usando a programação web para mobile com Twitter Bootstrap
PPTX
Wordpress :: Configurar seu blog
PPTX
Write once, run "everywhere"
O Papel do desenvolvedor Front End
DESIGNER E FRONT-END DEV: Prontos para mudar seu workflow?
Estrutura de um Front-End eficiente (para iniciantes)
Não me faça pensar
TDC SP 2015 - Criando Web Apps Real Time com AngularJs e Firebase
Por que devo aprender JavaScript?
Componentizando a Web com Polymer
Blogs para professores de idiomas, porque e como fazer
Criando aplicações Híbridas com AngularJs, TypeScript e Material Design
Criando Seu Primeiro App com Xamarin.Forms
Gerenciando Projetos Com Ruby On Rails
Clean code: programando com WordPress de forma profissional
WordPress para Gestores de Conteúdo - WordCamp BH 2015
Introdução ao Web Design: Aula 1 - Imersão ao Web Design
Ai1415 ad-tp2-g4-a
Wordpress :: Plugins - visão geral
Introdução ao Native Script
Usando a programação web para mobile com Twitter Bootstrap
Wordpress :: Configurar seu blog
Write once, run "everywhere"
Anúncio

Destaque (20)

PDF
Comunidade. Abuse e use dela com moderação e inteligência.
PPTX
Fuja do ciclo vicioso do conteúdo sem valor
PPTX
Teste A/B
PDF
Wordpress search-elasticsearch
PDF
Como enviar newsletters no WordPress
PDF
Architecting an Highly Available and Scalable WordPress Site in AWS
PDF
Image manipulation in WordPress 3.5
ODP
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
ODP
Core plugins - WordCamp UK 2010
KEY
WordPress APIs
PDF
WordPress as a Service
PDF
Empowering Your Clients and Be an Advocate for Yourself
PDF
Debugging WordPress Core and Plugins!
PDF
Never fear, the customizer is here!
PDF
Create a newsletter in less than 17 minutes without writing a single word
PPTX
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
PPTX
Getting to Know Underscores
PPTX
Building a Simple Project Plan for WordPress Projects
PDF
Organizing Your First Website Usability Test - WordCamp Boston 2016
PDF
Passwords, Attakcks, and Security, oh my!
Comunidade. Abuse e use dela com moderação e inteligência.
Fuja do ciclo vicioso do conteúdo sem valor
Teste A/B
Wordpress search-elasticsearch
Como enviar newsletters no WordPress
Architecting an Highly Available and Scalable WordPress Site in AWS
Image manipulation in WordPress 3.5
Wordcamp 2010 I'm A Scientist Get me Out of Here - Mike Little
Core plugins - WordCamp UK 2010
WordPress APIs
WordPress as a Service
Empowering Your Clients and Be an Advocate for Yourself
Debugging WordPress Core and Plugins!
Never fear, the customizer is here!
Create a newsletter in less than 17 minutes without writing a single word
Teresa Lane - Content Modeling - WordCamp St. Louis 2016
Getting to Know Underscores
Building a Simple Project Plan for WordPress Projects
Organizing Your First Website Usability Test - WordCamp Boston 2016
Passwords, Attakcks, and Security, oh my!
Anúncio

Mais de Daniel Coscarelli (6)

PPTX
Análise SWOT
PDF
Design participativo
PPTX
Smart Human Cities - Projetando experiências incríveis para o cidadão!
PPTX
UX Research
PPTX
Pesquisas com usuários, o que desenvolvedores também precisam saber!
PPTX
UX - Entregaveis
Análise SWOT
Design participativo
Smart Human Cities - Projetando experiências incríveis para o cidadão!
UX Research
Pesquisas com usuários, o que desenvolvedores também precisam saber!
UX - Entregaveis

Último (12)

PPTX
Tipos de servidor em redes de computador.pptx
PDF
Processos no SAP Extended Warehouse Management, EWM100 Col26
PDF
Manejo integrado de pragas na cultura do algodão
PDF
Termos utilizados na designação de relação entre pessoa e uma obra.pdf
PPTX
Aula 9 - Funções em Python (Introdução à Ciência da Computação)
PPTX
Viasol Energia Solar -Soluções para geração e economia de energia
PPTX
Proposta de Implementação de uma Rede de Computador Cabeada.pptx
PDF
eBook - GUIA DE CONSULTA RAPIDA EM ROTEADORES E SWITCHES CISCO - VOL I.pdf
PPTX
Utilizando code blockes por andre backes
PPTX
Analise Estatica de Compiladores para criar uma nova LP
PPT
Conceitos básicos de Redes Neurais Artificiais
PDF
Jira Software projetos completos com scrum
Tipos de servidor em redes de computador.pptx
Processos no SAP Extended Warehouse Management, EWM100 Col26
Manejo integrado de pragas na cultura do algodão
Termos utilizados na designação de relação entre pessoa e uma obra.pdf
Aula 9 - Funções em Python (Introdução à Ciência da Computação)
Viasol Energia Solar -Soluções para geração e economia de energia
Proposta de Implementação de uma Rede de Computador Cabeada.pptx
eBook - GUIA DE CONSULTA RAPIDA EM ROTEADORES E SWITCHES CISCO - VOL I.pdf
Utilizando code blockes por andre backes
Analise Estatica de Compiladores para criar uma nova LP
Conceitos básicos de Redes Neurais Artificiais
Jira Software projetos completos com scrum

Método The bridge

  • 2. User experience designer com + de 10 anos de atuação como designer web, e 5 anos como designer mobile. Experiência profissional Daniel Coscarelli
  • 3. • Sobre o método • Os estágios do método • Atividades em grupo • Entregáveis gerados com o uso do método • Programa para criar fluxos e mapas mentais Índice
  • 4. Sobre o método • É um método participativo. • Requisitos funcionais são desenvolvidos (perspectiva dos usuários).
  • 5. Os estágios do método • Expressar os requerimentos dos usuários em fluxos de tarefas. • Mapear os fluxos. • Criar a interface visual.
  • 6. Atividades em grupo • Expressar os requerimentos dos usuários em fluxos de tarefas. Faça uma lista com pelo menos 5 informações que você considera ser importante ter em uma página inicial pública de uma empresa de turismo. Realize esta mesma tarefa de listagem, porém, desta vez pensando na página inicial logada. Duração: 10 minutos. • Mapear os fluxos. Discuta entre os outros participantes, quais informações dentre todas as que foram listadas, será realmente importante e de valor para o cliente final. Passe para os post-its cada uma destas tarefas, de forma individual. Duração: 15 minutos. • Criar a interface visual. Fluxogramas, sketches, mapas de conteúdo, protótipos, etc. Estes são alguns dos entregáveis possíveis que você irá fazer antes de criar a interface visual. Sugestão para esta atividade: crie sketches das telas, e aproveite para testar a usabilidade e experiência que os usuários terão com as interações escolhidas. Duração: 10 minutos.
  • 7. Entregáveis gerados com o uso do método Fluxogramas
  • 8. Entregáveis gerados com o uso do método Mapas de Conteúdo
  • 9. Entregáveis gerados com o uso do método Protótipos
  • 10. Programa para criar fluxos e mapas mentais
  • 11. Obrigado! Dúvidas? Fique à vontade. UX Designer Consultant www.danielcoscarelli.com.br

Notas do Editor

  • #5: Sobre o método A metodologia The Bridge é um importante método participativo para projetos de sistemas interativos. Através deste, requisitos funcionais são desenvolvidos a partir da perspectiva dos usuários e tratados como requisitos dos usuários, ele deve ser aplicado em sessões para grupos mistos e pequenos de usuários e desenvolvedores. Qual sua importância? Ele é primordial para expressar os requerimentos dos usuários em fluxos de navegação, mapear a fluidez destes em objetos de tarefas e, por fim, criar a interface visual interativa.
  • #6: Os estágios do método Expressar os requerimentos dos usuários em fluxos de tarefas Objetivo: Transformar as necessidades dos usuários relacionadas às tarefas em requisitos que reflitam o fluxo de navegação, e que possam servir de insumo para a próxima etapa. Atividades: Analisar, documentar, redefinir e testar a usabilidade dos fluxos de tarefas. Mapear os fluxos de tarefas em objetos de tarefas Objetivo: Mapear os requisitos dos usuários definidos na parte 1, em objetos de tarefa (unidades discretas de informação que podem ser manipuladas pelos usuários na execução da tarefa), com comportamentos específicos e relações de agregação. Atividades: Descobrir, projetar, documentar e testar a usabilidade dos objetos de tarefas. Criar objetos de tarefas em objetos de interface gráfica Objetivo: Projetar uma interface gráfica amigável para a execução das tarefas. Atividades: Projetar, documentar, criar protótipos em papel e testar a usabilidade da interface gráfica.
  • #7: Material utilizado: papel, caneta, post-its, canetões, quadro, parede. Obs: como este método é participativo e envolve muito brainstorming, ele poderá durar várias horas, ou até mesmo passar de um dia para o outro. Portanto, prepare um bom lanche, e faça com que todos participem, dando a sua contribuição.
  • #8: Obs: Esta imagem está fora de foco, pois, trata-se de um projeto sigiloso.
  • #9: Obs: Esta imagem está fora de foco, pois, trata-se de um projeto sigiloso.
  • #10: Obs: Esta imagem está fora de foco, pois, trata-se de um projeto sigiloso.
  • #11: Ótimo programa para criar mapas mentais, e fluxogramas.
  • #12: Contatos: Site: www.danielcoscarelli.com.br Email: webcoscarelli@gmail.com Linkedin: br.linkedin.com/in/danielcoscarelli Grupo UX BH no Facebook: https://www.facebook.com/groups/1566133880310211/ Obrigado!