En esta ocasión, estoy trabajando en el diseño del sitio de evaluación de la Olimpiada de Informática del DF. La intención es crear una interfaz limpia, intuitiva, funcional y que motive a los alumnos a seguir resolviendo problemas.

La primer pantalla que se muestra al abrir el sitio es la siguiente:

El mensaje de bienvenida está especialmente pensado de programadores para programadores y variará en cada ocasión que se abra la página, mostrándolo en distintos lenguajes de programación.

Al momento de introducir los datos de acceso, el sitio mostrará las sugerencias de quién es el usuario para agilizar el proceso. Ya sea que coloquen su nombre o su correo, el script lo irá detectando y mostrará las opciones adecuadas.

Una vez que hayan hecho login exitosamente; les mostrará la pantalla con los problemas disponibles para la categoría en la que se encuentren; además de un menú persistente con sus datos.

Los datos que se muestran son:

Cada uno de los sets de problemas (definidos por los rangos) tiene un fondo especial para incentivar a los alumnos a completar más rangos para obtener estos nuevos diseños en la página.

En caso de que el usuario no tenga el rango suficiente, se le mostrará un mensaje notificándole y no le permitirá verlos. Este tipo de restricción se incluyó pensando en motivar a los alumnos a resolver más problemas para desbloquear más rangos.

Una vez que seleccionen un problema; se mostrará una pantalla para que puedan leer la descripción de éste y poder enviar sus soluciones.

La selección de lenguaje se hace a través de botones bastante visibles antes de que se seleccione el código, evitando así un problema común de tener errores de compilación debido a obviar este paso.

La selección de código no se hace con el seleccionador de archivos por default del sistema operativo sino por un botón más visible, cumpliendo así de forma satisfactoria con la Ley de Fitts. Además, todos los elementos de la interfaz se conservan para darle persistencia a ésta.

Por último, si un código ya se ha enviado con anterioridad; puede visualizarse desde la misma página para que los usuarios puedan comprobar que efectivamente ése es el que deseaban enviar; además, es posible hacer una edición rápida desde un editor integrado a la página y enviar las modificaciones a el código de forma más rápida y dinámica.

Aún faltan varios elementos que detallar y diseñar; sin embargo, esto representa un primer acercamiento al nuevo diseño que se propone para este sistema.