Interface e Interação

Prévia do material em texto

<p>Interface e interação</p><p>A área de atuação do design de interação e suas diferenças quanto a outras áreas de atuação.</p><p>Recomendações, heurísticas e procedimentos para a projeção de interfaces de usuários.</p><p>Prof.ª Flávia Garcia de Carvalho</p><p>1. Itens iniciais</p><p>Propósito</p><p>Entender o real propósito do trabalho do designer de interação é essencial para a qualificação do profissional,</p><p>o seu posicionamento no mercado e a sua atuação em equipes de trabalho. Adicionalmente, dominar as</p><p>principais questões que devem ser levantadas antes de se iniciar um projeto de criação de interface confere</p><p>eficiência ao processo de trabalho e garante que o profissional alcance os objetivos do projeto.</p><p>Objetivos</p><p>Reconhecer a atividade de design de interação e os principais dispositivos de interação.</p><p>Analisar os requisitos de cada plataforma e as posturas requeridas de aplicativos.</p><p>Diferenciar funcionalidade, usabilidade e acessibilidade, além de suas recomendações em projetos de</p><p>interface.</p><p>Aplicar as metáforas de interface e os métodos e técnicas de projeto de interface.</p><p>Introdução</p><p>Hoje em dia, diariamente usamos dispositivos, como smartphones ou computadores, para executar todo tipo</p><p>de tarefa, desde o trabalho, nossas obrigações como cidadãos e o acesso a produtos e serviços até o simples</p><p>contato com nossos entes queridos. Precisamos interagir todos os dias com aplicativos e softwares usando</p><p>interfaces, que estão à vista nas telas de nossos dispositivos.</p><p>Atividades que, no passado, eram feitas por atendimento presencial mediante o preenchimento de formulários</p><p>em papel ou graças a curtos (ou, o que é pior, longos) telefonemas foram obrigatoriamente convertidas para</p><p>soluções digitais. Tais soluções obrigaram essas pessoas a usar aplicativos e softwares com interfaces para</p><p>interação.</p><p>Você já teve dificuldade ao tentar utilizar um aplicativo, considerando-o “mal feito”? Sentiu-se perdido, sem</p><p>saber como fazer uma tarefa? Provavelmente, sua resposta é sim!</p><p>Com o grande número de aplicativos e sites que inundou o mercado de forma obrigatória, alguns realmente</p><p>não apresentavam boas interfaces. Elas, afinal, deveriam ajudar o usuário a interagir de maneira fácil – e não o</p><p>contrário.</p><p>É importante que essas interfaces sejam projetadas com um bom design de interação! Por conta disso, neste</p><p>conteúdo, falaremos sobre elas, explicando a importância de seu design e de sua capacidade de interação.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>1. Interface e o design de interação</p><p>Ligando os pontos</p><p>Você sabe o que é design de interação? Quais as competências de um profissional dessa área?</p><p>Para entendermos melhor essa área profissional, vamos simular uma situação em uma empresa fictícia de</p><p>desenvolvimento de aplicativos.</p><p>Imagine que você começou a trabalhar recentemente em uma empresa de desenvolvimento de aplicativos. É</p><p>uma empresa antiga, que começou há 20 anos e naquele início contratava web designers para criarem sites.</p><p>Desde então, a empresa já passou por muitas mudanças para acompanhar as transformações do mercado e</p><p>recentemente contratou você como designer de interação.</p><p>Hoje, dificilmente a empresa recebe um pedido para “criar um website”. Na maioria das vezes os pedidos são</p><p>para a criação de um aplicativo para dispositivos móveis adaptando funcionalidades de um site existente ou</p><p>então são projetos maiores que envolvem a criação de um site e também o desenvolvimento de um aplicativo</p><p>para dispositivos móveis.</p><p>Atualmente, a empresa se apresenta como uma agência especializada em desenvolvimento de aplicativos</p><p>móveis, plataformas Web e produtos digitais, sempre centrados no fator humano e analisando sempre qual</p><p>será o fluxo mais intuitivo para o usuário.</p><p>Você participa da sua primeira reunião com colegas de trabalho e um cliente, para os primeiros passos do</p><p>planejamento de uma solução digital.</p><p>Junto com o cliente, a equipe vai começar a levantar o objetivo da nova solução digital, o público alvo, quais</p><p>atividades que esse público deve desempenhar, em quais contextos essas atividades serão desempenhadas e</p><p>as possíveis tecnologias que serão envolvidas.</p><p>Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?</p><p>Questão 1</p><p>Como designer de interação nessa equipe, todas essas informações que estão sendo levantadas são</p><p>importantes para o seu trabalho? Por quê?</p><p>A</p><p>Sim, porque essa é a melhor oportunidade para descobrir as cores preferidas do cliente, que serão usadas</p><p>como paletas de cores do projeto.</p><p>B</p><p>Não, pois nas reuniões com cliente são abordados todos os temas possíveis, e nem todos interessam a todas</p><p>as especialidades de cada membro da equipe.</p><p>C</p><p>Sim, porque você criará todo o aplicativo, enquanto os demais membros da equipe fazem parte do setor</p><p>administrativo da empresa e trabalharão para garantir os insumos necessários.</p><p>D</p><p>Sim, porque o design de interação é uma atividade que tem por fim projetar produtos interativos que facilitam</p><p>a comunicação e a interação das pessoas. O foco está sempre no usuário final.</p><p>E</p><p>Não, pois essa reunião é somente uma formalidade e todas as informações necessárias serão levantadas</p><p>depois, por outra equipe.</p><p>A alternativa D está correta.</p><p>Sim. Todas essas informações são importantes para um designer de interação, que trabalhará junto com a</p><p>equipe para projetar uma solução. Esse contato inicial é importante para se iniciar o projeto, mesmo</p><p>sabendo que depois serão feitas pesquisas para aprofundar e consolidar esse primeiro levantamento.</p><p>Questão 2</p><p>Nesta reunião, você terá a oportunidade de entender melhor o escopo do projeto para começar o</p><p>planejamento do projeto de interface do novo aplicativo. Considere algumas informações que podem ser</p><p>obtidas com o cliente:</p><p>I. Mostrar templates de diversas interfaces e pedir para o cliente escolher suas preferidas.</p><p>II. Do que se trata o negócio da empresa do cliente e que serviços ela atualmente fornece.</p><p>III. Quem são os concorrentes ou serviços similares aos que a empresa do cliente fornece.</p><p>IV. Qual seria o diferencial do serviço que o cliente pretende fornecer em relação a seus concorrentes.</p><p>Em sua visão de designer de interação, alinhado com a maneira que a empresa em que trabalha se posiciona</p><p>no mercado, escolha as informações que devem ser levantadas com o cliente.</p><p>A</p><p>I, II e III</p><p>B</p><p>II, III e IV</p><p>C</p><p>I, III e IV</p><p>D</p><p>I e III</p><p>E</p><p>I e IV</p><p>A alternativa B está correta.</p><p>Apesar de ser importante envolver o cliente no projeto, o objetivo é voltado para o usuário. Não é uma</p><p>questão de gosto pessoal do cliente ou do designer de interação. Sobre templates de interfaces, o cliente</p><p>não é a pessoa mais capacitada para definir qual seria o melhor agora e também não estamos nessa fase</p><p>do projeto. Por outro lado, existem informações preciosas que, nesse caso, o cliente é a pessoa mais</p><p>capacitada para dar, que são as informações sobre o próprio negócio do cliente, que, no futuro, será</p><p>aprimorado pelo novo aplicativo.</p><p>Questão 3</p><p>Você acredita que o cliente deve estar sempre a par da maneira com que a equipe trabalha e das etapas do</p><p>projeto? Justifique sua resposta.</p><p>Chave de resposta</p><p>É importante que o cliente esteja sempre a par dos métodos utilizados pela equipe e entenda o</p><p>funcionamento de cada etapa. Isso não é somente uma forma de vender a imagem da empresa e de provar</p><p>o valor do trabalho que está sendo desempenhado. Como ponto de partida, o envolvimento do cliente</p><p>ajuda a determinar o real objetivo do novo aplicativo e ajuda a equipe a chegar nos possíveis usuários.</p><p>Fazer o cliente entender o processo de trabalho também ajuda a prevenir insatisfações do mesmo, que</p><p>pode criar expectativas irreais sobre a solução do problema, por desconhecimento dos processos que</p><p>envolvem a criação de um novo aplicativo e de sua interface.</p><p>Design de interação</p><p>Não foram somente as interfaces que invadiram o mercado. Você já deve ter esbarrado em termos, como</p><p>“design de interação”, “design de interface”, “web design”, “UX”, “UI” e “IxD”.</p><p>Todos eles se relacionam de alguma forma com essa questão. Conheceremos o uso desses termos</p><p>um aplicativo com os elementos</p><p>do mundo real. Um exemplo bem simples no Paint pode ser</p><p>o uso de ícones de lápis para indicar a ferramenta de</p><p>desenho livre, de borracha para apagar e de balde de tinta</p><p>para preencher.</p><p>Mas não encare as metáforas de interface como uma mera</p><p>questão de ilustração. O foco é basear-se nas experiências</p><p>do usuário – tanto as passadas quanto as atuais –</p><p>relacionadas com o funcionamento do software.</p><p>Quanto mais próxima for a lógica da metáfora da lógica do funcionamento do software, mais fácil será a</p><p>interação do usuário. As metáforas de interface, portanto, são criadas para ajudar o usuário a saber o que</p><p>fazer em uma interface.</p><p>Segundo Fernandes (2005), é possível dividir as metáforas em dois tipos principais:</p><p>Metáforas de familiarização</p><p>(ou metáforas de interface virtual)</p><p>Metáforas de transporte</p><p>(ou metáforas de interface verbal)</p><p>Metáforas de familiarização</p><p>As metáforas de familiarização são projetadas para novos usuários ainda não familiarizados com o uso do</p><p>aplicativo. O exemplo mais clássico é a metáfora da área de trabalho do sistema operacional Windows, porque</p><p>ela se baseia nas experiências de trabalho em um ambiente de escritório com seus vários objetos e utilidades</p><p>disponíveis.</p><p>Para facilitar o aprendizado, essas metáforas estão mais relacionadas à lógica e à estrutura do uso.</p><p>Para facilitar o aprendizado, essas metáforas estão mais relacionadas à lógica e à estrutura do uso.</p><p>Itens de uma antiga mesa de trabalho.</p><p>Tela do Microsoft Windows usando metáforas de área de</p><p>trabalho</p><p>Metáforas de transporte</p><p>As metáforas de transporte se baseiam em elementos visuais que representam objetos físicos familiares aos</p><p>usuários. Existe um vínculo forte entre o objeto concreto (que é conhecido do usuário) e a aparência da</p><p>interface.</p><p>Os exemplos mais comuns são as telas de calculadoras e a tela de discagem de números de telefone. Seus</p><p>botões possuem formas e posições semelhantes à interface analógica de botões físicos de antes.</p><p>Os exemplos mais comuns são as telas de calculadoras e a tela de discagem de números de telefone. Seus</p><p>botões possuem formas e posições semelhantes à interface analógica de botões físicos de antes.</p><p>Telefone com botões físicos.</p><p>Interface digital de smartphone.</p><p>Conforme já discutimos, as interfaces estão presentes e são muito importantes no dia a dia de todos nós.</p><p>Dessa maneira, novas metáforas de interface são aprendidas e acabam rapidamente se integrando na nossa</p><p>linguagem comum.</p><p>Exemplo</p><p>Pessoas que falam em navegar pela internet, curtir, ativar o sininho ou seguir alguém.</p><p>Uma história do botão de “salvar”</p><p>Os disquetes (ou floppy disks) foram muito usados para gravar, armazenar e transportar arquivos e softwares</p><p>até meados dos anos 2000. Depois disso, eles foram substituídos pelos compacts disks (CDs), os quais, hoje</p><p>em dia, já são bem pouco usados devido às facilidades dos serviços na nuvem.</p><p>Os antigos disquetes que ainda fazem parte da metáfora de “salvar”</p><p>Hoje em dia, localizado entre os ícones usados em botões para a ação “salvar”, o ícone representando um</p><p>disquete ainda está presente em versões bem atuais de softwares da Microsoft, enquanto outros passaram a</p><p>adotar a metáfora do download da nuvem. Veja:</p><p>Ícones usados para a ação de salvar ou baixar um arquivo disponíveis para uso no editor de textos Word.</p><p>Técnicas e métodos aplicados</p><p>Levantamento de requisitos</p><p>Requisitos são os atributos que o produto interativo deve ter para se alcançar certo objetivo. Segundo Benyon</p><p>(2011), ao se projetar uma interface antes de iniciar a etapa de design, é essencial que o designer adquira um</p><p>entendimento completo sobre:</p><p>Pessoas envolvidas</p><p>(denominadas usuários)</p><p>Atividades realizadas no aplicativo</p><p>(também chamadas de tarefas)</p><p>Contextos</p><p>(nos quais essas atividades acontecem)</p><p>Tecnologias</p><p>(também conhecidas como plataformas)</p><p>As quatro palavras em destaque formam a sigla PACT. Essa análise de PACT constitui uma importante</p><p>ferramenta a partir da qual são gerados os requisitos para o aplicativo.</p><p>Daremos mais detalhes sobre os itens do PACT a seguir:</p><p>Pessoas</p><p>É importante entender as diferenças entre as pessoas. Essas diferenças podem ser de ordem física,</p><p>psicológica ou social.</p><p>Atividades</p><p>As diversas características das atividades devem ser consideradas, como:</p><p>Aspectos temporais.</p><p>Cooperação.</p><p>Complexidade.</p><p>Segurança.</p><p>Conteúdo.</p><p>Contextos</p><p>Qualquer atividade acontece dentro de um contexto. Pode haver três tipos de contexto:</p><p>Contexto organizacional.</p><p>Contexto social.</p><p>Contexto físico.</p><p>Tecnologias</p><p>As tecnologias envolvidas são um ponto importante para antecipar algum tipo de problema e buscar</p><p>alternativas a fim de facilitar a interação. O designer de interação deve avaliar a plataforma e os</p><p>dispositivos de entrada e saída na comunicação e no conteúdo.</p><p>Envolvendo usuários na concepção</p><p>Se uma interface é desenvolvida para a interação de pessoas, os usuários precisam estar no centro da</p><p>concepção do aplicativo desde o início.</p><p>A primeira forma de envolvimento dele na concepção é a criação de personas, isto é, personagens fictícios</p><p>que representam um público-alvo mais específico do produto. Em seguida, as possibilidades da relação da</p><p>persona com a interface são pensadas na construção da jornada do usuário.</p><p>As personas são criadas para se entender o perfil do usuário. Para isso, fazer a si mesmo algumas perguntas</p><p>pode ser crucial:</p><p>O usuário é jovem ou idoso?</p><p>Quais são as motivações dele?</p><p>O que ele está fazendo?</p><p>Como ele resolve o problema atualmente sem o novo aplicativo que você está criando?</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Você precisa entender o contexto do usuário antes de criar uma solução que o ajude a realizar tarefas. O</p><p>objetivo é perceber as verdadeiras necessidades e as preocupações dos usuários reais.</p><p>Para um mesmo projeto, você ainda pode precisar criar mais de uma persona.</p><p>Exemplo</p><p>Em um aplicativo para consultas médicas, há, no mínimo, duas personas bem diferentes: uma, que</p><p>representa o público de médicos; outra, o público de pacientes.</p><p>Siga as seguintes dicas para criar uma persona:</p><p>Crie um nome e uma imagem (ilustração ou fotografia) que a represente.</p><p>Estabeleça o perfil demográfico.</p><p>Liste as tarefas que o usuário deve realizar.</p><p>Elenque as dores (ou problemas, preocupações etc.) dos usuários.</p><p>Anote as possíveis soluções para essas dores.</p><p>Cenário e jornada do usuário</p><p>Cenários são descrições de situações hipotéticas em que o público-alvo se coloca. Um cenário pode ser</p><p>construído por meio de uma frase como “Suponha que o usuário realize a tarefa de...”.</p><p>Para que o cenário não fique muito desconectado com a realidade, em vez de pensarmos em um usuário</p><p>genérico realizando as tarefas, devemos criar cenários onde atuam as personas.</p><p>A jornada do usuário deve ser criada para entendermos como é o cenário em que o usuário atua,</p><p>como é a experiência de uma pessoa realizando uma tarefa.</p><p>Deve mapear como o usuário faz antes, durante e depois do uso do seu novo aplicativo. Para cada persona</p><p>criada, você deve criar também uma jornada que descreva:</p><p>Estágios da jornada.</p><p>Tarefas realizadas em cada estágio.</p><p>Sentimentos associados a cada tarefa (frustação, impaciência, angústia, alívio etc.).</p><p>Oportunidades para o usuário retornar valor a cada estágio da jornada.</p><p>Prototipagem</p><p>Segundo Benyon (2011), a antecipação (ou prototipagem) preocupa-se em tornar as ideias visíveis. Para tanto,</p><p>utilizam-se os protótipos, os quais podem ser modelos físicos, como esboços a lápis ou modelos digitais.</p><p>Para um design centrado no usuário, a prototipagem é importante, pois ela permite ao designer ver o</p><p>aplicativo a partir da perspectiva de outros.</p><p>O que é wireframing?</p><p>1.</p><p>2.</p><p>3.</p><p>4.</p><p>5.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Wireframing é a atividade de criação de modelo ou de esquema de tela que desenhamos para ser um guia</p><p>visual da estrutura do esqueleto de um aplicativo. O wireframe constitui um esboço das telas e aponta como</p><p>elas vão se comunicar entre si, mostrando, de maneira simples,</p><p>como o aplicativo funcionará.</p><p>Wireframes de baixa resolução</p><p>Elementos de um bom wireframe</p><p>Um wireframe de qualidade deve incluir um bom planejamento das telas do aplicativo. Esse planejamento tem</p><p>de mostrar:</p><p>Como o conteúdo será apresentado.</p><p>Como cada parte do conteúdo será priorizada.</p><p>Distribuição de espaço.</p><p>Ações planejadas.</p><p>Recursos e funções disponíveis.</p><p>Transições entre telas.</p><p>Criar um wireframe é como fazer um mapa mental de etapas e procedimentos sobre como se começa um</p><p>desenvolvimento de aplicativo móvel. Ele fornece uma ideia clara sobre a hierarquia de conteúdo, as</p><p>categorias de objetos, os elementos de tela, as ações possíveis e a posição dos elementos visuais da marca.</p><p>É possível planejar no wireframe o estabelecimento de uma hierarquia visual forte para a interface, isto é, uma</p><p>ordem explícita para a visualização de diferentes elementos visuais. Também se consegue destacar as bordas</p><p>dos elementos visuais que compõem um eixo como uma maneira de reforçar a divisão dos itens na</p><p>organização hierárquica de uma interface.</p><p>Atenção</p><p>No wireframe, ainda não é o momento de colocar cores, tipografia, elementos de design, fotos ou</p><p>logotipos. Evite ao máximo antecipar essas soluções estéticas, pois elas desviam o foco da real</p><p>interação e tornam o trabalho mais demorado e custoso. O wireframe deve receber modificações de</p><p>forma mais ágil para experimentação e correções de problemas mais livre.</p><p>Prototipagem do wireframe</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Comece fazendo um wireframe de baixa fidelidade: para que o desenho do wireframe possa fluir de forma ágil</p><p>e criativa, a recomendação é que ele seja “rabiscado” inicialmente com papel e lápis. Tal processo pode durar</p><p>dias. O próximo passo é prototipá-lo.</p><p>Depois dessa primeira fase no papel, é recomendado que o protótipo continue sendo desenvolvido como</p><p>wireframe, mas, dessa vez, usando uma ferramenta digital de desenho de interface. Isso atualizará</p><p>instantaneamente o seu trabalho de caixas de texto, criando conexões entre essas caixas para ver se o seu</p><p>wireframe está funcionando.</p><p>Exemplo</p><p>Conectar imagens e botões específicos a seus respectivos menus suspensos e às suas páginas de</p><p>destino.</p><p>Assim como o wireframe no papel, o wireframe prototipado é uma ferramenta essencial, ajudando a identificar</p><p>pontos cegos e falhas ocultas. Ele permite que você corrija os erros de design antes de apresentar o projeto</p><p>final de wireframe.</p><p>As principais ferramentas do mercado para isso são o Figma, o Adobe XD e o Sketch. Elas nos ajudam a criar</p><p>uma documentação clara do projeto e facilitam o trabalho em equipe, já que as outras pessoas podem</p><p>visualizar e editar o mesmo documento a distância e em tempo real.</p><p>Wireframes desenhados no Figma</p><p>Tais ferramentas possibilitam ainda que todas as telas desenhadas sejam relacionadas em uma simulação de</p><p>protótipo. Primeiramente, essa simulação precisa ser testada e refinada pela equipe para, em seguida, ser</p><p>testada por usuários, como veremos a seguir.</p><p>Teste o protótipo com usuários</p><p>Ainda em sua fase de wireframe prototipado, o projeto de aplicativo deve ser testado por usuários que</p><p>representam o público-alvo do aplicativo.</p><p>Esse será seu primeiro teste de usabilidade. Não deixe de fazê-lo! As próprias ferramentas Figma, o Adobe XD</p><p>e Sketch são capazes de produzir um protótipo interativo para esse teste.</p><p>Outra opção é usar o aplicativo Marvel instalado no smartphone. Com ele, você pode importar ou capturar as</p><p>telas do wireframe e criar um wireframe prototipado interativo no próprio smartphone. Depois é só fazer o</p><p>teste!</p><p>Reunimos mais dicas para você testá-lo:</p><p>Você precisará de 6 a 10 participantes que representam o público-alvo do novo aplicativo.</p><p>Observe, ouça e tome notas.</p><p>Se possível, grave som e vídeo dos participantes e da tela do protótipo.</p><p>Deixe-os à vontade e peça para eles executarem uma tarefa usando o protótipo.</p><p>Peça para eles fazerem comentários em tempo real durante a experiência.</p><p>Leve os dados obtidos para avaliá-los com sua equipe e fazer mudanças no wireframe.</p><p>Metáforas, métodos e técnicas</p><p>Veja o que são as metáforas de interface, os métodos e as técnicas de projeto de interface. Conheça</p><p>ferramentas e o passo a passo para se chegar ao protótipo e envolver os usuários no desenvolvimento.</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Vem que eu te explico!</p><p>Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.</p><p>Buscando referências para se inspirar</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Prototipagem no Figma</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Verificando o aprendizado</p><p>Questão 1</p><p>Escolha o exemplo que define uma metáfora de familiarização da melhor forma.</p><p>A</p><p>O procedimento para deletar um arquivo é arrastá-lo usando o cursor para depositar em uma pasta nomeada</p><p>como “lixeira”.</p><p>B</p><p>A ferramenta de pintura é representada por um pincel.</p><p>1.</p><p>2.</p><p>3.</p><p>4.</p><p>5.</p><p>6.</p><p>C</p><p>A tela da calculadora do celular tem um layout e formatos de botões semelhantes aos de uma calculadora</p><p>antiga de botões físicos.</p><p>D</p><p>O lugar para descartar arquivos é representado pelo ícone de uma lixeira.</p><p>E</p><p>A ferramenta para apagar um desenho é representada por uma borracha.</p><p>A alternativa A está correta.</p><p>A área de trabalho do sistema operacional Windows é um bom exemplo de metáfora de familiarização, pois</p><p>ela se baseia nas lógicas de trabalho em um escritório. Como podemos ver no exemplo de arrastar para a</p><p>lixeira, note que nem sempre essas lógicas são as mais eficientes, porém são as mais intuitivas para o</p><p>usuário.</p><p>Questão 2</p><p>Escolha a opção que contém a representação de um bom wireframe.</p><p>A</p><p>Mostra a paleta de cores da marca.</p><p>B</p><p>Mostra como o conteúdo será apresentado, cada parte priorizada, a distribuição no espaço, as ações e as</p><p>funções planejadas, assim como as transições de tela.</p><p>C</p><p>Mostra a tipografia escolhida para testes de legibilidade com usuários.</p><p>D</p><p>Deve ter poucas telas para mostrar somente os principais layouts da interface.</p><p>E</p><p>Deve ser desenhado em programas vetoriais, como o Adobe Illustrator.</p><p>A alternativa B está correta.</p><p>O wireframe precisa priorizar o esquema mais básico de distribuição de elementos na tela e o planejamento</p><p>de funções, assim como as ações e as transições entre as telas. Cores, marca, tipografia e elementos</p><p>estéticos devem ser evitados para não desviar a atenção do teste de uso.</p><p>5. Conclusão</p><p>Considerações finais</p><p>Chegamos ao fim de uma jornada, mas seu caminho no design de interface está só começando!</p><p>Primeiramente, vimos neste conteúdo do que se trata a área do design de interação e a comparamos com</p><p>outras áreas semelhantes que estão atualmente em voga. Entendemos ainda a real missão do designer de</p><p>interação: projetar interfaces de maneira centrada nos usuários para que eles possam executar ações</p><p>interagindo com facilidade.</p><p>Explicamos o que é uma interface, apresentando os principais dispositivos de interação e suas plataformas.</p><p>Focados nos usuários, entendemos o significado das funcionalidades e conhecemos as recomendações para</p><p>usabilidade e acessibilidade. Adicionalmente, elencamos metáforas úteis para fazer com que o usuário</p><p>aprenda a usar uma nova interface de maneira mais fácil.</p><p>Por fim, conhecemos métodos e técnicas fundamentais para a criação de um projeto de interfaces e para o</p><p>envolvimento do usuário nas fases iniciais de criação. Afinal, nosso maior objetivo é ajudá-lo a usar o novo</p><p>aplicativo que será lançado.</p><p>Podcast</p><p>Para encerrar, ouça uma demonstração prática das etapas de trabalho de design de interação que</p><p>podem ser necessárias durante o desenvolvimento de uma interface.</p><p>Conteúdo interativo</p><p>Acesse a versão digital para ouvir o áudio.</p><p>Explore +</p><p>Confira o que separamos especialmente para você!</p><p>O livro de Rogers, Sharp e Preece, indicado nas referências, apresenta uma lista detalhada de tipos de</p><p>interface e de suas implicações na criação e avaliação de interfaces. Leia: Design de interação: além</p><p>da</p><p>interação humano-computador.</p><p>Pesquise o artigo Paradigmas e avaliação de interface humano-computador, indicado nas referênias, e veja</p><p>sua classificação de tipos de interfaces e de metáforas de interfaces:</p><p>Jakob Nielsen é uma grande referência em usabilidade. Pesquise o texto 10 usability heuristics for user</p><p>interface design e você encontrará cada heurística bem explicada e ilustrada.</p><p>O World Wide web Consortium (W3C) é uma comunidade internacional que trabalha desenvolvendo padrões</p><p>web. No site da W3C, procure a Web Accessibility Initiative (WAI). Você também encontra traduções desses</p><p>conteúdos para o português. Pesquise: Diretrizes de acessibilidade para conteúdo web (WCAG) 2.0.</p><p>No site Governo digital, procure por acessibilidade digital e conheça mais sobre modelos, ferramentas e</p><p>padrões.</p><p>Referências</p><p>BENYON, D. Interação humano-computador. 2. ed. São Paulo: Pearson Prentice Hall, 2011.</p><p>COOPER, A.; REIMANN, R.; CRONIN, D. About face 3: the essentials of interaction design. 3. ed. Indianapolis:</p><p>Wiley Publishing, 2007.</p><p>FERNANDES, G. G. Paradigmas e avaliação de interface humano-computador: evolução, caracterização e</p><p>ícones de interface computacional. CONGRESSO INTERNACIONAL EM AVALIAÇÃO EDUCACIONAL. Anais...</p><p>UFC/FACED/NAVE, 2005.</p><p>NIELSEN, J. 10 usability heuristics for user interface design. Nielsen Norman Group. Publicado em: 15 nov.</p><p>2020.</p><p>ROGERS, Y.; SHARP, H.; PREECE, J. Design de interação: além da interação humano-computador. 3. ed. Porto</p><p>Alegre: Bookman, 2013.</p><p>WORLD WIDE WEB CONSORTIUM. Diretrizes de acessibilidade para conteúdo web (WCAG) 2.0.</p><p>Recomendação W3C de 11 de dezembro de 2008. Tradução autorizada em português europeu. Publicado em:</p><p>24 out. 2014.</p><p>Interface e interação</p><p>1. Itens iniciais</p><p>Propósito</p><p>Objetivos</p><p>Introdução</p><p>1. Interface e o design de interação</p><p>Ligando os pontos</p><p>Design de interação</p><p>Conceitos iniciais sobre design de interação</p><p>Interface x Interação: Relacionamento e diferenciação</p><p>O que é interface?</p><p>Exemplo</p><p>Exemplo</p><p>Comentário</p><p>A interação ocorre por meio da interface</p><p>Digitar senhas ou fazer reconhecimento de nossa impressão digital.</p><p>Clicar em imagens de botões para acessar aplicativos.</p><p>Deslizar os dedos para “arrastar” janelas de aplicativos para os lados</p><p>Por que o design de interação é tão importante para criar a interface?</p><p>Tipos de interface</p><p>Exemplo</p><p>Dispositivos de interação</p><p>Qual é a diferença entre dispositivos de entrada e saída?</p><p>Dispositivos de entrada</p><p>Dispositivos de saída</p><p>Dica</p><p>Teclados: os mais tradicionais</p><p>Mouse: a primeira revolução da interação</p><p>Controles de videogame</p><p>Telas: os dispositivos mais usados</p><p>Controle remoto</p><p>Controles de captura de movimento</p><p>Realidade virtual</p><p>Smart speakers</p><p>Interface e design de interação</p><p>Conteúdo interativo</p><p>Vem que eu te explico!</p><p>IxD, UX e UI, que áreas são essas?</p><p>Conteúdo interativo</p><p>Interface ou tela?</p><p>Conteúdo interativo</p><p>Verificando o aprendizado</p><p>2. Plataformas</p><p>Ligando os pontos</p><p>Introdução</p><p>PCs</p><p>Consoles de videogame</p><p>Smart TVs</p><p>Smartphones</p><p>Posturas dos aplicativos nas plataformas</p><p>Exemplo</p><p>Postura soberana</p><p>Saiba mais</p><p>Postura transitória</p><p>Postura daemônica</p><p>Exemplo</p><p>Desktops, notebooks e dispositivos móveis</p><p>Desktops e notebooks</p><p>Dispositivos móveis</p><p>Exemplo</p><p>Exemplo</p><p>Smart TVs, media streaming e consoles de videogame</p><p>Smart TVs e media streaming</p><p>Exemplo</p><p>Consoles de videogame</p><p>Exemplo</p><p>Exemplo</p><p>Plataformas e posturas de seus aplicativos</p><p>Conteúdo interativo</p><p>Vem que eu te explico!</p><p>Um típico aplicativo de postura soberana</p><p>Conteúdo interativo</p><p>Um aplicativo de postura transitória</p><p>Conteúdo interativo</p><p>Verificando o aprendizado</p><p>3. Funcionalidade, usabilidade e acessibilidade</p><p>Ligando os pontos</p><p>Introdução</p><p>Funcionalidade</p><p>Resumindo</p><p>Usabilidade</p><p>Dez heurísticas de usabilidade para o design de interação</p><p>1. Visibilidade do estado do sistema</p><p>2. Correspondência entre o sistema e o mundo real</p><p>3. Controle e liberdade do usuário</p><p>4. Consistência e padronização</p><p>5. Prevenção de erro</p><p>6. Reconhecimento em vez de memorização</p><p>7. Flexibilidade e eficiência de uso</p><p>8. Design estético e minimalista</p><p>9. Auxílio na resolução de um erro</p><p>10. Ajuda e documentação</p><p>Saiba mais</p><p>Acessibilidade</p><p>Exemplo</p><p>Princípios de acessibilidade</p><p>Princípio 1: Perceptível</p><p>Princípio 2: Operável</p><p>Princípio 3: Compreensível</p><p>Princípio 4: Robusto</p><p>Saiba mais</p><p>Daltonismo: veja como é fácil atender os usuários que não visualizam algumas cores</p><p>Exemplo</p><p>Usabilidade e acessibilidade</p><p>Conteúdo interativo</p><p>Vem que eu te explico!</p><p>Exemplo de usabilidade</p><p>Conteúdo interativo</p><p>Exemplo de acessibilidade</p><p>Conteúdo interativo</p><p>Verificando o aprendizado</p><p>4. Analogias, abstrações, metáforas, métodos e técnicas</p><p>Ligando os pontos</p><p>Analogias, metáforas e abstrações</p><p>Exemplo</p><p>Exemplo</p><p>Metáforas de interface</p><p>Metáforas de familiarização</p><p>Metáforas de transporte</p><p>Metáforas de familiarização</p><p>Itens de uma antiga mesa de trabalho.</p><p>Tela do Microsoft Windows usando metáforas de área de trabalho</p><p>Metáforas de transporte</p><p>Telefone com botões físicos.</p><p>Interface digital de smartphone.</p><p>Exemplo</p><p>Uma história do botão de “salvar”</p><p>Técnicas e métodos aplicados</p><p>Levantamento de requisitos</p><p>Pessoas envolvidas</p><p>Atividades realizadas no aplicativo</p><p>Contextos</p><p>Tecnologias</p><p>Pessoas</p><p>Atividades</p><p>Contextos</p><p>Tecnologias</p><p>Envolvendo usuários na concepção</p><p>Exemplo</p><p>Cenário e jornada do usuário</p><p>Prototipagem</p><p>O que é wireframing?</p><p>Elementos de um bom wireframe</p><p>Atenção</p><p>Prototipagem do wireframe</p><p>Exemplo</p><p>Teste o protótipo com usuários</p><p>Metáforas, métodos e técnicas</p><p>Conteúdo interativo</p><p>Vem que eu te explico!</p><p>Buscando referências para se inspirar</p><p>Conteúdo interativo</p><p>Prototipagem no Figma</p><p>Conteúdo interativo</p><p>Verificando o aprendizado</p><p>5. Conclusão</p><p>Considerações finais</p><p>Podcast</p><p>Conteúdo interativo</p><p>Explore +</p><p>Referências</p><p>para</p><p>podermos entender melhor o mercado de design de interação.</p><p>Conceitos iniciais sobre design de interação</p><p>Primeiramente, vamos entender o significado de design. Trata-se de um termo muito popular, sendo aplicado</p><p>em muitos lugares e contextos. Embora muitas pessoas chamem de "design" belos trabalhos visuais, ele</p><p>definitivamente não é sinônimo de "desenho".</p><p>O design está relacionado com a atividade de projetar soluções para atingir objetivos, os quais</p><p>resultam em um produto com forma e funcionalidade.</p><p>O design gráfico é uma atividade de criação ou aplicação de soluções visuais para itens a serem produzidos</p><p>pela indústria gráfica. Já em outros exemplos de design, as soluções projetadas não são necessariamente</p><p>visuais, como é o caso do design instrucional, cujo propósito é criar materiais didáticos que atinjam objetivos</p><p>pedagógicos de forma sistemática.</p><p>O que é então um design de interação?</p><p>Trata-se da atividade de projetar produtos interativos que facilitam a comunicação e a interação das pessoas.</p><p>Talvez você já tenha ouvido falar em design de sistemas interativos, design de interface do usuário, projeto de</p><p>software, web design, design centrado no usuário, design de produto e design de experiência. Saiba que o</p><p>termo “design de interação” aparece em todos esses assuntos.</p><p>O objetivo do design de interação é entregar uma interface com a qual o usuário:</p><p>Possa interagir de maneira fácil</p><p>Sinta-se seguro</p><p>Consiga realizar as tarefas</p><p>Mas o design de interação significa criar interfaces bonitas? Na verdade, ele não é só isso... vamos analisar</p><p>melhor a seguir!</p><p>E as siglas UX, UI e IxD?</p><p>Provavelmente você já deve ter visto essas siglas em algum lugar. De uma forma ou de outra, elas também se</p><p>relacionam com o design de interação.</p><p>IxD (Interaction design.): Considerado um sinônimo de design de interação.</p><p>UX (User experience): Design de experiência do usuário.</p><p>UI (User interface): Design de interface.</p><p>Talvez você já tenha ouvido falar em UX como sinônimo de design de interação, porque realmente existe uma</p><p>sobreposição entre essas duas atividades. A verdade é que o UX está relacionado à projeção da experiência</p><p>de usar um produto, o que vai além da interação, mas a maior parte disso envolve justamente o design de</p><p>interação.</p><p>O UX é uma grande categoria guarda-chuva, uma vez que engloba o design de interação e muitas outras</p><p>atividades relacionadas à experiência do usuário.</p><p>Já o UI está mais relacionado com o trabalho de selecionar os elementos certos da interface, como botões,</p><p>campos de texto e listas. A verdade é que ele também está relacionado ao design de interação, embora o foco</p><p>do UI esteja mais voltado para a interface do que para a interação, tendo um caráter mais material e gráfico.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Ilustração das semelhanças e das diferenças entre UX, UI e IxD</p><p>De forma resumida, podemos dizer que o design de interação (ou IxD) está na sobreposição entre o design de</p><p>experiência de usuário (UX) e o de interface de usuário (UI).</p><p>Interface x Interação: Relacionamento e diferenciação</p><p>O que é interface?</p><p>Originalmente, uma interface configura uma superfície de contato entre coisas diferentes. Se você colocar</p><p>água e óleo em um copo, a água irá para a parte de baixo; o óleo, para a de cima. A superfície de contato</p><p>entre os dois é chamada de interface.</p><p>Aqui, porém, empregaremos o termo “interface” em outro contexto: o uso de ferramentas. No dia a dia, nós as</p><p>utilizamos a todo momento para possibilitar ou facilitar nossas tarefas. Essas ferramentas podem ser</p><p>analógicas ou digitais.</p><p>Exemplo</p><p>Quando usa um abridor de latas, você pode interagir diretamente com ele, manipulando-o para abrir a</p><p>lata.</p><p>Mas o que acontece quando se trata de uma ferramenta digital, como um aplicativo instalado no celular? Você,</p><p>que é feito de “carne e osso”, não vai conseguir interagir diretamente com o aplicativo, que se trata, afinal, de</p><p>um software de computador!</p><p>Para interagir com o aplicativo, portanto, você vai precisar de uma interface. Por terem naturezas tão</p><p>diferentes, pessoas e computadores não podem se conectar diretamente; para isso, a interface, elemento que</p><p>possibilita que duas coisas de naturezas diferentes se comuniquem, se faz necessária.</p><p>Mas não se engane: nem toda interface é criada para possibilitar a interação entre pessoas e softwares.</p><p>Existem interfaces entre máquinas diferentes, por exemplo. Por isso, também é usado o termo interface do</p><p>usuário para especificar as interfaces entre as pessoas e um aplicativo.</p><p>Área de trabalho do Windows 95</p><p>Exemplo</p><p>Em um computador em que esteja instalado o sistema operacional Windows, a área de trabalho é uma</p><p>interface, pois ela mostra os comandos do sistema e apresenta ao usuário todas as opções de ações</p><p>que ele poderá realizar usando o computador.</p><p>Muitas vezes, a imagem de uma interface é chamada de “tela”, o que ocorre quando alguém opina que achou</p><p>uma tela bonita ou com um layout atraente. Trata-se também de um significado para tela.</p><p>Comentário</p><p>Não confunda isso com o significado de tela que adotaremos aqui: quando nos referirmos à tela de um</p><p>aparelho, estaremos tratando da parte física (também chamada de display). Trata-se de um dispositivo</p><p>de interação que exibe a imagem da interface e, em muitos casos, é sensível ao toque (touch screen),</p><p>além de possibilitar a entrada de comandos. Veremos mais sobre esse assunto em breve quando</p><p>falarmos sobre os dispositivos de interação.</p><p>Fazendo uma analogia com as obras de artes visuais, algumas pessoas se referem a uma obra como uma</p><p>“tela”. No entanto, a tela é o suporte em lona da pintura que o artista criou. Em uma loja que vende insumos</p><p>para pintura, há “telas em branco” prontas para serem adquiridas por pintores.</p><p>Seguindo essa analogia, vamos considerar a tela um dispositivo de interação, o suporte que exibirá a</p><p>interface.</p><p>A interação ocorre por meio da interface</p><p>Enquanto a interface é um “lugar” para a interação entre pessoas e aplicativos, a interação constitui um</p><p>processo comunicacional entre as pessoas e os computadores.</p><p>No exemplo da interface da área de trabalho do Windows, a</p><p>interação do usuário acontece com o preenchimento de</p><p>senhas e ao “clicar” em imagens de botões na tela – que,</p><p>principalmente em suas primeiras versões, representavam</p><p>pastas de papel e gaveteiros de arquivos – os quais</p><p>permitem acessar aplicativos ou conteúdos apresentados</p><p>em janelas.</p><p>Nos smartphones, a interação ocorre quando nós tocamos</p><p>na tela para:</p><p>Digitar senhas ou fazer reconhecimento</p><p>de nossa impressão digital.</p><p>Clicar em imagens de botões para</p><p>acessar aplicativos.</p><p>Deslizar os dedos para “arrastar” janelas</p><p>de aplicativos para os lados</p><p>Por que o design de interação é tão importante para criar a interface?</p><p>A interface deveria ajudar nossa comunicação com o aplicativo. No entanto, você provavelmente já teve</p><p>alguma dificuldade durante sua interação com uma interface.</p><p>O papel da interface não é ser bela. Ela não deve ser pensada só para deixar um sistema bonito: seu</p><p>principal objetivo é ajudar o usuário a executar uma tarefa.</p><p>Quando está interagindo com a interface, o usuário deve se sentir seguro – e nunca confuso ou perdido. Além</p><p>disso, ele tem de ser capaz de executar sua tarefa da forma mais simples possível.</p><p>Tipos de interface</p><p>Atualmente, existe uma grande diversidade de interfaces. Rogers, Sharp e Preece (2013) criaram uma lista</p><p>com 20 tipos de interface:</p><p>Tipo de interface Veja também</p><p>1. Baseada em comando</p><p>2. WIMP e GUI</p><p>3. Multimídia WIMP e web</p><p>Tipo de interface Veja também</p><p>4. Realidade virtual Realidade aumentada e mista</p><p>5. Visualização da informação Multimídia</p><p>6. Web Móvel e multimídia</p><p>7. Eletrônicos de consumo e eletrodomésticos Móvel</p><p>8. Móvel Realidade aumentada e mista</p><p>9. Fala</p><p>10. Caneta Compartilhável e toque</p><p>11. Toque Compartilhável e gestos</p><p>12. Gestos Tangível</p><p>13. Háptica Multimodal</p><p>14. Multimodal Fala, caneta, toque, gestos e háptica</p><p>15. Compartilhável Toque</p><p>16. Tangível</p><p>17. Realidade aumentada e mista Realidade virtual</p><p>18.</p><p>Vestível</p><p>19. Robótica</p><p>20. Cérebro-computador</p><p>Tipos de interface</p><p>Essa tabela foi desenvolvida como um catálogo pelas autoras para que elas organizassem preocupações de</p><p>projeto de acordo com esses tipos de interface. Tais tipos foram listados por elas na ordem em que foram</p><p>desenvolvidos: o tipo “Baseado em comando” é o mais antigo; o tipo “Cérebro-computador”, o mais recente</p><p>(sem muito rigor, pois se trata de uma classificação feita por conveniência).</p><p>Os critérios para a distinção entre tipos também são variados: você pode notar que parte deles se diferencia</p><p>de acordo com o dispositivo de entrada/saída (Fala e caneta), enquanto outros são baseados na plataforma</p><p>(Móvel e eletrônicos). É possível ainda que um mesmo produto apareça em mais de uma categoria.</p><p>Exemplo</p><p>Um smartphone figura na categoria Móvel e, ao mesmo tempo, na categoria Toque.</p><p>WIMP é a forma predominante no mundo dos computadores pessoais há décadas. Ele se baseia no conceito</p><p>de manipulação direta em uma área gráfica na qual existem janelas, imagens e ícones com os quais o usuário</p><p>interage por meio de um apontador direcionado para o lugar escolhido a fim de arrastar, clicar, marcar e</p><p>cortar, entre outras ações. O dispositivo de interação mais popular que direciona o apontador é o mouse.</p><p>Já o GUI consiste em um modelo de interface do usuário que permite a interação por elementos gráficos. A</p><p>verdade é que uma WIMP também é uma GUI.</p><p>Dispositivos de interação</p><p>Para acionarmos os controles na interface, precisamos usar dispositivos de interação que fazem parte do</p><p>hardware.</p><p>Qual é a diferença entre dispositivos de entrada e saída?</p><p>Dispositivos de interação podem funcionar como dispositivos de entrada, de saída ou os dois ao mesmo</p><p>tempo.</p><p>Dispositivos de interação podem funcionar como dispositivos de entrada, de saída ou os dois ao mesmo</p><p>tempo.</p><p>Dispositivos de entrada</p><p>Usados para receber sinais de entrada do</p><p>usuário. Eis alguns exemplos: teclado, mouse,</p><p>microfone, câmera, scanner, gamepads e</p><p>sensores de movimento.</p><p>Dispositivos de saída</p><p>São responsáveis por exibir ou comunicar</p><p>informações do computador para o usuário. Os</p><p>principais exemplos são monitores,</p><p>impressoras, caixas de som e óculos de</p><p>realidade virtual.</p><p>Dica</p><p>Nos smartphones, as telas sensíveis ao toque podem ser consideradas tanto dispositivos de entrada</p><p>quanto de saída.</p><p>Teclados: os mais tradicionais</p><p>Entre os dispositivos de interação apresentados aqui, o teclado é, sem dúvida, o mais antigo e tradicional – e</p><p>ele está longe de tornar-se obsoleto! Sua origem remonta ao período anterior ao do advento dos</p><p>computadores: ela reside, na verdade, na máquina de escrever do século XIX, que já adotava o formato</p><p>QWERTY.</p><p>Teclados de diferentes épocas</p><p>Nos primeiros PCs, a forma de interação primordial era a</p><p>inserção de comandos de texto digitados no teclado para</p><p>que a máquina executasse tarefas. Ainda hoje, os atalhos de</p><p>teclados são importantes para permitir que seus usuários</p><p>executem tarefas de maneira ágil.</p><p>Mouse: a primeira revolução da interação</p><p>A chegada dos mouses ao mercado nos anos 1970</p><p>representou uma grande evolução das formas de interação,</p><p>pois seus comandos eram bastante intuitivos se</p><p>comparados com os comandos de textos, uma vez que</p><p>emulavam movimentos mais naturais do corpo.</p><p>Hoje em dia, eles continuam sendo utilizados</p><p>amplamente nos desktops.</p><p>Entre os jogos digitais, muitos jogadores</p><p>preferem jogar usando o mouse e o teclado em</p><p>vez do gamepad. Apesar de haver</p><p>especulações sobre seu fim, eles estão longe</p><p>de se tornarem obsoletos!</p><p>Controles de videogame</p><p>Tais controles são usados principalmente em consoles de videogame, mas também podem ser empregados</p><p>como um periférico de um PC. Diferentes dos mouses, cuja função principal é posicionar o cursor na tela, eles</p><p>são projetados principalmente para comandar movimentos nela.</p><p>Os controles de jogo têm as seguintes vantagens:</p><p>São ergonômicos.</p><p>São projetados para serem manipulados com as duas mãos.</p><p>Não demandam apoio sobre uma mesa.</p><p>Telas: os dispositivos mais usados</p><p>Inicialmente, as telas eram somente dispositivos de saída. Isso só mudou com a criação de telas sensíveis ao</p><p>toque (touch screen), que invadiram o mercado.</p><p>•</p><p>•</p><p>•</p><p>Há vários tipos diferentes de tela touch screen,</p><p>cada uma com uma tecnologia distinta. As mais</p><p>comuns são as telas capacitivas, as quais, após</p><p>serem tocadas com os dedos, reagem a eles</p><p>mediante a condução de eletricidade. Hoje em</p><p>dia, essas telas estão amplamente difundidas</p><p>pelos smartphones.</p><p>Controle remoto</p><p>Os controles remotos são mais popularmente</p><p>usados para as TVs. A partir dos anos 1970,</p><p>começaram a surgir aqueles com comunicação via infravermelho. Esse tipo é o mais frequente até hoje,</p><p>apesar de já haver controles remotos que funcionam via bluetooth.</p><p>Controles de captura de movimento</p><p>O uso mais popular para os controles de captura de movimento está nos videogames, pois eles renovaram os</p><p>jogos como uma forma de capturar os movimentos de todo o corpo.</p><p>O Nintendo Wii produziu uma grande inovação ao lançar o Wii Remote, um dispositivo apontador portátil que</p><p>detecta o movimento em 3D.</p><p>Um par de controles de captura de movimento Wii Remote em uso</p><p>Já o Kinect da Microsoft contém câmera e projetor de infravermelho para a captura do movimento em 3D e</p><p>em tempo real. Ele também possui microfone para comando de voz.</p><p>Duas pessoas dançam e têm seus movimentos capturados pelo Kinect</p><p>Realidade virtual</p><p>Os dispositivos de realidade virtual criam a sensação de presença em um ambiente virtual com gráficos 3D ou</p><p>imagens em 360°.</p><p>Smart speakers</p><p>Dispositivos de entrada e saída conectados à internet, os smart speakers são capazes de realizar uma série</p><p>de tarefas por meio de comandos de voz do usuário.</p><p>Exemplo de smart speaker</p><p>Esse tipo de dispositivo está diretamente relacionado aos conceitos de casas inteligentes e de internet das</p><p>coisas (IoT).</p><p>Os smart speakers são compostos de:</p><p>Microfone para receber comandos de voz.</p><p>Inteligência artificial.</p><p>Caixa de som para o aparelho ar retorno ao usuário.</p><p>Interface e design de interação</p><p>Veja o que é design de interação e o conceito de interface.</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>•</p><p>•</p><p>•</p><p>Vem que eu te explico!</p><p>Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.</p><p>IxD, UX e UI, que áreas são essas?</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Interface ou tela?</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Verificando o aprendizado</p><p>Questão 1</p><p>Entre as alternativas a seguir, marque a que melhor define a atividade de design de interação.</p><p>A</p><p>Atividade de desenhar telas atraentes para o usuário a fim de valorizar a marca.</p><p>B</p><p>Atividade que usa softwares, como o Figma, o Adobe XD ou o Sketch.</p><p>C</p><p>Sinônimo de UX, que é uma atividade de desenvolvimento de experiências de usuário.</p><p>D</p><p>Atividade de projetar interfaces de produtos que facilitam a interação das pessoas.</p><p>E</p><p>Sinônimo de UI, que é somente uma atividade de design de interface de usuário.</p><p>A alternativa D está correta.</p><p>O design de interação significa mais do que projetar telas atraentes. Trata-se de uma área próxima dos</p><p>chamados UX e UI, porém ele se diferencia dessas áreas por trabalhar com a sobreposição delas. Além</p><p>disso, não possui um escopo tão amplo quanto o UX nem se limita ao design de telas como o UI.</p><p>Questão 2</p><p>Entre as alternativas a seguir, aponte a que melhor define uma interface para o design de interação.</p><p>A</p><p>Layout das telas que visualizamos em um aplicativo.</p><p>B</p><p>Fina película entre a água e o óleo.</p><p>C</p><p>Elemento que possibilita às pessoas “se comunicar” com computadores.</p><p>D</p><p>Tela sensível ao toque (touch screen) dos smartphones.</p><p>E</p><p>Periféricos de computadores.</p><p>A alternativa C está correta.</p><p>As interfaces são elementos que permitem aos seres humanos se comunicar com máquinas, como os</p><p>computadores e os smartphones. As interfaces podem ser digitais ou físicas. A fina película entre a água e</p><p>o</p><p>óleo é uma interface, porém isso só se verifica nas áreas da Química e da Física. Para o design de</p><p>interação, essa película é somente uma metáfora da interface.</p><p>2. Plataformas</p><p>Ligando os pontos</p><p>Você sabe o que são plataformas? Como diferentes plataformas influenciam a interface e a interação?</p><p>Para entendermos melhor o assunto, vamos retomar o case da empresa fictícia de desenvolvimento de</p><p>aplicativos.</p><p>Você é um designer de interação e durante a reunião da equipe com o cliente, você pôde ver que a empresa</p><p>do cliente já possui um grande site com muitas informações sobre a empresa e os serviços que ela presta.</p><p>Você viu que hoje o único lugar onde os usuários interagem é no website da empresa, pois não há outras</p><p>formas disponíveis.</p><p>O site possui um menu com muitas abas, muitas páginas com textos longos e detalhados, que refletem a</p><p>estrutura organizacional da empresa, como em um organograma.</p><p>No contexto da interface e da interação, vamos definir que as plataformas são um tipo de sistema composto</p><p>por hardware e sistema operacional, que define como pode ser usado e quais softwares ou aplicativos são</p><p>compatíveis.</p><p>Nesse exemplo de website, ele foi projetado para as plataformas que são desktops ou notebooks com sistema</p><p>operacional e navegador de Internet. Mais especificamente, o website pode ser usado em PCs com o sistema</p><p>operacional Windows e navegador que pode ser o Microsoft Edge, Google Chrome, Opera, Firefox etc., e</p><p>também em Macs da Apple com sistema operacional macOS e navegador Safari ou Chrome, Firefox etc.</p><p>Dessa forma, a interface deste site foi planejada para usuários interagindo usando os dispositivos de interação</p><p>teclado e mouse (ou touchpad, no caso do notebook).</p><p>Como os smartphones possuem navegadores de Internet, é possível abrir o site em um smartphone, mas o</p><p>site claramente não foi projetado para ser visualizado assim.</p><p>A partir da reunião com o cliente, ficou definido que seria criado um aplicativo para dispositivos móveis com</p><p>funcionalidades específicas para os clientes da empresa acessarem seus serviços de forma mais rápida e</p><p>fácil. Junto com a sua equipe, você vai projetar uma interface para esse novo aplicativo.</p><p>Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?</p><p>Questão 1</p><p>Analisando as características da interface do site, além de concluir que ele foi desenvolvido para plataformas</p><p>de desktops e notebooks, você também pode perceber que:</p><p>I. a interface do website não foi projetada de maneira centrada na experiência do usuário, mas sim na</p><p>estrutura da empresa.</p><p>II. no início da concepção do projeto, também é fundamental saber que plataformas os usuários usarão para</p><p>interagir com a interface.</p><p>III. provavelmente é um website antigo, que com certeza vai requerer um redesenho da marca e identidade</p><p>visual.</p><p>IV. como é possível abrir o site usando-se um smartphone, parece desnecessário criar uma versão própria só</p><p>para dispositivos móveis como plataforma.</p><p>Em sua visão de designer de interação, alinhado com a maneira com que a empresa em que você trabalha se</p><p>posiciona no mercado, escolha as conclusões corretas:</p><p>A</p><p>I, II e III</p><p>B</p><p>II, III e IV</p><p>C</p><p>I e II</p><p>D</p><p>III e IV</p><p>E</p><p>I e IV</p><p>A alternativa C está correta.</p><p>Interfaces pensadas para seguir a estrutura da empresa costumam ser difíceis de serem usadas por</p><p>pessoas que não conhecem a estrutura organizacional. Como é um site público, e não uma intranet restrita</p><p>aos funcionários, isso indica que o projeto não é centrado no usuário. As plataformas fazem grande</p><p>diferença na hora de projetar os respectivos aplicativos. Nesse exemplo, lembre-se de que no desktop o</p><p>site será visualizado em modo “paisagem”, enquanto em smartphones ele será visualizado em modo</p><p>“retrato”. Parece ser um website relativamente antigo, mas isso não quer dizer necessariamente que ele</p><p>precisará reformular sua marca porque este é um patrimônio valioso para a imagem da empresa, que não</p><p>deve mudar a toda hora e, se bem feito, é concebido para ser válido por muitos anos sem precisar de</p><p>modernização.</p><p>Questão 2</p><p>Desktops e dispositivos móveis são plataformas bem diferentes. Sabendo disso, neste projeto você vai</p><p>considerar que:</p><p>A</p><p>o aplicativo de instalação do novo aplicativo será o mesmo, independentemente da plataforma.</p><p>B</p><p>para cada plataforma, há um aplicativo específico, que ainda pode apresentar funcionalidades diferentes.</p><p>C</p><p>para cada plataforma há um software instalador específico, porém o modo de exibição nas telas é idêntico.</p><p>D</p><p>para cada plataforma há um software instalador específico, porém são conservadas exatamente as mesmas</p><p>funcionalidades.</p><p>E</p><p>em cada plataforma, o aplicativo deve apresentar diferentes cores e identidades visuais.</p><p>A alternativa B está correta.</p><p>Para se instalar um aplicativo, existe um software específico para cada plataforma. Há um arquivo de</p><p>instalação diferente para os sistemas operacionais Android ou iOS. Como foram projetados para objetivos</p><p>diferentes, certamente o website e o aplicativo para dispositivos móveis não terão exatamente as mesmas</p><p>funcionalidades. O layout da tela também sofre alterações, pois a visualização nos celulares é em “modo</p><p>retrato” e nos navegadores de desktop é em “modo paisagem”.</p><p>Atividade Discursiva</p><p>Pensando nesse exemplo fictício, que reflete muitos casos reais, explique a diferença na maneira com que o</p><p>website e o aplicativo deverão se diferenciar em relação às funcionalidades que oferecerão aos usuários.</p><p>Chave de resposta</p><p>Os dispositivos móveis são plataformas bem diferentes dos desktops. Dessa forma, mesmo levando o</p><p>nome de um aplicativo para desktop, um aplicativo para smartphone deverá ter muitas diferenças ao</p><p>oferecer funcionalidades para o usuário. Certamente, o aplicativo para smartphones oferecerá uma</p><p>quantidade reduzida de funcionalidades e antes deve haver uma seleção de quais funcionalidades são</p><p>importantes para o usuário final. Ou seja, seria importante pesquisar que tipo de tarefas os usuários</p><p>precisam fazer em um celular e não tentar oferecer o máximo de funcionalidades, como acontece no</p><p>desktop. Outra coisa seria adaptar a forma da interação para a tela sensível ao toque, que não permite o</p><p>uso de atalhos de teclado. Isso também reduz o número de funcionalidades que ficam visíveis ao mesmo</p><p>tempo na tela.</p><p>Introdução</p><p>Para qualquer solução de interface, devemos ter em mente para qual plataforma ela está sendo criada. Para</p><p>Cooper (2007), uma plataforma pode ser pensada como uma combinação de hardware e software que permite</p><p>ao produto funcionar tanto em termos de interações do usuário quanto em relação às operações internas do</p><p>produto.</p><p>São exemplos de plataformas:</p><p>PCs Consoles de videogame</p><p>Smart TVs Smartphones</p><p>Posturas dos aplicativos nas plataformas</p><p>Cooper (2007) destaca quão importante é prestar atenção na postura dos aplicativos em cada plataforma.</p><p>Vamos chamar de postura a forma de apresentação da interface que afeta a maneira com que os usuários</p><p>interagem com um aplicativo. Essa maneira, afinal, influencia a própria usabilidade do aplicativo.</p><p>A aparência e o comportamento de um aplicativo precisam refletir a maneira com que ele deve ser usado.</p><p>Segundo a perspectiva da postura, isso não é uma questão puramente estética, e sim comportamental. A</p><p>plataforma tem um papel importante nessa postura.</p><p>Exemplo</p><p>Existe uma diferença palpável na maneira com que usamos uma caixa de e-mails no nosso PC quando</p><p>estamos sentados à mesa de trabalho e quando a conferimos rapidamente no celular antes de entrar no</p><p>metrô.</p><p>Nos jogos digitais, essa diferença de postura parece ser ainda mais destacada. Basta comparar o momento</p><p>em que reservamos um dia em casa para ligar o console de videogame e jogar um game 3D e aquele no qual,</p><p>entediados no metrô, nos distraímos com um jogo no celular enquanto esperamos a chegada da próxima</p><p>estação.</p><p>Cooper e demais autores (2007) listam três categorias de postura:</p><p>Soberana</p><p>Transitória</p><p>Daemônica</p><p>Como cada categoria descreve um conjunto diferente de atributos comportamentais,</p><p>cada uma delas também</p><p>é responsável pela descrição de um tipo diferente de interação do usuário. Essas categorias nos ajudam a ter</p><p>um ponto de partida para projetar uma interface.</p><p>A seguir, descreveremos as três categorias de postura.</p><p>Postura soberana</p><p>Os aplicativos de postura soberana são aqueles que ocupam a tela inteira e monopolizam a atenção dos</p><p>usuários por longos e contínuos períodos de tempo. Trata-se dos aplicativos que também oferecem um</p><p>grande conjunto de funcionalidades para o usuário.</p><p>Listaremos alguns exemplos:</p><p>Processador de textos Word.</p><p>Editor de imagens Photoshop.</p><p>Editor de vídeos After Effects.</p><p>Motor de jogo Unity.</p><p>Nesses exemplos, esses aplicativos se mantêm “soberanos”, mesmo que outros aplicativos sejam usados ao</p><p>mesmo tempo para tarefas de suporte.</p><p>Saiba mais</p><p>Os jogos digitais, em sua grande maioria, seguem essa postura de forma mais intensa, ficando em tela</p><p>cheia por padrão.</p><p>Postura transitória</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Quando usamos um aplicativo soberano, algumas vezes precisamos utilizar rapidamente algum outro, que</p><p>abre uma janela com somente uma função e poucos controles, fechando-o rapidamente em seguida para</p><p>continuar nosso trabalho.</p><p>Esse tipo de aplicativo é conhecido como de postura transitória, porque ele vem e vai. Ele aparece,</p><p>faz seu trabalho e sai rapidamente. Um exemplo de aplicativo de postura transitória é o Windows</p><p>Explorer.</p><p>Muitas vezes, ao usar um aplicativo soberano, como o Photoshop, abre-se o Windows Explorer rapidamente</p><p>para encontrar uma fotografia, o qual é fechado logo depois para se retomar o trabalho no Photoshop.</p><p>Perceba que, nesse momento, o Windows Explorer não ocupa toda a tela: ele abre uma janela menor, se</p><p>sobrepondo ao aplicativo soberano para o usuário não perder sua atividade principal de vista.</p><p>Postura daemônica</p><p>Programas que normalmente não interagem com o usuário são aplicativos de postura daemônica. Esses</p><p>aplicativos funcionam de forma silenciosa e invisível em segundo plano, realizando tarefas possivelmente</p><p>vitais sem a necessidade de intervenção humana.</p><p>Exemplo</p><p>Um driver de impressora ou uma conexão de rede.</p><p>No entanto, os aplicativos daemônicos devem ocasionalmente ser instalados e removidos, assim como</p><p>também precisam, de forma ocasional, ser ajustados. É só nessas horas que o usuário interage.</p><p>A interação entre um usuário e um aplicativo daemônico sempre é de natureza transitória – e todas as</p><p>recomendações de design de interface relativas aos aplicativos transitórios também valem aqui. A diferença é</p><p>que os ícones dos aplicativos com tal postura devem sempre ser discretos para não concorrer pela atenção do</p><p>usuário.</p><p>Desktops, notebooks e dispositivos móveis</p><p>Como todo trabalho de design constitui uma conversa com materiais, também é importante para o design de</p><p>interação entender as limitações e as oportunidades associadas a cada plataforma. Sendo assim, faremos</p><p>algumas considerações sobre as posturas apresentadas e algumas plataformas.</p><p>Desktops e notebooks</p><p>O design de interação tem suas raízes no software de desktop. Os desktops podem ter uma grande variedade</p><p>de configurações, indo das mais básicas até as mais avançadas, tendo ainda a capacidade de sofrer</p><p>alterações e trocas de peças para seu upgrade. Já os notebooks, hoje em dia, são plataformas muito similares</p><p>aos desktops, tendo uma grande capacidade de processamento.</p><p>Os desktops são a principal plataforma para os aplicativos</p><p>de postura soberana. São usados neles os principais</p><p>aplicativos para o desempenho de trabalhos que exigem</p><p>muito processamento da máquina, assim como um grande</p><p>treinamento e o desenvolvimento de habilidades do usuário,</p><p>uma vez que reúnem muitas funcionalidades.</p><p>Eis algumas recomendações para a postura soberana em</p><p>desktops:</p><p>Otimizar a interface, priorizando os usuários que já possuem</p><p>um conhecimento intermediário em vez de funcionar como</p><p>se fosse sempre a primeira vez de cada usuário.</p><p>Ocupar toda a tela para exibir uma grande quantidade de funcionalidades ao mesmo tempo.</p><p>Seguir um estilo visual minimalista para não concorrer pela atenção do usuário ou sobrecarregar sua</p><p>visão.</p><p>Criar um feedback visual, mas seguindo ao máximo a regra da sutileza minimalista.</p><p>Disponibilizar muitas formas de entradas de dados, como digitação no teclado, atalhos de teclado,</p><p>caixas de diálogo, cliques e movimentações de seta.</p><p>A postura transitória, como o próprio nome diz, diz respeito aos aplicativos que funcionam de forma</p><p>temporária. Como não ficam muito tempo na tela, os usuários não têm tempo de se familiarizar muito com</p><p>eles.</p><p>Suas recomendações, assim, são praticamente o oposto daquelas listadas para a interface soberana:</p><p>Não desenhar uma janela que ocupe toda a tela.</p><p>Desenhar botões grandes.</p><p>Usar letras grandes e fáceis de entender.</p><p>Colocar legendas de instruções com frases curtas, porém claras, em vez de só palavras-chave que o</p><p>usuário pode esquecer.</p><p>Dar poucas opções para que o usuário não cometa erros.</p><p>Não exigir habilidade motora do usuário, preferindo botões e não colocando a barra de rolagem.</p><p>Tudo que o usuário precisa fazer tem de estar visível na tela.</p><p>Os desktops também reúnem uma série de aplicativos que funcionam com uma postura daemônica. Eles</p><p>operam, na maioria das vezes, sem receber comandos do usuário, o qual, por sua vez, passa a maior parte do</p><p>tempo sem lembrar que eles existem. Eventualmente, contudo, ele pode precisar buscá-los para fazer</p><p>escolhas.</p><p>Um exemplo são as configurações de monitores no Windows. Mesmo já tendo usado tais configurações antes,</p><p>o usuário pode se esquecer de seus comandos. Isso é facilitado com uma busca textual para alcançar a</p><p>respectiva janela. Trata-se de uma interface simples que antecipa as necessidades do usuário.</p><p>Dispositivos móveis</p><p>Sem dúvida, eles são atualmente o tipo de plataforma mais difundido e o que evolui mais rápido. Diversas</p><p>limitações antigas dos dispositivos móveis já foram superadas, embora haja muitas diferenças de interação em</p><p>relação aos desktops que precisam ser observadas.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Os aplicativos assumem uma postura soberana</p><p>em dispositivos móveis de forma mais limitada.</p><p>Eles não podem ter uma quantidade tão grande</p><p>de funcionalidades quanto os aplicativos para</p><p>desktop, mas podem ser projetados para</p><p>longas sessões de trabalho do usuário. O</p><p>aplicativo para pintura digital Procreate é um</p><p>exemplo, tendo inclusive gráficos minimalistas.</p><p>Nos smartphones, alguns aplicativos possuem</p><p>funções transitórias em apoio a outro aplicativo</p><p>de postura soberana.</p><p>Exemplo</p><p>O Instagram seria considerado de postura soberana, enquanto o aplicativo Repost, usado somente para</p><p>repostar algo do feed de outra conta no nosso feed, teria uma postura transitória.</p><p>A forma com que sua interface é projetada acaba seguindo algumas das recomendações que listamos para o</p><p>desktop.</p><p>Em smartphones, muitos aplicativos operam com uma postura daemônica. Entretanto, eles consomem a</p><p>energia da bateria. Por isso, desativá-los e ativá-los deve ser simples e fácil, enquanto a interface é simples e</p><p>minimalista.</p><p>Exemplo</p><p>A opção de ligar e desligar a conexão de internet móvel, o bluetooth e o ajuste de brilho de tela.</p><p>Já o Spotify é um exemplo de aplicativo que tem uma função daemônica, mesmo não sendo classificado</p><p>dessa maneira. Ele, afinal, continua fazendo o streaming de músicas mesmo após fecharmos a tela do</p><p>aplicativo e possui um controle discreto para encerrar o streaming.</p><p>Smart TVs, media streaming e consoles de videogame</p><p>Smart TVs e media streaming</p><p>As smart TVs já obtiveram grandes avanços em suas funcionalidades, conectando-se à internet e usando uma</p><p>série de aplicativos de streaming de vídeo e música.</p><p>Entretanto, para controlar suas funcionalidades, prevalecem</p><p>ainda os controles remotos, cujo formato é muito</p><p>semelhante ao dos antigos controles que se limitavam a</p><p>“trocar de canal”. Esses controles impedem a interface de</p><p>exibir uma grande quantidade de funcionalidades, pois seria</p><p>muito difícil navegar entre elas usando</p><p>um controle remoto.</p><p>Apesar de suas poucas funcionalidades, prevalecem as</p><p>demais recomendações da postura soberana para os</p><p>aplicativos de smart TVs:</p><p>Ocupar toda a tela.</p><p>Ser minimalista ao máximo para não concorrer pela atenção do usuário, não “enfeitando” janelas com</p><p>molduras.</p><p>Usar fundos sempre escuros e sem cor, seguindo a mesma luminosidade das telas de créditos</p><p>tradicionais ao final de filmes e de séries.</p><p>Disponibilizar comandos simples que dependem de movimentações (para cima ou para baixo, assim</p><p>como para a direita e para a esquerda), acrescentando um apertar de botão para aceitar como “OK”.</p><p>Para não aumentar os comandos dos controles remotos e dificultar a interação, não há aplicativos com</p><p>postura transitória em smart TVs.</p><p>Exemplo</p><p>Você deve ter percebido que não abrimos novas janelas uma por cima da outra quando usamos as smart</p><p>TVs. Isso tornaria a navegação muito difícil com o controle remoto.</p><p>Na verdade, os aplicativos possuem uma postura predominantemente soberana, embora sigam algumas</p><p>recomendações da postura transitória:</p><p>Desenhar botões grandes.</p><p>Usar letras grandes e fáceis de entender.</p><p>Colocar legendas de instruções com frases curtas, porém claras, em vez de só palavras-chave que o</p><p>usuário pode esquecer.</p><p>Dar poucas opções para que o usuário não cometa erros.</p><p>Não exigir habilidade motora do usuário, preferindo botões e não colocando a barra de rolagem.</p><p>A postura daemônica aparece nos ajustes da smart TV, como o ajuste do brilho da tela e da conexão de</p><p>internet, além dos controles parentais. Dentro do aplicativo de streaming, eles permitem o ajuste de idiomas e</p><p>legendas.</p><p>Consoles de videogame</p><p>Nesse caso, as interfaces de controle do console devem se assemelhar às interfaces dos jogos mais</p><p>comumente jogados no console e ser adaptadas para as possibilidades dos controles de videogame.</p><p>Nesse caso, as interfaces de controle do console devem se assemelhar às interfaces dos jogos mais</p><p>comumente jogados no console e ser adaptadas para as possibilidades dos controles de videogame.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Exemplo</p><p>Em um console para jogar jogos usando óculos de realidade virtual e controles de captura de</p><p>movimentos, a interface também precisa ser construída em realidade virtual em 3D, enquanto seus</p><p>controles devem envolver movimentos da cabeça (usando os óculos de realidade virtual) e das mãos</p><p>(segurando os controles de captura de movimentos).</p><p>Assim como nas recomendações para as smart TVs, a interface dos consoles de videogame deve ser fácil de</p><p>navegar, usando movimentos para cima ou para baixo e para a esquerda ou para a direita, além de botões do</p><p>gamepad para dar “OK”.</p><p>Porém, ao contrário das interfaces das smart TVs, as interfaces nos consoles podem ter um visual bem menos</p><p>minimalista, com cores, texturas e efeitos sonoros para a entrada de botões e telas – e até mesmo com uma</p><p>trilha sonora de fundo.</p><p>A interface para consoles tem de ser projetada como uma extensão dos jogos do console para que o usuário</p><p>jogador não sinta um choque e um contraste entre a postura de um jogo que ele acabou de jogar e a da</p><p>interface do console.</p><p>Exemplo</p><p>Após terminar uma sessão em 3D com muitos efeitos sonoros, texturas, cores e movimentos, o usuário</p><p>jogador abre uma interface completamente minimalista, flat, sem cores, escura e silenciosa, causando</p><p>nele um estranhamento e a sensação de que o console está aquém do jogo, como se a plataforma não</p><p>fosse adequada para os jogos.</p><p>Plataformas e posturas de seus aplicativos</p><p>Veja as diferentes plataformas e as respectivas posturas de seus aplicativos.</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Vem que eu te explico!</p><p>Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.</p><p>Um típico aplicativo de postura soberana</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Um aplicativo de postura transitória</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Verificando o aprendizado</p><p>Questão 1</p><p>Entre as alternativas a seguir, escolha a que mostra o funcionamento de um aplicativo de postura soberana da</p><p>melhor forma.</p><p>A</p><p>O aplicativo é chamado para executar uma tarefa rapidamente, sendo, em seguida, fechado.</p><p>B</p><p>O usuário passa muito tempo usando esse aplicativo, que funciona principalmente em tela cheia e possui</p><p>muitas funcionalidades.</p><p>C</p><p>Abre-se uma janela pequena no meio da tela com um botão grande e chamativo.</p><p>D</p><p>O aplicativo funciona de forma constante no computador, sem que o usuário o veja todo o tempo.</p><p>E</p><p>Seu melhor exemplo é o Windows Explorer.</p><p>A alternativa B está correta.</p><p>Os aplicativos de postura soberana são aqueles que possuem muitas funcionalidades, sendo usados por</p><p>longos períodos de tempo. Sua principal plataforma é o desktop. Eles preferencialmente devem ocupar toda</p><p>a tela.</p><p>Questão 2</p><p>Escolha a alternativa mais adequada quanto à relação entre as plataformas e as posturas de seus aplicativos.</p><p>A</p><p>Independentemente da plataforma utilizada, as interfaces devem assumir as mesmas posturas.</p><p>B</p><p>Uma interface de postura soberana tem as mesmas características independentemente da plataforma na qual</p><p>ela é usada.</p><p>C</p><p>Os desktops são a plataforma que suporta aplicativos com o maior número de funcionalidades na postura</p><p>soberana.</p><p>D</p><p>Os dispositivos móveis podem ter um grande número de aplicativos ativos na postura daemônica sem que o</p><p>usuário possa fazer escolhas sobre isso.</p><p>E</p><p>Para os desktops, não é recomendada a criação de interfaces de postura transitória.</p><p>A alternativa C está correta.</p><p>Mesmo que a postura soberana possa ser prevalente em um aplicativo para qualquer plataforma, a</p><p>interface precisa ser adaptada para cada uma delas e assumir algumas características de cada postura</p><p>conforme suas limitações.</p><p>3. Funcionalidade, usabilidade e acessibilidade</p><p>Ligando os pontos</p><p>Você sabe o que é usabilidade? Acessibilidade também é um conceito importante. Qual seria a diferença entre</p><p>usabilidade e acessibilidade?</p><p>Já falamos sobre funcionalidades, quando demos exemplos de tipos de softwares que oferecem mais ou</p><p>menos funcionalidades. Além de oferecer funcionalidades, um aplicativo também precisa ter uma boa</p><p>usabilidade e ser acessível.</p><p>Para entendermos melhor o assunto, vamos retomar o case da empresa fictícia de desenvolvimento de</p><p>aplicativos.</p><p>Você é um designer de interação e depois da reunião da equipe com o cliente, ficou acordada a possibilidade</p><p>de sua equipe trabalhar em uma atualização do site da empresa do cliente, além da criação do novo aplicativo</p><p>para dispositivos móveis.</p><p>Nesse momento, você ficou responsável por fazer uma avaliação listando as funcionalidades do website, se</p><p>ele atende às dez heurísticas de Jakob Nielsen para a usabilidade no design de interação e se ele atende aos</p><p>quatro princípios de acessibilidade (Web Content Accessibility Guidelines) do Consórcio World Wide Web</p><p>(W3C). Primeiro, você consultou os dois websites onde estão disponíveis e explicados esses princípios de</p><p>acessibilidade e heurísticas de usabilidade.</p><p>Com base nisso, você estruturou um relatório que foi bem trabalhoso de se fazer e ficou bem longo.</p><p>Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?</p><p>Questão 1</p><p>Você sabia que muitas pessoas são daltônicas? Além disso, algumas nunca se deram conta de sua condição.</p><p>Existem formas diferentes de daltonismo, mas podemos dizer que na maioria delas as pessoas não enxergam</p><p>bem o vermelho. Pensando nisso, escolha uma opção que corresponde à uma escolha de acessibilidade que</p><p>ajudará a maioria dos daltônicos a enxergar melhor as cores do site.</p><p>A</p><p>Optar por fontes grandes e na forma bastão na interface.</p><p>B</p><p>Usar a cor azul como predominante na interface.</p><p>C</p><p>Optar por um fundo escuro para interface.</p><p>D</p><p>Ajustar a navegação na interface por meio do teclado.</p><p>E</p><p>Construir a interface com tecnologia assistiva.</p><p>A alternativa B está correta.</p><p>Como a maioria dos daltônicos têm problema para visualizar as variações das cores,</p><p>em particular a cor</p><p>vermelha e não com uma baixa visão que precisa ser superada com alguma tecnologia assistiva. Uma</p><p>interface predominantemente azul vai ser percebida pela maioria das pessoas que tenham algum dos</p><p>diferentes tipos de daltonismo.</p><p>Questão 2</p><p>A usabilidade está relacionada à qualidade de uso de uma interface, com a facilidade com que as pessoas</p><p>usam a interface. Dentre as características abaixo que você colocou no seu relatório sobre o atual website,</p><p>qual corresponde especificamente a um problema de usabilidade?</p><p>A</p><p>Não mostra mensagens de alerta para ações importantes do usuário que podem ser um erro.</p><p>B</p><p>Não fornece legendas escritas para os vídeos.</p><p>C</p><p>Não pode ser navegado com atalhos de teclado.</p><p>D</p><p>Não é compatível com tecnologias assistivas.</p><p>E</p><p>Não é possível aumentar o tamanho e o contraste dos textos.</p><p>A alternativa A está correta.</p><p>A falta de mensagens de alerta é uma questão de usabilidade porque faz o usuário se sentir sem controle</p><p>da situação, essa sensação torna a interação mais difícil.</p><p>Atividade Discursiva</p><p>Considere o seguinte cenário: na sua avaliação de acessibilidade do site, você resolveu já ir anotando</p><p>sugestões de possíveis oportunidades de melhorias para a nova versão que está sendo feita. A marca da</p><p>empresa responsável é vermelha, uma cor bem comum em marcas, por isso textos importantes em geral estão</p><p>escritos em vermelho. Adicionalmente, quando o usuário escreve a senha errada, a borda da caixa de texto se</p><p>torna vermelha, para sinalizar o erro. Para preservar o layout, não há opção de aumento do tamanho das</p><p>letras. Explique sobre que melhorias poderiam ser feitas para esse pequeno item se adequar melhor a</p><p>princípios de acessibilidade.</p><p>Chave de resposta</p><p>As possíveis melhorias na atualização do website, para seguir princípios de acessibilidade, seriam: a cor da</p><p>marca não precisa ser repetida em textos importantes, recomendo trocar a cor dos textos por preto ou</p><p>cinza escuro, colocando os textos de destaque em negrito ou em tamanho maior, pois algumas pessoas</p><p>não enxergarão bem o vermelho, que em vez de destacar os textos, os tornará pouco legíveis; da mesma</p><p>forma, algumas pessoas não perceberão que digitaram a senha errada só pela cor vermelha na borda, essa</p><p>sinalização vermelha pode ser mantida, mas recomendo que adicionalmente apareça uma mensagem de</p><p>texto na mesma caixa de diálogo, avisando sobre o erro; por fim, é importante que o usuário tenha a opção</p><p>de aumentar o tamanho dos textos para melhor leitura, o layout pode ser projetado para permitir isso sem</p><p>prejudicar a boa diagramação das janelas.</p><p>Introdução</p><p>Já vimos que o designer de interação precisa trabalhar para que o usuário consiga interagir o mais facilmente</p><p>possível com a interface. Para isso, esse designer precisa ter certos princípios em mente.</p><p>Por isso, apresentaremos adiante os conceitos de funcionalidade, usabilidade e acessibilidade. Como os três</p><p>constituem conceitos de qualidade do aplicativo, as pessoas podem confundi-los: preste atenção em cada um</p><p>deles.</p><p>Funcionalidade</p><p>A funcionalidade está relacionada ao fator utilidade ou aplicabilidade de um sistema, ou seja, ao conjunto de</p><p>funcionalidades necessárias para o usuário realizar as tarefas desejadas.</p><p>Eis alguns exemplos de funcionalidade:</p><p>Cadastro de usuários.</p><p>Login.</p><p>Geolocalização.</p><p>Busca por listas.</p><p>Geração de relatórios.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Chat.</p><p>Notificações.</p><p>Push.</p><p>Como requisito de qualidade, a funcionalidade de um software diz respeito à satisfação de necessidades que</p><p>deram origem ao projeto. Além de abranger requisitos implícitos e explícitos, ela está intimamente ligada à</p><p>qualidade do código criado.</p><p>Resumindo</p><p>A funcionalidade, portanto, está relacionada com a capacidade do aplicativo de executar funções. O</p><p>desenvolvimento de um aplicativo requer testes de funcionalidade para verificar a robustez da</p><p>implementação.</p><p>Usabilidade</p><p>A usabilidade se atém à qualidade de uso de uma interface. Seu foco está no usuário, e não nas</p><p>funcionalidades do sistema. Ela está relacionada, em suma, com a facilidade com que as pessoas usam uma</p><p>ferramenta para realizar uma tarefa.</p><p>Trata-se da capacidade de uma interface permitir que o usuário tenha sucesso na execução de suas tarefas. A</p><p>usabilidade pode ser vista também como um atributo de qualidade que avalia quão fácil é usar uma interface.</p><p>Dez heurísticas de usabilidade para o design de interação</p><p>Jakob Nielsen (2020) é uma das nossas maiores referências em usabilidade. Em seu site, ele disponibiliza 10</p><p>heurísticas de usabilidade para o design de interação:</p><p>Heurísticas</p><p>Princípios gerais, e não diretrizes específicas.</p><p>1. Visibilidade do estado do sistema</p><p>O usuário deve sempre ser informado sobre o que está acontecendo no sistema. Isso o ajuda a</p><p>aprender com o feedback de sua interação e saber o que deve fazer. Interações previsíveis geram</p><p>confiança no produto e até na marca envolvida.</p><p>2. Correspondência entre o sistema e o mundo real</p><p>Use a linguagem do usuário: palavras, frases e conceitos familiares. Siga convenções do mundo real,</p><p>pois isso faz com que o usuário aprenda e lembre mais facilmente como a interface funciona. Tenha</p><p>atenção com as metáforas (que vamos ver adiante).</p><p>•</p><p>•</p><p>•</p><p>3. Controle e liberdade do usuário</p><p>Usuários cometem erros interagindo. Eles precisam ter uma opção fácil para “desfazer” a ação errada.</p><p>Quando é fácil para as pessoas “voltarem” uma ação, isso cria uma sensação de liberdade e</p><p>confiança.</p><p>4. Consistência e padronização</p><p>Procure seguir as convenções da plataforma e do mercado. Os usuários não devem ter que aprender</p><p>novas palavras, situações ou ações.</p><p>5. Prevenção de erro</p><p>A interface precisa prevenir o usuário de cometer erros. Isso pode ser feito ao impedir ações que</p><p>levam ao erro ou ao informar as consequências de uma ação, perguntando se o usuário realmente</p><p>quer executar aquela ação.</p><p>6. Reconhecimento em vez de memorização</p><p>O usuário não deve ter a necessidade de lembrar informações de uma parte da interface para a outra.</p><p>As informações necessárias para interagir precisam estar visíveis na tela ou ser facilmente</p><p>recuperáveis quando necessário.</p><p>7. Flexibilidade e eficiência de uso</p><p>Atalhos podem acelerar a interação para os usuários mais experientes. Crie interfaces capazes de</p><p>atender tanto aos usuários experientes quanto aos inexperientes, dando a opção de eles</p><p>personalizarem ações frequentes. Com isso, as pessoas vão escolher o que funciona melhor para</p><p>elas.</p><p>8. Design estético e minimalista</p><p>As interfaces devem conter somente informações relevantes. Não crie uma interface “poluída” com</p><p>elementos que não são úteis para o usuário e “competem” pela atenção dele. Isso não quer dizer que</p><p>você deve adotar a estética flat para os elementos visuais, e sim que precisa focar o que é essencial</p><p>para os objetivos do usuário.</p><p>9. Auxílio na resolução de um erro</p><p>Ajuda os usuários a reconhecerem, diagnosticarem e recuperarem-se de erros.</p><p>As mensagens de erro devem:</p><p>Ser simples (sem códigos de erro).</p><p>Mostrar o problema.</p><p>Sugerir uma solução fácil.</p><p>Use visuais de mensagens de erro tradicionais, por exemplo, texto em negrito e vermelho.</p><p>•</p><p>•</p><p>•</p><p>10. Ajuda e documentação</p><p>É melhor que o sistema não precise de nenhuma explicação adicional, mas pode ser necessário</p><p>fornecer uma documentação para ajudar os usuários. O conteúdo de ajuda e documentação deve ser</p><p>fácil de pesquisar, apresentando, se possível, a documentação contextualizada no momento em que o</p><p>usuário precisa dela.</p><p>Saiba mais</p><p>Você encontra tais heurísticas, assim como outros exemplos e vídeos, no site que Jakob Nielsen vem</p><p>mantendo e atualizando desde 1994 (sua atualização mais recente é de 2020). Para achar a página de</p><p>Nielsen, basta digitar em uma ferramenta de busca “10 usability heuristics for user interface design”.</p><p>Acessibilidade</p><p>A acessibilidade inicialmente estava relacionada à possibilidade de acesso ao sistema de pessoas portadoras</p><p>de alguma deficiência física. Hoje em dia, contudo, as diretrizes de acessibilidade são pensadas para a</p><p>projeção de produtos</p><p>a serem utilizados, sem modificações, pelo maior número de pessoas, e não por grupos</p><p>pequenos.</p><p>A ideia geral também é que, desse modo, uma interface será melhor e mais fácil para todos usarem.</p><p>Exemplo</p><p>Mesmo as pessoas que não são surdas podem não ouvir algum som do aplicativo, pois elas se</p><p>encontram em um lugar barulhento ou não estão usando fones de ouvido.</p><p>O consórcio World Wide Web (W3C) disponibiliza em seu site as WCAG 2.0, que são as diretrizes de</p><p>acessibilidade para conteúdo web (WORLD WIDE WEB CONSORTIUM, 2012). Seus princípios de acessibilidade</p><p>são uma referência até hoje.</p><p>WCAG</p><p>Web content accessibility guidelines.</p><p>Vamos conhecer melhor tais princípios!</p><p>Princípios de acessibilidade</p><p>Princípio 1: Perceptível</p><p>“As informações e os componentes da interface do usuário devem ser apresentados em formas que possam</p><p>ser percebidas pelo usuário” (WORLD WIDE WEB CONSORTIUM, 2012).</p><p>Para contemplar esse princípio, é preciso:</p><p>Fornecer alternativas em texto para todo o conteúdo não textual.•</p><p>Dar alternativas, como legendas escritas ou audiodescrição.</p><p>Criar conteúdo que possa ser apresentado de diferentes formas.</p><p>Facilitar aos usuários a audição e a visão dos conteúdos.</p><p>Princípio 2: Operável</p><p>“Os componentes de interface de usuário e a navegação devem ser operáveis” (WORLD WIDE WEB</p><p>CONSORTIUM, 2012).</p><p>Para contemplar esse princípio, é preciso:</p><p>Fazer com que toda a funcionalidade fique disponível a partir do teclado.</p><p>Proporcionar aos usuários tempo suficiente para eles lerem e utilizarem o conteúdo.</p><p>Não criar um conteúdo de visual vibrante (ele pode causar convulsões em pessoas sensíveis).</p><p>Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão.</p><p>Princípio 3: Compreensível</p><p>“A informação e a operação da interface de usuário devem ser compreensíveis” (WORLD WIDE WEB</p><p>CONSORTIUM, 2012).</p><p>Para contemplar esse princípio, é preciso:</p><p>Tornar o conteúdo textual legível e compreensível.</p><p>Fazer com que as páginas da Web apareçam e funcionem de forma previsível.</p><p>Ajudar os usuários a evitar e corrigir os erros.</p><p>Princípio 4: Robusto</p><p>“O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla</p><p>variedade de agentes de usuário, incluindo tecnologias assistivas” (WORLD WIDE WEB CONSORTIUM, 2012).</p><p>Para contemplar esse princípio, é preciso maximizar a compatibilidade com as tecnologias assistivas.</p><p>Em alguns sistemas, a acessibilidade configura uma característica desejável. No entanto, em outros, ela é</p><p>fundamental, como é o caso dos sistemas do governo que oferecem aos cidadãos serviços on-line.</p><p>Saiba mais</p><p>No Brasil, a Lei nº 10.098, de 19 de dezembro de 2000, estabelece normas gerais e critérios básicos para</p><p>promover a acessibilidade e garantir o acesso a cidadãos com deficiência, colocando a acessibilidade</p><p>como exigência no desenvolvimento de sistemas interativos públicos. No site brasileiro Governo digital,</p><p>procure por “acessibilidade digital” e saiba mais sobre modelos, ferramentas e padrões. Esse conteúdo é</p><p>fundamental em concursos públicos da área.</p><p>Daltonismo: veja como é fácil atender os usuários que não visualizam</p><p>algumas cores</p><p>As cores são importantes para comunicar conceitos e sentimentos.</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>•</p><p>Exemplo</p><p>O uso do vermelho, hoje em dia, constitui um padrão para alertar o usuário sobre perigos e erros.</p><p>No entanto, a interface não deve depender só das cores para comunicar coisas importantes para o usuário;</p><p>afinal, seu usuário pode ser daltônico. Os nossos olhos possuem células de três tipos para “detectar” as cores</p><p>vermelha, verde e azul.</p><p>Os daltônicos são pessoas que nascem sem alguns desses tipos. Observe uma ilustração dos efeitos na visão</p><p>de cada tipo de daltonismo, os quais podem ser chamados mais especificamente de deuteranopia, protanopia</p><p>e tritanopia:</p><p>Simulação da alteração da visão de três tipos de daltonismo</p><p>Isso não quer dizer que você não possa usar cores ao criar uma interface! No exemplo adiante, colocaremos</p><p>lado a lado uma versão colorida e outra em tons de cinza de uma mesma caixa de diálogo.</p><p>Note que as cores ajudam a identificar o erro e encontrar a solução. Contudo, sem elas, também conseguimos</p><p>perceber o destaque pelo sinal de exclamação e podemos ler a mensagem de erro do sistema. Veja:</p><p>Mesmo para quem enxerga todas as cores perfeitamente, cuidar do contraste e da ordem das mensagens e</p><p>usar sinais e símbolos tornam a interface melhor. A verdade é que, quando uma interface atende a quem não</p><p>visualiza as cores, ela também é mais fácil de compreender e de usar para todas as pessoas!</p><p>Usabilidade e acessibilidade</p><p>Veja as diferenças entre funcionalidade, usabilidade e acessibilidade e as principais recomendações para a</p><p>criação de interfaces simples e acessíveis.</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Vem que eu te explico!</p><p>Os vídeos a seguir abordam os assuntos mais relevantes do conteúdo que você acabou de estudar.</p><p>Exemplo de usabilidade</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Exemplo de acessibilidade</p><p>Conteúdo interativo</p><p>Acesse a versão digital para assistir ao vídeo.</p><p>Verificando o aprendizado</p><p>Questão 1</p><p>Escolha a alternativa com a melhor definição sobre a acessibilidade.</p><p>A</p><p>Está relacionada à qualidade de uso de uma interface.</p><p>B</p><p>Diz respeito ao fator utilidade ou aplicabilidade de um sistema.</p><p>C</p><p>Trata-se de recursos adicionais acrescentados ao final de um projeto de interface.</p><p>D</p><p>É sinônimo de funcionalidade e usabilidade.</p><p>E</p><p>É a capacidade da interface de permitir que o número máximo de pessoas e o mais diverso possível consiga</p><p>usá-la com facilidade, mesmo aquelas com alguma alteração física.</p><p>A alternativa C está correta.</p><p>A acessibilidade diz respeito à capacidade de uma interface de ser usada por pessoas diversas, incluindo</p><p>as que possuem alterações físicas.</p><p>Questão 2</p><p>Indique a alternativa com exemplos de heurísticas de usabilidade.</p><p>A</p><p>Perceptível e operável.</p><p>B</p><p>Visibilidade do estado do sistema e correspondência entre o sistema e o mundo real.</p><p>C</p><p>Compreensível e robusto.</p><p>D</p><p>Maximização da compatibilidade com as tecnologias assistivas.</p><p>E</p><p>Fornecimento de alternativas, como legenda escritas ou audiodescrição.</p><p>A alternativa B está correta.</p><p>Sempre informar o usuário sobre o que está acontecendo no sistema o ajuda a aprender com o feedback</p><p>de sua interação e saber o que deve fazer. Seguir as convenções do mundo real faz com que ele adquira</p><p>mais conhecimento e lembre mais facilmente como a interface funciona.</p><p>4. Analogias, abstrações, metáforas, métodos e técnicas</p><p>Ligando os pontos</p><p>Depois de ver tantos conceitos você deve estar se perguntando quando finalmente vai poder “colocar a mão</p><p>na massa” e desenhar a interface!</p><p>Mas, calma! Ainda temos que fazer um levantamento de requisitos antes de começar a desenhar.</p><p>Para entendermos melhor como é essa etapa, vamos retomar o case da empresa fictícia de desenvolvimento</p><p>de aplicativos.</p><p>Todos nós tivemos nossa vida transformada com o surgimento da pandemia de covid-19, o mundo digital</p><p>também sofreu grandes transformações. A principal delas foi relacionada com a necessidade de</p><p>distanciamento social, que criou uma grande reorganização dos espaços físicos e causou uma grande</p><p>expansão do trabalho remoto.</p><p>Nesse sentido, a legislação que rege a relação entre psicólogos e pacientes passou a permitir o</p><p>teleatendimento, gerando uma grande oportunidade de lançamento de novos aplicativos com o objetivo de</p><p>atender novas necessidades dos usuários.</p><p>Nesse contexto, a empresa em que você trabalha foi procurada por um cliente para criar um aplicativo para</p><p>facilitar a realização de sessões de terapia entre pacientes e psicólogos.</p><p>Após a tradicional reunião da equipe com o cliente, a equipe se reuniu para fazer um levantamento de</p><p>requisitos para o novo projeto de interface. Você sabe que existem várias maneiras de se fazer um</p><p>levantamento de requisitos, mas nesse momento a empresa e</p><p>a equipe optam por padrão a fazer uma análise</p><p>PACT (Pessoas, Atividades, Contextos e Tecnologias) de Benyon.</p><p>Baseados no PACT, a equipe se reúne e chega a algumas conclusões, como por exemplo:</p><p>Pessoas – o novo aplicativo deveria atender dois perfis de usuários bem diferentes, que seriam os</p><p>psicólogos e os pacientes. Todos acordam que devem fazer mais pesquisas sobre esses usuários.</p><p>Atividades – foram consideradas as diversas características das atividades. Há questões de legislação</p><p>da saúde envolvidas, como a garantia de sigilo, documentação, procedimentos para o uso de planos de</p><p>saúde.</p><p>Contextos – foi apontado, por exemplo, que consultas remotas realizadas em horários mais flexíveis,</p><p>fisicamente alocadas em ambientes mais íntimos à escolha dos usuários, poderiam até aumentar a</p><p>qualidade das consultas, em relação às tradicionais consultas presenciais.</p><p>Tecnologias – a plataforma principal seriam os dispositivos móveis ligados à wi-fi ou Internet móvel, os</p><p>smartphones, pois a principal atividade nos aplicativos seriam as teleconferências realizadas em um</p><p>clima mais intimista e de maior mobilidade à escolha do usuário, conforme os contextos levantados.</p><p>Entretanto, surgiu também a necessidade de uma opção a ser acessada por navegadores de Internet</p><p>usando um desktop ou notebook.</p><p>Somente depois que todo o levantamento de requisitos estiver pronto é que você poderá finalmente começar</p><p>a desenhar seguindo as etapas de Wireframe, Prototipagem e Teste de Usabilidade!</p><p>Após a leitura do case, é hora de aplicar seus conhecimentos! Vamos ligar esses pontos?</p><p>Questão 1</p><p>Como você viu, no levantamento de requisitos PACT, o primeiro item são as pessoas. Usuários são pessoas e</p><p>envolver o usuário é fundamental, porque ele é a figura central dos objetivos na criação de uma interface.</p><p>Escolha abaixo os procedimentos corretos que poderão ser feitos para continuar complementando o</p><p>levantamento sobre as “pessoas”.</p><p>I. Eleger somente uma pessoa real famosa para representar todos os possíveis usuários.</p><p>II. Criar personas fictícias representando cada perfil de usuário.</p><p>III. Recorrer à pesquisa com possíveis usuários reais do novo aplicativo.</p><p>IV. Usar resultados de pesquisas com usuários para aprimorar as personas.</p><p>Entre os procedimentos listados, você considera como corretos:</p><p>A</p><p>I, II e III.</p><p>B</p><p>II, III e IV.</p><p>C</p><p>•</p><p>•</p><p>•</p><p>•</p><p>I e II.</p><p>D</p><p>III e IV.</p><p>E</p><p>I e IV.</p><p>A alternativa B está correta.</p><p>O PACT é um método importante de levantamento de requisitos que deve ser usado logo no início do</p><p>projeto de interface. A primeira letra corresponde às “pessoas”, que também podemos chamar de usuários.</p><p>A criação de personas é um ótimo procedimento para se levantar perfis de usuários, reunindo várias</p><p>características de usuários. As personas são fictícias, mas mostram as verdadeiras necessidades e</p><p>preocupações dos usuários reais, sendo importante recorrer à pesquisa com possíveis usuários do novo</p><p>aplicativo para obter mais dados e usá-los para aprimorar as personas que você já tinha feito.</p><p>Questão 2</p><p>Cada parte do levantamento de requisitos PACT reserva espaço para etapas complexas do planejamento do</p><p>projeto. No exemplo acima do novo aplicativo, dentro do PACT abordamos outros tópicos referentes a outros</p><p>conhecimentos já trabalhados no nosso conteúdo. Como se o PACT pudesse ser usado para organizar a</p><p>aplicação de todo o conhecimento adquirido. No exemplo do item “tecnologias”, podemos aplicar os tópicos:</p><p>I. dispositivos de interação: dispositivos de entrada e saída.</p><p>II. plataformas.</p><p>III. tipos de interface.</p><p>IV. analogias e metáforas.</p><p>Escolha que tópicos já estudados se adequariam corretamente em “tecnologias”:</p><p>A</p><p>I, II e III</p><p>B</p><p>II, III e IV</p><p>C</p><p>I e II</p><p>D</p><p>III e IV</p><p>E</p><p>I e IV</p><p>A alternativa A está correta.</p><p>O PACT é um método de levantamento de requisitos que pode ser usado logo no início da concepção do</p><p>projeto de interface. No último item “tecnologias” podemos aplicar quase todo o conhecimento que vimos</p><p>ao longo do curso, para ajudar a fazer o levantamento de requisitos de tecnologia.</p><p>Atividade Discursiva</p><p>Com esse exemplo prático, ficou mais claro por que afirmamos que o trabalho de design de interação é muito</p><p>mais que “criar telas bonitas” de uma interface. Escreva um resumo em torno de 10 linhas sobre como é o</p><p>trabalho do designer de interação e suas principais competências ou atribuições no caso da interface do novo</p><p>aplicativo do case.</p><p>Chave de resposta</p><p>O designer de interação deve se concentrar no uso do novo produto e centrar no usuário desde o início do</p><p>projeto. Trata-se de um trabalho de projeto que deve levar em consideração uma série de particularidades</p><p>para a criação de interfaces que sejam fáceis de usar. No exemplo do aplicativo do case, o ponto de</p><p>partida foi uma nova oportunidade de criação de um produto interativo. Logo no início do projeto, a</p><p>centralidade no usuário já foi atendida com o uso do método PACT, que tem as pessoas como primeiro</p><p>item. Em seguida, são levantadas as necessidades dos usuários enquanto executam atividades em um</p><p>processo em que o designer deve entender também os contextos. Depois disso, todas essas informações</p><p>fundamentarão o levantamento das tecnologias requisitadas para o projeto. Somente após todo esse</p><p>trabalho chega o momento de fazer os primeiros desenhos das telas da interface, que devem começar</p><p>como simples wireframes.</p><p>Analogias, metáforas e abstrações</p><p>A princípio, a analogia e a metáfora são figuras de linguagem bem parecidas e muito utilizadas por nós no dia</p><p>a dia.</p><p>Quando usamos uma metáfora, transferimos o nome de uma coisa para outra, fazendo uma comparação. Um</p><p>exemplo simples é dizer que alguém “é uma flor de pessoa”.</p><p>A pessoa, nesse caso, é comparada com algumas características de uma flor, como delicadeza e suavidade.</p><p>Repare que, nessa metáfora, não estamos dizendo que a pessoa é um vegetal ou que possui folhas, e sim que</p><p>há características mais sutis de uma flor nela.</p><p>Na analogia, também comparamos as coisas. Ela, porém, é mais objetiva e menos poética. É</p><p>necessário, portanto, encontrar pontos de semelhança entre as ideias comparadas.</p><p>Um exemplo seria dizer que a pessoa “é forte como um touro”. Note que aqui também há uma figura de</p><p>linguagem, mas a comparação é mais direta que na metáfora.</p><p>A abstração, por sua vez, faz um caminho oposto ao percorrido pela analogia e pela metáfora. Ela é uma</p><p>operação intelectual que isola seu conceito dos demais, o qual, por isso, funciona além dos detalhes do nosso</p><p>mundo físico.</p><p>Interface do Microsoft Paint</p><p>Exemplo</p><p>O conceito abstrato de bola está além das características físicas de uma bola de couro. Também</p><p>conseguiremos reconhecê-la como “bola” se ela for feita de plástico ou até se for um modelo em 3D na</p><p>tela do computador.</p><p>Por outro lado, o conceito abstrato de bola também é útil para a distinguir de outros conceitos, como o de</p><p>“quadrado”.</p><p>Exemplo</p><p>Um triângulo é uma forma abstrata, pois ele não existe no nosso mundo real. Pode até haver coisas com</p><p>o formato parecido com o de um triângulo, mas elas não são triângulos, porque eles são uma abstração</p><p>matemática.</p><p>Mas o que isso tem a ver com o design de interação? Resposta: essas figuras de linguagem da língua</p><p>portuguesa também podem ser usadas de maneira visual – e sempre com o objetivo de ajudar o usuário a</p><p>entender e interagir com a interface.</p><p>Basicamente, os aplicativos operam com uma linguagem que não é a das pessoas. Entretanto, como a</p><p>linguagem dos aplicativos é muito abstrata para os usuários, é preciso lançar mão de metáforas e analogias</p><p>para criar relações com a realidade do usuário e, com isso, interfaces mais intuitivas e fáceis de usar.</p><p>Metáforas de interface</p><p>No design de interface, optamos por falar em metáforas de interface. No entanto, você deve notar que as</p><p>analogias vão aparecer aqui junto com as metáforas. Sendo assim, considere que, quando falamos em</p><p>metáforas de interface, não excluímos as analogias embutidas nelas.</p><p>As metáforas de interface são elementos figurados que</p><p>comparam a interação com</p>