Salesforce Summaries – Don’t Make Users Think: Implementing Design Thinking with SLDS

Share this article...

SalesforceSummaries: a series delivering key insights from Salesforce YouTube videos, to save you time as you keep up to date with the latest technological changes within the Salesforce ecosystem. 

Introduction:

The Salesforce Lightning Design System (SLDS) has been designed with UX in mind. A simple and intuitive UI results in a much better UX.

Details: ‘Don’t Make Users Think: Implementing Design Thinking with SLDS

Presenter: Gaurav Kheterpal

Time: 19 minutes

Key Terms: SLDS, Visualforce, Design Thinking

[email protected] — In this presentation, Design Thinking and SLDS will both be discussed. You will learn how SLDS can be compliant with Design Thinking to improve the user experience (UX).

[email protected] — There is a stark difference in terms of the mentality of developers and designers. A good UX will have the input of complimenting design and development.

[email protected] — Design is an art that people use.

[email protected] — Another very famous quote about design is:

[email protected] — But probably the best quote about design is from Steve Jobs:

[email protected] — You need to think from the perspective of a user on what is the most simple and best UI.

[email protected] — The below is an example of a very bad design. It’s confusing and not simple.

[email protected] — Below is another example of bad design. It’s a form that is very complicated with far too many questions that are not displayed in a helpful way.

[email protected] — A good example of design thinking is below. It can be as simple as creating a button for the action. This is much clearer for the user.

[email protected] — Another example of bad design is to use a ‘positive’ colour for a ‘negative’ message:

[email protected] — The SLDS allows developers to focus on the application logic while designers can focus on the UX.

[email protected] — SLDS is a component driven model. Components are the building blocks of Salesforce applications, enabling designers and developers with ready-to-go interface elements available in HTML and CSS code.

Furthermore, there are utility classes in SLDS which allow developers to apply a single rule or simple pattern to your components. This adheres to the single responsibility principle in software engineering.

In addition, design tokens store visual design attributes and are used in place of hard-coded values (like hex values for colour). This enables you to customize your apps to suit your brand.

SLDS has a huge icon library. This can be leveraged to help your customers clearly navigate the apps you create.

Motion and animation is also supported in SLDS.

[email protected] — SLDS is a responsive framework and so creates a very consistent brand across all types of devices.

[email protected] — When the Salesforce team started working on the SLDS, one of their main aims was to improve the performance and underlying issues of Visualforce.

[email protected] — A very popular maxim in software engineering is ‘if it isn’t broken, don’t fix it’. So why create SLDS in the first place, instead of just relying on standard page layouts and Visualforce? The Salesforce team wanted a more intuitive and appealing UI and UX.

The Salesforce team wanted greater design thinking in the application. The four principles that are the cornerstone are clarity, efficiency, consistency and beauty.

[email protected] — There are a number of tools that come with SLDS, which enables developers to more easily style applications. One of these is the CSS Customizer.

  1. @15.00 — Visualforce is not responsive by default. One can use a responsive framework within Visualforce though, such as Bootstrap. However, SLDS has been designed to be responsive without the need for any additional framework.
  2. @15.30 — The following Trailhead badges are excellent resources for learning more about SLDS.

  1. @16.45 — Finally, the Lightning Design System documentation can be found here. It is incredibly comprehensive, with sample code and implementation notes.

Leave a Reply