Prévia do material em texto
Cleane Fernandes dos Santos PESQUISA COM O USUÁRIO Sumário INTRODUÇÃO ������������������������������������������������� 3 ARQUITETURA DA INFORMAÇÃO ����������������� 4 COLETA DE REQUISITOS DO USUÁRIO ������� 20 SITEMAP ������������������������������������������������������ 29 FLUXOGRAMA ���������������������������������������������� 34 CARD SORTING �������������������������������������������� 40 Como aplicar o método card sorting? ������������������������������� 41 CONSIDERAÇÕES FINAIS ���������������������������� 47 REFERÊNCIAS BIBLIOGRÁFICAS & CONSULTADAS �������������������������������������������� 48 2 INTRODUÇÃO Neste e-book você conhecerá temas essenciais para atuar como UX/UI designer, aprenderá como desenvolver arquitetura da informação e realizar pesquisas com usuários, entenderá o que é um sitemap e o que é um fluxograma, saberá as carac- terísticas que os distingue, de modo que você será capaz de criar tanto sitemap quanto fluxogramas para seus projetos� O último tema de estudos apresentará o card sorting, que é um método utilizado para fazer testes com usuários e é também uma técnica de pesquisa, que permite descobrirmos tendências, necessidades e insights para aprimoramento de produtos e/ou serviços e para o desenvolvimento de novos produtos baseados nas necessidades dos usuários� Estude atentamente os temas deste e-book, todos eles são fundamentais para quem deseja trabalhar com equipes, ou como empreendedor, de desenvol- vimento de produtos e serviços que prezam pela experiência do usuário e pela qualidade. 3 ARQUITETURA DA INFORMAÇÃO Você sabia que arquitetura da informação, como metodologia para o desenvolvimento de sites, surgiu nos anos 1990? É isso mesmo, com o cres- cimento de websites, impulsionado pela expansão e evolução da internet, a necessidade de organizar as informações na web, de maneira estruturada, deu espaço para que os conceitos da arquitetura da informação fossem aplicados no processo� O termo foi popularizado nos anos 1960, segundo pesquisadores, por Richard Saul Wurman, que já utilizava e defendia a arquitetura da informação como processo de organizar as informações para facilitar o acesso aos usuários� Figura 1: Desenho de um fluxo. Fonte: Imagem de geralt por Pixabay. 4 Considerando-se o cenário contemporâneo de tecnologias e informações digitais, você concorda que os usuários estão cada vez mais conectados com conteúdos on-line e/ou virtuais e que todos interagem cada vez mais com diversas informa- ções? Isso não tem como negarmos, certo? Partindo desse princípio, ao pensarmos em ar- quitetura da informação, devemos ter em mente duas palavras-chave: estrutura e navegação� Esses termos explicam dois pontos importantes na AI: y O que fica oculto para o usuário – a estrutura: como o ambiente, seja um site, um blog ou um aplicativo, está estruturado, como esse ambiente funciona, como foi pensado em suas categorias e como essas categorias foram organizadas; y O que está visível para o usuário – a navegação: os caminhos disponíveis para os usuários, acessa- dos por meio do design, do fluxo de navegação e das funcionalidades� Resumidamente: os botões, as subpáginas e todas as informações buscadas e encontradas pelos usuários� As páginas web – sites, aplicativos e blogs, por exemplo – precisam ter uma boa organização de categorias, por tipos de produtos e/ou serviços, por isso, hierarquizar as informações é uma for- ma de definir o que é mais importante e o que é secundário dentro de um ambiente digital/on-line� 5 Isso também se aplica a cenários do mundo físico� Neste e-book focaremos no ambiente digital e/ou on-line� Se observarmos alguns sites na internet, ou apli- cativos, podemos reconhecer à primeira vista uma boa arquitetura da informação� Também podemos confirmar se ela de fato é excelente ao navegarmos pelo ambiente, entrando nas subpáginas das cate- gorias dos produtos e/ou serviços e informações disponibilizadas para o usuário� Muitos sites trabalham com links que levam o usuário a uma subpágina que dificulta o retorno do usuário à página principal� Esse é um erro gravíssimo, pois para oferecer uma boa experiência ao invés de complicar a vida das pessoas com uma navegação difícil, as subpáginas necessitam de identificação para que o usuário não se perca enquanto navega e para que possa facilmente identificar um retorno à página principal, como a disponibilização de um botão “Home” ou “Principal”� A hierarquia da informação necessita ser bem trabalhada para que o usuário possa aproveitar bem o ambiente on-line e não perder informações importantes como promoções, lançamentos de novos produtos e, mais importante ainda, resolver o problema que o levou à página na web ou apli- cativo, por exemplo. 6 Vamos estudar um exemplo prático. Imagine que você recebeu uma demanda de arquitetura da informação (AI) para um site que irá vender produtos para cama, mesa e banho. A informação que você recebeu da empresa que o contratou foi exatamente a seguinte: “criaremos um site para vendas de produtos para cama, mesa e banho, todos os produtos básicos e possíveis para as pessoas desse mercado� Precisamos que você entregue uma arquitetura que apresente os de itens de maneira organizada”. A primeira lista de itens para a loja online que você recebeu foi a seguinte: y Capa de sofá com quatro lugares (210 x 250cm); y Capa de poltrona (38 a 42cm); y Fronha queen (53 x 90cm); y Fronha king (53 x 105cm); y Lençol para solteiro (105 x 200cm); y Lençol para solteiro (90 x 200cm); y Lençol para casal (140 x 200cm); y Lençol para casal (150 x 200cm); y Toalha de banho adulto (70 x 140cm); y Toalha de banho adulto (90 x 150cm); y Toalha de banho infantil (70 x 140cm); y Toalha de banho bebê (60 x 100cm); y Tapete para banheiro (0,40 x 0,60cm); y Tapete médio quadrado (100cm x 100cm); y Pano de prato (40 x 64cm); y Toalha mesa de centro (0,78 x 0,78cm); y Lençol para casal (160 x 200cm); y Toalha de mesa 4 lugares (150 x 150cm); 7 y Toalha de mesa 6 lugares (150 x 200cm); y Toalha de mesa 8 lugares (170 x 250cm); y Fronha solta padrão (53 x 85cm); y Toalha mesa de centro (0,30 x 0,50cm); y Pano de prato (50 x 74cm). Minha pergunta para você, antes de prosseguir- mos é: como você iniciaria seu trabalho de AI com essas informações recebidas? Pense um pouco, sugiro que faça um esboço inicial em papel e, na sequência, aprimore com ferramentas digitais� O que devemos ter em mente é que a AI facilita a vida das pessoas, ajudando-as a encontrar o que precisam em um espaço físico e/ou virtual� Estude o exemplo na figura a seguir, que foi elaborada com base nas informações da lista� Figura 2: Exemplo de AI – estrutura básica para um site ou aplicativo� Fonte: Elaboração própria� 8 Ao analisarmos a estrutura da figura a seguir, o que você faria diferente? Como organizaria as categorias e o que deixaria da maneira apresen- tada? Pense sobre e comece a definir estratégias em seu projeto de AI, comece fazendo esboço em folhas de papel� A AI é o processo de organização de itens em ca- tegorias que façam sentido, o agrupamento das informações deve ter correlações de semântica e coerência e precisa estar conectado a um fluxo de navegação fluido. O trabalho de AI beneficia o ambiente e/ou produto e o usuário em relação às informações e a usabilidade� É preciso hierarquizar as informações, ou seja, criar grupos de informações baseados nos dados disponíveis, como os dados do exemplo da lista anterior. Nesse processo de construção da AI, você precisará considerar questões como a “ecologia da informação”� Você já ouviu falar em ecologia da informação? Bem, trata-se de uma intersecção entre contexto, usuários e conteúdo. O contexto é o de desenvol- vimento da AI, considerando todas as informações levantadas como os objetivos, o investimento, a missão etc� 9 Os usuários são as pessoas que receberão o produto e/ou serviço,deve ser feito um levanta- mento de todas as informações necessárias para compreender quem são esses usuários, onde eles estão, quais são as suas necessidades, o que eles desejam e o eles já sabem sobre o produto e/ou serviço que desejam, por exemplo. O conteúdo é o produto e/ou serviço entregue ao cliente, ou disponibilizado aos usuários� São todos os elementos que fizeram parte do processo de desenvolvimento até a entrega para o usuário final. Em uma página web, por exemplo, tudo que faz parte da página é o conteúdo, vídeo, artigos, ima- gens, as informações da ferramenta de busca etc� Explore o livro sobre ecologia da informação disponí- vel a seguir� Faça download e salve em sua biblioteca de pesquisa� Ecologia da Informação – Por que só a tecnologia não basta para o sucesso na era da informa- ção. (Thomas H. Davenport). Disponível em: https:// pt�slideshare�net/KleberLima6/ecologia-da-informao� Acesso em: 19 set. 2022. O ser humano é diverso e possui características distintas, embora existam elementos que são considerados universais� É essencial que você SAIBA MAIS 10 https://pt.slideshare.net/KleberLima6/ecologia-da-informao https://pt.slideshare.net/KleberLima6/ecologia-da-informao analise bem cada projeto de AI e entenda o usu- ário, seu universo, cultura e linguagem para que seu trabalho esteja contextualizado. Algumas metodologias como design thinking, Google Sprint e double diamond sempre são úteis e necessárias nesse processo de descobertas, de pesquisa e de levantamento de informações, assim como para o desenvolvimento da solução que é o produto a ser entregue ao usuário final. Imagine-se recebendo um projeto grande de AI para desenvolver, que demandaria muito tempo para ser construído, principalmente se você o fizesse sozinho. A empresa para a qual você trabalha pede a entrega desse projeto em um tempo impossível, o que você faria? Você diria que daria conta e desenvolveria tudo sozinho, entregando o mais simples e só o que conse- guisse fazer? Negociaria com quem solicitou o projeto a contratação de mais uma pessoa? Renegociaria os prazos para que você pudesse garantir a melhor AI para a empresa e para os usuários? Dependendo do projeto, pode ser necessário diver- sas cabeças trabalhando em conjunto� Lembre-se sempre: tudo o que você fizer, enquanto pessoa, atingirá outra pessoa, ou seja, um produto que será utilizado por outras pessoas merece o seu melhor, pois elas investem dinheiro, assim como REFLITA 11 a empresa, e, além disso, o resultado do projeto carrega em seu conjunto a sua assinatura� Tudo que é bem-feito segue algumas regras, você concorda? Falando de AI, existem algumas etapas as quais, podemos dizer, são necessárias para desenvolvermos um projeto de AI. São elas: y Etapa 1: a ontologia, que tem relação com o significado das coisas. Como assim? Em um projeto, haverá um momento em que utilizaremos termos para as categorias e/ou botões, por exemplo, em uma loja virtual de roupas existe a categoria “calças femininas”, dentro dessa categoria será preciso estabelecer algumas relações de significado com a categoria “calças” como “calças jeans”, “calças sociais”, “calças moletom”, “calças legging”, ou seja, dentro do grupo de calças há vários tipos e/ou subcategorias de calças que precisam estar bem definidas e correlacionadas no sistema do site, ou aplicativo, para que o usuário possa ter acesso facilmente ao que procura. O usuário poderá filtrar o tipo de produto de maneira mais específica, e na AI entra esse trabalho de elaborar o glossário de palavras que deverá ser implementado. Assim, o usuário navegará pelas categorias previstas na AI e isso tornará sua experiência de compra mais agradável, de modo que ele não precise navegar por uma longa página, com todos os tipos de “calças” misturados, até encontrar o que deseja; 12 y Etapa 2: a taxonomia, que é a etapa que trata dos agrupamentos� Uma boa estratégia é utilizar um organograma para organizar todas as informa- ções de maneira individual e em grupos� Podemos observar um bom exemplo de taxonomia nas ciências biológicas que agrupam os organismos em grupos e individualmente, descrevendo-os e alocando-os nas respectivas classificações. Em UX/UI design, a taxonomia é utilizada para definir as palavras, os termos que serão reconhecidos pelos usuários, por exemplo, criando um grupo de palavras adequado à cultura da empresa e dos usuários� É importante realizar testes com usuá- rios para reafirmar os termos e/ou definições de agrupamento de itens para garantir a coerência do glossário de palavras e o reconhecimento da estruturação pelos usuários� y Etapa 3: a coreografia, que é a etapa final. De- pois que você conseguir organizar as informações, agrupando e/ou dando significado às palavras, você irá criar as correlações entre os grupos e/ ou categorias para que seja possível construir a navegação, ou seja, para criar o fluxo que usuá- rios irão percorrer ao navegarem pelo sistema� Devemos entender que cada item está dentro de uma categoria, essa categoria nasceu de uma informação que a antecede� Portanto, essa rede de informações, de elementos que se conectam, precisa percorrer um fluxo bem desenhado, de modo 13 que seja possível enxergar toda a AI do ambiente antes de desenvolvê-lo. O termo coreografia deixa uma dica sobre essa etapa final, pois é exatamente a dança dos elementos que deverá ser trabalhada nessa etapa, em uma coreografia, cada dançarino entra em um momento do espetáculo, seguindo uma hierarquia� Entre os momentos distintos em um espetáculo de dança, a parte principal é a sin- cronia de todos os dançarinos� A boa AI é uma das fases de desenvolvimento que contribuirá com o trabalho de UX/UI design, já que a AI é a base que vai pensar no usuário como centro do processo, o qual deverá ter o mínimo de esforço cognitivo ao navegar em um site, aplicativo, blog etc� Os problemas de usabilidade e de navegação devem ser tratados antes da entrega final de um produto e/ou serviço, para que seja oferecida uma experiência realmente agradável, e as necessida- des de ajustes podem ser antecipados nas fases de testes com usuários, por meio de protótipos� É importante você saber que, antes de iniciar esse processo mais visual, o ideal é que você tenha to- das as informações documentadas, estruturadas em uma lista mais simples, com os itens em seus respectivos grupos� 14 Ao iniciar um trabalho de AI, todos os dados e informações sobre a empresa, os produtos e/ou serviços, e sobre os usuários, devem estar escla- recidos para você, seja para a estruturação para espaços on-line, seja para espaços físicos� Observe um exemplo de documentação de infor- mações na figura a seguir: Figura 3: Planilha com a lista de itens da arquitetura de um site ou aplicativo� Fonte: Elaboração própria� 15 Uma ferramenta a ser utilizada nesse trabalho é o que chamamos de mapeamento de processos, o qual permite obter todas as informações necessá- rias para o conhecimento abrangente e específico sobre a empresa, os produtos e/ou serviços que passarão pelo trabalho de AI. Imagine o seguinte: você foi contratado para organizar uma loja de produtos eletrodomésticos� Nessa loja, você encontrou vários produtos misturados, ou seja, toalhas de banho, mesa de centro, fogão, panela, copos, talheres, sofás, cadeiras, travesseiros e tapetes, por exemplo. To- dos esses itens estão no mesmo espaço e misturados� Agora, pense em como você se sentiria ao entrar em uma loja com esse cenário, ou ao acessar um aplicativo que apresentasse todos os produtos misturados� Você permaneceria nessa loja ou você desistiria e pro- curaria outra loja que disponibilizasse seus produtos de forma organizada? O que faltou nesse exemplo de loja foi um trabalho de arquitetura da informação, a organi- zação dos itens em sessões adequadas no espaço de vendas para o usuário� Claramente, esse modelo de loja não considerou a UXno processo, não considerou o usuário como centro do desenvolvimento de sua estrutura de loja e isso gera ao usuário desconforto, frustração� Pense sobre isso e observe outras estruturas, tanto em ambientes físicos, quanto em ambientes digitais� REFLITA 16 Para Ferreira (2020, p. 30) “[...] pode-se perceber que uma boa arquitetura da informação está ba- seada em dar conhecimento à estrutura de dados que é necessária para se desenvolver o produto”� A arquitetura da informação é, portanto, uma ci- ência prática de construção� Ela é útil e aplicável na resolução de problemas porque funciona como uma metodologia de organização de estruturas de informações, sistemas, softwares, lojas físicas como supermercados (este é um exemplo que podemos observar bem a AI aplicada nas prate- leiras de produtos, que são pensados por tipos/ categorias como higiene pessoal, enlatados, frios, frutas e verduras, laticínios etc.) e aplicativos e/ou sites (os quais estão em crescimento constante de oferta e demanda de criação e experiências de compras). Você já conseguiu perceber a importância da ar- quitetura da informação? É um trabalho complexo porque exigirá bastante empenho de quem deseja entregar uma ótima AI, porque é preciso realizar análises, pesquisas com usuários, levantamento de dados e informações, ter conhecimentos sobre o cenário geral e específico de um ecossistema de uma empresa e/ou serviço, saber sobre as neces- sidades dos usuários e do cliente e conhecer bem as metodologias da AI. Sobre metodologias, vale destacar que as mais utilizadas são a estrutura 17 hierárquica, wireframes, taxonomia e inventários de conteúdo� Você deve considerar importante no trabalho final da AI a garantia de que tudo esteja onde precisa estar. Além disso, é preciso saber definir as categorias com critério e organizar os elementos pertencen- tes a cada uma delas, além de tomar as decisões certas de estrutura para um sistema, deixando-o adequado para os usuários, e isso exigirá que você conheça os componentes da AI. Vamos retomá-los de maneira mais detalhada a seguir: y Classificar e estruturar informações, definir e organizar as categorias; y Representar as informações em um sistema de rotulagem, escolhas de terminologias, por exemplo: “dieta” ou “regime”; y Saber como os usuários navegam no ambiente, seja um site, um aplicativo, um blog ou até um am- biente físico, para definir o sistema de navegação, os caminhos do usuário no ambiente; y Identificar como os usuários buscam informa- ções, como eles pesquisam, ou seja, quais são as palavras, termos mais utilizados por eles� Um livro bastante utilizado e indicado por profissionais da AI é o Information architecture for the world wide web: SAIBA MAIS 18 designing large-scale web sites, 3rd edition� Observe mais detalhe sobre o livro pelo link sugerido� Se tiver interesse, pesquise em outros meios mais informações sobre� Disponível em: https://www�amazon�com/Information- -Architecture-World-Wide Web/dp/0596527349. Acesso em: 20 ago� 2022� 19 https://www.amazon.com/Information-Architecture-World-Wide Web/dp/0596527349 https://www.amazon.com/Information-Architecture-World-Wide Web/dp/0596527349 COLETA DE REQUISITOS DO USUÁRIO Falaremos agora sobre a coleta de requisitos do usuário, processo que é fundamental para que você compreenda os serviços e/ou produtos a serem desenvolvidos e oferecidos aos clientes e/ou usu- ários. Antes de prosseguirmos, você precisa saber o que são os requisitos, então, vamos entender melhor o que significa requisitos? Os requisitos podem ser compreendidos como as necessidades que são quantificadas por meio de uma coleta de dados e análise de informações que são documentadas, sempre fundamentadas no que é prioridade para os stakeholders e/ou usuários de um produto e/ou serviço� A coleta de requisitos do usuário é uma das prio- ridades no processo de gerenciamento e desen- volvimento de produtos e serviços porque é por meio dessas informações que as necessidades dos usuários poderão ser estudadas, permitindo um entendimento mais realista sobre os requisitos de um produto e/ou serviço que será entregue, de modo que os usuários aceitem e vejam um produto como útil para resolver seus problemas no dia a dia� 20 Vamos analisar a definição de Stati e Sarmento (2021, p.72) sobre a coleta de requisitos: É uma lista com todas as funcionalidades exigi- das para o aplicativo, que vão desde um simples cadastro até temas sobre a segurança de dados, com validações de campos e detalhamento de outras ações técnicas, que gerarão a modelagem, por exemplo, o diagrama de caso de uso, dentro da Unified Modeling Language (UML). Vamos pensar na coleta de requisitos do usuário com base na definição anterior. Podemos perceber que a coleta de requisitos do usuário é a realiza- ção de uma lista dos requisitos (identificação das necessidades) do usuário e o que ele deverá ser capaz de fazer, por exemplo, navegar por uma página web, usar um aplicativo e/ou um streaming de música e vídeos, dentre outros� Os requisitos do usuário fazem parte da UX e são bastante discutidos nos projetos de design centrados no usuário, pois os requisitos do usuário deverão constar no design criado para uma interface pela qual o usuário irá interagir com um sistema desen- volvido para resolver um problema e/ou atender a um desejo e/ou necessidade existente. A coleta de requisitos do usuário é organizada em um modelo estruturado, de simples compre- 21 ensão e com as informações claras para todos os envolvidos no projeto de desenvolvimento de produtos e/ou serviços� Para se realizar a coleta e/ou testes como usuários, os modelos também precisam ser estruturados de modo simples e que possa ser compreendido para que o usuário contri- bua significativamente com as soluções. A coleta pode ser realizada por um analista de negócios, no entanto, é comum a ausência de um profissio- nal específico e essa tarefa acaba somando-se às responsabilidades do(a) desenvolvedor(a) ou do(a) UX/UI designer. Coloque-se no lugar de um empresário� Pense no seguinte: sua empresa irá desenvolver um produto a ser lançado no mercado, mas ainda não está definido qual produto será. Um dos primeiros passos é definir esse produto, identificar a real necessidade dele para os usuários, certo? Assim que essa primeira etapa estiver ajustada, será preciso coletar os requisitos do usuário, somente assim os insights e as hipóteses, mesmo baseadas em pesquisas secundárias, serão confirmadas, afinal, um produto e/ou serviço recebe grandes investimentos e é exatamente por isso que essa coleta de requisitos do usuário precisa ser bem analisada, todo investimento visa a um retorno� Observe a figura a seguir, alguns exemplos que 22 são bem difundidos no processo de coleta de requisitos do usuário� Figura 4: Coletando requisitos do usuário� A forma mais eficaz de coletar os requisitos do usuário é ouvir diretamente deles e testar diretamente com eles. Você pode fazer entrevistas para entender as opiniões, direcionar perguntas sobre produtos similares, solicitar gravações de áudio e/ou preparar um roteiro. O teste de usabilidade é importante na coleta de requisitos porque o usuário poderá dar informações reais sobre as funcionalidades. Fonte: Elaboração própria� As práticas de coleta de requisitos mais utilizadas são as demonstradas na figura anterior como en- trevistas on-line (ou em espaços físicos), criação de um roteiro que possa guiar o usuário a dar as informações que você deseja obter (o roteiro é bastante eficiente, funciona como um mapa para testes com usuários quando se tem um protótipo estruturado), perguntas direcionadas e estruturadas via formulários como o do Google Forms, com o envio das impressões de um teste feito on-line, e, além disso, você pode fazer uma entrevista e gravá-la, com a permissão do usuário, para verificar pontos de usabilidadee detalhes de produtos e/ ou serviços concorrentes� 23 Há uma série de métodos, como você pôde per- ceber, para coletar os requisitos do usuário� De modo geral, a coleta de requisitos tem a ver com conversar com os usuários, entender as perspectivas em relação a um produto e/ou serviço existente e com a identificação do que é necessário em um produto e/ou serviço que será desenvolvido, ou melhorado. A coleta de requisitos serve para implementar melhorias em produtos que já são utilizados� Portanto, a coleta de requisitos tem como finali- dade alcançar objetivos e atingir metas, por isso, podemos dizer que esse processo se inicia com o entendimento sobre qual é a meta do projeto a ser desenvolvido e quais são os objetivos gerais e específicos. Somado a isso, devemos entender quais são as necessidades dos usuários� O profissional de UX/UI design deverá se atentar à parte técnica de coleta de requisitos do usuário, a qual é dividida em requisitos funcionais e requi- sitos não funcionais, assim como na coleta de requisitos de software, a diferença está no tipo de coleta� Neste e-book, estamos tratando da coleta de requisitos do usuário� Vamos entender melhor os dois tipos de requisitos do usuário� 24 Os requisitos funcionais do usuário, basicamente, são as descrições do comportamento das fun- cionalidades de um sistema, ou seja, por meio da ação do usuário, o sistema precisa apresentar determinado comportamento. São as definições do que um sistema deve fazer. Por exemplo, ao nos cadastrarmos em um site, as informações inseridas precisarão ser processadas e nós, en- quanto usuários, deveremos obter um feedback do ambiente para saber se conseguimos finalizar o cadastro� Por meio dessa tarefa, inserir os da- dos, alcançamos nosso objetivo que é realizar o cadastro no site� Os requisitos não funcionais são os que estão inter- ligados ao sistema, são as definições de como um sistema deve ser, por exemplo, quando o usuário faz seu cadastro em um site e clica em “enviar” seus dados para validação e/ou autenticação� O tempo que o sistema leva para executar essa função e dar um feedback ao usuário, sobre a tarefa realizada, é um dos requisitos não funcionais� Além disso, podemos considerar um requisito não funcional a falha na página do site enquanto ocorre o processamento, que pode ser uma falha do siste- ma e/ou da conexão do usuário, por exemplo. Para essas situações, cabe o requisito de sistema de orientações de uso, ou seja, é importante informar ao usuário que, se for o caso, para navegar sem 25 interrupções, sua conexão deverá ser de determi- nado tipo, como banda larga digital subscriber line (DSL) e/ou fibra óptica. Bem, falamos anteriormente sobre requisitos funcionais e requisitos não funcionais, certo? Vamos explorar mais um pouco esse tema para não restar dúvidas? Tomaremos como exemplo uma plataforma bastante conhecida, o YouTube� Analise na tabela a seguir alguns exemplos de funcionalidades de usuários do YouTube� Tabela 1: Exemplos de requisitos do usuário para uso do YouTube� Exemplos de requisitos de usuários do YouTube Requisitos funcionais Requisitos não funcionais Criar uma conta no YouTube Segurança de dados do usuário Na página de login: inserir e-mail e senha Transferência da senha do YouTube para o servidor Criar canal: inserir nome, logo/imagem A senha enviada para o servidor deverá retornar criptografada Validação: e-mail precisa estar no formato correto “A senha está incorreta” Deve haver um certificado de segurança digital Fonte: Elaboração própria� Leia mais uma contribuição que reforça a com- preensão sobre a coleta de requisitos do usuário: 26 Coletar requisitos de usuários é tão vital para um projeto bem-sucedido que, com frequência, eu me recuso a escrever uma linha de código sequer antes de ter várias reuniões com usuários para extrair deles os requisitos� Sem uma comunicação ade- quada e um entendimento entre o desenvolvedor e o usuário, é impossível criar um aplicativo eficien- te� Documentar requisitos de usuário é a melhor maneira para incentivar esse tipo de comunicação (LOWDERMILK, 2019, p. 52). Agora, que tal você analisar um caso? Vamos lá! O usuário de um aplicativo de fast-food passa por problemas constantes ao receber os produtos que comprou, isso porque os produtos chegam com pouca qualidade. Ao tentar entrar em contato com os administradores do aplicativo, o usuário não encontra um meio de contato ativo, um meio de registrar sua insatisfação de maneira que ela seja compreendida e resolvida para que não ocorra o mesmo em futuras compras� Considerando-se isso, um requisito do usuário seria o aplicativo disponibilizar a funcionalidade de comunicação entre o usuário e o aplicativo, com ferramentas que permitam o usuário a registrar suas necessidades, como escrever texto, gravar um áudio e/ou tirar fotos do produto recebido com defeitos ou qualidade ruim. Alguns aplicativos co- 27 meçaram com essas funcionalidades, no entanto, se pesquisarmos atualmente, há bastante casos de insatisfação em relação à funcionalidade e comunicação entre usuário e empresa digital� Espero que você tenha compreendido que os requisitos do usuário estão diretamente relacio- nados aos serviços que são, ou serão, fornecidos e às restrições interligadas a eles� Os produtos são construídos em conjunto com o time de UX/ UI design e gerentes de produtos, considerando sempre a visão e as necessidades dos usuários – e/ou do cliente que solicita o desenvolvimento de um produto� Todas as informações coletadas, e estruturadas, são documentadas em linguagem simples, natural, com apoio de recursos visuais como formulários, diagramas e tabelas para que todos os envolvidos no projeto possam ler, compreender e utilizar essa documentação� 28 SITEMAP Chegamos ao tema sitemap� Você já ouviu esse termo antes? já viu e/ou trabalhou com a criação de um sitemap? Se você desconhece o que é, não se preocupe, iremos aprender neste e-book� Se você já conhece, então será uma oportunidade para reforçar seus conhecimentos, certo? Um sitemap, em português, é o mesmo que “mapa do site”� Trata-se de uma estrutura bastante similar à da arquitetura da informação� Um mapa, como sabemos, serve para guiar as pessoas até um destino� Eles são construídos por pessoas que estudam todo o caminho que deve ser percorrido de um ponto X até um ponto Y. Após esse estudo, a rota é desenhada e convertida em um mapa, que é mais visual para os usuários, de modo que facilite sua jornada em uma situação real� O mapa do site e/ou de um aplicativo tem o mes- mo objetivo que um mapa comum: compreender uma rota e/ou navegação e guiar o usuário em seu percurso em um ambiente on-line como um site, um aplicativo, um blog etc� O sitemap (ou mapa do site) deve apresentar os nomes de cada seção, a hierarquia dos nomes dessas seções e o relacionamento entre elas, com a definição do nível hierárquico, mostrando 29 o caminho que será seguido pelo usuário, ou seja, como o usuário irá se movimentar pelo ambiente� Um sitemap, muitas vezes, é chamado de arqui- tetura da informação porque é uma estrutura de conteúdo e/ou de informação que mostra as co- nexões entre os itens e as categorias, projetando as partes e as funcionalidades para um sistema antes de seu desenvolvimento� Você deve estar se perguntando: como diferenciar arquitetura da informação de sitemap? Basta você retomar que a AI é a estrutura base, é o processo de criar uma estrutura de site e/ou de aplicativo, por exemplo. Na AI o foco está em organizar as informações, criando relações hierárquicas para que elas fiquem visíveis, localizáveis para os usuários, seguindo as necessidades previamente identificadas. É, portanto, a primeira fase de de- senvolvimento, vem antes do sitemap� O sitemap, por sua vez, é o conjunto de páginas de um site e/ou aplicativo, corresponde a toda estrutura que é feita em AI e exibida demodo mais visual, abrangendo toda a estrutura e dando transparência aos diferentes níveis de navegação para as páginas, apresentando todos os grupos e subgrupos� 30 A função dele não é mostrar as tarefas que os usuários deverão realizar, nem as interações entre as páginas, mas sim mostrar a estrutura completa e a arquitetura da informação de uma página web com visibilidade para os níveis de navegação das páginas do projeto, permitindo a visão do todo e a profundidade das relações entre cada página� Assim como na AI, você pode desenvolver seu esboço de sitemap em uma folha de papel, para começar a entender e/ou criar as relações entre os elementos� Em seguida, você poderá utilizar uma ferramenta digital para criar uma versão final. O ideal é que você sempre comece com esboços antes de fazer uma versão digital para apresenta- ção, tenha sempre em mente que o sitemap é a lista de páginas de seu site e/ou aplicativo, é uma representação visual que ajuda a compreender e a enxergar todas as sessões e as relações entre elas, antes de partir para o desenvolvimento real� Ele auxilia toda a equipe que irá desenvolver o projeto e todos os que estão envolvidos nas tomadas de decisões. Observe na figura a seguir um exemplo de criação de um sitemap� 31 Figura 5: Construindo um sitemap� Fonte: Elaboração própria� Conheça um modelo de sitemap para reutilização oferecido pela Venngage. Há uma série de layouts de sitemaps. Experimente e explore alguns templates para criar o seu mapa de site� Disponível em: https://venngage� com/templates/diagrams/light-colorful-saas-site-map- -5ed98830-1b91-4590-99c9-42fdbdebc5bd. Acesso em: 23 ago� 2022� SAIBA MAIS 32 https://venngage.com/templates/diagrams/light-colorful-saas-site-map-5ed98830-1b91-4590-99c9-42fdbdebc5bd https://venngage.com/templates/diagrams/light-colorful-saas-site-map-5ed98830-1b91-4590-99c9-42fdbdebc5bd https://venngage.com/templates/diagrams/light-colorful-saas-site-map-5ed98830-1b91-4590-99c9-42fdbdebc5bd Para encerrarmos esse tema, destacamos que o objetivo final do sitemap é tornar visível, antes do desenvolvimento, as relações entre as telas e/ou páginas de um site, aplicativo, blog etc� Ele não é considerado um fluxograma porque sua ênfase não está em demonstrar o fluxo de informações, ou das tarefas de um sistema, e sim apresentar os pontos de contato do usuário com o site e/ou aplicativo dentre outros contextos. 33 FLUXOGRAMA Agora falaremos sobre fluxograma. Você irá com- preender a função de um fluxograma, os benefícios de sua utilização e os principais modelos utilizados em UX� Você já deve ter entendido a importância da pesquisa com usuários e que ela é uma etapa que faz parte do processo de desenvolvimento de produtos e/ ou softwares, certo? Além disso, a pesquisa com o usuário tem o propósito de avaliar um produto e/ou serviço que já existe, para que possíveis pro- blemas de usabilidade possam ser identificados, ou para o levantamento de novas necessidades que possam ser implementadas� Realizar a pesquisa com o usuário é uma tarefa indispensável, já que precisamos ter uma por- centagem considerável de certeza em relação ao desenvolvimento de um projeto, precisamos saber se ele será útil e necessário para os usuários� De- senvolver um produto requer bastante investimento e, por isso, é preciso eliminar o máximo possível de riscos. Algumas pesquisas podem requerer um investimento, seja para pagar profissionais, para construir um protótipo para um teste prático com uma pesquisa envolvida, para comprar ferramentas e/ou para deslocamento de profissionais. As pos- 34 sibilidades são diversas e dependerão do tipo de projeto e dos objetivos e metas a serem atingidas� Tempo e dinheiro sempre serão condutores iniciais para a realização de uma pesquisa e desenvolvimento de um produto e/ou serviço� Com esses condutores bem alinhados, há diversas possibilidades para o método de pesquisa, como pesquisas por formu- lários online, que são métodos ágeis e possíveis de se realizar sem investimento financeiro, ou pesquisas de campo, que exigirão um investimento maior tanto de tempo quanto de dinheiro� Você já deve ter utilizado, ao longo de sua vida de estudante e/ou profissional, algum esquema visual para apresentar a sequência, ou fluxo, de informa- ções� Às vezes nos pegamos criando esquemas visuais e nem dos damos conta da natureza desse processo� Mas também os utilizamos com objeti- vos bem estabelecidos, principalmente em nosso meio profissional e/ou acadêmico. Os fluxogramas são definidos como esquemas visuais e servem de apoio para os profissionais de diversas áreas. Em UX, os fluxogramas são excelentes para compor a documentação de um projeto de design e desenvolvimento de sistema� Por meio de um fluxograma podemos apresentar as funcionalidades de um sistema e compreender o esquema completo de um projeto, isso facilita a 35 vida dos desenvolvedores e é um excelente recurso para apresentar o fluxo de um projeto como um aplicativo e para testá-lo com usuários� O uso de fluxogramas se mostra necessário após a realização da pesquisa com usuários, pois é por meio da pesquisa que ocorrem as descobertas das necessidades e das impressões em relação a um produto a ser desenvolvido e/ou a um produto que já existe no mercado, que serve como feedback inicial. O usuário será sempre inserido no centro do que for desenvolvido com estratégias e métodos da UX, e é por isso que a pesquisa é uma fase essencial� Os principais modelos de fluxograma ajudam a responder algumas questões em relação às tare- fas que os usuários deverão realizar, por exemplo: como o produto e/ou serviço se adequa na rotina do usuário? Em quais contextos haverá uma interação do usuário com o sistema/produto? Quais são os níveis de complexidade para a aprendizagem e o uso do produto e/ou serviço? Como o usuário terá sucesso ao interagir com a solução? Essas são algumas questões que devemos considerar, mas sempre surgirão outras conforme o contexto. Que tal conhecer os principais fluxogramas utilizados na UX? Vamos lá! y Mapa de Jornada (user journey map): tem como foco os pontos de interação do usuário com 36 o produto e/ou serviço� Dentre os indicadores estão as dores, as motivações, as satisfações e os obstáculos que aparecem durante a jornada de experiência com os pontos de interação da empresa e/ou marca� Você pode entender o mapa da jornada com o seguinte exemplo: imagine-se em uma loja on-line de celulares que você acessou porque o celular que deseja está com uma boa promoção. Antes de localizar o celular no site e decidir comprar, você precisa realizar algumas ações, certo? Após realizar as ações no site, você finalizará sua compra e obterá seu produto. Cada uma das ações que você realizou no site são ma- peadas, portanto, o mapa de jornada do usuário dependerá bastante do objetivo� y Fluxograma do usuário (user flow): demonstra cada etapa das tarefas a serem feitas pelo usuário em um sistema� Por isso, o user flow apresenta o modelo de navegação criado com base nas necessidades, explicando as relações entre cada tela, as diretrizes e condições para navegar pelo sistema e os resultados alcançados, de maneira detalhada� O user flow é bastante utilizado no processo de criação de design de interação e no desenvolvimento da AI. y Fluxo de arame (wireflow): é um desenho es- quemático que favorece a compreensão de cada passo da jornada do usuário de maneira mais visual� Podemos dizer que o wireflow é composto por user 37 flows e wireframes, o resultado é a combinação desses dois modelos� y Fluxo de interação (interaction flows): é um esquema que apresenta mais camadas de infor- mações de um projeto� Por meio do design é que a interação ocorre, por isso a interface precisa estar alinhada ao fluxo de interação, que são os fluxos dos usuários, desenhados para eles, com base em suas necessidades� Os detalhes e a profundidadesão importantes, pois esse fluxo está em um nível mais avançado do que wireflows e user flows� Você conheceu os principais fluxogramas utilizados na user experience, esses fluxos são construídos após a pesquisa do usuário, na etapa de planeja- mento de um projeto de design� Eles determinarão quantas telas um site ou um aplicativo deverá ter, por exemplo, com a simulação da jornada dos usuários ao resolver os problemas por meio das tarefas para a interface. Cada fluxograma compõe a documentação de um projeto e essa documentação precisa ser entregue aos clientes e/ou equipe desenvolvedora, de modo que seja acessível para consultas e/ou implementações de futuras melhorias� 38 Trabalhar com fluxogramas pode parecer uma tarefa complexa, mas não é uma tarefa impossí- vel� Na verdade, conforme você for utilizando os fluxogramas em seus projetos, suas habilidades subirão de nível e os resultados também serão percebidos em suas entregas� Por fim, os fluxogramas são ferramentas, além de úteis, necessárias para o UX/UI design porque antecipam comportamentos e padrões cognitivos humanos, o que permite a criação de produtos mais eficazes, que atenderão às necessidades reais dos usuários, considerando o melhor de experiência na jornada de relação e interação dos usuários com produtos e/ou serviços� 39 CARD SORTING Estudar arquitetura da informação foi fundamental para você chegar a esse momento e entender que card sorting nada mais é do que um método que nos permite criar, analisar e/ou validar a AI de um projeto� Esse método serve para projetarmos uma estrutura de um site e/ou aplicativo, por exemplo. Por que a AI pode ser validada com esse método? Basicamente, o card sorting nos permite trabalhar a organização de categorias de informações com modelos de cartões físicos e/ou on-line por meio dos usuários e/ou pessoas selecionadas para tal tarefa. Essa classificação fica a critério dos participantes e/ou usuários que irão reagrupar as informações de acordo com seu modelo mental� A palavra-chave da função do card sorting é “clas- sificar” para poder entender de maneira clara e objetiva cada categoria de um projeto e identificar as expectativas dos usuários. Ele é, portanto, um método prático e uma técnica de pesquisa que nos permite identificar novas tendências, pela percepção dos usuários, e compreender como os usuários organizam e categorizam as informações� 40 COMO APLICAR O MÉTODO CARD SORTING? Primeiramente, você deve organizar uma sessão (ou mais, dependerá de sua necessidade) com alguns participantes, usuários e/ou potenciais usuários� Tendo selecionado os participantes, você informará o contexto de maneira clara para que não reste dúvidas, pois os participantes precisam saber o que estão fazendo� Na sequência, você disponibilizará os cartões – com algumas breves anotações e/ou ilustrações conforme estruturação da AI do projeto, se for o caso de avaliar a AI –, ou apenas os cartões em branco com identificações e espaços para anota- ções dos participantes – se for o caso de criação da AI –, nesse caso, basta informar o contexto e distribuir os cartões� O tempo estimado para cada usuário é de 30 minutos, dentro desse tempo ele deverá organizar os cartões que foram entregues, seguindo sua percepção em relação ao sentido das informações� Os participantes da sessão devem criar as catego- rias e/ou tópicos, caso não estejam definidas, os agrupamentos devem seguir a lógica de sentido para eles� Esse é o sentido do card sorting: entender o modelo mental dos usuários� 41 Você poderá utilizar três técnicas ao trabalhar com esse método: y Classificação de cartões aberta: é comum utilizar essa técnica na criação de AI. Os usuá- rios/participantes recebem uma quantidade de cartões que deverão ser agrupados da forma que eles acharem coerente. Além disso, após o agru- pamento, eles devem criar os rótulos para cada grupo de cartões� Essa técnica é muito útil para ter uma visão macro das categorias e como elas fazem sentido para os usuários; y Classificação de cartões fechada: diferen- temente da classificação aberta, nesta técnica, os participantes e/ou usuários terão a tarefa de implementar novos conteúdos. A partir de uma quantidade de cartões, os usuários devem alocar esses cartões em grupos já estruturados, por isso que é uma técnica de implementação e/ou de novos insights para um site e/ou aplicativo, por exemplo. Por meio da perspectiva do usuário podemos iden- tificar novas necessidades ou mesmo atualizar e/ ou aprimorar um produto que está em uso� Como os cartões já possuem informações, o objetivo é que os participantes as organizem nos grupos de categorias apresentados durante o card sorting; y Classificação de cartões híbrida: como você pode imaginar, essa é uma técnica mista, uma mistura do card sorting aberto com o card sorting 42 fechado. Além de definir bem as categorias exis- tentes, os usuários e/ou participantes têm espaço para criar novas categorias, novos rótulos� As rodadas de card sorting podem ocorrer pre- sencialmente, o que torna o processo ainda mais interativo e com a possibilidade de investigar mais a fundo as decisões dos participantes ao término da rodada. Uma das ferramentas de classificação mais utilizadas, em ambientes físicos, é a “cara a cara”, que é uma sessão na qual os participantes são orientados a expressarem seus pensamentos em voz alta enquanto realizam a classificação. Durante o processo, há a presença das pessoas responsáveis, mas o papel de quem organiza e/ ou acompanha é apenas observar, sem que haja interferências até que a rodada seja finalizada. Regras gerais para utilizar o método card sorting: 1) É preciso ter o conteúdo alinhado ao objetivo da avaliação com os usuários e/ou participantes, por exemplo: pagar uma conta, comprar um livro, enviar uma mensagem, fazer uma lição do curso; 2) Será necessária uma mostra significativa, em torno de 10 a 15 participantes, priorizando os usuários finais do produto e/ou serviço, já que são eles que irão utilizar� Vale considerar a par- ticipação de potenciais usuários e usuários com 43 perfis mais próximos aos dos usuários finais na ausência destes; 3) Frases e conteúdos curtos devem resumir os cartões, para leituras rápidas e de fácil entendi- mento, também, o uso de imagens é bem-vindo; 4) O tempo estimado é de 30 minutos para cada usuário em cada rodada� Se for necessário mais de uma rodada/sessão, a recomendação é que seja em dias diferentes para não cansar o usuário e nem o desmotivar� Você poderá criar sessões de card sorting em dinâ- micas presenciais e on-line, como já abordamos� Considerando-se que seja uma sessão presencial, você pode organizá-la com um grupo de 10 a 15 pessoas� Se achar necessário, divida-a em grupos menores� Para o caso de sessões on-line, algumas plataformas podem facilitar esse processo, que deverá ser organizado com grupos pequenos, de 3 a 5 pessoas, isso porque facilita o acompanha- mento da sessão e a coleta de informações� Se você estiver trabalhando em um projeto de design – de AI ou na criação de fluxogramas – e ainda não utilizou o card sorting, tente implementar essa etapa em seu processo, você só tem a ganhar, e o usuário também! 44 Você pode utilizar postite para organizar um card sorting e/ou criar os cartões e imprimi-los, tudo dependerá dos seus objetivos e necessidades� Além disso, lembre-se das ferramentas digitais para sessões on-line, elas são práticas e úteis diante de barreiras físicas� Você pode organizar uma sessão via Google Meet, Zoom, Meetings, WhatsApp e propor o compartilhamento de telas com ferramentas como o Mural, o Figma e o Miro, dentre outras� Por fim, no card sorting, todas as informações são coletadas e analisadas com o objetivo de iden- tificar as tendências comuns entre os usuários pelo modelo mental, com a sistematização das informações� Os comentários feitos pelos usuários dão uma perspectivaqualitativa das informações e as repetições de cartões em agrupamentos, nas ca- tegorias, fornecem as informações quantitativas, porque são as informações que se repetem entre os usuários� Percebeu como o card sorting é método poderoso? Lembre-se de utilizá-lo sempre que possível, mas inves- tigue novos métodos e acompanhe as novidades que vão surgindo, o mundo está cada vez mais veloz em FIQUE ATENTO 45 inovações e mudanças, com novas informações a cada dia. Como profissional de UX, acompanhar tendências é uma espécie de ferramenta profissional porque você conseguirá se manter atualizado sempre. Aplique as metodologias em seus projetos sem preguiça e sem medo, todo método existe porque funciona, cabe aos profissionais fazer uso deles. Bons projetos! 46 CONSIDERAÇÕES FINAIS Neste e-book, ficamos sabendo que a arquitetura da informação é uma metodologia base no proces- so de desenvolvimento de sites e/ou aplicativos – que se aplica em projetos de estruturas físicas também – e está concentrada no tratamento da hierarquia das informações de um ambiente a ser acessado pelos usuários� Você conheceu a ecolo- gia da informação, que faz parte da AI, estudou as etapas do desenvolvimento da AI e teve acesso a exemplos práticos de arquitetura da informação. Com o tema que tratou da coleta de requisitos do usuário, você aprendeu o que é, qual a impor- tância e como podemos coletar os requisitos dos usuários. Além disso, você entendeu o que é um sitemap, sua função e como construir o mapa do site de seu projeto� Você estudou o conceito de fluxograma, compreendendo que é um esquema visual que faz parte da documentação de um pro- jeto a ser desenvolvido e, por fim, aprendeu o que é o método de card sorting e como utilizá-lo em pesquisas e testes com usuários, com o propósito de descobrir tendências, compreender o modelo mental dos usuários e criar e/ou fazer melhorias na AI de projetos. 47 Referências Bibliográficas & Consultadas AROUCHA, B. Z. L. Design da informação� Curitiba: Intersaberes, 2021. [Biblioteca Virtual]. BARRETO, J. S. Interface humano-computador� Porto Alegre: SAGAH, 2018. BELMIRO, J. (org.). Usabilidade interface homem máquina� São Paulo: Pearson Education, 2017. [Biblioteca Virtual]. DIGITAL WHITEBOARD and collaboration. Mural� Disponível em: https://www�mural�co/. Acesso em: 24 ago� 2022� FERREIRA, M. B. Prototipagem e testes de usabilidade. Curitiba: Contentus, 2020. [recurso eletrônico]. KISTMANN, V. Design Emocional� Curitiba: Contentus, 2020� LOWDERMILK, T� Design centrado no usuário� São Paulo: Novatec, 2019� MODELO DE MAPA do site SAAS colorido leve. Vennage� Disponível em: https://venngage�com/ templates/diagrams/light-colorful-saas-site- https://www.mural.co/ https://venngage.com/templates/diagrams/light-colorful-saas-site-map-5ed98830-1b91-4590-99c9-42fdbdebc5bd https://venngage.com/templates/diagrams/light-colorful-saas-site-map-5ed98830-1b91-4590-99c9-42fdbdebc5bd map-5ed98830-1b91-4590-99c9-42fdbdebc5bd� Acesso em: 23 ago. 2022. PAZ, M. Webdesign� Curitiba: Intersaberes, 2021� [Biblioteca Virtual]. SOBRAL, W. S. Design de interfaces: introdução� São Paulo: Erica, 2019. [Minha Biblioteca]. STATI, C. R; SARMENTO, C. F. Experiência do Usuário (UX)� Curitiba: Intersaberes, 2021� [Biblioteca Virtual]. TAI, H. Design: conceitos e métodos� São Paulo: Blucher, 2018. [Minha Biblioteca]. https://venngage.com/templates/diagrams/light-colorful-saas-site-map-5ed98830-1b91-4590-99c9-42fdbdebc5bd _Hlk112338008 Introdução Arquitetura da informação Coleta de requisitos do usuário Sitemap Fluxograma Card sorting Como aplicar o método card sorting? Considerações finais Referências Bibliográficas & Consultadas