Dark Mode on the website: Just a beautiful trend or really affects UX and Conversion?

Arguing does not end! Dark Mode on the web is just a beautiful trend. Or can it really increase conversion?

Have you ever felt that in the past 2-3 years, regardless of which app, what apps we use? Or where to go to a famous website, we tend to find the "Dark Mode" or "dark mode" to always use. Until becoming a question in the minds of business owners, marketers, and many website developers that "And our website ... is it necessary to have a Dark Mode?" It is just the beauty trend that has arrived. Or it is an important feature that affects the user's experience (UX) and the conversion rate, as they really say. Today, we will come to surgery in every aspect of Dark Mode completely. Your website should "turn on the light" or "turn off the light".

‍

Why does Dark Mode become "it must have" in this era?

The Dark Mode phenomenon does not happen, but it has an interesting source. Starting from the developer side and programmers that have to stare at the white code for a long time, causing eye -catching They therefore like to use dark backgrounds and bright colors to reduce reflections and work more comfortably. Later, when the giant operating system like iOS and Android brought Dark Mode as the main feature in the system In addition, the popular social media apps that Thai people use throughout the house all over the city has this mode to choose from. The behavior of users began to change. People are getting used to and expects that websites and applications that look "modern" and "pay attention to users" should have this option to have Dark Mode, so it's not just about programmers anymore. But has become one of the standards of a good User Experience in the eyes of many users by default

‍

If our website doesn't have a Dark Mode, will "fall out" or lose any opportunities?

No Dark Mode may not make your business ruined immediately. But it may affect the dimension that you can't expect. Imagine:

• First Impression: In an era where big brands have all the Dark Mode. The website that does not have this option may be seen as "According to the trend in time" or "do not pay attention to the small details", which may affect the image of the brand. Especially with businesses related to technology, design, or products for the new generation
• User experience in certain situations (Contextual UX): Think of customers who are lying on a mobile phone on a dark bed. Then press into your website that has only white backgrounds ... The light that is too bright may cause the customer to feel uncomfortable and immediately press to close. This is a unfortunately losing opportunity because the UX does not answer the actual use. Which this problem is similar to the case Slow clinic website and UX are so bad that they lose customers. Go without knowing
• Misunderstanding of impressive opportunities: Giving options to users "control" their own experience (such as choosing between Light/Dark Mode) is considered a small Micro Interaction that creates a good feeling. And show how much your brand cares for users There is no feature that misses the opportunity to create a positive relationship with one customer.

‍

The best solution: not just "Mee" but must "have understanding"

The answer to this is not just "must have a Dark Mode" or "don't have", but the best solution is "All -round assessment" and then decide strategically. Which should start from:

1. Target and brand analysis: Who are your customers? How often do they use technology? What kind of image your brand is? (Such as children's products, it may not need a Dark Mode, but the Gadget brand or platform for developers. The Dark Mode will enhance the image a lot.)
2. Weighing the advantages-straightforward disadvantages:
   • Advantages: Reduce low -light eyesight, saving batteries (for the OLED screen), looks modern, meets the personal needs of users.
   • Disadvantages: may reduce the ability to read long text (From the HALATION Effect phenomenon, the bright letters on the dark floor will look cloudy), the design is more complicated than just coloring, takes time and budget for further development and testing.
3. Study from experts: Reliable data sources like Nielsen Norman Group have been analyzed that Dark Mode is not always better than Light Mode, especially with a website with a lot of letters. Designs that focus on the appropriate Contrast is the most important.
4. Starting from the plan, not code: If deciding to do Should start with the design plan "Dark Mode" specifically, not just writing a black-white alternating code easily Which may make the results look worse

The good starting point is to ask the question: "Dark Mode will really help our customers experience better?" Not just "Why do we don't have a Dark Mode?"

‍

Examples from the real thing: when the global app uses Dark Mode to create success

In order to be clearer Take a look at the example of the app. And websites that we are familiar with, such as Youtube, Twitter, Slack, or even the Messenger and LINE apps, they are not just adding Dark Mode, but has designed all new experiences.

Case study (assuming): Think of the E-Learning Platform for programming After they added the Dark Mode feature. What happened was:

• Engagement rises at night: students who like to study late at night Can take longer on the platform without feeling
• Received a overwhelmingly positive feedback: users feel that the brand "listens" and "understand" the needs of the technical workers.
• The image looks "promotion" and more reliable: having Dark Mode makes the platform to be comparable to other professional developers in the market.

This success is not only from having a button to switch mode. But from the design that understands that Dark Mode is not just the color, but UX/UI, which helps customers achieve their goals better. Which is the heart of creating conversion

‍

Want to follow, how to start? Checklist for adding Dark Mode to your website.

If you decide that Dark Mode is the right thing for your website. This is a step that should be done. In order to get good results and actually work Not just beautiful, but the picture:

• Step 1: Create a new color set (Don't Invert): Do not use the straight color switching methods! White (#fffff) should not become completely black (#000000) because it will cause the Contrast too. Try using dark gray (such as#121212) as a background and reduce the bright white color for the characters.
• Step 2: Check Contrast is Heart: Use Contrast Ratio to ensure that letters and elements. Still easy to read and pass WCAG (Web Content Accessibility Guidelines).
• Step 3: Test all elements: logo, icon, button, picture, and various form. Must be well displayed in the Dark Mode. Some images may need to be adjusted to be slightly brighter so as not to swallow the background.
• Step 4: Use modern technology: developers can use CSS Media Query called Prefers-Color-Scheme. To allow the website to automatically alternate according to the operating system settings set by the operating system
• Step 5: Let the user decide: The most important thing is to have "Toggle Switch" allows users to choose by themselves. Do not force the user to be in one mode. This is the respect of the user's decision and is a good UX principle, like the design of investors, investors that must provide clear information and allow users to see themselves.

‍

Questions about Dark Mode (and the most clear answer)

Q1: Is there a better Dark Mode?
A: There is no direct effect. Google does not give better ranks with the website with Dark Mode, but it is indirectly via UX. If your Dark Mode helps users. On the web longer (Dwell Time) or more interacting with the website (Engagement). These are good signs that have a positive effect on SEO in the long run.

Q2: All types of websites are suitable for Dark Mode?
A: Not always. Website that focuses on reading long articles, government websites, or websites that want to communicate bright, friendly, such as web, mother and children. It may not be suitable for Dark Mode. On the other hand, the technology website, entertainment (Streaming), or brands that need modern luxury, usually better with the Dark Mode.

Q3: Do you need a lot of budget to do Dark Mode?
A: Depending on the complexity of the website. If it is a newly created website and planning from the beginning The cost may not be very high. But if it is put on an old website with a complex structure (Retrofitting) may require a budget and time for design and testing. Which may be considered as part of Website Renovation (Website Renovation )

Q4: Should the website be set as a Dark Mode automatically at night?
A: It is an interesting idea. But the best way is "Do not do". We can't know what kind of user is in the environment. Giving users options via Togle is always the safest and most useful way to use users.

‍

Summary: Dark Mode is not a magic medicine. But the tools of people care UX

At this point, we have already agreed that Dark Mode is more than a beautiful trend, but it is a "powerful" to enhance the user's experience (UX). When used correctly, time and correct, the key is not that your website "Dark Mode or not, but is enough to" understand and care about your customers to give them the best experience for them or still?

Choosing to do or not to do Dark Mode should be a result of the analysis of the target group, understanding the brand's identity, and weighing the advantages and disadvantages. Not just following the trend Because in the end The successful website is a website that is easy to use, answers and creating good feelings for users. Whether in bright mode or dark mode

What about your website? Ready to present the best experience to customers? Do not let the hesitation block your business opportunities. Good investment with UX today. Is to build a strong foundation for growth in the future

If you need experts who understand deeply, both design and strategy Come to help you analyze and design the right UX/UI for your business, whether it is the perfect Light Mode or Dark Mode. Consult the Vision X Brain team. We are ready to change your website to be loved by customers and create a business result.

‍