Tuition Estimator Redesign
A tuition estimator for Northern Illinois University with improved responsive design and accessibility
NIU provides a web-based tool that lets students estimate their tuition, room, and board expenses, and plan how financial aid will cover those expenses. I updated this tool to work with their new Bootstrap theme, and also made it responsive and compliant with the Illinois Information Technology Accessibility Act and current accessibility standards.
Fewer Decisions to Make
When possible, I applied Hick’s Law, limiting the number of initial decisions a student needs to make and therefore decreasing the time needed to make a decision. Hiding fields or information that the student couldn’t use until they complete other fields was a good way to accomplish this.
A sticky or floating cost summary area makes the best use of available screen space on both desktop and mobile.
As a public university, it’s important that Northern Illinois is in compliance with the Illinois Information Technology Accessibility Act. During the redesign I improved accessibility compliance over the previous version of this page with:
- Appropriate semantic use of headings and form elements
- Buttons with self-descriptive names
- Form inputs wrapped in approprate
- Elements given
aria-labelvalues when appropriate. For example, question mark icons linking to pages with more information were given a descriptive
aria-labelvalue to represent the meaning that was communicated visually by that icon’s proximity to other information on the page.
A Great Print View
The client also noted that students often want to print this information, so they wanted a print view that was as good as the on-screen view. CSS media queries make this possible. The student can use the browser’s native print function on this page to get a great print view.