apostila-ux-usabilidade-mobile-web.pdf - Caelum

EstaapostiladaCaelumvisaensinardeumamaneiraelegante,mostrandoapenasoqueénecessárioequandoénecessário,nomomentocerto,poupandoo leitordeassuntosquenãocostumamserde seuinteresseemdeterminadasfasesdoaprendizado.

ACaelumesperaquevocêaproveiteessematerial.Todososcomentários,críticasesugestõesserãomuitobem-vindos.

EssaapostilaéconstantementeatualizadaedisponibilizadanositedaCaelum.Sempreconsulteositeparanovasversõese,aoinvésdeanexaroPDFparaenviaraumamigo,indiqueositeparaqueelepossasemprebaixarasúltimasversões.Vocêpodeconferirocódigodeversãodaapostilalogono naldoíndice.

Baixesempreaversãomaisnovaem:www.caelum.com.br/apostilas

Esse material é parte integrante do treinamento UX e Usabilidade aplicados em Mobile e Web edistribuído gratuitamente exclusivamente pelo site da Caelum. Todos os direitos são reservados àCaelum. A distribuição, cópia, revenda e utilização para ministrar treinamentos são absolutamentevedadas.Parausocomercialdestematerial,porfavor,consulteaCaelumpreviamente.

SOBREESTAAPOSTILA

1

9

14

25

35

Sumário

1ExperiênciadoUsuário1.1OqueéExperiênciadoUsuário? 1

1.2ISO9241-210 2

1.3AEvoluçãodaExperiênciadoUsuário 2

1.4Parasabermais:OCasoClearRX 3

1.5ElementosdaExperiênciadoUsuário 5

1.6PlanosdaExperiênciadoUsuário 5

2DesigndeInteração2.1QuatroAbordagensparaDesigndeInteração 11

2.2DesignCentradonoUsuário 12

3TimeeProjeto3.1Gamestorming-Montartimeheterogêneo 14

3.2Kanban 16

3.3OsKanbansdeUX 17

3.4Gamestorming-Definirprojetomobile 19

3.5Otriângulodeouro 20

3.6Gamestorming-TriângulodeOuro 22

3.7Gamestorming-360˚View 23

4Pesquisa4.1OndeBuscarInformações? 26

4.2MétodosePropósitos 27

4.3Entrevistas 28

4.4CardSorting 29

4.5Recrutamento 32

4.6DestilandoaPesquisa 33

4.7Gamestorming-Entrevista,tirandodúvidascomousuário 33

5Personas

SumárioCaelum

56

72

5.1DesignCentradonoUsuário 35

5.2Oquepersonasnãorepresentam 36

5.3Benefícios 36

5.4Impedimentos 37

5.5Aimportânciadosobjetivos 38

5.6CriandoPersonas 39

5.7NúmerodePersonas 39

5.8Personasadhoc 39

5.9Personasimples 39

5.10Proto-persona 40

5.11Gamestorming-Criandoproto-personas 43

5.12OssetepassosparacriarPersonas 43

5.13Secundária 48

5.14Mapadeempatia 50

5.15Templatesdepersona 51

5.16Discussão:Asnarrativassãorealmentenecessárias? 54

5.17Gamestorming-CriandoPersonanodiaadia 54

6Modelandoeidentificandorequisitos6.1ModeloMental 57

6.2Cenários 58

6.3Gamestorming-Criandocenário 60

6.4AnálisedeTarefas 60

6.5FluxodeTarefas 61

6.6SintetizandoosRequisitosdeDesign 62

6.7Userstories 63

6.8Escrevendoboashistórias 64

6.9Gamestorming-Criandohistóriascomfoconousuário 64

6.10Equilíbrioentreclienteeusuário 65

6.11Gamestorming-UXCanvas 67

6.12Features 67

6.13Gamestorming-Brainstormdefeaturescomobjetivos 68

6.14Priorizandofeatures 69

6.15Gamestorming-Priorizandofeaturescomfoconousuário 70

7DosRequisitosaoDesign7.1EstruturaGeral 72

7.2RefinandooDesign 75

7.38steps 77

CaelumSumário

79

125

141

152

7.4Gamestorming-criandorabiscoframeewireframeemtime 77

8PadrõesePrincípiosdoDesigndeInteração8.1AsdezheurísticasdeNielsen 79

8.2Outrosprincípiosparaimplementarinterfaceseficazes 87

8.3PadrõesdeDesigndeInteração 89

8.4PadrõesdeInteraçãoComportamentais 91

8.5Gamestorming-ColocandoempráticaosheurísticasdeNielsen 121

8.6Protótipos 121

8.7Gamestorming-Prototipagemempapel 123

9Usabilidadeemdispositivosmóveis9.1LeideFitts 125

9.2LeideHick 127

9.3ThumbZones 128

9.4EnriquecendoseuprodutocomMicrointeractions 130

9.5Tipografia 134

9.6Gamestorming-Criando8Stepscomfoconausabilidade 140

10DesignVisual10.1OprincípioC.R.A.P 141

10.2EspecificaçãodoDesign 146

10.3TeoriadasCores 149

10.4FacilitandoessaescolhacomoAdobeColor 149

11Apêndice-TestesdeUsabilidade11.1Oqueémedido? 152

11.2Envolvidos 153

11.3Preparaçãoprévia 154

11.4Gamestorming-Testedeusabilidade 159

Versão:24.8.15

SumárioCaelum

CAPÍTULO1

"Quandonadaacontece,háummilagrequenãoestamosvendo."--JoãoGuimarãesRosa

ExperiênciadoUsuário(UX,deUserExperience)éumtemabastantesubjetivo.Édifícildemaneiraobjetivaediretadizercomodesenharumaexperiênciadousuário,masépossívelaprendermoscomodesenhar umproduto, serviçoou ambiente queproporcioneuma experiência satisfatória para alguémqueos use, identificando todosos aspectos da interaçãodousuário comesseproduto (ou serviçoouambiente).

EXPERIÊNCIADOUSUÁRIOComoumapessoasesenteaousarumproduto.Oumaisformalmente,deacordo com a definição dada pela ISO 9241-210, são as respostas e percepções de uma pessoaresultantesdousodeumproduto,sistemaouserviço.

Como disciplina, é uma palavra guarda-chuva que tem relação com os princípios de DesignCentradonoUsuário (UCD),Designde Interação (IxD) eUsabilidade, todosvistos ao longodoscapítulos.Émultidisciplinar,incorporandoaspectosdapsicologia,antropologia,ciênciadacomputação,designgráfico,designindustrialeciênciacognitiva.

ApesardaExperiênciadoUsuárioestarpresentetantoemprodutosfísicoscomovirtuais,serviçosouambientes,seráabordadoumtipoespecíficodeproduto:asaplicaçõesweb.

EXPERIÊNCIADOUSUÁRIO

1.1OQUEÉEXPERIÊNCIADOUSUÁRIO?

1EXPERIÊNCIADOUSUÁRIO 1

AAluraoferececentenasdecursosonlineemsuaplataformaexclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design&UX,Infra,Business,entreoutras,comumplanoquedáacessoatodososcursos.Ex-estudantedaCaelumtem10%dedescontonestelink!

ConheçaoscursosonlineAlura.

Em2011,foicriadaaISO9241-210.Asérie9241abordaergonomiaeainteraçãohomem-máquinaeanovaparte210odesigncentradoempessoasemsistemasinterativos,quedefineaexperiênciadousuáriocomoas respostasepercepçõesdeumapessoa resultantesdousodeumproduto, sistemaouserviço.

Elapossuiseisprincípioschaves:

1. Oprojetoébaseadonoentendimentoexplícitodeusuários,tarefaseambientes.2. Osusuáriosestãoenvolvidosemtodoprojetoedesenvolvimento.3. Oprojetoéconduzidoerefinadoporavaliaçõescentradasnousuário.4. Oprocessoéiterativo.5. Oprojetoabordatodaaexperiênciadousuário.6. Aequipededesignincluicompetênciasmultidisciplinareseperspectivas.

Otermo"ExperiênciadoUsuário"foicunhadopelaprimeiravezporDonNormanemmeadosde1990.SegundoopróprioNormancomentouemumaentrevista:

"Euinventeiotermoporqueachavaqueinterfacedousuárioeusabilidadeerammuitorestritos,euqueriacobrirtodososaspectosdaexperiênciadeumapessoacomosistema,incluindodesignindustrial,gráficos,ainterface,ainteraçãofísicaeomanual.Desdeentãootermotemseespalhadoamplamente..."

Masmesmo antes de serem batizados, os conceitos da Experiência do Usuário já vinham sendousadosatravésdotempo.

JáconheceoscursosonlineAlura?

1.2ISO9241-210

1.3AEVOLUÇÃODAEXPERIÊNCIADOUSUÁRIO

2 1.2ISO9241-210

https://www.alura.com.br/promocao/caelum/?utm_source=apostilas-abertas&utm_medium=apostila&utm_campaign=caelum-site

Figura1.1:Evoluçãodaexeperiênciadousuário

Usodocomputadorparafacilitaroperaçõesderotina.

Facilidadeeeficiêncianouso.

AnálisedeaspectosdeUX(visitantes,funildevendas,comportamentodousuário)paraaumentaralucratividade.

DesigndaExperiênciadoUsuárioinfluenciandoaestratégiadonegócio.

ClearRXéumsistemadeembalagemparaquemusamedicamentoscomreceita,quetornamaisfácilaspessoassaberemcomotomarseusremédios.EleéumexemplodecomoUXpodeinfluenciar todaumaestratégiadenegócio.

AmotivaçãoquelevouaestudantededesignDeborahAdlerafazeressesistemacomosuatesedemestradofoisuaavótertomadooremédiodeseuavôporengano.

Utilidade

Usabilidade

Rentabilidade

Estrategibilidade

1.4PARASABERMAIS:OCASOCLEARRX

1.4PARASABERMAIS:OCASOCLEARRX 3

Figura1.2:ClearRX

Suascaracterísticas:

contémaprescriçãoeposologianofrascoparaquenãohajaenganos;onomedomedicamentoestáescritonãosónafacelateralcomonotopo;naoutradasfacesháimportantesinformaçõespessoaiserelativasaomedicamento;temfacesplanasparaqueainformaçãosejalidacommaisfacilidade;se,mesmoassim,aindafordifícilperceberoqueestáescrito,ofrascovemcomum"cartão-lupa"paralerotexto;existemanéisdediferentescoresparaque,nocasodeexistirmaisqueumfrascoemcasa,sepossadiferenciarquefrascopertenceaquem;ofrascoparalíquidosestáadaptadoàentradadeseringasoraisparaumamediçãomaisfácil.

Depoisdeconcluirsuatese,DeborahlevouaidéiaaTargetejuntoscriaramumsistemacompleto.Vejamaisemhttp://www.adaptivepath.com/ideas/essays/archives/000812.php

4 1.4PARASABERMAIS:OCASOCLEARRX

http://www.adaptivepath.com/ideas/essays/archives/000812.php

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelum oferece o cursodata presencial nas cidades de São Paulo, Rio deJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

Oprocessodedesigndeexperiênciadousuárioprocuragarantirquenenhumaspectodeexperiênciadousuáriocomoprodutoaconteçasemasuaintençãoconsciente,explícita.

Umamaneira de atacar esta complexidade é quebrar o trabalho de elaboração da experiência dousuárioemelementosqueacompõem,facilitandooentendimentodatarefacomoumtodo.

Aexperiênciadousuárioacabasendoresultadodeumconjuntodedecisõestomadasnacriaçãodeumproduto,sistemaouserviço:comovaiseaparecer,comovaisecomportar,oquepodeserfeito,eporaívai.Dividiressasdecisõesemcamadasajudaacompreendercomoessasdecisõessãofeitas.

JesseJamesGarret,emseulivroElementsofUserExperiencepropõecincoplanosquefacilitamacompreensão das decisões feitas em cada um deles. Cada decisão de um plano superior depende doinferior. Esses planos são: estratégico, escopo, estrutura, esqueleto e superfície. O primeiro maisabstratoatéchegaraoúltimo,maisconcreto.

Oproblemaaindaeraodenomenclatura,porquepartedacomunidadeemExperiênciadoUsuáriotratava os problemas como deDesign deAplicação com soluções tradicionais (transação, segurança,escalabilidade, etc). A outra parte via a web como meio de distribuição e captura de informação,aplicandosoluçõesdomeiodepublicações,mídiaeciênciadainformação(marqueteiros).

Para resolver essa dualidade Garret dividiu cada plano em dois contextos: a web como

VocêpodetambémfazerocursodatadessaapostilanaCaelum

1.5ELEMENTOSDAEXPERIÊNCIADOUSUÁRIO

1.6PLANOSDAEXPERIÊNCIADOUSUÁRIO

Problemadecomunicação

Solução:doiscontextos

1.5ELEMENTOSDAEXPERIÊNCIADOUSUÁRIO 5

https://www.caelum.com.br/curso-ux-usabilidade-mobile-web/?utm_source=apostilas-abertas&utm_medium=apostila&utm_campaign=caelum-site

funcionalidade(interfacedesoftware)eawebcomomeiodeinformação(sistemadehipertexto).Paracadacontexto,umelementosedestaca.

Figura1.3:DiagramadeUX

Essediagramaapresentaoselementosorganizadosemplanos,domaisabstratoaomaisconcreto,enos faz perceber como todas as áreas de uma empresa têm grande responsabilidade no processo dedesenvolvimento da experiência do usuário, já que o que vai ser desenvolvido pelos planos maisconcretosébaseadoeinfluenciadopeloquefoidefinidonosmaisabstratos.

Poressemotivo,algumasempresasquecriaramumtimedeExperiênciadoUsuárioo fizeramdemaneiramultidisciplinar,envolvendodiversostiposdecompetências,indodepsicólogosaengenheirosdesoftwares,passandoporanalistasdeespecificaçãoedesigners.

Vejamoscadaumdosplanosaseguir.

Pergunta:porqueestamosfazendoesteproduto?

A estratégia alinha as necessidades dos usuários com os objetivos do negócio. Necessidade dosusuáriossãoosobjetivosparasuaaplicaçãoquevemdeforadaorganização.

Deve-seentenderoquesuaaudiênciaquerecomoissocasacomoutrosobjetivosdonegócioque

Aresponsabilidadeédetodos

TimedeExperiênciadoUsuáriomultidisciplinar

Estratégia

6 1.6PLANOSDAEXPERIÊNCIADOUSUÁRIO

existem.UmwebsitefalhanãoporquestõestecnológicasoudeexperiênciadoUsuário,maspornãoresponderaduasperguntas:

Oquequeremosdoproduto?Oqueosusuáriosqueremdele?

O segredo aqui é tornar tudo explícito. Para entender o que o usuário deseja, pesquisas sãonecessárias.

Pergunta:oquefaremos?

Marca o início da divisão entre a Web como interface de software e a Web como sistema dehipertexto.Pelocontextodeinterfacesdesoftware,aestratégiadoplanoanteriorétraduzidaemescopoatravésdosrequisitosfuncionais.Pelodesistemadehipertexto,oescopotomaaformaderequisitosdeconteúdo(descriçãodosvárioselementosdeconteúdoqueserãonecessários).

Pergunta:comofuncionalidadesedadosseencaixam?

Definecomoosrequisitosefuncionalidadesdaaplicaçãoseencaixam.OEscopoganhaestrutura,nocontextodeinterfacesdesoftware,atravésdoDesigndeInteração,ondeédefinidocomoosistemasecomportaemrespostaàsaçõesdousuário.Doladodesistemadehipertexto,aestruturaéformadapelaArquiteturadaInformação,queorganizaoselementosdeconteúdo.

Pergunta:comoapresentaroselementosdainterfacenatela?

ÉaformamaisconcretadaEstrutura.Eledefineolugardecadaelementodeinterfaceemumatela,otimizandoadisposiçãodesseselementosparamaximizaraeficiêncianoseuuso.

Nocontextodeinterfacedesoftware,oDesigndeInterfaceorganizaoselementosdainterfaceparapermitirqueousuáriointerajacomasfuncionalidadesdosistema.Defineomundodosbotões,camposeoutroscomponentesdainterface.Eleforneceaosusuáriosahabilidadedefazercoisas.

Nocontextodesistemadehipertexto,oDesigndaNavegaçãodeterminaoconjuntodeelementosdetelaquepermitequeousuáriosemovaatravésdaarquiteturadainformação.

Emambososcontextos,oDesigndeInformaçãoéresponsávelpelaapresentaçãoainformaçãoparaumacomunicaçãoefetiva.

Escopo

Estrutura

Esqueleto

Superfície

1.6PLANOSDAEXPERIÊNCIADOUSUÁRIO 7

Nelavocêvêumasériadepáginasoutelasfeitasdeimagensetextos.ÉoEsqueletojáaplicadoolookandfeeldoprodutofinal.

8 1.6PLANOSDAEXPERIÊNCIADOUSUÁRIO

CAPÍTULO2

"Amaiorpartedaspessoasétãofelizquantoresolveser"--AbrahamLincoln

DesigndeInteraçãoeArquiteturadeInformaçãocompartilhamoplanodeEstruturaedãoênfasenadefinição de padrões e sequências para as opções que serão apresentadas ao usuário. O plano deEstruturaéolimiarnodesenvolvimentodoprodutoentreasquestõesmaisabstratasemaisconcretas.

DesigndeInteraçãosepreocupacomasopçõesnecessáriasparaqueousuário realizeecompletetarefas. Arquitetura da Informação, por sua vez, trata com as opções envolvidas em expor asinformaçõesparaousuário.

DESIGNDEINTERAÇÃODesenvolvimentodefluxosdeaplicaçãoparafacilitarastarefasdousuário,definindocomoesseinteragecomasfuncionalidadesdosistema.

Mas foi recentementequeoDesignde Interação tornou-seumadisciplina isolada.Durantemuitotempo,elaeraconsideradacomopartedoDesigndeInterface.

ODesigndeInterfacedefineomundodosbotões,camposeoutroscomponentesdainterface.Eleforneceaosusuáriosahabilidadedefazercoisas.JáoDesigndeNavegaçãoéumaespecializaçãododesign de interface responsável por apresentar espaços de informação. Ele fornece aos usuários apossibilidade de ir a lugares. E permeando ambos os contextos (interface de software e sistema dehipertexto) temos oDesign de Informação, que é responsável por apresentar a informação para umacomunicaçãoefetiva.Elecomunicaidéiasaosusuários.

TantooDesigndeInterface,deNavegaçãoedeInformaçãojáfazempartedoplanomaisconcreto,oEsqueleto, mas tratam de questões muito interligadas ao Design de Interação ou Arquitetura deInformação.

Emse tratandodecontexto,dificilmenteumaaplicaçãoseráapenasuma interfacede softwareouapenasumsistemadehipertexto,eporissotodosesseselementosdevemserconsideradoscomouma

DESIGNDEINTERAÇÃO

Disciplinacomidentidadeprópria

Holística

2DESIGNDEINTERAÇÃO 9

unidadenodesenvolvimentodeumproduto,nãodevendosertratadosisoladamente.

Figura2.1:ExemplodeHolística

De qualquermaneira, cada uma dessas disciplinas não necessariamente é exercida por um únicopapel. O atual Designer de Interação costuma - e é altamente recomendado - ter as habilidadesnecessárias para fazer o design de interação, de interface, a arquitetura de informação, o design denavegaçãoedeinformação.

Essasmúltiplashabilidades, incluindoatéodesignvisual,éoquediferenciaumbomdesignerdeinteraçãodeumexcelentedesignerdeinteração!

Considerandoisso,podemostercomoentregáveisdeumtrabalhodedesigndeinteração:

AvaliaçãodeusabilidadeFluxosemapasdenavegaçãoCasosdeusoe/oucenáriosPersonasMapasdositeeinventáriodeconteúdoWireframesPrototótipos(debaixaoualtafidelidade,paraprovasdeconceitooutestesdeusabilidade)Especificaçõesescritas(quedescrevemocomportamentooudesign)

Responsabilidades

10 2DESIGNDEINTERAÇÃO

Layoutsvisuais(doresultadofinalesperado)

Nomomento que o designer se depara comumproblemapara solucionar, ele pode se apoiar emquatro abordagens principais para encontrar uma melhor solução. Todas essas abordagens tem seusméritosnacriaçãodeprodutosdesucessoedependedodesignerdecidiraquelaquemelhorfuncionaàsua formade trabalho, ao projeto que está emdesenvolvimento e a cultura de sua empresa.Grandesdesigners são aqueles que podem trabalhar com todas essas abordagens, aplicando a melhor para asituaçãoespecíficaqueestálidando.Emais,conseguiraplicarmúltiplasabordagensdentrodeumúnicoprojeto.

Asquatroabordagenssão:

DesignCentradonoUsuárioDesignCentradoemAtividadesDesigndeSistemasDesigndeGênios

Atabelaabaixoforneceumarápidacomparaçãoentrecadaumadasquatroabordagens:

Figura2.2:TabelaabordagensdeDesign

Uma quinta abordagem, que pode ser considerada como uma derivação do Design centrado no

2.1QUATROABORDAGENSPARADESIGNDEINTERAÇÃO

DesignDirecionadoaObjetivos

2.1QUATROABORDAGENSPARADESIGNDEINTERAÇÃO 11

Usuário, é o Design direcionado a Objetivos, metodologia criada por Alan Cooper para odesenvolvimentodeprodutos.

ODesignCentradonoUsuárionosservirádeguiaapartirdeagora.Vejamosmaisdetalhadamenteestametodologiaaseguir.

PARA SABER MAIS Livro: Designing for Interaction Creating Smart Applications and CleverDevices De Dan Saffer http://www.designingforinteraction.com/ Livro: About Face 3 TheEssentials for Interaction Design De Alan Cooper, Robert Reimann e David Croninhttp://www.cooper.com/about

Editorastradicionaispoucoligamparaebooksenovastecnologias.Nãodominamtecnicamente o assunto para revisar os livros a fundo. Não têm anos deexperiênciaemdidáticascomcursos.ConheçaaCasadoCódigo,umaeditoradiferente,comcuradoriadaCaelumeobsessãoporlivrosdequalidadeapreçosjustos.

CasadoCódigo,ebookcompreçodeebook.

Afilosofiaportrásdodesigncentradonousuárioésimples:osusuáriossabemmelhor.Aspessoasqueutilizarãooprodutoouserviçosabemquaissãosuasnecessidades,objetivos,preferências,ecabeaodesignerencontrartodasessascoisasparaeles.

Este tipo de design destaca-se em afastar o design de suas próprias preferências e focando-o nasnecessidadeseobjetivosdosusuários.

Seuconceitojáexisteháumbomtempocomraízesnodesignindustrial,ergonomiaenacrençadequeosdesignersdeveriamtentarencaixarseusprodutosaspessoasenãoocontrário.

Enquantoosdesignersindustriaislembramdesselegado,engenheirodesoftwareseramcegospara

EditoraCasadoCódigocomlivrosdeumaformadiferente

2.2DESIGNCENTRADONOUSUÁRIO

Contextohistórico

12 2.2DESIGNCENTRADONOUSUÁRIO

http://www.designingforinteraction.com/

http://www.cooper.com/about

https://www.casadocodigo.com.br/?utm_source=apostilas-abertas&utm_medium=apostila&utm_campaign=caelum-site

ele, criando aplicações voltadas para como o computador trabalhava e não como as pessoastrabalhavam.Issoeraempartedevidoàslimitaçõesdasmáquinasnopassado.

Com a melhoria das máquinas por volta de 1980, designers e cientistas trabalhando na área deinteração homem-máquina começaram a questionar a prática de deixar engenheiros elaborarem ainterfaceparacomputadores.Novostiposdeinterfacejáerampossíveiseummovimentodedesigndesoftwarecentradonosusuárioscomeçou.

ObjetivossãorealmenteimportantesnoDCU:odesignerfocanoqueousuárioquerrealizar.Então,o designer determina quais serão as tarefas e osmeios necessários para se atingir esse objetivo,massemprecomaspreferênciasdousuárioemmente.

Objetivossãoimportantes

2.2DESIGNCENTRADONOUSUÁRIO 13

CAPÍTULO3

Uma das melhores definição de time esta no manifesto ágil de software(http://www.manifestoagil.com.br/),umadasprimeiraslinhasdiz:

Indivíduoseinteraçãoentreelesmaisqueprocessoseferramentas

Dentro dos 12 princípios do software ágil (http://agilemanifesto.org/iso/ptbr/principles.html) têmpontosimportantessobretime:

Pessoasdenegócioedesenvolvedoresdevemtrabalhardiariamenteemconjuntoportodooprojeto.

Construaprojetosemtornodeindivíduosmotivados.Dêaelesoambienteeosuportenecessárioeconfienelesparafazerotrabalho.

O método mais eficiente e eficaz de transmitir informações para e entre uma equipe dedesenvolvimentoéatravésdeconversafaceaface.

Simplicidade,aartedemaximizaraquantidadedetrabalhonãorealizado,éessencial.

Asmelhoresarquiteturas,requisitosedesignsemergemdeequipesauto-organizáveis.

Emintervalosregulares,aequiperefletesobrecomosetornarmaiseficazeentãorefinaeajustaseucomportamentodeacordo.

Montartimesheterogêneosparamelhorarasdinâmicasquevamosdesenvolverduranteocurso.

1. Umpapeldepost-itporalunodadinâmica;2. Umacanetaporaluno.

1. Duraçãode15minutos;

TIMEEPROJETO

3.1GAMESTORMING-MONTARTIMEHETEROGÊNEO

Objetivo

Ambiente

Regras

14 3TIMEEPROJETO

http://www.manifestoagil.com.br/

http://www.manifestoagil.com.br/principios.html

2. Mínimode4integrantesportimeemáximode5.

Trintasegundosparacadaalunoescrevernopost-it:

Nome;Profissãoe/ouformação;Maiorlazer.

Exemplodecomodeveficaropost-it:

Figura3.1:Imagemdecomodeveficaropost-it

Osalunoslevantamcomoobjetivodemontarotimedenomínimo4integrantes,conversandoentreeles.



Passoapasso


3.1GAMESTORMING-MONTARTIMEHETEROGÊNEO 15


Sempre associado com o famoso Kanban de colunas (To Do, Doing, Done) que times ágeis dedesenvolvimento de software utilizam pra gerenciar as tarefas que vão executar em um tempopreviamentedeterminado.

Figura3.2:Kanbandecolunas

EsseéumtipodeKanban,masnãoéosignificadodapalavra.

Kanbanéumapalavradeorigemjaponesaquesignifica"cartãovisual"ou"sinalizaçãovisual".Ouseja,Kanbanéqualquerelementodecomunicaçãoquepasseumaoumaisinformaçõesdeformarápidaeobjetiva.Écorretodizerqueplacasdetrânsitosãokanbans.

3.2KANBAN

OquesignificaKanban?

16 3.2KANBAN

"Seo timenãoperguntacomofuncionaoKanbanenãoestáutilizando.PensenoqueerramosejogueoKanbanfora."

AToyotaéaempresaquepopularizouaformacomoaplicamoskanbanemAgileeUX.DentrodaToyota o Kanban é utilizado como Kanban de Produção e Kanban de Movimentação sendo umaferramenta pra aplicar o sistema de produção Just in Time (JIT) sem a necessidade de formulárioslongoseburocráticos.

É um sistema de produção focado em diminuir o desperdício. Só se compra a matéria prima efabrica-seoprodutoapósasuavenda.Tambémconhecidocomoproduçãosobdemanda.

"Se o time pergunta como funciona o Kanban e está utilizando. Acabamos de fazer um bomtrabalho."

OsmétodoságeisajudaramoKanbanasepopularizardentrodeUX.HojetemostimescriandoseupróprioskanbansfocadosemsolucionardúvidasdeUX.

OqueéosistemadeproduçãoJustinTime?

3.3OSKANBANSDEUX

3.3OSKANBANSDEUX 17

Temcomoobjetivocriarartefatoscombasenasinformaçõeslevantadascomstakeholders,usuários,clienteesuaslimitaçõeserecursos.Veremoseleemdetalhesnospróximoscapítulos.

Figura3.4:UXCanvas

"Se o time não perguntou como funciona o kanban e está utilizando de forma diferente do quepensamos.Fizemosumbomtrabalhosemquerer.Sóaceitar."

Apresentado por Nelson Vasconcelos no Design Sprint Methods, esse kanban responde: duasdúvidas de negócios, vendas e marketing; duas dúvidas de design e pesquisa; duas dúvidas detecnologia.Sendoelas:

Quaissãoosobjetivosdenegócios?Oqueélucrativo?

Oqueaspessoasprecisam?Oqueéútileagradável?

UXCanvas

360ºView

Negócios,VendaseMarketing

DesignePesquisa

Tecnologia

18 3.3OSKANBANSDEUX

Oqueépossível?Quefuncionalidadespodemserconstruidasagoraoumaisprafrente?

Figura3.5:360view

"SeotimenãoperguntacomofuncionaoKanbaneestáutilizando.Acabamosdefazerumótimotrabalho."

Cadatimedefiniroseuprojetomobileparadesenvolverduranteocurso.

1. Muitospost-its;2. Umacanetaporaluno;3. Cartolina;4. Canetão;5. Fitacrepe.

1. 05minutosparalevantamentodeproblemas;2. 15minutosparadefinirqualproblemaotimequerresolver;

3.4GAMESTORMING-DEFINIRPROJETOMOBILE

Objetivo

Ambiente

Regras

3.4GAMESTORMING-DEFINIRPROJETOMOBILE 19

3. Cadaintegrantefalapor2minutos;4. Projetotemquesermobile;5. Projetonãopodeserfocadoapenasparaopúblicofemininoouparaopúblicomasculino.

Colar na parede um pedaço de cartolina escritoProblema. Em post-its, cada integrante do timeescreve problemas que gostaria de resolver com um projeto mobile e cola abaixo da cartolina. (05minutos)Obs.Umproblemaporpost-it.

Com todosos integrantesdecada timeemfrenteaparedequeestãoospost-its,paradefinirqualprojetootimevairealizarduranteocurso.

Conheça aCasa do Código, uma nova editora, com autores de destaque nomercado, foco em ebooks (PDF, epub, mobi), preços imbatíveis e assuntosatuais.Coma curadoria daCaelum e excelentes autores, é uma abordagemdiferenteparalivrosdetecnologianoBrasil.

CasadoCódigo,LivrosdeTecnologia.

A inclusãoconscientededesign levouaascensãoda tríademoderna identificadaporLarryKeelycomposta pordesejabilidade,viabilidade ecapacidade tambémchamadade triângulo de ouro. Sealgumpontodatríadeforfracoemumproduto,provavelmenteelefracassarácomotempo.

Passoapasso

Seuslivrosdetecnologiaparecemdoséculopassado?

3.5OTRIÂNGULODEOURO

20 3.5OTRIÂNGULODEOURO


Figura3.6:TriângulodeourodeKeeley

Paracuidardecadaumdessesprocessos,precisamosdetrêscompetências:

Designer:responsávelpeladesejabilidade.Gerentedeproduto:responsávelpelaviabilidade.Desenvolvedor:responsávelpelacapacidade.

Essetrioéconsideradoo"core"paraodesenvolvimentodoprodutoedevemestarbemalinhadosnafasededescobertadoproduto.

Vejamoscadaumdessesprocessos:

OGerentedeProdutotemduasresponsabilidadesprincipais:avaliarasoportunidadesdoprodutoedefinir o produto que será construído.Depois de avaliado e decidido que vale a pena desenvolver oproduto, ele inicia a fase de descobrir exatamente como o produto deve ser (junto com o time coremencionado acima), incluindo as funcionalidades necessárias, a experiência do usuário e os critériosparaolançamento.

Tambémestá em suasmãosdeterminaromodelodenegócioquedeverá ser seguido, interagindocom praticamente todas as outras áreas da empresa para definir questões jurídicas, contábeis,financeiras,demarketing,dedistribuição,etc.

Time"core"paradesenvolvimentodoproduto

Viabilidade-oquesustentaráonegócio?

Desejabilidade-oqueaspessoasprecisam?

3.5OTRIÂNGULODEOURO 21

AquientraaExperiênciadoUsuário.HáváriospapéisemumtimedeUX,masoquetrabalhaemmaiorcolaboraçãocomoGerentedeProdutoéoDesignerdeInteração.Eleéresponsávelporbuscarum profundo entendimento dos usuários, descobrir suas motivações, comportamentos e habilidades;ajudarnadefiniçãodosrequisitose,assim,desenharumainterfacequetorneainteraçãodousuáriocomoprodutoamaissimpleseeficientepossíveleque,alémdisso,atendaaosobjetivosdonegócio.

O Engenheiro ou Desenvolvedor de Software é o responsável por efetivamente construir oproduto.Éimportanteseupapelnafasededescobertadoprodutoparadizeraogerenteeaodesignerdeinteraçãooqueépossívelserfeito,avaliarocustodasdiferentesidéiaspropostaseajudaraidentificarasmelhores soluções. É sua responsabilidade definir a tecnologia e arquiteturamais apropriada paradesenvolverumprodutodequalidade.

Ao iniciar o desenvolvimento de um produto, devemos começar perguntando "O que as pessoasdesejam?". Com essa resposta, se pergunte "Das coisas que as pessoas desejam, o que sustentará onegócio?"e,porúltimo,"Dascoisasqueaspessoasdesejamequesustentaráonegócio,oquepodeserconstruído?".

Indentificarpontospositivosenegativosdoprojetoseparadoem:

Desejabilidade;Viabilidade;Capacidade.

1. Flip-chart;2. Canetão;3. Muitospost-its;4. Umacanetinhaporintegrante.

1. 2minutosparadesenharotriângulodeouro;2. 15minutosparatimedefinirpontospositivosenegativos.

Capacidade-oquepodemosconstruir?

Iniciandoodesenvolvimentodoproduto

3.6GAMESTORMING-TRIÂNGULODEOURO

Objetivo

Ambiente

Regras

22 3.6GAMESTORMING-TRIÂNGULODEOURO

1. Desenhartriângulodeouronacartolina;

2. Escreverpontospositivosenegativosdedesejabilidadeecolocarnotriângulodeouro;

3. Escreverpontospositivosenegativosdeviabilidadeecolocarnotriângulodeouro;

4. Escreverpontospositivosenegativosdecapacidadeecolocarnotriângulodeouro;

5. Verifiqueseépossívelresolverospontosnegativosdequalquer ladodotriângulo(desejabilidade,viabilidade e capacidade). Achando uma solução, anote em um post-it e cole próximo ao pontonegativo.

Identificarpontospositivosenegativosdoprojetoseparadosem:

PM&Marketing,VendaseEstratégiadeProduto;ExperiênciadoUsuário;Engenharia.

1. Cartolina;2. Canetão;3. Muitospost-its;4. Umacanetinhaporintegrante.

1. 2minutosparadesenharotriângulodeouro;2. 15minutosparatimedefinirpontospositivosenegativos.

1. Desenhar360˚Viewnacartolina;

2. EscreverpontospositivosenegativosdePM&Marketing,VendaseEstratégiadeProdutoecolocarno360˚View;

3. EscreverpontospositivosenegativosdeExperiênciadoUsuárioecolocarno360˚View;

Passoapasso

3.7GAMESTORMING-360˚VIEW

Objetivo

Ambiente

Regras

Passoapasso

3.7GAMESTORMING-360˚VIEW 23

4. Escreverpontospositivosenegativosdeengenhariaecolocarnotriângulodeouro;

5. Verifiqueseépossívelresolverospontosnegativosdequalquercírculo(negócio,UXeengenharia).Achandoumasolução,anoteemumpost-itecolepróximoaopontonegativo.

Se você está gostando dessa apostila, certamente vai aproveitar os cursosonlinequelançamosnaplataformaAlura.VocêestudaaqualquermomentocomaqualidadeCaelum.Programação,Mobile,Design,Infra,Front-Ende

Business,entreoutros!Ex-estudantedaCaelumtem10%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Agoraéamelhorhoradeaprenderalgonovo

24 3.7GAMESTORMING-360˚VIEW


CAPÍTULO4

"Ainteligênciaéútilparatudo,masnãoésuficienteparanada"--Henri-FredericAmiel

Uma das etapas do desenvolvimento de um produto, principalmente na fase de descoberta, é aPesquisadeDesign.

Éoatodeinvestigar,atravésdeváriasfontes,opotencialdeumprodutoouserviço,seususuárioseambientesexistentes.

Osmétodosutilizadospodemserquantitativosouqualitativos,exploratóriosouavaliativos,comoousem a participação do usuário, variando de observações e entrevistas contextuais, aplicação dequestionários(onlineoupessoalmente),grupodefocoeetnografiaaleiturasobretemasrelacionadosaodomínio do negócio, análise competitiva, análise heurística, card sorting e testes de usabilidade comprotótiposouprodutosjáexistentes(seuoudosconcorrentes).

Osexploratóriosnormalmentesãousadosnoiníciodeumprojeto,nafasedeconcepçãodoproduto,paraentenderasreaisnecessidadesdousuárioedonegócioeprojetarinterfacesmaisadequadasaoseuuso.

Osavaliativossãousadosparaanalisaraqualidadedainterfaceeinteraçãodeumproduto,podendoserdeprodutosjáexistentesouemdesenvolvimento.

Pesquisas,principalmenteasqualitativas,ajudam-nosaentender:

Comportamentos,atitudeseaptidõesdepotenciaisusuáriosdoproduto;Odomíniodoprodutoqueserádesenvolvido-contextotécnico,denegócioeambientais;Vocabulárioeoutrosaspectosdodomínioemquestão;Comoosprodutosjáexistentessãousados;

PESQUISA

PesquisadeDesign

Métodos

Benefíciosdapesquisa

4PESQUISA 25

Limiteserestrições;Qualoproblemaqueteremosqueresolver.

Se tudo começa do plano mais abstrato, o plano estratégico, algumas perguntas devem serrespondidasnoquedizrespeitoaosobjetivosdositeaasnecessidadesdousuário.

Háváriasfontesparaobtermosinformaçõesnaspesquisas:

Entrevistacomstakeholders,quepodemserosexecutivosdaempresa,pessoasdaáreadenegócios,demarketingedesenvolvedores;Entrevista com especialistas no domínio do produto (SME - Subject Matter Expert) sãonormalmenteúteisemdomíniosmuitocomplexoseespecializados;Entrevistacomclientes.Clientesnemsempreéomesmoqueusuário.Porexemplo,emumprodutodeCRM,ousuáriopodeserosgerentesdecontadeumaempresaenquantooclienteéoDiretorComercialoudeMarketing;Entrevistacomusuários.

Ealémdeentrevistas,háváriosoutrosmétodosqueabordaremosemumpróximotópico.

Muitos dados já são obtidos dessas entrevistas citadas acima e é importante saber quais tipos deinformaçãodeve-seobterdecadaumadelas.

Oqueconseguimosobterdosstakeholders:

Visão preliminar do produto:Cada stakeholder tem sua própria visão do produto, mesmo queapenasligeiramentediferentedosdemais.Nessasentrevistasodesignerdeveentãoalinharessasvisões,inclusivecomasdosusuárioseclientes;Orçamentoecronograma:Oquesairdessetópicopermitirásaberoescopodeesforçododesigneservirácomosubsídioparaqueogerentedecidaoquantoinvestirempesquisadeusuário;Limitações técnicas: Entender claramente o que é viável de fazer dado o orçamento, prazo elimitaçõestécnicas;Objetivos e direcionamentos do negócio: É importante que o designer entenda quais são osobjetivos do negócio, para saber levantar pontos de decisão quando a pesquisa com o usuárioindicarconflitosentreasnecessidadesdonegócioedosusuários;Percepção dos stakeholders sobre o usuário: Os stakeholders que mantém algum tipo derelacionamentocomusuáriostêmsuasprópriaspercepçõessobreeleseessasservemdeinsightsparaaentrevistacomousuário.

Planoestratégico

4.1ONDEBUSCARINFORMAÇÕES?

26 4.1ONDEBUSCARINFORMAÇÕES?

Stakeholders(partes interessadas)sãopessoasquetêmumaparticipaçãonoproduto.Elespodemincluirpessoaldemarketing,pessoaldedesenvolvimentoerepresentantesdeserviçoaocliente.

Oqueconseguimosobterdosclientes:

Seusobjetivosemcompraroproduto;Suasfrustraçõescomassoluçõesatuais;Processodedecisãousadoparacomprarumprodutodotipoquevocêestádesenhando;Regrasparainstalação,manutençãoegerenciamentodoproduto.

Oqueconseguimosobterdosusuários:

Problemasefrustraçõescomasoluçãoatual;Conhecimentodonegócio,oqueelesprecisamsaberpararealizarseutrabalho;Contextogeraldesuasatividadesenãoapenasfocadoaoproduto;Entendimentodastarefasatuais,tantoaquelasqueelesrealizamnasoluçãoatualcomoasqueessasoluçãonãosuporta;Entendimentoclarodeseusobjetivosemotivaçõesparausaroproduto.



Pesquisa não tem como foco um ou outro método. Pesquisas são, sobretudo, questionamentos erespostas.Osmétodossãoapenasosmeiosutilizadosparaobteressasrespostas.Ouseja,nãoexisteum

Stakeholders


4.2MÉTODOSEPROPÓSITOS

4.2MÉTODOSEPROPÓSITOS 27


método que deve sempre ser aplicado. Diferentes métodos têm diferentes propósitos e, em algumassituações,maisdeummétodopodeserusadoemumapesquisadedesign.

Abaixoestãoalgunsmétodosequandoémaisindicadooseuuso:

Figura4.1:Tabelademetodosepropositos

WHENTOUSEWHICHUSEREXPERIENCERESEARCHMETHODS -ArtigodanewsletterArletboxdeJakobNielsenhttp://www.useit.com/alertbox/user-research-methods.html

A entrevista permite onhecer as características de pessoas, suas preferências, opiniões enecessidades,permitindoqueoentrevistadoexprimasuasideiaseforneceumcontexto.Paraquehaja

Parasabermais

4.3ENTREVISTAS

28 4.3ENTREVISTAS

http://www.useit.com/alertbox/user-research-methods.html

rapportentreambos,oentrevistadordeveserempático.

RAPPORTRapportéacapacidadedeentrarnomundodealguém,fazê-losentirquevocêoentendeequevocêstêmumfortelaçoemcomum.Éacapacidadedeirtotalmentedoseumapadomundoparaomapadomundodele.Éaessênciadacomunicaçãobem-sucedida.

A simpatia,pordefinição, é a compreensãodooutrocombaseemnossaexperiência,oquepodelevaraumafalsacompreensão.Porexemplo:ApessoaAsedivorcioueparaelafoiofimdomundo,masparaapessoaBodivórciofoilibertação.

Calcar-se na experiência pessoal para compreender o outro pode levar a um falsa compreensão.Cognitivamente a simpatia é facilmente empreendida pelo cérebro, pois ele só repete um padrão,gastandoassim,menosenergia.Océrebrotemcomopadrãoconservarenergia.

Aempatiajáédiferente:compreendemosooutrotentandonoscolocaremseulugar,olhandocomseusolhos.Cognitivamenteémaisdifícil,masnão impossível.Háumgastoconsideráveldeenergia,além disso, o entrevistador deve estar atento não apenas ao que o entrevistado fala, mas ao seucomportamentoeemoções.

Porfim,naempatia,sósaberemossecompreendemoscorretamenteooutrosetivermosofeedbackdele,sendoassim,verificarconstantementecomooutroseestamosnocaminhocertoéfundamental.

Os designers de interação não são exigidos que façam pesquisas. Muitas vezes eles usam suaintuição, conhecimento e experiência para desenvolver produtos com uma boa experiência para ousuário.

Em projetos menores, mais simples ou com prazos e orçamentos bem limitados, essa é umaabordagembastante adotada. Contudo, para projetos maiores e mais complexos, onde o domínio donegócio,culturaouáreadeatuaçãoédesconhecidapelodesigner,nãofazerpesquisaalgumapodeserumgranderisco.

Designers normalmente trabalham em projetos fora de sua área de atuação (design!) e a únicamaneiradecompreenderocontextoondeoprodutoseráinseridoérealizandopesquisas.

Aspessoasorganizamascoisasdemaneiramuitopessoal,sendoassim,a ideiadoCardSortingé

SimpatiaXEmpatia

DesignerdeInteraçãoVsPesquisas

4.4CARDSORTING

4.4CARDSORTING 29

explorar diversas formas de categorizar itens e determinar aquela que funciona melhor com o seuprojeto.Muitasvezeseleéutilizadoparamelhoraraorganizaçãoatualquenãofunciona.

GeralmenteestatécnicavemresolverproblemasdeArquiteturadeInformaçãonoquedizrespeitoànavegação.Outroempregoévalidarideiasdecomooconteúdodeveserorganizado:éumaferramentaquenosajudaaentenderaspessoasparaquemestamosprojetando.

Figura4.2:Cardsorting

Você solicita às pessoas que classifiquem os cartões em pilhas de acordo com o que há desemelhante e descrevamos grupos os quais fazemparte (Card Sorting aberto).Ou você pode dar àspessoas um conjunto de cartas de conteúdo além de um conjunto de categorias e pedir-lhes paraclassificaroscartõesnascategoriaspré-determinadas(CardSortingfechado).Oresultadoéaplicadoaoprojeto.

Vocêaprendemuitosobrecomoaspessoaspensamsobrecategoriaseconceitos,comodescrevê-los,easinformaçõesquepertenceaumacategoria.Istoéextremamenteútilquandovocêquerorganizarasinformaçõesdeumaformaparaqueoutraspessoaspossamencontrá-las.Inclusive,elepodedemonstrarqueousuáriosequersabeoquedeterminadacategoriasignifica.

Comofunciona

Benefícios

30 4.4CARDSORTING

Osprincipaispassossãoosseguintes:

Decidaoquevocêqueraprender.Selecioneométodo(abertooufechado)EscolhaoconteúdoEscolhaeconvideosparticipantes.InicieocardsortingeregistreosdadosAnaliseosresultados.Apliqueoresultadoemseuprojeto.

Cardsortingajudaotimeaentrarnumconsenso,jáquecadaintegrantepodeserumavisãodiferentedecomoainformaçãodeveserapresentada.

Existemdiversasferramentasnomercadoquepermitemolevantamentode informaçõessobreosusuáriosqueacessaoseuwebsite.Algumasdelas:

CrazyEggGoogleAnalyticsKissMetricsHotjar




EtapasdoCardSorting

Consenso

Ferramentas


4.4CARDSORTING 31


Quandopensamosemrecrutamentoparatestesepesquisas,contratarumaempresaespecializadaésempreocaminhomaisfácilerápido.Infelizmente,normalmentetambéméomaiscaroenemsempreseuprojetotemorçamentodisponívelparaisso.

Sevocêmesmotemquerecrutarpessoasparasuaspesquisasetestes,tenhaemmenteasseguintesdicas:

É muito importante ter claro o perfil de usuário que você quer pesquisar (mesmo quandoterceirizamosorecrutamento,essainformaçãoprecisaserpassadaparaaempresaderecrutamentoparaqueelesconsigamoscandidatoscertos);Clientes-existentesouempotencial-sãosemprecandidatosaparticiparemdepesquisas;Mantenhauma listadepessoas interessadasemparticiparde testesepesquisas.Vocêpode fazerissoconvidandointeressadosatravésdeumquestionárioderecrutamentocolocadonositeoublogdesuaempresa,atravésdeconvitesemferramentasdemídiassóciasoubuscandointeressadosemeventosquesuaempresapromova;Os melhores candidatos a pesquisas são aqueles que têm algum tipo de motivação em fazer apesquisaequetenhaumaboahabilidadedecomunicação;Mesmocomumalistagemdeinteressados,paracadapesquisaexisteumperfildeusuáriodesejado.Antesdeefetivamentefazeroconviteparaparticipardapesquisa,certifique-sedequeaspessoasquevocêestácontatandoseencaixamnesseperfil;Crieumquestionáriocomperguntasquelhepermitamfazeressaclassificação(screening);Essa classificação pode ser feita através de um contato por telefone, e-mail ou até questionárioonline;Sempreentreemcontatocommuitomaiscandidatosqueonúmeroquevocêpretendepesquisar.São vários osmotivos que fazemum candidato,mesmoque interessado na pesquisa, não poderparticipar;E além disso, sempre espere uma grande taxa de não comparecimento, mesmo quando umcandidatoconfirmaapresença;Existeváriosmeiosdeincentivaraparticipação:darumaajudadecusto,pagarestacionamentoouprovidenciar o transporte do participante; fornecer descontos na compra dos produtos de suaempresa(ougratuidadedealgunsmesesparaprodutoscompagamentorecorrente);brindes;deixaroambientedapesquisaagradável,comlanches,refrigerantes,cafés;etc.

Mesmoassim,orecrutamentopodeserumatarefaárdua.Emúltimocaso,useseuscompanheirosdetrabalhoquenãoestejamtãoenvolvidosnoprojeto,amigos,familiares...

4.5RECRUTAMENTO

32 4.5RECRUTAMENTO

RECRUITINGWITHOUTFEAR-HowtoFindFirst-RateParticipantsforDesignStudies

de Will Schroeder, David Brittan e Jared M. Spoolhttp://dev.uie.com/reports/recruiting_without_fear

Depoisderealizarumapesquisa,asinformaçõesedadosobtidos(sejaemnotas,imagens,gravaçõesou simplesmente na cabeça do designer) serão completamente inúteis se não forem estruturados eorganizadosdeumaformaquefaçasentidoepossaserusadonodesenhodaaplicação.Odesignerdevedarumaformaesignificadoaessasinformações.

Asformasparaorganizá-laspodemserinúmerasecadaumtemumaqueparaelemelhorfuncione:pode ser através deplanilhas, tabelas,postits grudados emumquadro branco, etc.E a idéia é juntaressasinformaçõesemgruposquetenhamligaçãoequedêemalgumsignificadoaosdadosobtidos.

Solucionardúvidassobreoprojetocomousuárioparadesenvolverapersonaprimária.

1. FolhasA4derascunho;2. Umafolhaporalunoparapergunta;3. Umafolhaporalunopararesposta;4. Umacanetaporaluno.

1. 25minutospararealizaradinâmica;2. Entrevistadevedurarnomáximo2minutos.

1. Timedefineosobjetivosparaentrevista;

Dicadelivro

4.6DESTILANDOAPESQUISA

4.7 GAMESTORMING - ENTREVISTA, TIRANDO DÚVIDAS COM OUSUÁRIO

Objetivo

Ambiente

Regras

Passoapasso

4.6DESTILANDOAPESQUISA 33

http://dev.uie.com/reports/recruiting_without_fear

2. Timedefinecortesderecrutamento;3. Combasenosobjetivosotimecriaoroteiroparaentrevista;4. Cadaintegranterealizaumaentrevistacomumintegrantedeoutrotime.

Quandoforrealizaraentrevista(passo4)nãopodemosnosesquecerde:

Explicaroprojeto;Terempatiapeloentrevistado(empatiaédiferentedesimpatia);Casooentrevistadonãoentrenocorte,expliqueomotivodofimdaentrevista;Sempreagradeçaoentrevistado.




34 4.7GAMESTORMING-ENTREVISTA,TIRANDODÚVIDASCOMOUSUÁRIO


CAPÍTULO5

"Épocadifícil anossanaqual émaisdifícil sequebrarumpreconceitodoqueumátomo" --AlbertEinstein

Coletar todosos tiposdedadossobre seususuáriospode ser extremamentevalioso,masàsvezesvocê pode perder de vista as pessoas reais por trás de todas as estatísticas. Você pode tornar seususuáriosmaisreais,transformando-osempersonas.

Personassãomodelosdescritivosdeusuárioscriadosdedadosdepesquisasquenosfornecemumaformadeentendercomoosusuáriossecomportam,comoelespensam,oqueelesdesejameporque.

MODELO Modelos são utilizados nas ciências naturais e sociais para representar fenômenoscomplexosatravésdeabstrações.Umexemplodemodeloéodemercadocriadoporeconomistasparapreveroseucomportamento.

Esses modelos não são pessoas reais, mas são baseados em comportamentos e motivações depessoasreais.Personassãoatualizadascomopassardotemposemprequenecessário.

Colocandoumrostoeumnomesobreosdadosdepesquisasdeusuários,apersonapodenosajudaramanter os usuários emmente durante o processo de design, aomesmo tempo em que cria umalinguagemcomumquefaçasentido.EstatécnicapermiteoDesignCentradonoUsuárioesuaforçaestaemtrazeraodesigndiscussões.

Paraqueosesforçosdedesignerstenhamsucesso,eleprecisaassegurarquecadamembrodotimedoprodutoentendapelomenosascaracterísticasfundamentaiseasnecessidadesdeseususuários,oumuitotemposerágastonumaconversaemcírculos.

PERSONAS

5.1DESIGNCENTRADONOUSUÁRIO

5PERSONAS 35



Tambéméimportantedeixarclarooquepersonasnãorepresentam:

Médiaestatística,poisavariaçãoémaisimportantequeamédia;Pessoasreais,poiscadapessoatemsuasparticularidadesenãorepresentariamumgrandenúmerodepessoas-maspersonassãobaseadasemdadosreais;Segmentos de mercado, pois segmento de mercado é um grupo de pessoas que respondem amensagenssimilaresenãoquetemobjetivossimilaresepadrõesdeuso;Jobdescriptionou funções, pois funções sãodefinidaspelas tarefasque aspessoas fazemenãopelosobjetivosecomportamentos.

Personasmedemaeficáciadodesignjáqueopçõesdedesignpodemsertestadascomelas.Elasnãosubstituem testes com usuários reais,mas permitem que iterações de design sejam feitas demaneirarápidaebaratanumquadro-branco.

A persona traz benfícios não só para oDesign,mas também para toda a equipemultidisciplinar.Personas:

Tornam explícita suposições sobre os usuários, criando uma linguagem comum comsignificado

Dados(emgrandepartequalitativos)einformaçõessãoindispensáveis,sendoofundamentodaspersonas.

Permitemquevocêfoqueumconjuntodeusuáriosespecíficos(quenãosãovocê!)ajudando


5.2OQUEPERSONASNÃOREPRESENTAM

5.3BENEFÍCIOS

36 5.2OQUEPERSONASNÃOREPRESENTAM


natomadademelhoresdecisões

Limitandonossasescolhas,personasajudamnatomadadedecisõesdedesign.Criarumprodutoparaumtipodeusuárioterámaissucessodoqueparaumavastaaudiência(Cooper).

Geram empatia para com os usuários, envolvendo sua equipe de uma forma que outrasrepresentaçõesdedadosdousuárionãoconseguem

Personassãoengraçadaseganhamvidaquandoosmembrodaequipeasaceitam.

Diferentedewirefameseprotótipos,personasnãosãoutilizadasnumaparteespecíficadoprocesso,pelocontrário,elasajudamoprocessointeiro.

Hádiversasmaneirasdeconsolidarosachadosdesuapesquisadeusuário,masapenaspersonassãocapazesdeengajarocérebroapensaremtermoshumanos.

ExistemproblemasquepodemimpedirousodePersonas:

Recusaporpartedaequipeenvolvidacomodesenvolvimentodoproduto

Utilizarpersonaspodeserumaalteraçãoradicalnoprocessodedesenvolvimentodeprodutoenaculturadaempresa.

Faltadecredibilidadedapersonaemrelaçãoaosdadosdapesquisa

Apersonadevetercomobasedadosdepesquisae,aindasim,seessesdadosestiveremmuitodesconectados,aequipenãoteráconfiançanela.

Mácomunicaçãodepersonas

Seaequipenãosabeoqueépersona,mesmoqueolíderdoprojetosaiba,seuempregofalhará.Seaequipenãoforlembradaconstantementedapersona,elaseráesquecida.

Aequipenãosabeutilizá-las

5.4IMPEDIMENTOS

5.4IMPEDIMENTOS 37




Todosossereshumanospossuemmotivaçõesqueguiamseuscomportamentos;algunsóbvioseoutrosultis.Éfundamentalqueaspersonascaptemessasmotivaçõesnaformadeobjetivos.

OinsightfundamentaldeCoopereraodequeaspersonastinhamobjetivosecomportamentosquepoderiamseratendidosporprodutosatravésdodesignparaseucomportamento,garantindoassimmaiorprobabilidadedodesignserbemsucedido.

Sepersonasfornecemocontextoparaumconjuntodecomportamentoobservado,osobjetivossãooscondutoresportrásdessescomportamentos.Designerspodemcriarcenárioseentãoperguntar-se:

Estapersonarealizaráestatarefa?Estapersonarealizaráatarefacomofoiplanejada?

A persona sem objetivos pode servir como uma ferramenta de comunicação útil, mas não temutilidadecomoferramentadedesign.

Ainferênciadosobjetivoséumadasetapasdacriaçãodepersonasqueserávistacommaisdetalhesnopróximocapítulo.

OBJETIVOS DA PERSONA Os objetivos que enumeramos para nossas personas são anotaçõesabreviadasquenãoapontamapenasparapadrõesdeusoespecíficos,mastambémfornecemumarazão para a existência desses comportamentos. Compreender por que um usuário realizadeterminadas tarefasdá aosdesignersgrandepoderdemelhoraroumesmoeliminar as tarefas eaindaassimalcançarosmesmosobjetivos.


5.5AIMPORTÂNCIADOSOBJETIVOS

38 5.5AIMPORTÂNCIADOSOBJETIVOS


Omais importanteparaaconstruçãodeumapersonaéa identificaçãodosprincipaispadrõesqueacabamsaltandoaosolhosquandocomeçamosaanalisarosachados:

Comoasvariáveiscomportamentaisedemográficasidentificadasseagrupamparaformarpadrões.Variáveis demográficas só entram se influenciarem o comportamento como idade e habilidadetécnica.Seumagrupamentodeentrevistadosapareceemmeia-dúziadessasvariáveis,vocêpodeterabaseparaumapersona;Quandoacharqueidentificouumpadrão,procureporoutros.

Uma"regradeouro"paraonúmerodepersonasécriarnomínimoduasenomáximoonze.

Editoras tradicionais pouco ligam para ebooks e novas tecnologias. Nãodominam tecnicamente o assunto para revisar os livros a fundo.Não têmanosdeexperiênciaemdidáticascomcursos.Conheça a Casa do Código, uma editora diferente, com curadoria daCaelumeobsessãoporlivrosdequalidadeapreçosjustos.


Dependendo do tempo e dos recursos do projeto, é possível criar personas adhoc a partir dasinformações levantadas com os stakeholders, inclusive o design pode contribuir com suaexperiência.Aindasim,umapersonacalcadaemdadosdepesquisatemmaiorcredibilidade.

Umaoutramaneirade secriarumapersona,principalmentequandoqueremospassar apenasumaideologiarápidaparaaequipe,édesefazerumapersonamaissimples,emformatodecartão.

5.6CRIANDOPERSONAS

5.7NÚMERODEPERSONAS


5.8PERSONASADHOC

5.9PERSONASIMPLES

5.6CRIANDOPERSONAS 39


Essecartãodeveresponderasseguintesperguntas:

Quem?Oquê/doquê?Como?Porquê?

Figura5.1:Personasimples

Muitasvezesnoandamentodosnossosprojetosficamosmuitofocadosemcumprirprazosemetas.Tão focados, que acabamos esquecendo para quem estamos desenvolvendo o site ou aplicação: ousuário.Emprimeirainstânciapegaroperfildeusuárioqualquerpodeparecerasoluçãoideal,afinal,ele é um de muitos, e talvez represente boa parte desses 'muitos'. O problema é que ele pode nãorepresentaramaioriadosseususuários.

E para compilar tanta informação perdida, a respeito das necessidades, dos costumes e até dapersonalidadedonossopúblico-alvoqueexistemaspersonas,jáestudadasaqui.

5.10PROTO-PERSONA

40 5.10PROTO-PERSONA

Figura5.2:Exemplo-Persona

O"chato"daspersonassãooscustos.Paramontarumapersonatradicional,asinformaçõesdevemserretiradasdepesquisasefetivassobreosusuáriosdaempresae/oudoprojeto.Mascomotodaempresaconhecepelomenosumpoucodosseususuários,possuemalgum tipode informação relevantesobreeles, mesmo que não validadas de alguma forma, há a possibilidade de se criar uma variante maissimplesdapersona,aproto-persona.

Ela éuma soluçãode contornopara apersonacomum,ou seja, é aconselhávelquenão seja algodefinitivoequesuasinformaçõessejamvalidadascomusuáriosreaisposteriormente.

Contudo,émelhorumaproto-personanamão,doqueduaspersonasvoando.

Éinteressantequeaproto-personapossuaasseguintesinformações:

Umapersonamaissimples

Conteúdodaproto-persona

5.10PROTO-PERSONA 41

Queméesseusuárioecomoeleé(personalidade)AlgunscomportamentosInformaçõesdemográficascomoidadeeprofissãoEopontochave:suasnecessidadese/ouobjetivos

Olayoutdaproto-personapodevariarconformeacriatividadedotime.Umtemplatebastanteusadoéondeasinformaçõessãoseparadasemquatroquadrantes,comonoexemploabaixo:

Figura5.3:Exemplo-Proto-persona

Tanto as personas tradicionais quanto as proto-personas ajudam a nortear o time na maioria dasdecisõesqueenvolvemoprojeto.Aproto-personaéinteressanteparacomeçaraintroduziraculturadeDCU(DesignCentradonoUsuário)naempresa,porseralgobaratoemaissimplesdeserdesenvolvido.

42 5.10PROTO-PERSONA




Criartrêsproto-personas

1. Canetinhas;2. A4Branca;3. Pesquisas;

40minutosdeduração.

1. Individualmente,cadaintegrantedotimemontaumaproto-persona;

2. Cadaintegranteapresentaparaoprópriotimesuaideia;

3. O time opina sobre quais características são realistas ou não, podendo ser feitas alterações nessemomento;

4. Otimedeveescolhertrêsproto-personasecolá-lasnaparede;


5.11GAMESTORMING-CRIANDOPROTO-PERSONAS

Objetivo

Ambiente

Regras

Passoapasso

5.12OSSETEPASSOSPARACRIARPERSONAS

5.11GAMESTORMING-CRIANDOPROTO-PERSONAS 43


Paracriarumapersona,AlanCooper,emseulivroAboutFace3,descrevesetepassosprincipais:

Passo1:identificarvariáveiscomportamentaisedemográficas.Passo2:mapearentrevistadosnasvariáveis.Passo3:identificarprincipaispadrõesdecomportamento.Passo4:listarcaracterísticaseobjetivosrelevantes.Passo5:checartodooconjuntodepersonaparaeliminarredundâncias.Passo6:desenvolveranarrativa.Passo7:determinartiposdepersonas.

Liste os aspectos distintos do comportamento observado nos participantes da pesquisa como umconjuntodevariáveiscomportamentais.Variáveisdemográficassóvalemapenaseremidentificadaseconsideradasse,dealgumaforma,afetamocomportamento(Ex.:produtoparacrianças-idade).

Normalmente identificamos padrões distintos de comportamento se focarmos nas seguintesvariáveis:

Atividades:oqueousuáriofaz,frequênciaevolume;Atitudes:comoousuáriopensasobreonegócioetecnologiaassociadosaoproduto;Aptidões:qualeducaçãoetreinamentoousuáriotem;capacidadesdeaprendizado;Motivações:porqueousuárioestáengajadononegócioreferenteaoproduto;Habilidades:capacidadedousuáriorelacionadaaonegócioetecnologiaassociadosaoproduto.

Nãoháumnúmeroexatodequantasvariáveisdevemexistir,masalgoemtornode20a30variáveisénormal.

APLICAÇÕES CORPORATIVAS E PERFIS DE USUÁRIOS Para aplicações corporativas, variáveiscomportamentaissãonormalmenteassociadasàsfunçõesdesempenhadasnotrabalhoeésugeridoqueasvariáveissejamlistadasparacadafunçãoseparadamente(administrador,usuário,etc.)

Depoisdeidentificadasasvariáveis,rotuleasextensõesdevaloresparacadavariável.

Paraalgumasvariáveis,essaextensãoécontínuaerotulamosdoisvaloresextremoseopostos.Porexemplo,paraumaaplicaçãodecomércioeletrônico,osvaloresdeumavariávelchamada"motivosparacomprar"podeirde"apenasquandonecessário"até"porprazer".

Paraoutrasvariáveis,ficaimpossívelumavariaçãocontínuaepodemosusaropçõescommúltiplas

Passo1:Identificarasvariáveiscomportamentais

Passo2:Mapearosentrevistadosnasvariáveisidentificadas

44 5.12OSSETEPASSOSPARACRIARPERSONAS

escolhas. Um exemplo seria a variável "preferência de pagamento" que poderia ter as opções"parcelado","àvistasócomdesconto"ou"àvistamesmosemdesconto.

Agorajápodemosmapearcadaparticipantedapesquisadentrodessasextensõesdevaloresdecadavariável.Amelhorformaévertodososparticipantesparaumavariáveledepoispassarapróxima.Omaisimportanteéposicionarcadaparticipanterelativoaosoutrosparticipantes.Aprecisãonaposiçãoabsolutaémenossignificante.

Paraexemplificarcomoomapeamentoéfeito,usaremosasduasvariáveiscitadasacima(vocêpodefazerissodeformasimples,usandoumquadro-branco):

Figura5.4:Tabeladeusuáriosentrevistados

Depoisdetermapeadoosentrevistadosemtodasasvariáveis,procureporaquelesquenormalmenteaparecem juntos. Se ummesmo agrupamento de usuários aparecer em seis a oito variáveis, já podesignificarumpadrãodecomportamentoqueseráabaseparaumapersona.Quandoacharqueidentificouumpadrão,procureporoutros.

Mas cuidado que alguns aparentes relacionamentos podem induzir a falsos padrões. Perceba osrelacionamentosquerealmentefazemsentido.Porexemplo,háumalógicaseospadrõesapresentaremquepessoasque compram frequentementenormalmente compramparcelado.Masnão faz sentido terumpadrãoquemostrequeopessoalquegostadefazercomprastambémévegetariano!

Identificado os principais padrões, dê a eles nomes curtos e descritivos, como por exemplo "o

Mapearparticipantesnasextensões

Passo3:Identificarprincipaispadrõesdecomportamento

Nomeandoospadrõesencontrados

5.12OSSETEPASSOSPARACRIARPERSONAS 45

compradorconsciente"ou"ocompradorcompulsivo",etc.

Identificarobjetivoseexpressá-lossucintamenteéumadastarefasmaiscríticasnamodelagemdeuma persona, pois essses objetivos guiarão o design. Cada objetivo deve inferido das variáveiscomportamentaisidentificadaseexpressadocomoumasentençasimples.

Objetivos do usuário servem como uma lente através da qual os designers devem considerar asfunções de um produto. A função e comportamento do produto devem atender objetivos através detarefas,umpequenonúmerodetatefasabsolutamentenecessárias.Lembre-se,astarefassãoapenasummeioparaumfim;objetivossãoessefim.

Para cada padrão que você identificou no passo anterior, sintetize os detalhes a partir dasinformaçõesquevocêtemdaspesquisas,descrevendo:

Principaistarefasefluxododia-a-dia;Problemascomassoluçõesatuais;Ambientedecasaoudotrabalho;Característicascomportamentaisedemográficas;Objetivos.

PROFISSÃO A escolha da profissão da persona ajuda a lembrar o contexto no qual ela vive.Umpsicólogo encontra várias pessoas ao dia, enquanto um professor de educação física encontraadolescentesumavezporsemana.

Sintetizar os objetivos é a parte mais importante desse passo, já que são esses objetivos quequeremos que a aplicação que estamos desenhando atenda. Uma forma de inferir os objetivos éobservar as ações que as pessoas - de cada agrupamento que levou a umpadrão - fazem e por qualmotivo:comoestãoagindoesecomportandoatualmente?Oqueelasquerematingircomessasações?

Osobjetivos,deumacertaforma,temqueserrelacionadosaoprodutoaserdesenvolvido.Senãoédiretamenterelacionado,éirrelevanteparadirecionarodesigndoproduto.

Emseu livroEmotionalDesign,Donald (Don)Normamdefine trêsprocessoscognitivos:visceral(reaçãoaestímulosantesdeumaação),comportamental (principal focodosdesignersde interação)ereflexivo(reflexãoconscientedeexperiênciaspassadas).

Alan Cooper traduz cada um desses processos cognitivos respectivamente como objetivos deexperiência,finaisedevida.Vejamoscadaumdeles:

Passo4:Listarcaracterísticaseobjetivosrelevantes

46 5.12OSSETEPASSOSPARACRIARPERSONAS

Descrevemcomoalguémquersesentirusandooproduto.Tipicamenteumapersonatemnãomaisqueumobjetivodesses,ouaténenhum,amenosquesejaumprodutodeentretenimento.Exemplosdeobjetivosdeexperiênciasão:

"sentir-meinteligente""terdivertimento""atingirumasensaçãodeplenitude"

Descrevemoqueumapersonaquerrealizar;eoprodutopodeajudardiretamenteouindiretamentenisso.Elessãoosmaisúteisparadeterminarodesigndoprodutoenormalmenteumapersonapodeterde3a5objetivosfinais.Exemplosdeobjetivosfinaissão:

"finalizarmeutrabalhoatéàs17h""serpró-ativoenãoreativo""descobrirproblemasantesqueelessetornemcríticos"

Sãomaisúteisemprodutosorientadosaoconsumidor,masnãoéapropriadousá-losamenosqueatingir esse objetivo seja amotivação principal para usar o produto.Normalmente identificar um ounenhumobjetivodevidaemumapersonaéconsideradocomum.Exemplosdeobjetivosdevidasão:

"meaposentaraos45anos""serapróximaMadonna""serpromovidoadiretordearte"

Responder aos objetivos de vida faz a diferença entre um usuário satisfeito e um usuário fiel efanático.

A partir de agora as personas começam a ficar mais evidentes. Cheque todos os mapeamentos,padrõesidentificadoscomsuascaracterísticaseobjetivosparaversefaltaalgumacoisa.Paratercertezadequenãoestejacriandopersonasredundantes,vejaseelasdiferemumadasoutrasemaomenosumcomportamento significante. Se duas oumais personas estãomuito similares e a única coisa que asdifere são questões demográficas, procure eliminar uma das duas ou ver se é possível ajustar ascaracterísticasparaficaremmaisdistintas.

Osobjetivosdeexperiência

Objetivosfinais

Objetivosdevida

Passo5:Checartodooconjuntodepersonasparaeliminarredundâncias

Passo6:Desenvolveranarrativa

5.12OSSETEPASSOSPARACRIARPERSONAS 47

Personascontamhistóriaseassimsetornammaisconvincentes.Umalistadeitensnãotransmitemoquequeremostãobemquantoanarrativa.Incluaalgunspoucosdetalhespessoais.Sãopequenascoisasquenãoafetamodesigndoproduto:ondefezfaculdade,hobbies,etc.Umoudoisdetalhespessoaissãosuficientes-muitospodemdesviarsuaatençãodosimportantesdadoscomportamentaisqueapersonadeverepresentar.Algumasdicasdecomofazeranarrativa:

Listeositenseagrupeosquesãorelacionados;Transformecadagrupoemumparágrafo;Adicionea"personalidade"porúltimo;Citaçõestambémsãolegaisdeseremusadas.

Umexemplodecomotransformarumalistadeitensemumanarrativa:

ITENS

ItensOcupadaInterrupçõesfrequentes

NarrativaOdiadeGlóriaétãoagitadoqueàs15h20,finalmente,elaconseguecomeraoutrametadedosanduíchequehaviadeixadonasuamesadesdeahoradoalmoço!

Depoisdeidentificadoumaoumaispersonas,éprecisodeterminarotipodecadauma.Asprincipaissãoapersonaprimáriaeasecundária,masexistemváriosoutrostipos,comoanegativa,suplementar,servedpersona.

Aprimária é aquelaqueprecisa ser atendidade todo jeitopeloproduto.Elanão ficará satisfeitacasoodesignsejafeitoparaqualqueroutrapersona.Sefizermosapersonaprimáriafeliz,asoutrasnãoficarãotristes.

A secundária no geral fica satisfeita com a interface feita para a primária, mas tem algumasnecessidades adicionais específicas. Faça o design para a primária e depois, namedida do possível,acomodeasnecessidadesdasecundária.

Passo7:Determinartiposdepersonas

Primária

5.13SECUNDÁRIA

48 5.13SECUNDÁRIA

Não são nem primeira nem secundária, mas são satisfeitas com as soluções da primeira ou dasegunda.Geralmentesãoempregadasparamaterializarassuposiçõesdosstakeholders.

Apersonanegativaéaquelaparaqualoprodutonãofoifeito.Émaisumacamadadevalidaçãodosdadosdapesquisa.

Aservedpersonanãoutilizaoprodutodiretamente,maséafetadapeloseuuso.Porexemplo,aquelapessoaqueaguardaaatendentefazerasuareservadequarto.

Umaformadeidentificarotipodaspersonaséporeliminação.Pergunte-sequemnãopoderiaserprimária. Faça a pergunta: se fizer o design para esta persona, as outras ficariam insatisfeitas? Se aresposta for sim, essa não seria a persona primária. As personas são tão diferentes que precisam deinterfacestotalmentediferentes?Oupoderiaumadelasatenderamaioriadasnecessidades?Seexistirempersonas comnecessidadesmuitodiferentes, provavelmente teremosmaisdeumapersonaprimária ecadaumaprovavelmenteterásuaprópriainterface.

EVITECARICATURASÉessencialqueapersonanãosejaalgocaricaturadoouestereotipado.Mesmosendo um "personagem", ela deve ser realista e plausível, e que capture a essência do tipo deusuárioqueseuprodutotemouviráater.

Resumindo,algunspontosprincipaisquedevemfazerpartedapersona:

Tipodapersona;Umafotoqueajudaadarotoque"humano";Umnome.Algumas pessoas preferem juntar ao nome algo que identifique o perfil principal dapersona,comoporexemplo"LeonardoSilva,oempreendedorinovador";Incluaalgunsdetalhespessoais,coisasquenãoafetamodesigndasolução,massemexageros;Umanarrativa;Emuito importante, liste os objetivos finais que a persona quer atingir e que o produto deveráatender.

Suplementar

Negativa

Servedpersona

Comodeterminarotipo

5.13SECUNDÁRIA 49



Paraentenderasnecessidadeseobjetivosdousuárioafimdemelhoraroprodutoouserviçoexisteuma ferramenta visual que descreve o perfil desse usuário de maneira simples e fácil, oMapa deEmpatia.

Semelhante à proto-persona, pode ser baseado em uma hipótese do perfil do público-alvo. E ointeressanteéque jápodeserusadoparadirecionarmelhorosplanosdeaçãoeajudarna tomadadedecisõessobreoprojeto.

OMapapossuiseisquadrantes,todosrelacionadosaousuário:

Oqueéimportanteparaele?Quaissãosuasesperançasesonhos?

Oqueoinfluenciadealgumaforma?Amigos,chefe?

Doqueelegostadefalar?Comoéseuambiente?Comoelecostumaagir?

Comoeleéempúblico?Aparência?Comportamentocomosdemais?

Quaisobstáculosoudesafioselepossui?Quaissãoessasbarreiras?


5.14MAPADEEMPATIA

Penso

Escuto

Vejo

Faloefaço

Dores

50 5.14MAPADEEMPATIA


Quaisseusdesejos?Oqueelealmejaatingir?Comoelepodemedirseusucesso?

Éinteressantetambémaescolhadonomeeda idadedesseperfilhipotético,paraqueelesetornemaiscrível.

Figura5.5:TemplatedoMapadeEmpatia

Olayoutdapersonaemsidependeapenasdacriatividadedoresponsável.Háalgunstemplatesnainternet, mas o ideal é criar o próprio, a fim de ser reutilizado na empresa sempre que houver anecessidadedesecriarpersonas.

Uma ferramenta online que auxilia na criação da persona é a Xtensio (http://xtensio.com/user-persona).Nelavocêusaumtemplatepadrãoeapenasvaialterandoasinformaçõesdapersona,comoafotoeonomeporexemplo.Elaaindapermiteremanejarasseçõesdessetemplate.

Necessidades

5.15TEMPLATESDEPERSONA

5.15TEMPLATESDEPERSONA 51

http://xtensio.com/user-persona

Figura5.6:Templatepersona-Xtensio

52 5.15TEMPLATESDEPERSONA

5.15TEMPLATESDEPERSONA 53

Figura5.7:Exemplodepersonapagamentoeletrônico

Talvezumdosaspectosmaiscontroversosdaspersonassãoasnarrativascoloridasemtornodelas.QuempoderiaseimportarqueapersonaMartatemumfuscarosa?Ouqueelaéalérgicaàcamarão?

Mesmoquandoashistóriassãocentradasemtornodotrabalho,hásemprealguémquestionandoarelevânciaeaplicabilidadedasinformaçõesqueestãosendoinventadas.

Discutasobreanecessidadeounãodenarrativasdaspersonas.



Terousuárioprimáriomaispróximodotime.

1. Canetinhas;2. Fotodapersona;3. A4Branca;4. Pesquisas;5. Post-its.

45minutosdeduração.

5.16DISCUSSÃO:ASNARRATIVASSÃOREALMENTENECESSÁRIAS?


5.17GAMESTORMING-CRIANDOPERSONANODIAADIA

Objetivo

Ambiente

Regras

54 5.16DISCUSSÃO:ASNARRATIVASSÃOREALMENTENECESSÁRIAS?


1. Comaspesquisasemmãos,cadaintegrantedotimeanotaemumpost-itonomeeumarespostadapergunta;

2. Umintegrantedotimeagrupaospost-itsnaparede;

3. Emfrenteaospost-itsosintegrantesdiscutemascaracteristicasdapersona,conformevaidefinindocadapontoum integrante do time anota emumpost-it cada caracteriscadapersonaprimária quesendodefinida;

4. Agorabastarealizaranarrativaoudiaadiadapersonaemumafolharacunho;

5. ColoquetodososdadoslevantadosdapersonaprimárianafolhaA4.

Passoapasso

5.17GAMESTORMING-CRIANDOPERSONANODIAADIA 55

CAPÍTULO6

"Eduquemososjovensparaquenãosecondenemoshomens"--FriedrichNietzsche

Depoisdedefiniroprojetoerealizarapesquisadedesign,comojáditoanteriormente,odesignerdevedar forma e significado aosdadosobtidos.Odesigner de interação constrói entãouma série demodelos,diagramasedocumentações,comoumaformadevisualizareanalisartudooqueeleaprendeuatéagora.Umdessesmodelos,asPersonas,jámencionamosanteriormente.Outrosmodelospodemsermodelosmentais,cenários,análisedetarefas,fluxodetarefas,etc.

Aquantidadededocumentaçãoqueodesignerprecisaelaborareoquedeveserelaboradoéumaquestão que sempre gera debates. Alguns sugerem que já se deve pular diretamente ao desenho dainterfaceouatéparaprotótiposeimplementaçãododesignemHTML,semperdertempocomqualquertipodedocumentação.Outrosdiscordam,poisconsideramadocumentaçãoumaparteimportanteparaestruturaroprojetoenãodeixarpassarnadaimportante.

Masobomsensodeveprevalecer:odesignerdeveelaboraradocumentaçãoquefornecessáriaparaexecutar o projeto da melhor forma. Alguns documentos podem ser exigência do cliente, que osconsideramcomopartedosentregáveisdoprojeto,outrosporqueosdesignersouosdesenvolvedoresenvolvidosnoprojetoconsideramúteisparadesenvolverainterfaceeaaplicação.Emaisumavez,tudodepende! Depende dos recursos disponíveis para o projeto, das exigências do cliente, do modo detrabalhodasuaempresa.

Normalmentequandoodesignestásendofeitocomoumtrabalhoterceirizadoequeserárepassadoparaoclienteimplementar,anecessidadededocumentaçõeseespecificaçõessãomaiores.Masquandoo time de design está inserido na equipe de desenvolvimento do produto, essa necessidade tende adiminuir,jáqueosdesignersestarãolado-a-ladocomosimplementadores.

Mas,independentementedequaisdocumentosvocêprecisarádesenvolveremseusprojetos,vamosdescreveraquialgunsprincipaisqueajudamnumamelhoridentificaçãodosrequisitosnecessáriospara

MODELANDOEIDENTIFICANDOREQUISITOS

Qualdocumentaçãoproduzir?

DocumentaçãoeServiçoTerceirizado

56 6MODELANDOEIDENTIFICANDOREQUISITOS

odesenhodainteraçãoedainterface.

Aspessoasnãoprecisamentenderdetodaacomplexidadequeestáportrásdequalquerprodutoqueelasusam.Umcelularnãofuncionadomesmojeitoqueumtelefonefixo.

Um celular faz sua transmissão via ondas de rádio que trocam conexões dentro de uma redeconsistindo de várias antenas pertencentes às operadoras de telefonia móvel. Mas saber dessefuncionamentonãoajudaàspessoasaentenderemcomousarumcelular,acomointeragiremcomele.

Amaneiracomopessoas imaginamcomoalgo funciona,masquenãonecessariamente reflete seurealmecanismo,échamadomodelomentaloumodeloconceitual.Elenãocapturaapenasa intençãocognitivadeumapessoa,mastambémaemoção,ambientesocialetraçosculturais.

MODELO MENTAL Determina como as pessoas pensam sobre algo e identifica a expectativa dousuáriodecomoeledevesecomportar.

Modelosmentaistêmasseguintescaracterísticas-chave:

Incluemoqueumapessoapensaqueéverdade,masquenãonecessariamenteérealmenteverdade;Sãosimilaremestruturaàscoisasouconceitosqueelesrepresentam;Permitemumapessoapredizerosresultadosdesuasações;Sãomais simples que as coisas ou conceitos que eles representam. Incluemapenas informaçõessuficientesparapermitirprevisõesmaisprecisas.

Modelos mentais evoluem lentamente e podem ser aplicados em outros projetos, diferente daspersonas,quesãoespecíficasporprojeto.

Apesar do modelo mental guiar a estruturação do site, de nada adiantará se ele não atende asnecessidadesdas personas criadas, sendo assim, a persona é um instrumentopoderosopara validar omodelometalescolhido.

6.1MODELOMENTAL

Característicaschave

Mudalentamente

ValidadoporPersonas

ExemplodeModeloMental

6.1MODELOMENTAL 57

Umexemploéomodelomentalparaocomponente"carrinhodecompras"deumalojaonline,queéodeumcontainer.Essemodeloinfluenciatantoodesigndocomponentecomoalinguagemqueéusadanainterface.Dessaforma,nós"colocamos"ou"tiramos"coisasdocarrinhoeaaplicaçãodecomércioeletrônicodeveterfuncionalidadesparaatenderaessastarefas.

EXEMPLO:MODELOMENTALPARALOJAVIRTUAL

Éinfluenciadopelaexperiênciacomlojasecatálogosfísicos;Expectativas:Éóbviocomoacharumprodutoouéfácilpedirporassistênciahumana;Tudoqueprecisasabersobreoprodutoestáacessível(nacaixadoproduto)ouéfácilpedirajuda;Ter uma forma de marcação das coisas que vai querer comprar depois ou mostrar paraamigos(comomarcarapáginadocatálogo).

Unidadesbásicasdedados:produtos,quetemcores,tamanho,etc.




Cenários sãonarrativasque fornecemumamaneira rápidaeeficazpara imaginarosconceitosdedesigncasooprodutotivessesidoconstruído.Osprotagonistasdessashistóriassãoaspersonasasquaisprocuramos atender seus objetivos (levando em consideração modelos mentais) sejam finais, deexperiênciaoudevida.Emcertosentido,oscenáriossãoprotótiposconstruídosdepalavras.

Estatécnicadescreveosrequisitosnumalinguagemfácildeentenderevalidarportodasaspessoasrelacionadascomoprojeto,motivando-as adiscutir e aparticipar,obtendoassimummaior feedback


6.2CENÁRIOS

Linguagemcomumefácildeentender

58 6.2CENÁRIOS


sobreoqueserádesenvolvido.

Oscenáriosdemarcamaentradanoplanodeescopo,poissãodelesqueserãoextraídososrequisitosfuncionais e de conteúdo. Não é raro a aparição de novos requisitos durante a criação do cenário,completandoaquelesdefinidosnoplanoestratégico.

CENÁRIOÉumanarrativaquedescreveinteraçõesprevisíveisdosusuárioscomosistema.Inclueminformaçõessobreobjetivos,expectativas,motivações,açõesereações.

Émuito comum começar com o cenário de primeira utilização: o quê acontece quando personasencontramoprodutoouserviçopelaprimeiravez?

EXEMPLO: UM CENÁRIO PARA LOJA VIRTUAL Alice quer comprar presente de aniversário para umamigo,masnão temnadaemmente.Ela sabequeelegostade cozinhar.Ela entra emuma lojavirtualedeartigosdiversoseolhaosprodutosemofertaelançamentosqueaparecemnumaáreadeprodutosdaprimeirapágina.Elavêalgorelacionadoalivrosdeculináriaeachaquepodeserumaboa ideia!Quais tipos de livros sobre esse assunto estão disponíveis?Qual deles seria um bompresente?Elaprocuraalgonalistadeprodutosrelacionadosaotema.Alistamostraumaimagemdecapadolivroealgumasoutrasinformaçõescomotítulo,autor,preço.Alistaestaordenadaportítulo e elaordenaporpreço, domenorparaomaior, porquenãoquergastarmuito.Elavê trêslivros interessantes e seleciona o primeiro deles, informaçõesmais detalhadas sobre o livro sãomostradasemumaáreadedetalhesdoprodutoeelalêasopiniõesqueoutraspessoasjáderasobreele.Elanãogostadesseprimeirolivroevoltaa listagemparaselecionaroutra.Essesegundoelaachou bem interessante, mas para ela e não para o seu amigo, então quer marcá-lo para podercomprardepois.Finalmenteelaencontraumlivroqueoamigodelaprovavelmentevaiadorar.Naárea de detalhes do produto ela clica na opção para comprar e o seu carrinho de compras émostradojácomolivroincluído.Elapensaemvoltarparacomprartambémaquelelivroparaela,masacabadesistindoeprossegueparapagaracompra.

Ocenáriodemaisaltoníveléchamadocenáriodecontexto.Comotudoéfeitosobopontodevistadapersona,ascoisasacontecem"magicamente",nãohavendoanecessidadedescrevercomoascoisas

Dãoinícioaoplanodeescopo

Deondecomeçar?

TiposdeCenário

6.2CENÁRIOS 59

acontecempordebaixodospanos.

Quandoodesignestaaumpassodecomeçarodesign,écriadoocenáriodecaminhochave,quejáutilizaovocabuláriododesignerealizaosdetalhamentosnecessários.

Criar um cénario com foco na persona primária que criamos no exercício anterios.Dos cenárioscriadosvamoscriarashistóriasparaodesenolvimentodoappmobile.

Obs.Lembre-sedeentrarnomodelomentaldapersonaprimária.

1. FolhasA4;2. Umcanetaporaluno;3. 3bolinhasverdes(votospositivos)porintegrantedotime;4. 1bolinhavermelha(votonegativo)porintegrantedotime.

Duraçãode25minutos.

1. Cadaintegrantedotimevaidesenvolverumcenáriocombasenasnecessidadesdapersonaprimária;2. Coleoscenáriosnaparedeparaquecadaintegrantedopossalertodososcenários;3. Utilize as bolinhaspara votar, primeiroos votos positivos (obrigatórios) e em seguidaonegativo

(nãoéobrigatório);4. Timeentraemacordodequalhistóriavairesolverprimeiro.Seotimeacharnecessáriopodemelhor

ocenárioescolhido.

Análisede tarefaséespecialmenteútilparavalidarseodesignsuporta todasas tarefasrequeridaspelaaplicação,sejamelasdosrequisitosdonegóciooudasnecessidadesdosusuários.

6.3GAMESTORMING-CRIANDOCENÁRIO

Objetivo

Ambiente

Regras

Passoapasso

6.4ANÁLISEDETAREFAS

60 6.3GAMESTORMING-CRIANDOCENÁRIO

ANÁLISE DE TAREFAS Lista as tarefas que o design final terá que suportar. As tarefas podem sercategorizadasporimportância,níveldeacessoeatépelaspersonasquerealizarãoatarefa.

Normalmente essa lista é montada a partir de requisitos de negócios, achados das pesquisas,produtosexistentes,cenáriosecasosdeuso.

Acategorizaçãoporgraudeimportância(primárias,secundárias,terciáriasoudispensável),ajudaotime de design a focar seu tempo nas tarefas mais importantes e a perceber aquilo que pode serdispensadonodesign.



Depoisqueastarefasforamlistadas,organizá-lasatravésdeumdiagramaquepõeumaordemquetorna óbvio como ir de uma a outra, fazendo o processo seguir um fluxo lógico, é o próximo eimportantepassoaserfeito.

FLUXODETAREFASDetalhacomoumusuáriovaicompletartodasastarefasemumaaplicação,docomeçoaofim.

Colocarastarefasemumfluxopodesugeriraordemqueastelasserãoapresentadasnaaplicaçãoeajudaodesigneraverasconexõeslógicasqueserãoconstruídasposteriormentenoswireframes.

Adiagramaçãodofluxodetarefaséoiníciodaconcretizaçãodosrequisitoseéquandoodesigner


6.5FLUXODETAREFAS

6.5FLUXODETAREFAS 61


começaveroprodutotomandoforma.

Figura6.1:Exemplodefluxodetarefas

Assim que o designer tiver estruturado as informações obtidas, identificando os requisitosnecessários para o desenvolvimento da aplicação, ele pode sintetizá-los, agrupando em requisitos dedados e de funcionalidades, ou seja, os dados e ações que devem ser representados no design dainteraçãoedoselementosdainterface.

6.6SINTETIZANDOOSREQUISITOSDEDESIGN

62 6.6SINTETIZANDOOSREQUISITOSDEDESIGN

Dados:Objetoseinformaçõesqueousuárioprecisaver.

Funcionalidades:Operaçõesouaçõesqueosusuários farãocomosdadosouemrespostaaeles.Normalmentesãotraduzidosemcomponentesdecontroledainterfaceouemlugaresondeosobjetoseinformaçõesserãodispostosnainterface.

Umaformadeidentificarosrequisitosdedadosefuncionalidadeséseparandoasações(verbos)eobjetos(substantivos)dosmodelos(cenários,fluxodetarefas)queforamelaborados.Porexemplo:

Adicionar(ação)umproduto(objeto)nocarrinho(objeto)apartirdoresultadodabusca.

Outrosrequisitostambémpodemserúteisseparar,comonoexemploacima,orequisitodecontexto"apartirdoresultadodabusca".

Além disso, tudo o mais que possa afetar o design, como a habilidade dos usuários no uso doproduto, o ambiente onde o produto será inserido, prazo para desenvolver a solução, recursosdisponíveis(pessoas,orçamento),etc.

Nãoexisteumaformapadrãoparaadocumentaçãodessesrequisitos.Nogeral,colocá-losemumatabelaseparadosportipo(dados,funcionalidades,contexto)éosuficiente.Apartirdeagora,odesignertemsubsídiossuficientesparainiciarodesenhodainterface,oque,relembrando,nãosignificaqueelenãopodiatercomeçadoaesboçá-laemqualquermomentoantes!

Usualmente,as tarefasaseremexecutadaselaequipesãoescritasnoformatodeUserStories, ousimplesmenteHistórias.Essas,sãopedidosdeitensdevalorparaoprojetoqueseestádesenvolvendoecontémtrêsinformaçõesimportantes:

porqueéimportantequeosistematenhaessafuncionalidade;quetipodeusuáriosebeneciamaiscomessafuncionalidade;objetivamente,oquesequerqueosoftwarefaça.

Sabendodamotivaçãoe importânciadecadahistória, conseguimospriorizá-lasmelhor.Opedidoobjetivo de uma parte nova facilita aos envolvidos entenderem o que deve ser produzido.O tipo deusuárioqueutilizaráosistemafacilitamuitotambémparaosdesenvolvedores,quesaberãocomquemtirardúvidas,seessassurgirememesmoqualéofocodessafuncionalidade.

Organizaçãodosrequisitos

6.7USERSTORIES

6.7USERSTORIES 63




Umaboahistóriadevepoderserlidafluentemente,comoumahistorinhamesmo.Tomecuidadoparanão escrever amotivação para a construção da história da visão de uma pessoa e dizer que omaiorinteressadoéoutro.Vejaummauexemplodehistória:

PAGAMENTOEMBOLETOParaqueOCOMPRADORpossapagarsemcartãodecréditoEu,comocompradorQueroqueosistemadêsuporteàemissãodeboletos

Umapequenaalteraçãodagrafiafazmuitomaissentidoetornaaleituramaisfluente:

PAGAMENTO EM BOLETO Para que EU CONSIGA comprar produtos nessa loja Eu, comocompradorquenãotemcartãodecréditoQueroqueosistemadêsuporteaopagamentoemboleto

Criarhistóriasretiradasdoscenáriosquedesenvolvemosnoexercícioanterior.


6.8ESCREVENDOBOASHISTÓRIAS

6.9 GAMESTORMING - CRIANDO HISTÓRIAS COM FOCO NOUSUÁRIO

Objetivo

Ambiente

64 6.8ESCREVENDOBOASHISTÓRIAS


1. Cenáriocriadoedefinidopelotimenoexercícioanterior;2. Duasfichaspautadasporintegrante.

1. Duraçãode15minutos;2. Sóutilizarumladodocartão;3. Cadaintegrantefazumahistóriapracadaproto-personacriada.

Nocartãovamosadotaroseguintepadrão:

Para...vercomoacamisaficadeoutrascores.Eu,como...compradorquegostadeumarmariocolorido.Quero... conseguir visualizar como a camisa fica nas cores disponiveis, com alguma imagemilustrativasqueeupossotrocardeformafácil.

ApósoPara...,Eu...eoQuero..estiverpreenchidoscolocamosumtítulo.

Figura6.2:Exemplos-Histórias

Apesardesemprefocarmosnousuárioamaiorpartedotemponatomadadedecisõesdoprojeto,a

Regras

Passoapasso

6.10EQUILÍBRIOENTRECLIENTEEUSUÁRIO

6.10EQUILÍBRIOENTRECLIENTEEUSUÁRIO 65

opinião do cliente também precisa ser levada em consideração. Qualquer falha na definição dosobjetivosoumesmofaltadeautomatizadoresdeprocessospodemresultaremretrabalhos,insatisfaçãodoclientee/oudesmotivaçãodaequipe.

Pode acontecer também do objetivo estar muito bem definido, mas a equipe desconhecer essainformação. Pode acontecer também da equipe nemmesmo conhecer o cliente e seus cnceitos, nãoconseguindovisualizaroquãoimportanteéasuatarefaatual.

Paramelhoraracompreensãodosstakeholdersacercadasnecessidadesdousuárioedosrumosdoprojeto,e tambémdaprópriaequipeenvolvidanodesenvolvimento (designers,desenvolvedores,etc),foicriadaumaferramentaparadeixarissodeumaformatotalmentevisualeinterativa,oUXCanvas,inspiradonoclássicoBusinessModelCanvas.

Figura6.3:Estrutura-UXCanvas

Odiferencialdessaferramentaéoseufoconoconceitodeexperiênciadousodoprojeto,podendoseraplicadoaqualquermomentodoprojeto.Cabendoaequipedecidironíveldedetalhamentodecadabloco.

UXCANVASSitecomorelatóriofinalsobreaferramenta:http://uxcanvas.com

E de todos os blocos da ferramenta, a proposta de experiência é de fato o coração de tudo.Estratégico e subjetivo, pode ser o alinhamento de uso das expectativas do cliente e do usuário.Até

66 6.10EQUILÍBRIOENTRECLIENTEEUSUÁRIO

http://uxcanvas.com

mesmoanecessidadequeoprojetoestásolucionando.



Juntaravisãodoclienteedousuário.

1. Personacriadaemgamestorminganterior;2. Cenáriosehistóriascriadosnestecapítulo;3. Cartolina;4. Canetinhaazul,verdeepreta.

Duraçãode25minutos

1. DesenharoUXCanvasnacartolinautilizandoascanetinhas;2. Colocarapersonanocanvas;3. Colocaroscenáriosnocanvas;4. Colocarashistóriasnocanvas;5. Umdosintegrantesdotimeassumeopapeldoclienteparapreencheroladodoclientenocanvas.


6.11GAMESTORMING-UXCANVAS

Objetivo

Ambiente

Regras

Passoapasso

6.12FEATURES

6.11GAMESTORMING-UXCANVAS 67


Adescriçãodeum interaçãoou ação como sistemaéoque chamamosde feature.Por exemplo,escreverumamensagempracompatilharumideia,pensamentoouconteúdorelevantedentrodoTwitteréumfeaturequechamamosdetweet.

Toda feature (funcionalidade) tem que atender um objetivo (necessidade) que seja claro erelacionadoaumapersonaouproto-personadoseusistema.Poressemotivo,antesdesairpensandonasfeaturesdosistema,precisamosentenderqueméonossopúblicoalvo.

Felizmente.Nósjátemosnossasproto-personascriadas.

Realizarumbrainstormdefeaturesclassicadosporproto-personaeobjetivo.

1. Proto-personascriadasemgamestorminganterior;2. Históriascriadasnestecapítulo;3. Cartolina;4. Canetinhaazul,verdeepreta.

20minutos.

1. Classificarasproto-personasnoeixoY;2. Cadaintegrantedotimedefineumobjetivopensandonasproto-personas;3. ClassificarosobjetivosnoeixoX;4. Brainstormdefeaturesprasolucionarosobjetivospensandoemcadaproto-persona.

6.13 GAMESTORMING - BRAINSTORM DE FEATURES COMOBJETIVOS

Objetivo

Ambiente

Regras

Passoapasso

68 6.13GAMESTORMING-BRAINSTORMDEFEATURESCOMOBJETIVOS

Figura6.4:Proto-personaseseusobjetivos



Emalgunscenárioscoorporativosapriorizaçãodefeatureédefinidasomentepelocliente.Aopiniãodoclienterealmentetemoseuvalor.Maséimportantelevarmosemconsideraçãomais4valores:valorprousuário,valorpronegócio,esforçotécnicoeMVP.


6.14PRIORIZANDOFEATURES

6.14PRIORIZANDOFEATURES 69


Temoobjetivodeentenderqualfeaturevaientregarmaisvalorprocliente,edeixarelemaisfeliz.Esseéomomentodeentrarmosnomodelomentaldousuário,praclassificarquaisfeaturesentregamumvalorpequeno,médioougrande.

Utilizadoprapriorizarqualfeatureentregamaisresultadofinanceiropronossocliente.Importanteclassificarjuntocomnossoclientequaisfeaturestemumvalorpequeno,médioougrande.

Éovalorquedeveserlevantadocomotimetécnicodosistema.Comoobjetivodeclassificarquaisfeaturestemumesfoçopequeno,médioougrande.

Éumaversãocomomínimodefeaturesquepossosercolocadoemprodução,agregandovalorprousuárioenegócio.

Priorizar tarefas com foco no usuário, levando em considereção o esforço técnico e o retornofinanceiro.

1. Proto-personascriadasemgamestorminganterior;2. Históriascriadasnestecapítulo;3. Cartolina;4. Canetinhaazul,verdeepreta.

Duraçãode30minutos

1. Criarocanvas;2. Colocarasproto-personas;

Valorprousuário:

Valorpronegócio:

Esforçotécnico:

MVP(MinimumViableProduct)

6.15 GAMESTORMING - PRIORIZANDO FEATURES COM FOCO NOUSUÁRIO

Objetivo

Ambiente

Regras

Passoapasso

70 6.15GAMESTORMING-PRIORIZANDOFEATURESCOMFOCONOUSUÁRIO

3. Priorizarashistóriasnocanvas.

Figura6.5:Prioridades

6.15GAMESTORMING-PRIORIZANDOFEATURESCOMFOCONOUSUÁRIO 71

CAPÍTULO7

"Nãoexisteumcaminhoparaafelicidade.Afelicidadeéocaminho."--MahatmaGandhi

Nassessõesanteriores,foramapresentadaspartesdoprocessodedesenvolvimentodoproduto,comodescoberta e definição do produto, e a identificação dos requisitos de design. A partir de agora,passaremosaodesenhodainterfacepropriamentedito.

Esseéomomentodepensarna ::bigpicture::noqualentramosnoplanodaestrutura.Não incluiaindaodesignvisual,interaçõesdetalhadas,elementosdeinterface.Fazendoumaanalogiaaoprojetodeumacasa,nessaetapaseriamdefinidosquaiscômodosacasateria,qualadisposiçãodeumemrelaçãoaooutro,otamanhorelativodecadaum.Aindanãoserianecessáriodefinirasdimensõesexatasdecadaum,ondeestariamasportasejanelasequaismóveisestariamemcadaum,porexemplo.

Deve ser definido a estrutura geral de navegação e as interações macro da aplicação. Deve-seconsiderar sua forma (será vista em uma tela de alta-resolução, em um celular, um quiosque?), qualpadrãoposturalaaplicaçãoseguirá(transitórioousoberano?)equaisosmétodosdeentradadedados(teclado,mouse,voz,toquenatela?).

Éocomeçodoesboçodaaplicação.Identifiqueasvisõesprincipaisqueaaplicaçãoprecisa(estadosprincipaisda tela).Normalmente, cadavisão édeterminadapelasdiferentes atividadesqueoprodutoprecisa suportar. Para cada visão, inicie a "fase de retângulos", onde a visão é divida em áreasretangulares correspondendo aos painéis, componentes de controles (como por exemplo barra deferramentas, menus) e outras áreas de mais alto-nível. Cada área é identificada com um nome e édemonstradoos relacionamentos entre elas,ou seja,oqueumamudançaemumaárea influencianasoutras.Deumavisãoparaoutra,pode-semudartodasasáreasouapenasumaprincipal.

Esseesboçopodeserfeitoinicialmenteemumpapel,guardanapoouquadro-branco!Passeparaumaferramentadedesignquandoacharquealgomaisfechadojáfoidefinido.

DOSREQUISITOSAODESIGN

7.1ESTRUTURAGERAL

72 7DOSREQUISITOSAODESIGN

Figura7.1:Exemploderabiscoframe

Odesignéumprocessoincrementalquevaisendorefinadoacadaiteração.

7.1ESTRUTURAGERAL 73

Figura7.2:Exemploderabiscoframe

É possível criar cenários de validação do tipo "se... então" para testar outras possibilidades noesboçofeito.




CenáriosdeValidação


74 7.1ESTRUTURAGERAL


Damesmaformaqueodesigndainteraçãoestásendodefinido,oestudodalinguagemqueodesignvisualterátambémpodeseriniciado,amenosqueexistaumpadrãodedesignvisualjáestabelecido.

Inicialmenteéaexploraçãodediversosestilos,queincluemcores,tipografias,contrastes,formaseestadosqueelementosdainterfacepodemter.Essetrabalhoaindanãolevaemconsideraçãoodesigndeinteraçãoqueestásendofeito.

Depoisdeescolhidoumoudoisestilosvisuais,deve-seaplicá-losnastelaschavesdaaplicação,paradefiniraquelequemelhoratendeaodesigndeinteração.Nessafase,odesigndeinteraçãodessastelasprecisaestarmaiselaborado,comdetalhessuficientespararefletirmelhorodesignvisual,porisso,osesforçosdeinteraçãoevisualprecisamestarsemprealinhados.Comumdesignmaisconcreto,émelhorpara fazer a avaliação das possibilidades da solução proposta e também de obter feedback dosenvolvidosnoprojeto.

Wireframe é um dos mais importantes documentos que o designer de interação produz quandotrabalhanodesenvolvimentodeumprodutonoplanodeesqueleto.

Éumavisãodetalhadadeumapartedoproduto, incluindo todosos componentesdeuma tela ecomoelesseencaixamjuntos.

Wireframes tambémsãoumaótimaferramentaparasecomunicarcomváriosníveisdeaudiência.Serve para mostrar aos clientes como o design atende aos objetivos do negócio, para que osdesenvolvedoresvejamcomooprodutofuncionaesecomporta,eassimsaberemoqueelesprecisamcodificareparaqueodesignervisualsaibaquaiselementosvisuaiseleprecisadesenhar.

Wireframesdevemesboçaraformadoproduto,moldandooconteúdo,asfuncionalidadeseosmeiosdeacessarounavegarentreeles.

Conteúdo é um termo genérico que inclui textos, imagens, ícones, vídeos, gráficos, entre outros.Dependendo de quão detalhado o wireframe seja, o conteúdo pode ser representado tanto comoquadrados com um "X" através deles (chamado ::placeholders::) com uma indicação do que elesignifica,comocomumarepresentaçãomaisreal.

Asfuncionalidadesconsistemdoscontrolesnecessáriosparaexecutarumatarefabemcomooqueaaplicação apresenta em resposta ao uso desses controles: são botões, rótulos, caixas de texto,

7.2REFINANDOODESIGN

Wireframes

Wireframe

7.2REFINANDOODESIGN 75

checkboxes,radiobuttons,listboxes,sliders,mensagensdeerros,links,etc.

Todos esses componentes da interface precisam estar documentados nowireframemostrando suadisposição geral e importância. E tudo que não estiver óbvio no wireframe, deve ter uma anotaçãocorrespondente.

Figura7.3:ExemplodeWireframe

À medida que o wireframe vai se tornando mais estável, quando a possibilidade de mudançasdiminui,comece-oadetalharaindamais.Mostrenoprópriowireframecomodeveserocomportamentode cada funcionalidade e coloque conteúdos reais. Várias ferramentas de elaboração de wireframespermitemquevocêdesenvolvaumnívelexcelentedefidelidadevisualefuncional, inclusiveservindocomoprotótipodasuaaplicação.Muitasvezesoprópriowireframeéusadoemtestesdeusabilidadeoucomoespecificaçãoparaaequipedeimplementação.

Háváriasferramentasparaessepropósitonomercado:

Axure-www.axure.com(Win/Mac)JustinMind-www.justinmind.com(Win/Mac)OmniGraffle-www.omnigroup.com(Mac)SmartDrawn-www.smartdraw.com(Win)

FerramentasdeElaboraçãodeWireframes

76 7.2REFINANDOODESIGN

iRise-www.irise.com(Win)Balsamiq-www.balsamiq.com(Win/Maceonline)Gliffy-www.gliffy.com(online)

Uma ferramenta que busca juntar a informalidade e rapidez do rabiscoframe com as ideias econceitosdowireframeéachamada8steps,oucrazyeights.EssaferramentafoicriadapeloGoogleeéumcomponenteimportantenametodologiaDesignSprintMethod.

A ideia é gerar novas ideias. As partes interessadas no projeto, seja desenvolvedor, gerente oumesmo o próprio cliente, buscam soluções de forma rápida desenhando-as em um papel em poucosminutos.Omotivopeloqualdeveserfeitorapidamenteéquequandotemospoucotempopararabiscar,focamosmaisemideias,enãoemdetalhes.

Cada8 steps é uma folha, dividida em oito partes iguais, e cada uma dessas partes é uma teladiferentedoaplicativo.Sendosempre focadoemresolverumahistóriaporvez, essa ferramentadevemostrarofluxodenavegaçãodousuáriopelastelasdoaplicativo.Aparteinteressantedorabiscoframeéimportadaaqui,poisnãoénecessárionenhumaltograudehabilidadeartísticapararabiscarumaideiaemumpapel.

É interessante tambémo timeacordarascoresqueserãoutilizadaspor todos,comoporexemplo,utilizaracorpretaparaodesenhoemsi.

Desenvolverumwireframecommenospontosdefalhasdeformaágil.

Obs.AtécnicaquevamosutilizarfoicriadopeloGoogle.

1. Umahistóriacriadaemgamestorminganterior;2. FolhaA3;3. Minímode4coresdecanetaporaluno;4. FolhasA4pararascunho;5. 3bolinhas(votospositivos)verdesporintegrantedotime;6. 1bolinha(votonegativo)vermelhaporintegrantedotime.

7.38STEPS

7.4GAMESTORMING-CRIANDORABISCOFRAMEEWIREFRAMEEMTIME

Objetivo

Ambiente

7.38STEPS 77

Duraçãode80minutos;Cadaintegrantedotimedevefazerum8stepsmesmosemhabilidadesartísticas.

1. Timeescolheumhistóriaparasolucionarasinterações;2. DivideafolhaA3em8partesiguais,cadapartedaA3vaiserumtelaouinteraçãoqueousuário

temquerealizarcomafinalidadederesolverahistóriaescolhidapelotime.3. Otimeprecisadefiniroquecadacordecanetavaisignificar,porexemplo:Preta-desenho;Azul-

Mouse;Verde-Touch;Vermelha-Teclado.4. Comahistóriaeascoresdefinidasbastapartirparasoluçãocomtelaseinterações,cadaintegrante

comsuafolhaA3semcolar;5. Colartodasassoluçõesnaparede;6. Cadaintegranteapresentasuasoluçãoparaorestantedogrupo;7. Depois cada integrante vota de forma livre utilizando primeiro votos positivos depois o negativo

(semdiscussõesnesseparte);8. Com os votos finalizados o time se junta a frente dos desenhos e discutem sobre o que querem

construir;9. Porfim,otimesejuntaparacriarumversãofinaldasoluçãodahistória.



Regras

Passoapasso


78 7.4GAMESTORMING-CRIANDORABISCOFRAMEEWIREFRAMEEMTIME


CAPÍTULO8

"O mundo já está cheio de feridas e infortúnios mesmo sem guerras para multiplicá-los" -- J.R.R.Tolkien

Os princípios e padrões de design de interação são aplicados durante o processo de desenho dainterface, ajudando os designers a traduzir os requisitos definidos para o produto em estruturas ecomportamentosnainterface.

Osprincípiosdedesigndeinteraçãosãoguidelinesouregras,tipicamentebaseadasemumconjuntodevaloresecrençasqueosdesignerstêm,bemcomonassuaexperiênciaemtentarcorresponderaessesvalores;queendereçamquestõesdecomportamento,formaeconteúdodeumainterface.

Jáospadrõessãoconsideradossoluçõesrecorrentesparaproblemascomuns,soluçõesestasquesedestacaramdepráticascomunsejábemtestadas.Padrõesdedesigndeinteraçãonãosósepreocupamcomaestruturaeorganizaçãodoselementosdainterface,mastambémcomocomportamentodinâmicoemudançasnesseselementosemrespostaàsaçõesdousuário.

Oesforçodeformalizarosconhecimentossobredesigndeinteraçãoemelhorespráticaspermitem:

Reduzirotempoeesforçodedesignemnovosprojetos;Melhoraraqualidadedassoluçõesdedesign;Facilitaracomunicaçãoentredesignerseprogramadores.

Umgrupodeprincípiosbastanteconhecido,devidoapopularidadedequemosdifundiu,sãoAs10HeurísticasdeNielsen.Sãoeles:

1-Visibilidadedoestadodosistema2-Correspondênciaentreosistemaeomundoreal3-Liberdadeecontroledousuário4-Consistênciaepadrões5-Prevençãodeerros(designdefensivo)6-Reconhecimentoemvezdememorização

PADRÕESEPRINCÍPIOSDODESIGNDEINTERAÇÃO

8.1ASDEZHEURÍSTICASDENIELSEN

8PADRÕESEPRINCÍPIOSDODESIGNDEINTERAÇÃO 79

7-Flexibilidadeeeficiênciadeuso8-Estéticaedesignminimalista9-Ajudarosusuáriosareconhecerem,diagnosticaremerecuperarem-sedeerros10-Ajudaedocumentação.

Vejamoscadaumdeles:

Éresponsabilidadedosistemainformaroqueestáacontecendoemrealtimeprousuário.

Quandoestamosassistindo/ouvindoumaplaylistdoYoutube,do ladodireito ficabemclaro:qualvídeoestamosassistindo;qualépróximo;quaisassistimosounão.

Figura8.1:Exemplodevisibiidadedostatusdosistema

Emrelaçãoaomundorealpodemosconsiderar:sons,visualeotomdeescritaqueusuárioutilizapara se comunicar. Implementamos bastante esta heurística quando utilizamos uma seta, ícones eutilizamosacorvermelhaparaelementosnegativos.

UmsoftwarequeusaessaheurísticaéoPhotoshopemsuabarradeferramentas.

1.Visibilidadedostatusdosistema

2.Correspondênciaentreosistemaeomundoreal

80 8.1ASDEZHEURÍSTICASDENIELSEN

Figura8.2:Exemplodecorrespondênciaentreosistemaeomundoreal

Essafoiaheurísticaquememotivouafazeressepost.Nestaheurística,apreocupaçãoédepassarpro usuário a liberdade de ele fazer o que quiser dentro do sistema comexceçãodas regras que vãocontraonegócioouinterferememoutrafuncionalidade.

Porexemploquandocriamosumtweetébacanapoderdeletá-loseestivermosafim.Masnãodápra

3.Liberdadedecontrolefácilprousuário

8.1ASDEZHEURÍSTICASDENIELSEN 81

editarumtweet.Imaginasevocêdáumretweetedepoisousuárioquefezotweetmudaotextopraumacoisaquevocênãoachalegal.Sacanagemné!

Figura8.3:ExemplodeLiberdadeecontroledousuário

Éimportantemanteraconsistênciaepadrãovisual(texto,cor,desenhodoelemento,someetc).

Porexemplo,nofórumGUJ(GrupodeusuárioJava),quandovamosresponderumpostobotãoparaenviararespostasempreédamesmacor,tamanhoetexto.Oelementoparacancelararespostasempretemseuspadrões:

Figura8.4:Exemploconsistênciaepadrões

Nãoéumaboaideiadeixarseuusuárioerrarsemexplicarpreviamenteomotivodoerro.Melhordo

4.Consistênciaepadrões

5.Prevençãodeerros


queisso,tentecriaruminterfacequepermiteousuárionãoerrar.

AbuscadoGooglefazissodeumaformamuitointeligente.Nomomentoquecomeçamosescrevernossabuscaelejáteentregaalgumassugestões,mesmoseagenteescreverabuscacomumaortografiaerradaelerealizaabuscaeperguntaseestamosprocurandooutrainformaçãocomaortografiacorreta.

RealizandoumabuscanoGoogle:

Figura8.5:Exemplodeprevençãodeerros

Resultadodabuscacomerrodeortográfica:

Figura8.6:Exemplodeprevençãodeerros

Ousuárionãotemobrigaçãodedecorarqualfoiocaminhoqueelefezprachegaratéapágina.

Porexemplo,quandovocêentraemumprodutodositedaLocawebédisponibilizadoocaminhoquevocêfezprachegaratéele.Nóschamamosissodebreadcrumb.

6.Reconhecimentoemvezdememorização


Figura8.7:Exemplodereconhecimentoemvezdememorização

É importante deixar uma experiência boa com seu sistemadesdeousuáriomais leigo até omaisavançado.

Porexemplo,dentrodoTrello(kanbandetarefasonlinecombaseemcolunasfree)quandovocêestácom o foco em um cartão você pode utilizar o mouse para navegar em outros cartões, as teclasdirecionais(setaspracimaeprabaixo)ouasletrasj(parabaixo)ek(paracima).TeclasquesãoporsuavezutilizadasnoVIM,editordetextofamosoentreosdesenvolvedores.

Figura8.8:Exemplodeflexibilidadeeeficiênciadeuso

Por favor não encha linguiça. Todo informação extra que você deixar pro seu usuário pode naverdadeadicionarmaisumadúvida,ouseja,deixeoseu layouteoconteúdoomaissimplesediretopossível.

UmappquegostamuitodessaheurísticaéodaNubank.Prageraroboletodepagamentodasuafaturasósãonecessáriasduastelaseelassãobemsimpleserealmenteobjetivas.

7.Flexibilidadeeeficiênciadeuso

8.Estéticaedesignminimalista


Figura8.10:Exemploestéticaedesignminimalista

Figura8.9:Exemploestéticaedesignminimalista

Asmensagensdeerrostemqueserclarasepróximasdoconteúdoouaçãoquecausouoerro.

NoformuláriodecadastrodoSpotifycasovocênãopreenchaosdadosnecessárioseledeixabemclaroquaiscamposestãofaltando,comummensagemclaraeobjetiva.

9.Ajudeosusuáriosareconhecerem,diagnosticaremerecuperarem-sedeerros


Figura8.11:Exemploajudeosusuáriosareconhecerem,diagnosticaremerecuperarem-sedeerros

Éumaboanãoprecisardessaheurística. Implementardocumentaçãoe sistemadeajudasempreéchato e muitos usuários têm o costume de ignorar ambosmas, se for realmente necessário, deixe adocumentaçãopróximadousuárioedoelementoouaçãoquetenhanecessidadedeumaexplicaçãomaisdetalhada.

Por exemplo,no formuláriodepagamentodoWalmart temumcampoprapreencherocódigodesegurança do cartão.Comonão é algomuito óbvio, temuma imagempróxima ao campomostrandoondeficaocódigodesegurançadocartão.Essaéumaboaformadefazerumadocumentaçãofeliz.

10.Ajudaedocumentação


Figura8.12:Exemploajudaedocumentação




AlémdasdezheurísticasdeNielsen,existemoutrosprincipiosparaimplementarinterfaceseficazes.

Sequências de ações devem ser organizadas em grupos com início, meio e fim. O feedbackinformativoaocompletarumgrupodeaçõesdáaousuáriosatisfaçãoderealização,sensodedistinçãoeumaindicaçãoqueocaminhoéclaroparaseprepararparaopróximoconjuntodeações.


8.2 OUTROS PRINCÍPIOS PARA IMPLEMENTAR INTERFACESEFICAZES

Apresenteasetapasdoprocesso

8.2OUTROSPRINCÍPIOSPARAIMPLEMENTARINTERFACESEFICAZES 87


Umaboanavegaçãoajudaousuárioasaberondeeleestáeparaondequerir.Ossegredosdeumanavegaçãoeficienteincluem:

Organização - separa as areasmais emenos importantes, reflete como as pessoas pensam e asprioridadesdonegócio;Dentrodo"triângulodeouro";Compacta,paradeixarespaçoparaoconteúdo;Rótulos(labels)curtos;Mostravisualmente,comclareza,ondeousuárioestá.

Figura8.13:Exemplonavegaçãoclara

Oselementosquetornamotítulodaspáginaseficazsão:

(Quase)sempreestãonomesmolugar;Estádestacadovisulamente;Écurto;Onomecoincidecomoqueestánanavegação;Éconsistentenacapitalizaçãodasletras.

Façaumanavegaçãoclaraeeficiente

Títulodaspáginasreforçaanavegaçãoeorientaousuário

88 8.2OUTROSPRINCÍPIOSPARAIMPLEMENTARINTERFACESEFICAZES

Normalmente,usebotõesparatarefas(ações),principalmenteasprimárias,elinksparanavegação.

Dêàstarefasprimáriaslugardedestaqueefocovisual.Tentelimitaraumaouduastarefasprimáriasporpágina.

Aaquinãoestamosfalandosódetempodecarregamento!Eladeveserfácildeescaneareveroquefazer,possibilitaromínimodecliquesparairdeumlugaraoutroouparacompletarumatarefa.

Itensrelacionadosdevemsemanterpróximos.

Inovesóondeháalgoúnico.

Odesignvisualdeveajudarodeinteraçãoaatenderosrequisitosdoproduto.Nuncaodesignvisualpodeestragarumtrabalhodeinteraçãobemfeito.

InterfacesdoUsuárioincríveisdevemserquaseinvisíveis.

Padrões de design de interação podem ser hierarquicamente organizados a partir do nível daaplicaçãoeirdescendoatéoníveldecomponentesindividuaisdainterface.Podemserdivididosemtrêstipos:

Postural:podemseraplicadosnonívelconceitualeajudaadeterminaraposturageraldoproduto.Doisexemplosmaiscomunséopadrãotransitórioeosoberano.Estrutural: resolveproblemasrelacionadosadisposiçãodoselementosdedadosefuncionaisnatela.Consistedevisões,painéiseagrupamentos.Comportamental: usado em uma grande variedade de problemas relacionados a interaçõesespecíficascomoselementosfuncionaisededados.

BotõeseLinks

Separesuastarefasprimárias,secundáriaseterciárias

Deixesuainterfacerápida

Mantenhaproximidade

Seletivamentecopieinteraçõescomunsejácomprovadas

Designvisualdevetertotalconexãocomodeinteração

Menosémais

8.3PADRÕESDEDESIGNDEINTERAÇÃO

8.3PADRÕESDEDESIGNDEINTERAÇÃO 89

Umaaplicaçãocomposturatransitória significaqueumapessoaausaporumbreveperíododetempo.A aplicação é chamada quando necessária, aparece, o usuário realiza seu trabalho nela e emseguida a fecha, continuando suas atividade normais, provavelmente em uma aplicação com umaposturasoberana.

Porsuacaracterísticatemporária,ousuárionãotemachancedesetornarmuitofamiliarcomela.Logo,ainterfacedeumaaplicaçãodessetipodevesersimples,claraeirdiretoaoponto;deveseróbvia,apresentar seus elementos claramente sem dar possibilidades a confusão ou erros. Normalmente élimitadaaumaúnicajanelaevisão.

Porexemplo,abriroWindowsExplorerparalocalizareabrirumarquivoenquantoeditaumoutrocom oWord é um típico cenário transitório. A calculadora, Yahoo!Widgets e o iTunes são outrosexemplosdeaplicaçõescomaposturatransitória.

Já programas que dominam a atenção do usuário por um longo período de tempo possui umaposturasoberana.Oferecemumagrandequantidadede funções relacionadaseosusuários tendemamantê-larodandocontinuamente,ocupandotodaatela.

Como os usuários dedicam bastante tempo usando aplicações desse tipo, eles normalmente têmgrandeinteresseemcrescernacurvadeaprendizadoetornar-selogousuáriosintermediários.Dopontode vista de design, isso significa que a aplicação deve ser otimizada para o uso de intermediáriospermanentesenãotercomoobjetivoprimárioosiniciantes(ouexperts).

Aplicações soberanasdevemserotimizadasparausoem tela-cheiaoumaximizadae, comoserãoutilizadasporlongosperíodosdetempo,deve-setomarcuidadocomaapresentaçãovisual.Umdesignexcessivo,comousoexageradodecoresetexturas,podemseratrativosnoinício,mascomopassardotempotorna-secansativoparaquemusamuitoainterface.Namedidadopossível,mantenhaumestiloconservador.Pixelssãopreciosos.

Bonsexemplosdesse tipodeaplicaçõessãoprocessadoresde textos,planilhas,clientesdee-mail,entreoutros.

Ospadrõesestruturaissãoprovavelmenteosmenosdocumentados.UmexemplobemconhecidodessepadrãoéaestruturamacrodoMicrosoftOutlook,comseupaineldenavegaçãonaesquerda,umpainel de visão geral na direita, em cima, e uma área de detalhes na direita inferior. Esse padrão évastamente utilizado, onde o painel vertical possibilita a navegação e direciona o conteúdo que serámostradonopaineldevisãogeral.Aoselecionarumobjetonestepainel,informaçõessãomostradasnopainelinferior.

Postural

Estrutural

90 8.3PADRÕESDEDESIGNDEINTERAÇÃO

Figura8.14:Exemploestrutural

Padrõesdeusonormalmentesãoidentificadosatravésdaobservaçãodecomoosusuáriosusamoselementosdeuma interfaceeemquãoútilesseselementos,eseuscomportamentos,estãosendoparaque o usuário complete suas tarefas mais facilmente e mais eficientemente. Após descobrir essespadrõesdeuso,criamosospadrõesdeinteraçõesparasuportaressespadrõesdeusocomuns.

Por exemplo, softwares de CRM normalmente vêm com uma opção "novo" para criar um novocontato.Umavezclicadoem"novo"apareceoformuláriocomasopções"salvar"e"cancelar".

Figura8.15:Exemplodepadrõesdeinterações

Observandocomoosusuáriosusavamessetipodeferramenta,descobriu-sequeopadrãodeusoera,na maioria das vezes, após clicar em "salvar", clicar em "novo" para cadastrar mais um contato.Percebendoessepadrãodeuso,apareceuumterceirobotãonoformulário,o"salvarenovo":

Figura8.16:Exemplodepadrõesdeinterações

Apartirdaí,essecomportamentopôdesermapeadoemumnovopadrãodedesigndeinteração.

Aquidescreveremosalgunspadrõesconhecidosdedesigndeinteração,divididosemsetecategoriasprincipaisdepadrõesdeuso:

Exploratório

8.4PADRÕESDEINTERAÇÃOCOMPORTAMENTAIS

8.4PADRÕESDEINTERAÇÃOCOMPORTAMENTAIS 91

NavegaçãoemgrandesbasesdedadosBuscaavançadaEntradaealteraçãodedadosInformaçãocentralizadaGuiasComunidade

Opadrãoexploratórioéaquelequepermiteaousuárioexploraraaplicação.Ospadrõesdeinteraçãoassociadosaopadrãodeusoexploratóriocostumamterasseguintescaracterísticas:

Suportamnavegaçãoseguraeprevisível;Provêeminformaçõesparaqueousuárioseencontre;Ajudamaunificarinformaçãoemumaúnicavisãoquedeoutraformairiarequerermuitoscliquesparaseracessada;Colocamdadoseaçõesrelevantespróximosdeumainformaçãoprincipal.

Algumasvezes,emvezdeummodoexploratório,podeser interessantecolocarousuárioemummodolineardeação.Omodolinear,porexemplo,umwizard,podesermuitoútilemsituaçõesondeousuárionãoéumespecialista,ouquandoqueremosdarumaopçãosimplificadadeação.

Paraopadrãodeusoexploratório,precisamospensarempermitirerroseemmostrardadoseações.

Itensdemenuinteligentes:Sãoitensquedizemexatamenteoqueaaplicaçãovaifazer,incluindoinformaçãosobrequalobjetovaisofreraação,deixandoainterfaceauto-explicativa.Nessepadrãodeinteração, sempre que o usuáriomuda o objeto selecionado (em uso), os itens demenu relativos aoobjetosãotambémmudados.

MenudeumaaplicaçãodeCalendário.Ositensdemenudeixaclaroqualaçãoserárealizadaaoclicarnele.

Exploratório

Permitindoerros

92 8.4PADRÕESDEINTERAÇÃOCOMPORTAMENTAIS

Figura8.17:Exemplopermitringoerros

Undomulti-nível: Permite reverter facilmente uma série de ações feitas pelo usuário.Cada açãoficanotopodeumalistaàmedidaqueéexecutadaecadaundoreverteaaçãoqueestánotopo.

ÉPossívelselecionarumaoumaisaçõesparadesfazê-las.

Figura8.18:Exemplopermitindoerros

Sandbox:Permiteaousuáriosalvardadosparaquepossaserutilizadonofuturo.Assim,éfornecido


aousuárioumlugarparaarmazenaraquiloquedevepersistirduranteouso.

Aquiépossíveladicionarumprodutoa"listadedesejos"parapoderdecidiracompranofuturo.

Figura8.19:Exemplopermitindoerros

Inspeção: o usuário precisa frequentemente vermais informações sobre umdeterminado itemnamesmatelaemqueestávendooitem.Nessecaso,usa-seumaáreaparaexpordetalhes,normalmentepróximaàbasedapágina.Essetipodeelementotipicamenteusaorecursodeexpandir/recolher.

Na parte de baixo, são mostradas informações mais detalhadas (documentos, notas, contatos,produtos,cotas)sobreoitemContratomostradoacima.

Mostrandodados


Figura8.20:Exemplomostrandodados

Tabs dentro de páginas: Permite ver o conteúdo detalhado sobre o conteúdo principal que estásendomostrado.

AstabsDescriçãoeDadosTécnicosapresentamoconteúdodetalhadodoproduto.



Mouseovercomconteúdorico:Utilizadoquandoqueremosdaraousuárioapossibilidadedevermaisinformações,contextualizada,sobreumdeterminadoitem.Normalmenteainformaçãoapresentadacontemumconteúdomaisricoqueapenastexto,taiscomográficos,linksouações.

Aopassaromouseemumpontodomapa,maisinformaçõessãomostradasreferenteaesseponto.Alémdetextos,algumasaçõestambémsãodisponibilizadas.


Mostrandoações


Ações inline: O usuário precisa executar uma ação no item que está sendo mostrado. Coloquebotões,linkseoutrasaçõespróximosaositensrelacionadosàação.

Asaçõesquepodemserrealizadasnoitemsãomostradaspróximoaopróprioitem.

Figura8.23:Exemplomostrandoações

Essepadrãomostrasoluçõesparaquandoousuáriosedeparacomgrandesquantidadesdedadosemnossaaplicação.Deformageral,grandesconjuntosdedadossãonormalmentenavegadospormeiodehierarquias.Existemalgumasalternativas,umavezqueashierarquias:

Sãousadasemexcesso;Podemserdifíceisdenavegarporrazõesdeperformanceecomplexidade;Nosdãoatentaçãodemostrarosdadosdaformaqueelesestãoarmazenadosnobancodedadosenãodaformaqueousuárioentende;Com3ou4níveis,ahierarquiajásetornamuitodifícildenavegar.0

Acordeão: Quando a informação que se deseja mostrar não cabe em uma hierarquia, usa-se oacordeão(comoporexemplo,parágrafosdetexto).Noacordeão,aoclicaremumpainel,umaoutraáreaéreveladacomasinformaçõesquesequerapresentar.

Aoclicaremcadatítulo,expande-seumaáreacommaisinformações(textoououtroselementos),fazendoumefeitoigualaodasanfona.Paraesconderaárea,bastaclicarnovamentenotítulo.

Navegaçãoemgrandesbasesdedados


Figura8.24:Exemplonavegaçãoemgrandebasesdedados

Tree-table: Uma mistura de hierarquia com tabela, pois dessa forma se consegue mostrar maisinformações ao usuário para facilitar sua navegação. Coloque a hierarquia na primeira coluna e osatributosdoitemnasdemaiscolunas.Aslinhas-umitemporlinha-normalmentesãoclicáveis.

A colunaNome contém a árvore de hierarquia.Clicando no (+), os itens são expandidos e seusatributos(localização,descrição)sãomostradosnasdemaiscolunas.


Gaveta: Usado quando é necessário mostrar informações de um item da tabela que quebra aformatação dessa tabela. Utilize, nesse caso, linhas de tabela expansíveis que "abre" apresentando oconteúdo. A estrutura de grid deve ser diferente da usada na coluna da tabela, para evitar uma


visualizaçãoconfusa.

Alinhadatabelaseexpandeparapodermostraralgumconteúdorelacionadoaela,masbastanteextensoparacaberadequadamenteemumacoluna.


Filtrode coluna: Quando a tabela contémmuita informação e o usuário quer filtrar somente asinformaçõesrelevantesbaseadasemumdeterminadocritério.



Aoclicarnacoluna,abre-seummodalcomváriasopçõesdefiltroreferenteacolunaclicada.Pode-seselecionarumaoumaisitensparaqueatabelasejafiltradaporessasopções.



Quandofalamosdebusca,algunspontosmerecematenção:

Construir uma consulta de uma busca usando somente palavras-chave pode ser bem difícildependendodosdados;Buscasquenãoretornaminformaçõesúteispodemserfrustrantes.Osusuáriospodemnuncamaisvoltaraseusite,oupior,abarrotarseuscanaisdeatendimento;Mostrar atributos pode aumentar a probabilidade dos usuários chegarem ao conjunto deinformações que eles procuram (algumas vezes compensa a falta de uma rotulação de conteúdoeficiente);Normalmenteosusuáriosassumemqueabuscaébaseadaemlinguagemnatural;Forneçaexemplosdecomopesquisarpróximoàcaixadebusca.

Parainteraçõesdebuscaavançada,apresentamosos4padrõesabaixo:

Buscabaseadaematributos:Utilizadoquandosetemumnúmeromenordeatributos(de1a10)quepodemserusadosparaalcançaroresultadodebuscadesejado.Oscamposdevemserorganizadosnaformadeformuláriocasoaquantidadedeatributossejagrande.

Buscasutilizandoapenasumatributo,querestringeabuscaaumtipodeprodutoespecífico.

Figura8.29:Exemplobuscaavançada

Nestecaso,comaquantidademaiordeatributos,aorganizaçãodoscamposéumpontoimportantequedeveserbempensado.


Buscaavançada


Buscabaseadaemcontexto:Seonúmerodeatributosparaescolherémuitogrande-maisde20-abuscaporatributostorna-seineficiente.Umasoluçãoédiminuiroescopodabuscaforçandoousuárioaescolherantesumcontextoondedesejapesquisaresódepoisapresentarosatributosespecíficos.

Para fazerabuscaéprecisoprimeiro escolhero contextodesejado.Neste caso, serápara fotos.Apenasdepoisdeescolherocontextoéquesãomostradososcamposdeatributosespecíficosparaele.


Refinamentodoresultadousandoatributos:Quandoabuscaretornaumagrandequantidadedeinformação, o usuário pode selecionar alguns atributos para filtrar esse resultado. O ideal é utilizarcontrolesapropriadosaoconteúdoparaofiltrodeatributos.

Filtrodeatributospararefinamentodoresultado.Nesteexemplos,podefiltrarpormarcas,cidades,preços,etc.



Exibição do volume de conteúdo retornado: Usado para controlar o volume dos dados sendoapresentados. Pode ser através de links que ajustamo layout da página paramostrarmais oumenosdetalhes ou outros controles que ajustam o volume em si do conteúdo, apresentandomais oumenosinformações.



Naprimeiraimagem,aformadeexibiçãoéemlistaenasegunda,omesmoresultadoemtabela


Sãopadrõesutilizadosquandoousuárioprecisainformardados.

Autocompletar:Utilizadoquandoousuárioprecisaentrarumainformaçãoemumcampotextoepodenãosaberexatamenteoqueinformaroutemgrandeschancesdedigitarincorretamente.

Entradaealteraçãodedados


Nesseexemplo,aodigitar"VENE"umalistaaparececomsugestõesquecompletamoqueousuárioescreveunocampo.

Figura8.35:Exemploentradaealteraçãodedados

Apresentação visual de seleção: Usado quando é difícil explicar apenas em texto as opçõesdisponíveisparaseleção.Nessescasos,ousodeimagemmaistextoébemindicado.

Além do label indicando o tipo de alinhamento, também tem uma imagem para cada opção queapresentavisualmentecomoafiguraseráposicionadacomrelaçãoaotexto.


Figura8.36:Exemploentradaealteraçãodedados{w=70%

Save for later: Esse padrão normalmente é usado quando uma tarefa é muito longa para sercompletadadeumavezsó,ouquandoexisteumfluxodeaçõesquepossibilite início/parada/reinício.Nessassituações,dêaousuárioaopçãodesalvarparacontinuardepois.

Umbotãoédisponibilizadoparaqueousuáriopossasalvarumdocumento(artigo,notícia,página)edepoisvoltaraeleparacontinuarcomofluxodeedição(passarpararevisão,publicar,etc).


Figura8.37:Exemploentradaealteraçãodedados

Nesses padrões, serão mostradas algumasmaneiras comuns de apresentação de informações queprecisamsercompreendidaspelousuário(ouaomenosfazeremsentido)quandoele"passaoolho"porelas.

Sãotrêsprincipais:cabeçalhos,visualizaçõesinterativasepainéis(dashboards).

Cabeçalho:Usadoquandoousuárioprecisadeumcontextomaisabrangentequeapenasumtítulodepáginaparaentenderainformaçãoapresentada.Nessescasos,otopodapáginamostraumaáreacomdados relacionadosaoconteúdo.Ocabeçalho tambémpodefornecerações relevantesparaapáginaeque, quando utilizadas, interferem no conteúdo sendo apresentado. É interessante disponibilizar orecurso de expandir/ocultar a área do cabeçalho para que o usuário utilize o espaço da forma maisconveniente.

Ocabeçalhomostraalgunsdadosqueidentificamoprojetoqueestásendomanipuladonapáginaetambém possibilita a navegação por projetos existentes. Ao navegar de um projeto ao outro,automaticamenteoconteúdodapáginaéatualizado.Aquiousuáriopodeesconder(hide)ocabeçalho.

Informaçãocentralizada


Figura8.38:ExemploInformaçãocentralizada

Visualização interativa: Esse padrão é usado quando a informação fica muito confusa seapresentadaapenascomtextos.Osdadosmostradosgraficamenteecomopçõesinterativasajudamnacompreensãodoqueestásendovisualizado.



Apresentação de informações usando gráficos. Clicando em um ano (primeira imagem) sãomostrados os dados mês a mês. E em cada mês, também é possível interagir para obter maisinformaçõessobreoassunto(segundaimagem).



Exemplocommapas.Naprimeiraimagemvocêvisualizanomapaarotadeumpontoaoutro,feitade transporte público. É possível interagir, arrastando a rota para alterá-la ou escolhendo algumasações diretamente nomapa. Na segunda imagem, a rota feita com bicicleta. Em ambos os casos, otrajetoéapresentadotextualmenteetambémrepresentadovisualmentenomapa.



Painel:Essetipodepadrãoresolveoproblemadeterquefornecervisõesdistintasdeváriostiposdeinformação.Agrupe essas informações em uma única tela quemostre os dados-chave de uma formavisual apropriada, comose fosseuma fotografia.Escolher a apresentaçãográficamais adequadaparacadatipodeinformação,aliás,éumpontocrucialparaaeficiênciadopainel.Algunspontosdeatençãoparanãoerrarnousodessepadrão:

Painéisnormalmentepossuemvisualizaçõesinterativasdedados;Muitos erram ao mostrar dados que não são úteis ao usuário ou colocam gráficos e outroselementossemumcontextoquedêsentidoaeles;Ousodemecanismosinapropriadosprejudicaacomunicaçãodoconteúdo;Elementos3-Dfrequentementesãoproblemáticos.

Alguns exemplos de painéis, utilizando gráficos de vários tipos, mapas (primeira e segundaimagens).Emalgumassituações(terceiraimagem),ousodetabelasaindaéomaisindicado.



Éousodemensagens,instruçõeseajudacontextualparaguiarousuárioduranteaexecuçãodeumatarefa.

TrêspadrõesdeinteraçãocomumenteusadosparaGuiassão:

Sistema de mensagens: É usado quando o usuário precisa ser informado sobre as possíveisconsequências de uma ação que ele vai tomar. Cada ação deve ter explicações claras, os próximospassosprecisamestarvisíveis,casoexistam,edevefornecerfácilacessoafontesdedadosrelevantesparaajudarousuárionatomadadedecisão.

Guias



Ajudacontextual:Essepadrãoéutilizadoquandoousuárioprecisadainformaçãoparaajudá-loacompletarumatarefa,sejaparaentenderdeterminadasterminologiasqueatarefaapresentaouomotivodeumdadoestásendosolicitadooucomodevepreenchê-lo,etc.Apresenteessaajudaexatamenteondeousuárioprecisarádela,jácontextualizada,maisquedaracessoalinksgenéricosdeajuda.

Nesseexemplo,olinklevaparamaisinformaçõesqueajudaráousuárioadecidirqualcorescolherparaoanelusadonaembalagemdamedicaçãoqueeleestápedindo.



Aopassaromousepela"?",abreumboxcomexplicaçãosobreoquesignificaequalafinalidadedaquelainformaçãoqueestásendosolicitadaaousuário.



Guideme: Padrão utilizado quando o usuário já tem experiência no que está fazendo,mas podefaltarconhecimentoparacompletaralgumapartedessatarefamaior.Nessescasos,useumaáreadatela(outelaseparada)queguiaráousuárioatravésdequestões,ouinformaçõesdetalhadas,paradeterminar"como" ou "se" eles devem tomar determinada ação ou escolher determinada opção, sem perder ocontextodatarefamaior.

Noexemploacima,afuncionalidadedebuscaemsipodeserfacilmenteusadapelousuário,masfoicolocadoumguiacomquestõesqueoajudaa limitaro resultadodabuscaaosmousesquemais seadequamàssuasnecessidades.


Essespadrõesestãorelacionadosaumtemabememvogaultimamente:padrõesdeusoeinteraçãoparamídiassociais,ouseja,padrõesparafuncionalidadespresentesemqualquerferramentaonlinequepermitaainteraçãosocial.

Votação(vote topromote):Usadoquandoexisteanecessidadedepromover(ourebaixar)algumainformaçãoouitememumacomunidade.Forneçaumbotão,oualgumaoutraformadecalltoaction,

Comunidade


próximo ao conteúdo que se quer promover. É interessante fornecer detalhes contextuais, como aquantidadedevotosjárecebidos,quandoforpossível.

Figura8.50:Exemplovotação-1

Figura8.51:Exemplovotação-2

Um exemplo que permite tanto promover como rebaixar um item (imagem 1). Em alguns casosprecisaserinscritoparavotar(imagem2).

Avaliação(rating):Quandoousuárioprecisadarsuaopiniãooudarsuanotasobreumdeterminadoconteúdo, mostre itens clicáveis (um bastante utilizado são estrelinhas) com uma escala clara deavaliaçãoeoestadodessemecanismodeavaliaçãodeveiniciar"vazio".


Avaliaçãodeitensdeumalojavirtual.Umaáreacomasavaliaçõesjárealizadaseumaáreaquemostraoscomentários.

Figura8.52:Exemploavaliação

Acompanhamento (follow):Utilizadoquandoousuárioprecisa acompanhar umaquestãoouumtópico dentro de uma comunidade. Use algum tipo de call to action próximo ao item que pode seracompanhado,juntocominformaçõesquedeixemclarooqueseráacompanhado.

Clicando no botão, é exibido formas de acompanhamento com informações contextualizadas quedeixamclarooqueecomoestásendoacompanhado.


Figura8.53:Exemploacompanhamento

Status de classificação (ranking): Quando existe a necessidade de comunicar dentro dacomunidadeostatus/posiçãodeumusuário,forneçaessestatuspróximoàinformaçãosobreousuário.

Noexemploacima,alémdaposiçãonoranking,émostradotambéminformaçõessobreaatividadedousuário

Figura8.54:Exemplostatusdeclassificação




EntendernapráticasobreosprincípiosdeNielsen.

1. Duascoresdepost-its;2. Caneta.


Metadedeum timevai se tornar consultores deusabilidade e ir emoutro time e passar pelos 10heurísticasdeNielsen,depoisaoutrametadedotimefazomesmotrabalho.Enquantoestiverpassandopelas heurísticas de Nielsen os consultores escolhem um cor de post-it para anotar os problemasencontradoseasegundacorcomosolução.

A criação de um protótipo é um passo importante antes que o produto seja lançado nomercado.Alémdeservircomoumaferramentadecomunicação-assimcomooswireframes-protótipostambémtêmopropósitodeexploraçãoevalidação.


8.5GAMESTORMING-COLOCANDOEMPRÁTICAOSHEURÍSTICASDENIELSEN

Objetivo

Ambiente

Regras

Passoapasso

8.6PROTÓTIPOS

8.5GAMESTORMING-COLOCANDOEMPRÁTICAOSHEURÍSTICASDENIELSEN 121


PROTÓTIPOéummodelodaaplicaçãoquedevepermitirqueaspessoasomanipulemdealgumaformaenãodeveserumsistemadesenvolvidocompletamente.

Comoexploração,porexemplo,interagircomoprotótipodeumaidéiaajudaadescobrirquestõesestruturaisdoproduto,comocaracterísticasqueeledevetereestãofaltando.Ouentão,fazerprotótipossimplesdeváriasconceitospodeajudaradecidirqualomelhorparaseguiradiante.

Comovalidação, o uso de protótipos permite avaliar interações-chave antes de construir todo umdesign baseado nessas interações, e a diminuir também o risco de erros de usabilidade.Além disso,prototiparetestarasopçõespossíveisevitaosargumentosbaseadosemopiniões.

Ouseja,protótipossãousadosparaexperimentareveraquiloquefunciona, tantoparaodesigner,quantoparaoclienteeusuário.Eoquantoantesissoforfeito,menosesforço(ecusto)énecessárioparacorrigirorumoeconduzirodesenvolvimentodoprodutoparaadireçãocorreta.

Avariávelmaisimportantenaconstruçãodoprotótipoésuafidelidade,quepodeserbaixaoualta.Eafidelidadeémultidimensional.Duasdimensõesessenciaissãoavisualeafuncional.Nãotemcomodizerqueumaououtrafidelidadeéacorreta,massimqueáemaisapropriada.Eparasaberqualéamaisapropriada,váriospontosprecisamserconsiderados,como:

Asquestõesqueoprotótipoprecisaresponder;Oníveldeinteratividadedodesign;Aculturadaempresa;Ametodologiadedesenvolvimentoqueaempresasegue;Comoosusuáriosreagemaumnívelbaixodefidelidade;Seexistempadrõesvisuaisjáestabelecidos;Etc.

Múltiplascombinaçõesdefidelidadesãopossíveisnacriaçãodeumprotótipo:

BaixaFidelidadeVisual(BFV)BaixaFidelidadeFuncional(BFF)AltaFidelidadeVisual(AFV)AltaFidelidadeFuncional(AFF)

Normalmente,AFVémaisapropriadaquandoqueremostestarseodesignvisualnãoprejudicaráodesigndeinteraçãofeitoouausabilidadedaaplicação;e/ouquandooprotótipoforusadoporpessoas(clientesouusuários)quenormalmenteficamconfusosaosedepararemcomwireframes,prejudicando

AFV-AltafidelidadeVisual

122 8.6PROTÓTIPOS

assimaqualidadedasrespostasquesequerobter.E,sejáexistepadrõesvisuaisbemestabelecidos,afacilidadeparaaplicá-losemumprotótipoestimulaousodeumdeAFV.

AFF é mais adequado quando é necessário saber se as interações-chave funcionam, se o designimplementaosrequisitoscomoosanalistasesperame/ouparaqueotimededesenvolvimentoentendacomclarezaquaisosfluxosdaaplicaçãoecomoelasecomporta.Eprincipalmenteseoprodutoforumaaplicaçãomais complexa, com riqueza de interações, oAFF émais apropriado.Também, domesmojeito que o AFV, é mais indicado o uso do AFF quando as pessoas ficam confusos vendo apenaswireframes.

Além das dimensões visual e funcional, uma dimensão também considerada é a de conteúdo.Protótipos com conteúdos ruins, que não fazem sentido no contexto da aplicação, normalmenteproduzemresultadosruins.Semprequepossível,utilizeumconteúdoplausível.

Easferramentasparadesenvolverprotótipossãobastantevariadas,indodepapel&caneta,passandopor ferramentas de elaboração de wireframes, até codificação com HTML, CSS, Javascript, etc. Aescolhadependedeváriosfatores,comocusto,habilidadedequemvaidesenvolver, fidelidadequesequer obter, entre outros. Além disso, não é necessário se limitar a uma única ferramenta: pode-secomeçarcompapel&canetaparaconcepçãoeexploração,validarcomumprotótipodealtafidelidadefuncionalnoAxureevalidarmaisumavez,quandoodesignestivermaiselaborado,comumprotótipofeitoemHTML/CSSeJavascript.

Desenvolver um protótipo de baixa fidelidade sem curva de aprendizado de uma ferramenta,tornandopossívelotrabalhoemumtimeheterogêneo.

1. Folhascoloridas;2. Post-its;3. Cola;4. Canetinhas;5. Tesoura;

AFF-Altafidelidadefuncional

Dimensãodeconteúdo

Ferramentas

8.7GAMESTORMING-PROTOTIPAGEMEMPAPEL

Objetivo

Ambiente

8.7GAMESTORMING-PROTOTIPAGEMEMPAPEL 123

6. Régua;7. Ecriativade.




Regras


124 8.7GAMESTORMING-PROTOTIPAGEMEMPAPEL


CAPÍTULO9

"Osdetalhesnãosãodetalhes.Elessãoodesign."--CharlesEames

Por se tratar de outro contexto de uso e outro público, pensar em usabilidade para dispositivosmóveispodeviraserumdesafioemequipesquedeixamparapensarnessatipodemídiaapenasnofinaldoprojeto/prazo.

Com o uso frequente desse tipo de mídia o grau de exigência de seus usuários com relação ainterfacecresceu tantoquecercade60%dessesusuários tendemaabandonarumapágina seelanãooferecerumaexperiênciamobileboa.

Pensaremmobilenãoémaisquestãodeterumdiferencial,éfazeroessencial.Éumaquestãoquedeveserpensadaedesenvolvidadesdeoiníciodoplanejamentodoprojeto.

Tentandoprever,matematicamente,otemponecessárioparaqueumcorposemovadeumpontoaoutroponto,PaulFittspublicouumafórmulaparaissoem1954,ondelevaemconsideraçãoalgunsitenscomoadistânciaentreessespontoseaáreadesuperfíciedopontofinal.EssecálculofoichamadodeLeideFitts.

Trazendoessaleiparaomeiodigital,pode-sertrocarapalavracorpopelapalavramouseoudedo,emanteroobjetivoparaqualfoicriada,essaúltimaporcontadoadventodomobile.Porexemplo,pode-sepreverotempoquelevariaparaqueumapessoaescolhaumaopçãoemumsubmenudepoisdeclicaremumdositensprincipaisdeummenu,ouotempoparaclicaremumbotãocalltoactiondepoisdelogaremumsistema.

USABILIDADEEMDISPOSITIVOSMÓVEIS

9.1LEIDEFITTS

9USABILIDADEEMDISPOSITIVOSMÓVEIS 125

Figura9.1:LeideFitts

Poressemotivoqueéumaboapráticamanteraáreaclicáveldeumcheckboxnocheckemsi,enotextoaoladotambém,justamenteparaqueoalvofiquemaisfácildeserclicado:

Figura9.2:LeideFitts

Outra questão que é necessária levar em consideração para aplicar a Lei de Fitts em interfacesdesenvolvidasparadispositivosmobileéaorientaçãododispositivoemsieemqualdelas(paisagemouretrato)queousuáriomaisinteragecomoaplicativo.

Aindapensandonessaquestão,háumpesquisaqueindicaquecercade50%dosusuáriosinteragemcoma teladocelularapenas comumamãoe15%comasduas,como issonãoéuma regra,omaisindicadoéarealizaçãodetestescomusuáriosemcadaprojetoespecíficoparachegaremnúmerosmaisprecisos.

126 9.1LEIDEFITTS

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php




Em um formulário de cadastro, muitas vezes o usuário precisa escolher alguma opção paracontinuar.Otempoparaescolherentreumadasopçõesaumentaproporcionalmentejuntocomonúmerodeopçõesapresentadas.Eéessarelaçãoentretempoeescolhas,quesetrataaLeideHick:

Otempoquelevaparafazerumadecisãoaumentacomonúmerodeopçõesapresentadas.

Quantomaisescolhassãoeliminadas,maisagradávelaexperiênciadousuáriopodeser,mostrandoaimportância da simplicidade. Ela se aplica tanto na web quanto no nosso cotidiano fora dela, comoquandovamosaalgumrestaurantecommuitasopçõesnocardápioedemoramosumtempoconsiderávelparaescolherumprato.

Umexemplovoltadoparaweb,emumatelaemquedeve-seescolheruminvestimentodesejado:

Comoosusuáriosrealmenteseguramseusdispositivosmobile


9.2LEIDEHICK

LeideHick

9.2LEIDEHICK 127

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php


Figura9.3:LeideHick-Exemplo

Otermofoiusadopelaprimeiranolivro"DesigningMobileInterfaces"(StevenHoober),erefere-seaáreamaisconfortávelparatoquecomumamãosó.Pesquisasindicamque49%dosusuáriosinteragemmais com o celular usando apenas uma mão, e usando o polegar para tocar na tela. Com isso, apreocupaçãodeondecolocarelementosdeinteraçãonatelaganhamaisumavariável,seéconfortáveldesealcançarounão.

9.3THUMBZONES

128 9.3THUMBZONES

Figura9.4:ThumbZone-iPhones

Uma das justificativas da Apple em não aumentar o tamanho da tela de seus aparelhos, erajustamenteporcontadisso.Denadaserveumelementodeinteração(umbotãoporexemplo),seeleestáfora de alcance. Ela acabou sucubindo a telasmaiores de 4" por conta de pressãomercadológica dosetor,osconsumidoresqueriamtelasmaiores.Asolução foi"descer"a interfacequandoousuáriodádoistoquesnobotãohome,deixando-amaisalcancávelparaospolegares.

PorcontadaThumbZonequeoGoogle,comseupadrãode interfaceMaterialDesign,colocouocalltoactionemsuasaplicaçõesnapartedebaixodainterface,paratirarumapossívelbarreiradeusodo usuário com a aplicação.Mesmo caso comoburguer icon naAlura, localizado na parte inferiordireitadatela.Emambasasempresasfoidescobertopormeiodepesquisasqueseususuáriosusavammaisocelularcomamãoesquerda,porissodothumbzoneespelhado.

9.3THUMBZONES 129

Figura9.5:CTA-Thumbzone

Nonossodiaadiarealizamostarefascomo:aumentarovolumedorádio,trocarocanaldaTV,abrirum torneira e fechar a porta. Todas essa pequenas tarefas é o que chamamos demicrointeractions.Pensando da mesma forma no mundo web, um usuário no ecommerce adiciona o produto em umcarrinho, navega por um carousel de fotos do produto, clica em botões e por aí vai. Essas são asmicrointeractionsdetrodaweb.

Assimquevocêidentificarasmicrointeraçõesdentrodoseuprodutoopróximopassoécriarum"feedback" (essa é uma das 10 heurísticas de Nielsen) "próxima do mundo real" (essa aqui é outraheurísticadeNielsen).Dessaforma,semcriarumanovafuncionalidade,vocêtornaoseuprodutomaisdivertidoqueodoseuconcorrente.

9.4ENRIQUECENDOSEUPRODUTOCOMMICROINTERACTIONS

130 9.4ENRIQUECENDOSEUPRODUTOCOMMICROINTERACTIONS

http://blog.caelum.com.br/enriquecendo-seus-sistemas-com-microinteractions

Asmicrointeractions são focadas emmelhorar a experiência do usuário sem a necessidade de secriarumanovafuncionalidadeparaoproduto.

NoslinksabaixovocêpodeverumaanimaçãodesenvolvidapelaSmartDesignquemostraváriasmicrointeractions presentes no nosso cotidiano. http://bit.ly/1nCZiJ2 ouhttps://vimeo.com/91559869

Podeseralgovisivelmentesimplesdeserdesenvolvido,masnãoétãosimplesdecolocarnaprática.Exatamente por este motivo,Dan Saffer, designer que criou o termo, também criou um fluxo prafacilitarodesenvolvimentodasnossasmicrointerações:

Figura9.6:Fluxo-Microinterações

OspontosdessapropostadeDanSaffer:

Comoousuáriodáostartnamicrointeração,podeserummouseover,umclick,umtoquenateladocelular,entreoutros.

Esseéomomentodelevantartodasasregrasrelacionadasamicrointeração.Porexemplo,dentrodaplataformadeensinodeidiomasDuolingo,vocênãopodeerrarafrasequeestárealizandoatradução.

AlgunsGIFs:

Exemplosemvídeo

Trigger-Iniciaamicrointeração

Rules-Oqueacontece

9.4ENRIQUECENDOSEUPRODUTOCOMMICROINTERACTIONS 131

http://blog.caelum.com.br/enriquecendo-seus-sistemas-com-microinteractions

http://bit.ly/1nCZiJ2

https://vimeo.com/91559869

Figura9.7:Regra-Duolingo

Comtodasasregras(quepodemserinvisíveis)quevocêlevantouemmãos,esseéomomentodedefinir como será apresetando para o usuário quando ele acionar uma dessas regras. Por exemplo,quando usuário cometer um erro na tradução e em seguida clicar no botão (trigger) 'Verificar', aplataformadevemostrarparaelequalpalavraeleerrou:

Figura9.8:Feedback-Duolingo

Feedback-Situadanoqueestáacontecendo

132 9.4ENRIQUECENDOSEUPRODUTOCOMMICROINTERACTIONS

Valeapenalembrarqueosomdeerrotambéméumfeedback.ComoosomdainicializaçãodeumMacoumensagensdeerrodeumWindows.

É utilizado pra definir de quanto em quanto tempo amicrointeração vai acontecer. Ou se ela serepetirácomalgumainteraçãodousuáriooualgumconjuntoderegrasdefinido.

Sãomodosdiferentesdamesmamicrointeraçãoquepodeserafetadoporumainteraçãodousuário.Porexemplo,dentrodoDuolingopravocêconseguirfazeromódulo2énecessáriofazeromódulo1.Masexisteumexercícioquevocêpodepularváriosmóduloscombasenoseuconhecimento.

Figura9.9:Modes-Duolingo

ComasmicrointeraçõesestamosmelhorandoaexperiênciadousuárionaAlura,CasadoCódigoenositedaCaelumsemanecessidadedecriarnovasfuncionalidades.

Loops

Modes

9.4ENRIQUECENDOSEUPRODUTOCOMMICROINTERACTIONS 133



Outro item importante para qualquer projeto é a escolha de uma boa família de fontes, que façasentidocomoprojetoeocontextodeuso.Aimportânciadeumaboafontepodesernegligenciadapoisnamaioriadoscasosnãopossuiomesmoimpactovisualcomoascores,imagensouolayoutemsi.

Odesignnosajudaapassarumamensagem.Enocontextowebaformamaiscomumdefazerissoéatravésde textos, tornandoa tipografiaumitemmuito importanteaseravaliado.Escolhendomal, seuconteúdopodesetornarilegíveloupassaramensagemerradaparaousuário.

Podemosseparar famíliasdefontesemdiversosgrupos,edosdoisprincipais,oquediferedeumparaooutroéousodaserifa.

Figura9.10:Serifadaesemserifa


9.5TIPOGRAFIA

134 9.5TIPOGRAFIA


Pequenoornamentonasextremidadesdostipos(caracteres)

Fontes mais sérias, passam uma idéia de algo com mais credibilidade, remete a algo maistradicional.Umbomusodessasfonteséemgrandesblocosdetexto,sejamimpressosoudigitais,comolivrosoupostscommuitoconteúdo.Algumasfontes:

TimesNewRoman;Palatino;Georgia;Palatino;Monaco.

Fontesmaismodernas e geométricas, dão a sensação que foramdesenvolvidas digitalmente, algomaisindustrial.Fontesmuitoutilizadaspelaáreadebrandingparaconfecçãodelogotipos.

Helvetica;Arial;Verdana;OpenSans;SegoeUI.

Figura9.11:TimesNewRomaneArial

Serifa

Fontesserifadas

Fontesnãoserifadas

Outrosgrupos

9.5TIPOGRAFIA 135

Háoutrosgruposdefontescomo:

monoespaçadas(ex:códigosHTML);cursivas(ex:convitesimpressos);fantasias(ex:logotipos);

Lembre-sedeSEMPREverificaralicençadeusodasfontesquedesejausar

http://www.dafont.comhttps://www.fontyukle.nethttp://abduzeedo.com/tags/ffff

Quandoumsitepossuimuitasfontes,elascomeçamachamarmaisatençãoqueopróprioconteúdo,setornamdistrações.Limitaronúmerodefontesutilizadasnolayout,emdoisoutrês,éumaboaajudaparaqueissonãoaconteça.

Figura9.12:Simulação-Muitasfontes

Para criar um senso de hierarquia visual a fim de diferenciar elementos em uma página ou app,

Downloaddefontes

Quantidadeepeso

136 9.5TIPOGRAFIA

http://www.dafont.com

https://www.fontyukle.net

http://abduzeedo.com/tags/ffff

podemosusarfontescomdiferentespesosetamanhos.Asvariantesmaisconhecidassão:

Regular;Italic;Negrito.

Não são todas as fontes que possuem essas variantes. E algumas possuem até um número bemelevado,comoafonteHelvetica:

Figura9.13:Helveticaeseusdiferentespesos

Quandovamosabrirumacontaemumbancooufazerumfinanciamento,normalmenteoscontratosparecemmeioapertadosdemaisparaafolha.Issonãoéummeroacidenteouacaso.

Textosassimpassamessasensaçãodeapertoparadeixaroleitordesconfortável,assimeletendearetermenosoconteúdoaliescritoeoolhotendeafalharquandovaiparaapróximalinha.Nocasodecontratos,elesaindadeixamafolhasemmargensparareforçaressasensação.

Por isso, outro elemento importante na tipografia que ajuda a evitar esse sentimento éalturadalinha,queéoespaçoentrecadalinhadetexto.

Alturadalinha

9.5TIPOGRAFIA 137

Figura9.14:BoaalturadelinhaXmáalturadelinha

Aumentandoaalturadalinha(lineheight)alémdeaumentaralegibilidadedostextos,podedeixarseu layout com um aspecto mais clean. Uma altura de linha mínima recomendada é 1.2. Aqui umexemplodeumaalturadelinhasemalteração(1)eumaalturadelinhade1.5emumtexto:

138 9.5TIPOGRAFIA

Figura9.15:Alturadelinhade1Xalturadelinhade1.5

escolhercombasenaidentidadedaempresa;nãodistorcer;

Outroscuidadoscomafonte

9.5TIPOGRAFIA 139

espaçamentoentreletras.

Desenvolveroutro8Steps,agoralevandoemcontatodospontosdeusabilidadedessecapítulo.

1. Ahistóriaquefoiescolhidapelotime;2. FolhaA3;3. Minímode4coresdecanetaporaluno;4. FolhasA4pararascunho;5. 3bolinhas(votospositivos)verdesporintegrantedotime;6. 1bolinha(votonegativo)vermelhaporintegrantedotime.

Duraçãode80minutos;Cadaintegrantedotimedevefazerum8Stepsmesmosemhabilidadesartísticas.

1. Timeescolheumahistóriaparasolucionarasinterações;2. DivideafolhaA3em8partesiguais,cadapartedaA3vaiserumtelaouinteraçãoqueousuário

temquerealizarcomafinalidadederesolverahistóriaescolhidapelotime.3. Otimeprecisadefiniroquecadacordecanetavaisignificar,porexemplo:Preta-desenho;Azul-

Mouse;Verde-Touch;Vermelha-Teclado.4. Comahistóriaeascoresdefinidasbastapartirparasoluçãocomtelaseinterações,cadaintegrante

comsuafolhaA3,semcolar;5. Colartodasassoluçõesnaparede;6. Cadaintegranteapresentasuasoluçãoparaorestantedogrupo;7. Depois cada integrante vota de forma livre utilizando primeiro votos positivos depois o negativo

(semdiscussõesnesseparte);8. Com os votos finalizados o time se junta a frente dos desenhos e discutem sobre o que querem

construir;9. Porfim,otimesejuntaparacriarumversãofinaldasoluçãodahistória.

9.6 GAMESTORMING - CRIANDO 8 STEPS COM FOCO NAUSABILIDADE

Objetivo

Ambiente

Regras

Passoapasso

140 9.6GAMESTORMING-CRIANDO8STEPSCOMFOCONAUSABILIDADE

CAPÍTULO10

Ainterfaceéondeasdecisõestomadaspelodesignerdeinteração,decomoaspessoasusamoprodutoedecomoestedeveresponder,sãopercebidas.Ouseja,ainterfaceéondeasfuncionalidadesinvisíveisdeumsistemaficavisívelepodeseracessadaeusada.

Odesignerdeinteraçãonamaioriadasvezesjácriainterfacesquesãovisuaisouque,aomenos,temalgunscomponentesvisuais.Comojáditoanteriormente,todososelementosdosplanosdeestruturaeesqueletodaexperiênciadousuário(designdeinteração,arquiteturadainformação,designdeinterface,denavegaçãoedeinformação)devemserconsideradoscomoumaunidadenodesenvolvimentodeumproduto,nãodevendosertratadosisoladamente.Alémdisso,quantomaishabilidadesumdesignertiverparalidarcomtodosessestiposdedesigns,atémesmoovisual,maiscompletoseutrabalhoserá.

Odesignvisualcarregaaresponsabilidadedecomunicaraspossibilidades,limitaçõeseestadosdasinterações. Ele deve estar intrinsecamente ligado ao design de interação, deve construir a narrativavisualdainteração.

Emvezdeavaliaras idéiasdodesignvisualapenasconsiderandooqueapareceseresteticamenteagradável,deve-sefocaremquãobemelasfuncionam,emquãoefetivamenteelesuportaosobjetivosdefinidosnosplanosinferioresdaexperiênciadousuário.

Quatroprincípiosbásicos,conhecidoscomoC.R.A.P.,sãoessenciaisparaconstruirumdesignvisualeficienteedequalidade.

Contraste visual é fundamental para direcionar a atenção do usuário para as partes essenciais dainterface,aspartesquequeremosqueobrigatoriamenteeleveja.Contrasteajudaousuárioaentenderarelação entre os elementos de navegação na página e é a principal forma de comunicar grupos deinformação.Masparaqueocontrastefuncione,asdiferençasdevemsersignificantes.Diferençassutisacabamcausandomaisconfusão.Contrastepodeserfeito,porexemplo,utilizandodiferentescoresoudiferentesfontesdetexto.

Odestaquenaárea"RecentWork"édadocomocontrastecriadopeloboxrosa.

DESIGNVISUAL

10.1OPRINCÍPIOC.R.A.P

Contraste

10DESIGNVISUAL 141

Figura10.1:Exemplodecontraste

Repetição tem grande relação com consistência. Diferentes áreas da aplicação devem refletir amesma abordagem de design e ummesmo elemento da interface deve transmitir a mesma idéia emqualquerpartedaaplicação.Alémdisso, repetir elementoscriaumsensodeunidadeegera interessevisual. Repetição deve ser considerada tanto para elementos gráficos como para tipografia, usorepetitivodefontesoumesmocores.

Ostítulosdecadaartigotemomesmoformatoetamanho,bemcomoaimagem,queéumlinkparaositecitadonoartigo.Também,ousodomesmoesquemadecores,inclusivenoslogosdalateralqueforamtratadosparausarumaúnicacor,ressaltaarepetição.

Repetição

142 10.1OPRINCÍPIOC.R.A.P

Figura10.2:Exemploderepetição

Alinhamento forneceuma âncoravisual e faz a páginaparecermais unificada.A regrabásicadoalinhamento é que todo elemento no design deve se alinhar ou relacionar com um outro elemento.Linhasimagináriasprovêemumaconexãovisualentreoselementos,criandoumrelacionamentoentreeles,eumequilíbriogeralparaapáginaoutela,fazendo-aparecerclara,limpaemenosconfusa.

Nessapáginaépossívelverlinhasimaginárias(ressaltadasemazul)quedefinemoalinhamentodoconteúdo.

Alinhamento

10.1OPRINCÍPIOC.R.A.P 143

Figura10.3:Exemplodealinhamento

Proximidade trabalha em conjunto com o alinhamento, onde os elementos relacionados devemtambém se relacionar visualmente, através da aproximação.O contrário também é válido: aproximarelementosquenãotêmnenhumtipoderelaçãopodeconfundirousuário.Umdesignquenãousabemesseconceitoserádifícildeseguir.

Para cada título de seção, tem um subtítulo logo abaixo, que cria uma unidade entre esses doiselementos.Oconteúdodaseçãotambémserelacionacomotítuloatravésdaproximidadedoconteúdocomseutítuloedoespaçamentoumpoucomaiorparaotítulodaseçãoseguinte.

Proximidade

144 10.1OPRINCÍPIOC.R.A.P

Figura10.4:Exemplodeproximidade

Alémdessas ferramentas, outros pontos precisam ser levadas em conta para umbom trabalho dedesignvisual:

Tipografia: éumaescolha importantenodesignvisual,possibilitandonãoapenasa legibilidadedostextoscomocriaumaidentidadevisualparaamarca.Proporcionatambémumahierarquianostextos, utilizando diferentes tamanhos e pesos para títulos, textos, comentários, disclaimers,

10.1OPRINCÍPIOC.R.A.P 145

guiandomelhorousuárioatravésdainformação.Cores: podem ser uma das mais efetivas maneiras de comunicar a identidade de uma marca.Tambémtemimportantepapelnacriaçãodecontrasteeuniformidade.Paradesignersdeinteração,coressãousadascomodicasparaousodealgumasfunçõesouparaindicarimportância.E como última dica, elimine do layout qualquer informação que não seja relevante para seupúblico.




Oníveldeespecificaçãoqueodesignerdeinteraçãodeveelaborardependedeváriosfatores,comoaproximidadedeledaequipededesenvolvimentodoproduto,daculturaorganizacionaldaempresaqueele trabalha e o nível de exigência que ela impõe em termos de documentação, da metodologia dedesenvolvimentoadotada,entreoutros.

Normalmenteseodesignéfeitoporumaconsultoria,oprodutofinaldotrabalho,alémdodesignem si (layout final de todas as telas da aplicação ou atémesmo a programação da interface pronta),inclui também toda a documentação e especificação realizada no decorrer do desenvolvimento dodesign:relatórioderesultadodaspesquisas,personascriadas,mapasediagramas,cenáriose/oucasosdeuso,wireframes,etc.

Seodesignestásendodesenvolvidodentrodaempresa,ondeoníveldeinteraçãoentreosdesignerse os desenvolvedores é grande, as exigências de documentação ou especificação diminui bastante,principalmenteemumambienteondeaculturaágilimpera.

Seprotótiposdealtafidelidadefuncionalforamelaborados,estesjáservemcomoumaespecificaçãodos fluxos de ações e comportamento da aplicação. O visual pode ser visto através dos layoutsproduzidos, com indicação dos vários estados dos elementos da interface (foco,mouseover, estadoshabilitados,desabilitados,etc.).


10.2ESPECIFICAÇÃODODESIGN

146 10.2ESPECIFICAÇÃODODESIGN


Além disso, os próprios wireframes, mesmo que não sejam navegáveis, podem especificar ocomportamentodecadaelementoatravésdeanotaçõesquesãofeitasnelesmesmos.

Algumasvezes,planilhassãousadasparadefinirtodasasmensagensdaaplicação,comodeerro,dealerta,deinformaçãooudeajuda,paraqueessasmensagensnãoprecisemestarrefletidasemtodasaspartesdeumwireframeoulayout.Owireframee/oulayoutpodemostrarcomoserãoapresentadoscadatipodemensagemeostextosemsipodemficarnaplanilha.

Equalqueroutradocumentaçãoelaboradaduranteoprocessodedesigndainterfacepodeservirdeapoionodesenvolvimentodaaplicação.

De qualquer maneira, nada substitui a eficiência de ter o designer sentado próximo à equipe deimplementação do produto, acompanhando de perto o desenvolvimento, tirando dúvidas que surgemsobre determinados comportamentos e, de certa forma, servindo comoQA (QualityAssurance) paragarantirqueoprodutoserádesenvolvidotalecomofoiprojetado.

As cores têm um papel importantíssimo em tecnologia e nosso mundo cotidiano. Muitas vezesnegligenciada,umaboaescolhadecoresparao layoutpode influenciarousuáriodeváriasmaneiras,guiando-oporumcaminhodespertandosuasemoçõesemuitossentimentosúnicos.

Issoporqueascoresnãosãoumfenômenofísico,cadapessoainterpretaumadeterminadacordemaneira diferente daoutra, é algo individual,mesmo tendo suas generalizações.Por exemplo, para amaioriadaspessoas,amaçãévermelha,masparaumapessoacomumcertograudedaltonismoessevermelhopodeseratéoqueparaamaioriaéverde.

Oazulporexemplocostumaserconectadoaossentimentosdeinovaçãoetecnologia,tantoqueporissoqueboapartedasredessociaishojeemdia(Jan/16)escolheramessacorcomocorprincipalparasuamarca.

Váriosartistasepesquisadoresestudaramaluzeacor,comoAristóteles,DaVinci,IsaacNewtoneGoethe,sendousadososestudosdesseúltimoporpesquisadoresdaGestalt.

Háacor formadapor luz,eacor formadaporpigmento.Essematerial focamaisnesseprimeiro,poisoconteúdoenvolvemaisdispositivosemissoresdeluzcomocelularesemonitores.

Percepção visual, e individual, provocada pela ação da luz sobre algumas células da retina, ecompiladapelosistemanervoso.SendoassimapenasumaINFORMAÇÃOVISUAL.

10.3TEORIADASCORES

Cor

10.2ESPECIFICAÇÃODODESIGN 147

Cheganumadeterminadaetapadoprojeto,ondeénecessáriofazeraescolhadequaiscoresserãoutilizadas.Depoisdemuita"tentativaeerro",achamosumacombinaçãoquenosagrada.Masseráquefoiumaboaescolha?Umaoutramaneiradetomaressadecisãoébaseando-senateoriadascores.

A teoriadascoresnosajudaacombinarcoresdeumaformaharmoniosaecomalgumsentido.Enelaháalgumasregrasbásicasdeusodecoresearelaçãoentreelas,como:

corescomplementares

Figura10.5:Corescomplementares

coresanálogas

Figura10.6:Coresanálogas

corestriádicas

Figura10.7:Corestriádica

Entrediversasoutrasqueforamdefinidascomopassardotempo.

Essas relações entre as cores sãogeralmentebaseadas, oupodemser facilmentevisualizadas, nassuasposiçõesnocírculocromático:

148 10.2ESPECIFICAÇÃODODESIGN

Figura10.8:Círculocromático

Decidir entre cores análogas e cores complementares, por exemplo, influencia no tipo da energiavisualenapercepçãodousuárioqueasvê.Afetatotalmenteaatmosferadoprojeto.

Conjuntoderegraseestudosquevisaentenderecombinarcoresdeumaformaharmoniosaecomalgumembasamento.

UmaferramentamuitousadaqueajudaaencontrarumaboapaletacromáticaéaAdobeColor,emquevocêescolheumacorbase,evai testandoa regraquemais teagradare fazer sentidocomoseuprojeto.

TeoriadasCores

10.4FACILITANDOESSAESCOLHACOMOADOBECOLOR

10.3TEORIADASCORES 149

https://color.adobe.com

ComessaferramentavocêtambémconseguesalvarsuaspaletasnasuacontadaAdobeepuxarascoresdiretodoPhotoshope/oudoIllustrator.

Figura10.9:AdobeColor

Vocêpodeescolheracorbasesejaporcausadapsicologiadascores(laranjacostumaserconectadoajuventude,roxocomcriatividade)ouquefaçasentidocomaidentidadevisualdasuamarca.

Adobecolor

150 10.4FACILITANDOESSAESCOLHACOMOADOBECOLOR

https://color.adobe.com

Osentimentoligadoàumadeterminadacorpodemudardesentidodeumaculturaparaoutra.Obrancorepresentaalgopuroe inocentenoOcidente, jánoOrienteéacordamorte.NoJapão,omesmovemelhousadoemvestidosdenoiva,éconsideradoextravagantedemaisnaEuropaeaquinasAméricas.

Comacorbaseescolhida,dadoasregrasdecombinações,podemosconcluirqueexisteumconjuntofinito decombinaçõesconsideradasagradáveis.Por issoqueemalgunsmanuaisde identidadevisualacabamosnotandosemelhançasnaescolhadascores,poisascombinaçõesdecoresparaumresultadoharmoniosoélimitado.

O mesmo parece ser válido para a música e diversas outras áreas com um número limitado deharmonias: começando em um tom, existe um número limitado de tons harmônicos a ele, por issomuitasmelodias“separecem”.

Saberescolherascoresdoseuprojetofazumaenormediferençavisual,sejaparaobemouparaomal.



Corecultura


10.4FACILITANDOESSAESCOLHACOMOADOBECOLOR 151


CAPÍTULO11

Testedeusabilidadeéumatécnicadecaixa-preta.Oobjetivoéobservarusuáriosreaisusandooprodutoparadescobrirproblemasepontosdemelhorias.Oproduto,quepodeserumsite,umaaplicaçãoweb,umprodutofísico,nãoprecisaestarcompletamentedesenvolvido.Protótipossãovastamenteutilizadosemtestesdeusabilidadeparavalidaçãodoqueestásendofeito.

Testes de usabilidade geralmente envolve medir quão bem os participantes respondem a quatroáreas:

Desempenho:Quantotempoequantospassossãonecessáriosparaqueapessoacompletetarefasbásicas?Precisão:Quantoserrosapessoacometeu?Eelesforamfataisouapessoaconseguiuserecuperarcomasinformaçõesrecebidaspelosistema?Lembrança:Oquantoapessoaselembramaistardeoudepoisdeperíodossemusar?Resposta emocional: Como a pessoa se sentiu depois de completar a tarefa? A pessoa estavaconfianteouestressada?Elarecomendariaoprodutoaumamigo?

Nesse tipo de teste, um grupo representativo de usuários tenta completar tarefas, enquantoobservadoresolhametomamnotadoqueestáacontecendo.

Éimportantequeousuário"pensealto",istoé,queverbalizesuaintençãoaorealizarasações.

APÊNDICE-TESTESDEUSABILIDADE

11.1OQUEÉMEDIDO?

"Pensaralto"

152 11APÊNDICE-TESTESDEUSABILIDADE



Um teste de usabilidade típico é composto, além do participante, por ummoderador, que dá asinstruções ao participante de como o teste será realizado e passa a ele as tarefas que deverão serexecutadas;eoobservador,normalmenteodesignerenvolvidonodesenvolvimentodoproduto.Oidealémanteromínimodepessoascomoobservador,paraqueoparticipantenãosesintadesconfortávelnomomentodoteste.Porémemalgumassituaçõeséinteressantequeogerentedoprodutooualguémdotimededesenvolvimentotambémparticipecomoobservador,poisdessaformaelesconseguemterumavisãomaisrealdoprodutoqueestãodesenvolvendo.

Otestedeusabilidadepodeserfeitotantonopróprioambienteondeapessoautilizará(ouutiliza)oproduto,comoemumlaboratórioespecialparaisso.Ambostemsuasvantagens.

Noprópriocomputadordoparticipante,noseupróprioambientedetrabalho,permitequetenhamosumaidéiarealdeondeoprodutoseráinserido:elecompartilhaocomputador?Osrecursos,comoacessoa internet, são satisfatórios? Qual a resolução de tela que ele usa? É frequentemente interrompidoquandoestárealizandosuastarefas?Entreoutros.

Avantagemdeusarumlaboratórioéaeficiência,poisépossíveltestarcomváriaspessoasemumúnico dia, sem precisar ficar se deslocando; além do ambiente está em perfeitas condições para arealização do teste: não existe interrupções, os recursos necessários sempre estão disponíveis, oambientejáestápreparadoparagravartodososdiálogoseasexpressõesfaciaisdoparticipante,algunssão equipados com aparelhos de eye tracking e, por ter aqueles espelhos especiais, pode-se colocarváriosobservadoressemqueoparticipantepercebaesesintacoagidooudesconfortávelnomomentodoteste.


11.2ENVOLVIDOS

Local

11.2ENVOLVIDOS 153


Aintroduçãoaotestedeveserfeitapelomoderador,explicandooobjetivodotesteedeixandobemclaroqueoqueestásendotestadoéoprodutoenãooparticipante;queopapeldousuárionaqueletesteé de colaborador, ao ajudar a melhorar o produto. Depois da introdução, o moderador passa aoparticipanteastarefasqueeleprecisarealizar.

Antesdarealizaçãodoteste,odesignerdeveseprepararbem:

Definiroperfildeusuáriodesejado;Realizarorecrutamento;Definiroquedevesertestado;Prepararosroteirosdeteste;Alinharcomomoderador;Fazerumtestepilotoparaavaliarseoroteiroestáadequadoerealizarosajustes,casonecessário.

Durantearealizaçãodoteste,assimcomoemqualquerpesquisa,oidealéqueodesignertenhaumpoucodetempoentreumtesteeoutroparaconsolidarasinformaçõesjáobtidas,poiscorre-seoriscodeesquecerdetalhesimportantessedeixarparafazerissoumtempodepois.

Também,dependendodotempoentreumtesteeoutro,oprotótipojápodeserajustadocasosejampercebidasfalhasgravesnodesenhoqueestejaprejudicandoosresultadosdostestes.

Depoisdeconcluídosostestes,odesignerdeveconsolidartodasasinformaçõesobtidas,conversarcomosenvolvidosnodesenvolvimentodoprodutoeapresentarorelatóriodosachadosdoteste,parajuntosfazeremumplanodeaçãodetudoaquiloqueprecisaserrevistoeajustadonodesigndoproduto.

E com quantos participantes precisamos realizar um teste de usabilidade? Segundo um arquivoescrito por Jakob Nielsen (http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users)essenúmeroé5.

Segundoesseartigo,assimquevocêtestacomumúnicousuário,insightsaparecemevocêjátemaprendidoquaseumterçodetudooqueháparasabersobreausabilidadedodesign.Quandovocêtesta

Moderador

11.3PREPARAÇÃOPRÉVIA

Anotarobservações

Ajustedoprotótipoentretestes

Elaborarrelatório

Númerodeparticipantes

154 11.3PREPARAÇÃOPRÉVIA

http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users

comumsegundousuário,vocêperceberáqueessapessoafazquaseasmesmascoisasqueoprimeirousuário,assim jáexistealgumassobreposiçõesnoquevocê jáaprendeu.Mas,aindaassim,aparecemcoisasnovasquevocênãoobservounoprimeiro teste,entãoosegundoaindamostraalguns insights,mas já bemmenos que o primeiro. O terceiro teste fará muitas das coisas que já foi observado noprimeiroenosegundoteste,assim,adicionarámuitomenosinformaçõesdoqueosprimeirostestes.Eamedidaquevocêfazmaistestes,vocêaprendecadavezmenos,porquevocêcomeçaaverasmesmascoisasnovamente.Depoisdodécimoquintoteste,vocêjáestaráperdendotempo.

Fonte:www.nngroup.com

Esta curva mostra que você precisa testar com ao menos 15 pessoas para descobrir todos osproblemasdeusabilidadedoproduto,masentãoporqueNielsenrecomendaapenas5?Aprincipalrazão,segundoele,équeémelhordistribuirseuorçamentoatravésdemuitostestesmenoresemvezdegastá-lotodoemumúnicoeelaboradoestudo.

UmaúnicaressalvafeitapeloNielsenéquandoaaplicaçãotemváriosgruposdistintosdeusuários.Essaregrade5sóvalequandooprodutoseráusadoporpessoasqueusarãoaaplicaçãodeumamaneirasimilar. Se, por exemplo, o teste será de uma aplicação que será usada por pais e filhos, então doisgruposdeusuáriosterãocomportamentossuficientementediferentesquetorna-senecessáriotestarcompessoasdessesdoisgrupos.Dequalquerforma,vocênãoprecisariaincluirtantosusuáriosnotestecomofariaparatestedeumúnicogrupodeusuários.Assobreposiçõesdeinformaçõesgarantiráummelhorresultadotestandoumnúmeromenordepessoasemcadagrupo.Nielsenrecomenda:

3ou4usuáriosdecadacategoriaseestivertestando2grupos;3decadacategoriaseestivertestandotrêsoumaisgrupos.

Exemplo:scriptparaTestedeUsabilidade

11.3PREPARAÇÃOPRÉVIA 155

O seguinte script é uma adaptação e livre tradução do livroRocket SurgeryMadeEasy de SteveKrug

NOTAPARAOMODERADORNavegadordeveestarabertoemumapáginaneutra,comoadoGoogle.

Olá,.Meunomeéeireiteguiaratravésdessasessãodetestesdehoje.

Antesdecomeçar,tenhoalgumasinformaçõesparapassaravocêeireilê-lasparatercertezadequecobrireitudo.

Você já deve ter uma idéia domotivo de você estar aqui,mas vou repassá-lo brevemente agora.Estamospedindoapessoasquetentemusarumwebsitequeestamosdesenvolvendoparaquepossamosverseeletrabalhacomopretendido.Asessãodevelevaremtornodehoras.

Aprimeiracoisaquegostariadedeixarclaroaquiéqueestamostestandoositeenãovocê.Vocênãopodefazernadadeerradoaqui.Naverdade,aquiéprovavelmenteoúnicolugarhojequevocênãotemquesepreocuparsobreestarcometendoerros.

Amedidaquevocêusaosite,eupedireiavocêquetentepensaraltoomáximopossível:digaoquevocêestáprocurando,oqueestátentandofazer,oqueestápensando.Issomeajudarábastante.

Também,porfavor,nãosepreocupedeestarferindonossossentimentos.Estamosfazendoissoparamelhorarnossosite,entãoprecisamosouvirsuasreaçõeshonestas.

Sevocêtiverqualquerquestãoamedidaqueprosseguimosnoteste,podeperguntá-las.Eupossonãorespondê-lasdeimediato,jáqueestamosinteressadosemvercomoaspessoasfazemquandonãotemalguém do lado ajudando. Mas se você ainda tiver alguma dúvida quando terminarmos, tentareirespondê-las.Esevocêprecisardarumapausaaqualquermomento,ésómeavisar.

Casoestejamgravandoaconversaçãoduranteoteste:Vocêpodeternotadoomicrofone.Comsuapermissão,nósestamosgravandooqueacontecena telae tambémnossasconversas.Agravaçãosomenteseráusadaparanosajudaradescobrircomomelhorarositeenãoserávistaporninguémquenãoestejatrabalhandonoprojeto.Emeajudabastante,poisnãoprecisareitomarnotadetudo.

Caso outras pessoas estejam observando o teste: Além disso, há algumas pessoas do time dedesignobservandoestasessãoemoutrasala.Elesnãopodemnosver,apenasateladocomputador.

Sevocênãoseimporta,peçoqueassineessetermodepermissão.Eleapenasdizquevocênosdáapermissãodefazeragravaçãoequeelasóserávistapelaspessoastrabalhandonoprojeto.


NOTAPARAOMODERADORDêaoparticipanteotermodepermissãoparaserassinado.Enquantoeleassina,inicieagravaçãodatela.

Se você tiver usando um termo de confidencialidade: Nós lhe enviamos um termo deconfidencialidadequedizquevocênãopoderá falarparaalguémsobreoqueestamos lhemostrandohoje,jáqueéumprojetoqueaindanãoestápúblico.Vocêtrouxeotermoassinado?

NOTAPARAOMODERADORSeoparticipantenãotrouxeotermoassinado,entregueaeleoutracópiaedêaeleumtempoparalereassinar.

Vocêtemalgumadúvidaatéomomento?

Ok.Antesdemostrarosite,gostariadelhefazeralgumaspoucasperguntas.

Primeiro,qualasuaocupação?Oquevocêfazduranteoseudia?

Agora,quantashorasnasemana–apenasumaestimativa–vocêdiriaquegastausandoainternet,incluindonavegareusaremail,notrabalhoeemcasa?

Equaladivisãoentreemailenavegação–umaporcentagemaproximada?

Quaistiposdesitevocênormalmenteprocuraquandonaveganaweb?

Vocêtemalgumsitefavorito?

Ótimo.Acabamoscomasperguntasepodemoscomeçaraolharosite.

NOTAPARAOMODERADORAbraositenonavegador.

Primeiro, vou pedir que você olhe esta página eme diga o que faria com ela: o que lhe chamaatenção,quetipodesitevocêachaqueé,oquepodefazeraquieparaqueserve.Apenasolheumpoucoefaçaumapequenanarrativa.

Podebaixaresubirabarraderolagem,masnãocliqueemnadaporenquanto.

11.3PREPARAÇÃOPRÉVIA 157

NOTAPARAOMODERADORDeixe-oexaminarefalarpornomáximo3a4minutos.

Obrigada.Agoraeulhepedireiparatentarfazeralgumastarefasespecíficas.

Seoquevocêestátestandonãoéalgoespecíficodafuncionalidadedebusca:Tambémpeçoquefaçaessastarefassemusarabusca.Nósaprenderemosmuitomaissobrequãobemositefuncionaseabuscanãoforusada.

E,maisumavez,nosajudarámuitosevocêpensaraltoenquantoestivertentandoexecutaratarefa.

NOTAPARAOMODERADORDêaoparticipanteoprimeirocenárioquevocêcriouparaotesteeoleiaemvozalta.

Deixeoparticipanteprosseguiratéquevocêpercebaquenãoestámaistrazendonenhumvalorouqueoparticipanteestáficandofrustrado.

Repitaparacadacenáriodetestequetenhacriado.

Obrigada!Vocênosajudoubastante.

Caso outras pessoas estejam observando o teste:Me dê licença umminuto que vou ver se aspessoasdotimetêmalgumaperguntaquegostariamdefazer.

NOTA PARA O MODERADOR No caso de ter observadores em outra sala, veja se eles têm algumaperguntaafazer.

Façaasperguntasdosobservadores.

Vocêtemalgumaperguntaquequeirafazer,agoraqueterminamos?


NOTAPARAOMODERADORDêaoparticipanteoincentivoouajudadecustoquetenhapreviamenteacertadocomele.

Pareagravaçãoegraveoarquivo.

Agradeçaasuaparticipaçãoeoacompanheatéasaída.

Entendercomousuárioutilizaumsistema,siteouapp.Eaplicarmelhoriasfocadonanecessidadedousuário.

1. Notebook;2. Cartãocomlinhas;3. FolhasA4;4. Canestas;5. Post-its.


1. Escolherumsiteouappquenãosejadeusocomumcomofacebook,masquealgumintegrantedotimeconheçacomoositefunciona;

2. Definirumobjetivoparaoteste;3. Criarumfluxodetestequedurenomáximo5minutos;4. Realizarumtestebetacomalguémdotime;5. Realizar o teste com um integrante de outro time. Antes de começar o teste não podemos nos

esquecer:i. Apresentaroproduto;ii. Deixarbemclaroquequemestásendotestadoéosite;iii. Pedirparaousuáriofalaremvozaltaoqueeleestápensando;

11.4GAMESTORMING-TESTEDEUSABILIDADE

Objetivo

Ambiente

Regras

Passoapasso

Exemplo:TermodePermissãodeGravação

11.4GAMESTORMING-TESTEDEUSABILIDADE 159

Obrigadoporparticipardenossotestedeusabilidade.

Nósgravaremossuasessãoparapermitirquecolaboradoresdanomedaempresa,quenãopuderamestarpresentesaquihoje,possamposteriormenteobservaroteste.

Porfavor,leiaotermoabaixoeassinenolocalindicado.

Estou ciente de que minha sessão de teste de usabilidade será gravada. Permito que NOME DA

EMPRESAuseestagravaçãoapenasparausointerno,comopropósitodemelhorarainterfacesendotestada.

Nome:

Assinatura:

Data:




Termo


160 11.4GAMESTORMING-TESTEDEUSABILIDADE


apostila-ux-usabilidade-mobile-web.pdf - Caelum

Documents

Transcript of apostila-ux-usabilidade-mobile-web.pdf - Caelum