projeto de ihc

29
1 Projeto de IHC Projeto de IHC INF1403 INF1403 – Introdução a IHC Introdução a IHC © Profa. Luciana Salgado © Profa. Luciana Salgado INF1403 INF1403 – Introdução Introdução a IHC a IHC

Upload: vuanh

Post on 07-Jan-2017

230 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Projeto de IHC

1

Projeto de IHCProjeto de IHC

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

INF1403 INF1403 –– IntroduçãoIntrodução a IHCa IHC

Page 2: Projeto de IHC

2

Design de IHCDesign de IHC

•• O que é O que é designdesign de IHC?de IHC?–– Também chamado de ‘Também chamado de ‘projetoprojeto’ de IHC.’ de IHC.

–– DESIGNDESIGN•• Concepção (intelectual) da experiência do usuárioConcepção (intelectual) da experiência do usuário Quem vem

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

•• Concepção (intelectual) da experiência do usuárioConcepção (intelectual) da experiência do usuário•• Concretização desta concepção em uma representação que será Concretização desta concepção em uma representação que será

implementadaimplementada

–– DE IHCDE IHC•• Estamos falando da EXPERIÊNCIA DO USUÁRIO Estamos falando da EXPERIÊNCIA DO USUÁRIO

(design de interação)(design de interação)–– Isto TEM A VER COM o projeto do software,Isto TEM A VER COM o projeto do software,–– Mas NÃO É SINÔNIMO DE projeto de softwareMas NÃO É SINÔNIMO DE projeto de software

Quem vem primeiro?

Projeto de Sw ou Projeto de

IHC?

Melhor virem juntos,

integrados.

Page 3: Projeto de IHC

3

Atividades Básicas do Design de InteraçãoAtividades Básicas do Design de Interação

1.1. Identificar necessidades e estabelecer requisitosIdentificar necessidades e estabelecer requisitosNecessidades dos Usuários,Necessidades dos Usuários, Requisitos de IHC!Requisitos de IHC!

2.2. Desenvolver Desenvolver designsdesigns alternativosalternativosExplorar Explorar múltiplos aspectos e cenáriosmúltiplos aspectos e cenários de interação!de interação!

3.3. Construir versões Construir versões interativas interativas dos dos designsdesigns

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

3.3. Construir versões Construir versões interativas interativas dos dos designsdesignsVersões com representação concretaVersões com representação concreta..

4.4. Avaliar as alternativasAvaliar as alternativasUsar/Adaptar métodos e técnicas conhecidosUsar/Adaptar métodos e técnicas conhecidos

�� Decidir pela(s) melhor(es) alternativa(s)Decidir pela(s) melhor(es) alternativa(s)

Page 4: Projeto de IHC

4

CaracterísticasCaracterísticas--chave do processo de chave do processo de designdesign de IHCde IHC

1.1. Manter sempre o foco no usuárioManter sempre o foco no usuário

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

2.2. Estabelecer objetivos específicos com relação à experiência que Estabelecer objetivos específicos com relação à experiência que

se espera que o usuário tenhase espera que o usuário tenha

3.3. Iterar o processoIterar o processo

Page 5: Projeto de IHC

5

UsuáriosUsuários

QuemQuem sãosão osos usuáriosusuários??

1.1. ObviamenteObviamente, , quemquem usausa o o sistemasistema..2.2. MasMas tambémtambém, , quemquem tem tem relaçãorelação diretadireta com com quemquem usausa

((porpor exemploexemplo: : superioressuperiores ouou subordinadossubordinados, , clientesclientes, etc.), etc.)

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

UsuáriosUsuários primáriosprimários, , secundáriossecundários e e terciáriosterciários:: (Eason, 1987)(Eason, 1987)porpor queque pensarpensar nelesneles??–– UsuáriosUsuários primáriosprimários ((freqüentesfreqüentes).).–– UsuáriosUsuários secundáriossecundários ((ocasionaisocasionais ouou queque têmtêm intermediáriosintermediários))–– UsuáriosUsuários terciáriosterciários ((afetadosafetados pelapela introduçãointrodução do do sistemasistema ouou osos

decisoresdecisores queque determinamdeterminam a a suasua introduçãointrodução))

“Stakeholders“Stakeholders” ” sãosão todostodos osos queque têmtêm algumaalguma participaçãoparticipação ouou interesseinteresseno no usouso do do sistemasistema..PerguntaPergunta:: QuemQuem sãosão osos stakeholdersstakeholders dada urnaurna eletrônicaeletrônicabrasileirabrasileira??

Page 6: Projeto de IHC

6

Usuários (Cont.)Usuários (Cont.)

•• QuaisQuais as as suassuas ““necessidadesnecessidades”?”?–– O O design design de IHC de IHC devedeve contemplarcontemplar as “as “necessidadesnecessidades” dos ” dos usuáriosusuários (i.e. (i.e.

respostaresposta parapara a a perguntapergunta: “Do : “Do queque [[vocêvocê] ] precisaprecisa?”, ?”, respondidarespondida pelopeloprópriopróprio e/e/ouou porpor pessoaspessoas envolvidasenvolvidas no no atendimentoatendimento destasdestasnecessidadesnecessidades..

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

necessidadesnecessidades..•• DêDê um (um (ouou maismais) ) exemploexemplo(s) de (s) de situaçãosituação emem queque um um terceiroterceiro tem “tem “melhormelhor” ”

respostaresposta do do queque “o “o própriopróprio” ” parapara a a perguntapergunta: “Do : “Do queque [[vocêvocê] ] precisaprecisa?”.?”.

–– O O designdesign de IHC de IHC devedeve contemplarcontemplar tambémtambém as “as “oportunidadesoportunidades” ” queque ososusuáriosusuários poderiampoderiam passarpassar a a terter (e as novas (e as novas necessidadesnecessidades daídaí advindasadvindas) ) pelapela introduçãointrodução de de tecnologiatecnologia nova.nova.

•• DêDê um (um (ouou maismais) ) exemploexemplo(s) (s) destadesta situaçãosituação..

Page 7: Projeto de IHC

7

DesignsDesigns alternativosalternativos

•• Como criar?Como criar?–– Examinar problemas similares e suas respectivas soluçõesExaminar problemas similares e suas respectivas soluções

•• Adaptar soluções correntesAdaptar soluções correntes•• Construir uma (ou mais) solução(soluções) nova(s)Construir uma (ou mais) solução(soluções) nova(s)

–– Não havendo precedentes tecnológicos similaresNão havendo precedentes tecnológicos similares

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

–– Não havendo precedentes tecnológicos similaresNão havendo precedentes tecnológicos similares•• Inventar uma solução e explorar alternativas para elaInventar uma solução e explorar alternativas para ela

Page 8: Projeto de IHC

8

DesignsDesigns alternativos (Cont.)alternativos (Cont.)

•• Como escolher a melhor alternativa?Como escolher a melhor alternativa?

AVALIANDO!AVALIANDO!

•• Quando avaliar?Quando avaliar?

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

•• Quando avaliar?Quando avaliar?–– Depende do ciclo de vida do design e do desenvolvimento do Depende do ciclo de vida do design e do desenvolvimento do

sistema.sistema.

•• Diferentes ciclos a escolher:Diferentes ciclos a escolher:–– O caso SIMPLESO caso SIMPLES–– O modelo CASCATAO modelo CASCATA–– O ciclo ESPIRALO ciclo ESPIRAL–– O modelo ESTRELAO modelo ESTRELA–– ENGENHARIA DE USABILIDADEENGENHARIA DE USABILIDADE

Page 9: Projeto de IHC

9

Modelo de ciclo de vida Modelo de ciclo de vida simplessimples para para designdesign de IHCde IHC

Identificar necessidades/ estabelecer requisitos

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

AvaliarAvaliar(Re)Design(Re)Design

Construirversõesinterativas

Produto final

Page 10: Projeto de IHC

10

O modelo ESTRELA (Hartson & Hix)O modelo ESTRELA (Hartson & Hix)

Análise de funções

e tarefasImplementação

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Avaliação

Design conceitual

e formal

Especificaçãode RequisitosPrototipação

Page 11: Projeto de IHC

11

Explorando o Explorando o designdesign da Urna Eletrônica da Urna Eletrônica BrasileiraBrasileira

QuestõesQuestões

1.1. Quem são os usuários?Quem são os usuários?

2.2. Necessidades?Necessidades?

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

3.3. O que é votar?O que é votar?

4.4. Como podemos votar?Como podemos votar?

FACETA A EXPLORAR: VOTO BRANCO X VOTO NULOFACETA A EXPLORAR: VOTO BRANCO X VOTO NULO

Page 12: Projeto de IHC

12

Explorando o Explorando o designdesign da Urna Eletrônica da Urna Eletrônica BrasileiraBrasileira

AvaliaçãoAvaliação

Objetivo: encontrar uma alternativa Objetivo: encontrar uma alternativa de de designdesign para a interface do voto para a interface do voto “nulo” na Urna Eletrônica “nulo” na Urna Eletrônica Brasileira.Brasileira.

1.1. Identifique as necessidades de Identifique as necessidades de

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

1.1. Identifique as necessidades de Identifique as necessidades de um eleitor com o seguinte perfil:um eleitor com o seguinte perfil:•• consegue ler/entender “palavras” consegue ler/entender “palavras”

ou “frases curtas” escritasou “frases curtas” escritas•• tem “alguma” familiaridade com tem “alguma” familiaridade com

caixas eletrônicos ou quiosques caixas eletrônicos ou quiosques usados para serviços da usados para serviços da Previdência SocialPrevidência Social

2.2. Elabore um Elabore um designdesign alternativo alternativo para o eleitor votar “nulo”para o eleitor votar “nulo”

3.3. Represente seu Represente seu designdesign

4.4. Indique as possibilidades de sua Indique as possibilidades de sua representação ser avaliada pelos representação ser avaliada pelos métodos de avaliação que você métodos de avaliação que você aprendeu.aprendeu.

Page 13: Projeto de IHC

13

Votação na urna eletrônica e na cédula impressaVotação na urna eletrônica e na cédula impressa

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Page 14: Projeto de IHC

14

O caso do voto O caso do voto involuntariamenteinvoluntariamente nulonulo

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Page 15: Projeto de IHC

15

O caso do voto O caso do voto involuntariamenteinvoluntariamente nulonulo

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Page 16: Projeto de IHC

16

O caso do voto O caso do voto involuntariamenteinvoluntariamente nulonulo

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Page 17: Projeto de IHC

17

E o do voto E o do voto voluntariamentevoluntariamente nulonulo

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Page 18: Projeto de IHC

18

Tecnologia eTecnologia emanifestaçãomanifestaçãopolíticapolítica

Uma constatação Uma constatação

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Uma constatação Uma constatação da cultura políticada cultura políticado Brasildo Brasil

Page 19: Projeto de IHC

19

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Movimento político Movimento político significativo nas eleições significativo nas eleições presidenciais de 2006presidenciais de 2006

Page 20: Projeto de IHC

20

Controvérsias Controvérsias importantesimportantes

Extratos daExtratos dacoluna decoluna deJ. M. Vigliar,J. M. Vigliar,doutor emdoutor emDireito ProcessualDireito ProcessualCivil pela USP eCivil pela USP e

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Direito ProcessualDireito ProcessualCivil pela USP eCivil pela USP eColunista daColunista da“Última Instância”“Última Instância”(Revista Jurídica)(Revista Jurídica)

http://ultimainstancia.uol.com.br/imprime_noticia.php?idNoticia=31022http://ultimainstancia.uol.com.br/imprime_noticia.php?idNoticia=31022

Page 21: Projeto de IHC

21

A interface da urna pode influenciar os destinos A interface da urna pode influenciar os destinos políticos do Brasil?políticos do Brasil?

alternativas dedesign de interface

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Branco CorrigeConfirma CorrigeBrancoConfirma

Confirma Corrige

Branco ou Nulo

Confirma Corrige

NenhumQualquer um

Confirma Corrige

Não quero votar (em nenhum)

alternativas dedesign de interface

expressandointenções de voto pela interfaceda urna

Page 22: Projeto de IHC

22

O modelo CASCATAO modelo CASCATA

1.1. Análise de requisitos,Análise de requisitos,2.2. Design, Design, 3.3. Codificação,Codificação,

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

4.4. Teste e Teste e 5.5. ManutençãoManutenção

CaminhamentoCaminhamentoestruturado entre as fasesestruturado entre as fases

Page 23: Projeto de IHC

23

A ENGENHARIA DE USABILIDADE (Nielsen)A ENGENHARIA DE USABILIDADE (Nielsen)

FasesFases dada EngenhariaEngenharia de de UsabilidadeUsabilidade1.1. ExaminarExaminar o o contextocontexto maismais

amploamplo2.2. ConhecerConhecer o o usuáriosusuários3.3. RealizarRealizar análiseanálise competitivacompetitiva

FonteFonte: : http://ieeexplore.ieee.org/iel1/2/3459/00121503.pdf?tp=&arnumber=121503&isnumber=3459http://ieeexplore.ieee.org/iel1/2/3459/00121503.pdf?tp=&arnumber=121503&isnumber=3459

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

3.3. RealizarRealizar análiseanálise competitivacompetitiva4.4. Definição das metas de Definição das metas de

usabilidade.usabilidade.5.5. Design Design participativoparticipativo6.6. CoordenarCoordenar a a integraçãointegração de de

todostodos osos aspectosaspectos dadainterface e design.interface e design.

7.7. AnáliseAnálise HeurísticaHeurística8.8. PrototipaçãoPrototipação9.9. Testes empíricosTestes empíricos10.10. IteraçãoIteração (redesign)(redesign)11.11.AvaliaçãoAvaliação emem campocampo

Page 24: Projeto de IHC

ProjetoProjeto de de CursoCurso

EnvolveráEnvolverá avaliaçãoavaliação, (re) design e , (re) design e prototipaçãoprototipação de de sistemasistema interativointerativoparapara a Web.a Web.O O projetoprojeto seráserá feitofeito emem gruposgrupos de 3 de 3 ouou 4 4 alunosalunos..CadaCada grupogrupo poderápoderá escolherescolher o o tipotipo de de sistemasistema queque maismais lhelhe interessarinteressar..

24

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

ValeráValerá 3 3 pontospontos do G2 (do G2 (ProvaProva 2 2 valerávalerá 7 7 ouou 8 8 pontospontos))

SeráSerá feitofeito emem etapasetapas, , cadacada etapaetapa valendovalendo parte dos parte dos pontospontos; ; atrasosatrasos ouou faltasfaltas implicarãoimplicarão emem perdaperda de nota de nota daqueladaquela parte do parte do trabalhotrabalho..

Page 25: Projeto de IHC

IdeiaIdeia GeralGeral do do ProjetoProjeto de de CursoCurso

O O projetoprojeto de de cursocurso seráserá sobresobre a a experiênciaexperiência de de usuáriosusuários com com sistemassistemasdada Web com Web com focofoco nasnas diferençasdiferenças culturaisculturais entre entre osos usuáriosusuários. Os . Os gruposgrupospoderãopoderão escolherescolher o o sistemasistema de de seuseu maiormaior interesseinteresse..1.1.ObjetivoObjetivo do do TrabalhoTrabalho: :

–– AVALIARAVALIAR umauma porçãoporção selecionadaselecionada do do sistemasistema e e REPROJETARREPROJETAR a a

25

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

–– AVALIARAVALIAR umauma porçãoporção selecionadaselecionada do do sistemasistema e e REPROJETARREPROJETAR a a interface e interface e interaçãointeração a a fimfim de de melhorarmelhorar a a experiênciaexperiência do do usuáriousuário

2.2.AtividadesAtividades EnvolvidasEnvolvidas::–– AplicarAplicar métodosmétodos e e técnicastécnicas de de avaliaçãoavaliação aprendidosaprendidos nana disciplinadisciplina–– ProporPropor um novo um novo projetoprojeto parcialparcial de interface e de interface e interaçãointeração parapara

melhorarmelhorar a a experiênciaexperiência do do usuáriousuário e e fazerfazer o o seuseu sketching sketching dadapropostaproposta

–– ElaborarElaborar um um protótipoprotótipo do do projetoprojeto

Page 26: Projeto de IHC

26

Passo ZEROPasso ZERO

• Escolher o grupo de trabalho

• Qual “website” vou escolher?

• Quais perfis diferenciados de

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

• Quais perfis diferenciados de usuários usam a aplicação?

Page 27: Projeto de IHC

27

Análise da Situação visada pelo DesignAnálise da Situação visada pelo Design

• Passo 1: – Quem são as pessoas afetadas?– O que desejam ou precisam fazer?– Como? Por quê? Onde? Quando?

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

– Quem mais está envolvido (tem a ver) com a situação e por quê?

Page 28: Projeto de IHC

28

Para a Para a próximapróxima aula (aula (nãonão vale vale pontoponto))

1. Definição dos Grupos de Trabalho2. Definição do website.3. Levantamento Informal de questões interessantes a explorar no

trabalho (será discutido em sala)

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Page 29: Projeto de IHC

29

Referência BibliográficaReferência Bibliográfica

•• CapítuloCapítulo 44

BARBOSA, S.D.J.; SILVA, B.S. Interação Humano-Computador. Editora Campus-Elsevier, 2010.

INF1403 INF1403 –– Introdução a IHCIntrodução a IHC© Profa. Luciana Salgado© Profa. Luciana Salgado

Editora Campus-Elsevier, 2010.