IHC - Prototipação

então Eh hoje a gente vai falar sobre prototipação de interfaces e essa é a gente Então tá já falou sobre a introdução a interação no computador né sua parte de fundamentos que essas em verde depois a gente falou sobre outros sobre design sobre o design conceitual né sobre estilos falamos de algumas formas de fazer op ação e agora a gente tá conversando então sobre design em ihc E aí nós gastamos um tempo falando sobre análise contextual sobre projeto de interfaces e agora então é a hora de fazer a prototipação então lembrando a gente tem sete

questões de concepção né e a gente tá tar respondendo elas uma a uma ao longo do semestre então e a gente já respondeu As cinco primeiras né então entender Quem são os usuários Quais são as tarefas adas Qual é o contexto de realização dessas tarefas né tudo isso é a parte de análise contextual depois a gente tem a parte que é a parte de projeto mesmo que quando a gente decide né Quais são as ações que o usuário vai realizar quais são os comandos que ele vai dar pro sistema Como é que os componentes da

interface vão ser apresentados e agora então o que a gente quer é provocar as críticas e sugestões dos usuários E para isso a gente precisa de protótipos bom então Eh Essa é a terceira etapa né do do processo de desenvolvimento em interação no computador e aí nesse processo eh de prototipação a gente vai ver três tipos de protótipo né os protótipos em papel as maquetes que são feitas em editores de recursos e os protótipos funcionais Então hoje em dia quando a gente trabalha com eh a parte de maquete editor recurso Eles já são integrados os

o no mesmo no mesmo software que nos ajuda a criar os protótipos funcionais então Eh quando a gente fala em protótipo né Eh a gente então tá falando nesses três tipos aí como Eu mencionei osos os maquetes em papel né ou outro material os protótipos editores depois os funcionais eh e queria chamar atenção pro primeiro tipo de protótipo que são os protótipos em papel que a gente também costuma de chamar de protótipo de baixa fidelidade e essa figura que a gente tem aí ele é um protótipo da do do Palm Top né que foram na

verdade os precursores dos celulares como a gente conhece eles hoje né um celular uma vez era usado para telefonar e e depois ele virou um computador de bolso que a gente chama de de Handheld e e os primeiros que apareceram né foram os os Palm pilots e E aí o primeiro teste que se fez foi com o protótipo de madeira que é esse que a gente tá enxergando aí então é toda a interação a gente não tinha essa tela touch com com o dedo né a as telas dele eram eram a gente interagia através de

uma canetinha e que ficava enfiadinha assim do lado e E aí a primeira coisa que se fez foi tentar entender se as pessoas usariam esse tipo de tecnologia né se isso fazia sentido e aí portanto né a ideia foi fazer um protótipo em papel colado no suporte de madeira que era mais ou menos do mesmo tamanho né com as mesmas dimensões do que seria o Palme E assim a gente consegue ver o que que as pessoas fazem com ele né Elas botam no bolso elas carregam na mão elas derrubam no chão né o que acontece

então Eh esse é um jeito trabalhar com com esse tipo de protótipo né então físico ou ou mesmo em papel Ele é bem importante na fase inicial porque ele nos permite testar uma porção de coisas sem precisar desenvolver a tecnologia né O que acaba sendo caro e tomando tempo então é uma maneira da gente provar um conceito verificar se ele funciona né então a gente diz né Por definição que um protótipo é a representação concreta do sistema que a gente tá propondo E aí como eu falei ele pode aparecer e aparece em diferentes níveis de

fidelidade então a gente começa com eles bem simples bem toscos eh para tentar entender algumas coisas né E aí depois né validado Essa O protótipo nessa primeira etapa então a gente parte fazer uma uma outra implementação né então basicamente a ideia do protótipo é a gente implementar Aquele modelo abstrato de interface que a gente concebeu lá quando fez naquela fase de projeto então um um protótipo ele vai ser composto né pelos objetos de interação que são os widgets né que vão ter comportamento e a A ideia é a gente poder simular esse comportamento pela aparência

e pela sequência eh das Telas né se for o caso ou a sequência de uso da interface né então às vezes ela é por voz então não tenho telas né então às vezes ela em 3D eu tenho gestos então cada protótipo é diferente do out então a pergunta que a gente se faz aí é por que prototipar né e e basicamente por que prototipar é porque a gente quer ter o feedback né então basicamente a gente quer Eh teve a ideia né construiu alguma coisa e agora eu quero ver se essa se isso que eu

construí vai ser aceito pelos meus usuários né então a ideia de fazer avaliação e ter o feedback e isso a gente viu todas as aulas a gente fala sobre isso né o tanto que é importante a gente ter oed feedback do usuário então Eh A ideia é que com o protótipo a gente concretiza aquilo que antes era uma ideia e aí os stakholders todos eles vão poder ver vão poder segurar eles interagem com o protótipo fazem isso de um jeito muito mais fácil do que com um documento com uma descrição ou ainda com um desenho

A ideia é que com o protótipo os membros da equipe eles conseguem também entre eles se comunicar de forma eficaz né trocar ideias e e e e já melhorar a O protótipo né melhorar o produto né Eh em em cada etapa de de prototipação então A ideia é que a gente consegue testar né Eh novos conceitos O protótipo também ele é um incentivo a à reflexão né O que é bem importante no design então numa fase de concepção inicial a gente tem eh lá pelas tantas um designer que propõe alguma coisa o outro rapidamente consegue

evoluir daquela ideia ou propor uma ideia que que vai ser uma alternativa aquela aí os dois juntos conseguem misturar então eh ele ajuda a gente a desenvolver a criatividade e e a reflexão sobretudo em grupo então basicamente o que acontece é que os protótipos eles respondem a perguntas né e eles dão suporte pros designers na Escolha entre as diversas alternativas que eles estão pensando para resolver um determinado problema então quando a gente prototipa né a gente pode pensar em dois tipos de protótipo que a gente chama de protótipo horizontal e o protótipo vertical O protótipo

horizontal a gente diz que a gente vai desenvolver ele em amplitude né então eu tenho uma interface que tá quase completa Mas com pouca eh funcionalidade né então is deixa ela bonita mas funcional né ou faz só um pedaço dela ser funcional então aqui do lado a gente tem um exemplo né de uma interface mobile né onde eu especifico né o tamanho da minha da minha superfície os menus todos né como é que a gente faz para se comunicar né então todas as opções mas não necessariamente Elas têm aqui uma funcionalidade já no protótipo vertical

né então a gente diz que só tipo em profundidade onde eh eu tenho a interface e as funcionalidades completas mas só para um pedaço bem pequeno bem pequeno do meu sistema né então aqui a gente tem um exemplo né de um protótipo vertical eh que é para os para o sistema do do Instituto de informática da ufgs e aqui a gente tá desenvolvendo só um pedacinho dele né que é o alocador de salas né então os professores eles as as as pessoas do Instituto de informática né se elas querem escolher uma sala para uma reunião

para uma apresentação para uma aula elas T um sistema que se chama locador né onde eu vou eh entrar nas nas opções todas né e fazer o que eu quero ver minhas reservas ver quais são os horários disponíveis né a novidade do sistema né e assim por diante então no protótipo vertical eu podia poderia ter por exemplo apen só implementação completa né de uma de uma opção que é essa que exibe os horários disponíveis Então essa eu faço ela todinha e o resto né a gente primeiro valida com essa eh com essa única parte aí

vertical e depois a gente segue implementar o resto bom mas então n dito isso é é legal a gente falar um pouquinho né que falar um pouquinho sobre os protótipos de de baixa Fidelidade que eles acabam muitas vezes sendo negligenciados Então como as pessoas da da computação mesmo designers né Tem muita intimidade com o computador com ferramentas eh a gente pensa por que que eu vou criar um protótipo de baixa fidelidade como esse da figura né onde tá tudo mal desenhado uma letra feia mal escrita né as linhas não são completamente retas né Por que

que eu vou fazer alguma coisa assim se é para quase tão fácil como quanto isso é eu criar já um protótipo de alta fidelidade eh Então na verdade O protótipo de baixa baixa fidelidade acaba que ele não se parece muito com o sistema né e a gente faz ele assim ciscando né escrevendo com as linhas meio tortas e mas o objetivo dele é outro né então em primeiro lugar o objetivo dele e ele ele é usado muito na fase de projeto de de alto nível então Eh A ideia é a gente testar coisas de uma

forma muito rápida Então e e a gente eh estimular as pessoas os demais stakholders a contribuirem então quando alguém vê um protótipo de baixa fidelidade como esse eh da figura fica na cara que não existe que nada foi implementado Ou seja que a pessoa que tá propondo ele não teve um trabalho enorme no sentido de ficar criando as caixinhas medindo e editando né ele fez de uma forma tosca Então os demais teers não se sentem eh H eles não se intimidam nesse caso em propor coisas diferentes então quer dizer olhar para um para um um

protótipo desse dizer ah não eu acho que tem que ser invertido eu vou botar essa tela de preview pra esquerda vou botar o paper size paraa direita né acaba sendo a pessoa sabe que ela não tá dando muito trabalho então ela acaba prestando assim sendo contribuindo mais quando a gente vê uma interface que tá que tá praticamente pronta que foi foi cuidado hoje está tudo alinhado as cores escolhidas e a gente pensa que talvez o fte pudesse ser um pouquinho maior que eh o Otão pudesse ser um pouquinho menor a gente olha para aquilo diz

ah tão bonito Já eu não tá bom tá bom poderia ser diferente mas não vou dizer nada tá bom assim porque eu sei que no final tá quase pronto então a gente a pessoa acaba se intimidando um pouco na hora de eh de dar sua contribuição Então essa é uma a importância né da gente trabalhar com com o protótipo de baixa fidelidade né então depois dessa etapa Aí sim né validadas algumas coisas a gente passa para alta fidelidade uma forma da gente fazer os protótipos eh de baixa Fidelidade é usando o storyboard né então eh

a gente usa o storyboard quando a gente quer mostrar né Um cenário a gente quer deixar bem claro quais são as ações que o usuário vai fazer eh com essa interface então o storyboard é um conjunto de desenhos né Eh baseado em em sketchs né O que vai mostrando o que que tá acontecendo Então aqui a gente tem eh um storyboard eh de uma pessoa testando eh um dispositivo né que é mobile eh para percorrer o museu né e e entender o que que tá acontecendo né então a gente tem essa historinha que tá sendo

contada aqui e a gente vê que os desenhos eles são bem simples né então de novo não é para ninguém gastar tempo desenhando tempo escrevendo tempo demais pensando né em Como vai ser a interface no detalhe com linhas retas etc eh nesse aqui a gente tem a Cristina né que tá caminhando para cima né subindo o mro eh e aí ela tá já com esse com esse dispositivo né Eh e ela quer entender ela tá na Acrópolis então D espaço de Museu e tal e ela quer ir escutando Então vê que ela tá de fone

de ouvido né conect tadinho ali nesses nessa espécie de tablet ele vai ouvindo o que que tá acontecendo né então em algum momento ela para ela ajusta as preferências né para encontrar as as informações que ela quer né depois ela tem que caminhar mais mas ela pega uma zona que é difícil então como ela vai ter que meio que escalar esse negócio eh tem pedra e tal ela não vai mais poder ficar segurando esse esse tablet nas mãos né ela tem que colocar ele em algum outro lugar porque para se locomover nessa região ela vai

precisar dos pés e das mãos então aqui a gente consegue ver uma outra situação né de uso do mesmo dispositivo onde toda a comunicação aqui vai ser só por som ela vai escutar talvez vai falar também e vai colocar o a tablete Zinha essa talvez uma mochila nas costas no bolso então lá pela tantas ela chega no no outro momento né e agora ela vai gravar informações ela quer registrar algumas informações das coisas que ela que ela encontrou né que ela tá vendo da maneira de vida das pessoas e tal Em outro momento ela quer

fazer uma fotografia para para registrar aquilo ali então ela registra num tecladinho depois ela tira a foto tudo com mesmo dispositivo E assim a gente consegue nesse caso aqui não ver os detalhes da interface ali no tablet mas a gente consegue ver a maneira que a pessoa tá eh interagindo com essa aplicação com esse com esse dispositivo aí esse outro storyboard ele é um pouquinho diferente né ele mostra como é que é a interação de uma pessoa colocando gasolina no tanque do carro tá então de novo Dá para ver que os desenhos são bem simples

né ninguém precisa saber desenhar para usar isso e E aí mostra não passo a pessoa dirige o carro até a a bomba de gasolina daí ela desce do carro pega a bomba coloca a bomba no tanque do carro pois ela tem que apertar lá a coisinha da bomba né pro combustível sair e ela vai ficar segurando até o tanque tá cheio né nesse caso ela coloca e de novo a a bomba né na base e aí ela vai até a pessoa que vai vai fazer a cobrança faz o pagamento carro continua então a gente conseguiu

mostrar como é que essa ação de abastecer o carro ela vai ela vai funcionar na interface sem precisar implementar coisa nenhuma Então essa é a ideia do do st aqui nesse slide a gente tem só algumas figurinhas que mostram e alguns esboços que a gente consegue para usar nos protótipos de baixa fidelidade né então a gente vê aqui alguns deles são para representar pessoas né representar direções dar receber transferir né como é que é a luz sol surpresa enfim n só alguns exemplos né onde o objetivo a gente vê que sempre é simples que sempre

é tosco né Então nada que é muito elaborado outra maneira bem eh útil da gente usar os os protótipos para bem útil para construir protótipo de de baixa Fidelidade é usar fichas onde cada ficha Vai representar uma tela ou uma janela e aí depois na hora de Então a gente vai criando as interfaces né então aqui a gente tem uma janela que é n de um único tamanho e seis Estados em que essa janela pode ficar né então com seis conteúdos diferentes então cada um é um cartão pra gente avaliar a a lógica de uso

disso né a gente usa né faz o usuário funcionar como se ele fosse a máquina a máquina né então os cartões vão sendo alternados o usuário pega o primeiro né pergunta on é que ele quer ir aí talvez clique aqui aí vai abrir aí a pessoa né entrega a próxima ficha que é essa daqui aí vai colocar o destino aí depois ele ganha uma outra ficha e assim é como se se alguém uma pessoa tivesse executando né fazendo o papel da máquina né e executando a lógica do sistema essa técnica também é bem útil e

ela se chama mágico de os a gente usa mágico de OS em várias situações eh no projeto de de interações né aqui a gente tem uma um outro exemplo então o primeiro a gente mostrou com fichas aqui é no caso de de trabalhar com aplicativo mobile né como é que a gente representaria então eu tenho pedaços de papel recortados do tamanho de uma tela né de de um dispositivo móvel E aí aqui a gente enxerga não só as telas como a sequência em que as coisas acontecem então o usuário ele seleciona o aplicativo né que

essa esse quadradinho achurado aí então na hora que ele selecionar a primeira tela que abre é essa segunda aqui né Então até essa é uma tela de login a gente vê claramente onde a gente gente vai ter uma figura que no momento é só um placeholder né Eu só sei que aí vai ter alguma coisa porque por enquanto a interface ela é de baixa fidelidade então aí os campos para entrar com o nome do usuário para entrar com a senha e assim por diante quando a pessoa entrar com a senha ele veem para essa tela

aqui dessa tela ele pode seguir para aquela próxima que pode voltar para essa e dessa pode voltar para aquela e aqui eu tenho toda a lógica do meu sistema feito de uma forma muito eficiente né e rápida que a gente vê outr algumas formas a gente produz isso n Então nesse exemplo eh a gente tem as as várias telas né do do dispositivo móvel E aí a gente tem um modelo que é uma moldura de um de um celular aqui que eu vou deslocando Então na hora de eu de eu fazer essa eh essa execução

do meu sistema de baixa fidelidade né onde quem faz o papel do do sistema computacional é a gente né então o usuário ele vai escolher uma tela e a gente vai movendo a essa moldurinha em cima para indicar para el como se a gente fosse o computador né Tem várias ferramentas que nos ajudam a a fazer esse tipo de de interface né a gente consegue encontrar facilzinho réguas para de prototipação a gente né cons compra na internet bem fácil com isso eu consigo desenhar eh as minhas interfaces a gente tem aqui tem um esse esse

exemplo aqui né um conjunto de etiquetas para protótipo em papel né onde também tudo em papel com potit eu vou eu vou colando os os vários elementos de interface e montando os meus protótipos então assim dá bem pra gente entender que né o as vantagens que essa técnica tem e como isso é usado né porque se não fosse usado as pessoas não estavam vendendo né régua eí vendendo potit em formato de eh de elementos de interface no no dispositivo móvel né então a vê assim que é é é bem interessante Então como eu tinha dito

né a gente prototipa em papel e depois a gente faz a execução do nosso protótipo em papel usando essa técnica aí que a gente chama de de mágico de os né onde o usuário interage com o protótipo de papel eh e o o projetista vira o tem sempre um humano que responde pro usuário né então o humano faz o papel do sistema Isso facilita muito as coisas porque nos permite que a gente eh teste coisas que podem ser bem complexas né sem precisar implementar eh um exemplo disso é implementar por exemplo né testar se o

um determinado grupo de usuários vai se adaptar a usar o o o chat inteligente né atendido por ia então num primeiro momento a ia não vai ser a ia ela vai ser uma pessoa lá do outro lado né então antes de eu implementar ia eu faço isso né eu testo uma pessoa porque pode ser que aquele tipo de usuário nem goste de de de interagir com chat então eu né E se eu se eu perceber isso eu eu não gasto tempo desenvolvendo essa essa ia né Então essa é é uma das razões então primeira eu

poder executar coisas que eu fiz em papel e a outra é eu conseguir Executar a sistemas que são complexos pra gente desenvolver um uso que recente né bem importante dos protótipos de baixa fidelidade né no caso do Mágico de óz foi para fazer os estudos de interação robô de carros autônomos na verdade né então como é que funciona um carro autônomo a gente tá a gente ouve falar nisso faz tempo já as pessoas estão aí testando né Ah e por um lado a gente tem toda essa coisa de avalar se a tecnologia ela realmente tá

suficientemente madura para ser usada e a outra é tentar entender como é que o participante ele vai se sentir dentro de um carro autônomo né porque o participante ele precisa sentar no no cockpit do carro né na frente da direção porém ele não vai fazer nada né suposto que ele não pilote o carro então para fazer esse tipo de teste com o usuário eh o que se usa é justamente a ideia do Mágico de osna então bota eh no cockpit o participante do experimento e do lado dele né uma pessoa que vai dirigir né do

lado lado contrário e ela vai cada vez que ela girar a direção gira sozinha a direção do participante e assim por diante Então antes de eu esperar são são coisas que a gente vai fazendo em paralelo se por um lado a gente precisa desenvolver a tecnologia eh do do carro autônomo isso leva tempo por outro a gente já vai desenvolvendo a parte de interface hum computador né então simulando aí que a gente tem um carro autônomo sendo dir que que não é autônomo aqui mas é dirigido por uma outra pessoa aqui a gente tem um

videozinho né aqui que isso que eu tava falando e mostra aqui é uma pessoa testando um protótipo em papel na interface do Google clicou aí Abriu essa essa interface Zinha com vários menus contextuais né então cada menuzinho ali abre conjunto de outras opções né foram desenhadas então então é isso tem sempre alguém que tá operando a interface como Sea fosse o sistema então fazendo coisas que que não necessariamente são triviais se a gente for implementar né vai vai somar algum tempo nesse caso cada vez que ele escolhe eh Um item de menu Abre uma outra

uma outra janela né com outros dados clicáveis né em tese então clique é alguma coisa abriu uma janela diferente agora eu posso escolher o o logotipo nesse caso aí a aí vai abrir ele num tamanho maior pois a pessoa pode comprar essa essa arte Então ela clica em comprar aí vai abrir uma nova janela né que vai dar mais informações vai pedir para ela imprimir o boleto para fazer o pagamento a pessoa clica em imprimir o boleto abre uma segunda tela né e com o boleto ali agora e aí é só clicar em imprimir e

tá pronto então essa essa é a ideia aqui né então o objetivo aqui foi ilustrar isso depois Aperta na casinha volta paraa página inicial que é lá na página do Google então basicamente mostrou como é que faz para eh para fazer o o processo de de compra aí dentro do go bom Então essa é a ideia dos protótipos de baixa fidelidade falar um pouquinho agora sobre os protótipos de alta fidelidade então uma vez que a gente passou né fez a prototipação em baixa fidelidade testou com com usuário testou com a gente mesmo a gente passa

para um segundo momento onde agora sim eu vou eh usar algumas ferramentas né então tem um conjunto aí o macrom director visual base né então alguns ambientes aí que nos oferecem facilidades para projetar e agora sim eu vou projetar né A minha interface quase do jeito que ela vai ser no sistema final então naturalmente isso toma tempo isso tem um custo maior do que do que é o custo de fazer o protótipo de baixa fidelidade onde eu não tenho praticamente nenhuma dificuldade em termos de de uso de ferramenta né o que que acontece então quando

eu acabo fazendo um protótipo mais cuidado ou onde o usuário mais Lego ele sequer consegue diferenciar isso do da do produto é que também aqui eu Gero uma alta expectativa né então aqui eu tô fazendo alguma coisa que é mais detalhada E quem olhar vai ao contrário do protótipo de baixa fidelidade né quando o usuário Olha O protótipo de alta fidelidade ele ele já imagina o produto e ele sabe que aquilo que vai ser então eu tô gerando expectativa e Justamente por isso pelo trabalho ouvido existe uma relutância em mudanças por parte do projetista que

lá na baixa fidelidade a gente não tá né porque ainda não investiu bastante tempo então aqui a gente tem só alguns exemplos aí então os exemplos são aparecendo sempre novas ferramentas né esse aqui é o Guy designer né que é o editor de recursos onde eu tenho ali os meus elementos de interface todas Justin Mind é um outro exemplo né tem os elementos text box eh listas né botões elementos de menu menend Bars bo Flow é é um outro exemplo então a gente não vai entrar aqui se vocês no detalhe se vocês quiserem eh explorar

esses essas ferramentas fica à vontade né então só procurar aí na web praticamente todas TM uma versão não pago bom E aí eh a gente passa então pro último tipo de protótipo de alta Fidelidade que são aqueles protótipos que a gente chama de clicáveis né onde o objetivo é a gente conseguir eh automatizar algumas funções então ele ainda não eu ainda não consigo executar as funções mais complexas mas quando eu desenho um botão eu dou uma funcionalidade para esse botão se a pessoa apertar ali ele vai desviar para uma outra tela e assim por diante

por isso que a gente chama de clicável então eu não tenho as funcionalidades todas do sistema mas eu tenho a lógica do sistema implementado e aqui exemplos né de ferramentas que nos permitem fazer isso são o figma e o Adobe XD Então nesse caso o figma é hoje a é a ferramenta mais conhecida pra gente fazer esses protótipos executáveis né ou ou ainda ferramentas clicáveis Mas enfim o objetivo né com essa eh com essa aula aqui era a gente entender né o objetivo dos protótipos e como é que a gente quais são os tipos de

protótipos envolvidos a gente ainda tem protótipo de hardware né que é uma toda uma uma outra linha a gente vai usar outros elementos para para prototipação mas isso eh a gente deixa para para falar num outro momento né então por aqui a gente queria falar mais de de protótipo de software e de quais são eles então o próximo passo agora é a gente fazer testes né então Eh tentar ver como é que funcionam né com treinar o uso do protótipo de baixa fidelidade e de alta fidelidade também então por por hoje era isso