Group members: Tan Sze Xian, Soh Chui Hong, Toh Xue Ting, Goh Song Keat

In groups (assignment group), identify 2 websites/applications which designs are

reflecting on the design guidelines discussed in this lesson.

YouTube Website

1. Speak the user’s language

• Allow user to choose difference language

• All the shortcut keys and buttons will display a descriptive message of their
function.
• Button’s icon graphic design is simple

2. Be consistent with your design

• Navigation toolbars, and buttons in the same location

• Consistent formatting (design/font/interface). Using same font style for all
contents.
3. Helps users remember

• Provide interface shortcuts and the shortcut keys guide

4. Provide more than one way for performing a function

• Provide many of shortcuts such as:

Pause/Play the video: Spacebar or K

Mute/Unmute the video: M

Skip 5 seconds forward/back in a video: Left/Right arrows

Skip 10 seconds forward in a video: J

Skip 10 seconds back in a video: L

Increase/Decrease video volume by 5%: Up/Down arrows

• Short cut key will be shown together with the labels when the mouseover the
function buttons

Example: Full screen (f), Cinema Mode (t), Miniplayer (i)

 • Searching bar are provided

5. Let the user feel that they are in control

• User can control the video by using mouse or keyboard shortcut keys
• Users can control the video based on their preferences.

6. Provide informative guidance and feedback

When user click sending feedback button, this panel will show. It is easy to
understand. The help panel also easy to learn.
7. Use a logical screen layout

• Many buttons but easy to find and understand. The navigation always stays on
the left side.
• Clear labels and icons are given to the function buttons
• Functions buttons are listed together with labels and clear icon

• The navigation bar stays on the left side, the searching bar on the top with the
following popular searching keyword.
8. Visual Appearance

• User can change the appearance theme, dark theme or light theme which they
feel comfortable.

• Logo fix in the same position (top left corner), user account/sign-in button fix
in the top right corner
• The video will start playing when the mouseover the video (Avoid redundant
animation)
Prepare a design rationale on how you can improve on the websites’/applications’
design.
Design Rationale
• Without searching bar in comments section

• The comments can only sort by top and newest, the earliest comment sorting can
consider added.

• The post in the community are not allowed to share and save.