Interactive Design - Exercise 1

日期：

22/9/2025 -  5/10/2025 / Week 1 - Week 2

YANG SHUO / 0384037

Bachelor of Design (Hons) in Creative Media

Interactive Design / Exercise 1

Week 2- Usability 

Definition: Ease, efficiency, satisfaction in achieving goals.

5 Principles
  • Consistency – uniform design & functions (Adidas, Strava, Airbnb, ZUS).
  • Simplicity – fewer steps, clear symbols, easy to use.
  • Visibility – obvious options, nothing hidden.
  • Feedback – show results (e.g., icon color change).
  • Error Prevention – prevent mistakes, guide users.
3. Common Problems
  • Complex UI
  • Confusing navigation
  • Poor feedback
  • Weak error handling

INSTRUCTION



EXERCISE

Project 1

Web Analysis

This report examines five selected websites, with a focus on their design, layout, content, functionality, and overall usability. The analysis identifies key strengths and weaknesses of each site and evaluates their impact on user experience.

Note: All the following websites are sourced from: https://www.csswinner.com/winners

Website 1: Qudrix

Purpose and Goals：

  • The website highlights its “cube”-style modular office space and outdoor studio products as the central offering.
  • Its main goal is to demonstrate the ease of ordering and installing customized units.
  • Key details, such as service pricing and project scale, are not clearly specified.

Fig.1.1 Screenshot of the website homepage- Qudrix 

Visual Design and Layout：

1. Typography / Layout

  •  Large-font slogans paired with product renderings quickly capture users’ attention.
  • The spacing in the navigation bar is not reasonable, and this issue is more evident on mobile devices.

2. Color

  • The main body of the page uses a gray color scheme.
  • Low-saturation green and black are used as complementary colors, reflecting the company’s design philosophy.

3. Imagery

  • Large product renderings serve as a focal point to attract users’ attention.

Functionality and Usability：

  •  The sliding displays of product images are easy for users to browse.
  • However, the font size in the text section is too small, making it difficult for users to quickly grasp key information.        

Fig.1.2 Overly small font and poor spacing

Content Quality： 

  • It provides a basic introduction to the company's business model, products, and service philosophy.
  • However, the text is somewhat redundant and repetitive, mostly consisting of conceptual statements, lacking more specialized explanations and persuasive power.

Performance and Compatibility：

  • The site loads quickly and adapts to devices.
  •  Browser Compatibility: Mostly Compatible.

Google Chrome: Works smoothly, animations and navigation load quickly without errors.
Microsoft Edge: Similar performance as Chrome. A few minor delays in transitions, but overall functionality is intact.
Strengths and Weaknesses:
  • Strengths: Modern design, clear order steps.
  • Weaknesses: Limited detail, weak navigation, unclear pricing.

Recommendations: 

  • Highlight key information
  • Improve navigation
  • Provide more technical and practical details for users.


Website 2: Flower of the Universe

Purpose and Goals： 

  • Presents storytelling, fashion, fragrance, and gift design with a cosmic theme.
  • Aims to convey elegance and mystery.
  • Many sections are still marked “Coming Soon.”

Fig.1.3  Screenshot of the  website homepage- Flower of the Universe

Visual Design and Layout： 

1. Typography / Layout

  • Elegant typography enhances the artistic tone.
  • Layout emphasizes layered effects and gradients, but the animation pace feels slow.
2. Color
  • A dark palette with light highlights creates mystery and elegance.
  • Gradients and cosmic tones strengthen the brand atmosphere.
3.Imagery
  • Large background images and space motifs dominate the visuals.
  • Strong ambiance, but limited informational support.

Functionality and Usability：

  •  The menu navigation is complete in structure.
  • Background music is available, with user choice to enable/disable.
  • However, only the fashion module is accessible; other modules remain unavailable, reducing user engagement.

Fig.1.4  Screenshot of the  menu and some details

Content Quality：

  •  Content is artistic and aligns with the brand’s philosophy and marketing strategy.
  • The “Fashion” section has some descriptive content.
  • Most other sections lack practical details such as specifications, pricing, or usage instructions.

Performance and Compatibility：

  •  High network requirements; latency may cause playback and animation stuttering.
  • Device compatibility is generally good.
  • Browser Compatibility： The website is broadly compatible across major browsers, though animation smoothness and music playback stability vary slightly.

Google Chrome: Smooth performance, but animations may lag slightly under weak networks.
Microsoft Edge: Similar to Chrome, with occasional delays in transitions.
Safari: Visuals render well, but music playback shows slight instability.

Strengths and Weaknesses:

  • Strengths: Strong brand ambiance and visual appeal； has contact form.
  • Weaknesses: Many sections are “coming soon”;  sluggish presentation rhythm; animations prone to stuttering.
    Recommendations：
    • Complete remaining sections as soon as possible.
    • Optimize animations and reduce stuttering.
    • Add a “skip animation” option.
    • Provide more concrete details on products and services.

    Website 3：No Laughing Matter

    Purpose and Goals： 

    • A non-profit website aiming to raise empathy for animals by exposing the inhumane training methods used in circus acts.
    • Seeks to oppose animal performances in circuses and promote animal-free circus shows.

    Fig.1.5  Screenshot of the  website homepage- No Laughing Matter

    Visual Design and Layout： 

    1. Typography / Layout

    • Text and images are reasonably arranged, supporting each other in storytelling.
    • Layout helps guide attention, though some textual density makes quick reading harder.

    2.Color

    • The theme uses a primarily black-and-white scheme, creating seriousness and visual impact.
    • This palette also conveys a fable-like quality, enhancing storytelling and user engagement.

    3. Imagery

    • Image processing is creative and thought-provoking.

    e.g. A lion “cut out” from a family photo and placed in a cage, leaving only an awkward transparent background—an artistic metaphor prompting empathy and reflection.

    Fig.1.6 The The captured lion

    Functionality and Usability：

    •  The navigation menu is clear and creatively presented as a “progress bar.”
    • Interactivity is strong overall.
    • Minor flaw: On certain pages, interactive images are partially obscured when scrolling; mouse scrolling sometimes triggers unintended changes. While not blocking information, it slightly weakens usability.

    Fig 1.7 *The red circle indicates the obstructed part.

    Content Quality： 

    • Content is rich, fact-supported, and highly credible.
    • Textual information is dense, making it more suitable for users with time to engage deeply.
    • Difficult to quickly extract key points due to information-heavy presentation.

    Performance and Compatibility：

    • Loading is generally smooth.
    • Compatible with both desktop and mobile devices.
    • On mobile, some icons and buttons are too small, making tapping difficult.
    • Browser Compatibility: Runs smoothly across browsers, with only minor usability concerns on mobile.

    Google Chrome: Stable loading, interactive features work well.
    Microsoft Edge: Performance similar to Chrome, smooth scrolling and interactions.
    Safari: Visuals render correctly, but small icons on mobile impact usability.

    Strengths and Weaknesses:

      • Strengths: Strong emotional appeal & visual storytelling; clear theme  ;highly credible content  ; creative expression .
      • Weaknesses: The detailing is flawed; key information is not prominent enough; the movement buttons are too small.
        Recommendations: 
        • Improve mobile tap targets by enlarging buttons and spacing to avoid misclicks.
        • Make key information more prominent using color accents, larger fonts, underlining, or bolding.
        • Refine details in interactive design to ensure smoother user experience.

        Website 4: Beings

        Purpose and Goals ：

        • Beings is an online directory promoting POC (People of Color), Rainbow (sexual minority group), and Disabled talent in Aotearoa.
        • Its mission is to give these groups more visibility, access, and opportunities for authentic representation in media and performance.

        Fig.1.8 Screenshot of the  website homepage- Beings

        Visual Design and Layout：

        1. Typography / Layout: 

        • Uses clean, modern design with bold minimal slogans; 
        • Layout is unconventional and fashion-oriented, but may feel chaotic for some users.

        2. Color: 

        • Neutral tones dominate, creating a professional and inclusive atmosphere;
        •  Could add accent colors to highlight key information.

        3. Imagery: Relies heavily on high-resolution visuals and videos; 

        • Strong visual impact but slows loading;
        • Profiles could be supplemented with images of works.

        Fig.1.9  Personalized layout

        Functionality and Usability: 

        • Navigation is clear, with core sections such as “Talent,” “About Us,” “Join Us,” and “Donate.”
        • The talent directory is central but lacks effective search and filter tools.
        • Current filter labels (“POC,” “Rainbow,” “Disabled”) are too limited, reinforcing stereotypes and reducing usability.

        Fig.1.10  Labels

        Content Quality：

        •  Content is concise, impactful, and shows inclusivity.
        • Talent directory provides information but personal profiles are incomplete, missing works and experiences that would strengthen credibility.

        Performance and Compatibility：

        • Due to many high-resolution images and videos, loading speed is slightly slow.
        • Mobile navigation: top menu is difficult to click.
        • Browser compatibility: The site works across mainstream browsers with stable performance, but heavy resource usage slows loading on weaker devices or networks.

        Google Chrome: Smooth loading but heavy image resources affect speed.
        Microsoft Edge: Similar to Chrome; slight lag in visuals.
        Safari: Works well but loading times are noticeable.

        Strengths and Weaknesses:

        • Strengths: Clear mission, professional design, inclusive tone.
        • Weaknesses: Limited search and filter tools, incomplete directory profiles, reliance on large images.

          Recommendations: 
          • Enrich talent profiles with works, experience, and links.
          • Add practical filtering (occupation, expertise, skills).
          • Optimize image and video resources to improve speed.
          • Adjust mobile navigation for easier interaction.

          Website 5: KA – Komunikācijas Aģentūra

          Purpose and Goals ：

          • A communication agency in Latvia.
          • Main goal: to show provided services (communication, digital, creative, events).
          • Another goal: to prove professionalism by displaying projects and awards.

          Fig.1.11  Screenshot of the  website homepage- KA – Komunikācijas Aģentūra 

          Visual Design and Layout：

          1. Typography / Layout

          • Fonts are clean and easy to read.
          • Homepage has clear sections: “Work,” “What we do,” and “Who we are.”
          • Compared to other websites, the overall design feels a bit boring.

          2. Color

          • The design is modern and simple.
          • Neutral colors emphasize clarity and professionalism.
          • Lack of varied tones reduces visual interest.

          3. Imagery

          • Big pictures are used on the homepage and in project pages.
          • They show professionalism and credibility.
          • Large image files may slow loading speed.

          Functionality and Usability： 

          • Menu is eye-catching and easy to understand.
          • Available in both English and Latvian.
          • Users can quickly find projects and contact information.
          • Includes links to detailed project cases and clear team contacts.

          Fig.1.12  Conspicuous navigation menu

          Content Quality：

          • Content is concise and professional.
          • Projects are showcased with clarity.
          • Text is direct, helping users quickly understand the main idea.
          • Some projects lack detailed data (e.g., outcomes or customer reviews).
          • Missing details make content appear incomplete.

          Performance and Compatibility： 

          • Works well on both computer and phone.
          • Responsive layout adapts smoothly to screen sizes.
          • Large images may load slower on mobile networks.
          • Browser Compatibility: Site performs well on major browsers.

          Google Chrome: Works smoothly, quick loading and navigation.
          Microsoft Edge: Performance similar to Chrome, stable.
          Safari: Runs well, but on mobile slower due to big images.

          Strengths and Weaknesses:

          • Strengths: Modern design, clear structure, shows real projects and awards, conducive to building customer trust.
          • Weaknesses: Some project pages lack details, images can be too heavy, the layout seems a bit boring and lacks novelty.

            Recommendations: 
            • Add more details for projects (outcome data, client quotes).
            • Compress images to improve loading speed.
            • Elaborate on team’s strengths in different services.
            • Optimize design to increase visual appeal.


            REFLECTION

            Reflection on Five Website Analyses：

            Strengths: I noticed that many websites use modern design, clear navigation, and professional project showcases. These elements make them look reliable and user-friendly.

            Weaknesses: Some sites have small fonts, heavy images, or missing details in their content. This makes them less engaging and harder to understand.

            Reflection: As a beginner, I realize that good design is not just about looks but also about clear information and smooth use. I need to practice balancing design and function in my own work.







            评论

            发表评论