Learnability Improvement: Button Feedback with Hover Effect
Before: Previously, the website's bottom buttons lacked visual feedback when hovered over. Users couldn't easily tell if the buttons were clickable, reducing the learnability of the interface. This absence of feedback violated the visibility and affordance principles from DOET, as the buttons did not suggest interaction.
Improvement: I added a hover effect that underlines the text when the mouse is placed over any button. This subtle change provides clear feedback, enhancing visibility and reinforcing affordance, making it obvious that the element is interactive.
Code:
button:hover{
text-decoration: underline;}
Safety Improvement: Increased Spacing Between Buttons
Before: Previously, the buttons at the bottom of the page were stacked closely together, violating the safety principle from DOET. This lack of proximity made it easy for users to accidentally click the wrong button, especially on touch devices or when navigating quickly. The absence of constraints increased the risk of unintended actions.
Improvement: I added margin spacing between the buttons, ensuring each has enough separation to prevent accidental clicks. This improvement not only enhances safety but also improves visibility by making each button more distinguishable.
Code:
button{
margin-top: 10px;}
Alignment Improvement: Organizing Content for Better Usability
Before: The three content boxes containing buttons were misaligned, overlapping with the page title and partially covering the background image. This lack of alignment violated the design principle that every element should have a visual connection with its surroundings. Additionally, the background was inconsistent: part of each box was placed over an image, while the other part had a solid black background. This created visual fragmentation, making the interface harder to read, navigate, and interact with.
Improvement: I moved the content boxes further down the page, ensuring they no longer overlap with the title or the background image. This adjustment improved the visual hierarchy, placing the boxes entirely within the unicolor background, making it clear which elements belong together and enhancing overall readability.
Contrast Improvement: Enhancing Text Readability and Hierarchy
Before: The page’s text lacked clear contrast, making it difficult to distinguish between titles, important information, and descriptive content. The inconsistent font sizes, styles, and colors created visual clutter, while the yellow title had a format that reduced readability. Additionally, the close proximity of the text elements further blurred the distinction between primary and secondary information.
Improvement:
Title Hierarchy: I made the main title larger than the surrounding text, ensuring it stands out as the most prominent element. (The "Physics Simulation" title remained unchanged, as it is an image I couldn't modify.)
Font and Style: I applied a consistent font and color to all descriptive content, reducing size and shifting the text slightly downward to emphasize its lower importance compared to the main title.
Enhanced Readability: I removed the yellow color and confusing formatting from the title, opting for a cleaner, more legible design.
Code:
body {
background-color: #454543;
font-family:"Poppins";
}
h1 {
color: #fff; /* White for high contrast */
font-family: "Poppins", sans-serif; /* Modern and readable */
font-size: 30px; /* Larger for emphasis */
font-weight: bold; /* Strong and clear */
margin: 0;
padding: 20px;
text-align: center;
margin-top:30px;
/* Subtle Text Shadow for Contrast */
text-shadow:
2px 2px 8px rgba(0, 0, 0, 0.7); /* Soft black shadow for clarity */
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: "Poppins";
}
Contrast Improvement: Background Color Continuity for Visual Flow
Before: The background of the page was inconsistent, with the top half displaying an image that faded into gray, while the bottom half had a harsh black background. This abrupt transition created a high contrast imbalance, making the page look disjointed and disrupting the visual flow. The lack of continuity between the image and the background made the content harder to read and the overall design less cohesive.
Improvement:
Unified the Background: I replaced the black background with a gray tone that matches the bottom of the image, creating a smooth transition between sections.
Enhanced Readability: By reducing the contrast between the image and background, I made the content easier to read and visually more appealing.
Improved Visual Continuity: The consistent color palette now ensures that users experience a more seamless flow while navigating the page.
Code:
body {
background-color: #454543;
font-family:"Poppins";
}
Repetition Improvement: Consistent Button Design for Visual Cohesion
Before: The buttons for the menu navigation lacked visual consistency. Each button had a different color, while the buttons at the bottom of the page followed a separate design pattern. This inconsistency violated the repetition principle, making the interface feel disorganized and reducing learnability, as users couldn’t easily identify buttons as part of the same functional group.
Improvement:
Standardizing Button Colors: I changed the menu button colors to match each other, creating a unified look that visually connects them as part of the same section.
Consistent Font and Style: I updated the menu buttons to use the same font, size, and black text color as the bottom buttons, ensuring all interactive elements follow a cohesive design language.