Interactive Design Exercise 1: Website Analysis
26 September 2024- 10 October 2024
CHONG CHENG TAO (0371072)
Interactive Design | Bachelor of Design in Creative Media | Taylor's
University
Exercises 1/ Website Analysis
List
LECTURES
Week 2:
I watched the video given by Mr Shamsul about “bad doors”. This video introduced a term/concept, 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 lead to these two points:
- Discoverability, the ability to discover what operations one can do.
- Feedback, a signal of what happened.'
An interface need to be clear. For some software like Adobe Illustrator, a
tutorial bubble might pop out to for user to familair with the interface,
but THIS SHOULD NOT HAPPEN ON A WEBSITE.
A good design need to consist sufficient discoverability and feedback, which known as Human-Centered Design.
Usability: Designing Products for User Satisfication
Usability refers to how effectively, efficiently and succesfully a particular user can utilise a product or design in a certain situation.It dependson how well its features accommocate user’s needs and contexts.
A user should be able to find the ways to achieve objective without any expert knowledge in the first use.
Principle of Usability:
- Consistency
- Simplicity
- Visibility
- Feedback
- Error Prevention
Consistency
- Ensure the website looks coherent and work harmoniously (headers, footers, sidebars and nav bar).
- Consistent design is intuitive design.
- Include navigation system, page layout, menu structure, typography and branding.
Consistency is the key for users to learn, similiar-looking things need to
produce similiar output.
Fig 1.2.1 Example of Consistency
Simplicity
- User interfaces should be “simple” for users.
- Refer to the need to minimize the number of steps involved in a process, use symbols and terminology that make the interface looks obvious.
- Simplicity in designs help the users achieve their goals faster and more efficiently.
Fig 1.2.2 Example of Simplicity
Visibility
- The more visible an element is, the more likely users will know about them and how to use them.
- Users should know, just by looking at an interface, what their options are and how to access them.
Fig 1.2.3 Example of Visibility
Feedback
- Feedback is the result of any interaction, making it both visible and understandable.
- Its job is to give the user a signal that they have succeeded or failed at performing a task.
Fig 1.2.4 Example of Feedback
- It alerts the user when they're making an error, with the intention to make it easy for them to do whatever it is they are doing without making a mistake.
- For example: Are you sure you wanna quit without save ?
- This is important as human are prone to and will always make mistakes
Fig 1.2.5 Example of Error Prevention
INSTRUCTIONS
This is the Module Information Booklet for this module:
Exercise: Web Analysis
For the first exercise, we need to choose 2 websites from the given link (1, 2,
3). We need to
review the website analyze its design, layout, content, and functionality.
Identify the strengths and weaknesses of the website, and consider how they
impact the user experience.
What need to have in 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 color, 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 organization.
- Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers
Website 1: ZiKD SPACE created by KiloKilo
Fig 2.1 ZiKD SPACE
1. Purpose and Goal:
ZiKD SPACE is an interactive website that showcase ZiKD, a new Centre for
Immersive Art and Design in Switzerland.
ZiKD aim to establish a field for immersive art and interactive design. It
engages a wide audience, including families, media artists, and educational
institutions, in discussions on the impact of emerging technologies.
This website provides information on ZiKD's events and programs. Programs
included art exhibition, artist talk and workshops, mainly from 2022. They
focus on digital, interactive and immersive art, exploring topics such as
Augmented Reality and the future of art in digital spaces. It also
highlights the collaboration with other artists and their projects.
2. Visual Design and Layout
a) Color
The main color used is pure black and pure white, which constitutes >90%
of the color used in this website. Thus, the title and text always maintain
a strong contrast with the background color, which give clear
readability.
Fig 2.2 Main colors
There is some high saturation sub-colors used in the 3D rotate elements to
showcase the artist names and project, as well as the transition effect
during navigation.
It does work in adding more variety and avoid rigidness. However, I think
it's still too much variety for sub-colors.
Fig 2.3 Sub-colors
There is only 1 san-serif typeface used which is "Clash Display".
Two font families are used. Medium for heading and text. Bold for link. Font
size used is 14px.
c) Imagery
Artists' artworks is shown by using 3D rotate effect. The image will rotate
as tornado as it scrolls.
This is one of the highlight of this websites. The simplicity of the
layout is a great contrast to the artwork, which I think makes the user
focus more on the artwork.
However, I observe big drawback like the visibility of the artworks and
inability to view all the artwork simultaneoulty. The rotation effect also
distort the images and add unnessesary effects on the images, which further
reduce the visibility.
Fig 2.5Image in desktop view
Fig 2.6 Image in mobile view
d) Layout
The overall typograhy layout of this website follow a grid system. It is
srictly follow the guide line and well organised. Appropriate white space is
maintained throughtout all interface.
Fig 2.7 Grid layout_dekstop view
Fig 2.8 Grid layout_mobile view
3. Functionality and Usability
a) Navigation
The navigation experience is good. The menu structure is clear and
intuitive enough for user intuitive. The small animation while clicking
in desktop view is very lively.
Fig 2.9 Navigation_dekstop view
Fig 2.10 Navigation_mobile view
b) Interactive elements
This website consists some intereactive elements and all of them are
working smoothly.
The transition while navigate to different menu is smooth and dynamic,
enhacning the overall user experience.
Fig 2.11 Interactive element
Fig 2.12 Interactive element
The 3D rotation elements respond interactively to scrolling and mouse
positioning. While they work smoothly on desktop and tablet, the
performance is less seamless on mobile view.
Fig 2.13 Interactive element
Fig 2.14 Interactive element
4. Quality and Relevance
a) Quality
Overall, this is a high quality website. The visual is clean with the
information is clearly stated.
Overall, this is a high-quality website. The visuals are clean, and the
information is clearly stated. Users can easily navigate and find what
they need.
b) Relevance
The content on this website is somewhat niche, as it focuses on program
announcements and hasn't been updated since the program ended. However,
given its purpose, the content remains aligned with the specific needs
of its target audience. While it may not appeal to a broader user base,
it serves the target audience that looks for these information.
5. Website's Performance
a) Load time
I test its performance using PageSpeed Insights.
The performance score is dragged down due to large contentful paint such
as 3D rotation and high total blocking time.
Fig 2.15 Performance score_dekstop
Fig 2.16 Performance score_mobile
b) Responsiveness and Compatibility
The website adapts in mobile, tablet and desktop, the layout remains
clear and clean, The 3D rotation is a bit laggy in mobile.
Fig 2.15 Website adaption in different device
6. Conclusion
a) Strengths
The strength of ZiKD Space is its clean and minimalist layout in
delivering relevant message to the user. The typography always
maintain a good contrast with background. The layout are well-designed
and have appropriate white space. Overall, the navigation experience
is smooth and intuitive, the smart animation during transition is
dynamic, which enhance the user experience.
All these strengths are maintained across different type of devices
likes desktop, mobile and tablet.
a) Weaknesses
There is a few weaknesses in ZiKD Space. Firstly, although the idea
of displaying artworks using a 3D rotating element is fancy, it
reduces visibility. Users are unable to view all the artworks
simultaneously. The rotation effect also distorts the images and
adds unnecessary effects, further reducing their visibility.
Additionally, it reduces the performance score. This factor
contribute to slower load times and reduced user experience
especially in mobile view, making it harder for users to interact
smoothly with the content.
Besides, I think the use of sub-colors used has too much variation.
This excessive use of high saturation colors can overwhelm the
viewer and detract from the main focus, making the design less
cohesive. Achieve a balance between variety and harmony is
significant to maintain a more unified and visually appealing
experience.
<back to top>
Website 2: FireFly Partners created by Outside
Fig 3.1 FireFly Partners
1. Purpose and Goal:
Firefly Partners is a women-led, B Corp-certified digital agency that
helps social good organizations optimize their technology
strategies.
They provide services such as audience research, platform
optimization, and digital marketing to align tech ecosystems with
clients' missions. Their focus is on creating personalized,
data-driven strategies to support nonprofits in amplifying their
impact and serving their communities more effectively.
2. Visual Design and Layout
a) Color
Fig 3.2 Colors
The website uses a mostly black text with accents of yellow,
alongside high-saturation colors like neon orange, vivid yellow, and
lavender blue.
This combination of two warm colors (orange and yellow) with a cool
color (lavender blue) creates a visually harmonious palette. The
bright colors add energy, while the balanced mix of warm and cool
hues brings cohesion to the design. Overall, the color scheme feels
vibrant.
Fig 3.3 Colors combination
Fig 3.4 Black text with white background
b) Typography
This webiste used 3 fonts, Stabil Grostesk, Monosten and
Monosten-Stencil.
For the font family, Stabil Grotesk-Regular, Monosten-Regular, and
MonostenStencil-Bold are used. Stabil Grotesk is applied for general
headings and body text, while the Monosten fonts are used for data
and slogans.
The heading size is approximately 70px, and the body text size is
22px.
Fig 3.5 Typefaces_Stabil Grotesk & Monosten
Fig 3.6 Font sizes
c) Imagery
The images used on this websites are mainly protests and propaganda
images.
In desktop view, these images take up a large amount of space, which I
think is a significant drawback of the website. There is limited white
space between the images, making the whole site look cluttered.
Additionally, different images with varying contexts are placed too
close together, which can confuse users, even with accompanying text
explanations.
Another issue is that all the images appear unedited, leading to
unmatch with the overall color palette of the website. This
inconsistency in visual harmony make it looks less cohesive.
Fig 3.7 Images_dekstop view
The experience is significantly better in mobile view. In this
format, only one image is displayed at a time with the text, which
takes up the entire screen. This gives a cleaner appearence, making
it easier for users to follow the context without being overwhelmed
by multiple images or clutter.
Fig 3.8 Images_mobile view
d) Layout
This webistes has using full-screen photo layout and The Zig-Zay
layout. Both of which are heavily image-focused. The full-screen photo
layout maximizes the use of visuals, allowing images to cover the
entire screen, creating an immersive and bold presentation. This
layout draws attention to the imagery, making it the central focus of
the user experience.
The Zig-Zag layout alternates images and text, creating a "Z" reading
flow. This layout can be visually engaging, as it guides the user’s
eye from one side of the screen to the other, creating a dynamic
interaction between images and content.
Fig 3.9 Full photo screen layout
Fig 3.10 The Zig-Zay layout
3. Functionality and Usability
a) Navagation
The navigation experience is good. The menu structure is clear and
intuitive enough for user intuitive. The animation during
navigation is smooth and dynamic.
b) Interactive Element
The main interactive element is the animation from rigid block to
a border-radius block and the arrow show up when the mouse
hoverting on it.
The main interactive element is an animation that transitions from
a rigid, block-like shape to a softer, rounded border when hovered
over. An arrow appears too when the mouse hovers over.
Fig 3.11 Interactive element
For the images, the image will zoom in and zoom out when the
mosue hover over. The difference on these interactive elements
give a sense of inconsistent.
Fig 3.12 Interactive element
c) Form
The form is well-designed, the white space between each section is
sufficient and the hierarchy is clear.
Fig 3.13 Form
4. Quality and Relevance
a) Quality
Overall, the quality of this website is decent. It has its obvious
highlights but also notable drawbacks. Most importantly, the
content on the website is effectively conveyed.
b) Relevance
All the context and information in this website is relevant
with the aim of this agency.
5. Website's Performance
a) Load Time
The performance in dekstop is decent, but weak in
mobile.
The performance score is dragged down due to large
contentful paint, high total blocking time, and high speed
index
Fig 3.14 Performance score_dekstop
Fig 3.15 Performance score_mobile
b) Responsiveness and Compatibility
The website adapts in mobile, tablet and desktop, the
Zig-Zag layout remains in desktop and tablet view.
Fig 3.15 Website adaption in different devices
6. Conclusion
a) Strengths
The strengths of this website is its simplicity and ease of navigation. The straightforward menu structure make it user-friendly, allowing users to find and receive information easily. The color palette and fonts used are well-chosen and contribute to the overall aesthetic of the website. The cohesive combination of colors and typography enhances the design creates a good user experience.
b) Weaknesses
The weaknesses of this website will be the lack of concern in dekstop view. The white space for the layout in dekstop view is not ideal as mobile view. Besides, the inconsistent of interaction animation disrupt the overall aesthetic.
The weaknesses of this website will be the lack of concern in designing the dekstop view. The use of white space in the desktop layout is not as well-executed as in the mobile view, leading to a less polished and cluttered appearance. Additionally, the inconsistency in interactive animations, such as images and text box, disrupts the overall aesthetic. These problems make the desktop view feel less refined compared to the mobile view.
REFLECTIONS
This is a solid introduction to this module. By studying and analysis the basic structure of a website design, it gives me more ideas for the following projects.
Comments
Post a Comment