Olá a gente vai falar agora sobre projeto de interface Então essa é a etapa que vem após a análise contextual né então a gente agora já sabe quem é o nosso usuário a gente conhece as tarefas conhece os cenários em que elas acontecem então é a hora da gente projetar interface então voltando aqui a sete perguntas que a gente precisa responder n então na análise contextual a gente respondeu às três primeiras perguntas né questões de concepção e agora é a hora da gente responder a quarta e a quinta né então a quarta questão é quais
são os comandos e ações eh que o usuário pode realizar através da interface e a quinta é como os componentes da interface vão ser apresentados pro usuário então enquanto uma diz respeito à interação a outra diz respeito a visualização de Fato né tudo é é é interação né mas uma é a parte do input e a outra é a parte do output então Eh responder essas duas perguntas é fazer o projeto da interface então a gente viu que na análise contextual né O que se fez foi levantar os requisitos do sistema né que então basicamente
os sistemas eles raramente são construídos né para suportar tarefas iguais à atuais né então em geral quando a gente vai refazer vai construir uma interface do zero a gente vai refazer alguma a gente de alguma forma vai mudar eh a tarefa né Então não vai fazer ela do jeito que ela era na sua na na execução atual E aí esses requisitos de sistema que a gente levanta né são eles que vão determinar Quais são as mudanças n nas tarefas atuais que vão acontecer e de que forma a gente vai dar suporte para essas tarefas então
às vezes tarefas são as mesmas Às vezes as tarefas são diferentes mas a ferramenta que a gente tá fazendo que é a nossa interface essa em geral muda né e Enfim então os requisitos é que vão me dizer isso bem como o levantamento desses requisitos também é quem vai me dizer o que que não vai mudar né então é através desse primeiro estudo né da análise contextual que eu vou saber o que que que que tem de diferente e o que que fica igual então Eh normalmente né quando a gente vai construir uma interface a
gente tá tá introduzindo Uma Nova tarefa né ao mesmo tempo que introduz a nova interface essa Nova tarefa ela pode ser uma tarefa interativa né E daí é aquela tarefa que precisa do usuário Mas pode também ser uma tarefa automática né que é realizada 100% pelo nosso sistema Então esse é o nosso primeiro ponto e essa tarefa ela vai ser criada a partir do modelo de tarefas que foi aquele que a gente fez quando fez a análise contextual né então ao longo da análise contextual a gente construiu um modelo de tarefas né então Eh A
ideia é que a gente faça aqui um processo de de redesign então levando em consideração os requisitos o modelo de tarefas agora a gente vai projetar Então a nossa interface né e geralmente essa nova interface a Nova tarefa ela vai ser representada na mesma notação da tarefa que que eu já tinha né mapeado anteriormente que é a que acontece no momento antes da gente desenvolver a nova interface então a gente diz que um projeto de uma interface é a sistematização né da construção do protótipo né então basicamente quando eu penso num nov interface eu levanto
os requisitos eu projeto E aí eu vou prototipar para depois poder testar com os usuários né e finalmente chegar no no produto final então é projetar é a gente organizar a maneira como a gente vai desenvolver os protótipos né e esse é um processo que é guiado pela aquelas informações que a gente já obteve então do conhecimento que eu tive de das necessidades do meu usuário de como ele realiza uma tarefa atualmente e eu vou conseguir pensar na minha próxima tarefa como é que eu vou Rever essa tarefa para deixar a vida do meu usuário
melhor né dessas novas tarefas a gente vai então a partir delas vai definir um modelo abstrato da nossa interface e desse modelo abato ato é que a gente vai gerar um protótipo né então é mais ou menos como a gente enxerga eh nesse nesse diagrama aqui né onde a gente mapeia as novas tarefas e a partir disso projeta uma interface que é composta pelo modelo abstrato dessa interface E aí né No momento posterior pelo projeto dela e com isso então a gente tá chegando né na segunda etapa do processo de design né visando usabilidade acessibilidade
e melhorar a experiência do usuário Então nesse projeto de interface com o usuário O que que a gente vai fazer aqui né então ele não é um protótipo ainda mas é nessa ele é um projeto e no projeto que a gente faz é definir uma porção de coisas então primeiro eu vou definir qual é o estilo de interface que eu vou usar vai ser uma interface com janelas vai ser uma interface mobile vai ser uma interface por voz né por chat por exemplo vai ser uma interface em realidade virtual que pode acontecer também então tem
n maneiras n tipos de interface que a gente pode oferecer pro usuário e é na hora do projeto que a gente pensa nisso então assim eh quando a gente faz um estudo né uma análise contextual e pensa em Como vai fazer a nossa como é que vai ser a nossa nova interface né esse essa já é um tema que vem à mente né ah como é que vai ser isso e a gente quase sempre já sabe Ah vai ser um app não vai ser web Ah vai ser uma interface conversacional pelo telefone enfim não sei
a gente tem n n estilos aí de interação a gente já já viu vários eh em aulas passadas né e e é nessa hora que a gente vai escolher que estilo vai usar então eh uma vez que eu escolhi o meu estilo né ã eu vou agora pensar nos meus contêiners né O que que é um contêiner é a interface da forma eh eu vou fazer um projeto dela toda Onde Eu Vou definir que telas eu vou ter que janelas que folders né então basicamente eu não tenho ainda definido o conteúdo de cada janela mas
eu sei que eu vou ter Sei lá uma tela para fazer edição uma tela para fazer a visualização do resultado final né uma tela de login então é essa é esse é o nosso primeira etapa é a definição desses containers depois a gente vai definir como é que vai ser a navegação entre esses elementos de interface todos né então eu tô na tela de login quando a pessoa faz o login para onde eu vou uma vez que eu tô nessa segunda provavelmente vai ser Sei lá uma consulta por exemplo dali para onde eu posso ir
né então como é que eu vou encadear esses diversos elementos de interface que aqui a gente tá chamando de contêiner porque eles são eh um elemento de interface que vai conter o nosso diálogo bom E aí depois que a gente definiu em alto nível o próximo passo é a gente definir os nossos estilos de diálogo né então o que que eu vou usar agora para interagir com o meu usuário então de novo vai ser caixa de texto vai ser ah sei lá eh eu vou clicar em alguns elementos é muito difícil eu ficar aqui chutando
né formas os estilos porque depende de cada de cada interface então sei lá se eu tenho um eu vou fazer um aplicativo para reservar eh Hotel então eu vou primeiro ter que selecionar para onde eu vou então a selecionar para onde eu vou Provavelmente o estilo de de diálogo vai ser uma caixa de texto onde eu vou entrar o nome da cidade para onde eu eu quero ir depois eu vou ter que informar a data em que eu vou viajar então provavelmente o estilo vai ser mostrar um calendário né onde a gente pode escolher o
dia da ida e o dia da volta Nesse calendário E assim a gente vai né então escolhida o lugar para onde eu vou escolhido os dias Talvez o próximo elemento de interface seja um botão de buscar né Talvez seja eu formar mais detalhes como quantos quantas são as para quantas pessoas eu quero Qual é o número de de pessoas no quarto e etc bom então Eh feito definido os estilos de diálogo a gente passa então para projetar as as apresentações né então o que que eu vou mostrar pro meu usuário como é que eu vou
fazer o o display das informações e finalmente a gente define Qual é a operação que vai dentro de cada um dos meus contêiner Então eu tenho as telas eu sei os estilos de diálogo que eu vou usar e agora eu vou organizar esses elementos de interface dentro dos contêiners Então essa é a etapa de projeto da interface que vai permitir depois a gente passar em seguida pra terceira etapa que é a de prototipação né que é onde a gente começa a a deixar palpável aquilo que inicialmente é um projeto né então prototipação e projeto tão
muito conectados E aí o na nossa quarta e última etapa vai ser a implementação de uma versão de trabalho onde eu possa testar né e fazer a avaliação né então estando já bem entendido que eu posso avaliar Desde o Primeiro Momento né então protótipo mesmo ele não sendo ainda implementado assim que eu tiver uma versão de trabalho né alguma coisa mínima concretizada eu começo a avaliar então né como em muitas outras situações infelizmente não tem uma receita de bolo pra gente propor boas interfaces né mas eu sei um Eu conheço um caminho né vai ser
sempre preciso então assim ainda que eu não tenha a receita de bolo paraa interface ideal eu sei o que que eu preciso fazer para minimizar minha chance de erro ou ainda maximizar a chance de acerto né então pra gente propor uma boa interface a gente vai precisar de um ciclo de estudo construção experimentação e avaliação de interfaces como já vimos lá no numa aula passada né onde a gente mostrava os modelos de construção de de interface onde todos eles são interativos todos eles são centrados no meu usuário né então a gente vai analisando avaliando e
melhorando a cada passo que a gente dá eh na construção de uma nova interface esse ciclo ele de fato basicamente ele organiza o meu procedimento de tentativa e erro né então qual é o que que a gente pode fazer aqui como sempre o processo de desenvolvimento envolve um usuário né a gente entendeu que desenvolver para desenvolver boas interfaces eu preciso do meu usuário junto é ele quem vai me me dizer o que que ele quer né eh Então vai ser sempre tentativa e erro e o que a gente pode fazer aqui é tentar minimizar a
chance de erro e para minimizar o Chan de erro a gente começa partindo de uma boa tentativa que vai e aí e se guiar por princípios por heurísticas de projeto Por recomendações né sendo que princípios e heurísticas são na verdade eh o aproveitamento de outras experiências né de coisas que já deram certo coisas que já deram errado né e a gente percebe isso em outras coisas da vida né então muitas vezes a gente precisa fazer alguma coisa e alguém diz olha só eu vou te dar uma dica quando tu chegar sei lá no guichê para
fazer o pagamento tem a fila da esquerda fila da direita entra na fila da direita que é mais rápido né ou se precisar Eh sei lá vai almoçar no ru da universidade então ah vai às 11:30 não vai ao meio-dia Porque meio-dia é pior horário 11:30 tá sempre mais vazio o que que é isso não é um chute Tá mas é alguém compartilhando a sua experiência com o objetivo de ajudar um outro a ir mais rápido ou a ao realizar tarefa de uma forma eh menos dolorosa né ou ainda mais assertiva então então é isso
né muitos os trabalhos de pesquisa em ihc né eles vão no sentido das pessoas darem recomendações né O que que funciona o que que não funciona o que que vale a pena tentar e o que que não vale a pena tentar bom então né esse esse esquemático mostra como é que funciona o projeto de interfaces né então a gente sempre parte de um modelo abstrato Onde eu defini os meus contêiners Eu sei como é que vai ser o diálogo de alto nível ou seja a interação entre as telas entre os contêiners e eu defino como
é que vai ser o meu diálogo de baixo nível né então como é que são cada Campo como é que eu faço a entrada de cada dado Então a partir desse modelo abstrato a gente parte Então porque a gente chama do projeto da interface propriamente dito que é quando a gente vai definir os estilos de interação os objetos de interação Que botão eu vou usar que tamanho ele tem que cor ele tem né e e coisas do gênero mas assim a gente já parte de um modelo que é abstrato e que tá pronto então Eh
o modelo o que que é o modelo abstrato afinal de contas né então esse o modelo abstrato é como eu tinha dito anteriormente essa descrição de alto nível da minha interface né então a gente começa com o projeto da da apresentação e essa figura ela mostra bem essa ideia dos contêiners né então aqui eu tenho duas telas eh da minha interface na primeira eu tenho login então tenho um espaço para eu entrar com o meu user ten um espaço para entrar com a senha eu tenho depois um espaço aqui que talvez vai V uma imagem
eh e finalmente um botão que vai ser o botão de login uma vez que eu eh entrei com esses dados a gente então passa por uma outra eh uma outra tela né que tem dois contêiners né um que mostra sei lá um gráfico aqui tá dito né aqui vai aqui essa é uma conta e Aqui vai um gráfico e aqui embaixo a gente vai um outro gráfico que é gráfico de performance de alguma coisa bom então ess esses são os contêiners depois a gente vai pensar e de que forma a gente vai organizar essa informação
que vai nos contêiners né aqui a gente tem um exemplo né de uma eh da da de uma interface mais em baixo nível onde aqui sim eu tenho os checkbox onde eu tenho os meus Campos para entrar com dados etc né E isso eu vou ter que acomodar dentro de um contêiner essa imagem Aqui de baixo mostra o que a gente chama de projeto do Diálogo né ou seja como é que acontece a sessão de a sequência de interação né Eh ou seja o que que o usuário vai poder fazer na interface então ele entra
lá no desktop aí ele vai poder sei lá fazer a busca por um estudante ou buscar eh os seminários que esses estudantes podem participar daqui ele vem para cá então assim eu tenho toda essa sequência de de opções né que eu para passar do um pro outro né então Sei lá posso criar um estudante crio o perfil dele né adiciono dados adiciono E assim a gente vai indo então eu tenho aqui né exemplos do projeto da apresentação e do projeto do Diálogo E aí como eu tinha mencionado anteriormente uma vez que a gente agora sabe
o toda todo o meu minha sequência de interação que veio muito lá do meu modelo de tarefas eu tenho a definição dos contêiners como é que eu passo de de um pro outro agora a gente vai selecionar os estilos e os objetos de de interação né ah a gente precisa definir as características da interface ou seja como é que vai ser o layout Como é que os meus estilos de interação e os meus objetos como é que eles vão estar organizados nos contêiners E para isso como eu também tinha mencionado antes a gente usa heurística
de projeto guias de estilo né então como é que eu respeito as normas e sei lá às vezes eu tenho a norma uma Norma da do de uma instituição né Se a gente for olhar ã todos os sites do govbr Por Exemplo né todos eles têm a mesma cara né entrada igual tem o mesmos os mesmos Logos a mesma aparência se eu for olhar as a página do Instituto de informática da ors também tá então se eu quiser criar uma página nova para colocar ali eu vou ter respeitar algumas coisas ou respeitar o estilo o
fonte que tá sendo usado as cores né vermelho branco e preto então Eh isso tudo vem lá das das heurísticas então ao passo que algumas coisas são definidas pela instituição outras são de conhecimento de todo mundo outras podem ser consultadas e são recomendações para para plataformas que já existem né E que a gente pode consultar tá por exemplo né a gente tem conjunto né para desenvolvimento mobile tanto Android quanto Apple oferecem os seus seus guias né para para fazer desenvolvimento então a Apple divide lá os os seus os seus guidelines né e dependendo da interface
que se vai eh implementar se é para macos se é para iOS se é para relógio né se é Apple watch se é pro pro Apple TV o Android também tem tem guias de estilo e design para Android que também se dividem e de acordo né com a plataforma que vai usar então é para Android TV é para relógio é para celular para tablet hoje tablet é diferente do do smartphone né a gente tem ainda outros conjuntos então aqui dá para ver alguns né guias para construção de de boas interfaces e a iso tem tem
definidos uma porção de guias aí que ajudam também como guia para para desenvolvimento de sistemas sistemas interativos ergonômicos e outro para para seguir estars internacionais e e assim por diante né a gente tem as heurísticas de eh que são bem conhecidas né do do nilsen enfim tem uma porção de de guias aí disponíveis pra gente buscar a alternativa mais confiável né para eu começar aí a minha Eh o meu processo de tentativa e erro né de uma tentativa boa então né concluindo aqui eh o objetivo quando a gente projeta uma interação é a gente especificar
né quais são os comandos que o usuário vai poder eh vai poder dar Quais são as técnicas de interação como é que a gente responde Quais são as respostas que a interface que o usuário vai nos dar Ou seja que feedback a gente vai receber que mensagens o usuário vai receber quais são os comandos que estão disponíveis né durante a realização das tarefas então assim esse Essa é uma das coisas o objetivo a gente precisa definir também na hora do projeto as características dinâmicas da interface com o usuário ou seja como é que as ações
são sequenciadas Lembrando que isso vem lá do nosso modelo de tarefas quando é que o usuário pode tomar iniciativa né quando é que é esperado que a iniciativa parta do usuário quando é que é esperado que a iniciativa parta do sistema quais são todos os caminhos possíveis para o usuário Navegar e e a ideia é que o projeto da interface ele deve sempre ser conduzido pelo nosso modelo de tarefas do usuário né que a gente viu lá atrás e dessa forma a gente vai conseguir refletir o modo do usuário realizar as tarefas né então é
de lá que vem é para né para isso que a gente fez o modelo de tarefas para que não haja ambiguidade no momento de projetar bom então essa ideia de projeto né É a efetivação de um projeto acontece através dos diversos protótipos esse é o nosso próximo tópico mas fica aqui um conjunto de referências né para quem quiser estudar um pouco mais se se aprofundar um pouco mais nessa questão eh do projeto de interfaces
