Human Computer Interaction (HCI) UTMSpace Group Assigment: PROJECT 03 : CONCEPTUAL & PHYSICAL DESIGN

Think of the most suitable interaction metaphors for your interface. Come up with more than one type of metaphor. Describe/Justify why you think they are appropriate choice.

Task 1: Go to system main page

a home icon button were used. The icon will be highlighted and the button name will be shown when a cursor hover on it
the button will be shown in all system pages as a native menu

Task 2: Login and logout

a buckle up seatbelt icon (animation is optional) were used to show the user that they are logged in
unbuckle seatbelt icon to show the user are logged out / or did not login yet
press the icon to interact whether they want to login or logout

Task 3: Schedule, date, time

for schedule, a task icon will be used. Upon clicking on the icon, a new window will be showing the task for the user
a calendar & clock icon will be placed inside the window if the user want to change the date and time for their tasks

Task 4: Native icon for next, back, and undo

the next and back icon will be placed besides the home icon and it works as native icons to navigate between pages
undo button only appears in a page or window that has a forms

Task 5:

upon entering the system, the user will be prompted whether to create a new account or to login to the existing account
clicking the icon, the user will be need to enter their personal details

Design Justification

Once our logo was designed, our group set up a website to manage Driving School system and provides a strong platform to elegantly publish content. We initially chose a more muted theme for our website, but moved to the bolder.

Light theme in the project that brings together modern fonts with dark greys and punch of yellow. The color scheme of the website uses dark grays juxtaposed against bright yellow and white accents. We modified the background to be a solid black as opposed to a pattern to avoid the site being too busy.

We also uploaded our own header image to personalize the look of the site. The header font in each page, a bold slab serif, and the body text is Arial, a basic font that allows the headers to really stand out.

The design we chose is also mobile compatible, meaning that our research can reach a much broader audience. In addition to customizing many of the visual elements of the site, we also created a menu that would lead visitors through the site.

The menu links users to different parts of the site. We also included our blog posts on the front page so that users could quickly see what news, updates, and information we added to the site.

TASK 1 - STUDENT (BOOKING CALENDER)