Interactive design Exercise 1: Website Analysis
27 April 2024- 3 July 2024
NABIL JULIUS DORN (037978)
(Interactive Design) | Bachelor of Design in Creative Media | Taylor's
University
Task 1: Website Analysis, Web Replication & HTML, CSS Document Development
Week 1-6
List
LECTURES
Week 2
Usability: Designing products for user satisfaction
Introduction
We watched a video that introduced the term "Norman door", which
means:
- A door where the design tells you to do the opposite of what you're actually supposed to do.
- A door that gives the wrong signal and needs a sign to correct it.
This leads to two points:
- Discoverability: The ability to discover what operations one can do.
- Feedback: A signal of what happened.
An interface needs to be intuitive. Some software's have a little
tutorial bubble that allows the user to get familiarized with the
interface. However, this should not be needed on a website!
A good design should consist of sufficient discoverability and feedback,
which is known as Human-Centered Design.
What is Usability?
Usability refers to how effectively, efficiently, and successfully a particular user can utilize a product or design in a certain situation. It is a part of User Experience (UX) Design. It is the second level of UX Design. 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 objective without relying on expert knowledge. An interface with high usability guides users through its easiest route to achieve its goal.
Key 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
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, fonts and typography and branding in web design.
Consistency is key for these 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. For example, if a website’s buttons are protruding boxes with labels on them, then all of the website’s buttons should look like that. Similarly, if a backward arrow denotes the back button, then it should not be changed to something else because that would be inconsistent with what the user has learned.
Example of Consistency in design:
- Adidas Mobile App
- Strava Mobile App
- Air BNB Mobile App
|
| Fig 1.1.1 Adidas app interface |
|
| Fig 1.1.2 Adidas app interface |
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.
|
| Fig 1.1.3 AirBNB app interface |
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.
|
| Fig 1.1.4 User interface |
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 your mobile app and selected icon changes color when you in the selected screen.
|
| Fig 1.1.5 Adidas interface |
|
| Fig 1.1.6 Eg of error prevention |
Common Usability Pitfalls and How to Avoid Them
- Complex interfaces
- Confusing navigation
- Poor feedback
-
Inadequate error handling
INSTRUCTIONS
This is the Module Information Booklet for this module:
TASK 1.1
Website analysis
For this exercise, we were required to choose 2 websites from the given
link:
We were then required to review the website, analyze its design,
layout, content, and functionality. We need to identify the strengths
and weaknesses of the website, and consider how they impact the user
experience.
What we have to analyze:
- The purpose and goal of the website, and evaluate whether they are effectively communicated to the user
- The visual design and layout of the website, including its use of color, typography, and imagery
- The functionality and usability of the website, including its navigation, forms, and interactive elements.
- The quality and relevance of the websites content, including its accuracy, clarity and organization.
- The websites performance including its load times, responsiveness, and compatibility with different devices and browsers.
Website 1
By Emotion Agency, Roman Stets, Leonid Kotetskyi
|
| Fig 1.2.1 |
Purpose and Goal
In the websites description, they state that they specialize in
crafting interfaces that deliver an unparalleled user experience.
Prototyping, designing and developing for Web2 & Web3
interfaces.
They aim to combine aesthetics, functionality, and innovation to
provide the best user experience while also blending visual appeal,
user-centered marketing, and customer-focused service. Their goal is to
infuse people's lives with visual and functional aesthetics.
Their values are aesthetics in every detail and customer orientation.
They strive for perfection in design and functionality, giving maximum
attention to their clients needs and wishes.
They provide complex animations and modern interfaces, while assisting
clients with intricate visual ideas for interfaces by finding solutions
to bring them to life. This is done by delivering the complete solution
their customer needs to impress users with a smooth, responsive and
aesthetically pleasing interface.
Visual Design and Layout
- Color
The main two colors the makes up most of the website are shades of
purple.
|
| Fig 1.2.2 Color palette |
|
| Fig 1.2.3 Landing page |
|
| Fig 1.2.4 "The problem" page |
The use of contrast is strongly used to differentiate different elements. However, the lack of any other use of color makes this website look very monotonous
|
|
Fig 1.2.5 |
|
| Fig 1.2.6 |
The only time there is color, its in their projects page, showcasing their previous successes, which use the colors portrayed in their pictures.
A wider color palette would have been more appreciated.
- Typography
The typeface used in their website is IBM Plex Mono, Gridular, and Aenoik
There was 3 typeface used throughout the website.
|
| Fig 1.2.7 Eg of used typeface |
|
| Fig 1.2.8 Eg of used typeface |
- Imagery
There are some interactive elements in the page that are constantly
moving. The design element also reacts to movement using the users
mouse. Overall There arent too many different imagery throughout the website.
 |
| Fig 1.2.9 interactive element |
- Layout
This website has a sleek and modern layout with a strong emphasis on visuals and interactivity. The homepage featues dynamic animations with 3D elements. The navigation is not super intuitive but still feels natural, with sections for their services, portfolio, and technical expertise. The website seems to follow a grid or modular system. This is shown in the way the texts are all clumped together in different parts of the screen.
 |
| Fig 1.2.10 layout |
 |
| Fig 1.2.11 layout |
Functionality and Usability
- Navigation
There are two ways of navigating the website, scrolling forever or clicking the different tabs at the top of the website. The scrolling method takes a very long time to even get between pages which is very inconvenient. However, simply clicking on the different page tabs at the top, removes a lot of the interactivity and design of the website. It is a big trade-off.
- Interactive elements
There is the first storytelling like part which is played out by scrolling the mouse wheel.
There was a very nice coding like interactive page loader which gave the option of exploring the website with music. This option is toggleable in the website itself too.
There is a second storytelling like part which is again played out by scrolling the mouse wheel.
In between some website pages, there is a very clean transition. This helps with the immersion of the website, making it feel like one long page or video. The only drawback to this is the endless scrolling that's required.
There is also an animated card gallery. This is also triggered and animated by scrolling.
Quality and Relevance
- Quality
The overall quality of this website is good. There could have been some minor changes to help with the feel and user interaction. Besides that, the visual aesthetics are alluring and pleasing to the eyes.
- Relevance
The purpose of this website is to promote their business of web design - by having a good clean website. This website maintains relevance through having a business that will always be needed in this internet era.
Website's performance
- Load times and Responsiveness
Using PageSpeed Insights, it is stated that the Core Web Vitals Assessment has Failed both on the mobile version and the Desktop version.
 |
| Fig 1.2.12 Desktop insight |
 |
| Fig 1.2.13 Mobile insight |
However, I did not face any issues in responsiveness throughout the website on the desktop version
In the mobile version, I did significantly experience more lag. The lag occurred during the initial loading of the website (interactive website loading page), as well as during the scrolling of the entire website.
 |
| Fig 1.2.14 Breakdown |
- Compatibility
 |
| Fig 1.2.15 Mobile view |
 |
| Fig 1.2.15 .Mobile view |
Website 2
Purpose and Goal
According to awwwards, the purpose of this website is to showcase its art. Retronova flawlessly merges retrofuturism with the charm of a bygone future, blending nostalgic fashion, animations, and elements that evoke the retrofuturistic spirit.
In my opinion, the website "Retronova" is focused on blending vintage fashion aesthetics with futuristic design concepts. It offers collections inspired by different eras, such as 60s minimalism, space-age styles, and high-shine futuristic designs. The site presents a journey through time and style, using both nostalgia and innovation to showcase its unique fashion vision. The experience is immersive, featuring futuristic narratives and AI-generated fashion concepts.
Visual Design and Layout
- Color
The website has an aesthetic blend of colors due to the use of vibrant artworks on display. However, the main website, taking away the artworks, use mainly 2 colors.
 |
| Fig 1.2.16 Main colors used |
 |
| Fig 1.2.17 color palette use case as well as typography |
 |
| Fig 1.2.18 colorful artworks on display as well as typography |
There is strong usage of contrast and complementary color theory. This makes the website feel cohesive and captivating.
- Typography
There are two main fonts used throughout the website.
OffBit - Bold
 |
| Fig 1.2.19 OffBit [bold] |
PP Supply Mono - Extra light
 |
| Fig 1.2.20 PP Supply Mono [extra light] |
These two fonts complement the website design well as it looks both techy and futuristic while also still feeling very retro in aesthetic.
- Imagery
As stated above (Fig 1.2.18) The website features really stunning artworks that fit the theme and design of the website.
Upon loading into the page, there is an interactive loading screen,
 |
| Fig 1.2.21 Loading page |
 |
| Fig 1.2.22 Artwork |
There are also a few art collections available for viewing
 |
| Fig 1.2.23 Art collections |
When viewing an album, you are greeted with multiple images to choose from to inspect further
 |
| Fig 1.2.24 Album |
 |
| Fig 1.2.25 Art work in the collection |
The main artworks featured on display are mainly-if not solely- AI generated. This may be a problem for some. It would have been nice to have these artworks commissioned from proper artists as I think it would have resulted in higher quality artworks upon closer inspection.
There is also a rotating 3D element in the website that reacts to the viewers mouse.
 |
| Fig 1.2.26 3D element |
 |
| Fig 1.2.27 Retro fashion albums |
Retro futuristic fashion styles on display is the main theme of this website.
 |
| Fig 1.2.28 Artworks |
- Layout
This website features a clean and modern layout with minimalistic design. It seems to follow a grid or modular system. The homepage highlights new arrivals and popular items with large, stylish images. Scrolling down, you can see featured collections and detailed product visuals. The design uses a lot of futuristic space-age elements and fonts, enhancing the retro futuristic feel and aesthetic of this website.
 |
| Fig 1.2.29 Website layout showcase |
 |
| Fig 1.2.30 Website layout showcase |
Functionality and Usability
- Navigation
The navigation on Retronova is very linear and minimalistic. It only has a downward scroll in the main page where the albums are available to view.
Here is a video of the scrolling of the website
 |
| Fig 1.2.31 Albums available to view |
Some tabs would be nice for quick access to different parts of the website. This could be featured in the first landing page of the website once it has loaded.
- Interactive Elements
There is also one 3D element that reacts to the viewers mouse.
Quality and Relevance
- Quality
The quality of Retronova is quite high in terms of design and functionality. It features sharp and clean visuals, high-resolution images, and smooth navigation, creating an immersive user experience. The website blends futuristic themes and a clean interface, which makes exploring the website feel intuitive. The overall quality is polished and professional, aligning with the brand's unique aesthetic.
- Relevance
Website's performance
- Load times and Responsiveness
Using PageSpeed Insights, it is stated that the Core Web Vitals Assessment has Failed both on the mobile and desktop version.
From my own experience, the website was smooth and there was no performance issues.
 |
| Fig 1.2.32 PageSpeed desktop insights |
It is shown in the Fig above that the biggest issue with performance, is the loading times of large images, text block or video (LCP). The layout shift also shows a bit of performance issues, however not as bad as LCP.
 |
| Fig 1.2.33 Mobile insights |
On the mobile version, it is even worse. The only thing that is better on the mobile version is the layout shifting.
- Compatibility
In the mobile version, it seems to look great. Even with a minimized screen, the layout of the website, conforms to the shape and size of the window.
These are images I found from the Awwwards.com website. My own experience with the mobile version came to a screeching halt after loading into the website. I could not navigate or scroll through the website, leaving me stuck on the landing page.
 |
| Fig 1.2.34 Mobile view |
Comments
Post a Comment