Conceptual and Physical Design

Metaphors

• The bell symbol shows the notification that the user need to pay attention. It is symbolic as a bell notifying people that there is something happening and need to take action.
• The mail symbol shows there is new incoming messages or comment from any user or comment from assignment uploaded.
• Both symbol is easy for user to understand its function. It is also used in facebook and other social media that the user use every day.
• The power symbol function is for logoff from the system. User experience this when they want to turn off TV or other electronic devices. This mimic the function “turn off” and easy for user to understand the meaning of the logo.

Task 1 – Submit assignment (from notification)

• User identified from the notification and click it to go to the assignment pages
• In the assignment pages, there is bread crumb trail on top where the user knows their current location on the web system.
• The drag and drop files resembles a person pick up a file and drop it to the assignment area.

Task 2 – Comment (from notification)

• When the user knows there is a message from the notification, the user click the message and open it. It’s like opening a mail or message.
• After the user submit the comment, the system will pop out message saying “comment posted”, resembles the user posting a reply.

Task 3 – Download slides and notes

• In the download pages, there is down arrow. It resembles the “Download” function and the user can understand the meaning of the symbol.

Storyboard

Task 1 – Submit assignment (from notification)

1) User click on the notification icon

2) The icon will draw the notification. User click on the selected notification. 

3) Then, user click add submission

4) User have to drag and drop file. Then user click Save changes.

5) A pop out will appear. Click anywhere to dismiss the message.

Task 2 – Comment (from notification)

1) User click on message icon

2) The message will draw from the icon

3) User type comment and press add comment button

4) A pop out will appear. Click anywhere to dismiss the message.

Task 3 – Download slides and notes

1) Click on the Notes & Slides

Click on down arrow icon to download