Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

Apply Green UX Principles

Learning Objectives

After completing this unit, you’ll be able to:

  • Explain the two main strategies for green user experience (UX).
  • Explain the principles and best practices of green UX.

So far, this module has given you practical tips and best practices for incorporating sustainability into design work whether digital or not. In this unit, you learn about green user experience (UX)—design principles and approaches to reduce the environmental impact of your digital designs. 

The internet uses a lot of energy. While data centers are getting more and more efficient and the grid is slowly converting to renewable energy, the principle of doing more with less is one that should resonate with every designer. As Mies van der Rohe said, “Less is more.”

When it comes to software design, designers help shape the user experiences that are translated into computational cycles and network traffic. That means designers have an important role to play in designing an internet that uses less power. 

Design Strategies for the Climate

Designers and engineers don’t control the hardware that powers the digital experiences we build. However, there are a couple broad strategies for reducing the energy needed to run software.

  1. Minimize compute cycles.
  2. Minimize network traffic.

These strategies can be applied with a series of best practices. The great news is that, if you’re designing a green UX, you are usually designing a faster, more satisfying experience for your users. 

Combine, aggregate, minimize. Every time a browser makes an HTTP request for assets from a server, that server has to validate and assemble the response. Minimize the number of times it has to do that by reducing the requests your UX makes. Cascading style sheet (CSS) sprites pull images into a single background image, and aggregate and “minify” your JavaScript and CSS files. Use scalable vector graphics (SVG) to display your vector images in ways that they only scale to high-resolution displays when they need to.

Think above the fold. Make sure your design supports progressive page loading and features the most important content in a prominent place. Only loading the content people need when they need it avoids transferring more data across the network. It also improves page load times.

Think dynamically. Be clear on which parts of an experience need to update themselves automatically and which don't. Dynamic elements that keep pinging a server to get updates increase network traffic and can create inefficient computing loads which use unnecessary power.

Think about what’s next. Teams are always coming up with better ways to deliver digital experiences. Building on top of common frameworks like the Lightning Design System means the efficiency improvements made to the framework can be realized across all the apps that use that framework. That means the app you made can just keep getting better over time.

Find willing partners. If you’re designing for sustainability, the good news is that you’ve likely got willing partners in your product team. Engineers and product managers want to build efficient, digital products that cost less to run. Whether you describe those well-designed experiences as sustainable or not, your collaborators are a great resource for positive environmental impact. Ask them how you can prioritize what matters most, minimize page loads, aggregate requests to the servers, and improve your users’ experience with efficient, great design!

The internet and the digital experiences it hosts use a lot of energy. Until our grid is powered by 100 percent renewable energy, minimizing the energy those experiences use will be critical to combating climate change and building a more sustainable world. 

Resources

Share your Trailhead feedback over on Salesforce Help.

We'd love to hear about your experience with Trailhead - you can now access the new feedback form anytime from the Salesforce Help site.

Learn More Continue to Share Feedback