Versions Compared

Key

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

...

This design revolves around a main navigation bar to maintain consistency across all pages. It also makes extensive use of tabs to allow for speedier completion of tasks and avoid unnecessary reloading of the page. The site tries to make the most important and obvious information as clear and visible to the user as possible, and includes breadcrumb reminders and shortcuts to common tasks.

Storyboard

Michael Minor decides that he wants to quickly check what his house is so he can perform it and check it off for completion. Since Michael wants to be a little less forgetful, he has bookmarked SkullWeb and placed it on his browser's bookmark toolbar. He clicks the bookmark, which takes him to the main page of SkullWeb. On this page, he can see some pictures of the brothers and the house and read a short description of the house. Image Added
Michael wants to access the brothers-only section of SkullWeb so that he can check what his house job is. He looks at the main navigation bar and clicks on the "For Actives" tab. Instead of taking him to a separate page, the site pops up a small login dialog box. Usually, Michael logs in using his MIT Certificate by clicking on the button marked as such, but the computer he is on does not have his certificate installed, so he decides to type in his Kerberos login details and clicks "Login". Image Added
Having logged in to the brothers-only section of SkullWeb, "For Actives", Michael is presented with a quick overview box that has his site profile picture, name, and his current house job(s).  If Michael decides to visit another part of SkullWeb, this information is also reflected in the top right corner of the site in a small box, which reflects how many house jobs he has and the number of reservations he has made. He can click on the labels in this box to take him to the appropriate part of the "For Actives" page. He can also click on his picture or name to take him to a page where he can change his profile picture. The "Complete House Job" tab is auto-selected, since the designers of the site realized that this task is completed more often than the "Reserve a Room" task. He can also see a list of upcoming reservations, which can be changed to reflect different time ranges. By default, it is set to events in the next 7 days.

Image Added

Michael, now quickly informed of his house job, decides to go off and do it. He comes back about 15 minutes later and decides to go ahead and submit his house job for completion. He marks down that he has completed his house job at 9:58 pm by simply typing it into the box. He finds that he has made a mistake typing in the time and has accidentally included some alphabetic characters, but the site automatically removes them for him and formats the time correctly. Michael also finds that the date in the date box is auto-populated to the current date. In the past, Michael has been a little late in marking his house jobs for completion and has used the calendar widget that appears upon clicking the box, but today he's proud that he has gotten everything in on time. Michael also accidentally broke the mop dancing with it since he thought no one was looking and so he marks in the comments that the house needs a new mop. Thankfully, the house manager will receive this comment and buy a new mop next time he goes to Home Depot.

About to leave, Michael realizes that he needs to reserve the Music Room to watch the Steelers game next Sunday and so he goes ahead and clicks on the "Reserve a Room" tab to reserve it.

Image Added

Michael goes ahead and types in the name of the event that he is reserving the room for and and picks the appropriate room from the dropdown box of rooms that can be reserved. Clumsy as he is, Michael accidentally tries to reserve a timeslot that has already been taken (on a Saturday) but is helpfully presented with a message saying that this timeslot has been reserved. Picking the correct time, he fills in the time and date, as well as some comments and clicks "Reserve". Michael is impressed when he sees that his event has blinked into existence below the list of upcoming reservations, in the correct ordering.

Having completed the tasks he wanted to do, Michael shuts off his laptop and goes to sleep, content with himself for having finally completed his house job on time. "What a useful site", he thinks, as he drifts off to peaceful slumber.

Meanwhile, Max Powers is in his dorm room looking at different fraternity websites. He decides to go to skullhouse.mit.edu, which takes him to SkullWeb. He quickly notices that there is a "House Tour" option in the main navigation bar and is excited because he loves looking at the difference between fraternity houses. He clicks on the House Tour tab and is presented with information about rooms on the main floor of the house.

Image Added

From here, he can click on the different tabs of the page, each corresponding to different floors of the house. He can also click on individual floors on the image of the house on the left border of the page and be taken to the corresponding floor tab. In each tab, he reads a description of the rooms and some history behind the house, as well as some funny and interesting events that happened in each particular room. He clicks on the different images and is presented with a lightbox containing a larger version of the image. Having explored each floor, Max feels that he has gotten a good feeling for what the house is like and decides to visit at a later date.

Design 2

Storyboard

Scenario 1:

...