...
Image | Description |
|---|---|
| The main page. Barring a login system, this is what the user would see when they first progress to the StudentSearch website. We included the browser in our paper prototype, incase the user decided to try the back, forward, or refresh buttons, so that we could present our warning dialog. This page has a blank search (no courses or skills), a pagination bar of 7 pages, and 8 students randomly sorted (since no search criterion can be applied yet.) |
| The user enters a class to search for and then hits enter, adding that class as a search box on the left. |
| After entering a search term, the Start New Search button becomes usable and the search results begin to update, including the pagination bar shrinking from 7 pages to 2. |
| After entering more classes, the user tries to enter an OR clause. He hits enter and gets the following result, depicting an OR clause. The search results again update. |
| Afterwards, he clicks on the button to view more student information. Here you can access a student's resume or recommendations (if applicable) and view just some more information about them. |
| This is a user trying to hide a student by clicking the X. It would temporarily remove the student from the search results. By hiding a student, it also adds the undo bar (2nd pic) and shows the "View Hidden Students" button (bottom, next to e-mail.) |
| The user decides to unhide one student, but is unsure which. He views the hidden students page, where the "Restore" button has replaced the X's on the cards so that he can restore them. (A restore all option is also available.) |
| By clicking a student back on the main page, a user selects students. They achieve a green highlight to signify their selection. Once he's done, he will click the "E-mail" button to progress. |
| He'll now attempt to e-mail the students. He has the ability to remove a student from the recipient's list on this page, barring the need to go back. Should the user to decide to go back to add another user, their currently entered body and message will be saved so that they don't have to retype it. (It's very easy to highlight all and delete.) |
| Once ready to start a new search, the user is shown the following confirmation dialog. |
Prototype 2 Photos
Image | Description |
|---|---|
| The updated main UI. The e-mail, "view hidden students," and "start new search" buttons are hidden by default. (They will likely be grayed out in the final UI.) You can also see our attempted solution for OR confusion by providing an example below the input boxes. |
| The "Start New Search" button appears after entering some details. Pagination also updated to reflect the new search results. |
| Fully filled search field. |
| A user trying to view more details. You can clearly see our more visible "Hide" button. |
| The updated "Hidden Student" bar. We removed the "View Hidden Students" link because we moved the button to the top, next to where the bar would appear. |
| We moved the "Restore" button from the upper-right to the lower-left, to match our movement of the "Hid!e" button. |
| Selection in the new UI. After having items being selected, the "E-mail" button appears in the lower-left. |
| Sending an e-mail. |
| Confirmation that your e-mail has been sent. |
| The updated confirmation popup. Originally, the buttons were flipped, which is inconsistent with other UIs. |
Briefing
Imagine that you are a professor trying to find a qualified student to work in your lab, which produces user interfaces for educators to easily create classroom materials. You would like to be able to see and potentially contact selected students who have taken 6.813 (UI design) and 11.127 (Computer Games and Simulations for Investigation and Education). Because your project is built in Java, you want students who have Java experience, but if they know C++ and Matlab they would also be able work on your project. Your tasks will be to use our user interface to search for qualified students, see more information about they students, and contact the ones you are interested in.
...