Exercises and Lectures/ Interactive Design

April 24, 2024

Exercises and Lectures/ Interactive Design

Exercise 1: Web Analysis/ Interactive Design

Rafa Maritza Hertrian [0364958]

Bachelor of Design (Honours) Creative Media/ Taylor's University

Interactive Design GCD 60904

LECTURES

WEEK 1

Usability: Designing Products for User Satisfaction

Usability refers to how effectively, efficiently, and successfully a user can utilize a product or design in a certain situation. It is a part of the User Experience (UX) Design at the second. A design’s usability depends on how well its features accommodate users’ needs and contexts.

When users first encounter an interface, they should be able to find their way about easily enough to achieve objectives without relying on expert knowledge. An interface with high usability guides users through its easiest route to achieve its goal

Principle of Usability

Consistency
Simplicity
Visibility
Feedback
Error Prevention

Consistency

Consistency is a key factor in web design for both visual elements and functionality.

Consistency ensures that your website looks coherent and works harmoniously across all its elements, such as headers, footers, sidebars and navigation bars.

Consistent design is intuitive design.

It includes consistent navigation system, page layout and menu structure, fonts and typography and branding in web design

Simplicity

The principle that user interfaces should be “simple” for users.

Simplicity 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

Visibility 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 important is the opposite: when something is out of sight, it’s 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

Feedback communicates the results of any interaction, 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.

An example of feedback is when you’re on desktops or laptops, when you hover over navigation items, you expect them to change color or load a submenu.

Error Prevention

It involves alerting a user when they’re making an error, 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 is that we humans are prone to and will always make mistakes.

Common Usability Pitfalls and How to Avoid Them

Complex interfaces
Confusing navigation
Poor feedback
Inadequate error handling

WEEK 3

Website structure is the foundation of a user-friendly and accessible website. A well-structured website helps users find information easily and keeps them engaged.

Header: Provides users with quick access information and navigation that is placed in the top section of a webpage. It usually contains the website's logo, navigation menu, and contact information
Body: Contains text images, visual, and other multimedia elements. Proper organization of content within the body is crucial for readability
Footer: It typically includes closure at the webpage and additional navigation

Class Activity

Scenario 3: You are tasked with redesigning a school's online learning management system.

User need:

Students want an easy-to-use platform for accessing course materials, submitting assignments, and communicating with classmates and instructors.

Usability principles to consider:

Consistency
Simplicity
Visibility
Feedback

Results:

Feedback: Make sure that every interactive element can be interacted with.

WEEK 4

In the early days of the web, everyone accessed the Web using a keyboard, mouse, and monitor.
People used Modems to get access to the internet in the older days. It takes about 10 seconds to load web pages using modems
When CSS did not exist, people used to use tables.
Browser wars: competition for dominance in the usage of browsers (First Browser War). A war between Internet Explorer and Netscape Navigator.
For creating Web, we only need 72 ppi

Web Standard - Standard Mark up language

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).

HTML
CSS

Structture of a webpage.

Each story will have headline, body copy and images
If the article is a long piece, there may be subheadings that split the story
It have headings for different sections, and each section contains a list of question with areas for you to fill in details or checkboxes to tick

HTML Describes the STructures of pages

To describe the structure of a web page, we add code into the words we want to appear in the webpage.

The HTML code is made up of characters that live inside angled brackets <>

These are called HTML elements

Elements are usually made up of two tags: an opening tag and a closing tag <element>Information</element>

Each element tells the browser something about the Information that sits between its opening and closing tags

Week 5

CSS: a set of rule that can change how HTML looks

Selector can be grouped so that those html elements will be using the same style(

How:

Add style attribute (last option)
External style sheet - using separate documment
Using internal CSS - embedded

INSTRUCTIONS

PRACTICAL

Exercise 2 - Web Analysis

From the websites given through Google Classroom, students are instructed to choose to of them to review. The design, layout, content, and functionality must be noted. The strengths and weaknesses of the website have to be identified including the impact on user experience.

What have to be in the analysis:

Purpose and Goals of the Website
Evaluation of the effectiveness of communication
Evaluation of visual design and layout of the website: use of color, typography, and imagery
Functionality and Usability: Navigation, forms, and interactive elements
Evaluation of the quality and relevance of the website content: accuracy, clarity, and organization
Website's performance: Load time, Responsiveness, and compatibility with different devices and browsers.

Deliverables:

Write a brief report summarizing in not less than 500 words. You can include a screen capture of each section or page of the website to explain. Make sure that the formatting of the report is clear (heading/subheadings)

WEBSITE 1: MISO TONE

Creator: M-Hand,Inc.

Link: https://misotone.m-hand.co.jp/

Figure 1.1 Miso tone main web page

Miso Tone allows intended audiences to explore the beauty of Japanese shrines, temples, and ancient artifacts in Kyoto through high-quality images and cinematic clips. It also introduces the concept of 'Wabi-Sabi' which is explained to be the appreciation of the beauty of aging and evolving nature.

Purpose and Goals of 'Miso Tone'

Purpose: This website mainly focuses on showing Japanese traditional temples, shrines, and artifacts throughout the centuries while also explaining several Japanese ideologies connecting to nature. This indicates that the website promotes the richness of Japanese tradition in this era of modernism.
Goals: The website might aim to make more people from all over the world informed about Japanese culture and motivated to explore it.

Effectiveness of Communication of 'Miso Tone'

This website is written in 2 languages which are English and Japanese. This is very effective as it allows people from around the world to peek into Japanese history while also being accessible for Japanese people to review their own culture in case they are not aware of some of the content. Miso Tone explains their concept and other terminologies in a very brief but sufficient text. They use languages that are easy to understand making this website suitable for a large range of audience.

Visual Design Layout

Color: In the layouts, Miso Tone mostly shows neutral earth colors such as Greenish brown (HEX #B7AF96) and beige (HEX #F3F0EA). This choice of colors compliments the calmness and peacefulness that this website trying to show on this website. This is proved by how slow and peaceful instrument is played on the website while the users go through the website. Using only two main colors to this website adds simplicity making the website looks more comforting.
Typography: Simpler fonts such as Figtree, Syncopate, and Zen Kaku Gothic New are used in this website to increase readability making it easier for users to enjoy and focus more on the imagery and the visuals given in the website rather than focusing too much on trying to read the text.

Imagery: This website consists of countless photographs and short movies to show parts of the shrines and temples, ancient artifacts, and other connecting images that complement their purpose of promoting Wabi-sabi.

Layout: Miso Tone has layouts that allow users to easily understand different parts of the website they can explore by listing the components. In other departments of the website such as the layout to show movies of the temples, they clearly show the preview of each movie and also name each of it by the temple/shrine names making it easier for users to choose movies they might be interested in watching. The Wabi-sabi department has an ordered layout of the contents of the Wabi-sabi which can make users interested to go through and read all of it.

Functionality and Usability

Navigation: The website provides navigation for each section of the website on one page making it easier for users to access the page they want to visit. It also provides a button on the top right-hand side that appears on every page allowing users to reopen the navigation page at any time

Interactive elements: At the beginning of the page, the website makes users choose whether they want to go through the page with sound or not. If users choose to click the 'ON' button, calming and continuous music will appear as the website is opened. They also provide 3 choices of music at the top of the website screen and also an ON/OFF button. On each page, users can also click on the items they want to observe, the website will zoom images and play the videos the user clicks.

Quality and relevance of the website content

The website gives introductions to several terminologies in the Wabi-sabi concept such as Zen, Shakkei, Karensansui, Roji, and Kokei. However, for the rest of the website parts, it does not contain information but rather focuses on the visuals and only the names of the items are provided.

Website's Performance

Load time: Every element that can be interacted with in this website loads excellently. It takes less than a second to get a response from any button. The load time of the website also did not take a lot of time.
Responsiveness: the website gives simple transitional animation as users scroll through the website. This adds visual attractiveness, making the website non-monotonous.

Strengths

The website is simple and straightforward forward with consistency in colors and fonts making it comfortable to look at.
All elements such as sound, fonts, layout, and images are harmonized making the theme of the website clear.
There are no issues with the load time
can be used in different devices and works all the same way.

Weaknesses

In the "movie" section, the page slides horizontally while other pages slide vertically which can be confusing. It also moves that way by swiping up and down instead of left and right, it gives off an unsettling feeling.
The navigation page brings users to the same pages of each section but in different layouts. Users can confuse those pages as different ones as it is not consistent.
The website has a "view more" button but it does not lead anywhere which is unnecessary to add to the website.
At the beginning of the page, they highlighted "shrines and temples of Kyoto" but did not give any information/ introduction to shown temples and shrines other than their names.

WEBSITE 2: YOY NATURA

Creator: Jumix

Link: https://naturafood2u.com/hi-yoyo/

Purpose and Goals

Purpose: The purpose of this website is to promote a brand of healthy food products from Southeast Asia made with natural ingredients. The contents of this website show that the brand does not only focus on promoting its product but also promotes healthy alternatives of everyday food ingredients that most people are using.
Goals: The goal of the website is to allow users to learn more about the products that the company offers in a simple yet fun way.

Effectiveness of Communication

This website consists of texts and images to introduce the contents of the product that they are selling. Some of the images are used to clarify the text making it easier to understand but some illustrations just appear to make the website look more intriguing. It also contains readable headlines that show what the long text is about.