...
Ben then decides that Alyssa will fill the position, and sends an update to all followers of the post that the position is closed. Dragos receives an update regarding the same.
Storyboard designs
Design 1
...
Ben, a recruiter for a Software company, is looking for Software Developers at MIT. Thus, he goes to the MITJobs homepage (figure 1). Since it is the first time that he is accessing MITJobs website, he does not have an MIT certificate. He signs up using the form shown on the right.
...
...
After singing up Ben enters a new webpage (figure 2a). He wants to create a new post and thus he presses the button “Create Post”, which is at the top-right of the page.
...
...
Then an overlaid webpage (3b) appears in front. Ben fills in all the necessary information about the job opportunity and saves it. While creating the post there is no "Message" button at the top. This is only for people browsing the posts to contact recruiters or for recruiters to message people following the post.
...
...
...
At this stage, she browses the job posts, where there is a small description of every job. When she finds some nice job description, she clicks on it. After she clicks, an overlaid page with the description of the job post appears (just like the one in 3b, but without the save button).
...
...
Alyssa decides to contact Ben to inquire about the posting, and get some more details about the project. At the post (3b) she presses the button “Message”, then she is redirected to page 4c, with the information of the recipient filled. She then writes her message, and sends a new message.
...
...
She then receives a reply from Ben. The list of messages in the inbox is similar to the list of posts in page 2.b. On clicking a message, it is displayed as an overlay objec, which looks like page 4b. Using messages, Ben and Alyssa set up a meeting.
...
...
...
Design Analysis
...
Learnability:
...
The interface is easy to learn since it uses several common affordances. The homepage is very similar to some webpages to social networks that are widely used, like Facebook, Twitter and Gmail. The tabs resemble the organization of a webrowser.
...
Efficiency:
...
This design is very efficient, since the user is on average three clicks away from whatever information he/she needs. For example; to sign in or sign up, to choose the right tab, and to choose the relevant information within the tab. The only problem is that the user needs to sign in every time that enters in the website, which makes the website less efficient. We could work around this by making it such that a user can choose to “stay logged on”. Also, since filtering posts is allowed while browsing using the tab on the left, MIT users may be directly logged into the "Browse" page and can filter things directly from there. However, this might affect learnability.
...
Visibility:
...
The main executable tasks are at the top of the page, right after the “MIT Jobs” logo. If the user needs to do some task related to messaging, posting or browsing, there is a clear tab indicating them. Also, for an employer, the button to create a post is always visible at the top-right of the page, making it very simple to the employer to create a post.
There is the problem when reading posts or messages. These are displaed as overlay objects on the browser. Since the message or post is over the screen, nothing can be done on the site other than editing the post or message on the website. But when replying to messages, the old messages is always appended at the end of the reply, so the user knows what is the content of the original message.
...
Error Prevention:
...
The buttons have a clear description of the actions they trigger (like delete or follow). When creating a post, a recruiter can just close the overlay object to discard, but it might be better to actually include a “Discard” button. Similarly for the creation of a message, we had envisioned closing the overlay object to discard the message, but it might provide more affordance to the user if we put a “Discard” button in this case also.
Design 2
In this design, Ben comes to the website (Figure 1) and clicks on the “Sign Up” button.
...
After Ben decides to hire Alyssa, he clicks on the “Send Message to Followers” link on the post description, and sends a message to all followers (i.e only Dragos here), that the position is now closed.
Design Analysis
...
Learnability:
...
The interface is learnable as it uses many of the commonly employed affordances, such as buttons, and links. Aspects of the system model (posts, messages etc) are represented well by the interface. Also, the interface uses mostly recognition rather than recall. The interaction style is a combination of direct manipulation with menus and forms. For example, hovering over a post gives instant feedback by displaying a short description of the post, but clicking on “Show More” displays a new form. Novice users should find the interface easy to navigate.
...
Efficiency:
...
For an MIT student, the process of logging into the website is a little inefficient as it requires an extra click of a button. However, apart from this feature, the design is quite efficient. The use of big icons to represent messages and posts gives the user a large area to point, and thus makes the user interface efficient (using Fitts law). To click on a post/message, the user can click on the icon or on the ‘Show More’ link, thus giving the user a large area to click. The only action, which requires more precise pointing (and some steering as the user has to point while keeping the mouse on the icon or description) is to send message (to creators of the post or to followers of the post), as the user has to point to the “Send Message” link. One aspect of efficiency that this design lacks is there are not many shortcuts for expert users.
...
Visibility:
...
Most features of the design, including the state, available actions and feedback are visible on all pages. For example, on the home screens, all pages you can go to (Create Post, Browse Posts, Posts I’m following, Post Updates etc.) are represented as big buttons on the screen, and thus are very visible. Hovering over a button highlights it, indicating it is clickable. Any new message highlights the “Messages” button in a different color; similarly, a new post update highlights the “Post Updates” button. While browsing, hovering over an icon of a post highlights it and displays a short description. The description also has all possible actions a user can do with a post (follow, send message to creator etc.). Breadcrumbs are used to indicate which page in the page hierarchy we are on, and also make it possible to go to a parent page. Although we do not have feedback right now for some actions (e.g. there are no messages such as “Post has been created”, “Message has been sent”, “Post has been deleted”), we intend to add these at the top of pages, without altering the conceptual design of any page (these will be similar to the simple messages Gmail displays, and deletes will have options to undo as well).
...
Error Prevention:
...
Most potential errors are easy to undo. For example, if a user clicks on “Follow” for a post, the “Follow” link changes to “Unfollow” (giving immediate feedback. This allows the user to immediately undo his action. Posts can be created, read, updated and deleted. The only actions that cannot be undone is sending messages, which is a feature of all message sending/receiving programs (including e-mail).
...
Dragos will see the message in his message inbox (fig_7), and know that the position is filled.
fig_7
Design Analysis
...
Learnability:
...
This interface is firmly grounded on the use of recognition rather than recall. We always present sufficient visible cues to make the user’s next decision a simple task of seeing a few next steps that he/she can take and deciding amongst them. For a Non-MIT affiliate who is assumed to be able to only employ, he/she can only browse posts they have advertised and see messages they have received. There is not too much on the screen to demand the user to remember where this or that is located. For an MIT affiliate, we present more tabs to reduce the density of the screen. Less density presents a perfect platform for recognition. Although we tried to manipulate the design to keep screen information low, this design has a lot more things presented on a single screen as compared to the other 2 designs (e.g. recruiter can see all communication regarding post on post page itself), and thus is less learnable than the other 2.
...
Efficiency:
...
In this design, Tabs allow fast navigation through the various possible pages. However, as this design has a lot of information laid out at once on the screen, it may not be very efficient to navigate through individual pages. For example, most actions (viewing posts, following posts, sending messages) require pointing to a regular sized button or link as opposed to big icons in the 2nd design. There are not many shortcuts to aid expert users in accomplishing tasks faster.
...
Visibility:
...
The state of the system, as well as the available actions, and feedback for all actions is very clearly visible. For example, in a post, the post creator can view on a single page the post, as well as all communication related to the post. Similarly, a user browsing the post can view it as well as his/her communication with the post creator. Clicking on “Reply” to a message has instant feedback as it displays a textbox where the user can reply to messages. All possible pages a user can navigate to are visible at the top of the screen. Similarly, all filters are also visible while browsing posts.
...
Error Prevention:
...
This design is more error prone than the other 2. For example, deleting a post will delete all communication associated with the post as well, which may affect the user experience of recruiters. In this design, users can create, read, update and delete their posts. Some actions, such as following posts are easy to undo, but some such as creating and deleting posts, and sending messages are hard to undo.