24.04.2025 - 27.07.2025 (Week 1 - Week 14)
Nur Asma’ Binti Anuar / 0378095 / BDCM
Interactive Design
________________
LECTURES
Week 2 - Usability:
Usability - refers to how effectively, efficiently, and successfully a particular user utilise a product or design in a certain situation. It is part of User Experience (UX) Design and it is its second level.
A design's usability depends on how well its features accommodate user's needs and contexts.
A first encounter to an interface should be able to find their way about easily enough to achieve objective without relying on expert knowledge. An interface with high usability guides users through its easiest route to achieve its goal.
Key principle o Usability:
- Consistency - key factor in web design for both visual elements and functionality. It ensures that the website looks coherent and works harmoniously across all its different elements, such as headers, footers, sidebars and navigation bars. Consistent design is intuitive design, it includes consistent navigation system, page layout and menu structure, font and typography and branding in web design. Its key for patterns to be recognized and learned by users, if similar-looking things do not produce a similar output, the user is bound to become frustrated.
- Simplicity - Its interface should be simple for users. It is used loosely to refer to the need to minimize the number of steps involved in a process, to use symbols and terminology that make the interface as obvious as possible, and to make it difficult to make mistakes. Incorporating simplicity in a designs will help design better user interfaces by helping the users achieve their goals faster and more efficiently, all while enjoying a great user experience.
- Visibility - It is the basic principle that the more visible an element is, the more likely users will know about them and how to use them, equally as important is the opposite; when something is out of sight, it is difficult to know about and use. Users should know, just by looking at an interface, what their options are and how to access them.
- Feedback - It communicates the result of any interactions, making it both visible and understandable. Its job is to give the user a signal that they (or the product) have succeeded or failed at performing a task.
- Error prevention - It involves altering a user when they are making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake. The main reason this principle of error prevention is important that we humans are prone to- and always make mistakes.
Common usability pitfalls and how to avoid them: Complex interfaces,
confusing navigation, poor feedback, inadequate error handling.
Week 3 - Website Structure:
Website structure is the foundation of a user-friendly and accessible
website. It affects user experience, SEO, and overall website performance.
A well-structured website helps users find information easily and keeps
them engaged.
Three key elements: websites are typically divided into three key elements
- Header - top section of a webpage, usually contains the website's logo, navigation menu, and contact information. It provides users with quick access to essential information and navigation.
- Body - main content area of a webpage, contains text, images, videos, and other multimedia elements. Proper organization of content within the body is crucial for readability.
- Footer - located at the bottom of a webpage, typically includes copyright information, links to important pages, and contact details. Provides closure to the webpage and additional navigation options.
Content organization is key to a well-structured website. Use headings
(H1, H2, H3, etc) to create a hierarchical structure. Logical grouping
of content and clear labeling of sections improve user experience.
Navigation mens help users move around the website. Use clear and
concise labels for menu items. Consider using dropdown menus for complex
sites.
Week 4 - The Web:
Fig. 1.1 Web PDF
Web Standards:
In the early days of the web, everyone accessed the web using a
keyboard, mouse, and monitor. Today, there is much more variety in the ways
people access the web. Many people do so on their phones or other pocket
mobile devices. Many people do so on tablet computers with touch screen
interfaces instead of keyboards and mice. Some people access the web through
audible interfaces, such as they talk to the computer, or listen to the
computer talk to them, or both. Many people who are blind depend on sound
and speech output, and people who are unable to use their hands depend on
speech input.
Hardware & software issue:
Growing variety of browsers that people can choose from including Microsoft
internet explorer, Mozilla, Firefox, google chrome, opera, safari, and
others. People use a variety of operating systems, including windows, Mac
OS, and linux. People have their computers set to a wide variety of screen
resolutions, from 640 x 480 px to 1680 x 1050 px and beyond. With the
diversity in the way people access the web, there's a very high probability
that your website will look different to many of your visitors than it does
to you. Despite these differences, the most important part of your website
is its content, and all users should be able to access that. The only way to
ensure that websites work across all devices and configurations is to
develop in accordance with web standards. Web standards are the core set of
rules for developing websites.
It might be possible to develop sites that do not comply with standards, but
doing so increases the likelihood that many people will be unable to access
your site.
The central organization who is responsible for creating and maintaining
web standards is the World Wide Web Consortium (W3C). The W3C has defined
dozens of standards, including the standard markup languages we use to
build websites. The standard markup languages we'll be using in this
course are:
• HTML
• CSS
Why the Web Standards?
To make internet a better place, for both developers and visitors, it is
important that both browsers and Web developers follow the Web
standards. When developers follow the Web standards, the development is
simplified, since it is easier for a developer to understand another's
coding. Using Web standards will ensure that all browsers will display
your Web site properly, without time-consuming rewrites. When you visit
a website, the web server hosting that site could be anywhere in the
world. In order for you to find the location of the web server, your
browser will first connect to a Domain Name System (DNS) server.
How the Web Work:
- When you connect to the web, you do so via an ISP. You type a domain
name or web address into your browser to visit a site.
- Your computer contacts a network of servers called DNS servers.
These act like phone book; they tell your computer the IP address
associated with the requested domain name. Every device on the web has
a unique IP address; it’s like the telephone number for that computer.
- The unique number that the DNS server returns to your computer
allows your browser to contact the web server that hosts the website
you requested. A web server is a computer that is constantly connected
to the web, and is set up especially to send web pages to users.
- The web server then sends the page you requested back to your web
browser.
We come across all kinds of documents everyday; newspapers, insurance
forms, catalogues etc. Many web pages act like electronic versions of
these documents. In all kinds of documents, structure is very important in
helping readers to understand the messages we are trying to convey and to
navigate around the document. Think about the stories you read in a
newspaper. Each story will have headline, body copy and images. If the
article is a long piece, there may be
subheadings that split the story. Structure helps readers to understand
the stories in the newspaper.
The use of headings and subheadings in any document often reflect a
hierarchy of information. Any document will start with a large heading,
followed by an introduction or the most important information. This
might be expanded upon under subheadings lower down on the page. When
using a word processor to create a document, we separate out the text to
give it structure. Each topic might have a new paragraph, and each
section can have a heading to describe what it covers.
The HTML code is made up of characters that live inside angled
brackets <>. These are called HTML elements.
Opening Tag and Closing Tag:
Elements are usually made up of two tags: an opening tag
and a closing tag. For example: If I'm writing a paragraph, I will
need to do an opening tag <p>, after I end my
content, I need to close up with a closing
tag </p>.
Attributes:
Attributes provide additional information about the contents of an
element. They appear on the opening tag of the element and are made up
of two parts: a name and a value, separated by
an equals sign.
Body, Head, Title:
<body> Body text of your website
<head> Before the <body> element, you will often
see a <head> element. This contains information about the
page.
<title> It's the name of your webpage, you can see it through
the tab name.
Headings:
HTML has six headings, we use <h1>, <h2>,... to create
the headings. (Remember to close the tag </h1>)
Paragraph:
To create a paragraph, surround the words that make up the
paragraph with an opening <p> tag and closing </p>
tag.
Bold and Italic:
Bold: <b> and Italic: <i>. By adding these, you can make
your text Bold or Italic.
List:
Ordered list (Using numbering)- Created using
<ol>, start listing using <li> (imagine it as a bullet or
number in front of your body text)
<ol>
<li> Strawberry</li>
</ol>
Unordered list (Using bullet)- Created using <ul>, start
listing using <li>
<ul>
<li> Strawberry</li>
</ul>
Nested list
- This is a nested list
- Example
Code:
<ul>
<li>...</li>
<ul>
<li>type</li>
</ul>
</ul>
Week 5 - HTML & CSS:
Fig. 1.2 HTML & CSS PDF
Week 6 - CSS Selector:
Fig. 1.3 CSS Selector PDF
Week 7 - Box Model:
Fig. 1.4 Box Model PDF
________________
INSTRUCTIONS
EXERCISES
Week 5 - HTML & CSS:
Week 6 - CSS Selector:
Week 7 - Selector Tutorial:
Week 8 - Selector Quiz:
Week 9 - Dropdown Menu:
Week 10 - Layout Tutorial:
________________
REFLECTION
Comments
Post a Comment