BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO

Willian Wagner Rocha Grillo

APRIMORAMENTO DO USO DO SISTEMA KANBAN NA UTILIZAÇÃO DE

PROCESSOS DE ORGANIZAÇÃO E NA USABILIDADE DO USUARIO FINAL

Vila Velha – ES
2023
 WILLIAN WAGNER ROCHA GRILLO

APRIMORAMENTO DO USO DO SISTEMA KANBAN NA UTILIZAÇÃO DE

PROCESSOS DE ORGANIZAÇÃO E NA USABILIDADE DO USUARIO FINAL

Trabalho de Conclusão de Curso

apresentado a Universidade Vila Velha
como pré-requisito do Programa de
Graduação em Ciência da Computação.
Orientador: Abrantes Filho

Vila Velha – ES
2023
 RESUMO

Na organização de processos a Kanban é umas das mais populares e permite

o gerenciamento de fluxo e melhor usabilidade do usuário final.
Através de revisões bibliográficas e adaptações de processos de metodologias
ágeis este trabalho apresenta uma proposta de desenvolvimento de um sistema
Kanban com melhor usabilidade para promover o uso mais frequente dessa
metodologia na organização de processos empresárias.
 RESUMO EM LINGUAGEM ESTRANGEIRA

In the organization of processes, Kanban is one of the most popular and allows
flow management and better end-user usability.
Through bibliographic reviews and process compatibility of agile methodologies,
this work presents a proposal for the development of a Kanban system with better
usability to promote the more frequent use of this methodology in the organization of
business processes.
 LISTA DE FIGURAS

Figura 1 - Interface do Trello .............................................................................................................. 9

Figura 2 - Valores do Manifesto Ágil ............................................................................................... 12
Figura 3 - Princípios do Manifesto Ágil ........................................................................................... 13
Figura 4 - Exemplo Sistema Kanban............................................................................................... 19
Figura 5 - Limitando a quantidade de itens no WIP ...................................................................... 20
Figura 6 - Dez Heurísticas de Nielsen ............................................................................................ 24
Figura 7 - Mensagem de Erro........................................................................................................... 26
Figura 8 - Mensagem de confirmação ............................................................................................ 26
Figura 9 - Gatilhos Externos ............................................................................................................. 28
Figura 10 - Protótipo Sistema Kanban ............................................................................................ 30
Figura 11 - Protótipo Ação de Mover o Card ................................................................................. 31
Figura 12 - Protótipo Componente Card ......................................................................................... 32
Figura 13- Protótipo Componente Coluna ...................................................................................... 33
Figura 14 - Protótipo Documentação de Prioridade de Card ...................................................... 34
Figura 15 - Protótipo Documentação TAGS................................................................................... 34
Figura 16 - Protótipo Documentação Responsáveis .................................................................... 35
Figura 17 - Protótipo Documentação Identificadores Únicos de Card ....................................... 35
Figura 18 - Protótipo Botão da Documentação ............................................................................. 36
 LISTAS DE ABREVIATURAS E SIGLAS

UX - User experience
UI - User interface
WIP - Fluxo de trabalho
 Sumário

1 INTRODUÇÃO ......................................................................................................... 8
1.1 O Problema ........................................................................................................... 9
1.2 Formalização do problema .................................................................................... 9
1.3 Hipótese ................................................................................................................ 9
1.4 Objetivos ............................................................................................................. 10
1.4.1 Objetivo Geral .................................................................................................. 10
1.4.2 Objetivo específicos ......................................................................................... 10
1.5 Justificativa .......................................................................................................... 10
2 FUNDAMENTAÇÃO TEORICA ............................................................................. 11
2.1 Metodologia Ágil .................................................................................................. 11
2.1.1 Manifesto Ágil ................................................................................................... 11
2.2 Kanban ................................................................................................................ 15
2.2.1 Sistema Kanban ............................................................................................... 16
2.2.2 Valores do sistema Kanban.............................................................................. 16
2.2.3 Princípios do sistema Kanban .......................................................................... 17
2.2.3.1 Princípios da Gestão de Mudanças ............................................................... 18
2.2.3.2 Princípio da Entrega De Serviços .................................................................. 18
2.2.4 As Práticas Gerais do Kanban ......................................................................... 19
2.3 UX Design ........................................................................................................... 21
2.3.1 Vantagens do UX Design ................................................................................. 21
2.4 UI Design............................................................................................................. 22
2.4.1 Heurísticas de Nielsen...................................................................................... 22
2.5 Métodos para uma melhor interface .................................................................... 24
2.6 Melhorando o engajamento no sistema com gatilhos ......................................... 27
2.6.1 Gatilhos externos ............................................................................................. 27
3 Protótipo ............................................................................................................... 29
4 Considerações Finais .......................................................................................... 37
REFERÊNCIAS......................................................................................................... 38
1 INTRODUÇÃO

A tecnologia desempenha hoje um papel importante na

sociedade, proporcionando ferramentas que facilitam as atividades diárias
como a organização e a comunicação profissional, tornando-se assim um
produto fundamental no controle da organização de processos e tarefas
individuais ou em equipes.

As empresas utilizam ferramentas de gestão de processos

para determinar fluxos com objetivo de que os processos ocorram da melhor
forma possível e que cada colaborador saiba o seu papel em cada atividade.
Essas ferramentas atuam de forma direta no monitoramento e no controle das
atividades que são executadas durante o andamento dos processos de uma
organização.

No controle de organização pessoal são tantas atividades acumuladas

na rotina, que não é raro esquecer ou prorrogar algumas delas. Uma
organização inteligente da rotina, seja ela de trabalho ou estudo, pode melhorar
a produtividade e ainda manter a saúde mental em dia. Por isso, a busca por
aplicativos de organização em lojas de aplicativos está aumentando.

O Trello, por exemplo, na Figura 1 abaixo, é um aplicativo de

gerenciamento de projetos, que auxilia as empresas a organizar tarefas e
processos de modo otimizado. Neste aplicativo é utilizado o quadro Kanban
para a criação e acompanhamento dos fluxos dos processos. Entretanto,
apesar de ser um software referência em organização, o Trello apresenta
alguns problemas, tais como:
• Ferramenta limitada para projetos de média a alta complexidade;
• Poucas funcionalidades;
• Interface confusa quando se coloca muitos cards;
• Problemas de uma usabilidade, como por exemplo: a movimentação errada
das tarefas pode prejudicar a organização;
• Indisponibilidade de criar subtarefas.
 Figura 1 - Interface do Trello

Fonte: https://trello.com/pt-BR/guide/onboard-team#start-with-template-boards

1.1 O Problema

A complexidade da navegação e a falta de usabilidade para usuário final, faz

com que o sistema Kanban deixe de ser usado ou não seja usado da maneira correta.
As consequências dessa utilização errada incluem: falhas nos processos de
organização da empresa, atrasos nas entregas, erros na comunicação, falta de
transparência e consequentemente maior desorganização e conflitos internos.

1.2 Formalização do problema

É possível desenvolver um sistema web baseado no sistema Kanban com uma

interface intuitiva e menos complexa voltado para o usuário final?

1.3 Hipótese

Um sistema web mais simples e voltado para o usuário final é capaz de diminuir
a desorganização, melhorar comunicação e eficiência do controle dos processos em
uma organização.
1.4 Objetivos

1.4.1 Objetivo Geral

Desenvolver um sistema intuitivo e simples para controle de processos através

de quadros Kanban.

1.4.2 Objetivo específicos

• Estudar os principais aplicativos de gerenciamento e levantar seus pontos

fortes e fracos;
• Criar um protótipo de tela que seja dos agrados dos usuários em teste de
usabilidade;
• Estabelecer os casos de usos e as descrições dos casos de uso;
• Fazer uma revisão sobre Ui design e Ux design;
• Fazer uma revisão sobre as metodologias ágeis;
• Fazer uma revisão sobre o sistema Kanban.

1.5 Justificativa

Processos organizados podem causar grandes impactos positivos em uma

empresa, tais como:
• A empresa pode ter uma visão mais ampla e estratégica de todos os processos;
• Agilidade e assertividade nas tomadas de decisões;
• Consolidação e divisão das funções e responsabilidades no decorrer do fluxo
dos processos;
• Automatização dos processos;
• Maior transparência e controle dos processos;
2 FUNDAMENTAÇÃO TEORICA

Para alcançar os objetivos desse trabalho foi necessário levantamento

bibliográfico sobre metodologia ágeis com foco no Kanban, UX design, UI design e
como construir produtos e serviços formadores de hábito, pois isso estimula o usuário
final a ter uma melhor experiencia com o produto e maior interatividade no cotidiano.

2.1 Metodologia Ágil

As metodologias ágeis são modelos de gestão de projetos visando mais

rapidez, agilidade e flexibilidade aos fluxos de trabalho, fazendo com que tais projetos
sejam finalizados rapidamente e com menos percursos. As metodologias ágeis são
um conjunto de valores e conceitos que seguem o Manifesto Ágil.

2.1.1 Manifesto Ágil

Os métodos leves como eram chamados, evoluíram a partir de 1990:

“à mudança de nome de ‘peso leve’ para ‘ágil’ se deu porque muitos
tinham a impressão de que o termo “peso leve” era mais uma reação
a algo contrário do que uma crença em algo realmente eficiente bom
para os times de projetos. A referência existente naquela época eram
os métodos tradicionais, também conhecidos e principalmente
cuidados pelos praticantes dos métodos ‘peso leve’ como ‘peso
pesado’, do inglês heavyweight, e que hoje também são conhecidos
como water fall ou cascata”. (Fabio Cruz, 2018)

O modelo em cascata idealizava que todo projeto tinha que ser completamente
planejado, depois executado, e por fim finalizado, gerando inúmeros e infinitos
documentos, estendendo o período de planejamento e fazendo com que os softwares
demorassem muito para serem entregues e, na maioria das vezes, perdessem a sua
função devido ao tempo que ficavam em desenvolvimento.

Umas das principais desvantagens do modelo em cascata é que “não há

maneiras de se testar e liberdade para criar em seu processo. Basta um detalhe
desandar e deve-se fazer tudo de novo”( WIKIPÉDIA, 2022), o que gerava um grande
índice de retrabalho e, consequentemente, impactava na satisfação do cliente.
 Em 2001, no intuito de melhorar o desempenho de seus projetos, “membros
proeminentes da comunidade se reuniram em Snowbird e adotaram o nome métodos
ágeis, tendo publicado o Manifesto Ágil, documento que reúne os princípios e práticas
desta metodologia de desenvolvimento” ( WIKIPÉDIA, 2022).

O manifesto teve origem em 2001, com 17 profissionais da área de

desenvolvimento de software, propondo uma nova abordagem no desenvolvimento,
discutindo os pontos em comum sobre aspectos importantes em desenvolvimento de
software, produziram assim um manifesto com princípios e valores. O Manifesto Ágil
criou 4 valores, mostrados na Figura 2 abaixo, e 12 princípios, mostrados na Figura 3
abaixo, com o objetivo de entregar produtos com mais valor em menor tempo.

Figura 2 - Valores do Manifesto Ágil

Fonte: Simone Marques, 2022

 Figura 3 - Princípios do Manifesto Ágil

Fonte: Presley Lima, 2019

De acordo com os 12 princípios do manifesto:

1) “Nossa maior prioridade é satisfazer o cliente, por meio da entrega adiantada

e contínua de software de valor”.
Este princípio esclarece que a prioridade é o cliente. Garantindo assim a
satisfação e entregando rapidamente e continuamente o software funcional.

2) ”Aceitar mudanças de requisitos, mesmo no fim do desenvolvimento.

Processos ágeis se adequam a mudanças, para que o cliente possa tirar vantagens
competitivas”.
O princípio refere-se as mudanças durante o desenvolvimento do software,
concluindo que as mudanças tem que ser respeitadas e aceitas, independente do
momento em que elas aparecerem no projeto.

3) “Entregar software funcionando com frequência, na escala de semanas até

meses, com preferência aos períodos mais curtos”.
O princípio refere-se as entregas frequentes no decorrer do desenvolvimento.

4) “Pessoas relacionadas à negócios e desenvolvedores devem trabalhar em

conjunto e diariamente, durante todo o curso do projeto”.
 Manter um time integrado, buscando objetivos em comum ao longo do projeto.

5) “Construir projetos ao redor de indivíduos motivados. Dando a eles o

ambiente e suporte necessário, e confiar que farão seu trabalho”.
Refere-se a importância de confiar em sua equipe, fazendo com que o todos os
indivíduos tenham um propósito dentro do projeto.

6) “O método mais eficiente e eficaz de transmitir informações para e dentro de

uma equipe de desenvolvimento é a conversa cara a cara”.
Este princípio relata que a comunicação pessoal reduz o tempo entre fazer uma
pergunta e obter uma resposta.

7) “Software funcionando é a medida primária de progresso”.

Refere-se a eficiência do produto final com o cliente, sendo sua medida do
progresso.

8) “Os processos ágeis promovem o desenvolvimento sustentável. Os

patrocinadores, desenvolvedores e usuários devem ser capazes de manter um ritmo
constante indefinidamente”.
O princípio conclui que nem sempre trabalhar muito irá gerar mais resultados.

9) “A atenção contínua à excelência técnica e ao bom design aumenta a

agilidade”.
“Devemos focar em entregas com qualidade, mesmo que isso signifique reduzir a
porção do que será disponibilizado para o cliente” (Carol Vilas Boas, 2021).

10) “Simplicidade - a arte de maximizar a quantidade de trabalho que não

precisou ser realizado”.
Neste princípio, relata a importância da simplicidade, muitos problemas
complexos estão na falta de simplicidade.

11) “As melhores arquiteturas, requisitos e designs emergem de equipes auto

organizadas”.
 O princípio diz que devemos desenvolver de acordo com a necessidade, com
formas interativas e incrementais.

12) “Em intervalos regulares, a equipe reflete sobre como se tornar mais eficaz,
então sintoniza e ajusta seu comportamento de acordo".
O princípio conclui que a autoavaliação é essencial sendo importante buscar
os pontos fortes e fracos da equipe.

Segundo Shore e Wander (2008) para ser ágil é essencial uma mudança de
cultura da organização, deste modo se poder obter o aumento da produtividade de
forma efetiva. As metodologias ágeis se mostram eficientes ao promover
transparência sobre as atividades em andamentos e finalizadas, e ao informar métrica
como a velocidade e quantidade de demandas atendidas.

Existem diversos métodos ágeis, como por exemplo Scrum, Lean, Feature
Driven Development (FDD), eXtreme Programming (XP), Microsoft Solutions
Framework (MSF) e o Kanban. Neste trabalho damos destaque a metodologia ágil
Kanban por ser uma das metodologias mais utilizadas para gestão de processos.

2.2 Kanban

Um dos modelos de metodologias ágeis mais populares no mundo da

programação é o Kanban. Criado em 1953 na Fábrica da Toyota, Kanban foi baseado
na metodologia conhecida mundialmente por Just In Time (JIT). Essa filosofia buscava
adquirir a eficiência da produção através da redução total de desperdício. Baseado
em um modelo de reposição de supermercados, essa ferramenta foi desenvolvida
como uma metodologia que necessitava produzir de acordo com a demanda e nas
condições desejadas pelos consumidores.
“Kanban é o termo japonês que pode significar cartão. Este cartão
age como disparador da produção de centros produtivos em estágios
anteriores do processo produtivo, coordenando a produção de todos
os itens de acordo com a demanda de produtos finais” (CORRÊA;
GIANESI, 1993).
2.2.1 Sistema Kanban

Segundo Anderson (2011), o Kanban funciona da seguinte maneira:

“Certo número de kanbans (ou cartões) equivalente à capacidade (em
acordo) de um sistema é colocado em circulação. Um cartão é
anexado a um trabalho. Cada cartão age como um mecanismo de
sinalização. Um novo trabalho pode ser iniciado apenas quando um
cartão está disponível. Este cartão livre é anexado a um trabalho e o
segue à medida que ele flui através do sistema. Quando não há mais
cartões livres, nenhum trabalho adicional pode ser iniciado. Qualquer
novo trabalho deve esperar em uma fila até que um cartão esteja
disponível. Quando algum trabalho for concluído, seu cartão é liberado
e reciclado. Com um cartão agora livre, um novo trabalho da fila pode
ser iniciado.
Este mecanismo é conhecido como um sistema puxado porque o novo
trabalho é puxado para o sistema quando existe capacidade para lidar
com ele, em vez de ser empurrado para o sistema com base na
demanda. Um sistema puxado não pode ser sobrecarregado se a
capacidade, conforme determinado pelo número de cartões
sinalizadores em circulação, tiver sido configurada adequadamente.”
(Anderson,2011, p13)

Ainda segundo o mesmo autor (Anderson, 2011), o sistema Kanban é utilizado

para limitar o trabalho-em-progresso de uma equipe, definindo a capacidade e o
equilíbrio das demandas sobre a própria.

O sistema Kanban elimina problemas que dificultam o empenho e os desafios

de uma equipe que se concentra em resolver e manter um fluxo de trabalho (WIP). A
simples ação de limitar o trabalho-em-progresso com o sistema Kanban, motiva maior
qualidade e desempenho da equipe. A consequência disso tudo é a evolução cultural
das empresas que conseguem se focar em resolver os problemas atuais e em eliminar
e prevenir futuros problemas.

2.2.2 Valores do sistema Kanban

Segundo Anderson (2017) o sistema Kanban é acompanhado por nove valores:

Transparência: Refere-se a crença de compartilhar informações, melhora o

fluxo de valor de negócio. O autor também cita a utilização de um vocabulário claro e
simples.
 Equilíbrio: Refere-se ao equilíbrio em relação as demandas e a sua
capacidade no fluxo de trabalho (WIP). Se não existir um equilíbrio, causarão
problemas.

Colaboração: Segundo o autor (Anderson,2017) o sistema Kanban foi criado

para melhorar a forma de trabalho em conjunto, sendo a colaboração o aspecto mais
importante.

Foco no cliente: Os clientes do produto final são o foco natural no Sistema

Kanban.

Fluxo: “A conscientização que o trabalho é um fluxo de valor, seja ele contínuo

ou esportivo. Enxergar o fluxo é um ponto de partida essencial na utilização do
Kanban” (Anderson, 2017)

Liderança: Segundo Anderson (2017) o padrão de liderança é ressignificado,

onde a entrega de valor é necessária em todos os níveis hierárquicos da empresa.

Compreensão: Sendo o Kanban um método de melhoria, o autor pontua o

autoconhecimento (individual e profissional da organização) essencial para a
evolução.

Acordo: Refere-se no engajamento com base no consenso e adaptação de

opiniões divergentes, mas com foco no compromisso dinâmico em avançar juntos em
direção a metas.

Respeito: Refere-se à valorização, consideração e entendimento pelas

pessoas.

2.2.3 Princípios do sistema Kanban

Segundo Anderson (2017) existem 6 princípios fundamentais no sistema

Kanban, podendo ser divididos em dois grupos: Princípios da Gestão de Mudanças e
Princípios da Entrega de Serviços.
2.2.3.1 Princípios da Gestão de Mudanças

Princípio 1: Comece com o que você faz agora.

Refere-se em compreender os processos, respeitar os papeis,
responsabilidades e cargos.

Princípio 2: Concordar em buscar mudanças incrementais e evolutivas.

Refere-se em buscar mudanças pequenas em vez de realizar mudanças

radicais podendo causar resistência dentro da equipe.

Princípio 3: Incentivar atos de liderança a todos os níveis.

Refere-se ao aspecto de liderança que deve ser desenvolvido em todos os

cargos e níveis hierárquicos.

2.2.3.2 Princípio da Entrega De Serviços

Esses princípios referem-se ao entendimento da necessidade do cliente, a rede

de serviços onde as pessoas se auto organizam em torno do trabalho e garanta que
seu sistema evolua.

Principio 1: Foco nas necessidades e expectativas do cliente.

Refere-se a entrega ao cliente, na qual deve ser o foco da organização,
compreendendo as suas necessidades e expectativas.

Principio 2: Gerenciar o Trabalho

Refere-se ao gerencialmente da rede de serviços. Uma rede de serviços
gerenciada, garante que as pessoas se auto organizem em torno do trabalho.

Principio 3: Rever regularmente a Rede de Serviços

Revisões regulares da rede de serviços, estimulam a melhoria dos resultados
entregues.
2.2.4 As Práticas Gerais do Kanban

Anderson (2017) define as atividades essências para o gerenciamento do

Kanban.

Visualizar
Para observar os processos no sistema Kankan, é preciso um quadro com
cartões e colunas. Cada coluna representa uma etapa no fluxo de trabalho. Cada
cartão representa uma tarefa. O quadro retrata como está o fluxo de trabalho.
Entender como irá fluir o fluxo de trabalho é essência para a melhoria continua.

Exemplo: Supondo que tenho um quadro Kanban com 3 colunas, representado

o fluxo de trabalho, “A fazer”, “Em andamento” e “Concluído”. Quando começar um
novo item, ele vai deverá iniciar na coluna “A fazer”, e quando essa tarefa for ser
executada o cartão deste item deverá ser movido da coluna “A fazer” para coluna “Em
Andamento”, concluído o item, o cartão novamente irá se mover, agora para a coluna
“Concluído”.

Figura 4 - Exemplo Sistema Kanban

Fonte: https://kanbanize.com/pt/recursos-kanban/primeiros-passos/o-que-e-kanban

Limite o trabalho em progresso (WIP)

 O Kanban tem como característica garantir um número gerencial de itens
ativos, ou seja, gerenciar os itens que sua equipe está trabalhando. Sabendo disso,
se o WIP (coluna que representa os cartões que a equipe está trabalhando) não
possuir limites de trabalho, o sistema não será considerado Kanban.

Figura 5 - Limitando a quantidade de itens no WIP

Fonte: https://kanbanize.com/pt/recursos-kanban/primeiros-passos/o-que-e-
kanban

Gerencie o Fluxo
Gerenciar o fluxo é gerenciar os movimento dos cartões. Um dos principais
benefícios do Kanban é que em vez de micro gerenciar as pessoas e tentar mantê-las
ocupadas o tempo todo, deve-se focar em gerenciar os cartões e entender como o
cartão pode ser concluído mais rápido pelo sistema.

Deixe as políticas do processo explícitas

Os princípios e valores devem estar de acordo com todos os indivíduos.

Implemente ciclos de feedbacks

Para as organizações e equipes serem mais ágeis é necessário a
implementação dos ciclos de feedback. Exemplos: Reuniões diárias para acompanhar
o andamento dos cartões e como está o fluxo de trabalho.
 Melhore colaborativamente
O melhor meio para alcançar a melhoria continua é através da implementação
colaborativa de mudanças com base em métodos, feedback e métricas
cientificamente comprovadas.

2.3 UX Design

O UX design, ou experiencia do usuário, é responsável pelas experiências do

usuário quando está interagindo com produto, site ou sistema.
Segundo Fabricio Teixeira (2014, p1)
Quando você usa algum desses objetos, você tem uma experiência.
Se você já passou nervoso na frente do caixa eletrônico porque ele
não entregou o dinheiro que você estava esperando e não deu
nenhuma explicação sensata sobre o motivo da recusa, você
possivelmente teve uma péssima experiência enquanto usuário do
caixa eletrônico. Experiência do usuário existe desde que o mundo é
mundo. Ou melhor, desde que as pessoas começaram a “usar” objetos
para realizar alguma tarefa.

O UX faz com que os produtos sejam intuitivos de serem usados, reduzindo

esforços e permitindo ao usuário concluir o objetivo em menor tempo e com menos
obstáculos. O UX apoia-se “em princípios da psicologia para motivar o usuário e
incentivá-lo a seguir adiante” Fabricio Teixeira (2014, p1)

2.3.1 Vantagens do UX Design

Algumas vantagens com a utilização do UX Design:

• Conhecimento do público: Empresas que reconhecem seu público são
capazes de oferecer as melhores soluções, para isso é feito uma pesquisa para
aprimorar a experiência do usuário.
• Satisfação do usuário: Usuários acabam fazendo a utilização do sistema mais
vezes e indicando outras pessoas a utilizarem.
• Fidelização dos usuários: Atrair um novo usuário mais do que manter um
usuário utilizando o sistema.
 • Redução de Custo: Sem nenhum estudo no desenvolvimento centrado no
usuário, no futuro será necessário investir muito mais para corrigir cada erro de
usabilidade.
• Credibilidade: Se o produto oferece boas experiências, é provável que o
cliente construa uma relação de confiança.

2.4 UI Design

UI é a sigla para User Interface (Interface do Usuário), e representa os

elementos visuais de um site, app ou programa. Essa área é responsável pela
interação visual do sistema com o usuário, com foco em oferecer uma boa usabilidade
e qualidade.

Não adianta ser bonito se não tem utilidade. Quando o usuário navega pelo
sistema, em primeiro lugar ele vai prestar atenção em sua aparência, e portando, o UI
tem uma grande importância no sistema/produto, pois é ele que fará a interação com
o usuário. Um bom UI é aquele que o usuário irá usar a interface de maneira fácil,
eficiente e agradável, não precisando do usuário fazer esforço para alcançar seu
objetivo de maneira clara.
2.4.1 Heurísticas de Nielsen

As Heurísticas de Nielsen são orientações de design e são aplicadas nas

interfaces de produtos e serviços digitais ou físicos, com propósito de promover
melhor experiência do usuário com o sistema.
As dez Heurísticas de Nielsen são:

1- Visibilidade do status do sistema

Refere-se a quão bem o status do sistema é transmitido aos seus usuários.
Idealmente os sistemas devem manter os usuários informados sobre o que está
acontecendo.
2- Relacionamento entre a interface e o mundo real
O Sistema deve falar a linguagem dos usuários, com palavras, frases e
conceitos familiares. Mostra empatia e os reconhece como importantes, pois o site
conversa com ele através de textos, imagens, ícones. Exemplo: Utilizar ícones
fazendo referência ao mundo real.

3- Controle e liberdade do usuário

O ideal é sugerir e não induzir. Exemplo: botões de voltar, avançar, desfazer,
limpar.

4- Consistência e padrões
Consistência nas cores, tipografia, fotografia, componentes, estilos. Exemplo:
definir cores padrões para cada botão.

5- Prevenção de erros
Melhor do que uma mensagem de erro é um projeto que previna a ocorrência
de problemas. Exemplo: Ao fazer um cadastro colocar validações nos campos de
email para evitar colocar email inválido e nos campos de telefone com o tamanho
válido para um telefone real.

6- Reconhecimento ao invés de lembrança

Nossa função é minimizar a carga de memória imposta ao usuário. Exemplo:
Mostrar pesquisas recentes dos usuários ou, no contexto de e-commerce, os últimos
produtos vistos

7- Flexibilidade e eficiência de uso

A ideia é deixar o sistema fácil pra quem está começando, rápido e eficiente
pra os usuários avançados. Exemplo: criar atalhos de teclado para usuários com maior
experiencia.
8- Estética e design minimalista
Colocar apenas o necessário evita que o usuário se confunda. Atenção aos
detalhes. Exemplo: sites com muita informação fazem com que o usuário tenha
dificuldade em encontrar aquilo que busca.

9- Suporte em caso de erro

Mensagens de erro devem ser expressas em linguagem direta e simples.
Exemplo: “Por favor, insira o seu e-mail”.

10- Ajuda e documentação

Utilização de documentação na utilização do sistema. Sempre que possível
oferecer ajuda ao usuário sem que ele precise solicitar

Figura 6 - Dez Heurísticas de Nielsen

Fonte: Giovana Armidoro, 2021

2.5 Métodos para uma melhor interface

Existem diversos métodos para melhorar a usabilidade de uma interface por

exemplo, segundo Fabricio (2014):
 Criação de Personas
Não faz muito sentindo criar um sistema sem saber como o usuário irá utiliza-
lo. As personas são comportamentos, necessidades e motivação através da criação
de um personagem fictício com base em comportamentos reais e características
diversas.

Revelar informações progressivamente

Para simplificar a interface, em vez de exibir todas as informações de uma vez,
criar etapas. Exemplo: Em um sistema Kanban, a funcionalidade de cadastrar um
cartão, pode ser dividida em etapas.

Crie experencias personalizadas

Com a interação do usuário com o sistema, uma série de informações pode ser
coletadas.

Dê Feedback sobre o estado do sistema

O usuário precisa entender, a qualquer momento o que está se passando no
sistema. Exemplo: Caso preencha um formulário de uma forma incorreta, uma
mensagem de erro deverá aparecer orientando como resolver o problema.
 Figura 7 - Mensagem de Erro

Fonte: https://brasil.uxdesign.cc/mensagem-de-erro-o-terror-de-ux-writing-
e3f962b59e1c

Análise de tarefas
Detalhar informações e ações necessárias para que o usuário complete seu
objetivo.

Evite erro antes que aconteçam

Mensagens de alerta para evitar erros cometidos pelos próprios usuários.

Figura 8 - Mensagem de confirmação

Fonte: https://gabrielsilvestri.com.br/o-que-e-ui-design/11-ux-copy/
2.6 Melhorando o engajamento no sistema com gatilhos

Segundo Nie Eyal (2020), gatilhos são formas de atrair o usuário através de
sinais sutis que apenas influenciam efetivamente nosso comportamento diário, com o
objetivo de trazer o usuário de volta ao sistema/produto. Existem dois tipos de gatilhos
externos e internos. No sistema Kanban seria viável a utilização de gatilhos externos.

A importância do gatilho no sistema Kanban, ocorre quando o usuário deixa ou

não faz a utilização diária do sistema, servindo para alerta-lo e motivando visualizar o
sistema.

2.6.1 Gatilhos externos

Gatilhos externos tem como objetivo comunicar e guiar de uma maneira

explicita as próximas ações que o usuário irá seguir, como no exemplo da próxima
figura abaixo.
Exemplo: Emails com instruções explícitas sobre a ação que se deve tomar,
com utilização de ilustrações didáticas com abordagem direta, como um botão grande
escrito: “Clique aqui para ser redirecionada ao aplicativo”.
 Figura 9 - Gatilhos Externos

Fonte: Autoria própria

Em um sistema Kanban, ao criar um card, pode-se enviar emails para os

usuários, com uma ilustração mostrando o card adicionado ao sistema, utilizando um
botão escrito “Clique aqui para verificar o fluxo de trabalho” ou “click aqui para ver o
novo card”.
3 Protótipo

Desenvolvimento de um sistema Kanban com base nos estudo apresentados.

Alguns pontos que princípios e valores utilizados no desenvolvendo do protótipo:

Consistência
Utilize a fonte “Poppins” como padrão, estilos dos componentes são todos
padronizados.

Estética e design minimalista

Exibi apenas as informações necessárias para fazer o uso do sistema,
deixando menos informações e diminuindo a complexidade.

Flexibilidade e eficiência de uso

Através de cores e estilo, deixei o sistema mais intuitivo.
Exemplo 1: Utilizei as cores vermelhas, amarelas e azul, no canto esquerdo
dos cards, representando sua prioridade.
Exemplo 2: Padronizei cores respectivamente para cada TAG de tipo de
trabalho.
A exibição dos cartes são de acordo com sua prioridade, cartões com mais
prioridades, são os primeiros da lista.

Ajuda e documentação
Utilizei o botão amarelo no canto direto do sistema, representando um Manual
do Sistema.

Prevenção de erros
Ao tentar arrastar um card da coluna “Pra Fazer” para a coluna “Finalizado” o
usuário é impedido.

Dê Feedback sobre o estado do sistema

Ao tentar mover um card, a interface irá mostrar onde o usuário poderá mover
o card.
Figura 10 - Protótipo Sistema Kanban

Fonte: Autoria própria

Figura 11 - Protótipo Ação de Mover o Card

Fonte: Autoria própria

Figura 12 - Protótipo Componente Card

Fonte: Autoria própria

Figura 13- Protótipo Componente Coluna

Fonte: Autoria própria

Figura 14 - Protótipo Documentação de Prioridade de Card

Fonte: Autoria própria

Figura 15 - Protótipo Documentação TAGS

Fonte: Autoria própria

 Figura 16 - Protótipo Documentação Responsáveis

Fonte: Autoria própria

Figura 17 - Protótipo Documentação Identificadores Únicos de Card

Fonte: Autoria própria

Figura 18 - Protótipo Botão da Documentação

Fonte: Autoria própria

4 Considerações Finais

Este estudo teve como objetivo ressaltar pontos de aprimoramento do uso do

sistema Kanban na utilização de processos de organização e usabilidade do usuário
final.
Por meio das pesquisas bibliográficas relacionadas aos fundamentos de UX e
UI design, foi possível compreender os conceitos que englobam do sistema Kanban,
permitindo assim identificar melhorias a serem realizadas.

Como reflexão final, pode-se afirmar que se o sistema Kanban, é um sistema

que funciona de forma simples, e a versão aprimorada com estratégias de
programação e design pode manter os mesmos princípios de simplicidade, mas com
uma usabilidade maior.
 REFERÊNCIAS

Anderson, David (2001) Kanban: Mudanca Evolucionaria de Sucesso Para Seu

Negócio de Tecnologia: Mudança Evolucionária de Sucesso para seu Negócio de
Tecnologia

Anderson, David (2017). Kanban Essencial Condensado. Lean-Kanban University;

Illustrated edição

Armidoro, Giovana (2021). 10 heurísticas de Nielsen: projetando interfaces e

interações. Disponível em: <https://medium.com/@giovanaarmidoro/10-
heur%C3%ADsticas-de-nielsen-projetando-interfaces-e-intera%C3%A7%C3%B5es-
dc0baa7e64fd>.[Online; acesso em 06.nov.2022] . Figura 4

DESENVOLVIMENTO ÁGIL DE SOFTWARE. In: WIKIPÉDIA, a enciclopédia livre.

Flórida: Wikimedia Foundation, 2022. Disponível em:
<https://pt.wikipedia.org/w/index.php?title=Desenvolvimento_%C3%A1gil_de_softwa
re&oldid=63661497>. [Online; acesso em: 05 nov. 2022]. Citado na página 15 e 16.

KNIBERG H.; SKARIN M. 2009. Kanban e Scrum - obtendo o melhor de ambos.

Disponível em: https://www.infoq.com/br/minibooks/kanban-scrum-minibook. Acesso
em: 07 nov. 2022.

Lima, Presleyson. Manifesto Ágil: o que é como aplicar para obter melhores resultados?,
2019. Disponível em <https://blog.aaainovacao.com.br/author/presleyson-lima/>. [Online;
acesso em: 06 nov. 2022] Figura 3, citado na pagina

Marques, Simone (2022). Metodologias Ágeis: 6 vantagens para a empresa.

Disponível em: <https://uds.com.br/blog/metodologias-ageis-vantagens-
empresas/>.[Online; Acesso em 06.nov.2022]. Figura 2, citado na página 15

Nir, Eyal (2020), Hooked (ENGAJADO): Como construir produtos e serviços

formadores de hábitos, 2020

Rossoti, Micaela. Heurísticas de Nielsen, Micaela em:

<https://softdesign.com.br/blog/heuristicas-de-nielsen/>.[Online; acesso em
06.nov.2022]
Teixeira, Fabricio. Introdução e Boas Práticas em UX Design. Casa do Código, 2014

UX Design: O que é, elementos, vantagens e exemplos práticos, FIA Business Shool,

Disponível em <https://fia.com.br/blog/ux-design/>.[Online; acesso em 06.nov.2022]

Vilas Boas, Carol, Manifesto Ágil: 20 anos Disponível em:

https://www.zup.com.br/blog/manifesto-agil>. [Online; acesso em 06.nov.2022].
Citado na página 18.