SlideShare une entreprise Scribd logo
1  sur  13
Télécharger pour lire hors ligne
The Elements of
User Experience
        Sérgio Fontes,
             designer
User Experience: o que é?
    produtos e serviços bem projetados são

“   resultados de uma compreensão das
    necessidades de quem irá usá-lo.”

    portanto, UX se dá na confluência entre
    design, tecnologia e negócios.
                                               The Elements
    quanto design, UX é uma metodologia        of UX,
                                               Sérgio Fontes
    que insere o usuário e suas necessidades
    como requisitos básicos de um projeto.
UX na Web: o que engloba?
planejamento estratégico,
desenvolvimento de software,
design gráfico,
       de interação,
       de interface
arquitetura da informação,
produção de conteúdo.          The Elements
                               of UX,
                               Sérgio Fontes
Vantagens competitivas
Má experiência de uso: usuário sente-se
incapaz, frustrado e perde o interesse.

Boa experiência de uso: satisfação,
lealdade e elevada taxa de conversão.

                                          The Elements
                                          of UX,
                                          Sérgio Fontes
UX como metodologia
Jesse James Garrett, fundador da Adaptive
Path, definiu os elementos do UX na Web
como etapas de uma metodologia.

neste processo, as necessidades do
usuário são avaliadas e levadas em conta.
                                            The Elements
multidisciplinar em todas as etapas.        of UX,
                                            Sérgio Fontes



elementos: estratégia, escopo, estrutura,
esqueleto e superfície.
Elementos: atribuições




                                                   The Elements
                                                   of UX,
                                                   Sérgio Fontes




                         fonte: Garrett, jjg.net
Elementos: atribuições




                                                   The Elements
                                                   of UX,
                                                   Sérgio Fontes




                         fonte: Garrett, jjg.net
Elementos: estratégia
entende-se a quê e para quem o site se
destina: site objectives & user needs.

caso se destine a grupos distintos,
estabelece-se critérios que os identifique.

levantamento de dados a respeito do          The Elements
usuário: personas e scenarios.               of UX,
                                             Sérgio Fontes
Elementos: escopo
functional specifications: descrição
detalhada das funcionalidades do
produto.

content requeriments: descrição dos
diversos elementos que requeiram
conteúdo.                             The Elements
                                      of UX,
                                      Sérgio Fontes
Elementos: estrutura
interaction design: define-se como o
sistema se comportará às ações do
usuário.

information architecture: organização do
conteúdo em grupos lógicos e coerentes.
                                           The Elements
                                           of UX,
                                           Sérgio Fontes
Elementos: esqueleto
information design: comunicação
eficiente das informações mostradas ao
usuário.

interface design: organização dos
elementos de interface que permita ao
usuário interagir com as funcionalidades   The Elements
do sistema.                                of UX,
                                           Sérgio Fontes



navigation design: elementos que
permitam a navegação pela arquitetura.
Elementos: superfície
destina-se ao design gráfico do projeto,
tendo a estética aliada ao conteúdo e
funcionalidade.

elementos gráficos; alternativas
coerentes; protótipos detalhados; testes
e feedbacks.                               The Elements
                                           of UX,
                                           Sérgio Fontes
Saiba mais
The Elements of User Experience: user-
centered design for the web.
                      Garrett, Jesse James

jjg.net

uxmyths.com                                  The Elements
                                             of UX,
                                             Sérgio Fontes
uxbooth.com

uxquotes.com

Contenu connexe

Similaire à The elements of User Experience

Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Mourylise Heymer
 
Manuela Quaresma | UX Design(er): mercado e formação
Manuela Quaresma | UX Design(er): mercado e formaçãoManuela Quaresma | UX Design(er): mercado e formação
Manuela Quaresma | UX Design(er): mercado e formaçãoUXPA-Rio
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeDra. Camila Hamdan
 
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
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de InterfacesAna Migowski
 
Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação  Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação CogIgnition
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AIklaibert
 
Arquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de DesignArquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de DesignMauro Pinheiro
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02igoroliveiracosta
 
On UX and UX carrer - Intel Software Day 2013 - portuguese
On UX and UX carrer - Intel Software Day 2013 - portugueseOn UX and UX carrer - Intel Software Day 2013 - portuguese
On UX and UX carrer - Intel Software Day 2013 - portugueseAna Luísa Ponsirenas
 
User experience
User experienceUser experience
User experiencecarleine
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuárioVictor Rubens
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosawudrs
 
Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!Priscilla Albuquerque
 
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...Design Archiv UP
 

Similaire à The elements of User Experience (20)

Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
Manuela Quaresma | UX Design(er): mercado e formação
Manuela Quaresma | UX Design(er): mercado e formaçãoManuela Quaresma | UX Design(er): mercado e formação
Manuela Quaresma | UX Design(er): mercado e formação
 
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de UsabilidadeErgonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
Ergonomia e Usabilidade AULA 2: Conceitos, Engenharia de Usabilidade
 
User experience
User experienceUser experience
User experience
 
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
 
User eXperience
User eXperienceUser eXperience
User eXperience
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação  Intregrando os projetos de TI com Arquitetura de Informação
Intregrando os projetos de TI com Arquitetura de Informação
 
Palestra UX e AI
Palestra UX e AIPalestra UX e AI
Palestra UX e AI
 
Arquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de DesignArquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de Design
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
 
On UX and UX carrer - Intel Software Day 2013 - portuguese
On UX and UX carrer - Intel Software Day 2013 - portugueseOn UX and UX carrer - Intel Software Day 2013 - portuguese
On UX and UX carrer - Intel Software Day 2013 - portuguese
 
User experience
User experienceUser experience
User experience
 
Experiência do usuário
Experiência do usuárioExperiência do usuário
Experiência do usuário
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Apresentação tarefa 2 ihm
Apresentação tarefa 2 ihmApresentação tarefa 2 ihm
Apresentação tarefa 2 ihm
 
Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!Por que você vai se apaixonar por design e UX?!
Por que você vai se apaixonar por design e UX?!
 
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
MOTION​ ​GRAPHICS​ ​E​ ​MICROINTERAÇÕES: Contribuições para experiência do us...
 
Jai apostila
Jai apostilaJai apostila
Jai apostila
 

Plus de Frevo on Rails

Ruby e o Mundo Mágico dos Unicórnios
Ruby e o Mundo Mágico dos UnicórniosRuby e o Mundo Mágico dos Unicórnios
Ruby e o Mundo Mágico dos UnicórniosFrevo on Rails
 
As aventuras psicodélicas de Guilherme no mundo open source
As aventuras psicodélicas de Guilherme no mundo open sourceAs aventuras psicodélicas de Guilherme no mundo open source
As aventuras psicodélicas de Guilherme no mundo open sourceFrevo on Rails
 
Introducao a Ruby on Rails
Introducao a Ruby on RailsIntroducao a Ruby on Rails
Introducao a Ruby on RailsFrevo on Rails
 
Apresentacao institucional Frevo on Rails
Apresentacao institucional Frevo on RailsApresentacao institucional Frevo on Rails
Apresentacao institucional Frevo on RailsFrevo on Rails
 
Programação GUI com jRuby
Programação GUI com jRubyProgramação GUI com jRuby
Programação GUI com jRubyFrevo on Rails
 
WebApps minimalistas com Sinatra
WebApps minimalistas com SinatraWebApps minimalistas com Sinatra
WebApps minimalistas com SinatraFrevo on Rails
 
Crash Course Ruby & Rails
Crash Course Ruby & RailsCrash Course Ruby & Rails
Crash Course Ruby & RailsFrevo on Rails
 
jcheck: validações client-side sem dores
jcheck: validações client-side sem doresjcheck: validações client-side sem dores
jcheck: validações client-side sem doresFrevo on Rails
 
Ruby (nem tão) Básico
Ruby (nem tão) BásicoRuby (nem tão) Básico
Ruby (nem tão) BásicoFrevo on Rails
 
Resolvendo problemas de dependências com o Bundler
Resolvendo problemas de dependências com o BundlerResolvendo problemas de dependências com o Bundler
Resolvendo problemas de dependências com o BundlerFrevo on Rails
 
O que vem por aí com Rails 3
O que vem por aí com Rails 3O que vem por aí com Rails 3
O que vem por aí com Rails 3Frevo on Rails
 

Plus de Frevo on Rails (16)

Ruby e o Mundo Mágico dos Unicórnios
Ruby e o Mundo Mágico dos UnicórniosRuby e o Mundo Mágico dos Unicórnios
Ruby e o Mundo Mágico dos Unicórnios
 
As aventuras psicodélicas de Guilherme no mundo open source
As aventuras psicodélicas de Guilherme no mundo open sourceAs aventuras psicodélicas de Guilherme no mundo open source
As aventuras psicodélicas de Guilherme no mundo open source
 
Introducao a Ruby on Rails
Introducao a Ruby on RailsIntroducao a Ruby on Rails
Introducao a Ruby on Rails
 
Event machine
Event machineEvent machine
Event machine
 
Apresentacao institucional Frevo on Rails
Apresentacao institucional Frevo on RailsApresentacao institucional Frevo on Rails
Apresentacao institucional Frevo on Rails
 
Programação GUI com jRuby
Programação GUI com jRubyProgramação GUI com jRuby
Programação GUI com jRuby
 
awesome_nested_fields
awesome_nested_fieldsawesome_nested_fields
awesome_nested_fields
 
WebApps minimalistas com Sinatra
WebApps minimalistas com SinatraWebApps minimalistas com Sinatra
WebApps minimalistas com Sinatra
 
Crash Course Ruby & Rails
Crash Course Ruby & RailsCrash Course Ruby & Rails
Crash Course Ruby & Rails
 
jcheck: validações client-side sem dores
jcheck: validações client-side sem doresjcheck: validações client-side sem dores
jcheck: validações client-side sem dores
 
Ruby (nem tão) Básico
Ruby (nem tão) BásicoRuby (nem tão) Básico
Ruby (nem tão) Básico
 
Perfil da Comunidade
Perfil da ComunidadePerfil da Comunidade
Perfil da Comunidade
 
Resolvendo problemas de dependências com o Bundler
Resolvendo problemas de dependências com o BundlerResolvendo problemas de dependências com o Bundler
Resolvendo problemas de dependências com o Bundler
 
O que vem por aí com Rails 3
O que vem por aí com Rails 3O que vem por aí com Rails 3
O que vem por aí com Rails 3
 
Introdução a Ruby
Introdução a RubyIntrodução a Ruby
Introdução a Ruby
 
Regras do Coding Dojo
Regras do Coding DojoRegras do Coding Dojo
Regras do Coding Dojo
 

The elements of User Experience

  • 1. The Elements of User Experience Sérgio Fontes, designer
  • 2. User Experience: o que é? produtos e serviços bem projetados são “ resultados de uma compreensão das necessidades de quem irá usá-lo.” portanto, UX se dá na confluência entre design, tecnologia e negócios. The Elements quanto design, UX é uma metodologia of UX, Sérgio Fontes que insere o usuário e suas necessidades como requisitos básicos de um projeto.
  • 3. UX na Web: o que engloba? planejamento estratégico, desenvolvimento de software, design gráfico, de interação, de interface arquitetura da informação, produção de conteúdo. The Elements of UX, Sérgio Fontes
  • 4. Vantagens competitivas Má experiência de uso: usuário sente-se incapaz, frustrado e perde o interesse. Boa experiência de uso: satisfação, lealdade e elevada taxa de conversão. The Elements of UX, Sérgio Fontes
  • 5. UX como metodologia Jesse James Garrett, fundador da Adaptive Path, definiu os elementos do UX na Web como etapas de uma metodologia. neste processo, as necessidades do usuário são avaliadas e levadas em conta. The Elements multidisciplinar em todas as etapas. of UX, Sérgio Fontes elementos: estratégia, escopo, estrutura, esqueleto e superfície.
  • 6. Elementos: atribuições The Elements of UX, Sérgio Fontes fonte: Garrett, jjg.net
  • 7. Elementos: atribuições The Elements of UX, Sérgio Fontes fonte: Garrett, jjg.net
  • 8. Elementos: estratégia entende-se a quê e para quem o site se destina: site objectives & user needs. caso se destine a grupos distintos, estabelece-se critérios que os identifique. levantamento de dados a respeito do The Elements usuário: personas e scenarios. of UX, Sérgio Fontes
  • 9. Elementos: escopo functional specifications: descrição detalhada das funcionalidades do produto. content requeriments: descrição dos diversos elementos que requeiram conteúdo. The Elements of UX, Sérgio Fontes
  • 10. Elementos: estrutura interaction design: define-se como o sistema se comportará às ações do usuário. information architecture: organização do conteúdo em grupos lógicos e coerentes. The Elements of UX, Sérgio Fontes
  • 11. Elementos: esqueleto information design: comunicação eficiente das informações mostradas ao usuário. interface design: organização dos elementos de interface que permita ao usuário interagir com as funcionalidades The Elements do sistema. of UX, Sérgio Fontes navigation design: elementos que permitam a navegação pela arquitetura.
  • 12. Elementos: superfície destina-se ao design gráfico do projeto, tendo a estética aliada ao conteúdo e funcionalidade. elementos gráficos; alternativas coerentes; protótipos detalhados; testes e feedbacks. The Elements of UX, Sérgio Fontes
  • 13. Saiba mais The Elements of User Experience: user- centered design for the web. Garrett, Jesse James jjg.net uxmyths.com The Elements of UX, Sérgio Fontes uxbooth.com uxquotes.com