Conclusion

Table of Contents

• 1. Overall
• 2. Potential Improvements

1. Overall

The goal was to develop an exam registration page that enables students to easily register and view exams not only on desktop but tablet and mobile devices. The implemented pages of the application are almost completely responsive. The focus was making the mobile and desktop views easy to view and use. For example, all of the pages were made responsive. Further, the text and buttons size were made larger for making it easier to click on mobile devices.

Bootstrap was a great library for coding a responsive application. This was due to the many options for layouting (d-flex), the aesthetically pleasing styling, and the many useful ready-to-use components (e. g. modals, tabs, tables). However, an interactive overview of the possible flex combinations like flexbox.help would have been very helpful (Flexbox Help, 2020).

Making the application accessible via the Internet was more challenging than expected. Especially, setting up the application for being deployable. For example, implementing the static routing, integrating packages using Express, and understanding how HTTP web servers work. Further, the Heroku solution was much easier than the Netilfy solution, which was unexpected. One issue with Heroku is that it needs to load a little after each new access. This is due to the Heroku free version.

The many possibilities of displaying tables on mobile devices were also a great learning (Jarosz, 2019). For tables with fewer columns, rows should be converted to a vertical list for mobile devices to make them easier to read. This is mainly due to horizontal scrolling not being an intuitive interaction pattern for mobile devices.

For tables with many columns, responsive tables (Bootstrap, 2020d) may be the better solution. One reason for this is that display many lists vertically would require users to scroll for a long time on mobile devices. Also, some of the drawbacks of a responsive table can be negated. Users are most interested in the first columns and the scrollbar can be made always visible (as an attention-getter).

2. Potential Improvements

There are several next steps and potential improvements that could be made to the current web application.

One of the most important features would be to make the table work with real data. This could be achieved by connecting the Express backend via a database connector to a database, where the real data is stored. The real data would need the usage of a better table visualization library such as Bootstrap table (Bootstrap Table, 2020).

Also, it would be beneficial to deactivate the buttons for deregistering or enrolling in courses, if none of the checkboxes is selected.

On the exams page, the tables for selected registerable courses and registerable courses should be displayed side by side on desktop devices. This would take advantage of the large width. Most significantly, users would be enabled to easily keep an eye on which courses they selected and which they want to enroll in.

Further desirable would be the implementation of an active state for navigation links. This was more difficult than expected due to the routing via Express backend. Lastly, developing the remaining pages for the web application would greatly enhance the user experience.