SlideShare uma empresa Scribd logo
1 de 16
PADRÕES DE PROJETOS DE INTERFACE DE USUÁRIO
PROJETO DE NAVEGAÇÃO E INTERAÇÃO
História da Empresa
Ferruccio Lamborghini (1963);
Tratores;
Lamborghini x Ferrari;
"Ah, é? Agora serei seu rival e te mostrarei
como se faz um carro de verdade"
350 GT (1964);
Até hoje foram produzidos 27 modelos;
Padrão de Projeto
São pontos de referência padrão que resolvem o problema de design comum;
Forma com que a pessoa interage e controla um dispositivo, software ou
aplicativo;
UX Design: está relacionado com a experiência do usuário e com seus
sentimentos ;
UI Design: maneira como o usuário alcançara essa experiência;
UI Design: Menu
Problema: O usuário precisa navegar entre as seções de um site, mas o espaço
para mostrar essa navegação é limitado;
Solução: Menu Horizontal Dropdown;
UI Design: Breadcrumbs
Problema: O usuário precisa saber sua localização na estrutura hierárquica do
site para possivelmente navegar de volta para um nível mais alto na hierarquia;
Solução: Breadcrumbs;
UI Design: Gallery
Problema: O usuário precisa procurar uma coleção de imagens de alta qualidade;
Solução: Gallery;
UI Design: Cards
Problema: O usuário precisa procurar conteúdo de diferentes tipos e tamanhos;
Solução: Cards;
UI Design: Activity Stream
Problema: O usuário quer obter uma visão geral das ações recentes em um
sistema que são interessantes da sua perspectiva.;
Solução: Activity Stream;
UI Design: Module Tabs
Problema: O conteúdo precisa ser separado em seções e acessado por meio de
uma única área de conteúdo usando uma estrutura de navegação plana que não
atualize a página quando selecionada;
Solução: Module Tabs;
UI Design: Fat Footer
Problema: Os usuários precisam de um mecanismo que lhes permita acessar
rapidamente seções específicas de um site ou aplicativo ignorando a estrutura de
navegação;
Solução: Fat Footer;
Recomendação de Padrões
UI Design: Autocomplete
Problema: O usuário precisa de reconhecimento de pesquisa auxiliada ao
executar tarefas de busca que são difíceis de lembrar ou facilmente digitar
incorretamente;
Solução: Autocomplete
Dúvidas?
Carlos Kendi Tanaka;
Gleison Tiago Alves de Brito;
Referências Bibliográficas
Automobili Lamborghini. Disponível em: <https://www.lamborghini.com/en-en/>
Acesso em: 02 de Novembro de 2016;
Lamborghini. Disponível em: <https://pt.wikipedia.org/wiki/Lamborghini> Acesso
em: 02 de Novembro de 2016;
Design patterns. Disponível em: <http://ui-patterns.com/patterns> Acesso em: 02
de Novembro de 2016.
Referências Bibliográficas
MATIOLA, Willian, O que é UI Design e UX Design? Disponível em: <
http://www.designculture.com.br/o-que-e-ui-design-e-ux-design/> Acesso em: 02
de Novembro de 2016.
All Design Patterns. Disponível em:
<https://developer.yahoo.com/ypatterns/everything.html/> Acesso em: 02 de
Novembro de 2016.
Lamborghini

Mais conteúdo relacionado

Mais procurados

Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Renato Melo
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensMarconi Pacheco
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosGilberto Crespo
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design ResponsivoVictor Melo
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoRégis Eduardo Weizenmann Gregol
 
Arquitetura da informação - site Decathlhon
Arquitetura da informação - site DecathlhonArquitetura da informação - site Decathlhon
Arquitetura da informação - site DecathlhonNatalia Moreira
 
Design: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempoDesign: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempoComunidade NetPonto
 
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
 

Mais procurados (8)

Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022Wireframe em Aplicativos - Webdesign 2022
Wireframe em Aplicativos - Webdesign 2022
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhosSites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
Sites Responsivos - Como mostrar o mesmo conteúdo em diversos aparelhos
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
Arquitetura da informação - site Decathlhon
Arquitetura da informação - site DecathlhonArquitetura da informação - site Decathlhon
Arquitetura da informação - site Decathlhon
 
Design: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempoDesign: Necessidade ou desperdício de tempo
Design: Necessidade ou desperdício de tempo
 
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
 

Semelhante a Lamborghini

12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e UsabilidadeClaudio Toldo
 
Construindo uma Arquitetura de Menu
Construindo uma Arquitetura de Menu Construindo uma Arquitetura de Menu
Construindo uma Arquitetura de Menu Aline Yokota
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04Alvaro Gomes
 
Curso de Joomla na Pratica
Curso de Joomla na PraticaCurso de Joomla na Pratica
Curso de Joomla na PraticaGrupo Treinar
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfssuser595b1e1
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfArlindo Correia
 
Consultoria sobre Joomla!
Consultoria sobre Joomla! Consultoria sobre Joomla!
Consultoria sobre Joomla! Grupo Treinar
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para DesenvolvedoresRian Dutra, MSc.
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenLuiz Agner
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UXEdu Agni
 
Ai1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-aAi1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-amfsmsl
 
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versãoJoomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versãoBule Comunicação
 
Ponto Frio - Análise arquitetura da informação
Ponto Frio - Análise arquitetura da informaçãoPonto Frio - Análise arquitetura da informação
Ponto Frio - Análise arquitetura da informaçãoAdson Santos
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios BásicosVítor Teixeira
 

Semelhante a Lamborghini (20)

3 apres pb_g4
3 apres pb_g43 apres pb_g4
3 apres pb_g4
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 
Ux pt2
Ux pt2Ux pt2
Ux pt2
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
Construindo uma Arquitetura de Menu
Construindo uma Arquitetura de Menu Construindo uma Arquitetura de Menu
Construindo uma Arquitetura de Menu
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Aula06 webdesign
Aula06 webdesignAula06 webdesign
Aula06 webdesign
 
Curso de Joomla na Pratica
Curso de Joomla na PraticaCurso de Joomla na Pratica
Curso de Joomla na Pratica
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdfas-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
as-cinco-competencias-do-design-de-experiencia-do-usuario-__-uxmatters.pdf
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
Consultoria sobre Joomla!
Consultoria sobre Joomla! Consultoria sobre Joomla!
Consultoria sobre Joomla!
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro Nielsen
 
O papel do Front-End na UX
O papel do Front-End na UXO papel do Front-End na UX
O papel do Front-End na UX
 
Ai1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-aAi1415 ad-tp2-g4-a
Ai1415 ad-tp2-g4-a
 
Joomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versãoJoomla 3.0 - Novidades sobre a versão
Joomla 3.0 - Novidades sobre a versão
 
Ponto Frio - Análise arquitetura da informação
Ponto Frio - Análise arquitetura da informaçãoPonto Frio - Análise arquitetura da informação
Ponto Frio - Análise arquitetura da informação
 
Mobile UX - Princípios Básicos
Mobile UX - Princípios BásicosMobile UX - Princípios Básicos
Mobile UX - Princípios Básicos
 

Lamborghini

  • 1. PADRÕES DE PROJETOS DE INTERFACE DE USUÁRIO PROJETO DE NAVEGAÇÃO E INTERAÇÃO
  • 2. História da Empresa Ferruccio Lamborghini (1963); Tratores; Lamborghini x Ferrari; "Ah, é? Agora serei seu rival e te mostrarei como se faz um carro de verdade" 350 GT (1964); Até hoje foram produzidos 27 modelos;
  • 3. Padrão de Projeto São pontos de referência padrão que resolvem o problema de design comum; Forma com que a pessoa interage e controla um dispositivo, software ou aplicativo; UX Design: está relacionado com a experiência do usuário e com seus sentimentos ; UI Design: maneira como o usuário alcançara essa experiência;
  • 4. UI Design: Menu Problema: O usuário precisa navegar entre as seções de um site, mas o espaço para mostrar essa navegação é limitado; Solução: Menu Horizontal Dropdown;
  • 5. UI Design: Breadcrumbs Problema: O usuário precisa saber sua localização na estrutura hierárquica do site para possivelmente navegar de volta para um nível mais alto na hierarquia; Solução: Breadcrumbs;
  • 6. UI Design: Gallery Problema: O usuário precisa procurar uma coleção de imagens de alta qualidade; Solução: Gallery;
  • 7. UI Design: Cards Problema: O usuário precisa procurar conteúdo de diferentes tipos e tamanhos; Solução: Cards;
  • 8. UI Design: Activity Stream Problema: O usuário quer obter uma visão geral das ações recentes em um sistema que são interessantes da sua perspectiva.; Solução: Activity Stream;
  • 9. UI Design: Module Tabs Problema: O conteúdo precisa ser separado em seções e acessado por meio de uma única área de conteúdo usando uma estrutura de navegação plana que não atualize a página quando selecionada; Solução: Module Tabs;
  • 10. UI Design: Fat Footer Problema: Os usuários precisam de um mecanismo que lhes permita acessar rapidamente seções específicas de um site ou aplicativo ignorando a estrutura de navegação; Solução: Fat Footer;
  • 12. UI Design: Autocomplete Problema: O usuário precisa de reconhecimento de pesquisa auxiliada ao executar tarefas de busca que são difíceis de lembrar ou facilmente digitar incorretamente; Solução: Autocomplete
  • 13. Dúvidas? Carlos Kendi Tanaka; Gleison Tiago Alves de Brito;
  • 14. Referências Bibliográficas Automobili Lamborghini. Disponível em: <https://www.lamborghini.com/en-en/> Acesso em: 02 de Novembro de 2016; Lamborghini. Disponível em: <https://pt.wikipedia.org/wiki/Lamborghini> Acesso em: 02 de Novembro de 2016; Design patterns. Disponível em: <http://ui-patterns.com/patterns> Acesso em: 02 de Novembro de 2016.
  • 15. Referências Bibliográficas MATIOLA, Willian, O que é UI Design e UX Design? Disponível em: < http://www.designculture.com.br/o-que-e-ui-design-e-ux-design/> Acesso em: 02 de Novembro de 2016. All Design Patterns. Disponível em: <https://developer.yahoo.com/ypatterns/everything.html/> Acesso em: 02 de Novembro de 2016.

Notas do Editor

  1. enquanto fazia uma revisão de sua Ferrari na fábrica, e foi reclamar a respeito do sistema de embreagem de sua Ferrari, com o qual Ferruccio já andava há tempos insatisfeito. Tratado com displicência por Enzo, recebeu uma resposta de nível semelhante a: "Você é um agricultor! Continue, então, dirigindo seus tratores e não fale dos meus carros".
  2. UI Design(User Interface) é a interação entre a interface e o usuário, já UX (User Experience)é como essas interações trabalharão o lado emocional do usuário, a sua experiência com o sistema.
  3. Use quando há entre 2 e 9 seções de conteúdo que precisam de uma estrutura de navegação hierárquica. Use quando sua funcionalidade se assemelha a uma de uma aplicação desktop. Imita a metáfora. Não use quando houver necessidade de selecionar a localização da seção atual do site. Em seguida, use as Guias de navegação .
  4. Use quando a estrutura do site é particionada em seções que podem ser divididas em mais subsecções e assim por diante.Use quando o usuário é mais provável ter desembarcado na página de uma fonte externa (outro site deep link para a página da web em questão). Por exemplo, a partir de um blog ou um motor de busca.Não use no nível mais alto da hierarquia (geralmente a página de boas-vindas) Não use sozinho como principal navegação do site.
  5. Use quando o usuário precisa navegar por uma série de imagens de forma seqüencial. Use para impor uma sensação de início e fim. Uso quando o usuário gostaria de tanta tela real estate possível reservado para exibir imagens em alta resolução. Não use quando o objetivo é dar ao usuário uma visão geral rápida de várias imagens ao mesmo tempo
  6. Use para exibir conteúdo composto por diferentes elementos Use para mostrar elementos cujo tamanho ou ações suportadas variam - como fotos com legendas de comprimento variável. Use quando exibir conteúdo que ... Como uma coleção, consiste em vários tipos de dados (imagens, filmes, texto) Não requer comparação direta Suporta conteúdo de comprimento altamente variável (legendas, comentários) Contém conteúdo interativo
  7. Use para manter os usuários atualizados com suas atividades de contatos Use quando você quiser solicitar que seus usuários respondam às ações de outros usuários Use quando você deseja expor e promover a funcionalidade do seu sistema, orientando as pessoas pelas ações dos outros. Não use quando seu sistema não tem atividade de usuário como um de seus elementos-chave.
  8. Use quando há espaço visual limitado eo conteúdo precisa ser separado em seçõesUse quando você precisar manter a atenção do usuário contornando a atualização da página.Use quando o conteúdo de cada guia tiver uma estrutura semelhante Use quando você precisar mostrar qual guia está sendo exibida no momento Não use quando o conteúdo dentro de cada painel funcionaria tão bem em sua própria página separada.
  9. Use para atacar uma estrutura hierárquica de um site. Use quando existem páginas específicas ou funções que são mais freqüentemente usadas do que outras partes do site. Use a caixa de atalho para mostrar essas escolhas, a fim de encurtar o caminho para os usuários. Use quando você quer atalhos para páginas que estão possivelmente em níveis hierárquicos diferentes da página. Também pode ser usado como navegação quando curto no espaço, embora não seja aconselhável.
  10. Use para ajudar com questões de ambigüidade, quando um item pode ser inserido de várias maneiras Use quando o tipo de informação inserida pode ser facilmente combinado com uma informação específica no sistema. Não use se você deseja fornecer ao usuário uma visão geral de todas as opções disponíveis.
  11. Use para ajudar com questões de ambigüidade, quando um item pode ser inserido de várias maneiras Use quando o tipo de informação inserida pode ser facilmente combinado com uma informação específica no sistema. Não use se você deseja fornecer ao usuário uma visão geral de todas as opções disponíveis.