Olá, estudante! Tudo bem com você? Em nossa última lição você foi apresentado aos princípios para projeto de interface com o Usuário, onde você pode conhecer as instruções na elaboração de um bom projeto. Nesta lição, continuaremos o assunto, mas agora com os processos pelos quais você deve passar para conseguir aplicar tais princípios.
Para tal, é importante que você considere uma série de etapas e práticas para garantir o desenvolvimento de uma interface eficiente e satisfatória que pode seguir com uma abordagem iterativa e incremental, permitindo a revisão e refinamento contínuo da interface com base em feedbacks e em testes de usabilidade. Etapas como Pesquisa e análise de usuários, para compreensão das necessidades, preferências e características do público-alvo por meio de análises de dados; Prototipagem e design, para criação de protótipos de baixa ou alta fidelidade que representem a aparência e o comportamento da interface são essenciais para criação do projeto e para evitar retrabalhos após a sua implementação. Prepare-se e vamos com tudo para mais uma lição!
No mundo cada vez mais digital em que vivemos, a interface com o usuário, conhecida através do termo inglês como UI (user interface), desempenha um papel fundamental na interação com sistemas e aplicativos. No entanto, nem sempre as interfaces são eficientes e satisfatórias, o que pode resultar em frustração, baixa produtividade e até mesmo no abandono do uso. Felizmente, os processos de projeto da UI surgem como uma solução para resolver essa questão.
Um problema recorrente em muitas interfaces é a ineficiência na interação com o sistema. Isso pode ocorrer de várias maneiras, desde fluxos de trabalho complexos e confusos, até a falta de feedback claro e imediato, o que pode deixá-los perdidos e sem saber como realizar tarefas de forma eficiente, o que impacta negativamente na sua produtividade e satisfação.
Os processos de projeto de UI são essenciais para resolver o problema da ineficiência na interação com o sistema. Por meio de etapas como pesquisas, prototipagem, testes de usabilidade e avaliação contínua, os profissionais técnicos de desenvolvimento de sistemas podem criar interfaces eficientes e satisfatórias. Ao investir nestes processos, as empresas e desenvolvedores podem oferecer uma melhor experiência a quem irá fazer uso do sistema, impulsionando a produtividade, satisfação e sucesso geral de seus sistemas e aplicativos.
Nesta lição você terá um case fictício de uma empresa especializada em produzir softwares para empreendedores com ideias. Para atender as necessidades dos clientes, a empresa EmpreApp desenvolveu um aplicativo de gerenciamento de tarefas com o objetivo de ajudar seus clientes a serem mais organizados e produtivos com suas ideias e rotinas diárias. No entanto, após o lançamento, eles perceberam que muitos destes clientes estavam enfrentando dificuldades na interação com a interface, o que resultava em baixa eficiência no uso do aplicativo e, por consequência, baixo uso.
Para resolver o problema, a EmpreApp decidiu aplicar os processos de projeto da interface. Ela iniciou com uma pesquisa detalhada para entender as necessidades e preferências dos clientes. Através de entrevistas e feedback direto, descobriram que eles estavam enfrentando dificuldades para adicionar e organizar tarefas de maneira eficiente. Após consolidar essas necessidades, a equipe então partiu para a etapa da prototipagem e design iterativo, criando protótipos de alta fidelidade que representam a nova interface do aplicativo.
Os protótipos foram submetidos a testes de usabilidade com os clientes através de cenários realistas, enquanto a equipe observava suas ações e reações. Os testes forneceram mais feedbacks, permitindo que a equipe identificasse as áreas de melhoria e realizasse ajustes no design. Após os testes, a equipe da empresa lançou uma nova versão do aplicativo com a funcionalidade de feedback contínuo, incentivando seus clientes a compartilharem suas experiências e sugestões de melhoria e concluiu que a eficiência do aplicativo aumentou significativamente!
O case sobre a situação que ocorreu com a empresa EmpreApp demonstra como a aplicação dos processos de projeto de interface pode resolver problemas de ineficiência na interação com um sistema. Por meio de uma abordagem estruturada, é possível transformar uma interface “problemática” em uma experiência agradável. Está pronto(a) para compreender melhor sobre esse assunto?
Agora chegou a hora de lhe apresentar os conceitos que sustentam as práticas de projeto da interface com o Usuário, que são etapas, por vezes sólidas e predefinidas, que lhe levará a construir uma interface que transmita toda a ideia de sistema que você deseja transmitir, mas dentro dos padrões de usabilidade e layout profissionais que trarão mais eficiência, confiança e performance.
Descobrir o público-alvo de sua aplicação é primordial para que você consiga estabelecer um design e uma interface em que o usuário consiga se sentir à vontade com o layout e a forma de interação. Para isso, antes, você deverá explicar a ele a importância de realizar pesquisas e análises para compreender suas necessidades, expectativas e características. Você poderá discutir sobre métodos de coleta de dados, como entrevistas, questionários e observações, mas o primordial, além do entendimento, é deixar claro a relevância de obter suas percepções.
Você não pode se esquecer que toda a ideia de criação de uma UI ocorre no contexto da engenharia de software, então não faria sentido para você que eu somente lhe passasse conceitos fundamentados na área de Interação Humano-Computador, que trata de toda essa “comunicação” entre você e sua máquina, acessando um site, sistema ou aplicativo, sem que esses conceitos fossem inseridos no contexto da Engenharia de Software, pois você como Técnico(a) em Desenvolvimento de Sistemas, construirá softwares, aplicativos para dispositivos móveis ou sistemas web/sites com interfaces que tragam todos os benefícios que a área de interação pode proporcionar.
Pensando nessa integração Barbosa (2010 apud GULLIKSEN, 2005) destacaram 12 princípios-chave para que um processo de desenvolvimento cuide adequadamente da qualidade de uso, são eles:
Foco no usuário: como foi descrito no item anterior, seu entendimento sobre o que seu público-alvo espera da ferramenta é fundamental para que todo o processo decorra de acordo com suas necessidades e não guiado pela tecnologia.
Participação ativa do usuário: as pessoas que utilizarão os softwares, aplicativos para dispositivos móveis ou sistemas web/sites, ou seus representantes, devem estar sempre participativos no processo de criação e desenvolvimento para sinergia com todo o processo.
Desenvolvimento iterativo e incremental: criando o projeto dessa forma você permite que quem utiliza o aplicativo consiga avaliar e revisar as propostas de funcionalidades e interações, bem como já liberar partes do sistema que já estejam funcionais para descobertas de uso.
Representações de design simples: o resultado de cada etapa dentro do projeto deve ser representado e apresentado de forma que se tenha uma assimilação fácil de tudo o que está sendo entregue e consigam compreender o “por quê” foi realizado daquela forma.
Prototipação: os protótipos trazem a sensação e a experiência de interação com o software que será criado onde o usuário poderá avaliar o andamento de projeto mais de perto.
Avaliar o uso em contexto: é extremamente importante lembrar-se que o conceito de qualidade do software tem muito a ver com a expectativa e o direcionamento que se espera dele.
Atividade de design explícita e consciente: a ideia é realmente separar momentos e atividades específicas de design e interação com o software.
Atitude profissional: é importante que a equipe do projeto seja formada por profissionais de outras áreas, a fim de ajudar em todos os aspectos, e não somente os técnicos.
Defensor da qualidade de uso: diz respeito a defender que a qualidade de uso não pode ser deixada de lado para que uma tecnologia ou processo seja implantado. Lembre-se: se não tiver quem use o software, não há necessidade de ele existir.
Design holístico: tudo o que possa impactar na utilização do software deve ser considerado no projeto.
Customização do processo: processos e projeto de interfaces podem e devem ser adaptados de acordo com as necessidades dos usuários.
Atividade centrada no usuário: toda a equipe do projeto deve ter em mente que sempre as decisões serão tomadas, tecnologias serão escolhidas guiadas pela vontade e necessidade de quem irá utilizar os softwares, aplicativos para dispositivos móveis ou sistemas web/sites.
Esses princípios são amplamente trabalhados na área de IHC (interface humano computador) com relação à usabilidade e focado na interação que o usuário tem com a ferramenta, no caso o software, porém, na área de engenharia de software, que é quem recebe o resultado do projeto de interface, bem como as demais funcionalidades, não dá tanta ênfase neles. Por isso, você, Técnico(a) em Desenvolvimento de Sistemas, deve estar atento nessa integração entre as duas áreas, para sempre entregar o que há de melhor nelas, pois juntas, estas abordagens integrarão os comportamentos e estruturas das ferramentas que auxiliarão em seus novos negócios, suas novas ideias, empresas e/ou projetos.
Uma vez que você entende a necessidade do seu cliente e já definiu o que deve ser feito através da engenharia de requisitos – na minha opinião a parte principal no processo de projeto de interface com o usuário – o próximo passo é a prototipagem e iteração. Segundo Pressman (2002), a prototipagem, quando se fala de processo de projeto de criação de uma UI, está relacionada com o modelo de interação do usuário com o sistema, ou seja, quais tarefas serão realizadas por meio dele, como elas serão apresentadas, se as opções existentes estão relacionadas com o mapeamento natural do público-alvo etc. Para isso, é importante que você reforce com todos a importância de se criar protótipos da interface para testar e validar ideias antes da implementação final.
Discuta as diferentes técnicas de prototipagem, como protótipos de baixa e alta fidelidade que vão desde um desenho a lápis em uma folha de papel, até uma abordagem mais técnica dentro de um sistema de prototipagem, chegando em um protótipo de alta fidelidade onde praticamente você se sente usando o software. A prototipação acrescida da iteração contínua ajuda a aprimorar a interface do protótipo e, por consequência, do software com base no feedback sobre sua utilização.
Até agora focamos no usuário para descobrir quais são seus anseios, vontades e necessidades. Você já descobriu como devem ser feitas as escolhas para criação desta interface através dos princípios e aprendeu que protótipos auxiliam bastante nessa fase de criação. Agora, você irá adentrar no processo do projeto no que se refere à questão do design e layout, trabalhando a hierarquia visual, escolha de cores, tipografia, ou seja, a escolha das fontes, disposição dos elementos e feedbacks mais visuais. Não adianta que sua interface tenha uma usabilidade e interação formidável, mas não seja agradável e harmoniosa de acordo com os critérios de qualidade de software, ou até mesmo, da marca de seu cliente, quando estiver trabalhando com uma empresa.
Além desses processos, é importante realizar também testes e avaliações, pois através deles você validará a usabilidade e a própria interface, com o objetivo de identificar possíveis problemas e áreas de melhoria, reforçando que é mais uma oportunidade de envolver as partes interessadas no processo do projeto de criação da interface.
Acredito que o ponto máximo do Processo de Projeto da Interface com o Usuário seja mesmo a prototipação da interface, pois como já lhe disse, proporciona um melhor entendimento do que está sendo feito com a possibilidade de interação para validar e testar sua usabilidade.
Existem três formas e/ou tipos de prototipagem que você poderá utilizar onde a principal diferença está no que diz respeito ao grau de fidelidade desta prototipação com o resultado do sistema final. São eles baixa-fidelidade, média-fidelidade e alta-fidelidade.
Também conhecidos como wireframes, são o que entendemos por rascunho, podendo até serem feitos com lápis e papel. São usados para dar o pontapé inicial nas ideias da interface, mas não se preocupe se você acha que não tem aptidão para desenho, pois existem softwares que lhe auxiliam mesmo com esses protótipos mais simples como Pencil Project e Balsamiq.
Para que você compreenda melhor como seria um protótipo de baixa-fidelidade, a figura 1 apresenta um exemplo:
Também conhecidos como mockups, estão mais próximos do sistema final do que quando comparado com os protótipos de baixa-fidelidade. A principal vantagem é a possibilidade de simular o comportamento de interação da interface, não requerendo conhecimento técnico necessário para a implementação propriamente dita. E claro, existem softwares de mercado que auxiliam no processo como: Sketch e Figma.
Semelhante à interface final sendo feita com as mesmas tecnologias que serão usadas para tal, com a possibilidade de realizar pequenas implementações. Porém, um ponto de atenção é que para construção deste protótipo é necessário que você, técnico(a) em desenvolvimento de sistemas, já esteja familiarizado com as tecnologias que serão utilizadas neste projeto.
Agora que você já conhece os problemas ocasionados pela falta de processos em projetos de criação de uma UI, aprendeu sobre um case da aplicação desses conceitos e se aprofundou nos que realmente eles são (conceitos); chegou a hora de colocar a mão na massa e praticar um pouco.
Sugiro que você pratique, ainda dentro do conceito de prototipagem, criando um protótipo de baixa-fidelidade, utilizando a ferramenta Balsamiq.
Após acessar o site, para praticar, escolha a opção “Start Balsamiq Cloud Trial”, – sim, o site é todo em inglês. Na sequência você será informado(a) de que é uma opção trial, ou seja, de teste, mas não se preocupe, pois nada será cobrado, e nenhum número de cartão será solicitado.
Digite seu e-mail e clique na opção “Start Trial” ou efetue login utilizando sua conta google (@gmail.com) clicando em Google Authentication e realizando sua autenticação. Independente da maneira que você escolher, será direcionado(a) para um caixa de mensagem onde lhe pede para que digite o nome do seu espaço de trabalho (Create your Space) e logo abaixo com uma caixa de texto: “Name Your Space”. Digite: Análise e Projeto de Sistemas. Marque a opção “I Have read and agree to Balsamiq’s Privacy Policy and Terms of Service” e clique no botão “Create My Space and Start My Free Trial”.
Você está quase lá! Agora, clique no link que você acabou de criar e pronto! Já está com as opções de criação de protótipos de baixa-fidelidade usando a ferramenta Balsamiq.
Sugiro que você reproduza a Figura 1 apresentada no item conceitualização desta lição. Para isso, você irá usar as seguintes ferramentas do Balsamiq:
Browser Window.
Image.
Text Title.
Squiggly Block of Text.
Button.
Utilize sua criatividade e reproduza a Figura 1 desta lição da mesma maneira ou aproveite para melhorá-la de acordo com o que aprendeu nesta lição. Até a próxima!
BARBOSA, S. D. J. Interação Humano-Computador. 1. ed. Rio de Janeiro: Elsevier, 2010.
PRESSMAN, R. S. Engenharia de Software. 6. ed. USA: McGraw-Hill, 2002.