Interactive Design - Exercise 1
Interactive Design - Exercise 1
21/4/2025 - 4/5/2025 / Week 1 - Week 2
An Hongzheng / 0378415
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Exercise 1
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Exercise 1: Web Analysis
3.1 Baci Baci Matera
3.2 Praxis Leandra Isler
3.3 Language Inclusion - Google Research
3.4 Altly.AI
3.5 Augment Therapy
4. Feedback
5. Reflections
LECTURES
Week 1
Lecture 1
INSTRUCTIONS
Figure 2.1: Instruction / Week 1 (21/4/2025)
EXERCISE 1: WEB ANALYSIS
Exercise 1:
Choose FIVE (5) websites from the link given. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience. Write a brief report summarising your findings and recommendations.
What To Have in The Analysis:
- Consider the purpose and goals of the website, and evaluate whether they are effectively communicated to the user.
- Evaluate the visual design and layout of the website, including its use of colour, typography, and imagery.
- Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
- Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organisation.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarising in not less than 200 words for each website analysis. 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. (headings/subheadings)
3.1 Baci Baci Matera
Website Link:https://bacibacimatera.com/en/
Figure 3.1.1 Baci Baci Matera Website Home Page / Week 1 (27/4/2025)
A) Purpose & Goals
This is a sales website about donkey milk products, with the aim of introducing merchants' donkey milk products and selling them online. Its products include body cream, face serum, body wash, and face cream. The information and prices of each product on the website are very clear, and it is equipped with a shopping cart function, making it a very effective and exquisite product website.
B) Visual Design & Layout
Figure 3.1.2 Baci Baci Matera Website Home Page / Week 1 (27/4/2025)
Layout:
The overall layout of the website is simple and efficient, mainly divided into four parts: home, products, about us, and contacts. These four functions are placed in the guide bar at the top of the website. But the slight drawback is that the brand logo in the middle can also be clicked, but its function is the same as "home", which can be replaced with other functions to make more efficient use of space.
The layout of the main interface and partition interface is excellent, with almost every individual part covering the entire screen, ensuring that users do not see excessive cluttered information at once.
Colour:
The website design also has excellent use of colors, with each page containing 3-5 colors, which makes the image neither monotonous nor cluttered due to excessive colors. And each page will have its own "theme color", making it easy for people to realize that they are on different pages. The proportion of color usage is also well controlled, forming a comfortable rhythm that conforms to design principles.
Typography:
The website uses only about three fonts, which maintains a high degree of consistency on every page of the entire website. The font of most of the text is clear and concise, without too many fancy forms. For some personal names, the website uses fonts with handwritten effects, which is very reasonable and can make users feel that the merchant is more authentic and friendly. The product logo is a separate font used only for the logo section.
C) Functionality & Usability
Figure 3.1.3 Baci Baci Matera Website Home Page / Week 1 (27/4/2025)
Interactive Element:
As users scroll up and down the page, the website will change its images and text descriptions accordingly. All other interactive features on the website have practical significance and direction, which is sufficient for a product website. Excessive interactive elements can cause webpage lag and easily confuse users.
Navigation:
As mentioned in the layout section, excellent website layout also brings a high-quality navigation experience. The main navigation bar is located at the top of the website, with clear objectives and accurate functions. There are clear sections on the homepage, products, merchant background stories, and contact information in the navigation bar.
Forms:
The overall form of the website is very simple and common, but also extremely excellent. Each key section has its own page. This design makes it extremely easy for users to get started and very efficient.
D) Quality & Relevance
Accuracy:
All buttons and interactive parts of the website are very accurate and user-friendly, making it very easy to use.
Clarity:
Thanks to the reasonable use of color, layout, and form, each section of the website is very clear and easy to distinguish between different parts.
Figure 3.1.4 Baci Baci Matera Website Home Page / Week 1 (27/4/2025)
Organisation：
The organizational structure is efficient and clear, with very rules in place. Simply follow the rules and order of guiding from major functions to related minor functions. The organization and coordination of text and images are also highly correlated. The only drawback is that the instructions for use and ingredients in the product introduction cannot all be displayed.
E) Website's Performance
Load Times and Responsiveness:
The website's loading time and response speed are very fast, without any lag.
Compatibility with Difference and Browsers：
Different browsers, including Microsoft Edge and Google Chrome, can run and browse without discrimination.
3.2 Praxis Leandra Isler
Website Link:https://www.leandra-isler.ch/en
Figure 3.2.1 Praxis Leandra Isler Website Home Page / Week 1 (27/4/2025)
A) Purpose & Goals
This is a website that introduces the atlasology and naturopathy of merchants. The content of the website is very comprehensive, which effectively introduces users to the services launched by merchants, their backgrounds, and case studies. The website also has a reservation function, which allows users to directly contact and make reservations with merchants after browsing.
B) Visual Design & Layout
Layout:
Like most websites, the overall layout of this website is very simple and easy to understand. The main navigation function is located at the top of the navigation bar, and as the mouse slides down, you can browse more detailed content.
Colour:
The main color of all pages on the website is a color that is close to trees, which maintains good consistency on the website. The other colors are black and dark green, and all color combinations are coordinated and not abrupt, without complementary colors that are close to the website content, giving users a sense of relaxation that is close to nature.
Figure 3.2.2 Praxis Leandra Isler Website Home Page / Week 1 (27/4/2025)
Figure 3.2.2 Praxis Leandra Isler Website Home Page / Week 1 (27/4/2025)
Typography:
There is basically only one font for the website, with only a slight difference in font for the logo section. All fonts are very concise and straightforward, all in black, clearly expressing the message you want to convey.
C) Functionality & Usability
Figure 3.2.3 Praxis Leandra Isler Website Home Page / Week 1 (27/4/2025)
Interactive Element:
The home page of the website gathers the most interactive elements, including a 3D cup that rotates with the mouse up and down, short videos, and text with a gradual effect. This can further arouse users' interest. In other interfaces such as services, appointments, and interactions, it is quite simple and clear. I think this is a very reasonable arrangement.
Navigation:
The navigation section of the website is also excellent, allowing users to easily find the content they need and want to know. It is worth mentioning that in the blog interface, the website is equipped with a search function, which greatly improves efficiency because the website contains a large number of blogs.
Forms:
The overall form of the website is relatively regular and common. Each key section is equipped with an independent button that leads to its own page. The option for book appointment always remains at the top right corner, allowing users to pay attention at any time and navigate to the new website.
Figure 3.2.4 Praxis Leandra Isler Website Home Page / Week 1 (27/4/2025)
Figure 3.2.4 Praxis Leandra Isler Website Home Page / Week 1 (27/4/2025)
D) Quality & Relevance
Accuracy:
All buttons are very accurate, easy to click, and can accurately guide users to the parts they need.
Clarity:
Due to the excellent layout and color design of the website, all content is very clear visually. And there is no complex or vague content in terms of functionality.
Organisation：
The website is organized very systematically, and users can easily and logically browse through all content by following the navigation bar from left to right. The function of book appointment is also separately arranged in the top right corner, allowing people to pay attention to it at any time and understand the basic situation of the merchant before making a decision.
E) Website's Performance
Load Times and Responsiveness:
The initial loading time of the home page is slightly long and laggy, and the video background of the home page is not smooth enough. But the overall experience was very smooth.
Compatibility with Difference and Browsers：
Different browsers, including Microsoft Edge and Google Chrome, can run and browse without discrimination.
3.3 Language Inclusion - Google Reserch
Website Link:https://sites.research.google/languages/
Figure 3.3.1 Language Inclusion - Google Reserch Website Home Page / Week 1 (27/4/2025)
A) Purpose & Goals
This is a website that introduces the language inclusion of Google Research, and its main purpose is to introduce it, so it does not come with too many additional features.
B) Visual Design & Layout
Figure 3.3.2 Language Inclusion - Google Reserch Website Home Page / Week 1 (27/4/2025)
Layout:
The overall layout is very simple, with four buttons on the upper navigation bar that lead to "how it works", "Stories", "research", and "FAQ". Each section does not have a separate page, but is arranged in a top-down allocation method. This layout is more guiding.
Colour:
The website's use of colors is very characteristic of Google, mainly the blue, red, yellow, green, as well as black and white of the Google logo. The overall background and most areas are predominantly white, occasionally adorned with other colors to give a light and fresh feeling.
Typography:
The font consistency of the website is very high, almost all of which are of the same type, and most of them are contrasting black and white backgrounds, which are concise and efficient. Although the font is single, the changes in font size and arrangement still give people a sense of rhythm.
Figure 3.3.3 Language Inclusion - Google Reserch Website Home Page / Week 1 (27/4/2025)
C) Functionality & Usability
Interactive Element:
The website does not have many interactive elements. At the beginning, the interface could be clicked on a button to watch a YouTube video, while other content could be browsed by simply swiping up and down with the mouse.
Navigation:
The navigation section of the website is very simple, and users will be directed to the corresponding section through the navigation bar. Although the accuracy is not a problem, the navigation is not detailed enough, and many parts require users to use the navigation bar and then perform more detailed positioning themselves.
Forms:
The overall structure of the website is a linear form of top-down browsing, mainly achieved through flipping up and down with the mouse. Simple and logical, but lacking flexibility.
D) Quality & Relevance
Accuracy:
The website is not perfect in terms of accuracy, as only a rough part can be seen through the navigation bar, and users need to conduct secondary searches on their own.
Clarity:
The overall clarity is quite outstanding, with no design that blurs the line.
Figure 3.3.4 Language Inclusion - Google Reserch Website Home Page / Week 1 (27/4/2025)
Figure 3.3.4 Language Inclusion - Google Reserch Website Home Page / Week 1 (27/4/2025)
Organisation：
The overall organization of the website is very simple, and the process of browsing the website is more like playing a slideshow, with different text and image information obtained by turning the mouse up and down.
E) Website's Performance
Load Times and Responsiveness:
The first loading time was relatively long and there was some lag, and there were also slight lag and overly sensitive interaction issues when scrolling the mouse wheel to browse the website.
The first loading time was relatively long and there was some lag, and there were also slight lag and overly sensitive interaction issues when scrolling the mouse wheel to browse the website.
Compatibility with Difference and Browsers：
Different browsers, including Microsoft Edge and Google Chrome, can run and browse without discrimination.
3.4 Altly.AI
Website Link:https://altly.ai/
Figure 3.4.1 Altly.AI Website Home Page / Week 1 (27/4/2025)
A) Purpose & Goals
This website is the official website of a web development software, which introduces the software's functions and features, and provides functions for registering an account and downloading the software.
B) Visual Design & Layout
Layout:
The layout of the website is very simple, with no obvious navigation bar, only icons for navigation. The first thing that catches people's attention on a webpage is the software logo background of the home page, accompanied by text explaining what the software is. As the mouse hovers, the website displays case studies while text explains them. This layout is very neat.
Colour:
The website colors are mainly blue and white, with black used in the text section. The color matching is simple and easy, without any special eyes, but it also does not make users feel laborious while browsing.
Figure 3.4.2 Altly.AI Website Home Page / Week 1 (27/4/2025)
Figure 3.4.2 Altly.AI Website Home Page / Week 1 (27/4/2025)
Typography:
The text is mostly black or white, used to match different colored backgrounds. There is only one font on the website, which maintains consistency and coherence between all pages and different content sections.
C) Functionality & Usability
Interactive Element:
The main interactive elements of the website are navigation buttons, such as "sign up", "download", etc., without other complex interactive functions.
Navigation:
The navigation function of a website has both advantages and disadvantages. Firstly, the navigation function is clear, simple, and easy to operate. But in addition, there is no obvious navigation bar, which sometimes makes it difficult for users to find the navigation buttons they want. To return to the home page, you can only click on the logo in the upper left corner.
Figure 3.4.3 Altly.AI Website Home Page / Week 1 (27/4/2025)
Figure 3.4.3 Altly.AI Website Home Page / Week 1 (27/4/2025)
Forms:
The overall form of the website is very simple, mostly consisting of a case image with accompanying introduction text. Or introduce different parts directly by adding paragraph text to the title.
D) Quality & Relevance
Accuracy:
The website has excellent precision in both button and navigation functions, with no obvious shortcomings.
Clarity:
Due to the simple color scheme and reasonable layout of the website, there is no problem with the overall cohesiveness. But sometimes users feel tired due to overly monotonous designs and long texts.
Organisation：
The overall organization of the website is quite logical, with small to large and concise introductions to the software's functions. And there are registration and download functions displayed in the upper right corner throughout the process.
E) Website's Performance
Load Times and Responsiveness:
The website's loading and response time are very fast, and there is no lag in the browsing process and webpage replacement.
Compatibility with Difference and Browsers：
Different browsers, including Microsoft Edge and Google Chrome, can run and browse without discrimination.
3.5 Augment Threrapy
Website Link:https://www.augmenttherapy.com/
Figure 3.5.1 Augment Therapy Website Home Page / Week 1 (27/4/2025)
A) Purpose & Goals
This is the website of a software technology company that uses technology interaction to treat people with disabilities. The company Augment Therapy introduced its principles and cases of using technology such as AR software for therapy through its website. The website is equipped with a schedule a demo function and download links for its own products on major app stores.
B) Visual Design & Layout
Layout:
The overall layout of the website is very practical, with a navigation bar at the top of the page and buttons that lead to different parts. The button for schedule a demo in the upper left corner is highlighted. The top background of the home page is a video of disabled people using the product, which is the most intuitive and effective way to display it and can arouse users' interest.
Colour:
The main theme colors of the website are dark green and white, which give a friendly feeling when used and do not feel pressured. The colors used on each page are almost identical, maintaining continuity. The color matching is simple and will not affect usability.
Typography:
There is only one font on the website, which is very concise and efficient. The font colors are mainly white, black, and dark green. Through color matching and font size changes, the text is simplified to the greatest extent possible without making people feel monotonous, providing users with a relaxed and smooth browsing experience.
C) Functionality & Usability
Figure 3.5.2 Augment Therapy Website Home Page / Week 1 (27/4/2025)
Interactive Element:
The website has many practical interactive elements, such as buttons for browsing various pages in helpful resources. In the news section, different categories can be selected. You can view information about partners and so on. Rich and practical.
Navigation:
The website's navigation system is excellent, simple and practical, fully functional, and the position of the navigation bar and buttons is also clear enough.
Forms:
The overall form of the website is similar to most official product websites, mainly including functions such as introducing one's own product features and details, background, contact information, appointment/pre download, partners, contact information, etc. Common and user-friendly.
D) Quality & Relevance
Accuracy:
The accuracy of all buttons on the website is quite high, and the directed content is also very precise.
Clarity:
There are no issues with the website's clarity and convenience.
Figure 3.5.3 Augment Therapy Website Home Page / Week 1 (27/4/2025)
Figure 3.5.3 Augment Therapy Website Home Page / Week 1 (27/4/2025)
Organisation：
The organization of the website is very reasonable, for example, the "products" section is arranged at the far left of the navigation bar, which makes it more convenient for users to continue browsing products after browsing the home page.
E) Website's Performance
Load Times and Responsiveness:
The website's loading and response time are excellent, even when browsing places with videos as background, there is no lag.
Compatibility with Difference and Browsers：
Different browsers, including Microsoft Edge and Google Chrome, can run and browse without discrimination.
FEEDBACK
REFLECTIONS
Comments
Post a Comment