You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

Design #1:

Beaver Buzz home page. If the user visiting the page is new, he can sign in by clicking on the sign in button. Old users can input their user names and passwords in the supplied boxes. The homepage also has a search bar which allows users to search for topics, user posts, etc. The main feature of the homepage is the "What's Hot?!" section which is a scroll bar interface which displays the most commented Events and Posts.

Design #2:

This design trades off how much information you get from each article preview for more articles visible on the screen at once.  Discussion posts are sorted by topic and events are sorted by groups/hosts.

Below is the page to create a new post or event

Design #3:

This design was meant to be slightly more consistent with other article-sharing websites on the web, such as Digg.com and Reddit.com. In particular, we treat discussions, articles, and events very similarly. However, we did want to make the interface simpler. Thus, there is only two types of actual pages. The first is the “View Topic” mode, which contains links to articles, events, and discussions. These are ordered by most-recently posted. The only exception is the “What’s Hot” topic, which is ordered by how many people have liked the topic. Users may navigate through topics, view the posts, and like/dislike the posts. The other type of page is the “Discussion” mode. Every Article, Event, and Discussion has this mode, and it is where users may discuss the current post. A user may either post a new comment, reply to another comment, or delete one of their old comments.

All other functionality is done through dialog boxes. This keeps the page as simple as possible, and makes it easy to return to the previous point of navigation. In the following storyboard, we demonstrate how a user may interact with the interface. We include (very rough) sketches of the interface at appropriate places.  The sketches focus on making the layout simple, efficient, and learnable.

Storyboard - Design 3

Scott, a phD student in the Political Science department, has just heard about Beaver Buzz from a friend, but he’s skeptical about joining right away. He’s decided to check it out first to see if it’s worth it to give out his email to yet another website. He types in beaverbuzz.mit.edu to his url bar and is greeted to the front page, which is by default the “what’s hot” topic.

Scott isn’t particularly interested in the Alpha Pi Omega party, the new Elder Scrolls game, or discussing Hass Classes. He sees the “News” link located in the favorites section and clicks it. The bottom-right page reloads and he is presented with a selection of articles pertaining to current events. This is much more to his liking.

After clicking some of the articles, he realizes his life won’t be complete unless he himself can post articles and comment on them. He sees the “login” option in the upper-right hand corner. He clicks on the option “Get Account.” After using his MIT certificate to verify he is a student, a short dialog window appears. All he has to provide is a username (he chooses “Scott25”), a password, and a valid email address.

He is taken back to his old page, but the upper-right hand corner now displays his user information.

He decides that he’d like to discuss the article entitled “Egypt Uprising.” Being a fierce proponent of Democracy, Scott shows his support for the Egyptian people and leaves a comment. He browses several other topics and their discussions and leaves thoughtful comments. After getting tired, Scott logs off and goes to the gym.

After getting back, Scott logs back on to beaver buzz. This time he only needs to provide his username and password. He clicks on the “View Recently Discussed” link, which pops up a dialog box, and finds that several of his comments have been replied to.

He checks out the discussion for the “Uprising in Egypt” article.

Finally, later that night Scott reads an interesting article, also about the situation in Egypt. The article details the causes of the uprising. He logs back on and clicks the “News” topic. He decides to “Post New,” which takes him to a simple dialog box. He enters the desired name for the new post, “History of the Egyptian Uprising,” specifies that it will contain an article link, and posts that link in the textbox. He submits the article, which is posted at the top of the “News” page.

Out of curiousity, Scott clicks on the “Events” tab to see if there’s anything interesting. While there isn’t anything particularly exciting happening that night, Scott sees that the LSC is playing a movie tomorrow.

He’s not sure if he’ll go, but he keeps it at the back of his mind. Finally, being an amateur linux hacker, Scott would like to Computers to his favorite topics so he can access it quickly. He clicks the "edit" link next to the "Favorites" tag, at the left-hand topic scroll bar.
Scott notices it's really late, and that since he had oodles of fun on Beaver Buzz getting into flame wars with communists and anarchists he had lost track of time. Satisfied with a day well-procrastinated, Scott goes to bed.

  • No labels