Interactive Design - Exercise 1
Shema Goldie Angwen / 0372129
Interactive Design
Interactive Design
Bachelor of Design (Hons) in Creative Media / Taylor's University
Task: Exercise 1
All the information is clear, and the cookie categories are well-divided (Figure 2.5.3) and easy to find. Everything is well-organized, making it user-friendly.
Task: Exercise 1
CONTENT LIST
INSTRUCTIONS
Exercise 1 'Web Analysis' Instructions:
Write your report in e-portfolio
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 summarizing 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 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, load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing each Web Analysis in not less than 200 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 (headings/subheadings)
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 summarizing 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 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, load times, responsiveness, and compatibility with different devices and browsers.
Deliverables:
Write a brief report summarizing each Web Analysis in not less than 200 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 (headings/subheadings)
LECTURE NOTES
WEEK 1
Mr. Shamsul briefed us on the Module Information Booklet and informed
us about the upcoming projects and exercises. He instructed us to
install Visual Studio Code and Adobe Dreamweaver, and to sign up for
Netlify before the following week. He also assigned us an exercise to
analyze five websites, with the deadline set for the following
week.
WEEK 2: USABILITY
Steps for Design Thinking:
1. Empathize / Observe (do interview or survey)
2. Define the problem
3. Ideation (come up with idea)
4. Create protoype
5. Testing
Usability is the moment you see the product, you know how to use
it.
When user first encounter an interface, they should be able to find
their way about easily enough to achieve objective without relying on
expert knowledge.
Here are the 5 Key Principles of Usability that should be
Implemented on our Web Design:
1. Consistency
- A key factor for both visual elements and functionality.
- Ensures that website looks coherent and works harmoniously across all its different element, such as headers, footers, sidebars, and navigation bars.
- Look and feel should be consistent so people won't be confused.
- Consistent design is intuitive design.
- It includes consistent in
- navigation system
- page layout
- menu structure
- fonts and typography
- branding in web design (Adidas Website is a good example of consistent website. Typefaces, imagery are consistent.)
2. Simplicity
- User interfaces should be "simple" for users
- 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.
- Task flow is not confusing because it is simple.
3. Visibility
- The more visible an element is (the more obvious it looks), the more likely users will know about them and how to use them, there seems a 'call' to press the action button.
4. Feedback
- Important because give the user a signal that they have succeeded or failed at performing a task
- For example: A sound plays after a successful purchase or deletion as feedback.
5. Error Prevention
- A confirmation for us to avoid making mistakes. The main reason this principle of error prevention is important is that we humans are prone to- and will always make mistakes.
- Example:
- Confirmation to delete something
- 'Forgot your password?" features
- This is usually created due to a history of past mistakes.
*Additional Notes:
- Website Hot Spot: the pattern user view at the website
Figure 1.1: Viewing Patterns in Website Page
- Images are usually aligned to the left and text to the right, with the text typically left-aligned, following our natural tendecy to read from left to right.
EXERCISE 1
Website Analysis
First Website: https://boyd.ae/
Figure 2.1.1: Website Homepage
Purpose and Goals (Whether Effectively Communicated to The User)
This website is designed to sell paintings. But not only that, this
website also welcoming designers and artists to showcase and sell their
creations. Basically, this website aims to serve an online gallery. I
think they truly succeeded in bringing their idea to life because the
overall design and concept makes it feel as if we are actually inside a
real art gallery.
Visual Design and Layout (Use of Color, Typography, and Imagery)
Figure 2.1.2: Moving Painting Showcase
This website features a minimalist and clean design. I love how it
creates a luxurious feel and gives excitement to keep scrolling through
the showcased products. The moment we enter the page and begin
scrolling, the choices of paintings for sale immediately appear. The one
that caught my eye the most is the horizontal moving gallery that
activates as soon as you enter the page. I really love the color scheme
chosen, all in one group of tone, soft beige color which really aligns
with their art gallery-like concept. However, one aspect I think could
be improved is the typography. While it's not bad, but for me a clean
Sans Serif font would be a better match with the overall aesthetic and
could enhance the luxurious feel of this website. While the images
chosen for the background blend seamlessly with the gallery theme. One
plus point I recognize is that they are consistent with the use of color
and typography which creates a cohesive design. Overall, I love how the
design is not overwhelming, allowing viewers to be able to focus on the
product.
Functionality and Usability (Navigation, Forms, Interactive
Elements)
The website is user-friendly, all navigations, forms, and interactive
elements are well-organized, all labelled clearly, it's easy to find a
way on our own to use the website without relying on experts help. They
applied some of the key principles of usability including consistency in
navigation, page layout, menu structure, fonts and typography. The
design also emphasizes simplicity, as the task flow is straightforward
and not confusing for new users. Visibility for the navigation button is
also applied, even though vibrant colors aren't used but it remain
obvious and easy to find. All navigation and interactive elements are
clear and functions properly. What is memorable for me is the animation,
it greatly enhancing the overall experience of the website. However, the
website is only available English language. Offering additional language
options features could help reaching a broader and international
audience.
Quality and Relevance (Accuracy, Clarity, Organization)
Figure 2.1.3: Data Forms
Figure 2.1.4: 'Frequently Asked Question' section
I really love how thoughtful they are in considering the effectiveness
of every button they put on their website, all of which are
well-organized. I also love how they provide data forms for buyers,
designers, and artists, along with the Frequently Asked Questions
section. These features are very helpful as they make the shopping and
selling experience easier by delivering information clearly. They
don't only focus on visual appeal, but also ensure that the navigation
is functional.
Figure 2.1.5: The Details of Showcased Painting
I love how they serve clear and complete information. They inserted
all the details required such as the author, year, dimensions,
materials, and additional descriptions, all with clean and tidy
placement. They also offer a 'full-screen' feature and a 'view on
the wall' option, which for me is another level of an online art
gallery. This gives us a visualization of how large the painting is
when displayed on a wall. To be honest, I am really impressed.
Performance (Load Times, responsiveness, Compatibility with Different
Devices and Browsers)
The website performs well, the load times is very short and acceptable,
all navigations respond instantly and runs smoothly with no issues
related to responsiveness.
Figure 2.1.6: Asus Zenbook Fold Perspective
Figure 2.1.7: iPhone 12 Pro Perspective
This website adapts quite well to other devices such as mobile phones and
tablets, though the experience is not as optimal as when opened on a
laptop. A weakness I encountered with the Asus Zenbook Fold (Figure 2.1.6) is that the image appears overlapping. In contrast, the
iPhone 12 Pro (Figure 2.1.7) displays it correctly. Although both
are mobile devices, but they display the content differently. This
might be one thing that should be noted and needs improvement.
However, the rest of the page displays without any issues.
Second Website: https://seasoned.koto.studio/
Figure 2.2.1: Website Homepage
Purpose and Goals (Whether Effectively Communicated to The User)
This website help people to grow their careers in branding by guiding
them through essential skills, giving tips and insights, and showing how
these elements are combined together and applied in real life.
Figure 2.2.2: Effectiveness to Communicate
About the effectiveness to communicate to the user, the message is
generally clear, but it could be communicated more effectively. The word
"cook up a career" in the description (Figure 2.2.2) is creative but it seems
quite confusing and somewhat vague, it could be better with a more
specific description or more concrete examples. For example, this site
could highlight keywords such as "the key skills" or "career paths", or
anything else that mentions the users can get portfolio tips or
practical guidance. This would make the purpose more straightforward and
make users easier to understand.
Visual Design and Layout (Use of Color, Typography, and Imagery)
I found many unique aspects in this website, from its overall concepts
to its features. This website features a playful, bright color palette
that gives a sense of cheerful. The combination of the vintage
typographic style and video elements with a touch of vibrant colour
makes the design really unique and surprisingly blend harmoniously.
The images chosen also match perfectly with the other elements since
their concept is based on a menu book, they use menu-style images to
present their tips which is really creative and unique.
Functionality and Usability (Navigation, Forms, Interactive
Elements)
Figure 2.2.3: 'Channel' Features Button
There aren’t many buttons on the website. On the first page, at
the top right, users can change the channel using left and right
buttons, which makes different videos appear. While this feature
may not be particularly useful, but quite unique.
Regarding the
key principles of usability, the site shows consistency in its use
of fonts and typography. Even though several typefaces are used,
they all match the overall theme, and none of them feel out of
place.
Figure 2.2.4: Suggesting to add 'Click Here' Feature
In terms of visibility, one weakness I noticed is that it’s not very clear that the book can be opened (Figure 2.2.4). Adding a 'Click Here' feature or a clearer call-to-action text could improve the user experience.
One area that could also be improved is the principle of feedback, adding a sound effect when opening the book or when changing the channel could make the interaction more engaging and intuitive.
Figure 2.2.5: 'Still hungry? Order here" Features
As you
scroll, a button appears saying "Still hungry? Order here"
appears. Clicking it opens a form to place an order, which is very
creative and necessary.
An aspect to improve, the website is currently only
available in English language. Offering additional language options
could enhance its usability and help it reach a broader audience.
Quality and Relevance (Accuracy, Clarity, Organization)
It is a well-organized website, with a clean layout and intuitive
navigation. The interactive elements all are well-organized. The image
quality is all good, enhancing the overall design. Although the
website features only a few navigation buttons, they have cover most
of the necessary functions.
Performance (Load Times, responsiveness, Compatibility with
Different Devices and Browsers)
This website has no issues with load times, everything runs smoothly.
All buttons respond quickly when clicked on, and the animations function
seamlessly.
Figure 2.2.6: Mobile Device Perspective
Figure 2.2.7: Mobile Device Perspective
One weakness I encountered is that, on mobile devices, the video appears
cropped (Figure 2.2.6), though it still looks
acceptable. A bigger issue is that the 'Place an Order' form is cut off (Figure 2.2.7).
However, this only occurs to mobile devices, tablets and desktop are
fine. Improving mobile devices compatibility would enhance the overall
user experience about this site.
Third Website: https://www.studioolimpo.it/
Figure 2.3.1: Website Homepage
Purpose and Goals (Whether Effectively Communicated to The User)
The purpose of this website is to help to create web design with a
timeless style, prioritizing simplicity and beauty along with refined
visual storytelling. The moment I visited this website, I was
immediately drawn in by its simplicity, it clearly communicates what
they are offering. I truly believe in their aim for simplicity and
beauty, as their website itself is a clear example to this. Event hough
they have a clean and simple layout, I was surprisingly excited to keep
scrolling through the content. I think they have truly succeeded in
bringing their purpose to life through their design, their purpose is
effectively communicated to the audience.
Visual Design and Layout (Use of Color, Typography, and Imagery)
Figure 2.3.2: Changing Background Color
This overall design of this website is minimalist, clean, and
timeless, with an emphasis on simplicity. The moment I scroll down,
the background color changes from white to black, creating an
extraordinary effect. The use of color, typography, imagery, and the
selected audio all combine together in perfect harmony. In addition,
they main the consistency in the text sizes, font, and color which
creates a cohesive and unified design.
Functionality and Usability (Navigation, Forms, Interactive
Elements)
Figure 2.3.3: Clearly Labelled
The website is user-friendly, with simple and easy-to-use
navigation buttons, making it effortless for new users to navigate
the site. All the necessary features are available and function
properly when clicked. The labels are clearly named (Figure 2.3.3), making
navigation straightforward. The website effectively applies key
usability principles, maintaining consistency in navigation
buttons, page layout, and structure. The task flow is also clear
and intuitive due to the simplicity applied in the design. Talking
about visibility, even though the active buttons don't use vibrant
colors, they are still visible, obvious, and easy to
identify.
Quality and Relevance (Accuracy, Clarity, Organization)
Figure 2.3.4: Testimonials
All the content is clear and concise, there’s not too much
information, but everything needed is included. They have even
inserted the testimonials, all of which are well-organized, easy to
read, and understand.
Performance (Load Times, responsiveness, Compatibility with
Different Devices and Browsers)
Figure 2.3.5: Tablet Perspective
Figure 2.3.6: Mobile Phone Perspective
Figure 2.3.7: Load Times
The website loads quickly and adapts well across different devices. The
website also make load times enjoyable as they show their work in the
load page (Figure 2.3.7), such a really unique idea. Everything is thoughtfully
designed. To be honest, I wouldn't hesitate to use their services, as
their work clearly speaks for itself.
Fourth Website: https://cartapani.it/en/
Figure 2.4.1: Website Homepage
Purpose and Goals (Whether Effectively Communicated to The User)
The purpose of this site is to create an online catalogue for selling
coffee, making it easier for coffee lovers to purchase products
because the comprehensive information provided. It is built to
showcase coffee rooted in passion, craftsmanship, and attention to
detail. The goal is to create a memorable experience for coffee lovers
through a smooth and informative designed website.
Visual Design and Layout (Use of Color, Typography, and Imagery)
This website features a clean design with a simple layout that
focuses on their coffee catalogue. The use of brown tones, all
within a cohesive palette, reinforces the theme. The chosen
typography complements the product perfectly, while the
high-quality imagery is well-organized and harmoniously placed
throughout the site.
Functionality and Usability (Navigation, Forms, Interactive
Elements)
The website is user-friendly. Although it has quite a lot of
navigation buttons and interactive elements, they are easy to
use and all clearly labelled.
Figure 2.4.2: 'Contact Us' Features
Figure 2.4.3: 'Contact Us' Features
The site applies key usability
principles, including error prevention such as the 'Contact Us'
feature is very helpful for buyers in case of human errors, such
as incorrect product shipments or other things.
Figure 2.4.4: Language Option
Another plus
point I recognize from this site is they support four
languages, while most websites I’ve visited only offer one. Additionally, the
'Back to Top' feature is really thoughtful which makes browsing more
convenient for the users.
Quality and Relevance (Accuracy, Clarity, Organization)
The clarity of information and the button layout are excellent and
well-organized, easy to read, to find, and to understand.
Figure 2.4.5: Detailed-Informative Description
Figure 2.4.6: Detailed-Informative Description
Me, as a
coffee enthusiast, I find this site quite comprehensive. The origin of
each coffee is mentioned, along with detailed descriptions. The ratio
of Arabica to Robusta blends is clearly and thoroughly explained.
Aromatic notes, acidity, sweetness, and bitterness are also listed,
each with detailed explanations. All arranged neatly and easy to read.
I’m totally sure that the target audience, the coffee lovers, will
love shopping through this site. One thing I noticed, however, is that
they do not display the prices.
Performance (Load Times, responsiveness, Compatibility with
Different Devices and Browsers)
Overall, the website is highly responsive, most of it runs smoothly.
When the cursor is on top of a product, it immediately enlarges, making
the shopping experience enjoyable. However, there was one moment when I
clicked the 'Blends' button and the loading time was slower compared to
other sites I've observed. But still, it is understandable and
acceptable as this site contains quite a large number of navigation
buttons and content.
Figure 2.4.7: Tablet Perspective
Figure 2.4.8: Mobile Phone Perspective
This site adapts well to various devices, including mobile devices,
tablets, and desktop. All layouts display correctly without any errors.
Fifth Website: https://munchies-tinloof.vercel.app/
Figure 2.5.1: Website Homepage
Purpose and Goals (Whether Effectively Communicated to The User)
The purpose of this website is to sell cookies made with the finest
ingredients, combined with a unique twist that sets them apart from
other shops and creates a memorable experience for the buyer.
Visual Design and Layout (Use of Color, Typography, and Imagery)
The website layout is simple, featuring only the necessary elements
without any distracting elements. All layout arranged well, easy to
read, to find, and understand. It focuses on clearly displaying the
products and emphasizing their cookies. The beige background and the
vibrant orange colour blends in harmony, matches with the products
they sell. The typography complements the overall design and aligns
well with the brand’s clean and minimalist aesthetic. All the
imagery are displayed in high quality and blends perfectly with the
other elements.
Functionality and Usability (Navigation, Forms, Interactive
Elements)
The website is user-friendly and they applied the key principles of
usability. They maintains consistency in the navigation system, menu
structure, page layout, fonts and typography. They also applied the
principle of simplicity, the task flow is straightforward and not
confusing. Key principles related to visibility is also implemented,
the active buttons use vibrant colors, which makes it obvious and
easy to identify. The navigation buttons displayed are not too much, only the
essential ones displayed.
Figure 2.5.2: 'Build Your Box' Features
A standout feature is the 'Build Your Box'
option, which uses '+' and '−' signs, an engaging and unique touch.
But it could be better if there is step by step guide for this
feature because somewhat not really clear.
Quality and Relevance (Accuracy, Clarity, Organization)
Figure 2.5.3: Categories
Performance (Load Times, responsiveness, Compatibility with
Different Devices and Browsers)
Figure 2.5.4: Mobile Phone Perspective
Figure 2.5.3: Tablet perspective
There are no issues with load times, everything runs smoothly. The
site adapts well to different devices, no errors were encountered.
REFLECTION
This exercise taught me a lot about website development. I gained important basic knowledge and realized that creating website requires more than just a good idea. It also involves understanding key design principles. A crucial aspect is being able to convey the website's purpose and goals through the design itself. Design is not just about the looks, but involves the purpose and goals in it. I also learned about proper formatting from Mr. Shamsul's lecture, where he introduced the F and H viewing patterns and emphasized the importance of organizing information effectively.
Comments
Post a Comment