myPratt is a website to provide various information for students in Pratt Institute. I found it is hard to find what I really want when the first time I used myPratt. This is not only because too much information in this website, but also some unclear interface design. This critique focuses on the issues on Dashboard of myPratt and the correspondent recommendation by using Norman’s principle.
Problem #1: Lack of affordance, signifier, and feedback for a dropdown menu
As the pictures above shows, this is an issue including lack of affordance, signifier, and feedback. With the left picture, I started thinking whether Pratt Networks can be clickable. So I tried to hover it to see if there is any feedback to inform me it is clickable. However, there’s no feedback when I hovered it as the picture in the middle shows. But I still wanted to try, so I clicked it. Then it turned out it’s a clickable dropdown menu. This dropdown menu has no affordance at first glance and there is no signifier for the dropdown menu. What’s more there is no feedback when users hover it to tell them it is clickable.
Redesign #1: Add a down arrow to indicate the dropdown menu here.
The picture above shows the redesign of this dropdown menu. I add a down arrow as a signifier to enhance its affordance, and users will know it is clickable at the first glance. After users click the arrow, the dropdown menu will give feedback immediately.
Problem #2: One page with two left navigations.
As the picture shows in the left, this is an example of mapping problem. In this page we can see that this page has two left navigations. That makes me think there are two navigations to the same page. After I tried different navigations on the upper left, I found the navigations in the upper left belongs to myPratt in the lower left, which means myPratt is a higher level navigation. Then the question is why higher level navigation has been put in the lower place.
Redesign #2: Relocate the higher level navigation to the dropdown menu.
The image in the right is the redesign of this page to revise the one page has two navigation issue. We can see from this picture that there is only one navigation correspond with this page and this page is all about myPratt, the navigation in this page are all belongs to myPratt. If you want to access to other sites which belongs to Pratt Network, you should go to the “Logged into” dropdown menu.
Problem #3: A misunderstanding sign
This is a conceptual model issue. In the picture above, when I saw this sign inner the red rectangle I thought it was a download sign because it has a down arrow in the document. I try to hover the sign it gave me a feedback said that “add to do to your calendar”. It has good feedback but it is a misunderstanding conceptual model.
Redesign #3: change download icon to calendar icon
The picture above shows the redesign of this “add to do to your calendar” sign. I simply change the download sign to a calendar sign to inform users that click this you will add the event to your calendar.
Problem #4: Lack of affordance and signifier
As the picture in the left showed, a header bar “My Messages” indicates there should be some messages. I cannot find messages listed below. So I think it must be a link to take me to another page. But black “My Messages” means not clickable. Then I click the picture in the left and nothing happen. So I got confused here. I guessed there must be no message.
Redesign# 4: Add signifier to indicate no messages
As the picture in the right showed, I add “No Messages on file” to let users know that there is no message. When there are messages, messages will show below. When there is no message, “No Messages on file” so that users don’t wonder why there is no messages here and then try to find link.