SlideShare una empresa de Scribd logo
1 de 18
Descargar para leer sin conexión
Vocabulário Visual
Hélio Eduardo Lopes – Hierarquia da Informação – SENAC 2015
Baseado no artigo A visual vocabulary for describing info architecture and
interaction design, de Jesse James Garrett (2002) e na tradução de Livia Labate e
Laura Cretton Lessa (2004).
Diagramas e Vocabulários Visuais
 Diagramas são ferramentas essenciais para comunicar a arquitetura de
informação e o design de interação em times de desenvolvimento na
Web.
 Vocabulário Visual é um conjunto de símbolos usado para descrever
sistemas, estruturas ou processos.
Públicos-Alvo
 Gerentes e Patrocinadores de Projeto os utilizam para obter um sentido
geral do escopo e forma do projeto.
 Geradores de Conteúdo os utilizam para direcionar os requerimentos de
conteúdo.
 Designers Visuais e de Interface os utilizam para contar quantos designs de
página únicos devem ser produzidos e ter uma noção inicial da
navegação e requerimentos para interface destes designs.
 Tecnólogos os utilizam para derivar requerimentos funcionais
 Arquitetos de Informação e Designers de Interação os utilizam para
desenvolver navegação detalhada e requerimentos de interface para
cada página.
Requisitos básicos
 Ser compatível com um quadro negro/branco:
 Ser independente de ferramentas:
 Ser pequeno e enxuto: .
Usos: AI x UX
 Para a Arquitetura de informação e o Design de Interação o diagrama
foca na macroestrutura, mostrando somente o detalhe necessário para
que os membros do time tenham a "visão geral".
 A tarefa da AI é enfatizar a estrutura conceitual e organização de
conteúdo. Note que a estrutura conceitual não é a mesma coisa que
estrutura de navegação.
Para o design de interação (UX), o diagrama deve enfatizar como o
usuário flui através de tarefas definidas e quais os passos específicos dentro
destas tarefas.
 Importante: detalhes da interface não devem aparecer no diagrama –botões e
campos, por exemplo.
Logo...
 O sistema mostra caminhos ao usuário
 O usuário move-se ao longo destes caminhos por meio de ações.
 Estas ações fazem, então, com que o sistema gere resultados.
Páginas, Arquivos e Conjuntos
 A página é uma unidade de apresentação, não (necessariamente) a
unidade de implementação – uma página no diagrama pode
corresponder a múltiplas páginas HTML ou múltiplas unidades de código
(como em um server-side include ou implementações dinâmicas a partir
de bancos de dados).
 Há também os arquivos, parcelas de dados sem propriedades de
navegação. Documentos são fornecidos ao usuário para uso fora do
ambiente do navegador (como arquivos de áudio e vídeo,
documentos stand-alone como PDFs, ou executáveis).
Conectores e Setas
 As relações entre elementos são simbolizadas por linhas simples ou
conectores. Estas relações conceituais são inevitavelmente traduzidas
como relações de navegação.
 No caso da arquitetura de informação, estas relações são comumente
refletidas na organização hierárquica de páginas em árvores.
 Quando diagramamos um design de interação, nossos conectores
também precisam demonstrar direção para indicar como o usuário se
moverá em meio ao sistema para completar uma tarefa.
Conjuntos Concorrentes
 Um conjunto concorrente (representado por um semicírculo) é usado em
casos onde a ação do usuário gera resultados múltiplos simultâneos (como
a aparição de janelas pop-up ao mesmo tempo em que uma página é
carregada na janela principal, ou o aparecimento de uma página
enquanto um arquivo está sendo baixado).
Pontos de Continuidade
 Para possibilitar que nossos diagramas sejam separados em partes fáceis
de digerir, usa-se pontos de continuação (colchetes) para ligar os
intervalos entre as páginas.
Áreas e Áreas Interativas
 O elemento área (um retângulo de bordas arredondadas) é usado para
identificar um grupo de páginas que possui um ou mais atributos comuns
(como aparecer num pop-up ou ter um tratamento gráfico semelhante).
Devemos usar labels para identificar esses atributos ou (como os
conectores), fazer referências a notas anexadas ao documento se há
muito a dizer.
 Para áreas de características semelhantes, usa-se o mesmo recurso de
páginas semelhantes.
Áreas de Fluxo
 Fluxo é uma sequência de passos que aparece várias vezes em contextos
diferentes (frequentemente componentes de uma tarefa maior que o
usuário está tentando completar.
 São representadas em um diagrama por dois elementos: área de fluxo,
que agrupa as páginas pertencentes àquele fluxo; e referência do fluxo,
que serve como representante do fluxo em todos os contextos em que o
fluxo precisa ser repetido.
Pontos de Decisão
 Quando uma ação do usuário pode gerar apenas um entre alguns
resultados, o sistema precisa tomar uma decisão sobre o que será
apresentado (talvez o exemplo mais comum seja um erro num formulário
de inscrição). Chamamos isso de ponto de decisão, representado por um
losango.
Setas e Conectores Condicionais
 Um conector condicional (representado por uma linha tracejada) é usado
quando um caminho pode ou não ser apresentado ao usuário,
dependendo se uma ou mais condições são satisfeitas.
Ramos Condicionais
 Quando um sistema deve selecionar um caminho entre um número de
opções mutuamente exclusivas a ser apresentadas ao usuário, usamos
um ramo condicional (triângulo). Os elementos acima se conectam a um
ponto do triângulo enquanto os elementos abaixo se ligam ao lado
oposto.
Seletores Condicionais
 O elemento seletor condicional (trapézio) funciona mostrando vários
caminhos que não são mutuamente exclusivos. Qualquer número de
caminhos que satisfaçam as condições pode ser apresentado ao usuário.
 A aplicação mais comum é em resultados de busca. Aqui, a página de
resultados de busca aparece acima do seletor. A condição é o critério de
busca utilizado pelo usuário; os caminhos abaixo levam às páginas de
conteúdo indexadas pela ferramenta.
Veja também:
 Arquivo do stencil para Visio 2000
 Arquivo do stencil para Visio 5
 Arquivo do stencil para Visio 4
 Arquivo de PowerPoint
 Biblioteca de formas para Adobe InDesign 2.x (agradecimentos a Andrew Robinson)
 Biblioteca de formas para Adobe InDesign 1.x
 Biblioteca de formas para FreeHand 10 (agradecimentos a Andrew Crow)
 Biblioteca de formas para FreeHand 9 (agradecimentos a Andrew Crow)
 Arquivo EPS para Illustrator
 Biblioteca de formas para iGrafx Flowcharter 2000 (thanks Andrew Robinson)
 Biblioteca de formas para OpenOffice (agradecimentos a Nelson Rodriguez-Peña)
 Coleção de arquivos EPS contendo um elemento por arquivo, ideal para ser importado por
outras aplicações (1.1 MB)
Obrigado !
Hélio Eduardo Lopes
Professor de Hierarquia da Informação – SENAC
UX consultant – Elefante Verde
Contatos:
helio1972@gmail.com
@helio1972
(21) 98151.5727

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Componentes
ComponentesComponentes
Componentes
 
Diagrama UML Pergamum
Diagrama UML PergamumDiagrama UML Pergamum
Diagrama UML Pergamum
 
Diagramas de implantação
Diagramas de implantaçãoDiagramas de implantação
Diagramas de implantação
 
Aula1 astah
Aula1 astahAula1 astah
Aula1 astah
 
Apostila de uml
Apostila de umlApostila de uml
Apostila de uml
 
Ehdm
EhdmEhdm
Ehdm
 
Modelagem 21102006_2
Modelagem 21102006_2Modelagem 21102006_2
Modelagem 21102006_2
 

Similar a Vocabulário visual senac 2015

Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettLuiz Agner
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptxGelvazioCamargo
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e PrototipagemRos Galabo, PhD
 
Documentação de Arquitetura de Software Aplicando o C4 Model
Documentação de Arquitetura  de Software Aplicando o C4 ModelDocumentação de Arquitetura  de Software Aplicando o C4 Model
Documentação de Arquitetura de Software Aplicando o C4 ModelDouglas Alonso
 
Aula modelagem de dados
Aula modelagem de dadosAula modelagem de dados
Aula modelagem de dadosGabriel Moura
 
Visão Geral Arquiteturade Software
Visão Geral Arquiteturade SoftwareVisão Geral Arquiteturade Software
Visão Geral Arquiteturade Softwareelliando dias
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projetoejdn1
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegaçãopospipoca
 
Computação Móvel 2012.2 - Android
Computação Móvel 2012.2 - AndroidComputação Móvel 2012.2 - Android
Computação Móvel 2012.2 - AndroidTiago Bencardino
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbOtávio Souza
 
Modelagem Aplicações Web com UML
Modelagem Aplicações Web com UMLModelagem Aplicações Web com UML
Modelagem Aplicações Web com UMLClaudio Martins
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxLuiz Antonio
 
Programação Orientada a Aspectos
Programação Orientada a AspectosProgramação Orientada a Aspectos
Programação Orientada a AspectosRegina Macedo
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobileVlamir Carneiro Jr
 
Padrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e BridgePadrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e BridgeLorran Pegoretti
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mércia Regina da Silva
 
Manual do Access-Denise Guimarães
Manual do Access-Denise GuimarãesManual do Access-Denise Guimarães
Manual do Access-Denise GuimarãesCassandra Cristina
 

Similar a Vocabulário visual senac 2015 (20)

Diagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de GarrettDiagrama de Navegação e Vocabulário Visual de Garrett
Diagrama de Navegação e Vocabulário Visual de Garrett
 
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptxBack-End e Front-End para Desenvolvimento Web -  GELVAZIO CAMARGO.pptx
Back-End e Front-End para Desenvolvimento Web - GELVAZIO CAMARGO.pptx
 
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
Mapas de site,  Fluxos de Tarefa,  Wireframe e PrototipagemMapas de site,  Fluxos de Tarefa,  Wireframe e Prototipagem
Mapas de site, Fluxos de Tarefa, Wireframe e Prototipagem
 
Documentação de Arquitetura de Software Aplicando o C4 Model
Documentação de Arquitetura  de Software Aplicando o C4 ModelDocumentação de Arquitetura  de Software Aplicando o C4 Model
Documentação de Arquitetura de Software Aplicando o C4 Model
 
Aula modelagem de dados
Aula modelagem de dadosAula modelagem de dados
Aula modelagem de dados
 
Navegação
NavegaçãoNavegação
Navegação
 
Visão Geral Arquiteturade Software
Visão Geral Arquiteturade SoftwareVisão Geral Arquiteturade Software
Visão Geral Arquiteturade Software
 
UMLIntro.pptx
UMLIntro.pptxUMLIntro.pptx
UMLIntro.pptx
 
Padroes De Projeto
Padroes De ProjetoPadroes De Projeto
Padroes De Projeto
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
Computação Móvel 2012.2 - Android
Computação Móvel 2012.2 - AndroidComputação Móvel 2012.2 - Android
Computação Móvel 2012.2 - Android
 
Análise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova IntrawebbAnálise de usabilidade de Intranet - Case: Nova Intrawebb
Análise de usabilidade de Intranet - Case: Nova Intrawebb
 
Modelagem Aplicações Web com UML
Modelagem Aplicações Web com UMLModelagem Aplicações Web com UML
Modelagem Aplicações Web com UML
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Programação Orientada a Aspectos
Programação Orientada a AspectosProgramação Orientada a Aspectos
Programação Orientada a Aspectos
 
Padrões de Design para Interfaces Mobile
Padrões de Design para Interfaces MobilePadrões de Design para Interfaces Mobile
Padrões de Design para Interfaces Mobile
 
UMLIntro.pdf
UMLIntro.pdfUMLIntro.pdf
UMLIntro.pdf
 
Padrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e BridgePadrões de projeto - Adapter, Proxy, Composite e Bridge
Padrões de projeto - Adapter, Proxy, Composite e Bridge
 
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
Mercia regina portfólio-interdisciplinar-individual - analise-de-sistemas-1º-...
 
Manual do Access-Denise Guimarães
Manual do Access-Denise GuimarãesManual do Access-Denise Guimarães
Manual do Access-Denise Guimarães
 

Vocabulário visual senac 2015

  • 1. Vocabulário Visual Hélio Eduardo Lopes – Hierarquia da Informação – SENAC 2015 Baseado no artigo A visual vocabulary for describing info architecture and interaction design, de Jesse James Garrett (2002) e na tradução de Livia Labate e Laura Cretton Lessa (2004).
  • 2. Diagramas e Vocabulários Visuais  Diagramas são ferramentas essenciais para comunicar a arquitetura de informação e o design de interação em times de desenvolvimento na Web.  Vocabulário Visual é um conjunto de símbolos usado para descrever sistemas, estruturas ou processos.
  • 3. Públicos-Alvo  Gerentes e Patrocinadores de Projeto os utilizam para obter um sentido geral do escopo e forma do projeto.  Geradores de Conteúdo os utilizam para direcionar os requerimentos de conteúdo.  Designers Visuais e de Interface os utilizam para contar quantos designs de página únicos devem ser produzidos e ter uma noção inicial da navegação e requerimentos para interface destes designs.  Tecnólogos os utilizam para derivar requerimentos funcionais  Arquitetos de Informação e Designers de Interação os utilizam para desenvolver navegação detalhada e requerimentos de interface para cada página.
  • 4. Requisitos básicos  Ser compatível com um quadro negro/branco:  Ser independente de ferramentas:  Ser pequeno e enxuto: .
  • 5. Usos: AI x UX  Para a Arquitetura de informação e o Design de Interação o diagrama foca na macroestrutura, mostrando somente o detalhe necessário para que os membros do time tenham a "visão geral".  A tarefa da AI é enfatizar a estrutura conceitual e organização de conteúdo. Note que a estrutura conceitual não é a mesma coisa que estrutura de navegação. Para o design de interação (UX), o diagrama deve enfatizar como o usuário flui através de tarefas definidas e quais os passos específicos dentro destas tarefas.  Importante: detalhes da interface não devem aparecer no diagrama –botões e campos, por exemplo.
  • 6. Logo...  O sistema mostra caminhos ao usuário  O usuário move-se ao longo destes caminhos por meio de ações.  Estas ações fazem, então, com que o sistema gere resultados.
  • 7. Páginas, Arquivos e Conjuntos  A página é uma unidade de apresentação, não (necessariamente) a unidade de implementação – uma página no diagrama pode corresponder a múltiplas páginas HTML ou múltiplas unidades de código (como em um server-side include ou implementações dinâmicas a partir de bancos de dados).  Há também os arquivos, parcelas de dados sem propriedades de navegação. Documentos são fornecidos ao usuário para uso fora do ambiente do navegador (como arquivos de áudio e vídeo, documentos stand-alone como PDFs, ou executáveis).
  • 8. Conectores e Setas  As relações entre elementos são simbolizadas por linhas simples ou conectores. Estas relações conceituais são inevitavelmente traduzidas como relações de navegação.  No caso da arquitetura de informação, estas relações são comumente refletidas na organização hierárquica de páginas em árvores.  Quando diagramamos um design de interação, nossos conectores também precisam demonstrar direção para indicar como o usuário se moverá em meio ao sistema para completar uma tarefa.
  • 9. Conjuntos Concorrentes  Um conjunto concorrente (representado por um semicírculo) é usado em casos onde a ação do usuário gera resultados múltiplos simultâneos (como a aparição de janelas pop-up ao mesmo tempo em que uma página é carregada na janela principal, ou o aparecimento de uma página enquanto um arquivo está sendo baixado).
  • 10. Pontos de Continuidade  Para possibilitar que nossos diagramas sejam separados em partes fáceis de digerir, usa-se pontos de continuação (colchetes) para ligar os intervalos entre as páginas.
  • 11. Áreas e Áreas Interativas  O elemento área (um retângulo de bordas arredondadas) é usado para identificar um grupo de páginas que possui um ou mais atributos comuns (como aparecer num pop-up ou ter um tratamento gráfico semelhante). Devemos usar labels para identificar esses atributos ou (como os conectores), fazer referências a notas anexadas ao documento se há muito a dizer.  Para áreas de características semelhantes, usa-se o mesmo recurso de páginas semelhantes.
  • 12. Áreas de Fluxo  Fluxo é uma sequência de passos que aparece várias vezes em contextos diferentes (frequentemente componentes de uma tarefa maior que o usuário está tentando completar.  São representadas em um diagrama por dois elementos: área de fluxo, que agrupa as páginas pertencentes àquele fluxo; e referência do fluxo, que serve como representante do fluxo em todos os contextos em que o fluxo precisa ser repetido.
  • 13. Pontos de Decisão  Quando uma ação do usuário pode gerar apenas um entre alguns resultados, o sistema precisa tomar uma decisão sobre o que será apresentado (talvez o exemplo mais comum seja um erro num formulário de inscrição). Chamamos isso de ponto de decisão, representado por um losango.
  • 14. Setas e Conectores Condicionais  Um conector condicional (representado por uma linha tracejada) é usado quando um caminho pode ou não ser apresentado ao usuário, dependendo se uma ou mais condições são satisfeitas.
  • 15. Ramos Condicionais  Quando um sistema deve selecionar um caminho entre um número de opções mutuamente exclusivas a ser apresentadas ao usuário, usamos um ramo condicional (triângulo). Os elementos acima se conectam a um ponto do triângulo enquanto os elementos abaixo se ligam ao lado oposto.
  • 16. Seletores Condicionais  O elemento seletor condicional (trapézio) funciona mostrando vários caminhos que não são mutuamente exclusivos. Qualquer número de caminhos que satisfaçam as condições pode ser apresentado ao usuário.  A aplicação mais comum é em resultados de busca. Aqui, a página de resultados de busca aparece acima do seletor. A condição é o critério de busca utilizado pelo usuário; os caminhos abaixo levam às páginas de conteúdo indexadas pela ferramenta.
  • 17. Veja também:  Arquivo do stencil para Visio 2000  Arquivo do stencil para Visio 5  Arquivo do stencil para Visio 4  Arquivo de PowerPoint  Biblioteca de formas para Adobe InDesign 2.x (agradecimentos a Andrew Robinson)  Biblioteca de formas para Adobe InDesign 1.x  Biblioteca de formas para FreeHand 10 (agradecimentos a Andrew Crow)  Biblioteca de formas para FreeHand 9 (agradecimentos a Andrew Crow)  Arquivo EPS para Illustrator  Biblioteca de formas para iGrafx Flowcharter 2000 (thanks Andrew Robinson)  Biblioteca de formas para OpenOffice (agradecimentos a Nelson Rodriguez-Peña)  Coleção de arquivos EPS contendo um elemento por arquivo, ideal para ser importado por outras aplicações (1.1 MB)
  • 18. Obrigado ! Hélio Eduardo Lopes Professor de Hierarquia da Informação – SENAC UX consultant – Elefante Verde Contatos: helio1972@gmail.com @helio1972 (21) 98151.5727