Interactive Design - Lecture Notes

28.08.2023 - 09.10.2023 / Week 02 - Week 07
Ilhan Rayan bin Khairul Anwar / 0361205
Interactive Design / Bachelor of Design (Honours) in Creative Media
Lectures

---

LECTURES 

Week 1: Module Briefing

Our first week of class was only an hour long as our lecturer Mr. Shamsul wanted to introduce us to the course and the work we'll be doing along with the programs we'll mainly be using and advising us to sign up for them and downloading them before next week. Our main programs were Adobe Dreamweaver, Netlify and Figma.

Week 2: Designing Products for User Satisfaction

Usability:

• Usability refers to how effectively, efficiently, and successfully a particular user can use a product or design in a certain situation.
• Usability is a part of User Experience (UX) Design.
• A design's usability depends on how well its features accommodates the user's needs and contexts.
• When users first use an interface, they should be able to find their way through it easily without relying on outside or expert knowledge.
• An interface with high usability guides users through its easiest route to achieve its goal.

Principles of Usability:

• Consistency
• A key factor in web design for both visual elements and functionality.
• Ensures that your website looks coherent and works harmoniously across all the different elements, such as headers, footers, sidebars and navigation bars.
• "Consistent design is intuitive design."
• Consistency includes the navigation system, page layout and menu structure, fonts and typography and branding in web design.
• Consistency is key for these patterns to be recognised and learned by users.
• If similar looking things do not produce a similar output, the user is bound to become frustrated.
• Example: If a website's buttons are protruding boxes with labels on them, then all of the buttons should look like that. Similarly, if a backwards button denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned.
• Simplicity
• It should be simple for users.
• Simplicity refers to the need to minimise the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible and difficult to make mistakes.
• Incorporating simplicity in the designs will help create better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
• Visibility
• The more visible an element is, the more likely users will know about them and how to use them and vice versa. When something is out of sight, users will know less about it.
• Users should understand just by looking at the interface, what the options are and how to access them.
• Feedback
• Feedback communicates the results of any interaction, making it both visible and understandable. It's job is to give the user a signal that they have succeeded or failed at performing a task.
• Error Prevention
• It involves alerting the user when they're making an error, with the intention of making it easier for them to do what they wanted to do without making another mistake. 
• It's important because we as humans are prone to making mistakes.

Common usability pitfalls include:

• Complex interfaces
• Confusing navigation
• Poor feedback
• Inadequate error handling

Week 3: Understanding Website Structure

Website structure matters because it is the foundation of a user-friendly and accessible website. It affects user experience and overall website performance. A well structured website helps users find information easily and keeps them engaged.

Websites are typically divided into three key elements:

• Header
• The top section of the webpage.
• Contains the website's logo, navigation menu, and contact information
• Provides users with quick access to essential information and navigation.
• Body
• Contains the main content area of the webpage
• Contains images, text, videos, and other multimedia elements.
• Proper organisation of content within the body is crucial for readability.
• Footer
• Located at the bottom of a webpage.
• Includes copyright information, links to important pages, and contact details.
• Provides closure to the webpage and additional navigation options.

Organising content is key to a well-structured website and making logical groupings of content and clearly labelling of sections improve user experience.

Week 4: Web Language

In the early days of the web, people accessed it using a keyboard, mouse, and monitor. Today there is much more variety in the ways people access the web such as through their phones or tablets with touch-screen interfaces. Some people access the web through audible interfaces (talking to the computer, listening to the computer) or rely on other aspects like speech output for the blind or speech input for the physically disabled.

Growing variety of browsers like Internet Explorer, Mozilla, Firefox, Google Chrome, Opera, Safari,  different operating systems like Windows, Mac OS, and Linux, and different screen resolutions have resulted in hardware and software issues when it comes to web standards. The most important part of the website is the content and all users should be able to access that.

The central organisation responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C), who have defined dozens of standards, including the standard markup languages used to build websites, such as HTML and CSS.

Why Web Standards?

• Makes the internet a better place for both developers and visitors. It is important for both parties to follow the same standards.
• Developers who follow the standards have a more simplified development stage since it's easier for a developer to understand other codes.
• Using web standards ensures that all browsers will display the website properly without any time-consuming rewrites.

HTML Code is made up of characters that live inside angled brackets <>, these are called HTML elements. Elements are made of two tags, an opening tag and a closed tag. Each element tells the browser something about the information in between the two tags.

• <element>Information</element>

Attributes tell us additional information about the contents of an element. They appear in the opening tag of the element and are made of two parts: a name and a value which are separated by equal signs.

• p lang="eng-us">Paragraph in English</p>
• Red = Attribute
• Blue = Attribute Value

Body, Head & Title

• <body> holds everything shown inside the main browser window
• <head> comes before the <body> element and contains information about the page.
• <title> contains the elements shown in the top of the browser (tab bar)

When creating a web page, you add tags to the contents of the page in order to provide extra meaning and allow for browsers to show users the appropriate structure for the page.

Other elements include:

• <h1> to <h6> are headings with h1 being for main headings, h2 for subheads and so on.
• <p> is for paragraphs.
• <b> is for bold
• <i> is for italics
• There are two types of lists that can be made using HTML
• <ol> is an ordered list that provides numerical listing. (Ex. Instructions)
• <ul> is an unordered list that notes everything without a numerical value. (Ex. Ingredients)
• <li> is for every individual line in a list.
• <a> is for links
• <a href="https://www.youtooz.com">Youtooz</a>
• Red = Text the user clicks on for the link
• Blue = The link
• <img> is for images and must include the following:
• src - Specifies the path to the image
• alt - The alternative text for the image meant for accessibility
• Title - The tool tip of the image in the browser

Week 5: HTML & CSS / ID & Class Attributes

Every HTML element can carry an ID attribute and is used to uniquely identify the element from other elements on the page. It is important that no two elements have the same value for their ID attributes. ID attributes give an element a unique identity that allows for us to style it differently from other instances of the same element on the page

CSS allows for us to create rules that specify how the content of an element should appear. CSS works by associating the rules within HTML elements and govern how the content of these specific elements should be displayed. A CSS rule contains two parts: a selector and a declaration.

CSS declarations sit inside the curly brackets and are made up of two parts; a property and a value which are separated by a colon.

Week 6: CSS Selectors

CSS (Cascading Style Sheets) selectors are a fundamental part of CSS that allows for us to target and style HTML elements on a web page. Selectors are used to define which elements should receive specific styles such as colours, fonts, spacing and more. They are crucial part of web development because they enable us to control the presentation and layout of our web pages.

• Universal Selector (*): Selects all elements on the page.
• Element Selector (p): Targets HTML elements by their tag name
• ID Selector (#my-element): Targets a single element with a specific ID attribute. IDs must be unique within an HTML document.
• Class Selector (.my-class): Targets elements within a specific class attribute. Multiple elements can share the same 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): Selects elements based on their state or position in relation to toher elements.
• Pseudo-element Selector (p::before): Selects parts of an element rather than the element itself.

There are so many different types of selectors so that they can offer flexibility and granularity when targeting HTML elements for styling. It gives web developers the ability to precisely target and style specific elements or groups of elements based on their structure, attributes, state, or position within the document.

Week 7: Box Model

The Display Property is CSS' most important property for controlling layout as every element has a default display value depending on what type of element it is. The default for most elements is usually block or inline.

• <div> is the standard block-level element. A block-level element starts on a new line and stretches out to the left and right as far as it can.
• <span> is the standard inline element. An inline element can wrap some text inside a paragraph without disrupting the flow of that paragraph.

The illustration above shows the various layers in the box model, the size of each of the layers in the box model can be specified using CSS units of measurement (em, %, px).