Human Computer Interaction Assignment 7

By Chris Eigner and Ildikó Tóth


Clatter (Class + Chatter) is a web-based, classroom-focused chat application. Users and teachers can send messages, ask/answer questions, post relevant course material, and tag and search content. Chat rooms exist at unique, easily-bookmarked URL’s.


Male, 27, media/film major. Uses computers mostly for visual purposes. He is above average computer-savvy, uses computers and interactive interfaces every day.



  1. Create an account and Log In to Clatter User knew to go to sign up link, but on the next page, clicked “sign up” button without putting in account information, which redirected him to sign in page again. Clicking the Sign up link again, he figured out that the page was to CREATE the username and password. The page looks too much like the login page and could be confusing.

  2. Find how many users are logged into the class chat for CS101 Winter 2012 quarter. This functionality was not yet enabled in the Prototype, so was not tested.

  3. Write a message into Winter CS101 2012 class chat in response to a message already present. User successfully navigated to the correct class page, and wrote a response to the existing chats. No difficulty found here.

  4. Using Search, find the line(s) that mention the word “homework”. User found the search bar without a problem, and typed in homework, as expected. Prototype search isn’t the best, so he was a little confused about the outcome, but did like the highlighting feature.

  5. Enter the Fall CS 101 chatroom. How many messages have been written? This step, user did twice. First time was directly from the winter CS 101 chatroom. In this case, he clicked on the winter chat’s header:

instead of the back arrow. When that didn’t do anything (just stayed on the same page), the user moved his mouse over more to the left, and clicked the left arrow directly. Once back on the courses page, user had no trouble navigating to the fall CS 101 page, and after waiting a bit (he noticed previously that for the chat to appear on the screen it took a little lag time), he wrote the answer to this question. The second time, he logged in, and went straight to the correct chat page without any difficulties, writing a new message.

  1. Log out of the system No difficulties.


  1. Login to Clatter using the username and password you created above. No difficulties found. Browser suggests to save password, which is a browser feature, not part of this app, it is purely an extra step before it lets you log in.

  2. Enter the chat room for Winter term of CS101 No difficulties.

  3. Find all conversation about last week’s assignment User uses search function typing in directly “last week’s assignment”. In this case, the directions weren’t specific for a reason - to see how user blundered through the question. Since the chat refers to this assignment in multiple ways (homework, reading assignment, etc), the user had to use multiple search queries before finding the correct section of the chat that had the link. This may be a valid use case, since the chat will contain many messages.

  4. Open link to assignment1 Once the link was found in number 3 above, the user clicked the link, and opened the file without issues.

  5. Log out of the system. No difficulties.

Changes to UI

Relating to number 3 in set 2 of the questions, the search is good with highlighting the chat lines, but a tabbing feature may also be useful so in case of a longer chat window, user doesn’t have to manually scroll through everything, rather jump from found term to found term. And/or, search could show only those lines with the search term included, with […] between each line where there is other content not related to the search word; i.e.

User 1: hi there, what is your name

User 2: why do you want to know

User 1: because I forgot…

User 2: ok, my name is John

would turn into UI view of the following when the word “name” is put in the search box:

User 1: hi there, what is your name […]

User 2: ok, my name is John

the […] should be clickable to expand intermediate content while search is still active. A different background color could also be useful when expanded to indicate that it is not a result of the search.

User 1: hi there, what is your name

User 2: why do you want to know

User 1: because I forgot…

User 2: ok, my name is John

Relating to number 5 in set 1, a more distinctly different back button could help user understand where to click. In addition, the link/button to current page could be moved to below the back button and act more of as a title to the chatroom. The value of it being a link may not be so high, and could be confusing.

Relating to number 1 in set 1, the login/sign up interface is mostly for testing, and in the content model, we do not have create an account because it is envisioned to be through the school authentication system and class database. However, if we were to keep this, the sign up should look different than the login/have instructions. For example, instead of this:

The instructions “Create Username” and “Create Password” should be in the username and password boxes respectively, or to the left of the boxes. Instead of the Sign up button, since you’re already on the sign up page, it should say “submit” or something of the like.