UI Stepping Stones

Recently I've been planning a User Interface for a Human Resources application. As a bit of personal interest, I had to deal with my first child last year and build my motivation back up afterwards, and now I'm returning to it. It's a side project I've been doing for a while in PHP that is form-based, using Smarty templates and jQuery. I admit I have a bit of work to do to make things look good with CSS and the new CSS3. I love the descendants selectors! How to make things look neat and eye-catching...

The form fields are getting populated a lot of the time via "barebones" SQL queries. (In the future I hope to transform these into better Doctrine ORM statements!) Many of the form input fields are required to be filled out in sequential order, e.g. if fields A and B are not filled out, field C will need to be disabled somehow, because it is unable to be filled out yet. I juggled in my head a few ideas, like should I hide the disallowed fields, or make them read-only? The number of my fields was also growing on the form, and I needed to split them up somehow. (How many users get bored if they see more than 8-10 things to fill out on one webpage?)

In the end I went with the hiding/showing idea, and decided to split the many input fields into a number of form steps. Only one step view will be visible at a time. What this really means is that there are two steps, and two other extra places to add information: Edit Narrative and Attached Files. The Edit Narrative option features a rich text editor (fancy!). The Attached Files area will let users upload CV files for job applications.

Step 1 (above)

The challenges I'm going to face are:

• turning my plain select-options box into an AJAX text search box. This will be fun! As you type it will hopefully bounce back the results of database queries.
• migrating the project to a convenient web framework later. I'm looking at Symfony.
• putting it on the github repository site. Yes, an actual project by me on github.

I've attached a few screenshots to show my first draft.

Step 2 partially filled (above)

Step 2 completed (above)