O que é Design de Interação?


         lipedal@gmail.com   Felipe Estêvão Dal Molin
amariliadeabreu@gmail.com    Marília Nascimento de Abreu
                             Acadêmicos do curso de Desenho Industrial - Programação Visual
                             Projeto de Interfaces Multimídia
                             Professor Marcos Brod Jr.
O que é Design de Interação?



                PREECE, Jennifer et al.
                Design de interação:
Além da interação homem-computador.
         Porto Alegre : Bookman, 2005.
O que é Design de Interação?


                               “Design de produtos interativos que fornecem suporte às
                               atividades cotidianas das pessoas, seja no lar ou no trabalho.”




                                                                                             3/43
O que é Design de Interação?


                               Winograd (1997) descreve o design de interação como
                               “o projeto de espaços para a comunicação e interação humana”.




                                                                                         4/43
O que é Design de Interação?


                               Para Gitta Salomon: “o design de interação é o design de
                               produtos que se revelam com o tempo.”




                                                                                          5/43
O que é Design de Interação?



                               Objetivo do Design de Interação:
                               trazer a usabilidade para dentro
                               do processo de Design.




                                                                  6/43
Sobre a Usabilidade
Sobre a Usabilidade


                      Produtos interativos e cazes, agradáveis ao usuário, de fácil
                      utilização, fáceis de aprender.

                      Ter o usuário em mente.

                      Considerar onde e por quem o produto será utilizado.

                      Atividade que estão realizando ao utilizar o produto.

                      Considerar no que as pessoas são boas ou não.



                                                                                      8/43
Sobre a Usabilidade


                      Considerar o que pode auxiliar as pessoas na sua atual maneira
                      de fazer as coisas.

                      Pensar no que pode proporcionar experiências de qualidade
                      ao usuário.

                      Ouvir o que as pessoas querem e envolvê-las no design.

                      Utilizar técnicas baseadas no usuário, “testadas e aprovadas”
                      durante o processo de design.



                                                                                      9/43
Uma breve história
Uma breve história


                     No princípio os engenheiros projetavam sistemas de hardware
                     para eles próprios.




                     Fim dos anos 70 e início dos anos 80, monitores de estações
                     de trabalho pessoais.




                                                                                   11/43
Uma breve história


                     Nos anos 80 surgiram novas tecnologias de computação.




                     Educação e treinamento.




                                                                             12/43
Uma breve história


                     Anos 90 nova onda de desenvolvimento tecnológico.




                     Nos anos 2000, capacidades emergentes de hardware, software
                     e eletrônica – middleware.




                                                                             13/43
A equipe
multidisciplinar
A equipe
             multidisciplinar


                                Psicólogos                Designers industriais

Animadores                      Sociólogos                Especialistas em treinamento

Fotógrafos                      Designers grá cos         Antropólogos

Especialistas de cinema         Artistas                  Dramaturgos

Designers de produto            Engenheiros de software   Pro ssionais de mídia

Psicólogos do desenvolvimento Cientistas da computação    Especialistas em educação

                                                                                      15/43
A equipe
multidisciplinar

                   Vantagens: maior número de idéias, novos métodos e designs
                   mais criativos e originais.

                   Desvantagens: custo, comunicação, diferenças de pensamento,
                   linguagem e percepção do mundo.




                                                                           16/43
O processo de Design
de Interação
O processo de Design
        de Interação

  Atividades básicas Identi car necessidades e estabelecer requisitos;

                       Desenvolver designs alternativos que preencham
                       esses requisitos;

                       Construir versões interativas dos designs, de maneira que
                       possam ser comunicados e analisados;

                       Avaliar o que está sendo construído durante o processo.




                                                                                   18/43
O processo de Design
        de Interação

Características-chave Os usuários devem estar envolvidos no desenvolvimento
                       do projeto;

                       A usabilidade especí ca e as metas decorrentes da experiência
                       do usuário devem ser identi cadas, claramente documentadas
                       e acordadas no início do projeto;

                       A iteração em todas as quatro atividades é inevitável.




                                                                                 19/43
O mundo dos negócios
O mundo dos negócios


                       Grande negócio.

                       Deve-se dizer que seu produto é e caz e fácil de utilizar.

                       Presença ou a ausência de um bom design de interação
                       = sucesso ou não da companhia.

                       Crescente demanda por design de interação.

                       Empresas de consultoria, como IDEO (http://www.ideo.com/)
                       e Swim Studio (http://www.swimstudio.com/)


                                                                                    21/43
As metas do Design
de Interação
As metas do Design
       de Interação

Metas de usabilidade E cácia

                      E ciência

                      Segurança

                      Utilidade

                      Aprendibilidade

                      Capacidade de memorização


                                                  23/43
As metas do Design
        de Interação

Metas de usabilidade E cácia – O sistema é bom em fazer o que se espera dele?

                       Exemplos: site de vendas em que não se compra,
                       telefone que é ruim para chamadas.




                                                                                24/43
As metas do Design
        de Interação

Metas de usabilidade E ciência – O sistema facilita a produtividade na realização
                       das tarefas?
                       Exemplos: 1-Click Order da Amazon,
                       busca no Google Chrome.




                                                                                    25/43
As metas do Design
        de Interação

Metas de usabilidade Segurança – O sistema previne o usuário de cometer erros?
                       Ele fornece formas de recuperação, caso erros sejam cometidos?
                       Exemplos: “você deseja mesmo sair?”,
                       opção de desfazer do GMail.




                                                                                 26/43
As metas do Design
        de Interação

Metas de usabilidade Utilidade – O sistema proporciona as funcionalidades
                       adequadas aos seus usuários?
                       Exemplos: calculadora do Windows, Wolfram Alpha.




                                                                            27/43
As metas do Design
        de Interação

Metas de usabilidade Aprendibilidade – É fácil aprender a usar as funções básicas do
                       sistema? Há a possibilidade de, querendo o usuário, passar para
                       funções avançadas?
                       Exemplos: atalhos do sistema, Dwarf Fortress.




                                                                                  28/43
As metas do Design
        de Interação

Metas de usabilidade Capacidade de memorização – O sistema facilita que o usuário
                       lembre de como usá-lo?
                       Exemplos: reconhecimento vs lembrança,
                       linha de comando vs ícones.




                                                                              30/43
31/43
As metas do Design
       de Interação

Metas na experiência Satisfatório    Esteticamente apreciável
          do usuário
                      Agradável      Incentivador de criatividade

                      Divertido      Compensador

                      Interessante   Emocionalmente adequado

                      Útil

                      Motivador


                                                                32/43
Princípios de
Usabilidade e Design
Princípios de
Usabilidade e Design

  Princípios comuns Visibilidade
           de design
                        Feedback

                        Restrições

                        Mapeamento

                        Consistência

                        A ordance


                                       34/43
Princípios de
Usabilidade e Design

  Princípios comuns Visibilidade – As funções importantes devem estar visíveis,
           de design ao alcance do usuário.
                        Exemplos: operações básicas em um carro,
                        Microsoft Word 2007




                                                                                  35/43
Princípios de
Usabilidade e Design

  Princípios comuns Feedback – Para cada ação do usuário, deve haver uma resposta
           de design de forma a con rmá-la.
                        Exemplos: telefone, controlador de volume, haptics.




                                                                              36/43
Princípios de
Usabilidade e Design

  Princípios comuns Restrições (física, lógica e cultural) – Restringir as opções do
           de design usuário de acordo com o contexto reduz a possibilidade de erro.
                        Exemplo: sombreamento dos menus.




                                                                                37/43
Princípios de
Usabilidade e Design

  Princípios comuns Mapeamento – Deve haver uma relação lógica entre a
           de design disposição dos controles, e seus efeitos no sistema.
                        Exemplos: controle remoto de DVD, WASD em jogos.




                                                                            38/43
Princípios de
Usabilidade e Design

  Princípios comuns Consistência – O sistema deve seguir padrões, e usar elementos
           de design semelhantes para tarefas semelhantes.
                        Exemplos: convenções de interface,
                        disposição dos menus em processadores de texto.




                                                                              39/43
Princípios de
Usabilidade e Design

  Princípios comuns A ordance – Os elementos da interface devem ser desenhados
           de design de forma a deixar claro como interagir com eles.
                        Exemplos: scroll do mouse, ícones no Photoshop...
                        e o efeito 3D nos botões?




                                                                            40/43
Princípios de
Usabilidade e Design

       10 heurísticas 1. Visibilidade do status do sistema – O sistema mantém os
      de usabilidade usuários informados sobre o que está acontecendo.
          de Nielsen 2. Compatibilidade com o mundo real –A linguagem utilizada
                        na relação entre usuário e sistema deve ser a do usuário.
                        3. Controle do usuário e liberdade – O usuário deve poder sair
                        de onde está, ou voltar para onde deseja, com facilidade.
                        4. Consistência e padrões – Não utilize palavras diferentes se
                        você quer dizer a mesma coisa.
                        5. O sistema ajuda os usuários a reconhecer, diagnosticar e
                        recuperar-se de erros – A linguagem nestes casos deve ser
                        simples e o sistema deve orientar o usuário a resolver o erro.


                                                                                   41/43
Princípios de
Usabilidade e Design

       10 heurísticas 6. Prevenção de erros – Prevenir os erros é ainda melhor
      de usabilidade do que orientar o usuário corretamente quando eles surgirem.
          de Nielsen 7. Reconhecimento em vez de memorização – Reconhecer
                        elementos é mais fácil do que memorizar comandos.
                        8. Flexibilidade e e ciência de uso – O uso da interface é feito
                        em camadas, permitindo que se possa aprofundar.
                        9. Estética e design minimalista – Evita o uso de informações
                        irrelevantes (alta relação sinal/ruído).
                        10. Ajuda e documentação – Caso se faça necessária, a ajuda
                        existe e é clara.



                                                                                     42/43
Obrigado!
Felipe Estêvão Dal Molin
Marília Nascimento de Abreu

Princípios de Design de Interação

  • 1.
    O que éDesign de Interação? lipedal@gmail.com Felipe Estêvão Dal Molin amariliadeabreu@gmail.com Marília Nascimento de Abreu Acadêmicos do curso de Desenho Industrial - Programação Visual Projeto de Interfaces Multimídia Professor Marcos Brod Jr.
  • 2.
    O que éDesign de Interação? PREECE, Jennifer et al. Design de interação: Além da interação homem-computador. Porto Alegre : Bookman, 2005.
  • 3.
    O que éDesign de Interação? “Design de produtos interativos que fornecem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho.” 3/43
  • 4.
    O que éDesign de Interação? Winograd (1997) descreve o design de interação como “o projeto de espaços para a comunicação e interação humana”. 4/43
  • 5.
    O que éDesign de Interação? Para Gitta Salomon: “o design de interação é o design de produtos que se revelam com o tempo.” 5/43
  • 6.
    O que éDesign de Interação? Objetivo do Design de Interação: trazer a usabilidade para dentro do processo de Design. 6/43
  • 7.
  • 8.
    Sobre a Usabilidade Produtos interativos e cazes, agradáveis ao usuário, de fácil utilização, fáceis de aprender. Ter o usuário em mente. Considerar onde e por quem o produto será utilizado. Atividade que estão realizando ao utilizar o produto. Considerar no que as pessoas são boas ou não. 8/43
  • 9.
    Sobre a Usabilidade Considerar o que pode auxiliar as pessoas na sua atual maneira de fazer as coisas. Pensar no que pode proporcionar experiências de qualidade ao usuário. Ouvir o que as pessoas querem e envolvê-las no design. Utilizar técnicas baseadas no usuário, “testadas e aprovadas” durante o processo de design. 9/43
  • 10.
  • 11.
    Uma breve história No princípio os engenheiros projetavam sistemas de hardware para eles próprios. Fim dos anos 70 e início dos anos 80, monitores de estações de trabalho pessoais. 11/43
  • 12.
    Uma breve história Nos anos 80 surgiram novas tecnologias de computação. Educação e treinamento. 12/43
  • 13.
    Uma breve história Anos 90 nova onda de desenvolvimento tecnológico. Nos anos 2000, capacidades emergentes de hardware, software e eletrônica – middleware. 13/43
  • 14.
  • 15.
    A equipe multidisciplinar Psicólogos Designers industriais Animadores Sociólogos Especialistas em treinamento Fotógrafos Designers grá cos Antropólogos Especialistas de cinema Artistas Dramaturgos Designers de produto Engenheiros de software Pro ssionais de mídia Psicólogos do desenvolvimento Cientistas da computação Especialistas em educação 15/43
  • 16.
    A equipe multidisciplinar Vantagens: maior número de idéias, novos métodos e designs mais criativos e originais. Desvantagens: custo, comunicação, diferenças de pensamento, linguagem e percepção do mundo. 16/43
  • 17.
    O processo deDesign de Interação
  • 18.
    O processo deDesign de Interação Atividades básicas Identi car necessidades e estabelecer requisitos; Desenvolver designs alternativos que preencham esses requisitos; Construir versões interativas dos designs, de maneira que possam ser comunicados e analisados; Avaliar o que está sendo construído durante o processo. 18/43
  • 19.
    O processo deDesign de Interação Características-chave Os usuários devem estar envolvidos no desenvolvimento do projeto; A usabilidade especí ca e as metas decorrentes da experiência do usuário devem ser identi cadas, claramente documentadas e acordadas no início do projeto; A iteração em todas as quatro atividades é inevitável. 19/43
  • 20.
    O mundo dosnegócios
  • 21.
    O mundo dosnegócios Grande negócio. Deve-se dizer que seu produto é e caz e fácil de utilizar. Presença ou a ausência de um bom design de interação = sucesso ou não da companhia. Crescente demanda por design de interação. Empresas de consultoria, como IDEO (http://www.ideo.com/) e Swim Studio (http://www.swimstudio.com/) 21/43
  • 22.
    As metas doDesign de Interação
  • 23.
    As metas doDesign de Interação Metas de usabilidade E cácia E ciência Segurança Utilidade Aprendibilidade Capacidade de memorização 23/43
  • 24.
    As metas doDesign de Interação Metas de usabilidade E cácia – O sistema é bom em fazer o que se espera dele? Exemplos: site de vendas em que não se compra, telefone que é ruim para chamadas. 24/43
  • 25.
    As metas doDesign de Interação Metas de usabilidade E ciência – O sistema facilita a produtividade na realização das tarefas? Exemplos: 1-Click Order da Amazon, busca no Google Chrome. 25/43
  • 26.
    As metas doDesign de Interação Metas de usabilidade Segurança – O sistema previne o usuário de cometer erros? Ele fornece formas de recuperação, caso erros sejam cometidos? Exemplos: “você deseja mesmo sair?”, opção de desfazer do GMail. 26/43
  • 27.
    As metas doDesign de Interação Metas de usabilidade Utilidade – O sistema proporciona as funcionalidades adequadas aos seus usuários? Exemplos: calculadora do Windows, Wolfram Alpha. 27/43
  • 28.
    As metas doDesign de Interação Metas de usabilidade Aprendibilidade – É fácil aprender a usar as funções básicas do sistema? Há a possibilidade de, querendo o usuário, passar para funções avançadas? Exemplos: atalhos do sistema, Dwarf Fortress. 28/43
  • 30.
    As metas doDesign de Interação Metas de usabilidade Capacidade de memorização – O sistema facilita que o usuário lembre de como usá-lo? Exemplos: reconhecimento vs lembrança, linha de comando vs ícones. 30/43
  • 31.
  • 32.
    As metas doDesign de Interação Metas na experiência Satisfatório Esteticamente apreciável do usuário Agradável Incentivador de criatividade Divertido Compensador Interessante Emocionalmente adequado Útil Motivador 32/43
  • 33.
  • 34.
    Princípios de Usabilidade eDesign Princípios comuns Visibilidade de design Feedback Restrições Mapeamento Consistência A ordance 34/43
  • 35.
    Princípios de Usabilidade eDesign Princípios comuns Visibilidade – As funções importantes devem estar visíveis, de design ao alcance do usuário. Exemplos: operações básicas em um carro, Microsoft Word 2007 35/43
  • 36.
    Princípios de Usabilidade eDesign Princípios comuns Feedback – Para cada ação do usuário, deve haver uma resposta de design de forma a con rmá-la. Exemplos: telefone, controlador de volume, haptics. 36/43
  • 37.
    Princípios de Usabilidade eDesign Princípios comuns Restrições (física, lógica e cultural) – Restringir as opções do de design usuário de acordo com o contexto reduz a possibilidade de erro. Exemplo: sombreamento dos menus. 37/43
  • 38.
    Princípios de Usabilidade eDesign Princípios comuns Mapeamento – Deve haver uma relação lógica entre a de design disposição dos controles, e seus efeitos no sistema. Exemplos: controle remoto de DVD, WASD em jogos. 38/43
  • 39.
    Princípios de Usabilidade eDesign Princípios comuns Consistência – O sistema deve seguir padrões, e usar elementos de design semelhantes para tarefas semelhantes. Exemplos: convenções de interface, disposição dos menus em processadores de texto. 39/43
  • 40.
    Princípios de Usabilidade eDesign Princípios comuns A ordance – Os elementos da interface devem ser desenhados de design de forma a deixar claro como interagir com eles. Exemplos: scroll do mouse, ícones no Photoshop... e o efeito 3D nos botões? 40/43
  • 41.
    Princípios de Usabilidade eDesign 10 heurísticas 1. Visibilidade do status do sistema – O sistema mantém os de usabilidade usuários informados sobre o que está acontecendo. de Nielsen 2. Compatibilidade com o mundo real –A linguagem utilizada na relação entre usuário e sistema deve ser a do usuário. 3. Controle do usuário e liberdade – O usuário deve poder sair de onde está, ou voltar para onde deseja, com facilidade. 4. Consistência e padrões – Não utilize palavras diferentes se você quer dizer a mesma coisa. 5. O sistema ajuda os usuários a reconhecer, diagnosticar e recuperar-se de erros – A linguagem nestes casos deve ser simples e o sistema deve orientar o usuário a resolver o erro. 41/43
  • 42.
    Princípios de Usabilidade eDesign 10 heurísticas 6. Prevenção de erros – Prevenir os erros é ainda melhor de usabilidade do que orientar o usuário corretamente quando eles surgirem. de Nielsen 7. Reconhecimento em vez de memorização – Reconhecer elementos é mais fácil do que memorizar comandos. 8. Flexibilidade e e ciência de uso – O uso da interface é feito em camadas, permitindo que se possa aprofundar. 9. Estética e design minimalista – Evita o uso de informações irrelevantes (alta relação sinal/ruído). 10. Ajuda e documentação – Caso se faça necessária, a ajuda existe e é clara. 42/43
  • 43.
    Obrigado! Felipe Estêvão DalMolin Marília Nascimento de Abreu