Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The two-column layout gives visibility to the two pieces of information the user is likely to be most concerned about: her upcoming tasks, and links to all her application materials for each company. The tasks are sorted by due date (with the nearest deadline appearing first in the list). They can also be filtered by company - so if a user wants to see just the tasks for one company, she doesn't need to leave the main page. Companies are sorted in alphabetical order.

The homepage has two kinds of buttons. We use the default text buttons at the bottom of the screen. These buttons are fairly learnable, as they say exactly what they are for. They are not as large as the buttons at the top of the page, but unlike those buttons, they can also be operated by tabbing until they are selected, then hitting the "enter" key. We did not take a lot of trouble to make this way of operating the buttons visible to our users, but it is consistent with the behavior of other websites and by default, browsers will highlight buttons when they are selected.

...

When the user clicks on the Add Document icon, a modal dialogue box pops up, leaving most of the task and company boxes visible. We chose to use a modal dialog box instead of directing the user to a different screen because

Until the user has filled out all three fields, the submit button remains grayed out. This prevents errors with the submission. With another form, this might be confusing, but the asterisks and the notice about required fields provide a pretty clear hint about what could be wrong. Also, graying out buttons is a pretty common way of ensuring form completion, so most users will have probably seen similar behavior.

...

To edit a task, the user first clicks on a task to expand it. There are several affordances for clicking - the task looks like a button, and on the left it has an arrow pointing inward, which is a common way of denoting "unexpanded view".

After clicking, the font and background of the task change color and the arrow points down. These changes help distinguish unexpanded from expanded tasks. To edit, the user clicks the "Edit" button.

...

Deleting tasks or companies can be accomplished by clicking the "x" on the task or company. Doing so brings up an alert:


We included the alert to protect our users' data.

...

On our company page are four boxes, which contain the documents, tasks, notes, and contacts for that company. The process of adding documents and tasks is consistent with that on the homepage, except here, all "Add ____" buttons are the default text buttons. This is consistent with all addable thingies being present in boxes on the page.
Documents
Adding documents is still accomplished by means of a modal dialog box. The only difference in this dialog box is that it does not allow the user to select a company - the company is determined by which page the user is viewing.

Once a document is added, it appears in a list, where it can be deleted or clicked on. If it is clicked, the document will be downloaded and (depending on the browser) may appear in a new tab. For example:

Tasks

All task operations are consistent throughout JobTracker. The only difference between adding a task on the homepage and adding a task on a company page is that, as with documents, you don't have to specify the company on the company page.

...

Contacts are added in a similar manner to tasks, but we did not use the accordion widget for contacts as all contact information can be displayed on one line. After pressing "Add Contact", the user sees new fields containing default text.

After filling in these fields and pressing "Save", the form contents are changed to look uneditable. Pressing Cancel instead will cancel the operation (whether add or edit), and the delete button works as elsewhere.

Unsaved Data

On both the company page and the homepage, if the user tries to navigate away from the page with any part of the page still in edit mode, she encounters this dialog box:
This helps prevent users from losing data that they forgot to save.