Rediseño Voto Electrónico

Tecnolgico de Costa Rica
Escuela de Ingeniera en Diseo Industrial

Proyecto de graduacin
Rediseo del
sistema Voto Electrnico
Para optar por el ttulo de Ingeniera en Diseo Industrial
con el grado acadmico de Bachiller Universitario
Asesor acadmico: Ph. D. Franklin Hernndez-Castro
Estudiante: Jos Adrin Gmez Montero

II Semestre 2014
En diseo, la indiferencia hacia la gente y hacia la

realidad en la que vivimos es el nico pecado capital.
El buen diseo es innovador
El buen diseo hace til a un producto
El buen diseo es esttico
El buen diseo ayuda a entender un producto
El buen diseo no molesta
El buen diseo es honesto
El buen diseo es duradero
El buen diseo es minucioso hasta el ltimo detalle
El buen diseo se preocupa por el medio ambiente
El buen diseo es tan poco diseo como sea posible
Dieter Rams
Tabla de contenidos
Pgina
1 Introduccin
Antecedentes
Problema
Anlisis de involucrados
Anlisis de problemas
Anlisis de objetivos
2 Marco metodolgico
14
Etapas de la metodologa del proyecto
3 Cronograma
18
4 Marco terico
20
Conceptualizacin
Esqueuomorfismo
Sufragio manual
Accesibilidad digital
Software y hardware
Situacin actual
Anlisis de referenciales
Pgina
5 Arquitectura propuesta
81
Elaboracin de la nueva arquitectura

Nueva arquitectura
6 Wireframes
7 Paper prototyping
86
107
Proceso de votacin
Proceso del miembro de mesa
8 Look&feel
115
Moodboards
Semntica de los elementos
Diseo de la papeleta
Seccin de votacin
Interfaz para los miembros de mesa
9 Aspectos finales
154
Conclusiones
Recomendaciones
Bibliografa
Introduccin
nmero de captulo: 1/6
Este documento contiene informacin de la investigacin y anlisis,

desarrollados como parte del proyecto de rediseo de Voto Electrnico, en
materia de usabilidad de la interfaz grfica y del flujo general de interaccin
del usuario con la herramienta.
Antecedentes
Problema
Anlsis de problemas
Introduccin
Antecedentes
Desde inicios de 2007, el Tribunal Supremo de Elecciones (TSE)
y el Instituto Tecnolgico de Costa Rica (TEC) trabajan en un
proyecto para el desarrollo de un prototipo para implementar el Voto
Electrnico (VE), incluyendo hardware y software.
Se firma un Convenio Marco de Cooperacin entre el TSE y el TEC,
y posteriormente una Carta de Entendimiento en el cual las partes
proponen colaborar con la investigacin y desarrollo de un sistema
de voto electrnico que contine dando al pas el liderazgo que
posee en materia de democracia.
Voto electrnico es un proyecto que desarrolla el Instituto
Tecnolgico de Costa Rica (TEC), especficamente el Centro de
Investigaciones en Computacin (CIC), evaluado por el Tribunal
Supremo de Elecciones (TSE).
Este proyecto pretende implementar un mecanismo de
identificacin de votantes que permita reducir los tiempos de
espera de los votantes en la fila, as como tener un mecanismo
de votacin por medio de un dispositivo electrnico, que tenga y
supere las caractersticas del proceso actual de emisin del voto en
Costa Rica, en lo referente a seguridad, confiabilidad, accesibilidad,
integridad, simplicidad y transparencia.
Modernizando de esta forma la emisin del sufragio y facilitando la
logstica del proceso y el trabajo de los miembros de mesa.
Introduccin
Problema
El gobierno de Costa Rica ha dependido de mecanismos manuales
para el proceso electoral durante ms de cinco dcadas, que
aunque han sido confiables y seguros, varios indicadores revelan
que es necesario impulsar alternativas que permitan modernizar el
sistema actual.
Aumento de la
cantidad de electores
Uno de estos indicadores es el crecimiento demogrfico del pas.

Esto significa que a mayor cantidad de electores, mayor ser la
demanda organizacional requerida para la integracin de las juntas
receptoras, dando como resultado la necesidad de destinar ms
fondos para dicha actividad.
Adems, se debe tener en cuenta el aumento de los procesos
electorales, tomando en cuenta que no son solamente las
elecciones presidenciales sino que tambin se cuenta con las de
regidores municipales, adems de posibles segundas rondas y
referndums.
Aumento de los
procesos electorales
Aunque se ha realizado un diseo para el proyecto Voto Electrnico,

no se han tomado en cuenta aspectos de usabilidad importantes
y determinantes, por lo que se ven comprometidos principios
fundamentales del proyecto como los son la confiabilidad,
accesibilidad y simplicidad; como consecuencia dicha herramienta
no va ser de uso efectivo por parte del usuario.
Necesidad o definicin del proyecto

Se pretende mejorar el uso del sistema Voto Electrnico, dado que
el sistema actual, no cuenta con aspectos de usabilidad. Lo que a
la vez repercute en falta de confiabilidad por parte del usuario, as
como directamente en accesibilidad al voto.
Introduccin
Electores
Intereses
Agilizacin del proceso de sufragio en las urnas
El sistema debe ser usable
Conocer los resultados de las votaciones de una forma ms rpida
El mecanismo de votacin debe ser simple, seguro y confiable
Problemas percibidos
Dificultad para la realizacin de la tarea en el nuevo sistema
Lentitud del proceso de sufragio en las urnas
El sistema actual no posibilita realizar las acciones de una forma
fcil y rpida
Lentitud para conocer los resultados de las votaciones
Recursos
Informacin sobre el proceso
Inters en estrategias
Medio. Muchos usuarios desean un mejoramiento del proceso, pero
temen el cambio.
Conflictos potenciales
Diferenciacin con el modelo de sufragio antiguo; posible dificultad
de adaptacin.
Miembros de
mesa
Intereses
Agilizacin del proceso de sufragio en las urnas
Facilitar la logstica del proceso
Lentitud para facilitar resultados al rgano principal
fcil y rpida
Introduccin
Recursos
Informacin sobre el proceso actual
Alta. Se consume mucho tiempo y esfuerzo en el proceso manual
Desconocimiento del sistema. Posible necesidad de capacitacin
Tribunal Supremo
de Elecciones
(TSE)
Intereses
Facilitar la logstica del proceso y el trabajo de los miembros de
mesa
Realizar y registrar la escogencia que refleje las preferencias del
votante por algn medio electrnico
Obtener de forma rpida, confiable y auditable los resultados del
proceso.
Necesidad de que el producto final sea de calidad
Que el sistema sea usable
Dificultad del votante para realizar la accin en el nuevo sistema
fcil y rpida
Lentitud para conocer los resultados de las votaciones
Recursos
Informacin y apoyo de profesionales en el proceso de votacin
Alta. Es un proyecto prioridad
Posible necesidad de resultados en un plazo menor al tiempo de
desarrollo del proyecto
Introduccin
Centro de
Investigacines
en Computacin
(CIC - TEC)
Intereses
Modernizar el sufragio
Mejorar la accesibilidad y usabilidad
Agilizar el escrutinio
Facilitar la logstica
Dificultad para la realizacin de la tarea en el nuevo sistema
Necesidad de impulsar alternativas que permitan modernizar el
sistema actual
Crecimiento de la demanda organizacional del proceso
Dificultad en la logstica y escrutinio
Recursos
Informacin
Apoyo de profesionales
Recursos econmicos
Alta. Es un proyecto prioridad
Posible necesidad de resultados en un plazo menor al tiempo de
desarrollo del proyecto
10
Introduccin
Anlisis de problemas
Problema
principal
Efectos
El sistema actual de Voto Electrnico (que an no se utiliza

de forma oficial) es poco usable para los usuarios.
Aumento en los costos de produccin

Se debe hacer un rediseo antes de que sea utilizado de la forma
actual
Disminucin en la calidad del producto

El producto se percibe como poco seguro y accesible
Dificultad en el proceso de sufragio

El producto no satisface al usuario
Genera errores en su utilizacin
Representa una curva de aprendizaje para el usuario
El usuario necesita memorizar aspectos del proceso
El producto se percibe como poco eficiente
Causas
No se tom en cuenta la usabilidad como un factor

primordial dentro del proyecto
Enfoque en la parte de desarrollo
Falta de asesoramiento por parte de un experto
El diseo se trabaj sin los procedimientos adecuados para

aplicar la usabilidad de forma adecuada
Se trabaj con personas que desconocen el tema
11
Introduccin
Objetivo principal
Fines
Medios
Objetivos
especficos
Mejorar la usabilidad del sistema Voto Electrnico

Sistema utilizable, accesible y eficiente
Aumento de la calidad del producto
Satisfaccin y fcil adaptacin del usuario al nuevo sistema
electrnico
Sistema percibido como seguro
Toma en cuenta aspectos de accesibilidad digital (para

discapacidades visuales)
Realizar un diseo que pueda relacionarse con el modelo manual de
votacin
Adecuada arquitectura de la informacin
Sistema probado con anlisis de usabilidad
Evaluar la usabilidad del sistema actual de Voto Electrnico

Disear y aplicar pruebas de usabilidad para las propuestas
Realizar una maqueta funcional y brindar las
especficaciones para la implementacin posterior del
diseo
12
Introduccin
Alcance del proyecto

Se tendr como entregables del proyecto:
Especificaciones del rediseo de la interface del sistema para ser
implementadas posteriormente por la institucin.
Maqueta funcional.
Limitaciones del proyecto

Variacin del cronograma del proyecto debido a incumplimientos de
alguna de las dems partes involucradas.
Dificultades de acceso a elementos necesarios para alguna prueba
de usabilidad en especfico.
Tamao y resolucin del dispositivo (hardware) que utiliza Voto
Electrnico; as como aspectos tcnicos del software que limiten
elementos de diseo.
Supuestos
Contar con la colaboracin del Centro de Investigaciones en
Computacin del TEC.
Colaboracin del equipo que trabaj la versin actual del sistema.
Tener la documentacin realizada desde el inicio del desarrollo de
Voto Electrnico.
Contar con el apoyo econmico del TEC.
Implementacin del rediseo producto de este proyecto.
Asesora y colaboracin de los desarrolladores del proyecto, sobre
especificaciones tcnicas propias de su campo, que deban tomarse
en cuenta en el diseo.
13
Marco metodolgico
En esta seccin se menciona el proceso de investigacin y desarrollo del

proyecto, con el fin de exponer posteriormente los principales logros o
conclusiones de cada etapa.
Anlisis de lo existente
Anlisis de necesidades
Generacin de opciones de arquitectura
Seleccin de opciones
Opcin final
Desarrollo de la maqueta funcional
Prueba de usabilidad
Documentacin y recomendaciones
Marco metodolgico
1
Arquitectura de la informacin
Usabilidad
Anlisis del inventario de contenidos
Marco terico
Iniciar urna
Votacin
Cierre de votacin
Recuperar informacin
Opciones de arquitectura
Desarrollo de opciones de diseo de arquitectura
15
Marco metodolgico
4
Seleccin de las mejores propuestas realizadas
Evaluacin de opciones
Paper prototyping
Opcin final
Concepto
Arquitectura de informacin
Necesidades
16
Marco metodolgico
7
Maqueta funcional
Desarrollo de una maqueta funcional del proyecto
Pruebas de usabilidad aplicadas a usuarios

potenciales
Documentacin
Documentacin del proyecto

Recomendaciones
17
Cronograma
A continuacin se menciona cada una de las tareas generales realizadas

en el proyecto con su punto de inicio y de final, dentro de la cantidad de
semanas disponibles para el desarrollo del mismo.
Cronograma
Actividad
Semanas
0
10
15
19
Anteproyecto
Marco terico
Generacin de opciones de
arquitectura
Evaluacin de opciones
Opcin final
Desarrollo de la maqueta
funcional
Presentacin final
19
Marco terico
En este captulo se resumen los aspectos tericos investigados que

fundamentan el desarrollo y producto final del proyecto.
Conceptualizacin
Esqueuomorfismo
Sufragio manual
Software y hardware
Situacin actual
Marco terico
Conceptualizacin
Interfaz
Es el espacio por medio del cual se pueden comunicar las personas

con las mquinas para que as los usuarios puedan operarla y
controlarla, y que esta a su vez enve retroalimentacin para ayudar
al operador a tomar decisiones y realizar tareas. En este proyecto,
es el producto final que se busca obtener.
Sneiderman, B., Plaisant, C. (2009)
Wireframes
Es una vista simplificada del contenido que aparecer en cada

pantalla del producto final. Usualmente carece de color, estilos
tipogrficos e imgenes. Los wireframes permiten establecer
funcionalidad, comportamientos y prioridades de contenido dentro
del sistema. Para finalidades del proyecto en cuestin, sern vitales
para la evaluacin y establecimiento de la propuesta final.
Brown, D. (2011) y Caddick, R., Cable, S. (2011)
Look & feel
Propiedades y caractersticas que le dan una identidad visual

nica a una interfase y pueden ser percibidos de manera diferente
de acuerdo con cada usuario. Se caracteriza principalmente por
parmetros como tipo de letra, color y disposicin de los elementos,
botones, men, etc.
El look and feel en una interfaz de usuario posee dos funciones
principales: primero, ayuda a identificar una interfaz con una
determinada compaa; y segundo, apoya la usabilidad, haciendo
que la experiencia de interaccin con la herramienta sea similar a la
que se emplea en otros productos.
Arquitectura de
informacin
Se define como el arte y la ciencia de organizar espacios de

informacin con el fin de ayudar a los usuarios a satisfacer sus
necesidades de informacin. Consiste en la estructuracin,
clasificacin y rotulado de los contenidos del sitio web. El
establecimiento de una correcta arquitectura para la interfase a
desarrollar es vital, ya que permite al usuario encontrar informacin
(diseo y definicin de ndices, clasificaciones, taxonomas y
sistemas de recuperacin de informacin y posibilita que cada
elemento de informacin pueda ser encontrado de manera rpida,
fcil y con la menor cantidad de clicks posible.
Kalbach, J. (2007)
21
Marco terico
Usabilidad
Diseo Centrado
en el Usuario
(DCU)
La Usabilidad se refiere al grado en que un producto puede ser

usado por usuarios especficos para conseguir metas especficas
con efectividad, eficiencia y satisfaccin dado un contexto
especfico de uso.
ISO 9241-11: Guidance on Usability (1998)
Se caracteriza por asumir que todo el proceso de diseo y

desarrollo del sitio o aplicacin debe estar conducido por el usuario,
sus necesidades, caractersticas y objetivos. Esta metodologa
implica involucrar desde el comienzo a los usuarios en el proceso
de desarrollo del sitio; conocer sus caractersticas, necesidades,
motivaciones; probar el sitio con los usuarios; su reaccin ante la
propuesta de diseo, su experiencia de uso e innovar siempre con el
objetivo de mejorar la experiencia del usuario.
Hassan, Y., Fernndez, F., Iazza, G.
Inventario de
contenidos
Consiste en una lista de toda la informacin contenida en un

sitio web. Estos se desarrollarn para tener una visin clara de
la informacin contenida y solicitada en la primera versin del
proyecto a desarrollar y funcionar como base de conocimiento
para los anlisis a desarrollar y los contenidos presentes en la
futura aplicacin.
Brown, D. (2011).
Personas
Es un resumen representativo de los usuarios de un sistema,

descritos usualmente como personas reales con perfiles reales.
Cada persona representa un tipo de audiencia del sistema.
Brown, D. (2011).
Mockups
Consiste en un modelo a escala o dimensiones reales de un

diseo, utilizado para demostracin, evaluaciones de diseo, entre
otros propsitos; el cual provee al menos parcialmente parte de la
funcionalidad del sistema.
Brinck, T., Gergle, D., Wood, S. (2002).
Paper
prototyping
Esta prueba consiste busca evaluar la usabilidad de un sitio o

aplicacin en desarrollo. Usuarios reales realizan tareas especficas
mediante un prototipo de papel del sitio.
Zaki Warfel, T. (2009).
22
Marco terico
Esqueuomorfismo
Viene del griego skeuos (herramienta) y morphe (forma), refiere
a una caracterstica de un producto evolucionado que mantiene
detalles del objeto original del cual proviene, detalles que
inicialmente eran necesarios para la correcta interaccin con dicho
objeto inicial, y que en el producto posterior se aplican con el fin de
hacerlo ms familiar para el usuario.
Dicho de otra forma, el esqueuomorfismo es utilizar los conceptos
de diseo y funcionalidad de objetos antiguos, en el desarrollo de
interfaces de usuario.
En su uso especfico como tendencia grfica en el diseo de
software, se aplica por medio de metforas visuales, que recuerdan
objetos fsicos que realizan funciones similares al software o a
diferentes elementos de interaccin dentro de la interfaz.
Un claro ejemplo de la utilizacin del esqueuomorfismo en el diseo
visual es el sistema operativo iOS6 de iPhone y sus aplicaciones
nativas. Como el caso de iBooks, con la estantera donde se pueden
ver todos los libros que se tienen en el dispositivo, y con la forma
tan natural para pasar las pginas de un libro, muy similar a la
forma de interaccin con un libro real.
La tendencia esqueuomrfica no es nada nueva, trminos como
escritorio para nombrar la pantalla principal de la computadora,
carpeta para denominar a un contenedor de archivos, o ventana
para el espacio que ocupa una aplicacin en pantalla, se han
utilizado desde hace ms de 30 aos.
App con interfaz esqueuomrfica

Rams Player
por Christopher Paul Gulczynski
El principal aporte de una interfaz esqueuomrfica se encuentra en

la experiencia de usuario. Al tener elementos en una interfaz que
funcionan similar otros en el mundo real, los usuarios asocian dicha
experiencia real y la aplican en la interaccin con lo que tienen en
pantalla; esas experiencias parten de conceptos conocidos, lo que
le permite al usuario interactuar con la interfaz grfica sin mayor
dificultad, evitando tener que ensearle al usuario todo un nuevo
proceso de interaccin.
23
Marco terico
Uno de los mayores puntos en contra del esqueuomorfismo tiene

que ver con la brecha generacional, los diferentes tipos de usuarios,
su nivel de experiencia con los objetos de los cuales se obtienen las
metforas visuales. Podra llegar un momento en que, por ejemplo,
los usuarios de un dispositivo mvil jams hayan interactuado con
una calculadora fsica, por lo que puede perder sentido que una
aplicacin tenga similitudes en formas e interaccin con dicho
producto fsico.
Dado que, el proyecto de rediseo de Voto Electrnico ser utilizado
por usuarios sin experiencia en la utilizacin de interfaces grficas,
se propone aplicar pruebas que permitan conocer si el uso de una
interfaz esqueuomrfica puede aportar a que dichos usuarios
relaciones de una forma ms fcil, cada elemento con su funcin.
24
Marco terico
Sufragio manual
Las juntas receptoras de votos son los organismos

electorales responsables de recibir el voto de la
ciudadana, estn conformadas por personas propuestas
por los partidos polticos, debidamente capacitadas y
juramentadas, y por auxiliares electorales. La labor en las
juntas receptoras de votos depende del protagonismo de
estos(as) agentes electorales; asumir esa responsabilidad
compartida es un deber del ciudadano y la ciudadana, en
defensa y proteccin de los derechos polticos y por la
preservacin de nuestro sistema democrtico.
(Tribunal Supremo de Elecciones, 2014)
El Tribunal Supremo de Elecciones considera importante la
formacin de los agentes electorales, por lo que, tiempo antes de
la realizacin de las elecciones, les brinda material con informacin
del proceso de eleccin.
25
Marco terico
Agentes electorales
Son las personas que de una u otra forma interactan en el proceso
electoral. Los diferentes tipos de agentes electorales se mencionan
a continuacin:
Asesores y asesoras electorales
Son funcionarias y funcionarios del TSE cuya responsabilidad

radica en integrar, instruir, juramentar, acreditar, instalar y asesorar
a quienes integran las juntas electorales y a las autoridades del
cantn.
Integrantes de las juntas cantonales
Son las personas electoras propuestas por los partidos polticos

con candidaturas inscritas y acreditadas ante el Tribunal Supremo
de Elecciones. La junta cantonal es el organismo electoral que
apoya la organizacin del proceso electoral en su cantn.
Integrantes de las juntas receptoras de votos
Son las personas electoras propuestas por los partidos polticos

con candidaturas inscritas, y acreditadas ante el Tribunal Supremo
de Elecciones; las cuales se encargan de la recepcin de votos,
de completar la documentacin electoral y de velar por la
transparencia del proceso electoral.
Fiscales
Son ciudadanas y ciudadanos nombrados por los partidos polticos

inscritos, y acreditados por el TSE, para que representen a dichas
agrupaciones ante las juntas receptoras de votos. Les corresponde
vigilar que el proceso electoral se realice con transparencia.
Auxiliares Electorales
Son agentes electorales que se encargan de velar porque la junta

receptora de votos ejecute, de manera correcta, las funciones que
le corresponden. Asisten y orientan la ejecucin de las acciones
propias de la junta. De ser necesario, deben asumir las funciones de
quienes integran la junta receptora de votos.
26
Marco terico
Observadores(as) Nacionales
Son ciudadanas y ciudadanos costarricenses propuestos por

organizaciones pblicas o privadas, acreditados(as) por el TSE, con
el fin de observar el proceso electoral y dar fe de que se desarrolla
de acuerdo con la normativa establecida. Puede coincidir, en un
mismo momento, un mximo de 5 observadores(as) de diferentes
agrupaciones, en cada junta.
Observadores(as) Internacionales
Son representantes de organismos internacionales, acreditados(as)

por el TSE, que dan fe de que el proceso electoral se desarrolla de
acuerdo con las normas establecidas.
Guas Electorales
Son personas jvenes voluntarias, acreditadas por el TSE, cuya

misin es brindar apoyo a la ciudadana con discapacidad y adulta
mayor, en los centros de votacin.
Cuerpo Nacional de Delegados(as)
Son ciudadanas y ciudadanos ad honrem, juramentados y

acreditados por el TSE, para colaborar en actividades propias del
proceso electoral.
Encargados(as) de Centro de Votacin
Personal docente o administrativo que trabaja en el centro de

votacin. Su funcin es habilitar el centro, ubicar y distribuir las
juntas receptoras de votos, as como velar por el cuidado de la
infraestructura, equipos y materiales del centro.
Electoras y electores
Son las personas mayores de 18 aos, costarricenses, inscritas en

el Padrn Electoral para ejercer su derecho al sufragio.
27
Marco terico
Formas de votar
Voto directo y secreto:
el elector pasa al recinto y vota de forma secreta
Voto asistido:
la persona electora ingresa al recinto acompaada de una persona

de su confianza, que el ayudar a realizar el voto. Dicha persona de
confianza debe ser costarricense, mayor de 18 aos, con cdula
vigente y en buen estado.
Voto pblico:
el elector informa a los integrantes de la junta receptora de votos,

por quin desea votar.
Situaciones especiales:
Si por algn motivo se ausenta una persona integrante de la junta
receptora de votos, la reemplaza su suplente lo cual se hace
constar en la Hoja de Incidencias del Padrn Registro, sin que se
interrumpa la votacin.
Si se ausenta la persona en el cargo de la presidencia de la junta
y no est su suplente para reemplazarla, las otras personas
integrantes de la junta receptora de votos nombran una o un
presidente que asuma el cargo hasta que regrese la persona titular;
en caso de empate, decide la suerte. Este cambio se anota en la
Hoja de Incidencias del Padrn Registro.
Nulidad del voto

Durante la votacin:
Se anulan los votos que se reciban fuera del tiempo y local
establecidos por el Tribunal Supremo de Elecciones.
28
Marco terico
Si despus de votar la persona muestras la papeleta
deliberadamente, se le debe impedir depositarla en la urna.
En caso de que por error, a una persona que no est inscrita en el
Padrn Registro, se le entregue material para realizar la eleccin, se
debe evitar que lo introduzca en las urnas; se anota dicho acto en la
Hoja de Incidencias.
Posterior a la votacin:
Se anulan los votos emitidos en las papeletas no oficiales, o que
sean oficiales pero que no estn firmadas al dorso por quienes
integran la junta receptora de votos.
Las papeletas marcadas en dos o ms columnas.
Las que aparezcan con la identidad de la persona.
Las que no ofrezcan la certeza de cul fue la voluntad de la persona
electora.
Tareas de las Juntas Receptoras de

Votos (JRV)
Anterior a la votacin:
Revisar que el material electoral est completo
Armar los recintos secretos con las mamparas
Llenar el Acta de Apertura de Votacin del Padrn Registro con los
nombres de las personas que integran la junta receptora de votos
presentes.
Se anotan, adems, los nombres de las personas fiscales y
auxiliares del proceso.
En la misma acta, se anotan la cantidad de papeletas recibidas.
29
Marco terico
Se colocan los productos de apoyo en un lugar visible.
Se pega la lista de electores y electoras, fuera del local.
Se verifica que las urnas estn vacas, y se sellan con cinta
adhesiva.
A las 6:00 de las maana se abre la puerta para el ingreso de los
electores.
Durante la votacin:
Al ingresar la persona, se le solicita la cdula de identidad.
Se ubica en el padrn registro a la persona.

Si est todo correcto se le solicita que rme en el Padrn Registro,
y se corrobora la rma. Cuando la persona no sabe o no puede
rmar, se escribe no rma en el espacio correspondiente y se
anota en la Hoja de Incidencias
Se desprende las papeletas y se les hace las marcas de doblado
correspondientes.
Los integrantes de la junta receptora rman las papeletas al dorso.

Se le entregan las papeletas a la persona.
Se le indica a la persona el tiempo que tiene disponible para votar.
VOTO
Al regresar la persona posterior a su votacin y despus de que las

papeletas dobladas son depositadas, se anota S en la casilla
Vot del Padrn Registro.
Se le devuelve la cdula de identidad a la persona electora.
30
Marco terico
Al cierre de la votacin
Se cierra el local a las 18:00 horas.
Se escribe la palabra No en la casilla Vot del Padrn Registro,
para aquellas personas que no se presentaron a votar.
Se cuentan las personas que se presentaron a votar y se anotan en
el Acta de Cierre y Resultado de la votacin
Se anotan la cantidad de papeletas sobrantes y se empacan.
Se abren las urnas y se revisa que cada papeleta tenga en la parte
de atrs la firma de las personas que integran la junta receptora.
Se agrupan las papeletas segn los votos que obtuvo cada partido,
as como votos blancos y posibles votos nulos.
Se cuentan y se anotan la cantidad de votos blancos
Se guardan dichos votos en la bolsa correspondiente
Se analizan los posibles votos nulos, y a los que verdaderamente
resulten nulos, se les anota en la parte de atrs de cada uno, el
motivo de la nulidad.
Se guardan los votos nulos en la bolsa Votos nulos
Se inicia el conteo de los votos.
Se guarda cada grupo de papeletas en las bolsas correspondientes.
Se anotan los resultados en el Acta de Cierre y Resultados de la
Votacin
Se revisa que dicha acta est llena y firmada por los integrantes de
la junta, auxiliares y fiscales, presentes.
Se desprende la primera hoja desprendible rotulada Certificacin
de Votos para ser guardada en el sobre correspondiente.
Se deja fuera del saco el sobre con la Certificacin de Votos para
entregarla directamente al asesor o asesora electoral o a la persona
designada por el TSE.
31
Marco terico
Se entrega a cada integrante de la junta receptora de votos y
fiscales presentes en el conteo una COPIA de la Certificacin de
Votos desprendible del original.
Se desprende la segunda hoja desprendible rotulada Mensaje
de Transmisin de Datos para comunicar el resultado, segn
corresponda.
Transmisin de datos
Existen dos maneras de transmitir los datos de la votacin

finalizada:
Por medio de una persona encargada de transmitir: el mensaje de
transmisin de datos debe ser entregado a esta persona para que
transmita los resultados.
Por medio de la persona auxiliar electoral: el o la auxiliar electoral
por medio de una llamada telefnica comunicar los resultados
del mensaje de transmisin de datos a una persona funcionaria
del TSE. En este caso, el o la auxiliar electoral recibir una clave de
seguridad que deber conservar y manejar con responsabilidad
para transmitir los resultados el da de la eleccin, por lo que debe
dominar datos importantes como distrito, cantn, provincia y el
nmero de la junta receptora de votos, nombre de quienes integran
las juntas receptoras de votos y los resultados de la votacin, segn
el tipo de puesto a elegir que le solicita el operador u operadora.
32
Marco terico
En este apartado se mencionan algunos de los aspectos que son
evaluados en las pginas web, que se utilizan con el fin de conocer
si son accesibles, tanto para personas con un nivel de experiencia
mnimo en el uso de pginas web, como para aquellas que
presentan dificultades visuales y que necesitan cierta adaptacin
del contenido para poder interactuar correctamente con ste.
El objetivo es determinar cuales se pueden aplicar en este proyecto,
que, aunque no es una herramienta web, presenta similitudes en
interaccin y usuarios.
Se tom como referencia varios estudios realizados entorno a la
accesibilidad digital para personas adultas mayores, y las normas
de la World Wide Web Consortium (W3C), la cual es una comunidad
internacional que desarrolla estndares para el crecimiento de la
web a largo plazo.
Facilidad de lectura de la pgina

Tiene un aspecto limpio y organizado.
Proporciona un claro punto de partida.
Agrupa los elementos de forma que se muestren relaciones.
Se destacan palabras claves.
Utilizar tipografa sans serif regular o negrita.
Emplear maysculas y minsculas.
Utiliza interlineado doble.
Alineacin a la izquierda.
Hace notable los ttulos, realiza una diferenciacin de tamao con el
texto general.
33
Marco terico
Situa los temas ms importantes en el centro, y no en los
mrgenes.
Emplea seales visuales que dirijan la atencin del usuario a los
elementos importantes.
Es fcil diferenciar entre contenido y publicidad.
Relacin figura-fondo
El color del texto y de los elementos de interaccin deben ser
diferente al color del fondo.
Los elementos interactivos destacan entre aquellos a los que no se
les puede dar click.
Divisiones de texto adecuadas.
Utiliza una lnea de espacio en blanco entre secciones.
Facilidad de interaccin con los

elementos
Son botones los elementos que representen acciones.
La etiqueta de los botones, imgenes o iconos utilizados en estos,
representan claramente la accin que realiza el botn.
Se representa apropiadamente los estados del botn.
El espacio entre botones y enlaces debe ser suficiente para evitar el
error (al menos 2 pixeles)
34
Marco terico
Interaccin con la informacin

Es posible dar click en las vietas.
Presenta conos y el significado de los iconos es claro, sin
necesidad de que el usuario tenga amplia experiencia.
Evita el hipertexto.
Usa elementos convencionales de interaccin.
Se representan los enlaces de una forma estndar, mantenindola
dentro de toda la pgina.
Los enlaces son claramente diferenciable del texto general.
Desplazamiento en la pgina
El desplazamiento vertical es mnimo.
No hay desplazamiento horizontal.
Si se utilizan pop-ups se mantienen abiertas el tiempo suficiente
para ser ledas, adems sin la necesidad de tener scroll para
desplazarse en ellas.
Utiliza checkboxes en lugar de mens desplegables.
Grado de control del usuario en la

interaccin
El texto no pasa de forma automtica.
Los mens son estticos y evita las animaciones cclicas.
Se proporciona un enlace para volver al inicio de la pgina.
35
Marco terico
Retroalimetacin
Presenta mensajes de espera o de confirmacin.
La retroalimentacin se da por otros medios adems del visual.
Informa de los errores, de forma clara y no alarmista.
Indicar los problemas y sugiere soluciones.
Se utilizan sistemas de validacin antes de que el usuario enve la
informacin en los formularios.
Accesibilidad de la informacin
La cantidad de informacin no es excesiva.
Las etiquetas son lo suficientemente descriptivas para que sea fcil
predecir cul es el contenido.
Jerarquiza adecuadamente la arquitectura de la informacin.
Se presentan los enlaces agrupados por tema.
El camino para realizar una tarea no debe ser muy extenso (de 2 a 5
clicks)
Proporciona informacin de apoyo en el camino para realizar una
tarea.
Enfoque de la escritura
El contenido est en voz activa, dirigida a usted
Utiliza frases cortas, simples y directas.
36
Marco terico
Se comienza con palabras claves y relevantes.
Los ttulos estan hechos como preguntas amigables.
Usan un lenguaje natural para el usuario.
Ofrecer un glosario, en caso de ser necesario.
Los conceptos o informacin tcnica se presentan en un lenguaje
sencillo.
Cada prrafo contiene una sola idea.
Utiliza la mnima cantidad de texto.
Emplea rtulos estndar.
37
Marco terico
Software y hardware
En cuanto a las
especificaciones tcnicas de
hardware y software que se
utiliza en la versin actual de
Voto Electrnico se tiene:
Kit de desarrollo utilizado: BeagleBoard-xM

Microprocesador de 1GHz ARM Cortex- A8, 512 MB de memoria
RAM y dispone de puertos de expansin, USB, Ethernet, HDMI,
RS232, audio y video para paneles LCD
Sistema operativo ngstrm
Aplicaciones desarrolladas mediante el ambiente Qt 4.7 C++.
Adems:
Pantalla tctil
1280x800 px
7
Impresora de matriz de
puntos
Lector de cdulas en
formato PDF417
Teclado externo
38
Marco terico
Situacin actual
Se describirn a continuacin aspectos relacionados al proceso
de votacin ideado para la primera versin de Voto Electrnico,
as como un anlisis del diseo de la interfaz grfica del sistema,
tomando en cuenta arquitectura de la informacin, contenidos, y
elementos grficos, todo en funcin de la usabilidad.
Anlisis de personas
Se ha clasificado los usuarios segn sus perfiles, necesidades y
funciones, para as, definir de mejor manera, una estructura en la
jerarqua de la informacin y estructura de la aplicacin, que les
permita resolver de mejor manera sus tareas.
Antecedentes
El sistema ha sido desarrollado para ser utilizado por dos tipos de

usuarios: el elector y el miembro de la Junta Receptora de Votos.
Los dos tipos de usuarios, cumplen funciones diferentes, pero
utilizan el mismo sistema. El elector depende de que el miembro
de la Junta Receptora d inicio al proceso de votacin dentro del
sistema, para que pueda ejercer su derecho al voto.
Las tareas que el miembro de la Junta Receptora de Votos (JRV)
son administrativas, y abarcan desde funciones antes de iniciar el
proceso electoral (de preparacin del mismo), funciones durante
el proceso, que se realizan muy pocas veces, solamente en caso
de ser necesarias, y posterior al proceso. En estas ltimas recae el
mayor atractivo de la herramienta para los miembros de la Junta
Receptora de Votos, ya que facilita el proceso de entrega de los
resultados de la urna y el manejo del acta de cierre.
39
Marco terico
Caracterizacin
de las personas
Jorge Abarca
Elector
25 aos
El proceso para votar no es tan complicado, pero si me parece

que se pueden mejorar muchas cosas, empezando por cmo se
ve
Confort tecnolgico
Alto. Tiene mucha experiencia en la utilizacin de
dispositivos mviles y computadoras
Capacidad visual
Alta. No necesita lentes u otra ayuda para leer
Motora fina
Su capacidad en motora fina es alta. Interacta
adecuadamente con botones pequeos y otros
elementos en dispositivos tctiles
Resumen
100%
75%
50%
25%
0%
40
Marco terico
Elsa Scott
Electora
72 aos
El nuevo voto, es muy complicado, habemos personas que no

manejamos una computadora ni nada de esas cosas. Debe ser
muy fcil para que podamos usarlo
Confort tecnolgico
Bajo. No tiene experiencia alguna con dispositivos
mviles. Lo ms tecnolgico que utiliza son los
radios y la televisin
Capacidad visual
Media - baja. Utiliza lentes para leer.
Motora fina
Su capacidad en motora fina es media. En cuanto
a precisin, puede que le sea difcil la interaccin
botones pequeos en la interfaz.
Resumen
100%
75%
50%
25%
0%
41
Marco terico
Laura Fernndez
Miembro de la Junta Receptora
24 aos
El sistema es complicado, no se parece a las cosas que maneja

uno normalmente. Si lo utilizo un rato s que hacer en cada
caso, pero la primera vez es difcil
Confort tecnolgico
Alto. Tiene mucha experiencia en la utilizacin de
dispositivos mviles y computadoras
Capacidad visual
Alta. No necesita lentes u otra ayuda para leer
Motora fina
adecuadamente con botones pequeos y otros
elementos en dispositivos tctiles
Resumen
100%
75%
50%
25%
0%
42
Marco terico
Freddy Ramrez
Miembro de la Junta Receptora
43 aos
Realizar las tareas es difcil. Uno se tiene que equivocar

algunas veces para aprender a utilizar la herramienta. Lo
bueno es que ahorra tiempo al final del proceso
Confort tecnolgico
Medio. Maneja muy bien su telfono con sistema
operativo android. Aunque le ha costado aprender.
Nunca ha utilizado una computadora.
Capacidad visual
Alta - media. Utiliza lentes para ver de lejos
Motora fina
adecuadamente con los elementos en
dispositivos tctiles
Resumen
100%
75%
50%
25%
0%
43
Marco terico
Problemas y
necesidades
expresadas
En interaccin directa con los usuarios, stos definieron cules son

los problemas con el sistema actual y qu esperan ellos de ste.
Necesidades
Persona electora
El sistema debe ser fcil de

usar y parecer confiable.
Se debe parecer al sistema de
votacin manual, para que sea
ms fcil reconocer los pasos
que se debe seguir.
Para la realizacin del proceso
de eleccin en el sistema
electrnico, la persona no
debe necesitar de una amplia
experiencia en el uso de
dispositivos similares.
Miembros de la Junta
Receptora de Votos
(JRV)
Administrar de forma fcil el

proceso.
Que el proceso para anular un
voto sea ms fcil y no lleve
tanto trmite.
Problemas
El proceso es complicado, el
sistema actual no posibilita
realizar las acciones de una
forma fcil y rpida.
Los elementos en pantalla
son muy pequeos, es difcil
la lectura para personas con
problemas visuales.
El proceso para llegar a hacer

algo es complicado y conlleva
muchos pasos intermedios.
No es fcil entender lo que hay
que hacer en cada punto.
Principalmente es importante
que se agilice el proceso de
cierre de la urna, lo que es el
manejo del Acta de Cierre y
Resultados de la Votacin
44
Marco terico
A continuacin se muestran las funciones que puede realizar cada
actualmente cada usuario dentro del sistema:
Persona electora
Votar:
Por un candidato o partido
Nulo
En blanco
Miembro de la
Junta Receptora de Votos (JRV)

Ingresar un nuevo usuario
Ver lista de usuarios
En las opciones anteriores,
usuario refiera a un miembro
Agente Electoral, y no a un
miembro del Padrn Registro.
Ver papeletas cargadas

Eliminar la papeleta
cargada
Cargar una nueva papeleta
Identificacin de
necesidades
Se identifican las necesidades
reales de cada usuario, para
as definir si alguna de las
funciones existentes en el
sistema se debe eliminar,
agrupar con otra, o si por el
contrario, se debe agregar una
nueva funcin.
Ver lista de miembros de

mesa
Eliminar la lista de los
miembros de mesa cargada
Cargar una lista de
miembros de mesa
Anular un voto
Cerrar la urna
Persona electora
Votar:
Por un candidato o partido
Nulo
En blanco
45
Marco terico
Miembro de la JRV
iniciar las votaciones
agregar o eliminar usuarios
anular un voto
cerrar la urna
imprimir el informe final de conteo
Funciones por
etapa
Se clasifican las necesidades de los usuarios por la etapa del

proceso de eleccin en la que pueden ser realizadas.
Persona electora
Preparacin
Eleccin
Finalizacin
Miembro de la JRV
iniciar las votaciones
Votar

anular un voto
cerrar la urna
imprimir el informe final de

conteo
46
Marco terico
Conclusiones
del anlisis de
personas
Segn el anlisis de las personas, se puede concluir que todas

poseen un nivel de confort tecnolgico diferente, que vara entre
bajo y alto, por lo que se debe tomar en cuenta dicho aspecto para
hacer que el sistema sea lo ms familiar posible para todos los
usuarios.
Se logr definir adems determinadas actitudes relacionadas con el
confort tecnolgico, que definen la predisposicin del usuario a usar
el sistema y por tanto a acercase a su recinto respectivo a realizar el
voto.
Dichas conductas definen dos tipos de usuario:
Amigo de la tecnologa
Usuario que utiliza constantemente dispositivos electrnicos
como celulares, tabletas, o computadoras, que dado este nivel de
familiaridad con la tecnologa, no temen probar sistemas nuevos,
como el Voto Electrnico.
Que adems, estn acostumbrados a ciertos estndares de
interaccin digital, y que tendern a evaluar el sistema de voto
segn dichos estndares.
47
Marco terico
Temeroso de la tecnologa
Son los usuarios que no tienen contacto con algn tipo de
tecnologa similar a la herramienta Voto Electrnico. Por tanto, la
mayora de las ocasiones, temen probar estos sistemas. En este
caso especfico seran los usuarios que preferiran no votar porque
no quieren enfrentarse al sistema.
Estos usuarios carecen de esquemas mentales relacionados
a interaccin con interfaces grficas, por lo que se debe tratar
de hacer dicha interaccin lo ms simple posible, evitando as
actitudes negativas hacia el producto.
Relacionado con lo anterior, ser importante analizar an ms el

sistema manual para identificar qu elementos se pueden tomar e
integrar al sistema electrnico, y as aumentar la identificacin del
usuario con el proceso.
Tambin se debe tomar en cuenta que el rango de edades de los
usuarios vara, e integra todas las personas mayores de 18 aos,
por lo que hay variables fsicas, propias del usuario, que pueden
interferir en la interaccin con el sistema.
48
Marco terico
Proceso de votacin
eletrnica
En cuanto al proceso para que el usuario realice la votacin, para la
versin existente de Voto Electrnico, est ideado de la siguiente
forma:
Junta Receptora de
Votos (JRV)
Urna
electrnica
Urna
fsica
Identificacin del elector
Activacin del sistema
Se deposita el comprobante
El elector debe presentar un

cdula de identidad a los
miembros de la JRV.
El elector pasa la tarjeta sobre

el lector de la urna electrnica,
para activar el sistema e iniciar
la votacin
Al finalizar su votacin,
la persona electora debe
depositar el comprobante
recibido en la urna. Esto
permitir posteriormente, en
caso de ser necesario, un
conteo manual de los votos.
Elector recibe la tarjeta de

activacin
Votacin
Los miembros de la JRV le

entregan al elector una tarjeta
cuya funcin ser activar la
urna electrnica en antes de
empezar su votacin
Impresin del comprobante
Realiza la votacin
seleccionado la opcin de su
preferencia en pantalla.
Por cada eleccin realizada,

el sistema imprime un
comprobante para el usuario
49
Marco terico
Arquitectura de la
aplicacin
La arquitectura de la aplicacin muestra la relacin entre sus
secciones, permitiendo de esta forma realizar observaciones
sobre si la cantidad de pasos para realizar determinada tarea, es la
correcta, si hay rutas confusas para llegar a un punto del sistema; y
de esta forma tomar decisiones para reestructurar la aplicacin de
forma que se ms usable.
Ingresar nuevo usuario

Vista previa
Visualizar papeletas y plantillas
Pantalla inicial
Ingresar conguracin
Visualizar miembros de mesa
Votaciones
Eleccin presidencial
Eleccin de diputados
50
Marco terico
Conclusiones
del anlisis de la
arquitectura
El anlisis de la arquitectura muestra una inconsistencia en cuanto

a la jerarqua de las funciones dentro del sistema, ya que, aunque
inicialmente se tienen seis funciones principales en pantalla
(ingresar nuevo usuario, informe final, ingresar configuracin, anular
voto, cierre de urna y votaciones) solamente algunas tres de ellas
(ingresar nuevo usuario, ingresar configuracin y votaciones) llevan
a una nueva pantalla. Mientras que las dems despliegan sus
opciones en una ventana emergente.
Adems, estudiando cada funcin como un caso de uso, se
determin que no todas las funciones principales de la aplicacin
estn activas durante todo el proceso, sino que dependen de otras,
como se muestra a continuacin:
Estn siempre activas:
Configuracin
Si est activa Votacin, entonces:
Anular voto
Cerrar urna
Informe final
Si se ha seleccionado Cerrar urna, entonces:
Informe final
Anular voto
Votacin
= Activa
= Inactiva
Por lo que trabajar en nueva arquitectura es fundamental,
principalmente en funcin de presentarle al usuario solamente las
opciones que necesita en cada situacin.
51
Marco terico
Inventario de contenidos
El inventario de contenidos muestra los elementos de la
herramienta Voto electrnico actualmente, adems de indicar
que tipo de elementos son, se precisa la organizacin y navegacin
entre secciones por medio de dichos elementos.
Todo esto con el objetivo de analizar qu elementos son realmente
necesarios para la interaccin, y aportar a mejorar la arquitectura
de la informacin del sistema.
Para poder colocar el inventario en este documento, se ha dividido
en seis partes:
Ingresar configuracin
Anular voto
Cierre de urna
Informe final
Votaciones
Las conclusiones de esta seccin se realizarn en conjunto con las
conclusiones del anlisis grfico.
52
Marco terico

Pantalla inicial
Ingresar Nuevo Usuario
Men principal
Men principal
Rol
Votante (opcin por defecto)
Anular Voto
Vista Previa
Presidente Junta Receptora
Opciones
Informe Final
Men secundario
Tcnico del TSE
OK
Cierre de Urna
Home
Auxiliar TSE
Pop ups
Si los datos son

correctos
OK
Datos correctos
Error
Ingresar Conguracin
Miembro de mesa
Votaciones
Miembro del TSE
Otras opciones
Cdula
Opciones
Apagar
Nombre
OK
Cerrar Sesin
Primer apellido
Si los datos son

incorrectos
Segundo apellido
Smbologa
Animacin
Telfono 1
Telfono 2
Botn
Usuario
Combo box
Contrasea
Formulario
Imagen
Justicacin
Tabla
Opciones
Texto
Registrar
Pantalla de seleccin
Pop up
Vericar
Home
Elementos fsicos
que intervienen
Rol
Cdula
Nombre
Primer apellido
Segundo apellido
Telfono 1
Telfono 2
Home
53
(Cierra el pop up)
Error: Datos Incorrectos
(Cierra el pop up)
Marco terico
Ingresar configuracin
Pantalla inicial
Men principal
Banner
Isologo VE
Si hay papeletas
cargadas
Si no hay
papeletas
cargadas
Pop ups
Banner
Pop ups
Error
Isologo VE
Borrado
Exito
Error: No existe papeletas cargadas
Papeleta
Est seguro de borrar todas las

papeletas actuales?
Se han eliminado las papeletas con xito
Candidatos
Opciones
OK
Anular Voto
Home
Informe Final
Men principal
Opciones
Cierre de Urna
Papeletas y plantillas
OK
Ingresar Conguracin
Icono Sin nombre
Nombre del partido
OK
Votaciones
Icono Sin nombre
Nombre del candidato
Cancel
Otras opciones
Miembros de mesa
Bandera del partido
Apagar
Icono Sin nombre
Fotografa del candidato
Cerrar Sesin
Icono Sin nombre

Men secundario
Smbologa
Home
(No est funcionando)
Presidencial
(Cierra el pop up)
Diputado
Candidatos
Nombre del partido
Animacin
Botn
Bandera del partido
Combo box
Formulario
Imagen
Tabla
Texto
Alcalde
Candidatos
Nombre del partido

Pop up
Elementos fsicos
que intervienen
Bandera del partido

Navegacin entre papeletas
Izquierda
Derecho
Men secundario
Abrir
Abrir
Home
Borrado
54
(Cierra el pop up)
Opciones
(Cierra el pop up)
Marco terico
Anular voto
Pantalla inicial
Pop ups
Men principal
Justicacin
Anulacin de votos
Razn por la cual se anulan los votos:
La anulacin de votos ha concluido con

xito
Si hay una
sesin activa
Anular Voto
Opciones
Informe Final
OK
Cierre de Urna
Cancel
Smbologa
Ingresar Conguracin
OK
Botn
Combo box
Formulario
Opciones
(Cierra el pop up)
Animacin
(Cierra el pop up)
Imagen
Tabla
Texto
Votaciones
Otras opciones
Apagar
Cerrar Sesin
Si no hay una
sesin activa
Anular voto
Error: No hay una sesin de voto activa
Opciones
OK
(Cierra el pop up)
Pop up
Elementos fsicos
que intervienen
Marco terico
Cerrar la urna
Pantalla inicial
Pop ups
Men principal
Cierre de Urna
Justicacin
Cierre forzado
Est seguro que desea realizar el cierre

de la votacin?
Razn por la cual se anulan los votos:
El cierre de la Urna ha concluido con xito
Opciones
Opciones
Informe Final
Opciones
OK
OK
Cierre de Urna
OK
Cancel
Ingresar Conguracin
Cancel
Si no se ha
cerrado la urna
Anular Voto
(Cierra el pop up)
(Cierra el pop up)
Smbologa
Animacin
Botn
Combo box
(Cierra el pop up)
Formulario
Imagen
Tabla
Texto
Votaciones
Otras opciones
Apagar
Cerrar Sesin
Si ya se ha
cerrado la urna
Pop up
Cierre forzado
Elementos fsicos
que intervienen
Ya se ha cerrado la urna
Opciones
OK
(Cierra el pop up)
Marco terico
Informe final
Pantalla inicial
Pop ups
Men principal
Informe nal de cierre
Seguro que desea realizar el informe

nal de cierre
El archivo de Informe nal de cierre fue

creado exitosamente
Informe Final
Opciones
Opciones
Cierre de Urna
OK
OK
Ingresar Conguracin
Cancel
Si se ha cerrado
la urna
Anular Voto
(Cierra el pop up)
Smbologa
Animacin
Botn
Combo box
Formulario
(Cierra el pop up)
Imagen
Tabla
Texto
Votaciones
Otras opciones
Apagar
Cerrar Sesin
Si la urna est
habilitada

Error: La urna debe estar inhabilitada
Opciones
OK
Si ya antes fue
creado el informe
(Cierra el pop up)

Error: El informe de cierre ya fue creado
Opciones
OK
(Cierra el pop up)
Pop up
Elementos fsicos
que intervienen
Marco terico
Votaciones
Pantalla inicial
Pop ups
Elecciones 2014
Elecciones 2014 - 2018
Pop ups
Error
Elecciones 2014
Votacin
Error: La votacin ya se ha cerrado
Para iniciar la votacin utilice la tarjeta
Presidente
Anular Voto
Opciones
Isologo del TEC
Informe Final
OK
Men principal
Si se ha cerrado
la urna
(Cierra el pop up)
Pop ups
Votacin
Est seguro de su eleccin?
Diputados
Papeleta
Opciones
Siglas del partido
OK
Cierre de Urna
Fotografa del candidato
Ingresar Conguracin
Bandera del partido
Votaciones
Casilla de seleccin
Si no se ha cerrado
la urna
Cancel
Si se ha elegido
un candidato
(Cierra el pop up)
Apagar
Aceptar
Est seguro de realizar su voto en Nulo?
Cerrar Sesin
Voto nulo
Opciones
Voto en blanco
OK
Smbologa
Animacin
Botn
Tarjeta de activacin
Cancel
Votacin
Diputados
Papeleta
Opciones
Papeleta
Opciones
Siglas del partido
OK
Siglas del partido
OK
Bandera del partido
Cancel
Opciones
OK
Cancel
Si se ha elegido
un candidato
(Cierra el pop up)
Casilla de seleccin
No ha elegido ningn candidato
Opciones
Pop ups
Bandera del partido
Error
Votacin
Otras opciones
Si no se
ha elegido
un candidato
(Cierra el pop up)
Si no se
ha elegido
un candidato
Aceptar
Votacin
Voto nulo
Voto en blanco
Opciones
Opciones
OK
Cancel
(Cierra el pop up)
OK
(Cierra el pop up)
Casilla de seleccin
Error
Opciones
Si se ha elegido
un candidato
(Cierra el pop up)
Error
Opciones
Aceptar
Votacin
Voto nulo
Voto en blanco
Opciones
Opciones
OK
(Cierra el pop up)
Cancel
(Cierra el pop up)
Se utiliza la tarjeta de activacin para continuar
Combo box
Votacin
Votacin
Votacin
Formulario
Est seguro de realizar su voto en Blanco?
Opciones
Opciones
Opciones
OK
OK
OK
Imagen
Tabla
Texto
Cancel
Cancel
(Cierra el pop up)
Pop up
Elementos fsicos
que intervienen
58
(Cierra el pop up)
Si no se
ha elegido
un candidato
Cancel
(Cierra el pop up)
OK
(Cierra el pop up)
Marco terico
Anlisis grfico y de
informacin
Con este anlisis se determina la coherencia de la forma, color y
posicin de cada uno de los elementos, evaluando los requisitos
que deben de cumplir para una adecuada interaccin del usuario
con stos.
Adems se toma en cuenta para el anlisis caractersticas de
contexto, que de igual forma apoyan la usabilidad de la herramienta,
como lo son aspectos de retroalimentacin, enfoque de la escritura,
interaccin con la informacin y facilidad de lectura.
Este anlisis se realiz con la colaboracin de usuarios potenciales
del sistema, como lo son las personas mayores de dieciocho
aos inscritas en el padrn electoral y las que alguna vez se han
desempeado como agente electoral en un proceso electoral
nacional.
Estos usuarios probaron el sistema actual, realizando tareas
predeterminadas para evaluar los aspectos descritos inicialmente,
como medio para evaluar los aspectos grficos y para fundamentar
las conclusiones que se realizaron en los anlisis de la arquitectura
y del proceso electoral.
59
Marco terico
Conclusiones del
anlisis grfico y
de informacin
Opciones iniciales
Pantalla inicial del sistema Voto
Electrnico
1.
Hay opciones en esta pantalla que no pueden ser accedidas

en todo momento y no muestran esto al usuario.
Esto puede provoc que el usuario crea que el sistema no funciona
o que ha realizado de forma incorrecta una accin.
2.
La jerarqua de las opciones no es la correcta.

Haciendo que el usuario tarde ms en realizar las acciones; adems
que puede confundir los pasos para realizar alguna accin.
3.
Se utiliza una agrupacin vertical de los elementos sin razn

aparente.
Esto evita una lectura natural de los elementos en pantalla.
4.
Existen algunos botones de tamao menor a 44 px, lo cual

es inaccesible en dispositivos tctiles.
Esto hace inaccesible las funciones relacionadas con dichos
botones
60
Marco terico
Ingresar
configuracin
Seccin de ingresar
configuracin del sistema Voto
Electrnico
3
4
1.
Elementos grficos iguales con diferente funcin.

Provoca que se piense que el sistema no responde como debe ser o
que el usuario cometi un error.
2.
Elementos con la grfica de botn empleada en la interfaz,

pero que no son botones
Provoca que el usuario crea que el sistema no responde.
3.
Se utilizan iconos sin apoyo de una palabra que los

describan
Confunde al usuario y provoca que ste se equivoque o que no
utilice las funciones asociadas a dichos iconos.
4.
En algunos casos los iconos utilizados no representan su

verdadera funcin (por ejemplo: un icono de home se
utiliza para atrs)
Evita una efectiva ubicacin del usuario dentro del sistema.
5.
No se muestra el nombre de la seccin.

Evita una adecuada ubicacin del usuario dentro del sistema.
61
Marco terico
Ingresar nuevo
usuario
Seccin formulario, para

ingresar un nuevo usuario.
A la izquierda: datos del usuario
a ingresar. A la derecha: usuario
y contrasea de quien realiza
la accin, as como un espacio
para justificar el ingreso del
nuevo usuario.
Abajo, a la derecha: opciones
para terminar la accin
(registrar, verificar, o atrs)
1.
Se solicita usuario y contrasea para confirmar la accin.

Es comn en otros sistemas solicitar la contrasea antes de
acceder a las opciones edicin o al iniciar el sistema.
2.
Carece de formato para ingresar los datos

Se le informa al usuario el tipo o la cantidad de caracteres que debe
ingresar en determinada seccin del formulario. ste es un aspecto
bsico de accesibilidad digital.
3.
4.
5.
Registrar: es la opcin para

guardar el usuario.
Verificar: botn para

ver la lista de usuarios
registrados.
Botn para regresar.
El usuario que prueba la

herramienta no sabe si se debe
presionar antes o despus del
botn de verificar.
En la prueba se pens que

serva para verificar si la
informacin ingresada es
correcta antes de registrar el
usuario
Su funcin no se relaciona con

su icono y se repite dentro de la
interfaz.
62
Marco terico
Presidente
Visualizacin de
papeletas
1
Seccin que muestra las

papeletas cargadas, adems
de que permite eliminarlas para
cargar un nuevo archivo.
1.
La opcin para finalizar la carga de una nueva papeleta

permanece activa aunque no se haya cargado la nueva
papeleta.
Confunde al usuario que piensa que es una funcin que puede
utilizar desde el inicio.
2.
Para agregar una nueva papeleta se debe eliminar la

existente antes.
Si el usuario no sabe que se debe eliminar la papeleta existente,
el sistema le informa de un error al cargar la nueva papeleta, sin
informar qu tipo de error es, porque sucede o cmo lo puede
solucionar
3.
Al llegar a la ltima papeleta y tratar de ir ms all el

sistema informa de un error: Error: Ya se mostraron
todas las papeletas
La palabra error alarma a los usuarios, que dudan si el error fue
provocado por ellos mismos y dudan del sistema.
63
Marco terico
Elecciones 2014
Presidente
00:05:15
3
4
Votacin presidencial
Seccin para realizar la
votacin presidencial.
1.
La jerarqua del nombre de la pgina no es suficiente

Se resalta ms Elecciones 2014, esto desubica al usuario.
2.
Se muestra en pantalla el tiempo que lleva el usuario en

la urna, accin que no se realiza de forma alguna en la
votacin manual
Mostrarle en pantalla al elector, el tiempo que lleva en la urna, puede
afectar su rendimiento al votar. Adems que muchos usuarios
desconocen el tiempo que poseen para realizar su eleccin.
3.
Hay mucho espacio vaco en contraste con lo pequeo que

son las casillas de eleccin
Ese espacio se podra aprovechar para realizar una mejor
distribucin de los elementos.
4.
El tamao del texto no es el adecuado

Muchos usuarios manifestaron que era difcil leer los datos que se
presentan en las papeletas.
64
Marco terico
Confirmacin de
Votacin
4
Ventana emergente que

permite confirmar la eleccin
1.
Falta informacin de los candidatos

La cantidad de informacin que se muestra no es la misma que
muestra la papeleta fsica
2.
Retcula de 6x2
Se tiene pensando incluir hasta doce candidatos en la pantalla, lo
cual lleva a una menor legibilidad y posibilidad de interaccin.
3.
El pop-up de confirmacin no informa cual fue la eleccin

del usuario
Por lo que la persona electora no sabe qu eleccin est
confirmando, adems que la ventana emergente queda sobre la
mayor parte de la papeleta, lo que en la mayora de las ocasiones
imposibilita ver la opcin seleccionada.
4.
Los botones Voto nulo y Voto en blanco se encuentran a

la par del botn para confirmar la eleccin.
Esto hace pensar al usuario que debe seleccionar alguna opcin
de la papeleta antes de elegir votar nulo o en blanco, esto apoyado
por que dichas opciones se encuentran en la parte inferior de la
pantalla.
65
Marco terico
Los colores que se han elegido para las papeletas no corresponden

a los utilizados en las papeletas fsicas. Tampoco forman parte de
algn esquema cromtico adecuado, o brindan alguna mejora en
usabilidad.
Retroalimentacin
Ejemplo de un pop-up
informativo que aparece en
Voto Electrnico
Error
Error: Ha ocurrido un error

OK
Tal como este pop-up, muchos otros tienen las mismas

caractersticas:
No informan cul es el error que ocurrido.
No informan porque ocurri el error.
No brinda una posible solucin para el usuario.
La etiqueta del botn no corresponde a la informacin que aparece
en el pop-up.
Mezcla informacin en espaol e ingls.
Botones
OK
Aceptar
Diferencias en forma:
Se utilizan dentro del sistema muchas formas para los botones, lo
que hace que sea ms difcil para el usuario reconocerlos como
tales.
66
Marco terico
Buscar
Registrar
Diferencias en peso visual:

Algunos iconos son muy simples, con pocos detalles, mientras que
otros son muy complejos y con elementos muy pequeos que no
se reconocen de forma fcil.
Verificar
Diferencias en el uso del color

En algunos caso se utiliza el icono solamente en blanco, mientras
que otros iconos tienen adems negro.
Adems el contraste en algunos casos no es el mejor, como cuando

se utilizan elementos en negro sobre fondo azul, lo que hace que
estos elementos pasen desapercibidos
Similitud de forma en diferentes iconos:

Confunde al usuario el hecho de ver iconos con formas similares en
botones cuyas funciones son diferentes.
67
Marco terico
Para ste anlisis se tom informacin de

diversos sistemas desarrollados en Estados
Unidos, el sistema de voto electrnico de
Panam, Per y Argentina
Estados Unidos
Panam
Se tom en cuenta el proceso de votacin,

elementos fsicos empleados en el proceso
y diseo de la interfaz grfica de la
herramienta.
Per
Argentina
68
Marco terico
Anlisis los procesos de

votacin
Al final de esta seccin se podr determinar aspectos comunes en
los procesos en cada uno de los diferentes pases, desde etapas
del proceso hasta la interaccin de los participantes durante el
desarrollo de la eleccin.
Adems se har referencia a las funciones de los productos
fsicos que interfieren en el proceso, para posteriormente realizar
recomendaciones para su aplicacin en Voto Electrnico
69
Marco terico
OMPE - Per
Proceso de votacin
Mesa
Cabina de votacin
Presenta DNI
Recibe la tarjeta de
activacin
Elector
Recibe DNI
Insertar DNI en el
lector de cdigo de
barras
Comprobar la
indentidad del
elector
Retirar DNI
Entregar tarjeta de
activacin
Inserta la tarjeta de
activacin en la
ranura de la mquina
Mesa
Vota por un
candidato
Conrma su voto
Vota por un
candidato
Vota nulo
Vota nulo
Vota en blanco
Vota en blanco
Conrma su voto
Recoje la constancia
Retira la tarjeta de
activacin
Deposita la
constancia
Devuelve la tarjeta
de activacin
Vericar que se
deposite la
constancia
Recibir tarjeta de
activacin
Entrega DNI a 3er

miembro
Miembros de
mesa
Recibir la DNI
Entregar la DNI
Recibe su DNI
Marco terico
OMPE - Per
Elementos
utilizados
El siguiente listado corresponde a los elementos que intervienen

en el proceso de votacin, cuya interaccin con el usuario debe ser
analizada para rescatar informacin que deba desplegarse en la
interfaz grfica o para brindar posibles recomendaciones para un
posible rediseo del producto.
DNI
Permite comprobar identidad del elector
Mquina para comprobar identidad de elector

Muestra informacin bsica del elector
Inicia la tarjeta de activacin
Tarjeta de activacin del sistema

Activa la mquina para votacin
Pantalla de votacin
Informa que se debe insertar la tarjeta de activacin
Permite realizar la votacin
Impresora de rollo
Imprime los datos de la votacin que ha realizado el elector
Contancia de votacin
Sirve como medio de comprobacin
Permite otra manera de cuantificar la eleccin
Buzn para depositar constancia de voto

Contiene las constancias de votacin
Protege las constancias de votacin
Evita que los datos impresos sean observados
Memoria USB
Contiene los datos finales de la eleccin
71
Marco terico
vot.ar Argentina
Proceso de votacin
Mesa
Cabina de votacin
Presenta DNI
Recibe la papeleta de
votacin
Elector
Recibe DNI
Miembros de
mesa
Separa una parte de

la papeleta de
votacin
Entrega papeleta de
votacin
Inserta la tarjeta de
papeleta en la ranura
de la mquina
Mesa
Vota por un
candidato
Vota por un
candidato
Vota nulo
Vota nulo
Vota en blanco
Vota en blanco
Conrma su voto
Espera a que se
imprima la papeleta
y la recoge
Verica su votacin
colocando la seccin
del chip de la
papeleta sobre la
parte lectora
Dobla papeleta
Desprende segundo
troquel de la
papeleta
Deposita en la urna
Firma registro de
empadronamiento
Vericar que se
deposite la papeleta
Entregar la DNI
Recibe DNI y
certicado de
votacin
Marco terico
vot.ar Argentina
Elementos
utilizados
El siguiente listado corresponde a los elementos que intervienen en

el proceso de votacin electrnico de Argentina, cuyo nombre del
sistema es vot.ar
DNI
Papeleta nica de votacin

Activa la unidad de votacin
Contiene los datos de la eleccin de cada votante
Funciona como comprobante de la votacin
Permite al elector verificar sus datos de la votacin
Pantalla de votacin
Informa como insertar la papeleta
Permite realizar el voto
Permite visualizar los datos de la votacin realizada
Elemento electrnico
Guarda la informacin de la votacin en el chip de la papeleta
Impresora de rollo

Lector de chip de la papeleta

Lee los datos del chip de la papeleta
73
Marco terico
Smartmatic
Proceso de votacin
Mesa
Cabina de votacin
Presenta DNI
Firma frente al 2do

miembro de mesa
Espera de la
activacin del
sistema
Mesa
Vota por un
candidato
Presiona votar
Recoge su
comprobante
Deposita el
comprobante en el
buzn
Elector
Recibe DNI
Verica informacin
en padrn fsico
Entrega DNI
Miembros de
mesa
Recibe DNI
Le indica al elector
donde rmar
Presiona botn para

activar el sistema
Entrega el DNI del

elector
Recoge su DNI
Marco terico
Smartmatic
Elementos
utilizados
El siguiente listado corresponde a los elementos que intervienen

en el proceso de votacin electrnico Smartmatic, desarrollado en
Estados Unidos.
DNI
Padrn de electores
Permite comprobar la pertenencia del elector a dicho recinto
Botn de miembros de mesa

Mediante ste, el miembro de mesa activa la urna electrnica para
que la persona electora realice el voto
Pantalla de votacin
Informa como insertar la papeleta
Permite realizar el voto
Permite visualizar los datos de la votacin realizada
Impresora de rollo
Contancia de votacin
Sirve como medio de comprobacin
Permite otra manera de cuantificar la eleccin

75
Marco terico
Conclusiones
del anlisis del
proceso de
votacin
Se logr identificar las etapas principales del proceso de votacin:
Identificacin del elector
Votacin en la pantalla
Secciones principales:
Instrucciones iniciales
Votacin
Confirmacin
Resumen de la votacin
Impresin del comprobante
Depsito del comprobante
76
Marco terico
La interaccin en los
referenciales analizados
A continuacin se mencionan aspectos importantes de distribucin
de elementos, colores, formas, y arquitectura de las herramientas
en estudio, que influyen directamente en la interaccin del usuario y
en el proceso de votacin
Las anteriores son imgenes de algunas de las herramientas

analizadas.
De las secciones dentro de la herramienta, que encuentra el
usuario al llevar a cabo la eleccin, se tomaron los elementos ms
comunes, como textos, imgenes y elementos de interaccin, para
analizar su posible utilizacin en el rediseo de Voto Electrnico y
su posterior evaluacin mediante pruebas con usuarios.
77
Marco terico
Pantalla inicial
Texto de como activar el sistema
Grfica de como activar el sistema
Votacin
En sta seccin, se reconoci dos tipos diferentes de interaccin.
En la primera el usuario selecciona un candidato, y en el caso de
querer cambiar su eleccin, solamente debe presionar en la nueva
opcin para eliminar la primera eleccin realizada.
Adems, existe un botn para votar nulo, con el mismo nivel
de jerarqua que los candidatos; mientras que para para votar
en blanco solamente se debe presionar el botn de aceptar
o confirmar, sin antes haber seleccionado alguna opcin de
candidato.
LUGAR DE VOTACIN
NOMBRE DEL PARTIDO

NOMBRE DEL PARTIDO
NOMBRE DEL PARTIDO
NOMBRE DEL PARTIDO
NOMBRE DEL PARTIDO
NOMBRE DEL PARTIDO
VOTAR NULO
Siguiente
78
Marco terico
Mientras que, el segundo tipo de interaccin presenta un botn para
eliminar la eleccin realizada antes de confirmar y as poder elegir
otro candidato en caso de equivocacin o cambio de opinin.
Para realizar un voto nulo basta con seleccionar varios candidatos
y para votar en blanco se utiliza la misma idea de no seleccionar
ningn candidato en la papeleta y confirmar el voto.
Lorem ipsum dolor sit amet, amet rutrum morbi
urna tincidunt dolor, quod diam
accumsan fringilla urna a ultricies, suspendisse nec dolore
Partido
Partido
Partido
Partido
Partido
PRESIDENTE
PRESIDENTE
PRESIDENTE
PRESIDENTE
PRESIDENTE
Vicepresidente
Vicepresidente
Vicepresidente
Vicepresidente
Vicepresidente
Partido
Partido
Partido
Partido
Partido
10
PRESIDENTE
PRESIDENTE
PRESIDENTE
PRESIDENTE
PRESIDENTE
Vicepresidente
Vicepresidente
Vicepresidente
Vicepresidente
Vicepresidente
Lorem ipsum dolor sit amet, amet rutrum morbi urna tincidunt dolor, quod diam
accumsan fringilla urna a ultricies, suspendisse nec dolore
Aceptar
Limpiar
En general los elementos de esta seccin son:

Isologotipos
Referencia del lugar de la eleccin
Indicacin breve de cmo seleccionar una opcin
Referencia del tipo de votacin que se realiza
Fotografa y nombre de cada opcin para votar
Botn:
Voto nulo
Botn:
Votar
Siguiente
79
Marco terico
Confirmacin
Fotografa y nombre de cada opcin votada
Botn de:
Cambiar
Botn de:
Pantalla resumen
Informacin de la votacin realizada (mientras imprime)
80
Arquitectura propuesta
Gracias a los anlisis realizados a la versin actual de Voto Electrnico

y a otras herramientas similares se logra generar un nuevo concepto de
arquitectura de informacin.
Proceso de elaboracin de la nueva arquitectura

Nueva arquitectura
En la nueva arquitectura se toma en cuenta que muchas de las
secciones que estaban inicialmente en el home de la aplicacin, no
pueden ser accedidas inicialmente, sino que dependen de otras, tal
como se mostr en el anlisis.
De ese mismo anlisis se desprenden las siguientes acciones a
tomar en cuenta en la nueva arquitectura:
1 Ingresar nuevo usuario

Vista previa
2 Visualizar papeletas y plantillas
Pantalla inicial
Ingresar conguracin
Visualizar miembros de mesa
3 Votaciones
Existan inicialmente dos secciones que cumplan la misma funcin

de visualizacin de la lista de los miembros de mesa, solamente se
diferenciaban por las opciones que daban para editar dicha lista, por
lo que para la nueva arquitectura se decide unificar estas secciones.
#
Adems, se identific que todas las acciones giraban alrededor de

tres elementos principales: usuarios, papeletas y votaciones, por lo
que se decidi utilizar stas como secciones principales y agrupar
todas las funciones secundarias dentro.
Esta nueva organizacin ayudo a que funciones diferentes, de
secciones con el mismo nombre, como Ingresar nuevo usuario, se
82
pudieran agrupar y organizar en diferentes niveles de navegacin.
Las secciones restantes que inicialmente parecan estar a un
mismo nivel de jerarqua, pero que se empleaban sobre ventanas
emergentes, pasaron a ser parte de la nueva arquitectura. stas
son:
Anular voto
Cerrar urna
Informe final
En estos casos, fue fundamental el anlisis realizado del proceso de

votacin, para determinar en qu parte de la navegacin el usuario
iba a necesitar anular un voto, cerrar la urna u obtener el informe
final.
83
Nueva arquitectura
Simbologa
Pantalla inicial
Login
Papeletas
Uso de la contrasea para

pasar a la siguiente seccin
Presidentes
Uso de la tarjeta de activacin

para pasar a la siguiente seccin
Diputados
Usuarios
Agregar un usuario
Cerrar urna
Imprimir informe nal
Anular voto
Votacin
Votacin nalizada
Ayuda
84
La nueva arquitectura mantiene el concepto de que el sistema
va poder ser utilizado por dos usuarios, cada uno con funciones
diferentes.
La persona electora podr acceder a la seccin de votaciones.
Mientras que los miembros de mesa tendrn acceso al resto de
funciones.
Inicialmente se contempla una pantalla para iniciar sesin. Posterior
a esto, el usuario administrador o miembro de mesa encontrar
cuatro secciones principales: papeletas, usuarios, votacin y ayuda.
En la seccin de papeletas podr visualizar las papeletas
correspondientes al proceso electoral que se vaya a realizar.
En usuarios podr encontrar la lista de los usuarios agentes

electorales que se encuentran participando de dichas elecciones en
ese lugar.
Votacin permitir al usuario elector realizar el proceso de votacin.

Para que este proceso pueda iniciar, el administrador deber activar
las votaciones desde la pantalla principal.
Adems en cualquier momento de las elecciones, el miembro de

mesa podr ingresar a la seccin de usuarios, cerrar la urna o
imprimir el informe final, utilizando su informacin de usuario y
tarjeta de activacin, para as abandonar la seccin de votaciones e
ingresar a estas secciones.
En caso de que sea necesario anular un voto, esto deber realizarse
mientras el usuario est en la urna electrnica con la sesin activa.
Para ingresar a la seccin de anular un voto, el miembro de mesa
deber utilizar su informacin de usuario y contrasea as como su
tarjeta de activacin.
Se propone dentro de la nueva arquitectura, una nueva seccin
llamada Ayuda la cual deber contener informacin til para el
miembro de mesa, referente a cmo se realiza cada proceso dentro
del sistema.
85
Wireframes
Se trabaja los wireframes como la estructura bsica de lo que ser el

diseo final de cada una de las secciones de la aplicacin Voto Electrnico.
Se toman en cuenta en este caso elementos de navegacin como mens,
elementos de informacin como el contenido de texto, elementos de
interaccin como botones que el usuario puede utilizar para realizar alguna
accin, adems de elementos de apoyo que funcionarn como tems de
ayuda.
Los wireframes servirn posteriormente, para su evaluacin mediante
pruebas con usuarios reales, donde se vern aspectos de distribucin,
tamaos, jerarqua, forma-funcin, forma-significado, en el caso de los
iconos, y navegacin.
Simbologa
Seccin que utiliza el miembro de mesa
Seccin que utiliza la persona electora
Wireframes
Voto Electrnico
Para ingresar al sistema escriba los datos que se
le solicitan a continuacin:
Cdigo de urna
Contrasea
Ingresar
Inicio de sesin
Esta es la pantalla inicial, se solicitan los datos del usuario
administrador (miembro de mesa) para as asegurar que solamente
dichos usuarios entrarn a las secciones siguientes.
Se propone que se trabaje con un cdigo y contrasea especficos
para cada recinto o urna, siendo esto un poco ms manejable que
utilizar un cdigo y contrasea para cada agente electoral.
87
Wireframes
Ayuda
Voto Electrnico
Conguracin:
Usuarios
Papeletas
2 de febrero de 2014
Es hora de iniciar las votaciones:
Iniciar las votaciones
Cerrar
Pantalla principal (home)

Esta seccin permite acceso a partes de configuracin del sistema
como: Usuarios y Papeletas, a la seccin de ayuda, posee un botn
para cerrar el sistema, y uno principal para iniciar el proceso de
votaciones en la urna electrnica.
88
Wireframes
1
Usuarios
Nombre
Rol
Victoria lvarez Madrigal
Enrique Ramrez Esquivel
Agregar un usuario
Ms informacin
Eliminar
Miembro del TSE
Ms informacin
Eliminar
Alberto Hernndez Brenes
Miembro del TSE
Ms informacin
Eliminar
Fabiana Mora Arias
Miembro del TSE
Ms informacin
Eliminar
Juliana Gmez Madriz
Miembro del TSE
Ms informacin
Eliminar
Mario Montenegro Orozco
Miembro del TSE
Ms informacin
Eliminar
Alfredo Prez Segura
Miembro de mesa
Ms informacin
Eliminar
Erick Mass Chaverr
Miembro de mesa
Ms informacin
Eliminar
Alejandra Elizondo Barrantes
Auxiliar TSE
Ms informacin
Eliminar
Karen Morales Brenes
Auxiliar TSE
Ms informacin
Eliminar
Enrique Salazar Moreno
Auxiliar TSE
Ms informacin
Eliminar
Auxiliar TSE
Ms informacin
Auxiliar TSE
Ms informacin
Seccin: Usuarios
Aqu se puede encontrar la informacin de los agentes electorales

que se encuentran trabajando en el proceso electoral en el recinto
donde se ubica la urna electrnica.
1.
Botn atrs
Lleva al usuario al home de la herramienta
2.
Agregar un nuevo usuario

Permite agregar un nuevo usuario a la lista
3.
Ms informacin
Lleva a la informacin completa de cada usuario
4.
Eliminar
Botn para eliminar un usuario en especfico de la lista
89
Wireframes
Cancelar
Agregar un usuario
Rol del nuevo usuario
Presidente JR
Tcnico TSE
Auxiliar TSE
Miembro de mesa
Miembro TSE
Justicacin
Nombre
2
Primer apellido
Segundo apellido
Cdula (ejemplo: 88 8888 8888)
Telfonos (ejemplo: 8888 8888)
Agregar
Espacio opcional
Agregar un usuario
Al presionar el botn de agregar un usuario, que aparece en la
seccin de usuarios, aparece esta pantalla, donde se solicitan los
datos bsicos necesario para agregar un usuario.
1.
Seleccin del rol del usuario

Se debe elegir una de las opciones de rol de usuario
2.
Formulario de datos
3.
Agregar
Botn para agregar el usuario segn la informacin que se ingres
90
Wireframes
Usuarios
Ayuda
Agregar un usuario
Nombre
Rol
Ms informacin
Eliminar
Ms informacin
Segundo apellido:
Eliminar
President Junta Receptora
Informacin de usuario

Nombre:
Cerrar
Miembro del TSE

Primer apellido:
lvarezMs informacin
Eliminar
Miembro del TSE
Ms informacin
Eliminar
Miembro del TSE
Ms informacin
Eliminar
Ms informacin
Eliminar
Ms informacin
Eliminar
Miembro de mesa
Ms informacin
Eliminar
Auxiliar TSE
Ms informacin
Eliminar
Auxiliar TSE
Ms informacin
Eliminar
Auxiliar TSE
Ms informacin
Eliminar
Auxiliar TSE
Ms informacin

Fabiana Mora Arias
Cdula:
Erick Mass Chaverr
Rol:
Juliana Gmez Madriz
Alfredo Prez Segura
Victoria Miembro del TSE

Madrigal
Telfonos:
01 8743 1597
Miembro del TSE
2552 0590
8870 4563
Miembro de mesa
Eliminar usuario
Editar informacin
Esta ventana emergente aparece al presionar sobre el botn de

Ms
informacin en la pantalla anterior.
Auxiliar
TSE
Ms informacin
1.
Eliminar usuario
Permite eliminar el usuario del que se obtuvo la informacin. Se
repite la opcin en esta ventana, ya que existe la posibilidad de que
al usuario no le baste con la informacin inicial para asegurarse de
que dicho usuario es el que debe eliminar.
2.
Editar informacin
Se coloca este botn dentro de esta ventana ya que el usuario
necesita visualizar antes la informacin que va a editar.
3.
Cerrar
Permite cerrar la ventana emergente y volver al listado de usuarios.
91
Wireframes
Usuarios
Ayuda
Agregar un usuario
Nombre
Rol
President Junta Receptora
Ms informacin
Eliminar
Miembro del TSE
Ms informacin
Eliminar
Ms informacin
Eliminar
Ms informacin
Eliminar
Ms informacin
Eliminar
Ms informacin
Eliminar
Eliminar usuario
Est
seguro que desea eliminar el
Miembro del TSE
siguiente usuario?

Fabiana Mora Arias
Miembro del TSE
Victoria
lvarez Madrigal
Miembro del TSE
Juliana Gmez Madriz
Miembro del TSE
Alfredo PrezUsuarios
Segura
Cerrar
Ayuda
Eliminar
un usuario
Miembro deAgregar
mesa
Ms informacin
Si, deseo eliminarlo
No, cancelar
Miembro de mesa
Rol
Ms informacin
Eliminar
Victoria
lvarez
Madrigal
Alejandra
Elizondo
Barrantes
President
Junta Receptora
Auxiliar TSE
Ms
Ms informacin
informacin
Eliminar
Eliminar
Enrique
Ramrez
Esquivel
Karen Morales
Brenes
Miembro
del TSE
Auxiliar TSE
Ms
Ms informacin
informacin
Eliminar
Eliminar
Alberto
Brenes
Enrique Hernndez
Salazar Moreno
Miembro
del TSE
Auxiliar TSE
Ms
Ms informacin
informacin
Eliminar
Eliminar
Fabiana Mora Arias
Miembro
del TSE
Auxiliar TSE
Ms
Ms informacin
informacin
Eliminar
Juliana Gmez Madriz
Miembro
del TSE
Auxiliar TSE
Ms
Ms informacin
informacin
Eliminar
Miembro
del TSE
El usuario
Ms informacin
Eliminar
Alfredo Prez Segura
Miembro de mesa
Ms informacin
Eliminar
Erick Mass Chaverr
Miembro de mesa
Ms informacin
Eliminar
Auxiliar TSE
Ms informacin
Eliminar
Ms informacin
Eliminar
principalmente dos tipos de

Msventanas
informacin
emergentes, posterior a realizar una accin: la primera, para
Auxiliar TSE
Ms informacin
confirmar la realizacin de una accin, donde se le pregunta
al usuario sobre Auxiliar
dichaTSE
accin y las opciones responden
a esa
Ms informacin
pregunta.
Eliminar
Erick
Mass Chaverr
Nombre
Usuario eliminado
ha sido eliminado
Continuar
Ventanas emergentes
Auxiliar TSE
Cerrar
Se le presentan al
usuario
Auxiliar
TSE
La segunda solamente le informa al usuario que realiz una accin

se llev a cabo correctamente.
92
Wireframes
Cancelar
Editar informacin de usuario

Presidente JR
Tcnico TSE
Auxiliar TSE
Miembro de mesa
Miembro TSE
Nombre
Elena Mara
Primer apellido
Segundo apellido
Montero
Ziga

03
0459
0950

2250
4850
8890
3215
Finalizar edicin

A esta seccin se llega desde la ventana emergente de la
informacin de un usuario especfico. Mantiene relacin con la
seccin de agregar un nuevo usuario, esto en cuanto a la forma de
solicitar y mostrar los datos, para que sea ms fcil para el usuario
familiarizarse con la herramienta.
1.
Seleccin del rol del usuario

Se debe elegir una de las opciones de rol de usuario
2.
Formulario de datos
3.
Finalizar edicin
Botn para finalizar la edicin de la informacin del usuario
93
Wireframes
Papeletas
Presidente
Diputados
Nombre del partido

ipsum dolor sit amet
Nombre del partido

Nombre del partido

Nombre del partido


Quisque lobortis

Quisque lobortis

Quisque lobortis

Quisque lobortis
Devolverse
Ver ms candidatos
Papeletas
Permite al miembro de mesa visualizar las papeletas
correspondientes a las elecciones.
1.
Botn atrs
2.
Men superior
Permite visualizar, ya sea, la papeleta de presidente o de diputados
3.
Papeleta
La papeleta se modifica en forma, hacindola completamente
horizontal, ganando espacio vertical, y as permitiendo que los
elementos ocupen un mayor tamao, beneficiando la lectura por
parte del usuario.
4.
Botones para navegar en la papeleta

Permite moverse a izquierda o derecha en la papeleta
94
Wireframes
Ayuda
Escoja una pregunta:
Para ms informacin:
Cmo votar?
Cmo anular un voto?
Cmo cerrar la urna?
Cmo imprimir el informe nal?
Cmo ver informacin de un usuario?
Llame a los telfonos:
2552-4872
2552-4873
Cmo agregar un usuario?

Cmo eliminar un usuario?
Cmo ver las papeletas de la votacin?
Seccin ayuda
Le muestra al miembro de mesa diferentes opciones con las cuales
puede obtener ayuda sobre cmo realizar diferentes procesos en el
sistema. Esta seccin se basa en la recomendacin de la W3C para
sitios web accesibles.
1.
Botn atrs
2.
Listado de preguntas frecuentes

Lleva al usuario a ms informacin sobre el tema seleccionado
95
Wireframes
Elecciones 2014
Para empezar la votacin

ingrese la tarjeta en la ranura
Votacin terminada
Retire la tarjeta de activacin
Pantallas informativas
Utilizadas para mostrar a la persona electora como iniciar y finalizar
el proceso de votacin en la urna electrnica.
96
Wireframes
1
Presidente
3
Votar nulo
Votar en blanco
Nombre del partido

Nombre del partido

Nombre del partido

Nombre del partido


Quisque lobortis

Quisque lobortis

Quisque lobortis

Quisque lobortis
Devolverse
Ver ms candidatos
Seccin de votacin
Le muestra a la persona electora, en la parte superior izquierda,
el tipo de votacin que est realizando, en este caso votacin de
Presidente
1.
Botn para realizar un votar nulo
2.
Botn para votar en blanco
3.
Papeleta
Papeleta con sus opciones dispuestas de forma horizontal, esto
pensando en que el dispositivo de Voto Electrnico, que permitir
visualizar e interactuar con la interfaz grfica, es muy pequeo para
mostrar todos los candidatos a la vez, y de forma legible.
4.
Campo para votar

Elemento botn para realizar la eleccin de una opcin
5.
Botones para navegar

Permiten navegar en la papeleta.
97
Wireframes
Pensando en que existen usuarios con experiencia en la utlizacin

de dispositivos tctiles, se propone que la navegacin en la papeleta
se pueda realizar adicionalmente con gestos swipe a izquierda o
derecha.
98
Wireframes
Su eleccin por Presidente es:
Presidente
Votar nulo
Nombre del partido
Nombre
del partido
ipsum
dolor
sit amet
Nombre del partido


Quisque lobortis
Votar en blanco
Nombre del partido

Nombre del partido

Nombre del
del candidato
Nombre
candidato
Quisque lobortis
Quisque
lobortis

Quisque lobortis

Quisque lobortis
Devolverse este voto

Depositar
Ver ms candidatos
Cambiar
mi voto
Confirmacin de la eleccin
Se muestra posterior a la eleccin de un candidato.
1.
Opcin seleccionada
La opcin seleccionada sobresale entre las dems.
2.
Depositar este voto

Permite confirmar el voto que se muestra y seguir adelante
3.
Cambiar mi voto
Al presionar este botn aparece de nuevo la papeleta en blanco
para as poder cambiar de opcin
99
Wireframes
En caso de que la persona electora haya realizado un voto nulo o en
blanco, la forma de presentar la confirmacin sera la siguiente:
Diputados
Nombre del partido
Eleccin
Votar nulo
Nombre del partido
Votar en blanco
Nombre del partido

deipsum
diputados
dolor sit amet
Nombre del partido

Usted ha decidido
Votar nulo

Depositar
Ver ms candidatos
Cambiar
mi voto
Presidente
Nombre del partido
Eleccin
Votar nulo
Nombre del partido
Presidencial
Votar en blanco
Nombre del partido

Nombre del partido

Usted ha decidido
Quisque lobortis

Votar en blanco

Quisque lobortis

Depositar
Quisque lobortis

Quisque lobortis
Ver ms candidatos
Cambiar
mi voto
100
Wireframes
Presidente
Votar nulo
Voto depositadoNombre del partido
Votar en blanco
Nombre del partido

Nombre del partido

Nombre del partido


Quisque lobortis

Quisque lobortis

Quisque lobortis

Quisque lobortis
El voto se deposit correctamente
Ver papeleta de diputados

Devolverse
Ver ms candidatos
Retroalimentacin
Se le informa a la persona electora que ha realizado correctamenta
el proceso de votacin.
En caso de existir una segunda votacin, como la de diputados,
muestra la opcin para ir a sta.
101
Wireframes
Panel de administrador
Voto actual
Anular el voto actual:
Hora de inicio:
6:28:05
Escriba la razn para anular

el voto:
Cerrar
Vericacin de usuario
Ingrese los datos que se le solicitan:
Duracin:
0:01:30
Usuario:
nombredeusuario
Contrasea:
**********
1
Anular voto
Continuar
Cancelar
Continuar votaciones
Verificacin de usuario
Este es el medio para que el miembro de mesa, desde el proceso de
votacin, pueda ingresar a las opciones de: anular voto, cerrar urna
e informe final.
1.
Informacin solicitada
Para la verificacin del usuario
2.
Continuar
Lleva al panel de administrador
3.
Cancelar
Vuelve al proceso de votacin
102
Wireframes
2
Voto actual
Hora de inicio:
Escriba la razn para anular el voto:
6:28:05
1 El elector tom fotos de la eleccin que realiz,

utilizando su celular.
Duracin:
0:01:30
Anular voto
3 Continuar votaciones
Panel de administrador 1
En caso de que el miembro de mesa ingrese al panel de
administrador mientras se est realizando la votacin (sesin de
votacin activa), ste mostrar la opcin de Anular el voto actual
1.
Informacin requerida para anular el voto

Informacin de caracter obligatorio
2.
Hora del sistema

Permite saber la hora exacta y as tener en cuenta en que momento
se debe cerrar la urna
3.
Botn para volver a la eleccin sin realizar accin alguna
103
Wireframes
Voto actual
Conguracin:
No hay una sesin de

voto activa
Usuarios
Cerrar la urna
En caso de que el miembro de mesa ingrese al panel de
administrador cuando no haya una persona en la urna electrnica,
esto quiere decir, mientras no exista una sesin de voto activa, el
panel de administrador mostrar las siguientes funciones
1.
Usuarios
Permite acceder a la seccin de usuarios, con sus opciones de
visualizacin y edicin.
2.
Cerrar urna
Para finalizar el proceso de votacin y continuar con la visualizacin
e impresin del informe final
104
Wireframes
Voto actual
Cerrar la urna
Al seleccionar la opcinNo
de hay una
Cerrar urna en el panel
voto activa
de administrador, aparece
inicialmente una ventana
emergente para confirmar
la accin, con la opcin de
agregar un comentario sobre el
cierre de sesin.
Conguracin:
Cerrar la urna
Cerrar
sesin de
Usuarios
Est seguro que desea cerrar la urna?

Cerrar la urna
Agregar un comentario
Si, deseo cerrar la urna

No, cancelar
Posterior a la confirmacin
delde administrador
Panel
cierre de sesin se le comunica
al usuario la realizacinVoto
exitosa
Cerrar
actual Cerrar la urna
Conguracin:
del cierre de urna y se muestra
la opcin para imprimir el
Est seguro
que desea
cerrar la urna?
Continuar
votaciones
informe final.
Usuarios
No hay una sesin de
voto activa
Agregar un comentario
Quisque lobortis, magna eu faucibus
Cerrar la urna
congue, quam elit suscipit quam, nec
consectetur arcu lacus quis mi.
Voto actual
Si, deseo cerrar la urna
No, cancelar
Conguracin:
Urna cerradaContinuar votaciones
No hay una sesin de

voto activa
Cerrar
Usuarios
Cerrar la urna
La urna ha sido cerrada

Ver informe nal
105
Wireframes
3
Informe nal
Salir denitivamente
Imprimir informe nal

Votaciones
presidenciales 2014
1
Eleifend diam dui facilisis eu sapien
habitant, in tortor, semper morbi volutpat
pulvinar nulla. Volutpat varius bibendum,
erat sit purus nec ac.
Cantidad de copias:
Lorem dolor, quisque mauris ut sequi,

curabitur mauris mattis libero orci,
posuere erat facilisis ut cursus. Vitae
malesuada torquent nunc ridiculus sit,
diam molestie cras pede. Wisi sodales
bibendum tempus, sit posuere
Imprimir
Ligula metus, ante nec neque nostra quis

leo, viverra eros orci quisque, mauris mi
orci wisi. Wisi bibendum lobortis
fermentum ut volutpat justo, viverra cum
Informe final
Esta seccin muestra el informe final de la votacin y permite la
impresin del mismo, esto como medio para la transmisin de
datos, determinado por el Tribunal Supremo de Elecciones.
1.
Visualizacin del informe final
2.
Seleccin de la cantidad de copias a imprimir
3.
Salir definitivamente
Finaliza todo el proceso
106
Paper prototyping
Utilizando los wireframes, se realizaron dos tipos de pruebas de paper

prototyping. Una para probar la interfaz que contiene las acciones que
puede realizar el miembro de mesa. Y otro tipo, utilizando los wireframes de
la interfaz del proceso de votacin.
Proceso de votacin
Paper prototyping
Paper prototyping
Proceso de votacin
En este caso se realiz la prueba con usuarios potenciales de
la herramienta, algunos con experiencia en la interaccin con
dispositivos mviles, aplicaciones y computadoras, y otros con
experiencia nula en stos campos, los cuales brindaron la mayor
cantidad de retroalimentacin de la prueba, principalmente de la
relacin forma-funcin de los elementos de interaccin.
Algunos aspectos que destacaron los usuarios durante las pruebas
son:
Diputados
Nombre del partido
Nombre del partido

Devolverse
Votar nulo
Nombre del partido
Votar en blanco
Nombre del partido
Ver ms candidatos
Algunos usuarios, principalmente adultos mayores, al seleccionar

un candidato, utilizaban todo el espacio del candidato o partido
como botn para seleccionar, y no solamente el recuadro inferior.
108
Paper prototyping
Usted ha decidido
Votar nulo

Depositar
Ver ms candidatos
Cambiar
mi voto
Votar nulo
Votar en blanco
Diputados
La forma de algunos botones no permiti que fueran
Nombre del partido
Nombrecomo
del partido tales Nombre del partido
Nombre del partido
reconocidos
Nombre del partido

Aquellos botones cuya forma era dada solamente por un rectngulo

de color plano, con texto en su interior, no eran identificados como
botones por la mayora de las personas sin experiencia en la
utilizacin de tecnologas similares.
Devolverse
Papeletas
Ver ms candidatos
Presidente
Diputados
Nombre del partido
Nombre del partido
Nombre del partido
Nombre del partido

Quisque lobortis

Quisque lobortis

Quisque lobortis

Quisque lobortis
dolor sit amet

sit amet
ipsum dolor
amet
Todo loipsum
contrario
sucedaipsum
condolor
aquellos
botones
quesitpresentaban
una grfica que los hace parecer elevados sobre el resto de
elementos, ms similar a un botn en una interfaz fsica.
Devolverse
Ver ms candidatos
Algunos eventos botn no se encuentran en los esquemas

mentales de todos los usuarios, ni se relacionan con algn
proceso fsico.
Se descart el hecho de utilizar una esttica diferente para aquellos
botones que no podan ser presionados en algn momento
(desactivados), ya que muchos usuarios no asociaban la grfica
con ese significado.
Se concluye entonces que en lugar de tener esa grfica
diferenciada, no apareceran en la interfaz hasta que sean
necesarios.
109
Paper prototyping
Presidente
Votar nulo
Voto depositadoNombre del partido
Votar en blanco
Nombre del partido

Nombre del partido

Nombre del partido


Quisque lobortis

Quisque lobortis

Quisque lobortis

Quisque lobortis
El voto se deposit correctamente
Ver papeleta de diputados

Devolverse
Ver ms candidatos
Los elementos circulares con un icono eran reconocidos

como botones
En la pantalla anterior muchos usuarios dudaron cual era el
elemento presionable.
Principalmente dentro del grupo de los usuario sin expericiencia
previa en la utilizacin de dispositivos tctiles o sistemas similares,
muchos usuarios asociaban un icono con la funcin de interaccin
botn.
Aunque en muchos casos el icono no les significaba nada, como en
este caso el check, seguan asociando la forma con un botn.
110
Paper prototyping
Su eleccin por Presidente es:
Presidente
Nombre del partido

Quisque lobortis
Votar nulo
Nombre del partido
Nombre
del partido
ipsum
dolor
sit amet
Votar
Nombre del partido

ipsum dolor sit ame
Nombre del
del candidato
Nombre
candidato
Quisque
lobortis
Quisque lobortis
Nombre del candida

Quisque lobortis
El utilizar una equis para identificar la seleccin de un Ver ms candid

Devolverse
Depositar
este voto
Cambiar mi v
candidato cre confusin en usuarios expertos.
Aunque en el mtodo de votacin manual, la forma de seleccin es

dibujar una equis en la casilla, en medios digitales como pginas
web y aplicaciones mviles, la equis ha sido ampliamente utilizada
para acciones como eliminar o cerrar.
Por lo que, para usuarios que nunca realizaron el voto manual, y
se vayan a iniciar en el proceso con el voto electrnico, el utilizar
una equis como marca en la casilla, puede comunicar que se est
descartando la opcin.
111
Paper prototyping
Paper prototyping
Se realiz la prueba tanto con usuarios que han participado como
agentes electorales en procesos de votaciones a nivel nacional,
principalmente para evaluar aspectos del proceso, como con
usuarios que desconocen el proceso para recibir retroalimentacin
sobre la dificultad o simplicidad de llevar a cabo cada accin.
La prueba se bas en tareas que deban realizar los usuarios,
determinadas con anterioridad, de forma que se evaluara por
completo el sistema. Ests acciones fueron:
1. Visualice los usuarios del sistema

2. Edite la informacin del usuario Elena, para que deje de ser
miembro del TSE y pase a ser Presidente de la Junta Receptora
3. Elimine el usuario Victoria

4. Visualice las papeletas a utilizarse en el proceso electoral
5. Inicie el proceso de votaciones
6. Anule un voto
7. Finalice las votaciones e imprima 5 copias del informe final
Las conclusiones de este proceso de pruebas son las siguientes:
112
Paper prototyping
Voto actual
Hora de inicio:
6:28:05
Duracin:
0:01:30

Escriba la razn para anular
el voto:
Cerrar
Usuario:
nombredeusuario
Contrasea:
**********
Anular voto
Continuar
Cancelar
Continuar
votaciones
Para
la mayora
de los usuarios las acciones positivas
deben ir a la derecha
En todos los casos donde se presentaban dos caminos para una
accin como medio de confirmacin, a muchos usuarios les
pareci que el orden de las opciones estaba invertido.
Los usuarios que ms dijeron percibir sto, son aquellos que en este
informe se consideran como usuarios expertos, para el resto de
usuarios el orden fue indiferente.
113
Paper prototyping
Cancelar
Agregar un usuario
Presidente JR
Tcnico TSE
Miembro de mesa
Miembro TSE
Justicacin
Nombre
Primer apellido
Auxiliar TSE
Algunos elementos no comunicaban realmente la funcin

para la que fueron ideados.
Segundo apellido
En el caso especfico del elemento anterior, se le consideraba

un men del tipo pestaas, mientras que la funcin original era
representar un medio de seleccin nica.
Se reconsidera este elemento, ahora empleando un listado con

Agregar
elementos radio button que comuniquen de mejor forma la idea
Espacio opcional
de seleccin nica.

Presidente JR
Tcnico TSE
Auxiliar TSE
Miembro de mesa
Miembro TSE
114
Look&feel
En este captulo se expone el proceso de diseo del aspecto grfico de la

herramienta, como medio para ofrecerle al usuario un ambiente semntico
adecuado.
Moodboards
Diseo de la papeleta
Seccin de votacin
Interfaz para los miembros de mesa
Look&feel
Moodboard
Votacin
El moodboard resume la frase semntica seleccionada. En este

caso se basa en elementos acorde al rango y experiencia de usuario
116
Look&feel
Moodboard
Interfaz para
miembro de mesa
Este moodboard se basa en elementos coherentes en forma-funcin,

que en conjunto transmitan la idea de una interfaz limpia y simple
117
Look&feel

Se tiene como principio en el rediseo de la herramienta Voto
Electrnico comunicar de la mejor forma posible, desde la
informacin hasta cules son los elementos que el usuario puede
presionar, evaluando no solamente el texto que conlleve a la
accin, sino la forma, como aspecto que deber ser reconocible de
inmediato por el usuario y asociable a su funcin en la interfaz.
Es por esto que se lleva a cabo un anlisis de botones en interfaces
grficas, encontrados en pginas web, aplicaciones para
dispositivos mviles y programas de computadora. Encontrando
diferentes estilos en stos, desde el esqueuomorfismo hasta estilos
planos como los impuestos por Google, de uso muy extendido
actualmente.
Posterior al anlisis se lleva a cabo una prueba con usuarios
potenciales de la herramienta Voto Electrnico, la cual consisti en
mostrar a stos los elementos analizados y consultarles cules les
parecan botones.
Los usuarios inexpertos fueron ms crticos con los estilos,
solamente pudieron reconocer como botones algunos pocos,
principalmente aquellos que daban una idea de tridimensionalidad,
ms asociada a botones en interfaces fsicas.
Mientras que al realizar la prueba a los usuarios con experiencia
en la interaccin con interfaces grficas, reconocieron como
botones la mayora de los elementos, inclinndose por aquellos de
complejidad grfica intermedia.
Aquellos estilos que fueron reconocidos en comn por ambos tipos
de usuario sern los utilizados para el look&feel de la seccin de
votacin, la cual como se ha mencionado, es abierta a usuarios
expertos e inexpertos en materia de tecnologas similares a la
herramienta.
118
Look&feel
A continuacin se muestran cada uno de los botones que se
utilizaron en la prueba.
Los usuarios inexpertos

prefieron los botones
cuya grfica simula
tridimensionalidad
Los usuarios con experiencia

en la interaccin con interfaces
grficas prefirieron botones
ms simples, aunque asociaron
todos con su funcin
119
Look&feel
La papeleta
Se analiz adems la papeleta que se utiliza en la votacin fsica, en
cuanto a jerarqua y distribucin de los elementos; como resultado
se obtuvo que aunque las personas ya estaban acostumbradas a
su formato y la visualizacin de cada mdulo (candidato o partido)
tiene serios problemas de jerarqua.
Tambin, gracias a las pruebas iniciales realizadas a la primera
versin de voto electrnico, se determin que el diseo de los
mdulos de la papeleta que se le presenta al usuario tiene muy
poca relacin con la papeleta fsica, elimina informacin importante,
y carece de una comunicacin eficiente.
Dadas las conclusiones anteriores, se toma la decisin de
replantear el diseo de los mdulos de la papeleta, en coherencia
con el estilo grfico seleccionado y con la papeleta fsica.
X
La papeleta fsica tiene poca

coherencia en el tamao de
algunos elementos, adems
de que otros, como la foto del
candidato y el nombre, no se
relacionan por cercana, como
si lo hacen el nombre del
partido y la bandera.
En el mdulo de la papeleta
de la primera versin de
voto electrnico falta mucha
informacin que si se utiliza en
la papeleta fsica, adems de
que posee mucho espacio en
blanco sin utilidad alguna.
PPP
NOMBRE
DEL PARTIDO
2.2X
H
VOTE CON UNA X
1:1
2:1
NOMBRE
DEL CANDIDATO
Mdulo de la papeleta de
votacin fsica
H/5
Mdulo de la papeleta de
la primera versin de Voto
Electrnico
120
Look&feel
En cuanto al rediseo, se parte
del nmero ureo para poder
justificar una proporcin que
sea agradable y coherente a la
vista.
Adems, se realiza una
reorganizacin de los
elementos para mejorar la
jerarqua y la asociacin entre
los mismos.
121
Look&feel
Seccin de votacin
En este seccin se resumen los aspectos que se tomaron en
cuenta para desarrollar cada uno de los elementos relevantes del
look&feel para la seccin de votacin en el sistema Voto Electrnico,
as como algunos detalles complementarios que sirvieron para la
organizacin y jerarquizacin de los elementos dentro de la interfaz
grfica.
Como consecuencia de las conclusiones de los anlisis realizados
anteriormente se decide trabajar una grfica diferenciada para esta
seccin, tratando con esto, ser incluyente, utilizando elementos
grficos, que usuarios de cualquier nivel de experiencia en la
interaccin con interfaces grficas, pueda entender y asociar con su
funcin.
Se elabor una maqueta funcional de esta seccin, que fue utilizada
en pruebas con usuarios como medio para la validacin del
look&feel aplicado.
A continuacin se muestra las partes principales de la interfaz final,

el proceso de cambios para llegar a esta versin, detalles de su
elaboracin, cmo estos son de beneficio en la interaccin. Todo
esto acorde a las conclusiones obtenidas por la retroalimentacin
de las pruebas realizadas.
122
Look&feel
Pantallas informativas
Le muestra al usuario la forma de iniciar el proceso en la urna
electrnica. Como conclusin de las pruebas con usuarios se
pens en que la imagen que ilustra la indicacin, sea una animacin
cclica.
123
Look&feel
La pantalla final mantiene el mismo formato establecido para la

inicial.
Elecciones 2014
Para empezar la votacin

ingrese la tarjeta de
activacin en la ranura
124
Look&feel
Seccin de votacin
Inicialmente se tena un botn ms pequeo para la accin de ver
ms candidatos. Debido a los resultados de las pruebas se decidi
hacerlo ms grande.
Adems se elimin una barra scroll que se tena en una primera

propuesta, la cual fue pensada para que usuarios con experiencia
entendieran de mejor forma la idea del desplazamiento horizontal.
En las pruebas sucedi que la mayora de los usuarios no
detectaron la existencia del mismo. Por lo que para la versin final
se integr circulos indicadores, tal como se usa muchas pginas
web, el resultado fue bueno ya que los usuarios lo asociaban
correctamente con el desplazamiento horizontal.
125
Look&feel
De la misma forma, dado los resultados de las pruebas, se decidi

que el botn devolverse solo aparezca cuando se haya avanzado
en la papeleta.
Tambin se identific que el desplazamiento de la papeleta que
responde al movimiento swipe deba ser controlado, esto quiere
decir que al realizar un gesto, se moviera cierta cantidad de
elementos haca el lado, y no libremente.
Esto para evitar que usuarios sin experiencia en el uso de
dispositivos tctiles, sientan que pierden el control del avance en la
papeleta en caso que su gesto sobre la pantalla sea ms fuerte o
rpido de lo normal.
126
Look&feel
En el caso de la eleccin de diputados, el sistema funciona de la

misma manera como lo hace en la eleccin para presidente, lo
nico que vara es el contenido de la papeleta, cuya fuente es el
Tribunal Supremo de Elecciones.
127
Look&feel
Adems, como resultado de las pruebas se obtuvo que existe
una pequea parte de los usuarios que al querer seleccionar un
candidato en la seccin de votacin, no utilizan el botn, sino que
presionan en alguna otra rea del mdulo del candidato.
Por lo que para su implementacin, se recomienda que el rea
de eleccin sea todo el mdulo del candidato, ya que aunque es
una pequea parte de la poblacin la que realiza la accin de esta
forma, realizar el cambio no presenta ningn problema en cuanto a
interaccin, para el resto de los usuarios.
128
Look&feel
Confirmacin de la eleccin
En esta seccin se implemento definitivamente el cambio de
la equis por un check como medio para identificar el candidato
seleccionado.
En las pruebas exiti algunos pocos usuarios que no conocan
el significado del check, principalmente adultos mayores, pero
stos de igual forma entendieron el significado en el contexto y no
tuvieron duda alguna.
Otro elemento importante que se integr a la versin final, probado
con resultados muy buenos, fue la representacin de la urna fsica.
Aunque inicialmente la coherencia con el resto de elementos
pareca ser un problema, fue mayor el aporte como medio de
comunicacin efectiva del proceso para el usuario.
La idea con sto fue asociar an ms el proceso fsico de votacin,
con el cual muchas personas estn familiarizadas, con el proceso
digital.
129
Look&feel
El hecho de integrar la representacin de la urna fsica en el proceso

digital, creo una nueva forma de interaccin con esta pantalla en
especial. Se not con muchos usuarios que al tener el candidato
seleccionado sobre la urna, el gesto que realizaban para depositar
el voto era deslizar el mdulo haca abajo; dicho gesto no se tena
implementado en la versin que se prob inicialmente, pero se
agreg posteriormente y se considera dentro de la versin final.
130
Look&feel
En caso de que la seleccin del usuario en la pantalla de votacin
sea votar nulo o en blanco, la visualizacin de la confirmacin para
dicha accin sera la siguiente.
131
Look&feel
Retroalimentacin
Se decide en esta ventana emergente incluir la fotografa del
candidato seleccionado por el elector, con el fin de reforzar la
retroalimentacin para ste. Adems se emplea el color verde como
medio de apoyo.
En algunas de las pruebas realizadas, los usuarios inexpertos
identificaron toda la ventana como un botn, por lo que se
recomienda, para la implementacin, que la interaccin sea de esa
forma.
Esto no tendra problema alguno, ya que la pantalla brinda una
nica opcin de interaccin.
132
Look&feel
Interfaz para los

miembros de mesa
Debido a la diferenciacin que se realiza con la interfaz para
votacin, se presenta ahora por separado el desarrollo del look&feel
para la interfaz que utilizarn los miembros de mesa. Al igual que en
el caso anterior, se desarroll una propuesta de look&feel inicial, la
cual fue probada con usuarios en una tableta, mediante la creacin
de una maqueta funcional.
A continuacin se muestran la propuesta para el look&feel, los
resultados de las pruebas y cmo estos influyeron en el diseo final.
133
Look&feel
Botones
Se trabaj una nica forma para aquellos botones que representan

una accin y llevan al usuario a otro lugar de la aplicacin.
Botn de la
accin principal
Botn de
acciones secundarias
Estado
Ingresar
Salir
Estado
Ingresar
Salir
activo
presionado
Iconos
Se disearon iconos ms simples y coherentes entre s, para

que acompaen aquellas acciones que tienen una forma grfica
claramente asociada en los esquemas mentales del usuario,
evitando crear iconos para terminos complejos, donde se comprob
que utilizar solamente texto es ms eficiente.
Editar
Agregar
Eliminar
Cerrar
Cerrar urna
Ms informacin
Papeletas
Salir
Reproducir
Volver
Usuarios
134
Look&feel
Cromtica
Texto de lectura
sta se bas en su funcin de

diferenciacin y jerarquizacin
de los elementos.
En las pruebas no se detect
algn problema con la
cromtica y su contraste.
Texto de ttulos o elementos importantes
Texto editado por el usuario
Elemento
seleccionado
Elemento
sin seleccionar
#34508c
#616c88
Presidente
Diputados
nal
do informe nal
0%
1 copia
pediente
1 copia
135
Look&feel
Formularios
Campo de texto activo

El usuario no lo ha
En cuanto a las formas utilizadas para el ingreso de datos por parte

del usuario, se utiliz una diferenciacin cromtica y de contraste
con el fondo para as evidenciar cada estado de dicho elemento.
Cdigo de la urna
seleccionado
Error en el campo de texto

Se utiliza cuando el usuario ha
dejado un espacio necesario
en blanco o con informacin
incorrecta
Campo de texto
seleccionado
Cdigo de la urna
Cdigo de la urna
y listo para que el usuario

ingrese los datos
Rol del usuario
Rol del usuario
Rol del usuario
Presidente JR
Presidente JR
Presidente JR
Tcnico TSE
Tcnico TSE
Tcnico TSE
Auxiliar TSE
Auxiliar TSE
Auxiliar TSE
Miembro de mesa
Miembro de mesa
Miembro de mesa
Miembro TSE
Espacio de seleccin nica

activo
Miembro TSE
Error en el espacio de
seleccin nica
Miembro TSE
Opcin seleccionada
el usuario ha dejado este

espacio necesario sin
seleccionar
136
Look&feel
Pop ups
Para obtener una proporcin adecuada para stos, se utiliz de

igual forma, la proporcin urea.
Ayuda
Conguracin:
Usuarios
Papeletas

Salir
Adems para la ubicacin de estas ventanas emergentes en la

pantalla, se utiliza como referencia una quinta parte de la altura de
sta, para as dejar ms espacio en la parte inferior, acorde al efecto
de la gravedad en el diseo.
137
Look&feel
Se utilizaron cuatro diseos
diferentes stas, en funcin del
objetivo de la comunicacin.
Cdigo de la urna
Contrasea
Mostrar los caracteres
Cancelar
Intentar de nuevo
Ventana emergente del tipo formulario.
Usuario agregado
El usuario ha sido agregado correctamente
Continuar
Ventana emergente de informacin de una accin realizada
siempre poseen un nico botn, ya que son un paso intermedio y
meramente de retroalimentacin.
138
Look&feel
Estamos cerca
Asegrese que la informacin que escribi sea

correcta, e intntelo de nuevo
Intentar de nuevo
Ventana emergente de error
Se utilizan cuando el usuario ha dejado un espacio en blanco en un
formulario o ha ingresado informacin de forma incorrecta, como
una contrasea.
Se trat de que sean lo menos alarmantes posibles, dicindole
al usuario que est cerca de terminar la accin, se comenta de
forma breve cul fue el error, y se le brinda la accin a seguir para
solucionarlo (en este caso, asegurarse de que la informacin que
ingres sea correcta)
Est seguro que desea continuar las votaciones

sin anular el voto actual?
Si, deseo continuar
No, cancelar
Ventana emergente de confirmacin

Busca evitar el error y confirmar las selecciones del usuario que
poseen riesgo dentro del sistema
139
Look&feel
Uno de los principales cambios que gener las pruebas iniciales de
paper prototyping se da en terminos de iconografa y la relacin del
texto con sta.
Se logr resolver y evaluar en las pruebas con la maqueta funcional,
obteniendo buenos resultados de la solucin realizada.
Antes
Despus
Cerrar
Salir
Cerrar la urna
Salir denitivamente
Cerrar la urna
Finalizar
En el caso anterior se tena confusin en cuanto a la diferencia de la

funcin de cada uno de los tres botones, donde Cerrar serva para
salir del sistema, Cerrar la urna para cerrar la seccin de votacin
en el sistema, y Salir definitivamente para salir de los resultados
que se muestran en el sistema posterior a cerrar la urna.
Se decidi entonces, cambiar el Cerrar por Salir, cambiando
adems el icono, Salir definitivamente por Finalizar que
representa la misma idea pero con una palabra an ms clara.
Mientras que en el caso de Cerrar urna solamente hizo falta un
cambio de icono.
140
Look&feel
Retcula
Ayuda
En el look&feel se le dio
uniformidad a la estructura de
la propuesta grfica, utilizando
una retcula que fue aplicada
a cada una de las pantallas,
basada en la proporcin urea.
Conguracin:
Usuarios
Papeletas

Salir
Cancelar

Nombre
Rol del usuario
Elena Mara
Presidente JR
Primer apellido
Segundo apellido
Montero
Ziga
Tcnico TSE
Auxiliar TSE
Cdula
03
0459
Miembro de mesa
0950
(ejemplo: 88 8888 8888)
Telfonos 1
2250
Miembro TSE
Telfonos 2 Opcional
4850
8890
3215
(ejemplo: 8888 8888)
Finalizar edicin
Usuarios
Agregar
un usuario
Informacin
de usuario
Nombre:

Victoria
Miembro del TSE
Miembro del TSE
Cdula:
Fabiana Mora AriasVolver
Miembro del TSE
Telfonos:
Juliana Gmez Madriz
Miembro de mesa
Rol:
Auxiliar TSE
Alfredo Prez Segura
Auxiliar TSE
Erick Mass Chaverr
Auxiliar TSE
Auxiliar TSE
Apellidos:
Madrigal lvarez
01 8743 1597
2552 0590
8870 4563
Editar informacin
Eliminar usuario
141
Look&feel
Pantalla de inicio de sesin

En este caso se muestra un texto descriptivo, los espacios
formulario para que el usuario ingrese la informacin requerida y los
botones correspondientes, para ingresar al sistema o salir de l.
Contrasea
El elemento para mostrar los caracteres de la contrasea se agreg

* *versin
* * * * *del
* *look&feel, como resultado de las
posterior a la primera
pruebas realizadas. ste fue evaluado posteriormente con buenos
resultados.
Contrasea
Contrasea
*********
tsecr2014
Contrasea
tsecr2014
142
Look&feel
Pantalla principal
Se trabaj principalmente en dar uniformidad y jerarqua a los
botones.
En las pruebas realizadas, los usuarios interactuaron de la forma
esperada con sta seccin.
143
Look&feel
Usuarios
Se aprovech la prueba de look&feel para validar algunos
cambios realizados en la forma de interaccin con sta pantalla.
Los cambios se realizaron para tener una interfaz ms limpia,
aprovechando que se comprob que el botn de Eliminar no
era de suma importancia en esta pantalla, como si lo era en la
informacin completa del usuario.
Dado lo anterior se decidi anidar todas las opciones de edicin
y visualizacin de usuario, accediendo a stas al presionar sobre
cualquier parte del rea horizontal del usuario respectivo.
144
Look&feel
Informacin de usuario
Esta es la pantalla detalle donde se anid las opciones de edicin
del usuario, as como la visualizacin de la informacin completa de
ste.
La forma de interaccin explicada anteriormente se evalu en la
prueba de look&feel, notando que los usuarios trabajaban con sta
de forma natural.
145
Look&feel
Edicin de la informacin de usuario

En la prueba de look&feel se pudo validar la nueva forma de
seleccin del rol de usuario, que, como se mencion en una seccin
anterior, no haba sido comprendida de la forma esperada.
146
Look&feel
Agregar un usuario
En este caso se mantiene la misma forma que posee la seccin de
edicin de la informacin, esto para una asociacin mayor con el
proceso.
147
Look&feel
Visualizacin de las papeletas

Se presenta una versin de la papeleta con una grfica ms simple
que la utilizada en la seccin de votacin, ms acorde a la esttica
del resto de la aplicacin.
148
Look&feel
En este caso se mantiene la misma estructura utilizada para la
prueba de paper prototyping, unicamente se valida en la prueba del
look&feel.
149
Look&feel
Se evalua principalmente el cambio mencionado anteriormente en
el icono de Cerrar la urna, as como la jerarqua de los botones,
dada ahora tambin por el color.
Durante la prueba de look&feel, el usuario interactua de la forma
esperada con sta seccin.
150
Look&feel
Informe final
No se realiza cambios de estructura de la versin utilizada para el
paper prototyping, a sta. Por lo que principalmente, la prueba con
la maqueta funcional, sirvi para evaluar la jerarqua brindada por el
color as como la asociacin de la palabra Finalizar con la funcin
del botn.
151
Look&feel
Seccin de ayuda
En este caso solamente se hace la adaptacin de la grfica a la
estructura que se tena en los wireframes, para su validacin en la
prueba de look&feel.
Los usuarios entendieron correctamente la semntica, ya que
adems tiene coherencia con las dems secciones.
152
Look&feel
Al ingresar a uno de los temas de la seccin de ayuda, el usuario

se encontrar con una gua de como realizar las actividades en el
sistema, de forma grfica acompaada de una descripcin textual.
Se le aplica un estilo grfico diferenciado para evitar confusin
entre los elementos de interaccin de esta gua y los de la interfaz
normal.
153
Aspectos finales
Conclusiones
Recomendaciones
Bibliografa
Aspectos finales
Conclusiones
El uso de animaciones en la interfaz de votacin aumenta
considerablemente la compresin del proceso por parte del usuario.
Esto como consecuencia de entender que los usuarios inexpertos,
solamente conocen los procesos fsicos, donde una accin lleva a
un resultado mediante un proceso (para abrir una puerta no basta
con desearlo, sino que se debe al menos halarla o empujarla). Este
razonamiento se aplica en el rediseo por ejemplo al momento de
mostrar como el voto realizado se deposita en la urna.
El hecho de que el look&feel no sea similar a las tendencias actuales
como las impuestas por Microsoft o Google, no le resta valor al
diseo (aspecto que parte de algunos comentarios de usuarios
jvenes), por el contrario, el proceso de diseo se centr en una
buena ejecucin del mismo para dar como resultado un producto lo
ms til y atemporal posible.
Al ser el proceso de votacin y todas sus acciones relacionadas,
tareas con las que el usuario no interacta diariamente, la
retroalimentacin para el usuario durante el proceso en la interfaz
grfica, es un aspecto fundamental y que se trat como tal en el
rediseo.
Antes que tomar otros sistemas como base para el rediseo
del sistema, la principal fuente referencial fue la interaccin
con la papeleta fsica y otros sistemas digitales con funciones
completamente diferentes pero ms cercanas al usuario.
La gran diferencia en la experiencia del rango de usuarios hace que
los paradigmas de interaccin sean muy diferentes, es por esto que
en algunos casos se toma en cuenta ms de una forma de llevar
a cabo una accin, siempre y cuando stas no se vean afectadas
entre s.
155
Aspectos finales
Recomendaciones
Toda la propuesta de rediseo se basa en las caractersticas
actuales del hardware de Voto Electrnico, siendo ste una
limitacin como se analiz anteriormente. Por lo que algunas
recomendaciones para la variacin del hardware podran mejorar la
calidad de la usabilidad:
Los sistemas de voto electrnico analizados como referenciales
utilizan una pantalla que permite visualizar toda la papeleta a la vez,
esto hace el proceso de votacin ms corto y similar al fsico; por lo
que se recomienda utilizar una pantalla ms grande.
El hardware actual es exclusivo, ya que permite la integracin de
muy pocas soluciones para personas con capacidades diferentes.
Se debe integrar un dispositivo sonoro que permita la lectura de lo
que aparece en pantalla o que comunique una instruccin en cada
etapa del proceso.
El rediseo del sistema debe reforzarse con elementos grficos que
sirvan de identificacin tanto en la tarjeta de activacin como en el
comprobante de votacin.
Para la tarjeta de activacin se recomienda una grfica descriptiva
sobre el sector de sta que interacta con la carcasa principal.
Mientras que para el comprobante de votacin se debe analizar dos
posibilidades:
Integrar una grfica al papel del comprobante que permita al
elector reconocer de forma ms fcil cul es el comprobante de
la eleccin de presidente y cul el de diputados; esto para evitar
equivocaciones al momento de depositarlo en la urna fsica.
Otra posibilidad sera que el miembro de mesa entregue un
comprobante en blanco para cada tipo de votacin, debidamente
identificado, y que el elector lo inserte en la impresora. Esto
permitira adems un mejor control por parte de los miembros de
mesa, ya que dicho comprobante podra ser firmado tal como se
hace con la papeleta en el proceso fsico.
Esta ltima opcin implicara el cambio a otro tipo de impresora y
156
Aspectos finales
otro tipo de papel, ms grueso, que evite su deformacin rpida o
fcil al tener contacto con el usuario.
Se debe cambiar el mtodo de interaccin con la tarjeta de
activacin, se propone que en la carcasa exista una ranura donde
el usuario inserte la tarjeta, esto para evitar equivocaciones sobre
qu zona en especfico de la tarjeta es reconocida por el sistema. A
esto se debe sumar un elemento que identifique cuando la persona
sac la tarjeta de la ranura al finalizar su eleccin, para as dejar de
mostrar la pantalla de cmo finalizar el proceso, para mostrar la
de cmo iniciar en vista de que llegara un nuevo elector a utilizar
el sistema.
Adems debe existir una luz pequea, cerca de la ranura, que
cumpla la funcin de dar retroalimentacin al usuario de la lectura
adecuada de la tarjeta de activacin.
157
Aspectos finales
Bibliografa
Anderson, J., Mcree, J. & Wilson, R. (s. f.). Effective UI US: OReilly.
Elejalde, E. (2012, 17 de Enero). Skeumorfismo, avance o retroceso?
25 Horas, 1. Recuperado el 17 de Octubre del 2014, de http://25horas.com/skeumorfismo-avance-o-retroceso/
Castro, J. (2011). Diseo de un prototipo embebido para la gestin
del padrn electrnico del T.S.E. Informe de Proyecto de Graduacin
para optar por el ttulo de Ingeniero en Electrnica con el grado
acadmico de Licenciatura Cartago: Instituto Tecnolgico de Costa
Rica Escuela de Ingeniera Electrnica.
ColorADD (s. f.). ColorADD Color Identification System Recuperado
el 02 de Octubre del 2014, de http://www.coloradd.net/friends.asp
Cuello, J. & Vittone, J. (2013). Diseando apps para mviles (1 ed.)
Barcelona: DiseandoApps.
Fernndez, J. (2013). Skeumorfismo Recuperado el 17 de Octubre
del 2014, de http://applesencia.com/tag/skeumorfismo
Fernndez, X. & Brenes, G. (2013). Informe estado de situacin de la
persona adulta mayor en Costa Rica (1 ed.)
Garca, J. (2008, 30 de Junio). Anlisis de usabilidad de los
portales en espaol para personas mayores No solo usabilidad,
1. Recuperado el 13 de Setiembre del 2014, de http://www.
nosolousabilidad.com/articulos/usabilidad_mayores.html
Instructivo Voto Electrnico, Argentina (s. f.). Recuperado el
05 de Noviembre del 2014, de https://www.youtube.com/
watch?v=jeSn7iwsZ3M
Len, C. (2012, 31 de Mayo). Casos de Uso: Diagrama y descripcin
Len, J. (2013, 23 de Septiembre). Plan de Aseguramiento de
Calidad Cartago: Instituto Tecnolgico de Costa Rica, Escuela de
Ingeniera en Computacin.
Liarte, D. (2013). Por qu sera positivo mantener algo de
158
Aspectos finales
skeumorfismo en iOS Recuperado el 01 de Noviembre del 2014,
de http://applesencia.com/2013/08/razones-uso-skeumorfismopositivo
ONPE - Voto Electrnico (s. f.). Recuperado el 01 de Noviembre del
2014, de http://www.web.onpe.gob.pe/voto-electronico.html
Prez, B. (2014). Tupera (Versin Alnitak) [Software]. San Jos,
Costa Rica.
Proceso Animado del Voto Electrnico - Panam (s. f.). Recuperado
el 05 de Noviembre del 2014, de https://www.youtube.com/
watch?v=AXqRe7ni0wA
Rams, D. Vits | Good design Recuperado el 25 de Octubre del 2014,
de https://www.vitsoe.com/us/about/good-design
Riestra, J. (s. f.). Qu es el Skeumorfismo? Recuperado el
17 de Octubre de 2014, de http://javiriestra.com/que-es-elskeumorfismo/
Smartmatic Electronic Voting System and Software (s. f.).
Recuperado el 17 de Agosto de 2014, de https://www.youtube.com/
watch?v=xcRWAVl9xjc
Tribunal Supremo de Elecciones (2013). Cuaderno de Trabajo
Electoral San Jos, C.R.: Tribunal Supremo de Elecciones.
Tribunal Supremo de Elecciones (2013, 17 de Octubre).
Caractersticas de las papeletas para a las elecciones generales del
2 de febrero de 2014.
Tribunal Supremo de Elecciones (2014). Personas con discapacidad
y adultas mayores en el ejercicio de una ciudadana electoral San
Jos, C.R.: Tribunal Supremo de Elecciones.
Unger, R. & Chandler, C. (2012). A Project Guide to UX Design, (2 ed.)
Berkeley, CA: New Riders, Peachpit.
Videos - VOTO ELECTRONICO (s. f.). Recuperado el 11 de Setiembre
del 2014, de http://www.ic-itcr.ac.cr/voto_electronico/index.php/
Videos
159
Aspectos finales
Web Accessibility Initiative (WAI) (s. f.). Recuperado el 03 de
Setiembre del 2014, de http://www.w3.org/WAI/
Zaki, T. (2009). Paper and Other Analog Methods (1 ed.)
160

Rediseño Voto Electrónico

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Rediseño Voto Electrónico

Загружено:

Авторское право:

Доступные форматы

Tecnolgico de Costa Rica

Escuela de Ingeniera en Diseo Industrial

Estudiante: Jos Adrin Gmez Montero

En diseo, la indiferencia hacia la gente y hacia la

Etapas de la metodologa del proyecto

Elaboracin de la nueva arquitectura

Este documento contiene informacin de la investigacin y anlisis,

Uno de estos indicadores es el crecimiento demogrfico del pas.

Aunque se ha realizado un diseo para el proyecto Voto Electrnico,

Necesidad o definicin del proyecto

El sistema actual de Voto Electrnico (que an no se utiliza

Aumento en los costos de produccin

Disminucin en la calidad del producto

Dificultad en el proceso de sufragio

No se tom en cuenta la usabilidad como un factor

El diseo se trabaj sin los procedimientos adecuados para

Mejorar la usabilidad del sistema Voto Electrnico

Toma en cuenta aspectos de accesibilidad digital (para

Evaluar la usabilidad del sistema actual de Voto Electrnico

Alcance del proyecto

Limitaciones del proyecto

En esta seccin se menciona el proceso de investigacin y desarrollo del

Desarrollo de opciones de diseo de arquitectura

Seleccin de las mejores propuestas realizadas

Desarrollo de una maqueta funcional del proyecto

Pruebas de usabilidad aplicadas a usuarios

Documentacin del proyecto

A continuacin se menciona cada una de las tareas generales realizadas

En este captulo se resumen los aspectos tericos investigados que

Es el espacio por medio del cual se pueden comunicar las personas

Es una vista simplificada del contenido que aparecer en cada

Look & feel

Propiedades y caractersticas que le dan una identidad visual

Se define como el arte y la ciencia de organizar espacios de

La Usabilidad se refiere al grado en que un producto puede ser

Se caracteriza por asumir que todo el proceso de diseo y

Consiste en una lista de toda la informacin contenida en un

Es un resumen representativo de los usuarios de un sistema,

Consiste en un modelo a escala o dimensiones reales de un

Esta prueba consiste busca evaluar la usabilidad de un sitio o

App con interfaz esqueuomrfica

El principal aporte de una interfaz esqueuomrfica se encuentra en

Uno de los mayores puntos en contra del esqueuomorfismo tiene

Las juntas receptoras de votos son los organismos

Asesores y asesoras electorales

Son funcionarias y funcionarios del TSE cuya responsabilidad

Integrantes de las juntas cantonales

Son las personas electoras propuestas por los partidos polticos

Integrantes de las juntas receptoras de votos

Son las personas electoras propuestas por los partidos polticos

Son ciudadanas y ciudadanos nombrados por los partidos polticos

Son agentes electorales que se encargan de velar porque la junta

Son ciudadanas y ciudadanos costarricenses propuestos por

Son representantes de organismos internacionales, acreditados(as)

Son personas jvenes voluntarias, acreditadas por el TSE, cuya

Cuerpo Nacional de Delegados(as)

Son ciudadanas y ciudadanos ad honrem, juramentados y

Encargados(as) de Centro de Votacin

Personal docente o administrativo que trabaja en el centro de

Son las personas mayores de 18 aos, costarricenses, inscritas en

el elector pasa al recinto y vota de forma secreta

la persona electora ingresa al recinto acompaada de una persona

el elector informa a los integrantes de la junta receptora de votos,

Nulidad del voto