Design

What is design??

A Harsh Reality Check for Designers – It’s Time to Rethink Your Portfolio! Pretty UI is No Longer Hiring!

I spent years perfecting my craft, learning about typography, interaction patterns, and research methodologies. This knowledge matters; it really does. But now I’m realizing that this was just the baseline. The actual differentiator lies in how we navigate everything else—politics, limited resources, and competing priorities.

I appreciate that this conversation is anonymous because I’m beginning to think that we’ve put design on a pedestal. This might be why we don’t get valued like other roles. Engineering and product came first, and that’s historically ingrained in how companies are built. Yet, look at how every other function has adapted. Marketing shows revenue impact, sales has clear numbers, and even HR tracks retention metrics. Meanwhile, we’re still arguing that design can’t be measured and that we’re too “creative” to be tied to business outcomes. We’ve done this to ourselves by refusing to speak the language of business.

When was the last time you saw a design case study that started with business metrics instead of beautiful mockups or a photo with Post-it notes on the wall? We talk about user-centered design but shy away from business-centered realities. It’s no wonder we’re the first to be cut when times get tough.

I initially thought the market was broken and that design was losing its value. However, I now see it differently. The market has simply matured; it’s no longer enough to be a good designer. You also need to understand how design fits into the bigger picture.

Designing Enterprise UX

Data Data Data but there are few thing need consider.

Consumer products

  • Most consumer products address specific problems for a user group, focusing primarily on retention, engagement, loyalty, and conversion.
  • A typical user journey for a mainstream consumer product follows a linear sequence of steps, featuring limited entry points and several optional side quests (such as setting up account details while proceeding to checkout).
  • Last but not least, a consumer product is often used in a personal context — for example, using your smartphone to request an Uber on your way to meet friends, making your own decisions about how much you’re willing to pay for the ride (come on, take that Uber Black; you deserve it 😬). You want to use that app right then and there, but it’s also within your power to set it aside or replace it with something else at any time.

Enterprise products

  • Enterprise products, on the other hand, are “one-size-fits-all” solutions for various user roles, featuring different permissions, responsibilities, and levels of expertise. They primarily focus on efficiency, fault tolerance, and repetitive use—in other words, their purpose is to help employees complete their (repetitive) tasks quickly, affordably, and error-free possible.
  • A single user journey can easily encompass over 100 screens, spanning 2 to 3 tools or more, with non-linear tasks and various entry points.
  • The environment where enterprise products are often used can be highly regulated, as seen in industries like banking and government institutions. These settings can be stressful and impersonal, varying from outdated hardware used by employees in crowded open spaces to uncalibrated projectors with poor contrast. Additionally, some decision-making rooms may feature a matrix of high-quality displays covering an entire wall.

“Divide and conquer” when possible

To enhance user experience, it’s advisable to avoid loading the entire screen at once, as this can result in longer waiting times. Instead, consider breaking the screen into multiple areas or sections, each with its own independent loading state. This way, if the loading process fails for a specific section, it won’t impact the other areas. Users can still interact with the rest of the interface while they investigate or report the issue in the affected section.

Instead of loading an entire dashboard at once with one overall loading state, you can break it down into individual loading states for each widget, as they likely use different APIs.

Format data

Users from different locations may interpret the same data differently. Always format the data based on the user’s preferences. Remember that just because a user is based in a particular country, it doesn’t mean they will automatically use the standard formatting associated with that country.

For instance, as a European employee temporarily working in the U.S., I may not want to automatically switch to miles instead of kilometers or change to the `mm/dd/yyyy` date format instead of `dd/mm/yyyy`.

Awesome Bad UI

Forget about beautiful designs; today, let’s learn from the ugly and funny ones.

Good luck with unsubscribing.


Fan Controlled Cursor 

source: https://github.com/themutti/fan-controlled-cursor


The best way to limit username size


Real dark mode


Donkey Kong input method


High Low Birthday


Scientific Date Picker


Phone Slider Selector


Calendar Hell 

mroe Bad UI Battles ->> https://www.reddit.com/r/badUIbattles

WCAG2 Are You Still Using It?

WCAG2 Are You Still Using It? UI Contrast Visibility Standard (Readability Contrast)

The orange background with white text on the button often fails to meet WCAG2 standards. Can it still be used, or is it solely based on the designer’s intuition?

I believe ordinary people cannot effectively represent the perspectives of color-blind individuals. If choices are based solely on experience and do not meet WCAG standards, further exploration may be necessary.

Have you ever considered this? The widely used WCAG standard in UI design can sometimes result in a ‘Fail’ rating under certain circumstances, even when it doesn’t appear to be a significant issue to us.

This discrepancy arises from the inherent calculation methods used by WCAG. Below, I will explain these methods and discuss how the new APCA standard can address existing problems while continuing to excel in the future of UI design.

What is WCAG?

The WCAG (Web Content Accessibility Guidelines) is not just a guide for Color Contrast; it is a comprehensive resource for web accessibility. We acknowledge the importance of WCAG in addressing Color Contrast, as well as its contributions in other areas.

The WCAG 2.x version uses a binary system—Pass or Fail—to indicate whether the colors meet visibility contrast standards. However, the way the human eye perceives contrast is non-linear. This means that the guidelines do not account for the high dynamic range of human vision, which can be considered an unfair limitation.

High Dynamic Range

Let’s use photography as an example. Many people have experienced the challenge of taking photos against the sun. In bright sunlight, objects that appear pitch black to the camera may still be visible to our eyes. This is due to the remarkable ability of our eyes to adjust automatically to varying light conditions. The pupil controls the amount of light entering the eye, allowing us to see objects clearly even in backlit environments.

On the other hand, if a camera has a larger photosensitive component—such as Hasselblad’s medium format film sensor—it performs significantly better in these challenging lighting situations. When the frame size is limited in cameras like smartphones, manufacturers often utilize HDR (High Dynamic Range) photography. This technique combines multiple frames to emulate the way our eyes perceive light and detail.

Thanks to the advancements in Micro LED and OLED technology, the media we use to interact with digital content will increasingly lean towards HDR content. This evolution marks a significant shift in how we experience visual media.High Dynamic Range

Issue with WCAG 2: Formula

The problem has gradually emerged: WCAG calculates using the relative brightness value of colors, known as luminance. This refers to the brightness of a color itself.

  • R, G, and B represent the red, green, and blue components of the color, respectively.

Color Relative Luminance Calculator
This website can calculate luminance. Afterward, you can process the text with the background color ratio:

  • L1 is the luminance of the foreground color.
  • L2 is the luminance of the background color.

In simple terms, WCAG relies on the relative brightness of colors as a basis for its calculations, which does not account for the adaptive nature of the human eye.

Relative brightness remains constant, but the adaptability of the human eye is dynamic. How can this be correct?

Let me illustrate with a favorite example: Imagine a completely dark room with 100 lit candles. Does it become brighter? Yes. If you then add another 100 candles on top of the initial 100, does it get even brighter? Again, yes.

However, which transition feels brighter: going from 0 to 100 candles, or from 100 to 200? From a perceptual standpoint, the change from 0 to 100 should feel more noticeable. Interestingly, even though the brightness difference between 100 and 200 candles is the same as that between 0 and 100, the perceived intensity feels different. The explanation lies in the adaptability of the human eye.

Where WCAG 2.X Missed the Mark

The formula used in WCAG 2.X has some shortcomings. When both the text and background colors are light, the calculated contrast value tends to be low because of the high relative luminance of the colors. On the other hand, when colors with low relative luminance are used, applying the same formula often results in a high contrast value.

WCAG original author’s words

As of the 19th of June, 2019 edit: I will reiterate a bit because “accurately modeling lighting displays (luminous screens) under real-world environmental conditions” is not possible. WCAG fails miserably with mid-range colors because it cannot adapt to human non-linear perception. Therefore, it is not suitable for systematic viewing of digital product readability, especially in the mid and dark ranges.

APCA

Advantages of APCA

The Accessible Perceptual Contrast Algorithm (APCA) is a new model that calculates lightness contrast (Lc) results. We will not delve into the standard Lc values for icons and text since there is ample information available online. The most noticeable advantage of APCA is its ability to reference both positive and negative values at the same numerical level for light and dark backgrounds. This feature allows for the design of a color system that offers more consistent contrast.

Difference from WCAG 2.X: Formula

The shortcomings of WCAG 2.X arise from issues with its formula. APCA has significantly improved upon this with a new formula:

  • Lc(foreground) refers to the lightness of the foreground color.
  • Lc(background) refers to the lightness of the background color.

Lc is calculated based on the CIE Lab Color Space, which is a perceptually uniform color space that considers the human visual system’s response to different wavelengths of light.

ACTTR Technology — CIELAB Color Space and Coordinate Exchange

This tool can calculate the coordinates of a color in the CIELAB color space. To determine the Lc value, you can use the known RGB values in the formula to obtain f(L). The function f(L) maps RGB values to the CIE Lab space. The relevant formula is as follows:

*L represents the brightness of color (luminance), ranging from 0 to 1. Next, calculate Lc using f(L) as follows:

The Lc of colors is a number between 0 and 100. A higher Lc value means the color is lighter (brighter), common Lc values for colors can be referenced:

Common Lc Values Reference

Sharp-eyed readers may have noticed that the foundation of the APCA formula, f(L), is based on the calculation of the CIE Lab color space. This model is rooted in the wavelength response of the human eye to light. Therefore, the results of the APCA color standard can serve as a more user-friendly method for UI designers to assess color readability when creating digital content.

Conclusion

The WCAG 2.X standards have been in the industry for many years. However, the media devices prevalent at the time WCAG 2.X was developed (such as CRT screens) are vastly different from today’s LCDs and LEDs. While the contributions of WCAG 2.X standards to the design industry are undeniable, it may be time to upgrade to newer standards that better align with current needs.

So far, there seem to be few designers or teams in Taiwan discussing or utilizing the APCA standard. It’s possible that certain specific service targets necessitate adherence to the WCAG 2 standards for broad applicability. Given that the APCA standard is still in development and not widely adopted, there are many plugins in Figma that support contrast detection using APCA. Therefore, we might consider gradually incorporating APCA into our workflow moving forward.

Unlocking the power of a systematic approach to crafting stunning enterprise UI color palettes!

How can you create color palettes that effectively balance accessibility, brand identity, and scalability?

There’s almost always a starting color

Contrary to some advice, designers rarely create palettes from scratch. Most often, we build on established brand guidelines. 

Establishing light mode colors

Baseline color

Using the seed color directly is not always feasible because it may not meet accessibility requirements. Consider these popular brand colors that do not satisfy WCAG 2.1’s AA standards for regular text:

To ensure compliance with WCAG 2.1 guidelines, start by establishing a baseline color. Adjust the lightness of the seed color using a contrast tool until it meets the minimum requirements for regular text displayed against a white background. This baseline color will serve as the foundation for all other colors.

Canvas color

To identify this color, set the baseline color as the foreground and use white as the background in your contrast tool. Gradually increase the lightness of the foreground color until it reaches a 1.1:1 contrast ratio with the background — just enough to subtly suggest the color.

Default and subdued accent colors

Accent colors attract attention to actionable elements such as buttons and links. Two levels of contrast — default and subdued — help establish visual hierarchy.

  • Default accent: Reduce the baseline’s lightness until it has a 1.7:1 contrast ratio against the baseline color.
  • Subdued accent: Lower the alpha (opacity) of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio for text against the canvas color.

Default and subuded neutral colors

Neutral colors serve as the default for most content, much like text printed on paper.

  • Default neutral: Reduce the default accent’s lightness until it achieves a 1.3:1 contrast ratio against black.
  • Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.

Establishing dark mode colors

Baseline color

Dark mode typically requires lower saturation levels to reduce eye strain and enhance accessibility. Begin by decreasing the saturation of the light mode baseline by 33%. Next, adjust the lightness until it complies with WCAG 2.1’s minimum contrast standards for regular text displayed on a black background.

Canvas color

For simplicy, reuse the light mode’s default neutral color.

Default and subdued accent colors

In dark mode, invert the light mode formulas:

  • Default accent: Increase the dark mode baseline’s lightness until it achieves a 1.7:1 contrast ratio against the baseline color.
  • Subdued accent: Reduce the alpha of the default accent until it meets WCAG 2.1’s AA minimum contrast ratio against the canvas color.

Default and subdued neutral colors

Again, invert the light mode formulas:

  • Default neutral: Increase the default accent’s lightness until it has a 1.3:1 contrast ratio against white.
  • Subdued neutral: Lower the alpha of the default neutral until it meets WCAG 2.1’s AA contrast ratio against the canvas color.

APCA changes things

These colors were calculated using WCAG 2’s flawed contrast formula, which WCAG 3 aims to improve with the introduction of APCA. This new method will address the contrast formula flaws while also considering font size and weight to ensure sufficient readability. While I’m unsure how this will impact my approach, I’m eager to explore the changes when we cross that bridge.

Page 1 of 25

Powered by WordPress & Theme by Anders Norén