Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

A Peek into the UI/UX Universe (with examples)

Parent Feed: 

If you have studied some form of software design or are into designing, you should be familiar 
with the terms - "UI" and "UX". Yet, sometimes we tend to use both these words interchangeably. 
So, what sets UI apart from UX?
UX design is what makes an interface functional in its simplest forms and UI design is what makes an interface appealing and beautiful.

UI-UX Design

What is a UI Design? 

User Interface is something that a user uses to interact with a product or a service. As with the design of user experience, user interface design is a complex and challenging task. It is responsible for translating the creation, analysis, content, and layout of a product into an appealing, guiding, and responsive user interface.

  • User Interface design is all about how the product’s interface looks. This considers all of the interface's visual and interactive elements— including buttons, icons, spacing, typography, color schemes and responsive design.
  • The aim of UI design is to visually direct the user through the interface of a product. It's all about having a good experience that doesn't take too much thought and effort from the consumer.
  • A good UI design ensures the design is consistent and aesthetically pleasing. 

 What is a UX Design?

User Experience is an overall experience of a user when they interact with the products or services.

  • User experience design is a method of improving and enhancing the functionality of the user-interaction.
  • UX concept is NOT about visuals; it's based on the overall experience.
  • UX isn't just about making the consumer satisfied, however. It is about helping the customer to accomplish their activities in the best possible way and attain business objectives.
Dribbble                        Image source - Dribbble

User experience design is the process of designing and enhancing the consistency of a user's engagement with all facets of a business and thereby improving the user experience.
As of the current situation within the digital globe, every business tries to make an impact on user in order to multiply its sale and to provide a happening experience for a consumer all with help of User Experience and User Interface design.

How can a CMS like Drupal 8 help enhance the UX of a website? 

A Content Management System plays a key role in the success of a website’s UX design. Drupal 8 offers flexibility in customizing content as well as design. Let’s look at how is Drupal 8 a great choice of CMS if you are looking at creating compelling UX designs.

  • Page Speed – Fast-loading websites not only enhances the performance but also the overall user experience. Drupal 8 provides performance boosting features like advanced caching options, image optimization, code optimization, database optimization and more.
  • Responsive – With Drupal 8, responsiveness runs in the blood. Which means that all Drupal 8 websites are responsive out-of-the-box! And without a responsiveness, the UX of a website is incomplete.
  • Personalization – It has been proven that websites that offers personalized experiences see more conversions than websites without it. Drupal 8 offers various modules that let you personalize your content based on the user’s demographics, device information, date and time of login and more.
  • Multi-lingual – Did you know that only 20% of the world’s population can speak / understand English? To be able to provide a personal touch through the UX of a website, it is important to speak with the user in the language they are comfortable with. Drupal 8 offers multi-lingual support out-of-the-box with over 100 languages to choose from.
  • Headless DrupalDecoupling Drupal gives UI/UX designers a lot more control over the design elements of a website. When front-end frameworks like ReactJS and Angular JS are leveraged with Drupal 8, the user experience can be enriched. 
  • Themes – The Drupal community has built hundreds of themes that can be adapted to any business requirements. You can find Drupal core themes that come out-of-the-box with Drupal 8 as well as third-party Drupal 8 themes. If none of them suit your needs, you can also customize a theme to have them tailor fit.

How does UX differ from UI?

Here is an analogy I like to use to describe the difference between both.
If you imagine the human body to be a product. The organs reflect the UX design: measuring and optimizing to support life and UI design reflects the body's cosmetics; their appearance, their senses yet their reactions. 
The key distinction to remember is this: UX design is all about the overall feel of the user while UI design is all about how the interfaces of the product look and work.

Dribbble                         Image source - Dribbble 

For instance, User Experience (UX) is mostly emotional and is the consumer's mental actions, like how a user reacts when using a product or what emotions he feels during the usage of a product.

It mostly deals with what goals users are trying to achieve via the product, what their needs are, what feelings are they experiencing, what strategy is to be applied, and what interactions are they likely to perform in order to reach their goals.

Whereas User Interface (UI) is tangible. It mostly deals with the visual hierarchy of the product, including buttons, typography, colors etc. UI designers basically have to deal with scalable designs and have to improve the user flows by reducing the time required for a user to reach his goal while making the product aesthetically pleasing and visually beautiful for the user.

Good and Bad UI/UX Examples

Let’s talk about a few bad examples of UI/UX

Distractions create bad first impressions Distractions create bad first impressions

When looking at the above example at the first sight, it gets rather confusing about what the website is all about. A user is shown various ads and unwanted information and is presented with a lot of information that is difficult to be processed, hence making users bounce off the website without even reading the news posting which they were looking for in first place.

bad ui/ux experiencebad-ui-ux


These are some more bad examples of UI/UX.

When looking at the above two images, a user gets confused and is likely to be diverted from his actual goals. In 2020, responsive designs are not a trend but a necessity. The above examples show the bad and harsh usage of colors and typography leading to confusion.

But not every design is bad. Let’s also talk about some of the very good examples of UI/UX.
The above example shows how a simple micro-interaction can make a user happy and engaged, leading to some immersive experience.

good-ui-uxgood-ui-ux-experience

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web