Instituto Federal de Educação, Ciência

e Tecnologia da Bahia
Curso Tecnologia em Análise e Desenvolvimento
de Sistemas

Relatório técnico para construção de

Interface de software
Kleber Júnio, Davi Carvalho, Marcos Vinicius

Orientador: Prof. Bruno Santos

Disciplina: IHC

Março, 2023
RESUMO ......................................................................................................................................................... 3
1 Introdução ................................................................................................................................................... 3
1.1 Motivação ............................................................................................................................................. 3
1.2 Objetivo ................................................................................................................................................ 3
1.3 Organização do trabalho ...................................................................................................................... 3
2 Desenvolvimento ......................................................................................................................................... 3
2.1 Contextualização .................................................................................................................................. 3
2.3 Projeto de interface .............................................................................................................................. 4
2.4 Tecnologias utilizadas ........................................................................................................................... 4
2.5 Descrevendo a interface gráfica do usuário do sistema ...................................................................... 4
2.6 Entrada, processamento e saída de dados .......................................................................................... 5
3 Considerações finais .................................................................................................................................... 5
RESUMO
O desenvolvimento desse projeto se baseou na análise de requisitos e design de interface, visando a
criação de uma interface para um software de votação moderno que seja amigável e intuitiva para os
usuários. A interface do usuário é projetado para ser fácil de usar, garantindo acessibilidade para pessoas
de todas as idade.
Nesse trabalho iremos especificar alguns passos e decisões tomadas para que alcançássemos o resultado
final do projeto.

1 Introdução
1.1 Motivação
A motivação para desenvolver um software de votação com essa abordagem um pouco mais moderna
vem da necessidade de atualizar e modernizar o processo de votação, tornando o mais eficiente,
acessível e transparente. Além disso, essa interface moderna de software pode melhorar a acessibilidade
do processo de votação, garantindo que pessoas de todas as idades e habilidades possam votar com
facilidade e confiança.
Também podemos ter em vista o ponto da transparência, que irá permitir que os eleitores rastreiam
seus votos e garantam que seus votos sejam contados com precisão.
Portanto, a motivação para desenvolver um software de votação é democratizar e facilitar o acesso ao
voto das diversas classes de pessoas que muitas vezes não são assistidas da maneira correta, e muitas
vezes são influenciadas pelo sistema atual.

1.2 Objetivo
O objetivo se assemelha bastante com o que já foi dito anteriormente na motivação, é basicamente
melhorar a eficiência, acessibilidade e transparência no processo eleitoral. Com uma interface moderna
e amigável, os eleitores podem votar com mais facilidade e confiança, independentemente de sua idade
ou habilidade. Isso pode levar a uma maior participação dos eleitores ao processo eleitoral.
E se formos pensar além da interface e formos analisar a implementação desse sistema com uma api,
podemos nos aproveitar do uso de tecnologias e meios de segurança mais avançados para ajudar a
prevenir fraudes e garantir a integridade do processo eleitoral.

1.3 Organização do trabalho

O projeto foi projetado por Kleber, Davi Carvalho e Marcos Vinicius, e as partes deste trabalho foram
divididas entre o escopo do projeto (que ainda não é a interface), o levantamento dos requisitos e
analise das regras de negócio, o desenvolvimento da interface e por ultimo a elaboração deste relatório.

2 Desenvolvimento
2.1 Contextualização
Considerando a real implementação desse sistema podemos aplicar o seu desenvolvimento em um
cenário em que o sistema atual se encontra desatualizado e ineficiente.
Em um cenário em que a tecnologia está avançando rapidamente em todas as áreas, incluindo a área de
votação é fundamental que o processo eleitoral acompanhe essa evolução e ofereça soluções mais
modernas e eficiente. Além disso, a pandemia do COVID-19 destacou a necessidade de votação
eletrônica para evitar aglomerações em locais de votação e garantir a segurança dos eleitores.
Entendendo esse contexto uma interface de votação em um formato de app pode ser uma solução mais
eficiente e acessível para os eleitores.

2.3 Projeto de interface

Seguindo a tendência de muitas aplicações desenvolvidas com fins de alcançar o maior número de
usuários possivel, nós optamos por seguir o padrão conhecido como “Mobile first”, onde nós nos
preocupamos primeiramente em como esse sistema e interface irá se comportar em dispositivos móveis,
tendo isso em vista nós conseguimos atingir um resultado que atenda os requisitos de usabilidade
apresentando ao usuário uma interface moderna e amigável.

2.4 Tecnologias utilizadas

Para o desenvolvimento dessa interface nós utilizamos o figma, que é uma ferramenta de design de
interface do usuário baseada em nuvem que permite a colaboração em tempo real entre os designers e
equipes.
Essa ferramenta permite que os usuários criem design de interface do usuário, deste o básico até coisas
mais avançadas como animações.

2.5 Descrevendo a interface gráfica do usuário do sistema

Em nossa interface gráfica nós apresentamos inicialmente 7 janelas nas quais o usuário tera acesso, por
exemplo, tela de login, votação, visualização de resultados em tempo real, cadastro de candidato,
visualização de informações sobre o candidato e a tela de votação concluida.

Segue abaixo uma prévia das janelas:

(apresentação das janelas mais detalhadas na apresentação no figma)

2.6 Entrada, processamento e saída de dados
O primeiro campo de entrada de dados que eu gostaria de exemplificar se encontra na janela de login.
Nessa janela o usuário deverá fornecer o número do seu título de eleitor e seu cpf, para que assim o
sistemas possa buscar essas informações no banco de dados e assim processar e validar essas
informações, e como resposta o sistema irá redirecionar para a tela de votação.
É importante ressaltar que antes do sistema enviar essas informações ao servidor é necessário que ainda
na parte do cliente seja feita a validação dos campos de entrada dos campos de texto para que apenas
informações válidas sejam aceitas, isso pode ser feito via regex, evitando assim problemas de segurança
como cross site scripting e Sql injection.

O segundo campo de entrada de dados que eu gostaria de destacar é a parte de votação.

Nessa janela o usuário irá apenas fornecer o número do seu canditado, é importante lembrar que essa
janela se assemelha a interface de uma urna eletrônica, logo o usuário só podera informar o número do
seu canditado, ou votar em branco.
Depois que o usuário fornece o número do seu canditado, em tempo real o cliente faz uma requisição ao
servidor e se o número estiver associado a alguma candidato a api irá fornecer essas informações ao
cliente que irá exibir essas informações para usuário, que por sua vez poderá confirmar ou votar em
branco. Feito isso o sistema irá processar e contabilizar essas informações.

O terceiro exemplo que eu gostaria de dar é sobre saída de dados.

Logo depois de votar, o usuário é redirecionado a uma janela que irá listar todos os candidatos em
ordem de votação em pequenos cards, ao clicar nesses cards o sistema irá fornecer uma janela com
informações detalhadas sobre esse candidato.

3 Considerações finais
No fim acredito que conseguimos alcançar o nosso objetivo de desenvolver uma interface de votação
que cumprisse os requisitos de usabilidade e apresente ao usuário uma interface amigável para que ele
possa participar do processo eleitoral. Também acredito que conseguimos explicar todo o processo e
objetivos por trás do desenvolvimento desse interface exemplificando todos os passo tomados durante o
processo.