...
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.
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".
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.
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.
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.
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.
Analysis
Learnability:
- The global navigation bar makes for a clean and simpler navigation interface, making the site simpler to use for first-time visitors.
- A consistent tabbed interface throughout different pages of the site helps familiarize the user.
Visibility:
- The navigation bar makes the main and important tasks of the site very clear to users.
- Quick-overview boxes displaying the most relevant and important information (such as house jobs) help users find what they need with the minimal amount of clicks and searching.
- A global profile box in the upper-right corner provides shortcuts to important tasks and quick information.
Efficiency:
- Navigation bar (and few options) makes navigation efficient.
- Global profile box shortcuts make going to important tasks quick throughout the site.
- Automatic formatting of the time and calendar widget make entering date and time faster.
Error Prevention:
- Global navigation makes going back to different pages very simple.
- Automatic time/date formatting removes most errors in input.
An issue in which the brothers do not know how or where to go to check their house jobs and reserve rooms is possible, but we assume that brothers will be informed of this from the outset.
There may be some issues with the ordering of the different tabs in the global navbar for optimal navigation. Some tabs could be removed (such as "Contact"). Two forms of navigation for the virtual house tour may also be a little confusing.
Design 2
This design is a simplistic straightforward web page. It will rely on the user to click on and try different buttons. It presents a very forgiving check system that does not penalize the user for making mistakes. This design option decreases the efficiency of the site slightly.
Storyboard
Scenario 1:
Michael Minor has been to SkullWeb many times throughout his three years at MIT and knows how to achieve maximum efficiency on it. So he pulls up his bookmarked pages and clicks on the first and most important one "SkullWeb". He then sees the home page described above. Without reading a thing he mouses over to the "Actives Access" button and clicks. He is taken to an intermediate sign in page. Once he is signed in he scans the actives main page:
Michael sees that he does have a house job but he also notices that he forgot to reserve the tv for the big game. So he clicks "Add Reservation" and fills out the information. After submitting this he checks the calendar to make sure it went through. He then runs off and does his house job. Once he returns he clicks on "Completed???" and fills this out:
Now that he is finished he signs out and continues his school work.
Scenario 2:
After arriving to the sites main page (as seen above), Max realizes that there are no current Rush activities happening because the "Current Rush Activity" says "The next event is at 3:00 tomorrow". So he locates this event on the Mini Rush Schedule. The name of the event is not that much help so he clicks on the schedule and it takes him here:
Max will be able to go the the event but then he has school work and wont have time to come back to the house for the legendary house tours given by the brothers of Phi Kappa Sigma. Max is also very lazy so instead of heading over to the house for a tour now he continues his scouring of SkullWeb. He decides to use his little free time now to click through the tour so he clicks on the "Tour" button at the bottom of the page and is taken here:
Max is finished with the tour, remembered to mark on his calendar when the rush event is, and has run out of free time so he goes back to work.
Analysis
Pros:
- This design has a upfront presentation. All options are clearly labeled and easy to access.
- Allows user to return to the home page, and features many warnings and hints.
- Good learnability for new users but provides efficient ways to accomplish all goals for experienced users.
- Affordances for each new area of site are clear (button shape of all clickables)
Cons:
- Possible chance of cluttering, decreasing visibility of the site overall
- Increase in error checking, also decreases efficiency in some areas (needing more clicks to complete a job)
- Extra sign-in window provides another hit to efficiency
Design 3
Storyboard
Max wants to what the rush schedule is like, so he heads to the Phi Kappa Sigma website. When he clicks on the Rush tab, he's taken to a page grouped by days.
Max Powers decides to navigate to virtual tour section so he can see what the house is like. The page looks like this:
The page immediately gives a quick overview of the entire house by showing how many floors there are. The site gives some general details for each of the floor, which help Max better pick which one he might be interested in looking at. He clicks on the fifth floor since it has bedrooms listed and it expands on the same page:
This gives him a slightly more detailed view, with some facts about the floor. He hovers of the floorplan and decides to click on a bedroom:
A picture of the room pops up and provides him with slideshow navigation where he can scroll through multiple pictures of the room. This gives him an easy way to see the house visually while knowing the purpose of each room and where it's physically located.
Scenario 2:
Since, Michael is a Brother of Phi Kappa Sigma, he knows to click the crest on the homepage in order to access the internal site.
When he clicks on it, it expands and asks him to log-in with his credentials.
When he's authenticated he goes to manage his house jobs. It has a navigation bar which allows him to move between weeks. It also has an are which describes his specific house job and it's due date. He can mark his job as completed and the server will record his submissions.
This same tabbed interface allows his to use the room reservation system. He can visually see what rooms are reserved on a timeline as well as group by room below. He can click on each of the horizontal bars, which represent reservations, to get more details such as who reserved it, why, and when they did it. The system will automatically display as much information on the bar itself, but will truncate itself when space becomes limited (similar to the functionality of hipmunk.com).
Analysis
The design sacrifices consistency for functionality. Since there are two main types of users, it provides them with two different interfaces. The internal website for house jobs and room reservations uses one consistent interface while the public-facing section uses a design with separate considerations. The different aspects of the site are presented in the way most suitable for their data and draw heavily for implementations used in familiar web applications.