vedadas. Para uso comercial deste material, por favor, consulte a … · 2019-02-14 · Esse...

167
.

Transcript of vedadas. Para uso comercial deste material, por favor, consulte a … · 2019-02-14 · Esse...

.

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

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

Essa apostila é constantemente atualizada edisponibilizadano sitedaCaelum.Sempre consulteositeparanovasversõese,aoinvésdeanexaroPDFparaenviaraumamigo,indiqueositeparaqueelepossasemprebaixarasúltimasversões.Vocêpodeconferirocódigodeversãodaapostilalogono naldoíndice.

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

Essematerial é parte integrante do treinamentoUX eUsabilidade aplicados emMobile eWeb 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

2

10

15

26

36

Sumário

1ExperiênciadoUsuário1.1OqueéExperiênciadoUsuário? 21.2ISO9241-210 31.3AEvoluçãodaExperiênciadoUsuário 31.4Parasabermais:OCasoClearRX 41.5ElementosdaExperiênciadoUsuário 61.6PlanosdaExperiênciadoUsuário 6

2DesigndeInteração2.1QuatroAbordagensparaDesigndeInteração 122.2DesignCentradonoUsuário 13

3TimeeProjeto3.1Gamestorming-Montartimeheterogêneo 153.2Kanban 173.3OsKanbansdeUX 183.4Gamestorming-Definirprojetomobile 203.5Otriângulodeouro 213.6Gamestorming-TriângulodeOuro 233.7Gamestorming-360˚View 24

4Pesquisa4.1OndeBuscarInformações? 274.2MétodosePropósitos 284.3Entrevistas 294.4CardSorting 304.5Recrutamento 324.6DestilandoaPesquisa 344.7Gamestorming-Entrevista,tirandodúvidascomousuário 34

5Personas

SumárioCaelum

57

73

5.1DesignCentradonoUsuário 365.2Oquepersonasnãorepresentam 375.3Benefícios 375.4Impedimentos 385.5Aimportânciadosobjetivos 395.6CriandoPersonas 405.7NúmerodePersonas 405.8Personasadhoc 405.9Personasimples 405.10Proto-persona 415.11Gamestorming-Criandoproto-personas 445.12OssetepassosparacriarPersonas 445.13Secundária 495.14Mapadeempatia 515.15Templatesdepersona 525.16Discussão:Asnarrativassãorealmentenecessárias? 555.17Gamestorming-CriandoPersonanodiaadia 55

6Modelandoeidentificandorequisitos6.1ModeloMental 586.2Cenários 596.3Gamestorming-Criandocenário 616.4AnálisedeTarefas 616.5FluxodeTarefas 626.6SintetizandoosRequisitosdeDesign 636.7Userstories 646.8Escrevendoboashistórias 656.9Gamestorming-Criandohistóriascomfoconousuário 656.10Equilíbrioentreclienteeusuário 666.11Gamestorming-UXCanvas 686.12Features 686.13Gamestorming-Brainstormdefeaturescomobjetivos 696.14Priorizandofeatures 706.15Gamestorming-Priorizandofeaturescomfoconousuário 71

7DosRequisitosaoDesign7.1EstruturaGeral 737.2RefinandooDesign 767.38steps 78

CaelumSumário

80

126

142

153

7.4Gamestorming-criandorabiscoframeewireframeemtime 78

8PadrõesePrincípiosdoDesigndeInteração8.1AsdezheurísticasdeNielsen 808.2Outrosprincípiosparaimplementarinterfaceseficazes 888.3PadrõesdeDesigndeInteração 908.4PadrõesdeInteraçãoComportamentais 928.5Gamestorming-ColocandoempráticaosheurísticasdeNielsen 1228.6Protótipos 1228.7Gamestorming-Prototipagemempapel 124

9Usabilidadeemdispositivosmóveis9.1LeideFitts 1269.2LeideHick 1289.3ThumbZones 1299.4EnriquecendoseuprodutocomMicrointeractions 1319.5Tipografia 1359.6Gamestorming-Criando8Stepscomfoconausabilidade 141

10DesignVisual10.1OprincípioC.R.A.P 14210.2EspecificaçãodoDesign 14710.3TeoriadasCores 15010.4FacilitandoessaescolhacomoAdobeColor 150

11Apêndice-TestesdeUsabilidade11.1Oqueémedido? 15311.2Envolvidos 15411.3Preparaçãoprévia 15511.4Gamestorming-Testedeusabilidade 159

Versão:22.8.23

SumárioCaelum

.

CAPÍTULO1

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

ExperiênciadoUsuário(UX,deUserExperience)éumtemabastantesubjetivo.Édifícildemaneiraobjetivaediretadizercomodesenharumaexperiênciadousuário,masépossívelaprendermoscomodesenharumproduto, serviçoouambientequeproporcioneumaexperiência satisfatóriaparaalguémqueosuse, identificando todosos aspectosda 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 DesignCentrado noUsuário (UCD),Design de Interação (IxD) eUsabilidade, todos vistos ao longo doscapí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?

.

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

Business!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Em2011,foicriadaaISO9241-210.Asérie9241abordaergonomiaeainteraçãohomem-máquinaea nova parte 210 o design centrado em pessoas em sistemas interativos, que define a experiência dousuá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.

Agoraéamelhorhoradeaprenderalgonovo

1.2ISO9241-210

1.3AEVOLUÇÃODAEXPERIÊNCIADOUSUÁRIO

.

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éumexemplodecomoUXpode influenciar todaumaestratégiadenegócio.

AmotivaçãoquelevouaestudantededesignDeborahAdlerafazeressesistemacomosuatesedemestradofoisuaavótertomadooremédiodeseuavôporengano.

Utilidade

Usabilidade

Rentabilidade

Estrategibilidade

1.4PARASABERMAIS:OCASOCLEARRX

.

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

.

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

CasadoCódigo,ebookcompreçodeebook.

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.

Jesse JamesGarret, emseu livroElements ofUserExperience propõecincoplanos que facilitamacompreensã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 de Design de Aplicaçã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).

EditoraCasadoCódigocomlivrosdeumaformadiferente

1.5ELEMENTOSDAEXPERIÊNCIADOUSUÁRIO

1.6PLANOSDAEXPERIÊNCIADOUSUÁRIO

Problemadecomunicação

Solução:doiscontextos

.

Para resolver essa dualidade Garret dividiu cada plano em dois contextos: a web comofuncionalidade(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.

Aresponsabilidadeédetodos

TimedeExperiênciadoUsuáriomultidisciplinar

Estratégia

.

Deve-seentenderoquesuaaudiênciaquerecomoissocasacomoutrosobjetivosdonegócioqueexistem.Umwebsite falhanãoporquestões tecnoló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

.

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

Superfície

.

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.

Designde Interação sepreocupacomasopçõesnecessáriasparaqueousuário realize e completetarefas.ArquiteturadaInformação,porsuavez,tratacomasopçõesenvolvidasemexporasinformaçõesparaousuário.

DESIGNDE INTERAÇÃODesenvolvimentode fluxosdeaplicaçãopara facilitar as tarefasdousuário,definindocomoesseinteragecomasfuncionalidadesdosistema.

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

ODesigndeInterfacedefineomundodosbotões,camposeoutroscomponentesdainterface.Elefornece aosusuários ahabilidadede fazer coisas. Já oDesigndeNavegação éuma especializaçã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 oDesignde Informação, que é responsável por apresentar a informaçãopara 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 tratandode contexto,dificilmenteumaaplicação será apenasuma interfacede softwareouapenasumsistemadehipertexto,epor issotodosesseselementosdevemserconsideradoscomouma

DESIGNDEINTERAÇÃO

Disciplinacomidentidadeprópria

Holística

.

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

.

Layoutsvisuais(doresultadofinalesperado)

Nomomentoqueodesigner sedepara comumproblemapara solucionar, elepode se apoiar emquatro abordagens principais para encontrar umamelhor 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

.

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

ODesignCentradonoUsuárionosservirádeguiaapartirdeagora.Vejamosmaisdetalhadamenteestametodologiaaseguir.

PARASABERMAISLivro:DesigningforInteractionCreatingSmartApplicationsandCleverDevicesDeDanSaffer http://www.designingforinteraction.com/Livro:About Face 3 The Essentials forInteraction Design De Alan Cooper, Robert Reimann e David Croninhttp://www.cooper.com/about

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex-aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

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.

Enquantoosdesignersindustriais lembramdesselegado,engenheirodesoftwareseramcegospara

JáconheceoscursosonlineAlura?

2.2DESIGNCENTRADONOUSUÁRIO

Contextohistórico

.

ele,criandoaplicaçõesvoltadasparacomoocomputadortrabalhavaenãocomoaspessoastrabalhavam.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

.

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

.

2. Mínimode4integrantesportimeemáximode5.

Trintasegundosparacadaalunoescrevernopost-it:

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

Exemplodecomodeveficaropost-it:

Figura3.1:Imagemdecomodeveficaropost-it

Os alunos levantam com o objetivo demontar o time de nomínimo 4 integrantes, conversandoentreeles.

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

Passoapasso

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

.

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?

.

"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

.

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úvidasdenegócios,vendasemarketing;duasdúvidasdedesignepesquisa;duasdúvidasdetecnologia.Sendoelas:

Quaissãoosobjetivosdenegócios?Oqueélucrativo?

Oqueaspessoasprecisam?Oqueéútileagradável?

UXCanvas

360ºView

Negócios,VendaseMarketing

DesignePesquisa

Tecnologia

.

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. 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.

Comtodosos integrantesdecada timeemfrenteaparedequeestãoospost-its,paradefinirqualprojetootimevairealizarduranteocurso.

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

CasadoCódigo,LivrosdeTecnologia.

A inclusão consciente de design levou a ascensãoda tríademoderna identificadapor LarryKeelycomposta pordesejabilidade, viabilidade e capacidade também chamada de triângulo de ouro. Sealgumpontodatríadeforfracoemumproduto,provavelmenteelefracassarácomotempo.

Passoapasso

Seuslivrosdetecnologiaparecemdoséculopassado?

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á emsuasmã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?

.

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

OEngenheiroouDesenvolvedordeSoftwareéoresponsávelporefetivamenteconstruiroproduto.Éimportanteseupapelnafasededescobertadoprodutoparadizeraogerenteeaodesignerdeinteraçãooqueépossívelserfeito,avaliarocustodasdiferentesidéiaspropostaseajudaraidentificarasmelhoressoluções.Ésuaresponsabilidadedefiniratecnologiaearquiteturamaisapropriadaparadesenvolverumprodutodequalidade.

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, "Das coisas que as pessoas desejam e que sustentará o negócio, o que pode serconstruí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

.

1. Desenhartriângulodeouronacartolina;

2. Escreverpontospositivosenegativosdedesejabilidadeecolocarnotriângulodeouro;

3. Escreverpontospositivosenegativosdeviabilidadeecolocarnotriângulodeouro;

4. Escreverpontospositivosenegativosdecapacidadeecolocarnotriângulodeouro;

5. Verifique se épossível resolverospontosnegativosdequalquer ladodo triâ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

.

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!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Agoraéamelhorhoradeaprenderalgonovo

.

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

.

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;Entrevista com clientes. Clientes nem sempre é o mesmo que usuário. Por exemplo, em umprodutodeCRM,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 queapenas ligeiramente diferente dos demais. Nessas entrevistas o designer deve então alinhar essasvisões,inclusivecomasdosusuárioseclientes;Orçamentoecronograma:Oque sairdesse tópicopermitirá saber o escopode esforçododesign eservirácomosubsídioparaqueogerentedecidaoquantoinvestirempesquisadeusuário;Limitações técnicas: Entender claramente o que é viável de fazer dado o orçamento, prazo elimitaçõestécnicas;Objetivosedirecionamentosdonegócio:Éimportantequeodesignerentendaquaissãoosobjetivosdonegócio,parasaberlevantarpontosdedecisãoquandoapesquisacomousuá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?

.

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.

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

Business!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Pesquisa não tem como foco um ou outrométodo. Pesquisas são, sobretudo, questionamentos erespostas.Osmétodossãoapenasosmeiosutilizadosparaobteressasrespostas.Ouseja,nãoexisteummétodo que deve sempre ser aplicado. Diferentes métodos têm diferentes propósitos e, em algumas

Stakeholders

Agoraéamelhorhoradeaprenderalgonovo

4.2MÉTODOSEPROPÓSITOS

.

situações,maisdeummétodopodeserusadoemumapesquisadedesign.

Abaixoestãoalgunsmétodosequandoémaisindicadooseuuso:

Figura4.1:Tabelademetodosepropositos

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

Aentrevistapermiteonhecerascaracterísticasdepessoas,suaspreferências,opiniõesenecessidades,permitindoqueoentrevistadoexprimasuasideiaseforneceumcontexto.Paraquehajarapportentreambos,oentrevistadordeveserempático.

Parasabermais

4.3ENTREVISTAS

.

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

A simpatia,pordefinição, é a compreensãodooutro combase emnossa experiência,oquepodelevaraumafalsacompreensão.Porexemplo:ApessoaAsedivorcioueparaela foio fimdomundo,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,olhandocomseus olhos. Cognitivamente émais difícil,mas não impossível.Há um gasto considerável de energia,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.

Osdesignersdeinteraçãonãosãoexigidosquefaçampesquisas.Muitasvezeselesusamsuaintuição,conhecimentoeexperiênciaparadesenvolverprodutoscomumaboaexperiênciaparaousuário.

Em projetos menores, mais simples ou com prazos e orçamentos bem limitados, essa é umaabordagembastante adotada.Contudo, para projetosmaiores emais 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.

Aspessoasorganizamas coisasdemaneiramuitopessoal, sendoassim, a ideiadoCardSorting éexplorar diversas formas de categorizar itens e determinar aquela que funciona melhor com o seuprojeto.Muitasvezeseleéutilizadoparamelhoraraorganizaçãoatualquenãofunciona.

SimpatiaXEmpatia

DesignerdeInteraçãoVsPesquisas

4.4CARDSORTING

.

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

Figura4.2:Cardsorting

Vocêsolicitaàspessoasqueclassifiquemoscartõesempilhasdeacordocomoquehádesemelhantee descrevamos grupos os quais fazemparte (Card Sorting aberto).Ou você pode dar às pessoas umconjunto de cartas de conteúdo além de um conjunto de categorias e pedir-lhes para classificar oscartõesnascategoriaspré-determinadas(CardSortingfechado).Oresultadoéaplicadoaoprojeto.

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

Osprincipaispassossãoosseguintes:

Comofunciona

Benefícios

EtapasdoCardSorting

.

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

Card sorting ajuda o time a entrar num consenso, já que cada integrante pode ser uma visãodiferentedecomoainformaçãodeveserapresentada.

Existemdiversasferramentasnomercadoquepermitemolevantamentodeinformaçõessobreosusuáriosqueacessaoseuwebsite.Algumasdelas:

CrazyEggGoogleAnalyticsKissMetricsHotjar

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

CasadoCódigo,ebookcompreçodeebook.

Quandopensamosemrecrutamentoparatestesepesquisas,contratarumaempresaespecializadaé

Consenso

Ferramentas

EditoraCasadoCódigocomlivrosdeumaformadiferente

4.5RECRUTAMENTO

.

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 interessadas emparticiparde testes epesquisas.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.Antesdeefetivamente fazeroconviteparaparticipardapesquisa,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,mesmo que 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...

.

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:podeseratravésdeplanilhas,tabelas,postitsgrudadosemumquadrobranco,etc.Eaidé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

.

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

Quandoforrealizaraentrevista(passo4)nãopodemosnosesquecerde:

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

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex-aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

JáconheceoscursosonlineAlura?

.

CAPÍTULO5

"Épocadifícilanossanaqualémaisdifícilsequebrarumpreconceitodoqueumátomo"--AlbertEinstein

Coletar todosos tiposdedados sobre seus usuários pode ser extremamente valioso,mas às vezesvocêpodeperderdevistaaspessoasreaisportrásdetodasasestatísticas.Vocêpodetornarseususuáriosmaisreais,transformando-osempersonas.

Personas sãomodelosdescritivosdeusuárioscriadosdedadosdepesquisasquenos fornecemumaformadeentendercomoosusuáriossecomportam,comoelespensam,oqueelesdesejameporque.

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

Essesmodelosnãosãopessoasreais,massãobaseadosemcomportamentosemotivaçõesdepessoasreais.Personassãoatualizadascomopassardotemposemprequenecessário.

Colocandoumrostoeumnomesobreosdadosdepesquisasdeusuários,apersonapodenosajudaramanter os usuários emmente durante o processo de design, aomesmo tempo em que cria umalinguagemcomumquefaçasentido.Esta técnicapermiteoDesignCentradonoUsuário e sua forçaestaemtrazeraodesigndiscussões.

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

PERSONAS

5.1DESIGNCENTRADONOUSUÁRIO

.

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

CasadoCódigo,ebookcompreçodeebook.

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;Jobdescriptionoufunções,poisfunçõessãodefinidaspelastarefasqueaspessoasfazemenã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émpara toda a equipemultidisciplinar.Personas:

Tornamexplícitasuposiçõessobreosusuários,criandoumalinguagemcomumcomsignificado

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

Permitemquevocêfoqueumconjuntodeusuáriosespecíficos(quenãosãovocê!)ajudandonatomadademelhoresdecisões

EditoraCasadoCódigocomlivrosdeumaformadiferente

5.2OQUEPERSONASNÃOREPRESENTAM

5.3BENEFÍCIOS

.

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

Apersonadeve ter comobasedadosdepesquisae, ainda sim, seessesdadosestiveremmuitodesconectados,aequipenãoteráconfiançanela.

Mácomunicaçãodepersonas

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

Aequipenãosabeutilizá-las

5.4IMPEDIMENTOS

.

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex-aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

Todosos sereshumanospossuemmotivaçõesqueguiam seus comportamentos; algunsóbvios eoutrosultis.Éfundamentalqueaspersonascaptemessasmotivaçõesnaformadeobjetivos.

OinsightfundamentaldeCoopereraodequeaspersonastinhamobjetivosecomportamentosquepoderiam ser atendidos por produtos através do design para seu comportamento, garantindo assimmaiorprobabilidadedodesignserbemsucedido.

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.

OBJETIVOSDAPERSONAOsobjetivosqueenumeramosparanossaspersonassãoanotaçõesabreviadasquenãoapontamapenasparapadrõesdeusoespecíficos,mastambémfornecemumarazãoparaaexistênciadessescomportamentos.Compreenderporqueumusuáriorealizadeterminadastarefasdáaosdesignersgrandepoderdemelhoraroumesmoeliminarastarefaseaindaassimalcançarosmesmosobjetivos.

JáconheceoscursosonlineAlura?

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.

Querendo aprender aindamais sobre? Esclarecer dúvidas dos exercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

Consulte as vantagens do cursoUX e Usabilidade aplicados emMobile eWeb

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.

Umaoutramaneiradesecriarumapersona,principalmentequandoqueremospassarapenasumaideologiarápidaparaaequipe,édesefazerumapersonamaissimples,emformatodecartão.

5.6CRIANDOPERSONAS

5.7NÚMERODEPERSONAS

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

5.8PERSONASADHOC

5.9PERSONASIMPLES

.

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

.

Figura5.2:Exemplo-Persona

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

Ela é uma solução de contorno para a persona comum, ou seja, é aconselhável que não seja algodefinitivoequesuasinformaçõessejamvalidadascomusuáriosreaisposteriormente.

Contudo,émelhorumaproto-personanamão,doqueduaspersonasvoando.

Éinteressantequeaproto-personapossuaasseguintesinformações:

Umapersonamaissimples

Conteúdodaproto-persona

.

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 ajudamanortear o timenamaioria dasdecisõesqueenvolvemoprojeto.Aproto-personaéinteressanteparacomeçaraintroduziraculturadeDCU(DesignCentradonoUsuário)naempresa,porseralgobaratoemaissimplesdeserdesenvolvido.

.

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

CasadoCódigo,LivrosdeTecnologia.

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;

Seuslivrosdetecnologiaparecemdoséculopassado?

5.11GAMESTORMING-CRIANDOPROTO-PERSONAS

Objetivo

Ambiente

Regras

Passoapasso

5.12OSSETEPASSOSPARACRIARPERSONAS

.

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ínuae rotulamosdoisvaloresextremoseopostos.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

.

escolhas.Umexemploseriaavariável"preferênciadepagamento"quepoderiaterasopções"parcelado","àvistasócomdesconto"ou"àvistamesmosemdesconto.

Agorajápodemosmapearcadaparticipantedapesquisadentrodessasextensõesdevaloresdecadavariável.Amelhor formaéver todososparticipantesparaumavariá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á podesignificar um padrão de comportamento que será a base para uma persona. Quando achar queidentificouumpadrão,procureporoutros.

Mas cuidado que alguns aparentes relacionamentos podem induzir a falsos padrões. Perceba osrelacionamentosquerealmentefazemsentido.Porexemplo,háumalógicaseospadrõesapresentaremquepessoasquecompramfrequentementenormalmentecompramparcelado.Masnãofazsentidoterumpadrã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

.

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.

Sintetizarosobjetivoséapartemaisimportantedessepasso,jáquesãoessesobjetivosquequeremosqueaaplicaçãoqueestamosdesenhandoatenda.Umaformadeinferirosobjetivoséobservarasaçõesqueaspessoas-decadaagrupamentoque levouaumpadrão- fazemeporqualmotivo:comoestãoagindoesecomportandoatualmente?Oqueelasquerematingircomessasações?

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

Em seu livroEmotionalDesign, Donald (Don)Normam define três processos cognitivos: 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

.

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 umounenhumobjetivodevidaemumapersonaé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,vejaseelasdiferemumadasoutrasemaomenosumcomportamentosignificante.Seduasoumaispersonasestãomuitosimilareseaúnicacoisaqueasdiferesãoquestõesdemográficas,procureeliminarumadasduasouverseépossívelajustarascaracterísticasparaficaremmaisdistintas.

Osobjetivosdeexperiência

Objetivosfinais

Objetivosdevida

Passo5:Checartodooconjuntodepersonasparaeliminarredundâncias

Passo6:Desenvolveranarrativa

.

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!

Depois de identificado uma ou mais personas, é preciso determinar o tipo de cada uma. Asprincipais são a persona primária e a secundária, mas existem vários outros tipos, como a negativa,suplementar,servedpersona.

Aprimáriaéaquelaqueprecisaseratendidadetodojeitopeloproduto.Elanãoficarásatisfeitacasoo design seja feito para qualquer outra persona. Se fizermos a persona primária feliz, as outras nã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, na medida do possível,acomodeasnecessidadesdasecundária.

Passo7:Determinartiposdepersonas

Primária

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?Seexistirempersonascomnecessidadesmuitodiferentes,provavelmente teremosmaisdeumapersonaprimáriaecadaumaprovavelmenteterásuaprópriainterface.

EVITECARICATURASÉessencialqueapersonanão sejaalgocaricaturadoouestereotipado.Mesmosendoum"personagem",eladeveserrealistaeplausível,equecaptureaessênciadotipodeusuá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

.

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

Business!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Paraentenderasnecessidadeseobjetivosdousuárioafimdemelhoraroprodutoouserviçoexisteuma ferramenta visual que descreve o perfil desse usuário de maneira simples e fácil, o Mapa 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?

Agoraéamelhorhoradeaprenderalgonovo

5.14MAPADEEMPATIA

Penso

Escuto

Vejo

Faloefaço

Dores

.

Quaisseusdesejos?Oqueelealmejaatingir?Comoelepodemedirseusucesso?

Éinteressantetambémaescolhadonomeedaidadedesseperfilhipotético,paraqueelese tornemaiscrí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

.

Figura5.6:Templatepersona-Xtensio

.

.

Figura5.7:Exemplodepersonapagamentoeletrônico

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

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

Discutasobreanecessidadeounãodenarrativasdaspersonas.

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

CasadoCódigo,ebookcompreçodeebook.

Terousuárioprimáriomaispróximodotime.

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

45minutosdeduração.

5.16DISCUSSÃO:ASNARRATIVASSÃOREALMENTENECESSÁRIAS?

EditoraCasadoCódigocomlivrosdeumaformadiferente

5.17GAMESTORMING-CRIANDOPERSONANODIAADIA

Objetivo

Ambiente

Regras

.

1. Comaspesquisasemmãos,cadaintegrantedotimeanotaemumpost-itonomeeumarespostadapergunta;

2. Umintegrantedotimeagrupaospost-itsnaparede;

3. Emfrenteaospost-itsosintegrantesdiscutemascaracteristicasdapersona,conformevaidefinindocadapontoumintegrantedotimeanotaemumpost-itcadacaracteriscadapersonaprimáriaquesendodefinida;

4. Agorabastarealizaranarrativaoudiaadiadapersonaemumafolharacunho;

5. ColoquetodososdadoslevantadosdapersonaprimárianafolhaA4.

Passoapasso

.

CAPÍTULO6

"Eduquemososjovensparaquenãosecondenemoshomens"--FriedrichNietzsche

Depoisdedefiniroprojetoerealizarapesquisadedesign,comojáditoanteriormente,odesignerdevedar forma e significado aos dados obtidos.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.Masquandootime 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

.

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. Incluem apenas 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 asnecessidadesdaspersonas criadas, sendo assim, apersona éum instrumentopoderosopara validaromodelometalescolhido.

6.1MODELOMENTAL

Característicaschave

Mudalentamente

ValidadoporPersonas

ExemplodeModeloMental

.

Umexemploéomodelomentalparaocomponente"carrinhodecompras"deumalojaonline,queéodeumcontainer.Essemodeloinfluenciatantoodesigndocomponentecomoalinguagemqueéusadana interface.Dessa forma,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 demarcação das coisas que vai querer comprar depois oumostrar paraamigos(comomarcarapáginadocatálogo).

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

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

Cenários sãonarrativasque fornecemumamaneira rápidae eficazpara imaginaros conceitosdedesigncasooprodutotivessesidoconstruí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-asadiscutireaparticipar,obtendoassimummaior feedback

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

6.2CENÁRIOS

Linguagemcomumefácildeentender

.

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 como cenário de primeira utilização: o quê acontece quando personasencontramoprodutoouserviçopelaprimeiravez?

EXEMPLO:UMCENÁRIOPARALOJAVIRTUALAlicequercomprarpresentedeaniversárioparaumamigo,masnãotemnadaemmente.Elasabequeelegostadecozinhar.Elaentraemumalojavirtualedeartigosdiversoseolhaosprodutosemofertaelançamentosqueaparecemnumaáreadeprodutosdaprimeirapágina.Elavêalgorelacionadoalivrosdeculináriaeachaquepodeserumaboaideia!Quaistiposdelivrossobreesseassuntoestãodisponíveis?Qualdelesseriaumbompresente?Elaprocura algona lista de produtos relacionados ao tema.A listamostra uma imagemde capadolivroealgumasoutrasinformaçõescomotítulo,autor,preço.Alistaestaordenadaportítuloeelaordena por preço, do menor para o maior, porque não quer gastar muito. Ela vê três livrosinteressanteseselecionaoprimeirodeles,informaçõesmaisdetalhadassobreolivrosãomostradasemumaáreadedetalhesdoprodutoeelalêasopiniõesqueoutraspessoasjáderasobreele.Elanãogosta desse primeiro livro e volta a listagempara selecionar outra. Esse segundo ela achou beminteressante,masparaelaenãoparaoseuamigo,entãoquermarcá-loparapodercomprardepois.Finalmenteelaencontraumlivroqueoamigodelaprovavelmentevaiadorar.Naáreadedetalhesdoprodutoelaclicanaopçãoparacomprareoseucarrinhodecomprasémostradojácomolivroincluído.Elapensaemvoltarparacomprartambémaquele livroparaela,masacabadesistindoeprossegueparapagaracompra.

Ocenáriodemaisaltoníveléchamadocenáriodecontexto.Comotudoéfeitosobopontodevistadapersona, as coisas acontecem "magicamente",nãohavendoanecessidadedescrever comoas coisas

Dãoinícioaoplanodeescopo

Deondecomeçar?

TiposdeCenário

.

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 bolinhas para votar, primeiro os votos positivos (obrigatórios) e em seguida o negativo

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

ocenárioescolhido.

Análisede tarefas é especialmenteútilparavalidar seodesign suporta todasas tarefas requeridaspelaaplicação,sejamelasdosrequisitosdonegóciooudasnecessidadesdosusuários.

6.3GAMESTORMING-CRIANDOCENÁRIO

Objetivo

Ambiente

Regras

Passoapasso

6.4ANÁLISEDETAREFAS

.

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.

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

CasadoCódigo,LivrosdeTecnologia.

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

FLUXODETAREFASDetalha comoumusuáriovai completar todas as tarefas emumaaplicação,docomeçoaofim.

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

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

Seuslivrosdetecnologiaparecemdoséculopassado?

6.5FLUXODETAREFAS

.

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

.

Dados:Objetoseinformaçõesqueousuárioprecisaver.

Funcionalidades:Operações ou ações que os usuários farão comos dados ou em resposta a eles.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 tarefas a seremexecutadas ela equipe são escritasno formatodeUserStories, ousimplesmenteHistórias.Essas,sãopedidosdeitensdevalorparaoprojetoqueseestádesenvolvendoecontémtrêsinformaçõesimportantes:

porqueéimportantequeosistematenhaessafuncionalidade;quetipodeusuáriosebeneciamaiscomessafuncionalidade;objetivamente,oquesequerqueosoŸftwarefaç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

.

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

Business!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Umaboahistóriadevepoderser lida flžuentemente,comoumahistorinhamesmo.Tomecuidadoparanãoescreveramotivaçãoparaaconstruçãodahistóriadavisãodeumapessoaedizerqueomaiorinteressadoéoutro.Vejaummauexemplodehistória:

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

Umapequenaalteraçãodagrafiafazmuitomaissentidoetornaaleituramaisžfluente:

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

Criarhistóriasretiradasdoscenáriosquedesenvolvemosnoexercícioanterior.

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

Agoraéamelhorhoradeaprenderalgonovo

6.8ESCREVENDOBOASHISTÓRIAS

6.9GAMESTORMING-CRIANDOHISTÓRIASCOMFOCONOUSUÁRIO

Objetivo

Ambiente

.

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,aopinião do cliente também precisa ser levada em consideração. Qualquer falha na definição dosobjetivosoumesmofaltadeautomatizadoresdeprocessospodemresultaremretrabalhos,insatisfaçãodoclientee/oudesmotivaçãodaequipe.

Regras

Passoapasso

6.10EQUILÍBRIOENTRECLIENTEEUSUÁRIO

.

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

Edetodososblocosdaferramenta,apropostadeexperiênciaédefatoocoraçãodetudo.Estratégicoe subjetivo, pode ser o alinhamento de uso das expectativas do cliente e do usuário. Até mesmo anecessidadequeoprojetoestásolucionando.

.

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

CasadoCódigo,ebookcompreçodeebook.

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.

Adescriçãodeum interaçãoou ação como sistema é o que chamamosde feature. Por exemplo,

EditoraCasadoCódigocomlivrosdeumaformadiferente

6.11GAMESTORMING-UXCANVAS

Objetivo

Ambiente

Regras

Passoapasso

6.12FEATURES

.

escrever uma mensagem pra compatilhar um ideia, pensamento ou conteúdo relevante dentro doTwitteréumfeaturequechamamosdetweet.

Toda feature (funcionalidade) tem que atender um objetivo (necessidade) que seja claro erelacionadoaumapersonaouproto-personadoseusistema.Poressemotivo,antesde sairpensandonasfeaturesdosistema,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.13GAMESTORMING-BRAINSTORMDEFEATURESCOMOBJETIVOS

Objetivo

Ambiente

Regras

Passoapasso

.

Figura6.4:Proto-personaseseusobjetivos

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex-aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

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

JáconheceoscursosonlineAlura?

6.14PRIORIZANDOFEATURES

.

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

.

3. Priorizarashistóriasnocanvas.

Figura6.5:Prioridades

.

CAPÍTULO7

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

Nas sessões anteriores, foram apresentadas partes do processo de desenvolvimento do produto,comodescobertaedefiniçãodoproduto,ea identificaçãodosrequisitosdedesign.Apartirdeagora,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 relacionamentosentreelas,ouseja,oqueumamudançaemumaárea influencianasoutras.Deumavisãoparaoutra,pode-semudartodasasáreasouapenasumaprincipal.

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

DOSREQUISITOSAODESIGN

7.1ESTRUTURAGERAL

.

Figura7.1:Exemploderabiscoframe

Odesignéumprocessoincrementalquevaisendorefinadoacadaiteração.

.

Figura7.2:Exemploderabiscoframe

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

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

CasadoCódigo,ebookcompreçodeebook.

CenáriosdeValidação

EditoraCasadoCódigocomlivrosdeumaformadiferente

.

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

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

Depoisdeescolhidoumoudoisestilosvisuais,deve-seaplicá-losnastelaschavesdaaplicação,paradefiniraquelequemelhoratendeaodesigndeinteração.Nessafase,odesigndeinteraçãodessastelasprecisaestarmaiselaborado,comdetalhessuficientespararefletirmelhorodesignvisual,por isso,osesforçosdeinteraçãoevisualprecisamestarsemprealinhados.Comumdesignmaisconcreto,émelhorparafazeraavaliaçãodaspossibilidadesdasoluçãopropostaetambémdeobterfeedbackdosenvolvidosnoprojeto.

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

Éumavisãodetalhadadeumapartedoproduto, incluindo todososcomponentesdeuma telaecomoelesseencaixamjuntos.

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

Wireframes devem esboçar a forma do produto, moldando o conteúdo, as funcionalidades e osmeiosdeacessarounavegarentreeles.

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 comoquadradoscomum"X"atravésdeles(chamado::placeholders::)comumaindicaçãodoqueelesignifica,comocomumarepresentaçãomaisreal.

Asfuncionalidadesconsistemdoscontrolesnecessáriosparaexecutarumatarefabemcomooqueaaplicaçãoapresentaemrespostaaousodessescontroles:sãobotões,rótulos,caixasdetexto,checkboxes,

7.2REFINANDOODESIGN

Wireframes

Wireframe

.

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

Todosesses componentesda interfaceprecisamestardocumentadosnowireframemostrando 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-o a detalhar ainda mais. Mostre no próprio wireframe como deve ser ocomportamentodecadafuncionalidadeecoloqueconteúdosreais.Váriasferramentasdeelaboraçãodewireframespermitemquevocêdesenvolvaumnívelexcelentedefidelidadevisualefuncional,inclusiveservindo como protótipo da sua aplicação. Muitas vezes o próprio wireframe é usado em testes deusabilidadeoucomoespecificaçã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

.

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.

Aideiaégerarnovasideias.Aspartesinteressadasnoprojeto,sejadesenvolvedor,gerenteoumesmooprópriocliente,buscamsoluçõesdeformarápidadesenhando-asemumpapelempoucosminutos.Omotivopeloqualdeveserfeitorapidamenteéquequandotemospoucotempopararabiscar, focamosmaisemideias,enãoemdetalhes.

Cada 8 steps é uma folha, dividida em oito partes iguais, e cada uma dessas partes é uma teladiferente do aplicativo. Sendo sempre focado em resolver umahistória por vez, essa ferramenta devemostrarofluxodenavegaçã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

.

Duraçãode80minutos;Cadaintegrantedotimedevefazerum8stepsmesmosemhabilidadesartísticas.

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

querealizarcomafinalidadederesolverahistó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.

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex-aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

Regras

Passoapasso

JáconheceoscursosonlineAlura?

.

CAPÍTULO8

"Omundojáestácheiodeferidaseinfortúniosmesmosemguerrasparamultiplicá-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ção7-Flexibilidadeeeficiênciadeuso

PADRÕESEPRINCÍPIOSDODESIGNDEINTERAÇÃO

8.1ASDEZHEURÍSTICASDENIELSEN

.

8-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,visualeo tomdeescritaqueusuárioutilizapara se comunicar. Implementamos bastante esta heurística quando utilizamos uma seta, ícones eutilizamosacorvermelhaparaelementosnegativos.

UmsoftwarequeusaessaheurísticaéoPhotoshopemsuabarradeferramentas.

1.Visibilidadedostatusdosistema

2.Correspondênciaentreosistemaeomundoreal

.

Figura8.2:Exemplodecorrespondênciaentreosistemaeomundoreal

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

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

3.Liberdadedecontrolefácilprousuário

.

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

Figura8.3:ExemplodeLiberdadeecontroledousuário

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

Por exemplo,no fórumGUJ (Grupodeusuário Java), quandovamos responderumpostobotãoparaenviara respostasempreédamesmacor, tamanhoe texto.Oelementoparacancelara respostasempretemseuspadrõ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 sistemadesde o usuá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,ou seja,deixeo seu layout eo conteúdoomais simples ediretopossí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.

No formuláriode cadastrodoSpotify casovocênãopreenchaosdadosnecessários eledeixabemclaroquaiscamposestã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ção próxima do usuário e do elemento ou ação que tenha necessidade de uma explicaçãomaisdetalhada.

Porexemplo,noformuláriodepagamentodoWalmarttemumcampoprapreencherocódigodesegurançadocartão.Comonãoé algomuitoóbvio, temuma imagempróximaao campomostrandoondeficaocódigodesegurançadocartão.Essaéumaboaformadefazerumadocumentaçãofeliz.

10.Ajudaedocumentação

.

Figura8.12:Exemploajudaedocumentação

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

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.

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

8.2OUTROSPRINCÍPIOSPARAIMPLEMENTARINTERFACESEFICAZES

Apresenteasetapasdoprocesso

Façaumanavegaçãoclaraeeficiente

.

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

Organização - separa as areas mais e menos 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.

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

BotõeseLinks

.

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: resolveproblemas relacionados adisposiçãodos elementosdedados e funcionaisnatela.Consistedevisões,painéiseagrupamentos.Comportamental: usado em uma grande variedade de problemas relacionados a interaçõesespecíficascomoselementosfuncionaisededados.

Separesuastarefasprimárias,secundáriaseterciárias

Deixesuainterfacerápida

Mantenhaproximidade

Seletivamentecopieinteraçõescomunsejácomprovadas

Designvisualdevetertotalconexãocomodeinteração

Menosémais

8.3PADRÕESDEDESIGNDEINTERAÇÃO

Postural

.

Umaaplicaçãocompostura transitória significa queumapessoa ausaporumbreveperí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 relacionadas eosusuá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 soberanas devem ser otimizadas para uso em tela-cheia oumaximizada e, como serãoutilizadasporlongosperíodosdetempo,deve-setomarcuidadocomaapresentaçãovisual.Umdesignexcessivo,comousoexageradodecoresetexturas,podemseratrativosnoinício,mascomopassardotempotorna-secansativoparaquemusamuitoainterface.Namedidadopossível,mantenhaumestiloconservador.Pixelssãopreciosos.

Bons exemplos desse tipo de aplicações são processadores de textos, planilhas, clientes de e-mail,entreoutros.

Ospadrõesestruturais sã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.

Estrutural

.

Figura8.14:Exemploestrutural

Padrõesdeusonormalmentesãoidentificadosatravésdaobservaçãodecomoosusuáriosusamoselementosdeuma interfaceeemquãoútil esseselementos,e seuscomportamentos,estãosendoparaqueousuáriocompletesuastarefasmaisfacilmenteemaiseficientemente.Apósdescobriressespadrõ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

.

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,pode ser interessante colocarousuário emummodolineardeaçã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,deixandoa interfaceauto-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

.

Figura8.17:Exemplopermitringoerros

Undomulti-nível:Permitereverterfacilmenteumasériedeaçõesfeitaspelousuário.Cadaaçã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: ousuárioprecisa frequentemente vermais informações sobreumdeterminado itemnamesmatelaemqueestávendoo item.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.

.

Figura8.21:Exemplomostrandodados

Mouseovercomconteúdorico:Utilizadoquandoqueremosdaraousuárioapossibilidadedevermais informações, contextualizada, sobre um determinado item. Normalmente a informaçãoapresentadacontemumconteúdomaisricoqueapenastexto,taiscomográficos,linksouações.

Aopassar omouse emumpontodomapa,mais informações sãomostradas referente a esse ponto.Alémdetextos,algumasaçõestambémsãodisponibilizadas.

Figura8.22:Exemplomostrandodados

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.

Ao clicar em cada título, expande-se uma área commais informações (texto ou outros elementos),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 coluna Nome contém a árvore de hierarquia. Clicando no (+), os itens são expandidos e seusatributos(localização,descrição)sãomostradosnasdemaiscolunas.

Figura8.25:Exemplonavegaçãoemgrandebasesdedados

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.

A linha da tabela se expande para podermostrar algum conteúdo relacionado a ela,mas bastanteextensoparacaberadequadamenteemumacoluna.

Figura8.26:Exemplonavegaçãoemgrandebasesdedados

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

.

Figura8.27:Exemplonavegaçãoemgrandebasesdedados

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

Figura8.28:Exemplonavegaçãoemgrandebasesdedados

.

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.

Figura8.30:Exemplobuscaavançada

Buscaavançada

.

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

Parafazerabuscaéprecisoprimeiroescolherocontextodesejado.Nestecaso,seráparafotos.Apenasdepoisdeescolherocontextoéquesãomostradososcamposdeatributosespecíficosparaele.

Figura8.31:Exemplobuscaavançada

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

Filtrodeatributos para refinamentodo resultado.Neste exemplos, pode filtrar pormarcas, cidades,preços,etc.

.

Figura8.32:Exemplobuscaavançada

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 oumenosdetalhesououtros controlesque ajustamovolumeem sido conteúdo, apresentandomaisoumenosinformações.

.

Figura8.33:Exemplobuscaavançada

Naprimeiraimagem,aformadeexibiçãoéemlistaenasegunda,omesmoresultadoemtabela

Figura8.34:Exemplobuscaavançada

Sãopadrõesutilizadosquandoousuárioprecisainformardados.

Autocompletar:Utilizadoquandoousuárioprecisaentrarumainformaçãoemumcampotextoepodenãosaberexatamenteoqueinformaroutemgrandeschancesdedigitarincorretamente.

Entradaealteraçãodedados

.

Nesse exemplo, aodigitar "VENE"uma listaaparece com sugestõesque completamoqueousuá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 sercompletadadeumavez só,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ãomostradas 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émpode forneceraçõ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 formamaisconveniente.

Ocabeçalhomostraalgunsdadosque identificamoprojetoqueestá 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.

.

Figura8.40:ExemploInformaçãocentralizada

.

Figura8.39:ExemploInformaçãocentralizada

Apresentaçãodeinformaçõesusandográficos.Clicandoemumano(primeiraimagem)sãomostradosos dadosmês amês. E em cadamês, também é possível interagir para obtermais informações sobre oassunto(segundaimagem).

.

Figura8.41:ExemploInformaçãocentralizada

Exemplocommapas.Naprimeiraimagemvocêvisualizanomapaarotadeumpontoaoutro,feitadetransporte público. É possível interagir, arrastando a rota para alterá-la ou escolhendo algumas açõesdiretamente nomapa. Na segunda imagem, a rota feita com bicicleta. Em ambos os casos, o trajeto éapresentadotextualmenteetambémrepresentadovisualmentenomapa.

.

Figura8.42:ExemploInformaçãocentralizada

Painel:Essetipodepadrãoresolveoproblemadeterquefornecervisõesdistintasdeváriostiposdeinformação.Agrupe essas informações em uma única tela quemostre os dados-chave de uma formavisual apropriada, como se fosse uma fotografia. Escolher a apresentação gráficamais adequada paracadatipodeinformaçã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.

Algunsexemplosdepainéis,utilizandográficosdeváriostipos,mapas(primeiraesegundaimagens).Emalgumassituações(terceiraimagem),ousodetabelasaindaéomaisindicado.

.

Figura8.45:ExemploInformaçãocentralizada

Figura8.44:ExemploInformaçãocentralizada

.

Figura8.43:ExemploInformaçãocentralizada

É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ênciasdeumaaçãoqueelevaitomar.Cadaaçãodeveterexplicaçõesclaras,ospróximospassosprecisamestarvisíveis,casoexistam,edevefornecerfácilacessoafontesdedadosrelevantesparaajudarousuárionatomadadedecisão.

Guias

.

Figura8.46:ExemploInformaçãocentralizada

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

Nesse exemplo,o link levaparamais informaçõesqueajudaráousuárioadecidirqual cor escolherparaoanelusadonaembalagemdamedicaçãoqueeleestápedindo.

.

Figura8.47:ExemploInformaçãocentralizada

Ao passar omouse pela "?", abre um box com explicação sobre o que significa e qual a finalidadedaquelainformaçãoqueestásendosolicitadaaousuário.

.

Figura8.48:ExemploInformaçãocentralizada

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,a funcionalidadedebuscaemsipodeser facilmenteusadapelousuário,mas foicolocado um guia com questões que o ajuda a limitar o resultado da busca aos mouses que mais seadequamàssuasnecessidades.

Figura8.49:ExemploInformaçãocentralizada

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

Votação(votetopromote):Usadoquandoexisteanecessidadedepromover(ourebaixar)algumainformaçãoouitememumacomunidade.Forneçaumbotão,oualgumaoutraformadecall toaction,

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

Umexemploquepermitetantopromovercomorebaixarumitem(imagem1).Emalgunscasosprecisaserinscritoparavotar(imagem2).

Avaliação (rating): Quando o usuário precisa dar sua opinião ou dar sua nota sobre umdeterminado conteúdo,mostre itens clicáveis (umbastante utilizado são estrelinhas) comuma escalaclaradeavaliaçãoeoestadodessemecanismodeavaliaçãodeveiniciar"vazio".

.

Avaliação de itens de uma loja virtual.Uma área com as avaliações já realizadas e uma área quemostraoscomentários.

Figura8.52:Exemploavaliação

Acompanhamento(follow):Utilizadoquandoousuárioprecisaacompanharumaquestã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

Statusdeclassificação(ranking):Quandoexisteanecessidadedecomunicardentrodacomunidadeostatus/posiçãodeumusuário,forneçaessestatuspróximoàinformaçãosobreousuário.

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

Figura8.54:Exemplostatusdeclassificação

.

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

CasadoCódigo,LivrosdeTecnologia.

EntendernapráticasobreosprincípiosdeNielsen.

1. Duascoresdepost-its;2. Caneta.

Duraçãode30minutos.

Metadedeum time vai se tornar consultores de usabilidade 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.

Acriaçãodeumprotótipo éumpasso importante antesqueoproduto seja lançadonomercado.Alémdeservircomoumaferramentadecomunicação-assimcomooswireframes-protótipostambémtêmopropósitodeexploraçãoevalidação.

Seuslivrosdetecnologiaparecemdoséculopassado?

8.5 GAMESTORMING - COLOCANDO EM PRÁTICA OS HEURÍSTICASDENIELSEN

Objetivo

Ambiente

Regras

Passoapasso

8.6PROTÓTIPOS

.

PROTÓTIPO é ummodeloda aplicaçãoquedevepermitir que as pessoas omanipulemde algumaformaenãodeveserumsistemadesenvolvidocompletamente.

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

Comovalidação,ousodeprotótipospermite avaliar interações-chaveantesde construir todoumdesign 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

.

assimaqualidadedas respostasque sequerobter.E, se já existepadrõesvisuaisbemestabelecidos, afacilidadeparaaplicá-losemumprotótipoestimulaousodeumdeAFV.

AFF é mais adequado quando é necessário saber se as interações-chave funcionam, se o designimplementaosrequisitoscomoosanalistasesperame/ouparaqueotimededesenvolvimentoentendacomclarezaquaisosfluxosdaaplicaçãoecomoelasecomporta.Eprincipalmenteseoprodutoforumaaplicaçãomaiscomplexa,comriquezadeinterações,oAFFémaisapropriado.Também,domesmojeitoqueoAFV,émaisindicadoousodoAFFquandoaspessoasficamconfusosvendoapenaswireframes.

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,passandoporferramentasdeelaboraçãodewireframes,atécodificaçãocomHTML,CSS,Javascript,etc.Aescolhadependedeváriosfatores,comocusto,habilidadedequemvaidesenvolver,fidelidadequesequerobter,entre outros. Além disso, não é necessário se limitar a uma única ferramenta: pode-se começar compapel&canetapara concepção e exploração, validar comumprotótipode alta fidelidade funcionalnoAxure e validarmais uma vez, quando o design estivermais elaborado, com um protótipo feito emHTML/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;6. Régua;

AFF-Altafidelidadefuncional

Dimensãodeconteúdo

Ferramentas

8.7GAMESTORMING-PROTOTIPAGEMEMPAPEL

Objetivo

Ambiente

.

7. Ecriativade.

Duraçãode40minutos.

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

Business!Ex-alunodaCaelumtem15%dedesconto,sigaolink!

ConheçaaAluraCursosOnline.

Regras

Agoraéamelhorhoradeaprenderalgonovo

.

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.

Comousofrequentedessetipodemídiaograudeexigênciadeseususuárioscomrelaçãoainterfacecresceutantoquecercade60%dessesusuáriostendemaabandonarumapáginaseelanã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

.

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 tela do celularapenas comumamão e 15% comas duas, como issonão é uma regra, omaisindicadoéarealizaçãodetestescomusuáriosemcadaprojetoespecíficoparachegaremnúmerosmaisprecisos.

.

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

AAlura oferece centenasdecursosonline em suaplataforma exclusivadeensinoquefavoreceoaprendizadocomaqualidadereconhecidadaCaelum.VocêpodeescolherumcursonasáreasdeProgramação,Front-end,Mobile,

Design & UX, Infra e Business, com um plano que dá acesso a todos os cursos. Ex-aluno daCaelumtem15%dedescontonestelink!

ConheçaoscursosonlineAlura.

Em um formulário de cadastro, muitas vezes o usuário precisa escolher alguma opção paracontinuar. O tempo para escolher entre uma das opções aumenta proporcionalmente junto com onú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, comoquando vamos a algum restaurante com muitas opções no cardápio e demoramos um tempoconsiderávelparaescolherumprato.

Umexemplovoltadoparaweb,emumatelaemquedeve-seescolheruminvestimentodesejado:

Comoosusuáriosrealmenteseguramseusdispositivosmobile

JáconheceoscursosonlineAlura?

9.2LEIDEHICK

LeideHick

.

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

.

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áforadealcance.Elaacabousucubindoatelasmaioresde4"porcontadepressãomercadológicadosetor,os consumidores queriam telasmaiores. A solução foi "descer" a interface quando o usuário dá doistoquesnobotãohome,deixando-amaisalcancávelparaospolegares.

PorcontadaThumbZonequeoGoogle,comseupadrãode interfaceMaterialDesign,colocouocalltoactionemsuasaplicaçõesnapartedebaixodainterface,paratirarumapossívelbarreiradeusodousuáriocomaaplicação.MesmocasocomoburguericonnaAlura,localizadonaparteinferiordireitadatela.Emambasasempresasfoidescobertopormeiodepesquisasqueseususuáriosusavammaisocelularcomamãoesquerda,porissodothumbzoneespelhado.

.

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 nomundo 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

.

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

Asmicrointeractionssãofocadasemmelhoraraexperiênciadousuáriosemanecessidadedesecriarumanovafuncionalidadeparaoproduto.

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

.

Figura9.7:Regra-Duolingo

Comtodasasregras(quepodemser invisí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

.

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

.

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

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ésdetextos, tornandoa tipografiaumitemmuito importanteaseravaliado.Escolhendomal,seuconteúdopodesetornarilegíveloupassaramensagemerradaparaousuário.

Podemos separar famíliasde fontesemdiversosgrupos, edosdoisprincipais,oquediferedeumparaooutroéousodaserifa.

Figura9.10:Serifadaesemserifa

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

9.5TIPOGRAFIA

.

Pequenoornamentonasextremidadesdostipos(caracteres)

Fontesmaissérias,passamumaidéiadealgocommaiscredibilidade,remeteaalgomaistradicional.Umbomusodessas fonteséemgrandesblocosde texto, sejamimpressosoudigitais, como livrosoupostscommuitoconteúdo.Algumasfontes:

TimesNewRoman;Palatino;Georgia;Palatino;Monaco.

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

Helvetica;Arial;Verdana;OpenSans;SegoeUI.

Figura9.11:TimesNewRomaneArial

Serifa

Fontesserifadas

Fontesnãoserifadas

Outrosgrupos

.

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

.

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

Quando vamos abrir uma conta em um banco ou fazer um financiamento, normalmente oscontratosparecemmeioapertadosdemaisparaafolha.Issonãoéummeroacidenteouacaso.

Textosassimpassamessasensaçãodeapertoparadeixaro leitordesconfortável,assimele tendearetermenosoconteúdoaliescritoeoolhotendeafalharquandovaiparaapróximalinha.Nocasodecontratos,elesaindadeixamafolhasemmargensparareforçaressasensação.

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

Alturadalinha

.

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:

.

Figura9.15:Alturadelinhade1Xalturadelinhade1.5

escolhercombasenaidentidadedaempresa;nãodistorcer;

Outroscuidadoscomafonte

.

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áriotem

querealizarcomafinalidadederesolverahistó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

.

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.Eledeveestarintrinsecamenteligadoaodesigndeinteração,deveconstruiranarrativavisualdainteração.

Emvezde avaliar as idéiasdodesignvisual apenas considerandooque aparece ser esteticamenteagradável,deve-se focar emquãobemelas funcionam,emquãoefetivamenteele suportaosobjetivosdefinidosnosplanosinferioresdaexperiê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.Masparaqueocontraste funcione,asdiferençasdevemsersignificantes.Diferençassutisacabamcausandomaisconfusão.Contrastepodeserfeito,porexemplo,utilizandodiferentescoresoudiferentesfontesdetexto.

Odestaquenaárea"RecentWork"édadocomocontrastecriadopeloboxrosa.

DESIGNVISUAL

10.1OPRINCÍPIOC.R.A.P

Contraste

.

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 amesma idéia emqualquerparteda aplicação.Alémdisso, repetir elementos criaum sensodeunidade e gera interessevisual.Repetiçãodeveserconsideradatantoparaelementosgráficoscomoparatipografia,usorepetitivodefontesoumesmocores.

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

Repetição

.

Figura10.2:Exemploderepetição

Alinhamento fornece uma âncora visual e faz a página parecermais unificada.A regra básica doalinhamento é 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ível ver linhas imaginárias (ressaltadas emazul)quedefinemoalinhamentodoconteúdo.

Alinhamento

.

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.O conteúdoda seção tambémse relaciona como títuloatravésdaproximidadedo conteúdocomseutítuloedoespaçamentoumpoucomaiorparaotítulodaseçãoseguinte.

Proximidade

.

Figura10.4:Exemplodeproximidade

Alémdessas ferramentas, outrospontosprecisam ser levadas emcontaparaumbom trabalhodedesignvisual:

Tipografia:éumaescolhaimportantenodesignvisual,possibilitandonãoapenasalegibilidadedostextos como cria uma identidade visual para amarca. Proporciona tambémuma hierarquia nostextos, utilizando diferentes tamanhos e pesos para títulos, textos, comentários, disclaimers,

.

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.Ecomoúltimadica,eliminedolayoutqualquerinformaçãoquenãosejarelevanteparaseupúblico.

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

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émdodesignemsi(layoutfinaldetodasastelasdaaplicaçãoouatémesmoaprogramaçãodainterfacepronta),incluitambém toda a documentação e especificação realizada no decorrer do desenvolvimento do design: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.).

Além disso, os próprios wireframes, mesmo que não sejam navegáveis, podem especificar o

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

10.2ESPECIFICAÇÃODODESIGN

.

comportamentodecadaelementoatravésdeanotaçõesquesãofeitasnelesmesmos.

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

Equalqueroutradocumentaçãoelaboradaduranteoprocessodedesigndainterfacepodeservirdeapoionodesenvolvimentodaaplicação.

De qualquermaneira, nada substitui a eficiência de ter o designer sentado próximo à equipe deimplementaçãodoproduto, acompanhandodepertoodesenvolvimento, tirandodúvidasque 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,umaboaescolhade coresparao layoutpode influenciarousuáriodeváriasmaneiras,guiando-oporumcaminhodespertandosuasemoçõesemuitossentimentosúnicos.

Issoporqueascoresnãosãoumfenômenofísico,cadapessoainterpretaumadeterminadacordemaneira diferente da outra, é 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

.

Cheganumadeterminadaetapadoprojeto,ondeénecessário fazeraescolhadequaiscores serã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.

Essasrelaçõesentreascoressãogeralmentebaseadas,oupodemserfacilmentevisualizadas,nassuasposiçõesnocírculocromático:

.

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,emque você escolheuma cor base, e vai testando a regra quemais te agradar e fazer sentido como seuprojeto.

TeoriadasCores

10.4FACILITANDOESSAESCOLHACOMOADOBECOLOR

.

https://color.adobe.com

ComessaferramentavocêtambémconseguesalvarsuaspaletasnasuacontadaAdobeepuxarascoresdiretodoPhotoshope/oudoIllustrator.

Figura10.9:AdobeColor

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

Adobecolor

.

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

Comacorbaseescolhida,dadoasregrasdecombinações,podemosconcluirqueexisteumconjuntofinito de combinações consideradas agradáveis. Por issoque emalgunsmanuais de identidade visualacabamosnotandosemelhanç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.

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

CasadoCódigo,LivrosdeTecnologia.

Corecultura

Seuslivrosdetecnologiaparecemdoséculopassado?

.

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"

.

Querendoaprenderaindamaissobre?Esclarecerdúvidasdosexercícios?Ouvirexplicaçõesdetalhadascomuminstrutor?ACaelumofereceocursoWD-41presencialnascidadesdeSãoPaulo,RiodeJaneiroeBrasília,alémdeturmasincompany.

ConsulteasvantagensdocursoUXeUsabilidadeaplicadosemMobileeWeb

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.

No próprio computador do participante, no seu próprio ambiente de trabalho, permite quetenhamosumaidéiarealdeondeoprodutoseráinserido:elecompartilhaocomputador?Osrecursos,como acesso a internet, são satisfatórios? Qual a resolução de tela que ele usa? É frequentementeinterrompidoquandoestá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çãodoteste:nãoexisteinterrupções,osrecursosnecessáriossempreestãodisponíveis,oambientejá está preparado para gravar todos os diálogos e as expressões faciais do participante, alguns sãoequipados comaparelhosde eye tracking e, por ter aqueles espelhos especiais, pode-se colocar váriosobservadoressemqueoparticipantepercebaesesintacoagidooudesconfortávelnomomentodoteste.

VocêpodetambémfazerocursoWD-41dessaapostilanaCaelum

11.2ENVOLVIDOS

Local

Moderador

.

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ê testa comumúnicousuário, insights aparecemevocê já temaprendidoquaseumterçodetudooqueháparasabersobreausabilidadedodesign.Quandovocêtestacomumsegundousuário, vocêperceberáqueessapessoa fazquaseasmesmascoisasqueoprimeirousuário, assim já existe algumas sobreposições no que você já aprendeu.Mas, ainda assim, aparecem

11.3PREPARAÇÃOPRÉVIA

Anotarobservações

Ajustedoprotótipoentretestes

Elaborarrelatório

Númerodeparticipantes

.

coisasnovasquevocênãoobservounoprimeiro teste, entãoo segundoaindamostra alguns insights,mas já bemmenos que o primeiro. O terceiro teste fará muitas das coisas que já foi observado noprimeiroenosegundoteste,assim,adicionarámuitomenosinformaçõesdoqueosprimeirostestes.Eamedidaquevocê fazmais testes,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 osproblemas de usabilidade do produto, mas então porque Nielsen recomenda apenas 5? A principalrazão,segundoele,équeémelhordistribuirseuorçamentoatravésdemuitostestesmenoresemvezdegastá-lotodoemumúnicoeelaboradoestudo.

UmaúnicaressalvafeitapeloNielsenéquandoaaplicaçãotemváriosgruposdistintosdeusuários.Essaregrade5sóvalequandooprodutoseráusadoporpessoasqueusarãoaaplicaçãodeumamaneirasimilar.Se,porexemplo,otesteserádeumaaplicaçãoqueseráusadaporpaisefilhos,entãodoisgruposde usuários terão comportamentos suficientemente diferentes que torna-se necessário testar compessoasdessesdoisgrupos.Dequalquerforma,vocênãoprecisariaincluirtantosusuáriosnotestecomofariaparatestedeumúnicogrupodeusuários.Assobreposiçõesdeinformaçõesgarantiráummelhorresultadotestandoumnúmeromenordepessoasemcadagrupo.Nielsenrecomenda:

3ou4usuáriosdecadacategoriaseestivertestando2grupos;3decadacategoriaseestivertestandotrêsoumaisgrupos.

OseguintescriptéumaadaptaçãoelivretraduçãodolivroRocketSurgeryMadeEasydeSteveKrug

Exemplo:scriptparaTestedeUsabilidade

.

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ós estamos gravando o que acontece na tela e também nossas conversas. A gravaçãosomenteseráusadaparanosajudaradescobrircomomelhorarositeenãoserávistaporninguémquenãoestejatrabalhandonoprojeto.Emeajudabastante,poisnãoprecisareitomarnotadetudo.

Casooutraspessoasestejamobservandooteste:Alémdisso,háalgumaspessoasdotimededesignobservandoestasessã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 e me diga o que faria com ela: o que lhe chamaatenção,quetipodesitevocêachaqueé,oquepodefazeraquieparaqueserve.Apenasolheumpoucoefaçaumapequenanarrativa.

Podebaixaresubirabarraderolagem,masnãocliqueemnadaporenquanto.

NOTAPARAOMODERADORDeixe-oexaminarefalarpornomáximo3a4minutos.

Obrigada.Agoraeulhepedireiparatentarfazeralgumastarefasespecíficas.

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

.

buscanã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 um minuto 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.

11.4GAMESTORMING-TESTEDEUSABILIDADE

Objetivo

.

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

Duraçãode40minutos.

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;

Obrigadoporparticipardenossotestedeusabilidade.

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

Porfavor,leiaotermoabaixoeassinenolocalindicado.

Ambiente

Regras

Passoapasso

Exemplo:TermodePermissãodeGravação

.

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

EMPRESAuseestagravaçãoapenasparausointerno,comopropósitodemelhorarainterfacesendotestada.

Nome:

Assinatura:

Data:

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

CasadoCódigo,LivrosdeTecnologia.

Termo

Seuslivrosdetecnologiaparecemdoséculopassado?

.