Interactive Design - Lecture Notes

September 11, 2023

Interactive Design - Lecture Notes

27.8.2023 - 10.11.2023 (Week 1 - Week 14)

Chong Hui Yi / 0363195

Interactive Design / BDCM

Lecture Notes & Exercise

LECTURES

Week 1 (Brief):

Today, Mr. Shamsul gave us a project briefing. This module requires us to use HTML and CSS to create a website. Although it will be taught in class, I think it's essential for us to have a basic understanding as well, to avoid falling behind later on. He also mentioned that we don't need to write 'further reading' for our e-portfolio (I'm so happy about this!). Our task for this week is to register for a Netlify account, and also to select two websites from https://www.csswinner.com/winners and write web analyses for each, not exceeding 250 words each.

Week 2 (Usability):

Design Thinking Process:

empathy
define
Ideate
prototype
test

Usability refers to how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.

Key Principle of Usability:

Consistency
Ensures a coherent and harmonious appearance and functionality throughout your website.

Elements of Consistent Design:

navigation system
page layout
menu structure
fonts & typography
branding

Simplicity
Simplicity refers to minimizing steps, using clear symbols and terminology, and preventing mistakes in an interface.

Visibility
The more visible an element, the more likely users are to be aware of it and understand how to use it.

Feedback

Feedback serves as a means to communicate the outcomes of any user interaction, making the results visible and comprehensible to the user. However, excessive feedback can be annoying for users.

Error Prevention
Error prevention involves notifying users of their errors to help them perform tasks correctly and effortlessly.

Common Usability Pitfalls & How to Avoid Them:

Complex interfaces
Confusing navigation
Poor feedback
Inadequate error handling

We were divided into four groups later to start a class activity, tasked with designing a website on paper based on the given scenarios. We need to consider the website's Consistency, Simplicity, Visibility, and Error Prevention. We are the first group, and our task is to design a new e-commerce website for a local clothing store.

User need:

Users want to be able to easily browse and purchase clothing items online, with clear product descriptions and images, and a simple checkout process.

Mr. Shamsul said that our design is good. Fig. 1.0 is the clothing store website we designed, and this has been a truly enjoyable activity!

Clothing store website prototype - PDF, week 2 (5/9/2023)

Week 3 (Understanding Website Structure):

Why Website Structure Matters

Website structure is the foundation of a user-friendly and accessible website.
It affects user experience, SEO (Search Engine Optimization), and overall website performance.
A well-structured website helps users find information easily and keeps them engaged.

Key Elements:

Header

the top section of a webpage.
contains: website's logo (must on the left), navigation menu (should not hide), and contact information

Body

the main content area of a webpage.
contains: text, images, videos, and other multimedia elements (sound, animation, graphic, interactivity)

Footer

located at the bottom of a webpage.
contains: copyright information, links to important pages, and contact details

Organizing Content

A key to a well-structured website.
Use headings (H1, H2, H3, etc.) to create a hierarchical structure.
Logical grouping of content & clear labeling of sections

Navigation Menus

Helping users move around the website
Use clear and concise labels for menu items.
Using dropdown menus for complex sites.

Today, we have a group activity. In this activity, we will apply the principles of website structure by designing a navigation menu for a fictional website. This hands-on exercise will help reinforce your understanding of how to create a well-organized and user-friendly navigation menu. We need to design the navigation menu for a travel agency website.

Some individuals have raised concerns about the '2D1N' in our packages, as it can be confusing for those who are unaware that 'D' stands for 'day' and 'N' stands for 'night.' Additionally, there is a suggestion to incorporate the 'PACKAGE' within the 'DESTINATION' section.

Navigation menu design

Navigation menu design - MP4

Week 4:

Web standards

Hardware and software issue:

variety of browsers (Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and others. )
variety of operating systems (Windows, Mac OS, and Linux.)
variety of screen resolutions (from 640 x 480 pixels to 1680 x 1050 pixels and beyond)

high probability that your website will look different
content
World Wide Web Consortium (W3C): The central organization who is responsible for creating & maintaining web standards
Standard markup languages: HTML & CSS

How The Web Works

Connecting to the Web: You use an ISP to access the web by typing a web address in your browser.
DNS Servers: Your computer asks DNS servers for the website's IP address, like finding a phone number.
IP Address Retrieval: The DNS server provides your computer with the website's IP address, letting your browser connect to the web server.
Web Page Retrieval: The web server sends the web page back to your browser.

Structure of a Web Page

Understanding structure
Learning about markup
Tags and elements

HTML (HyperText Markup Language)

The HTML code is made up of characters that live inside angled brackets <>
HTML elements (made up of two tags)

Opening Tag: <p>
Closing Tag: </p>

Attributes provide additional information about the contents of an element.
# exp: <p lang=“eng-us”>Paragraph in English</p> (name: lang, value: eng-us)
# value need “”

<head> → <title>
<body>

Six levels of headings:

<h1> main headings
<h2> subheadings
<h3>
…

Other Elements

</p> paragraph
<b> bold
<i> italic
<ol> ordered list
<ul> unordered list
<li>...</li> sub-list / nested list

# all main HTML file have to save as index.html

Writing Links <a>

Links are created using the <a> element which has an attribute called href
Browsers show links in blue with an underline by default

Commonly type of links:

Links from one website to another
Links to one page to another on the same website
Links from part of a web page to another part of the same page
Links that open in a new browser window (tab)

# exp: <a href=“http://www.imdb.com”>IMDB</a>

Adding Image <img>

src - This attribute specifies the path to the image.
alt - This attribute provides alternative text for the image, which is essential for accessibility
Title - This attribute provides tool tip of the image in the browser

# exp: <img src=“image/foto.jpg” alt=“alternative text”title=“title of the image”/>

Class exercise 1

Personal Profile Webpage Link: https://in-classexercise.netlify.app/

Week 5:

Extra Markup

ID attribute

uniquely identify the element from other
no two elements have the same value

Class attribute

identify several elements as being different from the other elements

Block elements

start on a new line
exp: <h1>, <p>, <ul> and <li>

Inline elements

continue on the same line
exp: <b>, <i>, <em>, <a> and <img>

Cascading Style Sheet (CSS)

CSS rule

Create rules that specify how the content of an element should appear.
two parts: selector (all elements) & declaration { … }

CSS rule

CSS declaration

sit inside curly brackets
two parts: property & value

CSS declaration

<link>

lives inside the <head> element
three attributes:

href: To specify the path to the CSS file
type: This attribute specifies the type of document being linked to. The value should be text/css
rel: Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file

HTML <head> section in Dreamweaver (exercise)

Dreamweaver's Live View

Week 6:

CSS Selectors

Universal Selector: * (Selects all elements)
Element Selector: exp: p, h1, h2
ID Selector: #my-element
Class Selector: .my-class
Descendant Selector: .container a (Selects an element that is a descendant of another element.)
Child Selector: ul > li (Selects elements that are direct children of another element.)
Pseudo-class Selector: a:hover (include → :link, ;active, ;hower, ;visited, :focus, & :nth-child(n))