<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Stories by Amanda Carvalho Monteiro on Medium]]></title>
        <description><![CDATA[Stories by Amanda Carvalho Monteiro on Medium]]></description>
        <link>https://medium.com/@amandalha?source=rss-cb3f385b53a2------2</link>
        <image>
            <url>https://cdn-images-1.medium.com/fit/c/150/150/1*L8ZtxIM6wh2SYWwGznZmyQ.jpeg</url>
            <title>Stories by Amanda Carvalho Monteiro on Medium</title>
            <link>https://medium.com/@amandalha?source=rss-cb3f385b53a2------2</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Fri, 05 Jun 2026 23:16:03 GMT</lastBuildDate>
        <atom:link href="https://medium.com/@amandalha/feed" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com" rel="hub"/>
        <item>
            <title><![CDATA[UX|UI Case: Como conectar jovens de periferia ao primeiro emprego?]]></title>
            <link>https://medium.com/@amandalha/ux-ui-case-como-conectar-jovens-de-periferia-ao-primeiro-emprego-56f259bd5dda?source=rss-cb3f385b53a2------2</link>
            <guid isPermaLink="false">https://medium.com/p/56f259bd5dda</guid>
            <category><![CDATA[ui-design]]></category>
            <category><![CDATA[ux-case-study]]></category>
            <category><![CDATA[ui-case-study]]></category>
            <category><![CDATA[ux-design]]></category>
            <category><![CDATA[impacto-social]]></category>
            <dc:creator><![CDATA[Amanda Carvalho Monteiro]]></dc:creator>
            <pubDate>Mon, 27 Jun 2022 14:14:44 GMT</pubDate>
            <atom:updated>2022-07-06T00:40:42.347Z</atom:updated>
            <content:encoded><![CDATA[<p>Em 2021, eu fui selecionada para participar do curso de UX design da TERA, através do programa de bolsas do Santander. Esse case representa o trabalho final do curso, realizado em 2021/2022, junto com outros quatro designers: Erich Bragança, Marina Sales, Beatriz Guedes e Adriano Medeiros.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VfXn2NbvZDltlg8LYG8mkg.jpeg" /><figcaption>Telas da solução “Qualificaí”</figcaption></figure><h3>O desafio</h3><blockquote>O desafio era propor uma solução que ajudasse a <strong>conectar jovens da periferia ao primeiro emprego</strong>.</blockquote><p>O desafio foi escolhido devido à <strong>relevância do tema e possível impacto social</strong>. Ao final, nós desenvolvemos um protótipo de um site de vagas que foca em aumentar a qualificação dos jovens oferecendo sugestões personalizadas de cursos gratuitos.</p><h3><strong>Cenário atual</strong></h3><p>Com uma taxa de desemprego de 22,8% entre os jovens de 18 a 24 anos no Brasil, (maior que o dobro da média geral do país de 11,1%) (<a href="https://www.poder360.com.br/economia/desemprego-entre-os-jovens-fica-estavel-em-228/">PODER 360</a>), o desafio pode ser classificado como um <strong><em>wicked problem</em></strong>, ou problema capcioso, pois há muitos fatores e <em>stakeholders</em> envolvidos, e não é possível encontrar uma única solução que resolva tudo (<a href="https://medium.com/@alinemelo/ux-como-abordar-wicked-problems-15ba98553783">ALINE MELO).</a></p><p>Também é preciso levar em consideração que, quando falamos de primeiro emprego e jovens de periferia, há muitas questões e preconceitos que tornam esse processo ainda mais difícil. <strong>Algumas dores desses jovens que identificamos com pesquisas primárias e secundárias foram</strong>:</p><ul><li>Falta de experiência</li><li>Falta de qualificação</li><li>Falta de indicações</li><li>Dificuldade de acesso a equipamentos e computadores</li><li>Preconceito em relação a cor, sexualidade e lugar onde moram (distância do trabalho)</li></ul><p>Diante desse cenário complexo e do tempo limitado para execução do projeto, foi necessário focalizar as pesquisas em um objetivo e público específico. Detalhes sobre os critérios utilizados para essa priorização serão abordados a seguir:</p><h3><strong>Usuários</strong></h3><p>Consideramos os próprios <strong>jovens de periferia que procuram um primeiro emprego</strong> como nosso ator principal. Nesse estágio inicial, nossa maior preocupação era garantir que a solução tivesse o potencial de ajudar esses jovens a cumprir seus objetivos.</p><p>Por isso, focamos em buscar entender exatamente que objetivos são esses, e em que contexto eles estão inseridos.</p><h4>Conhecendo o usuário</h4><p>Nosso primeiro passo de pesquisa sobre a proposta do tema, foi buscar <strong>informações em fontes secundárias</strong> sobre algumas das principais dores que os jovens de periferia podem experienciar para encontrar um primeiro emprego. Sobre isso, encontramos diversos artigos falando sobre questões de preconceitos estruturais (<a href="https://pt.org.br/dados-do-ibge-apontam-que-32-de-jovens-negras-nao-estudam-e-nem-trabalham/">PT</a>); baixos índices de escolaridade (<a href="https://www.napratica.org.br/desafios-de-jovens-perifericos-estrategias-inclusao-produtiva/">NA PRÁTICA</a>) e dificuldade de acessar internet em casa (<a href="https://portal.aprendiz.uol.com.br/2020/07/14/pandemia-acentua-desigualdade-no-acesso-a-internet-e-revela-mobilizacao-social-para-combate-la/">PORTAL APRENDIZ</a>).</p><p>No entanto, ainda tínhamos muitas dúvidas, principalmente sobre como essas questões se manifestam no dia a dia do nosso público, e por isso decidimos <strong>contactar diretamente potenciais usuários</strong> através de técnicas de pesquisa primária.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*hGhbh00WocHufT1bKkAVPQ.png" /><figcaption>Matriz CSD</figcaption></figure><p><strong>Pesquisa quantitativa</strong></p><p>Para recrutar pessoas para a nossa pesquisa e responder as dúvidas da matriz CSD, compartilhamos um <strong>questionário pelas redes sociais</strong> (Whatsapp, páginas do Facebook e Instagram). Ele estava dividido em sessões, com perguntas objetivas e discursivas, e ao final também pedíamos para a pessoa deixar o número do celular caso ela se dispusesse a responder mais perguntas futuramente.</p><p>Na primeira seção do formulário, fizemos algumas perguntas para <strong>filtrar as pessoas que faziam parte do público-alvo que estávamos procurando:</strong></p><p><strong>Qual a sua idade? </strong>— Queremos pessoas jovens. Também é útil para determinar qual a faixa etária que vamos considerar como “jovem”.</p><p><strong>Você mora em periferia? </strong>— Queremos pessoas que moram na periferia</p><p><strong>Qual a sua situação profissional? — </strong>Queremos pessoas que estão buscando um primeiro emprego. Mesmo assim, não descartamos as respostas de quem já conseguiu um. Nesse caso, direcionamos essas pessoas para uma nova seção em que perguntamos sobre quais foram as principais dificuldades que elas enfrentaram nesse processo e o que as ajudou a ter sucesso.</p><p>Ainda na primeira seção, também pedimos algumas informações sobre <strong>raça, gênero, escolaridade e acesso a internet</strong>. Nosso objetivo era confirmar se existia uma relação entre esses dados e a dificuldade de encontrar um emprego, como apontado pela nossa pesquisa anterior, e identificar esses possíveis usuários para futuro contato.</p><p><strong>Algumas das perguntas feitas para quem já teve um primeiro emprego:</strong></p><p><strong>O que você acredita que te ajudou a ingressar na vaga de emprego? </strong>— Insights para futuras soluções e identificar aliviadores de dores</p><p><strong>Quanto tempo você demorou para encontrar o primeiro emprego? </strong>— Uma métrica para medir a dificuldade de conseguir o primeiro emprego e relacionar com as outras informações</p><p><strong>Algumas das perguntas feitas para quem ainda está buscando um primeiro emprego:</strong></p><p><strong>O que você acha que está te dificultando a ingressar no mercado de trabalho?</strong> — Identificar pontos de dores dos usuários</p><p><strong>Geralmente, por onde você busca ou fica sabendo de oportunidades de emprego? </strong>— Identificar canais aos quais os usuários têm acesso</p><p>Obtivemos 23 respostas no total e 6 respostas que passaram pelos 3 filtros. Não foi a quantidade que gostaríamos, mas dentre os dados que conseguimos coletar, alguns dos que mais chamaram a atenção foram:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VIasBfeBfnoGnV0dekmicg.png" /><figcaption>Gráficos com os resultados da pesquisa qualtitativa</figcaption></figure><p>O gráfico 1 mostra que uma <strong>solução online</strong> pode ainda ser viável, apesar das nossas preocupações, principalmente se pensarmos nela para o formato <em>mobile</em>, vinculada a redes sociais (gráfico 4).</p><p>Além disso, no gráfico 2, identificamos que os jovens acreditam que <strong>indicação </strong>e <strong>qualificação </strong>são os principais fatores que os ajudaram a ingressar numa vaga de emprego. Apesar de todas as pessoas que ainda não encontraram um emprego terem a tendência a culpar fatores externos a elas, como falta de oportunidades e poucas vagas (gráfico 3).</p><p>O restante das dúvidas foi sanado por meio de <strong>entrevistas individuais</strong>. Nesse sentido, o formulário foi muito útil como fonte de informações para nos ajudar a elaborar perguntas para entrevistas e recrutar pessoas para uma pesquisa qualitativa.</p><h4><strong>Pesquisa qualitativa</strong></h4><p>Após fechar o formulário da pesquisa quantitativa, separamos 6 contatos de jovens de periferia que estão buscando um primeiro emprego, e conseguimos marcar entrevistas individuais com 3 deles.</p><p>As entrevistas foram realizadas de forma virtual com um roteiro semi-aberto, que dividimos em 5 sessões:</p><ul><li><strong>Introdução: </strong>Perguntas iniciais para quebrar o gelo: onde a pessoa mora, se ela está estudando, etc.</li><li><strong>Motivação: </strong>Entender as dores que o jovem pretende sanar com um emprego, seus objetivos a longo e curto prazo e que tipo de emprego ele está buscando.</li><li><strong>Tarefas: </strong>Entender como é a jornada do usuário e o papel de soluções digitais, para verificarmos se o digital realmente seria o melhor caminho.</li><li><strong>Dores: </strong>Identificar a percepção do usuário sobre o que ele acha que está prejudicando a sua busca por um emprego e que soluções ele já tentou buscar.</li><li><strong>Qualificação: </strong>Esse tema foi apontado como um possível aliviador de dores na pesquisa quantitativa, por isso decidimos explorar mais essa questão perguntando sobre os requisitos que são pedidos nas vagas de emprego às quais a pessoa entrevistada já se candidatou, e o que ela fez no caso de não possuir algum desses requisitos.</li></ul><p>Pedimos consentimento para gravar todas as entrevistas, e depois dividimos e agrupamos as falas dos entrevistados em <em>clusters</em> por tema. Usamos essa técnica para <strong>identificar pontos em comum</strong> nas falas dos possíveis usuários e poder começar a organizar e sintetizar as informações em um quadro geral.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*nYfPoC_-HAjwrCcITCcf5Q.png" /><figcaption>Falas dos entrevistados agrupadas por tema.</figcaption></figure><p>Os principais aprendizados dessa etapa foram:</p><ul><li>Os entrevistados têm tendência a procurar um primeiro emprego no final/logo após o Ensino Médio;</li><li>Eles buscam um emprego para <strong>ajudar a família</strong>, ou para ter um dinheiro sobrando para transporte e atividades de lazer;</li><li>Nessa época, eles não buscam um emprego com a ideia de formar uma carreira, mas para <strong>atender seus objetivos imediatos</strong>;</li><li>Ao buscar um emprego, eles dão preferência a vagas aos quais eles tenham as <strong>qualificações necessárias</strong> (por exemplo, se a pessoa sabe inglês, provavelmente vai buscar uma vaga que exija isso, se ela não tiver, vai eliminar essas opções);</li><li>Quando perguntados sobre as suas <strong>dores</strong>, eles culpam fatores externos a eles, e quando perguntados sobre o que eles poderiam fazer para melhorar as suas chances de conseguir um emprego, a única coisa que mencionaram foi fazer cursos, mas falaram isso de forma desanimada, pois acreditam que <strong>cursos são muito caros</strong>. Às vezes eles chegam a buscar por cursos e conteúdos gratuitos, outras vezes só assumem que isso não existe ou não será viável;</li><li>Em geral, eles <strong>buscam por empregos nas redes sociais</strong>, foram citados grupos de facebook e páginas de emprego no twitter;</li><li>Dificuldade de acesso a internet não é o problema, o problema é ter acesso a computadores.</li></ul><p>Com essas informações, conseguimos traçar um perfil do nosso usuário ideal, que resumimos no mapa da persona abaixo. Nas próximas etapas, usamos o que foi aprendido na pesquisa com os usuários para justificar nossas escolhas na geração e priorização de ideias e desenvolvimento do produto.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1013/1*zgYNQK-sDbngwlndgtu82g.png" /><figcaption>Mapa da persona</figcaption></figure><h3>Oportunidades e alternativas de solução</h3><p>Após a pesquisa com usuários, elencamos <strong>5 oportunidades</strong> baseados nas dores que foram identificadas:</p><ul><li>Como nós podemos conectar jovens de periferia à <strong>qualificação técnica</strong> para que eles cumpram os requisitos das vagas de emprego que desejam?</li><li>Como nós podemos providenciar o <strong>acesso a computadores</strong> para que os jovens de periferia possam praticar e qualificar qualificações importante?</li><li>Como nós podemos <strong>baratear o custo de locomoção</strong> para que os candidatos da periferia possam ser aprovados nas primeiras fases de processo seletivos?</li><li>Como nós podemos conectar jovens de periferia àqueles que podem <strong>lhes indicar para vagas de emprego</strong>, para que eles possam ter vantagem em processos seletivos?</li><li>Como nós podemos fazer jovens de periferia <strong>ganharem experiência </strong>para que eles possam ter vantagem em processos seletivos?</li></ul><p>Depois, realizamos uma sessão de <em>brainstorm </em>em que cada membro do grupo contribuiu com uma ou mais sugestão de projeto para cada um desses tópicos. Nosso objetivo nessa etapa era abrir as possibilidades para várias alternativas de projeto, e estimular o envolvimento de todos os membros do grupo na construção da solução.</p><p>Para decidir qual das ideias listadas era mais apropriada para nosso público (e para nós), utilizamos uma <strong>matriz de priorização impacto x esforço </strong>(imagem abaixo). Nela, consideramos o potencial de cada solução de ajudar o usuário a conseguir um emprego (vertical) e a dificuldade de execução (horizontal).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*vt2d9hNhngycLT9qr-0Xmg.png" /></figure><h3>A solução</h3><p>Optamos por seguir pela opção que consideramos menos esforço e de maior impacto (canto superior direito no gráfico):</p><blockquote>Uma plataforma de emprego que oferece sugestões de cursos gratuitos de acordo com as vagas que os usuários interagem na plataforma.</blockquote><p>Chamamos o nosso produto de <strong>Qualificaí</strong>, a partir da palavra “Qualificação”, tema que permeia a nossa solução.</p><h3><strong>Fluxo do site e wireframes</strong></h3><p>Para garantir que todos os membros do grupo estavam alinhados, foram tomadas decisões do plano mais geral para o mais específico. Assim, antes de desenhar a interface, nós começamos desenvolvendo o fluxo do site, com objetivo de <strong>determinar como os usuários navegam por ele e quais telas precisávamos desenvolver</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/968/1*VLQUU3y1VNfYrbnj-5vZ2A.png" /><figcaption>Fluxo do site</figcaption></figure><p>Nesse momento, nós<strong> não</strong> precisávamos desenvolver todas as páginas, mas apenas as telas do <strong>fluxo principal</strong>, com fins de <strong>MVP</strong>.</p><p>Essas telas foram desenvolvidas primeiro no formato de <em>wireframe</em>, para que, em conjunto, nós tivéssemos facilidade de decidir os elementos que estariam em cada página e o espaço que cada um deles ocuparia na tela.</p><p>Tanto para o fluxo, quanto para os <em>wireframes</em>, nós optamos por utilizar ferramentas digitais (figma), que facilitassem a colaboração à distância e que permitissem que todos pudessem editar os documentos ao mesmo tempo.</p><p><strong>Fluxo principal e telas a serem feitas:</strong></p><ul><li>O usuário encontra uma postagem em um grupo de rede social divulgando uma vaga (com um link para o nosso site).</li><li>O link redireciona a pessoa para a página que contém uma descrição e <strong>detalhes da vaga </strong>no nosso site.</li><li>Ao clicar em se inscrever na vaga, é requisitado um <strong>primeiro login</strong>, de acesso rápido, para adquirirmos <em>leads</em>.</li><li>Depois da pessoa ser redirecionada para se inscrever na vaga, o nosso site exibe uma página que chamamos de <strong>sucesso de inscrição</strong>.</li><li>Agora, o usuário pode querer usar o sistema de<strong> busca por vagas</strong>. Nessa página há algumas sugestões de busca filtradas, baseadas nas respostas que obtivemos na etapa de pesquisa com os usuários (ex: vagas para menos de 18 anos, vagas perto da minha casa, vagas que combinam com meu perfil...)</li><li>Ao fazer uma busca ou selecionar uma das opções de filtragem, o usuário é direcionado para a página de <strong>resultados da pesquisa</strong>, que mostra uma listagem de vagas pelas quais ele pode se interessar, e cursos gratuitos que correspondem aos requisitos pedidos pela maioria das vagas dos resultados.</li><li>Ao selecionar uma vaga, o usuário volta para a página com <strong>detalhes da vaga</strong> selecionada, e ao selecionar um curso, ele é direcionado para a página do curso.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*T8tJCVeT5QnbQMPg1SMlxw.png" /><figcaption>Wireframes das telas: <strong>Detalhes das vagas</strong>; <strong>Primeiro login</strong>; <strong>Sucesso de inscrição</strong>; <strong>Busca por vagas</strong>; <strong>Resultado das buscas</strong></figcaption></figure><p>Uma observação interessante sobre a página de Primeiro login, é que ela se chama <strong>Primeiro</strong> login porque, eventualmente, seria interessante se os usuários preenchessem mais informações sobre eles mesmos para que pudéssemos oferecer sugestões mais personalizadas de vagas e cursos, mas não queríamos exauri-los com um formulário longo nesse momento em que eles estão acessando o site pela primeira vez.</p><p>Mesmo assim, pensando nos objetivos de negócio, é muito importante que adquiramos leads, então nós decidimos manter uma etapa de login inicial com as informações mais importantes, muito rápido de preencher, e deixamos a opção de poder usar filtros e sugestões personalizadas como um recurso não-obrigatório para <em>heavy users</em> que estariam dispostos a preencher um formulário mais longo. No entanto, <strong>assim que os novos usuários se inscreverem numa vaga, o site passa a lhes mostrar um <em>popup</em> lhes lembrando de preencher seu perfil.</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/546/1*kism042IVrx_yyfbsCGWdg.png" /><figcaption>Zoom nos wireframes das páginas <strong>Sucesso de Inscrição</strong> e <strong>Busca por vagas</strong></figcaption></figure><p>Sobre os aprendizados dessa fase, é interessante mencionar que foi nessa etapa que vimos que seria mais interessante que o projeto se tratasse de um site<em> mobile</em> e não um aplicativo. Isso porque queríamos <strong>aproveitar o comportamento habitual dos usuários de buscar vagas nas redes sociais</strong>, usando postagens de grupos de Facebook e páginas de Twitter para direcioná-los para a nossa solução.</p><p>Ora, um aplicativo representaria uma grande interrupção no fluxo, pois, ao primeiro contato, o usuário teria de verificar se teria espaço no celular e esperar o tempo de <em>download</em>, o que demanda certo tempo e poderia ocasionar a <strong>perda de interesse pela vaga</strong>. Com um site <em>mobile</em>, no entanto, conseguimos deixar essa etapa do fluxo mais rápida.</p><p>Importante exaltar que chamamos a <strong>atenção dos jovens com vagas e não cursos</strong>, porque, como <strong>vimos na nossa pesquisa</strong>, nosso público-alvo não costuma procurar por cursos, por não acharem que eles se adequam a sua realidade. Por isso, achamos importante apresentar sobre os <strong>cursos em um contexto aliado com as vagas</strong>, para que possam parecer mais interessantes, sirvam de guia para quem está perdido tentando entrar no mercado de trabalho, e mostrar que existem <strong>cursos gratuitos sim!</strong></p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*33ElxHEOSMyxXxpvz5cOsA.png" /><figcaption>Nosso objetivo é ser uma ponte entre as redes sociais, as vagas e a qualificação</figcaption></figure><h3><strong>Guia de estilos</strong></h3><h4><strong>Cores</strong></h4><p>Antes de partir para o desenvolvimento das telas em alta fidelidade, definimos as cores base do nosso site e do brand.</p><p>A cor <strong>azul </strong>foi escolhida por ser uma cor neutra, para comunicar com todos os gêneros, transmitindo seriedade e segurança. Já a cor <em>accent</em>, ou secundária, foi escolhido o <strong>laranja</strong>, sendo essa uma cor ligada à jovialidade (nosso público) e alegria. Além disso, são cores complementares no círculo cromático, o que faz ter uma boa harmonia e contraste. Ao utilizar as cores na UI, criamos variações de tons das cores escolhidas.</p><p>Para compor toda a interface, configuramos uma <strong>escala de cinza</strong> para <em>background</em> e outros detalhes.</p><p>Também definimos no guia de estilo as cores possíveis para os textos. Na cor <em>Black text</em> não utilizamos a cor 100% preto para não comprometer a <strong>harmonia da tela e a leiturabilidade</strong>.</p><p>Além disso, foram configuradas cores <em>helpers</em>(cores de apoio), que são utilizadas principalmente para dar feedback visual ao usuário sobre alguma informação. O <strong>vermelho</strong> passa a ideia de perigo ou erro, por isso erros mais graves são entendidos facilmente com essa cor. <strong>Verde</strong> é entendido como positivo, então utilizamos esta cor em mensagens de sucesso. <strong>Amarelo </strong>segue a linha de “atenção”.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gtqXv7RqqJdyXGVwkn1LnQ.png" /></figure><p><strong>Tipografia</strong></p><p>A fonte Poppins foi escolhida por ser <em>sans-serif</em>, transmitindo modernidade, possuir muita <strong>clareza em sua forma</strong>, <strong>legibilidade </strong>e muitas variações de peso, o que ajuda na <strong>hierarquia tipográfica</strong>.</p><p>Poppins é uma fonte Google, portanto, nos navegadores mais comuns já vem pré-carregada, assim gerando um <strong>ganho de performance </strong>nos aplicativos <em>web</em>.</p><p>No guia de estilo, definimos os<em> Headings</em> de 1 a até 3, tamanho das fontes e espaçamento entre linhas para<em> desktop </em>e <em>mobile</em> separadamente.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*oFWzz7s5DxNs-qyCSE8RJw.png" /></figure><h4><strong>Botões</strong></h4><p>Buscamos deixar todos os botões com bom contraste para legibilidade e espaçamento suficiente para a área de clique.</p><p><strong>Botões foram criados no figma</strong> em um único componente com combinações de variantes. Essa prática permite uma boa organização para utilizar o componente no layout. Além disso, as variantes foram criadas com <em>autolayout</em> e com a nova função do figma de propriedade do componente. Com isso, definimos propriedades de <em>content</em>, <em>instance</em> <em>swap</em> e <em>boolean</em>. Com a <em>content</em>, podemos mudar a chamada do texto facilmente. Com <em>instance swap</em>, podemos trocar o ícones do botão apenas organizando os ícones por pastas. E com<em> boolean</em>, podemos escolher se o ícone aparece a esquerda, a direita ou em nenhum dos lado.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YnWARze5Z2Z_Er70aB-8PQ.png" /></figure><h4><strong>Componentes de formulários</strong></h4><p>O formulário necessário até esta etapa foi o<em> input text</em>. Então, criamos apenas ele, porém com variantes. Utilizamos o conceito de <strong>design atômico</strong> para o <em>.Base input</em>, onde se encontram os componentes separados que, ao ter suas instâncias organizadas juntas, vemos o componente <em>input text </em>com diversas possibilidades.</p><p>Neste componente, vemos o título, o<em> input</em> (com <em>placeholder</em>) e uma mensagem de apoio na parte inferior direita. Configurando as propriedades desse componente, é possível escolher quando aparece o ícone de visualizar senha, quando aparece a mensagem, que tipo de mensagem aparece e outras combinações. Sempre visando a <strong>escalabilidade </strong>e <strong>consistência </strong>de um futuro<em> design system</em>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/475/1*2au16_qwGjeKP2uYpyI3sw.png" /></figure><h4><strong>Design System e Escalabilidade</strong></h4><p>O guia de estilo foi pensado e configurado no figma para ser um início de um <strong><em>design system</em></strong> mais robusto com consistência no design. Pois, utilizamos conceitos de design atômico, e todos os botões, formulários, cores, tipografia, <em>headings</em>, figuras, ícones, <em>cards</em>, itens de navegação, etc, estão componentizados.</p><p>Com isso, temos uma escalabilidade muito consistente e prática, para caso seja necessário a criação de novas telas para testes e afins.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/813/1*E4a6-LjOYmulLVJSywYh-w.png" /></figure><h3><strong>Protótipo de alta fidelidade</strong></h3><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FjWYATOVIpRM%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DjWYATOVIpRM&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FjWYATOVIpRM%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0" scrolling="no"><a href="https://medium.com/media/46ea58e4b8f8a58d994a4bfcb732282b/href">https://medium.com/media/46ea58e4b8f8a58d994a4bfcb732282b/href</a></iframe><figure><img alt="" src="https://cdn-images-1.medium.com/max/875/1*5Hbw6AXhn868QEOHDGKhug.png" /><figcaption>Nota: observe a diferença entre os cards de cursos e os card de vagas, feitos de forma que o usuário possa diferenciar facilmente um do outro, mesmo que eles estejam na mesma página</figcaption></figure><h3><strong>Próximos passos</strong></h3><p>Neste <em>case</em>, mostramos como o trabalho de <em>research</em> e conhecimento dos usuários se traduziu em uma boa experiência, com uma solução e telas de interface <em>mobile</em>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bsxvetHj-bqr34vB3gJuUQ.png" /><figcaption>Telas do protótipo final”</figcaption></figure><p>Para conclusão do MVP, o primeiro passo óbvio é <strong>testar o protótipo desenvolvido com representantes do público alvo escolhido,</strong> para garantir padrões básicos de usabilidade e interação. Depois disso, podemos pensar nas telas fora do fluxo principal e em novas funcionalidades, como ajudar o jovem a montar o próprio currículo, entre outros.</p><p>Além disso, futuramente o ideal seria considerar os pontos de <strong>contato de outros <em>stakeholders</em></strong> sobre a plataforma, como recrutadores e instituições beneficentes.</p><p>Mas já que estamos falando sobre expandir nossa audiência, também é importante ressaltar que será importante fazer um acompanhamento do amadurecimento dos jovens que utilizam a nossa plataforma. Veja, hoje o objetivo deles é conseguir um primeiro emprego, o que esperamos que aconteça, principalmente com o auxílio da nossa solução. Depois disso, suas necessidades serão outras, e então nós temos a oportunidade de lhes <strong>oferecer novos produtos e serviços</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*0wewcYWxtl1xJNUDpXjy3A.png" /><figcaption>Roadmap do produto</figcaption></figure><p>Se tiver alguma dúvida ou interesse em <strong>falar conosco</strong>, pode me enviar uma mensagem por email ou pelo linkedin:</p><p>amandalha@gmail.com</p><p><a href="http://www.linkedin.com/in/amanda-carvalho-monteiro-86384520a">www.linkedin.com/in/amanda-carvalho-monteiro-86384520a</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=56f259bd5dda" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Introdução ao estudo de caso: Facileitor]]></title>
            <link>https://medium.com/@amandalha/introdu%C3%A7%C3%A3o-ao-estudo-de-caso-facileitor-e27e97450e3?source=rss-cb3f385b53a2------2</link>
            <guid isPermaLink="false">https://medium.com/p/e27e97450e3</guid>
            <category><![CDATA[ux-case]]></category>
            <category><![CDATA[ux-design]]></category>
            <category><![CDATA[ux-ui-product-designer]]></category>
            <dc:creator><![CDATA[Amanda Carvalho Monteiro]]></dc:creator>
            <pubDate>Mon, 18 Apr 2022 07:19:42 GMT</pubDate>
            <atom:updated>2022-04-18T07:19:42.927Z</atom:updated>
            <content:encoded><![CDATA[<p>Não sei se vocês já tiveram a experiência de dormir lendo um texto sobre um assunto que te interessa, ou simplesmente demorar muito tempo para conseguir avançar na leitura. Eu já, e isso sempre foi uma fonte de frustração para mim. Eu achava que era minha culpa, que eu não era boa o suficiente, o que não é verdade: a culpa não é do usuário (leitor), às vezes são as coisas que não são feitas para serem acessíveis, mesmo quando deveriam ser.</p><p>E foi com base nisso que eu acabei desenvolvendo o <strong>Facileitor</strong>, <strong>um projeto de UX/UI design para auxiliar redatores a escreverem textos mais fáceis de serem lidos pelo seu público</strong>. Nesse estudo de caso, dividido em duas partes você pode acompanhar todo o desenvolvimento do projeto, desde a pesquisa e identificação das dores, até o protótipo e testes de usabilidade.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GAQSRfKMRS7utxXosMg-jg.jpeg" /></figure><p><a href="https://medium.com/@amandalha/facileitor-9cd8f429fbb3"><strong>Na primeira parte</strong></a><strong> </strong>eu falo como:</p><ul><li>Descobri que essa dor, particular da minha realidade, atingia outras pessoas e de que maneira;</li><li>Identifiquei a que grupos essas pessoas pertencem e quais suas características;</li><li>Tomei decisões quanto ao público-alvo e escopo do projeto.</li></ul><p>Abaixo está um mapa-ilustrativo das etapas da parte 1:</p><figure><a href="https://medium.com/@amandalha/facileitor-9cd8f429fbb3"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*esTvFC6QozqQEiA6vIIt0g.png" /></a></figure><figure><a href="https://medium.com/@amandalha/facileitor-9cd8f429fbb3"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*6SmKRSVU202NEuUXytew3w.png" /></a></figure><p>Já<strong> </strong><a href="https://medium.com/@amandalha/facileitor-bf5a86060bed"><strong>na segunda parte</strong></a>, eu explico:</p><ul><li>Sobre o desenvolvimento da solução em si, incluindo detalhes do funcionamento das fórmulas de APIs;</li><li>Características da linguagem visual das interfaces</li><li>Como se passaram os testes de usabilidade e feedback dos usuários.</li></ul><p>Abaixo está um mapa-ilustrativo das etapas da parte 2:</p><figure><a href="https://medium.com/@amandalha/facileitor-bf5a86060bed"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ODjausbbbuXvsOLZZLG0bQ.png" /></a></figure><figure><a href="https://medium.com/@amandalha/facileitor-bf5a86060bed"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YbepyD7lUOEIpltklqOVRQ.png" /></a></figure><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=e27e97450e3" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Facileitor]]></title>
            <link>https://medium.com/@amandalha/facileitor-bf5a86060bed?source=rss-cb3f385b53a2------2</link>
            <guid isPermaLink="false">https://medium.com/p/bf5a86060bed</guid>
            <category><![CDATA[leiturabilidade]]></category>
            <category><![CDATA[ux-design]]></category>
            <category><![CDATA[interfaces]]></category>
            <category><![CDATA[ui-design]]></category>
            <category><![CDATA[estudo-de-caso]]></category>
            <dc:creator><![CDATA[Amanda Carvalho Monteiro]]></dc:creator>
            <pubDate>Sun, 20 Feb 2022 19:43:49 GMT</pubDate>
            <atom:updated>2022-06-27T14:27:50.371Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GAQSRfKMRS7utxXosMg-jg.jpeg" /></figure><h3>Facileitor: Estudo de Caso parte 2</h3><p><a href="https://medium.com/@amandalha/facileitor-9cd8f429fbb3">Na primeira parte desse estudo de caso</a>, nós vimos como eu cheguei à conclusão da necessidade de <strong>uma ferramenta que medisse fatores quantitativos da leiturabilidade em português</strong>, estudo de soluções já existentes e definição do público-alvo. Agora, chegamos na segunda parte, na qual falaremos mais da elaboração a solução em si.</p><h4>Sumário (parte 2):</h4><ul><li><a href="#1b3a">Geração de Ideias</a></li><li><a href="#96d9">Sobre as Métricas</a></li><li><a href="#4881">Wireframes</a></li><li><a href="#a4ba">A Interface e seus Componentes</a></li><li><a href="#35e5">Nome e Logo</a></li><li><a href="#790a">Gráficos</a></li><li><a href="#373f">Teste de Usabilidade</a></li></ul><h3>Geração de Ideias</h3><blockquote>“O caminho para ter boas ideias é ter várias ideias e jogar as ruins fora.” — Linus Pauling</blockquote><p>Antes de se chegar à conclusão de qual seria a solução final do projeto, foram pensadas em outras possibilidades que poderiam atender as mesmas necessidades do público. Essas foram algumas das ideias que surgiram nesse processo:</p><ul><li><strong>Mostrar variação do nível de leiturabilidade ao longo do texto:</strong></li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Ii6rZmzG4ELavM88ASPA7w.png" /></figure><p>Essa na verdade foi uma das primeiras ideias que surgiu ainda antes da definição do público-alvo. A questão era que todas as formas de medir a leiturabilidade consideravam o texto como um todo, minha ideia era buscar <strong>uma forma de representação que mostrasse a diferença entre níveis de leiturabilidade em diferentes partes do texto</strong>. Isso foi pensado inicialmente para indicar também a variação do ritmo da leitura, pensando principalmente em obras literárias de várias páginas.</p><p>No contexto de textos jornalísticos, no entanto, essa questão já não parecia mais tão relevante, logo <strong>a ideia foi descartada</strong></p><ul><li><strong>Processador de texto que mede a leiturabilidade e influencia o redator a escrever na estrutura correta:</strong></li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*M5qQtcQAw9DJOkcWjf8V6Q.jpeg" /></figure><p>Nessa solução, o objetivo não era apenas indicar o nível de leiturabilidade, mas fornecer uma interface que influenciasse o redator a pensar em um assunto por parágrafo (ao separar os parágrafos em caixa) e escrever parágrafos menores (fornecendo, inicialmente, uma caixa de texto pequena).</p><p>Chegou-se a desenhar alguns rascunhos dessa solução, mas <strong>ela também foi descartada</strong> uma vez que se percebeu que seria difícil convencer uma pessoa trocar um processador de texto com o qual ela já está acostumada por outro novo, além de que essa solução já se afasta um pouco da proposta inicial de introduzir elementos quantitativos na análise da leiturabilidade. <strong>O ideal seria uma solução que inicialmente permitisse o usuário a continuar a usar os processadores de textos com os quais ele já está habituado</strong>.</p><ul><li><strong>Corretor textual, que indica, no texto, problemas relacionados à leiturabilidade e correção gramatical (parte importante também da revisão):</strong></li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*TiplrJUVSOralKcVRnBPmQ.jpeg" /></figure><p>Finalmente, <strong>essa foi a ideia escolhida</strong>. Ela se assemelha muito aos corretores de estilo, como o Grammarly e o Hemingway app que vimos na parte 1 deste estudo de caso, mas o diferencial é que ainda não existem muitas soluções desse tipo para o português.</p><p>O objetivo é mostrar os <strong>valores e a interpretação das métricas quantitativas</strong> (para o usuário identificar rapidamente o status do texto como um todo, além de poder identificar metas e limites), e <strong>indicar no texto os principais pontos de revisão</strong>.</p><h3>Sobre as Métricas</h3><h4><strong>Indicadores Gerais</strong></h4><p>Uma vez que foi estabelecido que a solução a ser desenvolvida seria um programa que mediria elementos quantitativos do texto, chegou a hora de <strong>determinar que elementos seriam esses, e como eles seriam medidos</strong> (viabilidade tecnológica).</p><p>Para isso, analisou-se a listagem das métricas disponíveis como APIs no<a href="http://fw.nilc.icmc.usp.br:23380/cohmetrixport"> Coh-Metrix-Port</a>, comparando-as com os pontos levantados nas pesquisas. No fim, <strong>foram escolhidos 4 parâmetros</strong>, são eles: Leiturabilidade, Vocabulário, Quantidade de Informação e Ortografia e Gramática</p><p><strong>Leiturabilidade: </strong>Medida com o índice Flesch Brasileiro. Na métrica, os valores variam de 0 a 100 e quanto maior, menor é a complexidade do texto (inversamente proporcional).</p><p><strong>Vocabulário:</strong> Medido com a métrica cw_freq. Essa métrica mede a média da quantidade de vezes que as palavras de conteúdo de um texto aparecem no Banco de Português (BP).</p><p>O Banco do Português é um corpus eletrônico que contava inicialmente com 230 milhões de palavras de textos em português (<a href="https://revistas.pucsp.br/index.php/esp/article/view/6175">SARDINHA, 2007</a>). Quanto maior o valor da métrica, mais vezes as palavras do texto analisado aparecem nesse corpus, <strong>logo mais comum, utilizada e conhecida ela deve ser</strong>, e menor a complexidade do texto (inversamente proporcional).</p><p>Essa métrica foi escolhida baseada nas recomendações do<em> </em><a href="http://www.rio.rj.gov.br/dlstatic/10112/4204433/4101395/estudos1.pdf"><em>Para um Manual de Jornalismo Online</em></a>, que prega pela <strong>simplicidade e clareza da linguagem</strong> utilizada nesse tipo de texto, e também pelo fato da adequação do vocabulário ter sido apontada como um dos principais fatores para se verificar o nível de dificuldade de leitura, tanto pelos responsáveis pela revisão das notícias do site de agência de notícias do IBGE, quanto por outros profissionais na primeira pesquisa em questionário.</p><p><strong>Quantidade de informações:</strong> Medida com a métrica cw_words, que mede a porcentagem da ocorrência de palavras de conteúdo em um texto. São consideradas palavras de conteúdo os substantivos, adjetivos, verbos, advérbios e palavras denotativas. Nesse caso os valores variam de 0 a 1, quanto maior o valor, maior a complexidade do texto (diretamente proporcional).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*N_GGfU3ZrR2pHBf-hkCEzA.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bYVCz5kSlXZo4SrPVKXN_Q.png" /></figure><p><strong>Quantidade de informações:</strong> Medida com a métrica cw_words, que mede a porcentagem da ocorrência de palavras de conteúdo em um texto. São consideradas palavras de conteúdo os substantivos, adjetivos, verbos, advérbios e palavras denotativas. Nesse caso os valores variam de 0 a 1, quanto maior o valor, maior a complexidade do texto (diretamente proporcional).</p><p>Essa métrica mede o quão informativo um texto é, e foi escolhida baseada nas recomendações do <a href="http://www.rio.rj.gov.br/dlstatic/10112/4204433/4101395/estudos1.pdf"><em>Para um Manual de Jornalismo Online</em></a> e depoimentos dos editores da Agência de Notícias do IBGE, que chamam a atenção para a necessidade dos textos conterem todas as informações importantes, mas ao mesmo tempo <strong>serem objetivos e irem direto ao ponto</strong>.</p><p><strong>Ortografia e Gramática:</strong> O Coh-Metrix-Port não oferece uma métrica que analisa a ocorrência de erros gramaticais e ortográficos, seria necessário analisar as APIs disponíveis para isso em outras plataformas. Por vezes, algumas delas oferecem sugestões de correções para esses tipos de erros e dicionários de sinônimos, recursos que poderiam ser incorporados no programa do projeto também.</p><p>Para analisar esse índice, então, a métrica utilizada seria a quantidade de erros gramaticais e ortográficos pelo total de palavras do texto. Nesse caso, a relação entre o valor numérico e a dificuldade de leitura é diretamente proporcional.</p><p>A inclusão de um revisor de problemas ortográficos e gramaticais foi definida considerando que essa é <strong>uma das partes mais importantes da revisão de um texto</strong>, e já é bem comum a inclusão de recursos automáticos desse tipo de revisão em processadores de texto, como no Word.</p><p>Embora todas as métricas da Coh-Metrix representem uma dimensão linguística e cognitiva relevantes para se investigar o processo de leitura, é importante lembrar que<strong> limitar a quantidade de dados apresentados</strong> faz parte da proposta do projeto de <strong>apresentar informações de forma simples e de fácil compreensão</strong>: com dados de mais de 20 métricas, o usuário ficaria facilmente sobrecarregado.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*BT3f_nD1xQHwj7Ui_IAiSA.png" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*S_CA3JMwhl40bOinNi4tOw.png" /></figure><h4><strong>Marcações</strong></h4><p>As marcações destacam no texto palavras, frases e/ou parágrafos que <strong>mais interferem para aumentar o grau de dificuldade dos indicadores gerais</strong>. Elas são divididas em grupos pelos mesmos indicadores, e inicialmente estavam agrupadas dessa maneira:</p><p><strong>Leiturabilidade:</strong></p><ul><li>Parágrafos longos (com 400 caracteres)</li><li>Frases longas (com 25 palavras ou mais)</li><li>Palavras longas (com 6 sílabas ou mais)</li><li>Título longo (com mais de 80 caracteres)</li></ul><p><strong>Quantidade de informação:</strong></p><ul><li>Parágrafos densos (Parágrafos com índice cw_words 0,6 ou maior)</li></ul><p><strong>Vocabulário:</strong></p><ul><li>Vocabulário incomum (palavras com índice cw_freq menor que 10000)</li></ul><p><strong>Ortografia e Gramática:</strong></p><ul><li>Principais erros de ortografia e gramática, conforme indicados pela API a ser escolhida.</li></ul><p>Os valores foram estabelecidos a partir de referências encontradas na internet, ou então pela observação da forma de textos jornalísticos e textos do portal de notícias do IBGE. De qualquer maneira, esses valores foram importantes para serem usados como critério no protótipo, mas ainda precisam ser melhor estudados.</p><h3>Wireframes</h3><p>Após elaboradas as definições projetuais, começaram a ser desenvolvidos <em>wireframes</em>. <em>Wireframes</em> são esboços ou rascunhos das telas do aplicativo usados para<strong> organizar seus elementos e a arquitetura da informação</strong> (<a href="https://medium.com/aela/4-princ%C3%ADpios-fundamentais-do-design-centrado-nousu%C3%A1rio-e87d932c669e">EDITORIAL AELA.IO, 2019</a>).</p><blockquote>“Os wireframes, possuem dois objetivos principais:</blockquote><blockquote>• Auxiliar o UX Designer na diagramação e aplicação da identidade visual;</blockquote><blockquote>• Alinhar a expectativa do cliente quanto ao que o usuário quer e ao projeto criado.” (EDITORIAL AELA.IO, 2019).</blockquote><p><strong>Seguem abaixo as imagens produzidas.</strong> Mantive o mesmo modelo de três colunas do Grammarly que pareceu funcionar bem Da esquerda para direita: o espaço do texto, no meio explicações sobre as marcações e na direita estão os gráficos e os resultados das métricas. Vale lembrar que a categoria de ortografia e gramática só foi incluída depois.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*8m0E80qq36Qswoj_74DuUw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*u77CHtb4sU_dz3OlsYp8oA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*TiplrJUVSOralKcVRnBPmQ.jpeg" /><figcaption>Tela inicial; Inserir o arquivo; Primeira tela depois de inserido o arquivo</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*jEa8ZkBtB4hI8f-TSpvpXg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*OkOZc5edaSVyhSb1RURztQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*lAUS4rTqFm0FlVmKe0GFFg.jpeg" /><figcaption>Explicações das marcações podem ser abertas para mais detalhes; Funcionalidade de ocultar as marcações; Alterou-se o título, então o programa atualizou também seus valores e marcações</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*n-a6LKgjVbnGXffnEdWOaA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*1UABDcTN4R0o7os66SgvQA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*TRagj195h4PWIn-CJz7FzQ.jpeg" /><figcaption>Explicação sobre os indicadores e como eles são calculados; Tela de confirmação para caso o usuário tente salvar um arquivo que ainda apresente valores “ruins” nos indicadores; Salvar o arquivo</figcaption></figure><p>Geralmente os <em>wireframes</em> não utilizam cores, mas nesse caso seu uso pareceu necessário para <strong>demonstrar a ideia de marcações pertencentes a categorias diferentes</strong>. A notícia utilizada no exemplo foi retirada do site da Agência de Notícias do IBGE (2021).</p><p>Sobre a organização da informação das interfaces, ela se baseou em outros softwares similares de processamento de texto. Como vimos na primeira parte, <strong>o público do projeto está acostumado a usar softwares de processamento de texto</strong>, como o Microsoft Word, então, seguindo o princípio da familiaridade e padrões de interface, colocar as ferramentas em posições parecidas e utilizar ícones semelhantes poderiam <strong>ajudar a facilitar o uso e o entendimento da interface para novos usuários</strong>.</p><p>Além disso, outra preocupação era <strong>colocar todas as informações numa mesma página</strong>, aceitando no máximo modais, em casos especiais. A importância disso era para que o usuário pudesse comparar as informações de forma rápida e com facilidade, tendo uma visão geral dos dados das métricas e do texto.</p><p>Os <em>wireframes</em> foram utilizados no desenvolvimento do projeto como uma forma de começar a esboçar as ideias para as interfaces do programa e expô-las para representantes do público-alvo, no caso dois jornalistas do IBGE, de maneira a <strong>mostrar, com imagens, a solução proposta e coletar<em> feedbacks</em></strong><em>.</em> A ideia de mostrar para eles uma versão de baixa resolução, com aparência de rascunho, teve o intuito de deixá-los mais à vontade para criticar e propor mudanças.</p><p>Ambos os jornalistas <strong>pareceram entender bem a função do software e gostaram bastante</strong>, no entanto, esses foram alguns comentários que eles fizeram:</p><ul><li><strong>Muitas informações:</strong></li></ul><p>Um dos jornalistas comentou que, assim que ele abriu as primeiras telas ele se sentiu <strong>bombardeado de informações</strong>. No entanto, o outro falou que isso não era problema, porque outros softwares de processamento de texto que eles usam também são assim, <strong>então eles já estão acostumados.</strong></p><p>Além disso, apesar de terem comentado da quantidade de informações, <strong>ambos conseguiram interpretar as informações e entender o que estava acontecendo na tela muito bem</strong>. Um começou analisando a coluna da direita, com os gráficos, já o outro foi primeiro para a coluna com o texto. Apesar dessa diferença, ela não pareceu muito significativa em relação a cumprir a tarefa de analisar um texto com métricas quantitativas, então o ideal pareceu ser justamente deixar o usuário ter a liberdade de começar o processo por onde achasse melhor.</p><ul><li><strong>Dúvidas sobre como os indicadores são medidos:</strong></li></ul><p>Eles tiveram dúvidas sobre como os indicadores eram medidos. Nesse ponto eles ainda não tinham visto <strong>a tela que mostra onde ficaria o texto com essas explicações</strong>. Depois de mostrá-las para eles, eles acharam que era uma solução razoável, o que só reforça a importância desse recurso e dele estar bem-sinalizadas</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*n-a6LKgjVbnGXffnEdWOaA.jpeg" /><figcaption>Explicação sobre os indicadores e como eles são calculados</figcaption></figure><p>Um nota interessante sobre essa tela é que <strong>ela usa um modal de uma forma diferente da original</strong>. <a href="https://www.nngroup.com/articles/modal-nonmodal-dialog/">Fessenden (2017)</a> diz que a função original dos diálogos modais era alertar as pessoas para casos que precisassem da ação imediata do usuário, como consertar erros. Nesse sentido, os <em>modals</em> são muito úteis para chamar a atenção do usuário. Alguns dos problemas que esse recurso pode trazer em outros contextos é interromper o fluxo de trabalho, bloquear ou tampar o restante do conteúdo, etc.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*1UABDcTN4R0o7os66SgvQA.jpeg" /><figcaption>Exemplo de outra tela do projeto com modal, mas que dessa vez cumpre a função original de servir como alerta e chamar a atenção do usuário</figcaption></figure><p>O interessante é que, para o usuário acessar essas informações sobre o que os indicadores avaliam em outros programas que já existem, como o Hemingway App e o Grammarly, se faz necessário abrir e acessar outras páginas com as informações detalhadas. Os problemas mencionados de não conseguir visualizar o conteúdo e interromper o fluxo de trabalho, na verdade,<strong> são muito maiores quando se abre uma nova janela do que ao usar um <em>modal</em></strong>.</p><p>No facileitor, esses <em>modals</em>, na verdade, são uma forma de criar <strong>um ambiente de concentração para a leitura</strong> de informações um pouco mais complexas. Porém, ao mesmo tempo, eles permitem uma visualização parcial da área de trabalho para o usuário não perder totalmente a noção do que ele estava fazendo e facilitar para que ele estabeleça a relação entre o conteúdo do texto que está lendo com os recursos e funcionalidades do programa.</p><ul><li><strong>Dificuldade de interpretação dos gráficos e marcações:</strong></li></ul><p>Voltando aos wireframes, um dos jornalistas comentou que teve um pouco de dificuldade de avaliar que gráficos estavam mostrando um resultado positivo ou não. Segundo ele, <strong>os gráficos deveriam ser todos preenchidos da esquerda para direita</strong>, sendo à esquerda melhor, mais fácil e à direita pior, mais difícil, o que estaria mais de acordo com o formato de um velocímetro do primeiro gráfico.</p><p>Outra questão importante, é que, em algumas das métricas escolhidas, resultados mais baixos indicavam uma leitura melhor e mais fácil, enquanto em outras eram o contrário: resultados mais baixos indicam uma leitura mais difícil. Por isso, também <strong>foi necessário fazer adaptações e inverter valores para unificar esse comportamento</strong>.</p><p>Continuando sobre os pontos que os jornalistas levantaram sobre os <em>wireframes</em>, eles também ficaram confusos sobre quais os reais valores que estavam sendo apresentados nos gráficos, justamente por eles não apresentarem números. Minha teoria era a de que somente a proporção do preenchimento da barra lhes daria uma noção dos valores, e que isso só já seria suficiente, mas <strong>eles expressaram vontade de ter mais detalhes e precisão na exposição dos resultados</strong>.</p><p>Além disso, eles tiveram dificuldade de relacionar as marcações coloridas no texto com as categorias Leiturabilidade, Ortografia e Distribuição do Conteúdo (nome antigo de quantidade de informação). Isso provavelmente ocorreu porque essa distinção é indicada pelas cores e<strong> há muita informação cromática acontecendo ao mesmo tempo</strong>, porque eu tinha decidido incluir tons vermelhos e alaranjados também para expressar a intensidade dos valores das métricas, isto é, o quanto elas estão atrapalhando a leitura.</p><p>Obviamente usar dois sistemas cromáticos ao mesmo tempo não estava dando certo, então eu resolvi manter a distinção das categorias por cor, <strong>e repensar como eu poderia fazer para indicar intensidade nos gráficos de outra forma</strong>.</p><p>Outra dificuldade que eles tiveram também foi perceber que os cards da coluna do meio (com as explicações sobre os problemas apontados no texto) estavam relacionados com as marcações. Eles indicaram que isso era provavelmente porque<strong> eles estavam longe do campo do texto</strong>, tanto no sentido horizontal (porque elas estão coladas na coluna dos gráficos, e não do texto), quanto vertical (porque elas estão todas no topo da página, mesmo se uma delas tenha ocorrido mais abaixo no texto)</p><p>Esses foram então os principais comentários, cheguei a redesenhar alguns <em>wireframes</em> para atender algumas das questões que eles mencionaram, enquanto outras eu deixei para explorar melhor quando estivesse desenvolvendo a interface final.</p><h3><strong>A Interface e seus Componentes</strong></h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*jvR90qpAdSm5H3py3S-rig.jpeg" /><figcaption>Tela Principal</figcaption></figure><p>O <strong>Conceito Gráfico</strong> para as interfaces foi baseado<strong> nas características da situação e tipo de texto com o qual o programa vai trabalhar</strong>. <a href="https://www.nngroup.com/articles/tone-of-voice-dimensions/">Moran (2016)</a> sugere pensar no tom de voz do texto em algumas dimensões de polos opostos, entre eles: sério/engraçado; formal/casual.</p><p>A partir das pesquisas decidi que o conceito da interface deveria pender para os <strong>polos sério e casual</strong>. Sério por causa do conteúdo das notícias e por ser pensado para o ambiente de trabalho. Casual no sentido de que, nas notícias da Agência do IBGE, se busca substituir a formalidade da estrutura de um relatório técnico ou de um <em>release</em> para priorizar uma linguagem mais próxima e acessível ao público.</p><p>Em termos gráficos, o quesito de seriedade foi traduzido com uma <strong>paleta de cores neutras com tons de cinza azulados</strong> para as funções gerais do programa e <strong>uma família tipográfica neutra sem-serifa</strong>. O uso de elementos neutros na interface de trabalho também tem a função de não desviar a atenção do usuário para que ele mantenha o foco no seu trabalho e no texto.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/363/1*ja7uGBneRwYhr2zJsyHZBA.jpeg" /><figcaption>Paleta de cores dos textos funções gerais do programa</figcaption></figure><p>Para diminuir a formalidade, se decidiu <strong>arredondar levemente os cantos dos retângulos</strong> e optou-se por uma <strong>paleta de cores de tons vivos e pastéis para as marcações, medidores e os índices</strong>. O uso das cores vivas também é importante para chamar a atenção do usuário para esses elementos. Já a opção por tons claros e pouco saturados, facilita a leitura no caso das marcações, uma vez que elas ainda permitem níveis adequados de contraste entre o texto e o fundo.</p><p>Sobre essa paleta de cores ainda, é importante destacar que elas são <strong>duplas de cores opostas</strong>. Essa característica ajuda não só a trazer harmonia visual, mas também a facilitar a diferenciação dos indicadores</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/256/1*_fUddTL4BxrIp7PMG-vphQ.jpeg" /><figcaption>Paleta de cores das marcações, medidores e índices</figcaption></figure><p>Outra característica que contribui para o conceito de casualidade é o <strong>alinhamento das marcações </strong>em relação aos textos, que não é perfeito, mas cada uma <strong>é levemente deslocada seguindo um padrão</strong>. O alinhamento das marcações foi pensado de forma a ajudar o usuário a visualizar que aquela área tem mais de um tipo de marcação, no caso de superposições.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LMV2BvfvhMHucRWBjB0S_A.png" /><figcaption>Exemplo de frase com várias marcações sobrepostas</figcaption></figure><p>É importante lembrar que o exemplo da Imagem é um caso extremo com todas as marcações se sobrepondo e esse dificilmente será um cenário comum.</p><p>As marcações são retângulos com bordas arredondadas e certo nível de transparência. A transparência é importante pois há situações em que uma marcação pode sobrepor a outra (por exemplo, uma frase longa com palavras difíceis). Por isso, <strong>a ordem de sobreposição sempre é: roxo (Quantidade de Informação), azul (Leiturabilidade), laranja (Ortografia e Gramática) e amarelo (Vocabulário)</strong>. Organizou-se dessa forma pois as marcações de Quantidade de Informação e Leiturabilidade são as que cobrem uma área maior contínua de texto (até um parágrafo inteiro), por isso seria melhor que elas ficassem no fundo.</p><p>Além disso, as cores de cada índice foram pensadas de forma que <strong>as mais claras (amarelo, laranja) ficassem por cima</strong> e não fossem obscurecidas pelas cores mais escuras. No entanto, quando o usuário seleciona para visualizar a explicação de uma marcação específica, ela fica por cima de todas as outras, independentemente de sua cor e categoria.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Xs0jDGIGZemhf_RbKCvTZg.png" /><figcaption>Exemplo de frase com várias marcações sobrepostas</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*v34yzjgtfEnMqPB_WNJtFg.png" /><figcaption>Exemplo de frase com várias marcações sobrepostas quando se seleciona a explicação da marcação roxa. Além de vir para o primeiro plano ela também tem sua opacidade aumentada</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*NhFnLKZAbwkgHZDcVeebHg.jpeg" /><figcaption>Conjunto com os principais símbolos, botões e áreas interativas e seus estados</figcaption></figure><p>Mesmo que o programa do projeto tenha sido pensado para ser usado em desktop e não se atenha a detalhes como sua configuração em tamanhos de telas pequenas, como tablets e celulares, ainda assim, há uma grande variação entre os tamanhos e resoluções de telas. Para o projeto, trabalhou-se com a variação de tamanho de 1024 x 640 a 1920 x 1080, porque esses são os valores máximos e mínimos para telas grandes citados pela <a href="https://docs.microsoft.com/pt-br/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design">Microsoft Brasil (2020)</a>. Mesmo assim ainda existem computadores com telas maiores, de 5120 x 2880, por exemplo.</p><p>Ao pensar em como os elementos são escalados de acordo com as dimensões da tela, é importante ressaltar que alguns devem mudar de tamanho para se adequarem à nova área disponível, e outros não. De acordo com WATHAN e SCHROGER no livro <em>Refactoring UI </em>(2018), às vezes faz mais sentido deixar alguns elementos fixos e ter mais espaço para expandir o conteúdo principal. Por isso é necessário pensar no tamanho máximo que cada componente se expande.</p><blockquote>“Espalhar as coisas ou torná-las desnecessariamente largas torna a interface mais difícil de interpretar, enquanto um pouco de espaço extra nas bordas não faz mal a ninguém.” (WATHAN e SCHROGER, 2018).</blockquote><p>O uso de 12 colunas e a referência de tamanho de 1040px como valor máximo para expansão do conteúdo foi definida a partir das recomendações de comportamento de grid das <a href="https://material.io/design/layout/understanding- layout.html?fbclid=IwAR0f3lKuBIRi91Uzl3k3UcWDIuATXMFzEBQ1eE41tzjiV4mWFFO 1AVmEzGU#layout-anatomy"><em>guidelines</em> de <em>Material Design</em></a>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3OWSKESg-DfIiY9T8KV6EA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*IG2RTQA-lXkdhkghh2LtBA.jpeg" /><figcaption>Tela 1024 x 640; Tela 1920 x 1080</figcaption></figure><h3>Nome e Logo</h3><blockquote><strong>Fácil + Leitor = Facileitor</strong></blockquote><p>Fácil e leitor são palavras-chave quando se fala sobre leiturabilidade e as funções do programa, que buscam facilitar a leitura, pensando no público que vai ler o texto (o leitor).</p><p>Para o logotipo, foram testadas várias opções, primeiro em preto e branco, e depois com cores. <strong>Era importante que o logotipo transmitisse a ideia do programa e sua funcionalidade</strong>. No final, a solução escolhida destaca a palavra “leitor”, imitando o recurso de marcação do programa.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*ODNeFtjRq2mgg557LXQkPw.jpeg" /><figcaption>Logo aplicado no canto superior esquerdo</figcaption></figure><h3>Gráficos</h3><p>Para os gráficos, eu escolhi <strong>dar destaque ao índice de leiturabilidade</strong>, visto que ele é o tema do projeto e resume bem a questão “o texto está fácil o suficiente para ser lido pelo meu público?”. Por isso, seu formato é maior e com formato diferente: um velocímetro.</p><blockquote>“O gráfico de velocímetro é um bom recurso para ser utilizado no a fim de demonstrar uma ideia de progressão.” (NUNES 2019).</blockquote><p>Para os outros gráficos, a princípio tentou-se usar o modelo de barra utilizado tanto pelo Grammarly<em> </em>quanto pelo Hemingway App, como exemplos de programas similares que deram certo. Mais tarde <strong>decidiu-se utilizar barras curvas </strong>de forma a se assemelharem em formato com o velocímetro e criarem <strong>uma unidade gráfica </strong>entre todos os gráficos.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/510/1*gL1InTE_vUM2eW8jxKwfqw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/511/1*wsZfSCYpOv4bKptDgmsHXQ.jpeg" /><figcaption>Formato dos gráficos antes e depois</figcaption></figure><p>Os gráficos são divididos em 4 áreas, os valores determinados pelas tabelas abaixo. Em cada índice essas áreas recebem nomes diferentes, como foi estabelecido nas tabelas, na sessão<em> Wireframes</em>, desse estudo de caso. De forma geral, vão todas do nível de leitura mais fácil para o mais difícil. <strong>A divisão do medidor em mais de duas partes é importante para evitar a polarização</strong> da avaliação do texto entre fácil e difícil, e expor a questão em forma de espectro de facilidade/dificuldade.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/800/1*Ri2H838qbpBJkOdoR7Iurg.jpeg" /></figure><p>A ideia original era usar tons de vermelho e laranja nos gráficos para chamar a atenção do usuário para as métricas que estivessem mostrando valores mais altos. No entanto, como vimos nos <em>wireframes</em>, o uso de dois sistemas de cores não funcionava muito bem, então eu resolvi <strong>fazer várias versões experimentando outras variações por cor, mas também outros elementos gráficos</strong>.</p><p>Baseado no livro <em>Graphic Design the New Basics</em> de Ellen Lupton e Jennifer Cole Phillps (2009). Os elementos escolhidos foram <strong>a cor</strong> (mais quente quanto maior a dificuldade), <strong>o contraste</strong> (maior saturação quanto maior a dificuldade) e<strong> o tamanho</strong> (maior quanto maior a dificuldade).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*oSLJ5pAqgWCONIG4FXSMcg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*VHZxOKqRG9FAAy3ggSKk_w.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*_YnPJK4rqsvVLlJynjKOTA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/604/1*wcWPohXOkMXQzfh6O4Or5A.jpeg" /></figure><p>Depois de inserir as diferentes versões nas interfaces, optou-se por <strong>seguir com os que apresentavam somente a variação de tamanho</strong>. O motivo foi o fato deles cumprirem bem sua função, além de que os outros, por apresentarem variações tonalidade, deixavam a interface mais caótica e aumentavam a sensação inicial que um dos jornalistas tinha mencionado, de se sentir bombardeado de várias informações ao mesmo tempo.</p><h3>Teste de Usabilidade</h3><p>Ao final, <strong>para testar se as informações e as funções do programa estavam claras</strong> foi feito um protótipo interativo e, com ele, um teste de usabilidade.</p><p>Para entender melhor como funciona o protótipo assista o vídeo de demonstração ou acesse o link: <a href="https://xd.adobe.com/view/7225afb5-d079-4a90-8f56-786f051f060c-2776/?fullscreen&amp;hints=off">https://xd.adobe.com/view/7225afb5-d079-4a90-8f56-786f051f060c-2776/?fullscreen&amp;hints=off</a></p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FwouhJx7YthM%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DwouhJx7YthM&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FwouhJx7YthM%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0" scrolling="no"><a href="https://medium.com/media/d4005dee4d2fc48195ce568ae71d77d0/href">https://medium.com/media/d4005dee4d2fc48195ce568ae71d77d0/href</a></iframe><p>O teste de usabilidade foi realizado individualmente com <strong>5 jornalistas do IBGE</strong> via chamada de vídeo com compartilhamento de tela.</p><blockquote>“Jakob Nielsen defendeu certa vez que com apenas 5 usuários na amostra seria possível identificar 80% (ou mais) dos problemas críticos de uma interface.” (NIELSEN AGNER, 2018).</blockquote><p>Algumas das tarefas que eu pedi para eles realizarem foram:</p><ul><li><strong>Inserir um texto no programa</strong> (o texto foi enviado em um documento separado para eles)</li><li><strong>Interpretar os gráficos</strong>: dizer que cada um deles está avaliando e como eles chegaram nesses resultados</li><li><strong>Desativar as marcações no texto</strong> (todas de uma vez, individualmente e por categoria)</li><li><strong>Guardar o arquivo</strong></li></ul><p><strong>Para inserir o texto no programa</strong>, o jornalista poderia copiá-lo e colá-lo na área de texto, ou clicar na opção “abrir” no canto superior e selecionar o documento. No entanto, todos os participantes foram pelo caminho de copiar e colar.</p><p><strong>Para interpretar os gráficos</strong>, eles não abriram a janela com as explicações. Na verdade, dois deles nem encontraram essa opção, o que mostra que ela deveria estar melhor sinalizada, com algum ícone que indicasse que aquela área tinha alguma interação, talvez. Mas de maneira geral, eles interpretaram bem o significado dos gráficos só pelo nome dos indicadores e demais textos na coluna.</p><p><strong>Sobre o texto</strong>, a única reclamação foi o termo “palavras-chave”. Eles interpretam palavras-chaves como as palavras mais importantes do texto, que indicam seu conteúdo, e não as palavras que mais se repetem no texto, como os algoritmos do Google fazem. Portanto, depois <strong>eu alterei “Palavras-chaves” para “Palavras que mais usadas”</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ZTLWZFKTvbgg2HSDkgXxWw.jpeg" /><figcaption>Palavras-chave: ANTES / DEPOIS</figcaption></figure><p>Além disso, outro problema com as explicações foi que alguns dos jornalistas não perceberam que elas eram roláveis, então depois eu <strong>fiz alterações na altura da caixa</strong> (deixando um espaço mais confortável para a leitura) e tomei cuidado para <strong>posicionar as últimas linhas do texto cortadas ou muito próximas da margem</strong>, de modo a indicar que há mais conteúdo embaixo</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XOO-YY5qeWZIArSad9Vk4g.jpeg" /><figcaption>Caixa das explicações: ANTES / DEPOIS</figcaption></figure><p>Agora,<strong> quando requisitados a esconderem as marcações</strong>, todos conseguiram encontrar o botão correto (o símbolo do olhinho) na primeira ou segunda tentativa. Os que conseguiram na segunda tentativa clicaram primeiro em cima do texto “ocultar marcações”, e alguns reclamaram também do tamanho da área de clique. Para resolver essa questão, então, eu aumentei a área de clique fiz ela se expandir para cima do texto também (não está mais limitada só ao símbolo do olho).</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/400/1*WZWDq2II-IHEWWG3HMrl5w.jpeg" /><figcaption>Opções de ocultar marcações</figcaption></figure><p>Depois, quando eles foram <strong>ocultar cada marcação individualmente</strong>, eu percebi que os<em> cards</em> se deslocava horizontalmente no estado <em>hover</em>, e isso acabava prejudicando os jornalistas na hora de clicar no símbolo de ocultar, pois eles miravam o mouse no lugar do botão, e quando iam clicar ele tinha se movido de lugar. Tive que, então, <strong>mudar as animações dos estados<em> hover</em>, para uma que não deslocasse os <em>cards</em></strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zpJVV90JqtSTTs3BqWZgTQ.jpeg" /><figcaption>Estado hover: ANTES / DEPOIS</figcaption></figure><p>Outro fator que dificultou a visualização foi a<strong> </strong>sobreposição de marcações azuis. Para diminuir esse problema, foi necessário repensar as categorias pertencentes a cada tipo de marcação de modo a <strong>evitar ao máximo a sobreposição de marcações da mesma cor</strong>.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*i9QvMlBN1DnCzKhz9yrnEQ.jpeg" /><figcaption>Excesso de superposições azuis</figcaption></figure><p><strong>A nova configuração ficou assim:</strong></p><p><strong>Leiturabilidade:</strong></p><ul><li>Frases longas (com 25 palavras ou mais)</li><li>Título longo (com mais de 80 caracteres)</li></ul><p><strong>Quantidade de informação:</strong></p><ul><li>Parágrafos densos (Parágrafos com índice cw_words 0,6 ou maior)</li><li>Parágrafos longos (com 400 caracteres)</li></ul><p><strong>Vocabulário:</strong></p><ul><li>Palavras difíceis (palavras com 6 sílabas ou mais e com índice cw_freq menor que 10000)</li></ul><p>Com esse novo sistema, <strong>diminuirão as situações de superposição de marcações de mesma cor</strong>. Restam ainda as circunstâncias de erros ortográficos dentro de frases com erros gramaticais (superposição laranja/laranja) e parágrafos longos e densos (roxo/roxo). Esse último caso, porém, não deverá ser tão problemático, pois independente das circunstâncias, as marcações roxas sempre ocupam um parágrafo inteiro, é muito diferente da situação anterior em que era necessário identificar uma frase ou palavra azul dentro de uma área azul maior.</p><p>Cabe-se também refletir mais sobre a inclusão da métrica cw_words<em> </em>no programa, que mede a concentração de informação no texto, levando em consideração a proporção de palavras de conteúdo. Sobre esse índice, pelo menos 2 jornalistas comentaram que textos jornalísticos têm mesmo muitas informações e isso não é um problema, é parte do estilo desse tipo de texto. Uma sugestão foi substituir essa métrica por uma outra que meça somente a proporção de adjetivos e advérbios, pois esses sim devem ser evitados em textos jornalísticos. No entanto, essa mudança ainda não foi aplicada.</p><p>Finalmente <strong>sobre a tarefa de guardar o documento</strong>, todos foram na opção de salvar ou salvar como, no canto superior da tela. Nenhum deles pensou na possibilidade de copiar o texto todo e jogar de volta no Word e salvar lá, apesar de isso também poder ser feito.</p><p>Além disso, um jornalista disse que achou o tamanho do título e o espaço entre ele e o resto do texto muito grandes, e outro disse que achou o tamanho da fonte pequeno, medidas que também foram revistas.</p><p>Apesar desses pontos,<strong> a resposta dos jornalistas foi muito positiva</strong>. Quatro dos cinco jornalistas confirmaram que essa ferramenta poderia ajudar eles no seu trabalho. O outro criticou a quantidade de tempo que o uso da ferramenta demandaria devido a quantidade excessiva de marcações, o que pode ter ocorrido na minha tentativa de tentar encaixar todas as variantes de marcações em um texto pequeno.</p><p>Para corrigir esse problema, como ele propôs, se poderia rever os limites estabelecidos para os valores das marcações ou permitir que o usuário possa regular o grau de rigor com que elas são feitas, de forma similar ao Grammarly. De acordo com o jornalista, essa função é importante de ser incluída em versões futuras, quando se pensar em expandir o uso da ferramenta para outros públicos e tipos de texto.</p><p>Ainda sobre o uso da ferramenta no trabalho, Dois dos participantes foram mais específicos e disseram que <strong>a usariam assim que recebessem ou finalizassem o texto</strong>, de forma a identificar logo de partida os principais problemas e depois partiriam para uma revisão mais detalhada qualitativa. Um usuário já falou o contrário, <strong>que faria primeiro uma revisão qualitativa e só ao final recorreria a essa ferramenta só depois para verificar se ele não deixou escapar nenhum problema</strong>.</p><p>E foi assim que as telas ficaram com as alterações depois do teste de usabilidade:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*8RDXBxr7ZH9auesV7FWJIQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*So_XqOPtlmILkr14kBt9nA.jpeg" /><figcaption>Tela inicial com menu de opções ao se clicar com o botão direito do mouse / Inserir o arquivo</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*R5Nh4gTTWGPmWu43eO_zpQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*jvR90qpAdSm5H3py3S-rig.jpeg" /><figcaption>Tela de carregamento / Primeira tela depois de inserido o arquivo</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*GNeS_S4k4aTcGnBdnPQ8nQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*-hh_QvAKuzgYFU0GgkWndg.jpeg" /><figcaption>Opção de ocultar todas as marcações / Opções de ocultar marcações individualmentes</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*In0kyltEcIsjdjxJqqBF9g.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ieYw5OXOqsgZehPcXNYwbA.jpeg" /><figcaption>Menu de opções aberto / Opção de ocultar marcações por categoria</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*YaJk915RvbZJCRXROoPo3g.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*0P38iD6ChkqbQnw8QyUl8w.jpeg" /><figcaption>Explicação sobre uma marcação azul aberta / Explicação sobre uma marcação laranja aberta</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*fr7G9R0h-3XEJuSXxjjHuw.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*3npVU7IvZzVmGfAwQVQt0g.jpeg" /><figcaption>Estado hover do índice de leiturabilidade / Explicação sobre o índice e métrica de Ortografia e Gramática</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Y3iYk4BsVPdniTkcq8Wxsg.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gRcHaPTY91WaiS9Ncqf44g.jpeg" /><figcaption>Explicação sobre a seção Palavras mais usadas / Alerta para quando o usuário atingir o limite máximo recomendado de palavras</figcaption></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*hbkS7Y0X4dTDf-n_7Jw18w.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/605/1*tbOrfRqfgiUNvBKyFrVG3w.jpeg" /><figcaption>Salvar o documento / Salvando…</figcaption></figure><p>É importante lembrar, no entanto, ainda é que elas ainda precisam ser testadas novamente para garantir que as soluções propostas realmente resolveram os problemas de usabilidade encontrados.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=bf5a86060bed" width="1" height="1" alt="">]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Facileitor]]></title>
            <link>https://medium.com/@amandalha/facileitor-9cd8f429fbb3?source=rss-cb3f385b53a2------2</link>
            <guid isPermaLink="false">https://medium.com/p/9cd8f429fbb3</guid>
            <category><![CDATA[estudo-de-caso-ux]]></category>
            <category><![CDATA[ux-design]]></category>
            <category><![CDATA[experiência-do-usuário]]></category>
            <category><![CDATA[ux-case-study]]></category>
            <category><![CDATA[ux-research]]></category>
            <dc:creator><![CDATA[Amanda Carvalho Monteiro]]></dc:creator>
            <pubDate>Mon, 03 Jan 2022 18:10:15 GMT</pubDate>
            <atom:updated>2022-06-27T14:26:43.893Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="Uma tela de computador com um programa aberto. Nela se vê um corpo de texto com marcações amarelas, azuis laranjas e roxas. Ao lado esquerdo da tela de computador está escrito: facileitor, um projeto de design de experiência para melhorar a facilidade de leitura." src="https://cdn-images-1.medium.com/max/1024/1*GAQSRfKMRS7utxXosMg-jg.jpeg" /></figure><h3>Facileitor: Estudo de Caso parte 1</h3><p><strong>Facileitor é um projeto de UX/UI design</strong> que eu desenvolvi no último ano da faculdade (2020/2021) e é sobre programa de desktop que utiliza métricas quantitativas para complementar o processo de avaliação e adaptação do nível de leiturabilidade de textos em português brasileiro.</p><h4><strong>Sumário (parte 1):</strong></h4><ul><li><a href="#877d">Introdução</a></li><li><a href="#82e5">Desk-Research</a></li><li><a href="#4587">Fórmulas de Leiturabilidade</a></li><li><a href="#a770">Formulários e Pesquisa Quantitativa</a></li><li><a href="#52e8">Público-alvo, Entrevistas e Pesquisa Qualitativa</a></li><li><a href="#8dd9">Análise Sincrônica</a></li><li><a href="#3f9c">UX Canvas</a></li><li><a href="#7a7c">Conclusão da parte 1</a></li></ul><h3>Introdução</h3><p>A ideia para o projeto surgiu a partir da minha curiosidade sobre a forma que as pessoas leem e percebem a leitura. Mais especificamente, eu estava intrigada por como eu tinha tanta facilidade para ler alguns livros, enquanto outros podiam me demandar horas e horas para conseguir terminar de ler uma página. Então, a fim de encontrar uma oportunidade de projeto, eu recorri a ferramentas de pesquisa para investigar até que ponto esse fenômeno abrangia outras pessoas, quais características o influenciavam e como profissionais de texto lidam com isso atualmente.</p><p><strong>Este relato foi dividido em duas partes:</strong> A primeira (essa aqui) trata das pesquisas iniciais; o processo de <em>discovery</em> e análise de outras soluções similares no mercado. Na segunda abordarei as questões do processo de geração de ideias, criação e testes.</p><h3>Desk-Research</h3><p>O objetivo dessa primeira pesquisa era juntar bibliografia e entender o que já foi descoberto dentro do campo da psicolinguística sobre a forma como lemos e quais podem ser os principais aspectos que caracterizam o nível de dificuldade de um texto. Essa etapa foi importante também para elaborar perguntas para profissionais da área, em entrevistas posteriores.</p><p>Foi com essa pesquisa que eu encontrei o conceito de <strong>leiturabilidade</strong>, que trata justamente da questão que eu queria abordar:</p><blockquote><strong>Leiturabilidade pode ser definida como “a facilidade com que um texto pode ser entendido ou compreendido”</strong> (TINKER; MILES, 1963 apud TILLMAN; HAGBER., 2014)</blockquote><p>Embora o meu objetivo fosse abordar a questão dentro do contexto brasileiro com textos em português (BR), a maior parte dos estudos dessa área exploram esse assunto baseados na língua inglesa. Inclusive, a principal referência que eu usei sobre leiturabilidade foi um <a href="http://www.corestandards.org/assets/Appendix_A.pdf">manual da <em>Common Core State Standarts</em></a>, que estabelece parâmetros para avaliar a leiturabilidade baseado nos anos escolares americanos. Para tal, sua recomendação é <strong>usar fórmulas de leiturabilidade, e posteriormente verificar o resultado com uma análise qualitativa.</strong></p><h3>Fórmulas de Leiturabilidade</h3><p><strong>As fórmulas de leiturabilidade avaliam características quantitativas do texto</strong>, tais como quantidades de palavras, frases e sílabas (ou caracteres), considerando que palavras e frases mais longas cansam e dificultam a leitura.</p><p>As fórmulas de leiturabilidade vem sendo desenvolvidas desde a década de 1920 e hoje são usadas principalmente com o auxílio de computadores. São uma maneira rápida de se analisar um texto e estabelecer metas com resultados tangíveis.</p><blockquote><strong>248,835 [-1,015 (palavras/frases) — 84,6 (sílabas/palavras) — 21,43]</strong> (Exemplo de fórmula adaptado para o português)</blockquote><p>Alguns estudos interessantes sobre o assunto:</p><ul><li>Nos anos 1940 foram <a href="http://en.copian.ca/library/research/readab/31.htm">publicados vários estudos nos EUA</a> mostrando como <strong>pequenas mudanças nos níveis de leiturabilidade poderiam aumentar a leitura de artigos de jornais de alta-circulação</strong>. Por exemplo, Donald Murphy (1947) descobriu um aumento de 45% na leitura de um artigo sobre nylon quando se reduziu o nível de leiturabilidade de 9 anos de estudo para 6.</li><li>Em 2007 <a href="https://www.researchgate.net/publication/237406825_Metodos_de_Avaliacao_de_Apreensibilidade_das_Informacoes_Textuais_uma_Aplicacao_em_Sitios_de_Governo_Eletronico">Stefan Martins e Lucia Filgueiras</a> fizeram uma análise de<strong> textos retirados de sites de governo eletrônico brasileiros</strong> com fórmulas de leiturabilidade. Eles descobriram que a maioria do conteúdo dessa amostra estavam escritos de forma muito mais complexa do que o esperado para o nível médio de escolaridade brasileira.</li></ul><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AsGBZWBZa2ILGG0r7bDV1A.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*i00vD1GFZm_-V-UPtD00yQ.jpeg" /></figure><ul><li>Em 2010 foi lançado o <a href="http://fw.nilc.icmc.usp.br:23380/cohmetrixport">Coh-Metrix-Port</a> que <strong>foi uma iniciativa de adaptar para o português, diversas métricas relacionadas à leiturabilidade</strong>. Mais de 20 dessas métricas são de livre acesso e estão disponíveis como APIs. Isso resolveu o problema de ter de utilizar parâmetros que talvez não fossem apropriados para o contexto brasileiro.</li></ul><figure><img alt="Print da tela do coh-metrix port. Na parte superior há um parágrafo explicando sobre o que é o coh-metrix-port em inglês, e abaixo há uma pedaço de uma tabela com valores numéricos de várias métricas extraídas de um pedaço de texto. Algumas dessas métricas são: coesão referencial, complexidade sintática e conectivos." src="https://cdn-images-1.medium.com/max/1024/1*14yzymHyLcHxjQEI7sP75w.png" /></figure><h3>Formulários e Pesquisa Quantitativa</h3><p>Como é comum em projetos de baixo orçamento, o entendimento do público leitor e da forma como eles leem se deu apenas por meio de fontes secundárias. Porém, me esforcei para entrar em contato com pelo menos alguns professores, revisores, jornalistas e pessoas que trabalham com texto em geral.</p><p>Num primeiro contato, formulei um <strong>questionário</strong> com perguntas abertas (dissertativas) e fechadas (múltipla escolha, com respostas prontas), que foi repassado em redes sociais. Depois de alguns dias, o documento foi respondido por 30 pessoas que trabalham com leitura, revisão, produção textual (ou similares) no Brasil.</p><p>Nessa etapa esperava-se colher respostas o suficiente para reconhecer segmentos mais específicos do público; definir um público-alvo inicial; e <strong>descobrir como as pessoas da amostra avaliam ou trabalham com a questão da leiturabilidade</strong> (mesmo no caso daqueles que nunca ouviram falar no termo). As respostas foram analisadas à mão ou então com o auxílio de ferramentas do <em>Google Forms</em>.</p><p>Respondendo essas perguntas, os resultados da pesquisa indicaram que, <strong>no Brasil a análise da leiturabilidade está, sobretudo, restrita a uma análise qualitativa, </strong>e os fatores avaliados podem variar dependendo da propensão de quem a faz (considerando que mesmo “vocabulário”, o fator mais mencionado, estava presente em menos de 15% das respostas). Além disso,<strong> </strong>os usos e vantagens das aplicações das fórmulas de leiturabilidade e análises quantitativas podem ser mais explorados no contexto brasileiro.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*55GbaX70VOs83erapF2WWA.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cxdGn6zxiPqwY5D6U12Kfg.jpeg" /></figure><h3>Público-alvo, Entrevistas e Pesquisa Qualitativa</h3><p>O público-alvo não estava totalmente claro no início do projeto, pois, como visto na pesquisa quantitativa, uma grande variedade de pessoas e profissões poderia se beneficiar da solução. No entanto, no contexto de um mínimo produto viável, preferiu-se investigar mais a fundo uma situação específica como ponto de partida, para depois, em desdobramentos futuros, expandir as possibilidades e situações de uso.</p><p><strong>O cenário escolhido foi a redação de notícias de sites de instituições públicas</strong>, com foco no estudo do caso da <a href="https://agenciadenoticias.ibge.gov.br/">Agência de Notícias do IBGE</a> (Instituto Brasileiro de Geografia e Estatística), de onde foi possível contatar alguns jornalistas. No início do projeto conseguiu-se estabelecer contato com dois jornalistas da Agência, e, ao final do projeto, foi possível realizar os testes de usabilidade com outros três, um total de cinco pessoas.</p><p>Além da facilidade de contato com os servidores da Agência de Notícias do IBGE, <strong>a escolha desse cenário se deu principalmente pelo fato deles buscarem se comunicar com uma audiência grande diversos níveis de escolaridade</strong>, situação na qual os princípios de leiturabilidade são de grande relevância (KLARE, 1963). Além disso, garantir o acesso e a compreensão desse tipo de texto,<strong> </strong>que trazem dados e explanam a situação atual do país<strong>, é muito importante numa sociedade democrática</strong>.</p><p>Nas primeiras entrevistas com os jornalistas do IBGE, o objetivo era confirmar (ou negar) a importância da leiturabilidade nesse contexto, entender como eles trabalham com ela, e tomar conhecimento de características gerais do público e do fluxo de trabalho na Agência.</p><p>Abaixo seguem algumas das principais características que eu aprendi sobre o público-alvo e seu contexto:</p><p><strong>O objetivo da Agência de Notícias do IBGE é otimizar a comunicação e divulgação dos resultados das pesquisas desenvolvidas pelo Instituto</strong>. Estes são considerados dados sensíveis e têm data e horário para serem postados, de forma que ninguém receba informação privilegiada e todos tenham acesso ao conteúdo ao mesmo tempo.</p><p><strong>No site da Agência são publicados notícias e <em>releases</em></strong>. Os dois buscam simplificar a linguagem do laudo técnico, e costumam ser produzidos ao mesmo tempo. A diferença é que os <em>releases</em> se destinam à comunicação com a imprensa, contendo todas as informações importantes, em ordem de relevância, mas ainda podem manter algumas expressões e linguagem técnica do laudo. <strong>Já as notícias se destinam a população brasileira em geral</strong>. <strong>Nelas há maior preocupação em humanizar os dados e adaptar a linguagem de forma a serem mais bem compreendidas por qualquer pessoa</strong>. Diferente dos <em>releases</em>, as notícias tentam abordar somente um ou mais aspectos relevantes dos resultados da pesquisa.</p><p>Algumas pesquisas são divulgadas todos os meses, como taxa de desemprego e inflação, enquanto outras têm um intervalo de tempo maior. Mesmo assim, segundo os jornalistas entrevistados, <strong>o prazo para produção, revisão e publicação dos <em>releases</em> e notícias em ambos os casos costuma ser confortável</strong>.</p><p>Antes de redigidos os <em>releases</em> e as notícias, a equipe de editores e jornalistas se reúnem com os técnicos que desenvolveram a pesquisa (estatísticos, geólogos, pesquisadores etc.) para discutirem os resultados obtidos e como divulgá-los. Depois disso, dividem-se as tarefas na equipe: redação de <em>release</em>, notícia(s) e produção de gráficos, tabelas e imagens.</p><p>Após redigidos, as notícias e <em>releases</em> são revisados pelos editores que verificam se os dados e a estrutura do texto estão corretos; linguagem e o vocabulário adequados; gramática e questões de português; e se todas as informações presentes são pertinentes ao assunto. Depois os técnicos também verificam se os dados foram expressos de maneira correta.</p><p>No caso de edições, elas podem ser realizadas pelos próprios editores ou discutida com os jornalistas. Quando aprovado, as publicações são colocadas no sistema poucos minutos antes da hora de publicação, onde todos da equipe podem acessá-la e fazer alterações, e depois são colocadas no site.</p><figure><img alt="Esquema do fluxo de trabalho na Agência de Notícias do IBGE" src="https://cdn-images-1.medium.com/max/1024/1*jXwbWiJaWBr83n73iZ5qcQ.jpeg" /></figure><p>Além disso, pode-se dizer que a relevância da leiturabilidade nesse contexto foi confirmada, já que foi constatada<strong> a preocupação dos jornalistas entrevistados com a adequação da linguagem e tornar as informações acessíveis para um público diverso</strong>, principalmente no caso das notícias.</p><h3>Análise Sincrônica</h3><p>Na Análise Sincrônica, buscou-se analisar programas de computador voltados para a escrita e análise de textos, e que levassem em consideração elementos quantitativos. Esse tipo de pesquisa foi importante para conhecer que tipo de ferramentas e abordagens existem dentro do tema proposto. Os programas analisados foram: <strong>Microsoft<em> </em>Word; Hemingway App; Grammarly e<em> </em>Language Tool</strong>.</p><p><strong>O Microsoft<em> </em>Word é um software de processamento de texto</strong>, usado para manipular um documento de texto. O usuário insere o texto por meio da digitação, e o programa fornece ferramentas para copiar, colar, deletar, formatar, entre outras.</p><figure><img alt="Print da tela de um documento do Word. Na imagem destacam-se asa opções de formatação na barra superior, a coluna a esquerda usada para encontrar palavras, e as tela hover com índices de contagem de palavra e sugestões de correções gramaticais." src="https://cdn-images-1.medium.com/max/1024/1*JemRiNZMJleXBEa3LGTzEQ.jpeg" /></figure><p><strong>Já o Hemingway App, o Grammarly e o Language Tool são corretores de estilo</strong> com opções de formatação limitadas, mas que destaca algumas palavras e frases no texto inserido pelo usuário, que podem estar dificultando a leitura do texto. Essas marcações são feitas com cores diferentes, de acordo com as diferentes categorias e critérios de marcação, que podem ser advérbios em excesso, frases muito compridas, entre outros. Esses softwares também podem apresentar sugestões de melhoria do texto e mostrar uma média do nível de leiturabilidade do texto. É importante lembrar que, dentre esses três programas, somente o Language Tool está disponível para a textos em português.</p><figure><img alt="Print da tela de um documento aberto no Hemingway app. No meio há um texto aberto com marcações em destacando algumas frases e palavras do texto em cores diferentes. À direita há uma coluna com informações de nível de leiturabilidade; contagem de palavras; tempo de leitura; e 5 retângulos de cores diferentes explicando que as marcações azuis se referem a advérbios, as verdes a passagens na voz passiva, as roxas a palavras com alternativas mais simples, as amarelas e as vermelhas a frases longas" src="https://cdn-images-1.medium.com/max/1024/1*BP_PFnbUIjYVAnv6955vvQ.jpeg" /></figure><figure><img alt="Print da tela de um documento aberto no Grammarly. Na tela tem 3 colunas de tamanho diferente. A mas larga fica à direita e contempla um corpo de texto com algumas passagens sublinhadas de azul ou vermelho. A coluna do meio é a coluna de alertas e é composta de vários retângulos brancos empilhados, cada um com um ponto no canto esquerdo. Em alguns esse ponto é vermelho e em outros é azul. A última coluna á a mais fina de todas e mostra dados como o nível de leiturabilidade e clareza do texto." src="https://cdn-images-1.medium.com/max/1024/1*xulKAimr61SVDz-ptTrM-Q.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DArS12jiGt11SaGhL-vkjQ.jpeg" /></figure><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*R8KtrwlRmF0wBqbT0xwf2A.jpeg" /></figure><figure><img alt="Print da tela de um texto aberto no Language Tool. O fundo é azul, no meio há um retângulo branco com um parágrafo de texto com marcações em amarelo, vermelho e roxo. À esquerda se escreveu por cima da imagem o significado de cada uma dessas cores: vermelho para ortografia; roxo para estilo e marcas de informalidade e amarelo para gramática, concordância, pontuação, datas e outros." src="https://cdn-images-1.medium.com/max/1024/1*jp6VocQ55zBVA6xmUarUcA.jpeg" /></figure><h3>UX Canvas</h3><p>A partir de todas essas informações, foi elaborada uma visualização no modelo de <a href="https://www.linkedin.com/pulse/j%C3%A1-ouviu-falar-em-ux-canvas-sandyaraperes/?originalSubdomain=pt">UX Canvas</a> para mapear os diversos aspectos que influenciam na experiência do usuário e necessidades do projeto:</p><figure><img alt="Quadro do UX Canvas. No meio há um círculo laranja dentro do qual está escrita a proposta de experiência; acima há um triangulo rosa em que se explica qual o artefato; no canto inferior há um triângulo verde no qual se listam os recursos e pessoas; no lado esquerdo há um triângulo e dois retângulos roxos nos quais se contam quem é o cliente, seus objetivos e os requerimentos. À direita há um triângulo e dois retângulos azuis nos quais se contam quem é o usuário, seus objetivos e cenários de uso" src="https://cdn-images-1.medium.com/max/1024/1*uHJCzaxa9SxEbjl8hqcRug.jpeg" /></figure><h3>Conclusão da parte 1</h3><p>E assim concluímos a etapa das pesquisas iniciais. <strong>Na segunda parte desse artigo abordarei as etapas de criação e testes de usabilidade:</strong> detalhes da interface, rascunhos iniciais, protótipos, etc. Também vou explicar sobre como se deu a definição do artefato, e o preenchimento de outros campos do UX Canvas.</p><p><strong>Diferente da maior parte dos projetos do mercado, não havia uma restrição quanto ao tipo de solução que deveria ser desenvolvida</strong>, eu tive a liberdade de explorar vários caminhos levando em consideração as características do contexto proposto. Na verdade, no início minha intenção era apresentar uma proposta de representação visual, sem trabalhar com interfaces digitais. Isso só veio a ser depois de estudar mais sobre o assunto e o contexto, e reconhecer que a capacidade do computador de promover interação e disponibilizar um feedback instantâneo seria importante para que a solução tivesse uma função prática e pudesse ser incorporada no dia-a-dia dos usuários.</p><p>Porém, mesmo entre as interfaces há várias formas de você expor as informações, propor uma interação ou até uma experiência e é sobre isso que eu vou falo no início da continuação deste artigo. Uma versão mais resumida também pode ser encontrada na minha página do <a href="https://www.behance.net/amandamonteiro3">behance</a>.</p><p><a href="https://medium.com/@amandalha/facileitor-bf5a86060bed">Clique aqui para ir para a parte 2!</a></p><p><a href="https://medium.com/@amandalha/facileitor-bf5a86060bed">Facileitor</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=9cd8f429fbb3" width="1" height="1" alt="">]]></content:encoded>
        </item>
    </channel>
</rss>