Skip to main content

UX Design Trends 2018: Part 1 - A Shift in Interface Design

Posted in Design on March 8th 2018
author photo
Vice President and Co-founder at IT Consultis

Being online is a priority for almost any business. However, success does not come to each one of them just after “going live”. As people look for more and more information online, a company’s success may highly depend on how appealing its website is, and how clearly and easily the necessary information is discovered. To face these challenges, besides applying the latest principles for User Interface (UI), more and more effort has been put towards User Experience (UX), which an indispensable pillar of your product design.

First of all, let's just get it out of the way, we hear about UX all the time but what exactly is it in the end? - Our own Max Brillant - Art Director at ITC would describe a good UX design process which as the following:

  • Understanding the Macro and Micro goal of the platform and their level of priority
  • Understanding the content that could be created and made available to be uploaded to the experience
  • A full understanding of the persona targeted
  • A full knowledge of the users we will get on the platform (if they are slightly different to the initial persona)
  • The creation of a user flow that will help to reach those initial macro and micro goals
  • A constant improvement of the platform towards a stronger ROI
 

UX design is constantly changing. Over the recent years, new trends have evolved, mainly in relation to how a user behaves when browsing through a website. In this article, we will discuss some of the most prominent UX design trends for 2018, showing how designers are tackling these challenges in order to improve user engagement on any interface.

 

Simplification of the user journey to reduce the burden of information

When a user interacts with a website or an app, he or she aims to achieve a specific goal. Usually, the less effort the user spends on achieving this goal, the better the experience is. This simplification of the user journey can be achieved in two possible ways.

Linear User Flow

The first design principle of 2018 would be the simplification of the user journey. When a user interacts with a website or an app, he or she aims to achieve a specific goal. Usually, the less effort the user spends on achieving this goal, the better the experience is. This simplification of the user journey can be achieved in two possible ways.

The beauty of linear user flow lies in three aspects:

  • The design focuses on helping the user to achieve one specific goal
  • All unnecessary steps are removed from the journey
  • The designers need to make sure that there are no “steps within steps” that break the user journey.

Usually, in the linear user flow, information is presented all at once, allowing the users to complete the process without much navigation. Linear user flow allows the user to have a big picture of the whole process, understand all steps involved in a short time and engage with the product or service more easily. Thus, it leads to a higher lead conversion rate. An example of linear user flow by Uber booking app is provided below.

Linear user flow of Uber

In the Uber example, we can see Linear User Flow is applied:

  • The app helps the user achieve a specific goal: book a drive
  • Unnecessary steps are removed or done first by the app, for example, the app can automatically geolocate your starting point, and suggest the destination depending on your history.
  • There are no “steps within steps” involved, for example, your preferred payment option is saved, you don’t need to input the details again.
 

Progressive Disclosure

Progressive disclosure should be used when all information cannot be shown at one time. In this method, the user can interact with a slideshow or a multi-step form, where necessary information will be revealed one by one automatically or at the user’s need. This type of user journey helps the users not being overwhelmed by too much information. Hence, the user experience will be simplified and the users can complete the actions more effortlessly.

A typical example of progressive disclosure is Swatch Club. When reaching the homepage, the users can get an overview of the website content, but each part is not fully shown. "Read more" CTAs are provided so that the users can get detailed information on dedicated pages.

Progressive Disclosure of Swatch Club

In the example of French Lifestyle website, only the most important elements are shown on the homepage. The detailed content can be accessed by clicking on the CTAs (Get your box, Offer a gif, Discover, etc.) that are placed in corresponding positions.

Progressive disclosure of French Lifestyle website

 

Multi-device compatibility

Not only the design has to be simplified, but it also needs to be compatible with multiple devices. With the release of iPhone X, UX designers are facing a new challenge. The mobile phones' design had already transitioned from keypad-based to touch-friendly UX design. But now, with the lack of a physical Home button, even the most basic interactions with a device are gesture-based. UX designers now need to carefully analyze every possible interaction and design accordingly.

In an attempt to solve these problems, designers are focusing more and more on creating motion design and utilize micro-interactions.

The designers can also consider using animation for its obvious benefits such as:

  • Providing clarity on available interactions (This can be the first time an interaction is opened, whether it is an App or a WebApp)
  • Clarifying spatial relationships between UI elements (animated transitions)
  • Providing feedback on every interaction initiated by the user like touching a button
 

Bezel-less phones are now ubiquitous and may become the new standard. Devices such as the XiaoMi Mix 2, Vivo Apex, the One Plus 5t, etc. are pushing the limits in terms of how much space can be used for the screen, as well as display formats available to their devices. Thus, it is essential for designers to keep updating and adapt their design to these new trends.

I personally find the Voice Message button really badly positioned now that I do use an iPhone X. It creates poor interaction with the “Home button”. It makes more sense now the way it is positioned on Whatsapp or Messenger.

 

Content-Centered Experience

 

Content-centered experience comes next in the list of UX design trends of 2018. Content is king, and it is necessary to present it well. An interface with too many modules or sections on a single page would lead to confusion and repel the user. Hence, one needs to take care of the content in two ways:

Decluttering:

  • Provide more white spaces and sufficient visuals to help the user understand information
  • Avoid putting too much of information in one place and focus only on a very specific goal

Eliworld website is visual-oriented

Clear visual hierarchy:

  • Present all UI elements in a clear order to make your design comprehensive
  • Follow the common visual hierarchy principles to make the most important elements attractive to the users
  • When using the app or website, it is extremely important that the user is hinted at what to read next.

 

Savills Residence website with attractive images and CTAs

 

Another example of this is the product pages of a famous brand - Xiaomi. The brand has done a good job in customizing each product page of Xiaomi to highlight the most important elements and provide the user a smooth experience.

Xiaomi customized product page

 

More focus on storytelling

Storytelling has been one of the most widely used methods of designing amazing UX, and it will continue to be an important pillar of the UX design in 2018. This method of information portrayal involves the creation of a complete storyline. In order to tell a good story, you need to understand what the problems of your target customers, and why your product is the best solution to their problems. Then, a comprehensive user story will be developed to ensure the user experience is optimized at every touch points.

A storyline is something similar to the ones shown below.

Example of user storyline

The figure above is a simple, elegant flow presenting a user journey of exchanging cryptocurrency. Such a user flow makes it easier for product developers to create and arrange the corresponding features at every touch point so that the best experience can be provided to the customers while making the transaction on the platform.

How is storytelling different in 2018? The popularity of conversational interfaces amongst designers and developers has spiked up these days. It has also raised a lot of awareness to the importance of copywriting for improving the user experience. Chatbots, for instance, are purely conversation-based experience, and every word your bots are “using” needs to be carefully chosen to ensure conversation goes naturally. Thus, UX design is no longer linked with just layout of information. It also incorporates the study of how understandable the information is.

 

Dominance of Video

Finally, the dominance of video also contributes to the UX design trends of 2018. According to recent statistics by Hubspot, almost 78% of people watch videos online every week, and 55% watch videos online every day. Hence, adapting the UX design for the video presentation is also turning out to be important to create a lead magnet. Basically, this aspect needs to be taken care of in two ways:

Adapting Video For Short Attention Span:

  • In 2015, the human attention span was reported to be only 8 seconds, so the video needs to be short, concise and focus on how they could help the user or client.
  • Live streaming on the social network is a good method to catch user attention because of its real-time interaction.

Adapting Video For Portrait Orientation:

  • Considering the increase in mobile users, one needs to take care of videos displayed in portrait mode too.
  • It becomes clumsy when the user needs to rotate the phone merely to watch an introduction video. In such a case, it is excellent to have a portrait format video for respective screens.
 

Bonus: How SPAs are changing UX

The recent popularity of SPA (Single Page Applications) has led to further challenges in the UX design. With ReactJS, the navigation no longer takes place using URL or navigation buttons. It is handled by a router that loads only the necessary content. With SPAs, we are facing these major challenges:

  • The back button of the browser is no longer useful to the page navigation is handled by the router.
  • The components are dynamically loaded. Hence, it becomes necessary to arrange them in a way that does not distort the view.
  • It would be necessary to provide feedback to the user either via loading images or animation to indicate complete loading of a page.

Due to these challenges, UX design needs to be adapted by including certain components to provide sufficient hints to the user for smoother browsing. For instance, including a back button arrow for returning to a previous router state might be required. Few examples of great SPA implementations can be found here.

 

Conclusion

UX in 2018 has been changing to a great extent with the changes brought to the market in hardware and technologies like the bezel-less displays and motion-based control systems. This article discussed in depth several UX design trends for 2018 in the industry owing its necessity to the evolution of smartphones, gesture controls and need for clarity in presentation. The upcoming article in continuation of this will discuss the trends that follow in the market with the rise of AR/VR/AI technologies.

Never skip any update - subscribe to our newsletter now!

Read more

 

 

About the authors

 

Aurelien Rigart

ITC's Vice President and Co-founder

Aurelien is a serial entrepreneur, co-founder and member of EO (Entrepreneur Organization), also a coach for startups and mentor for other entrepreneurs. As Vice President of ITC, Aurelien is responsible for the development and expansion of the company, leading the strategy, sales, and marketing departments.

 

 

 

Max Brillant

ITC's Art Director

Max is the Art Director of ITC, who has successfully overseen the art direction of over 50 projects, such as Gap, Carl-F-Bucherer, Alpecin, AmCham, etc. With a strong focus on UX and UI, and a deep understanding of both Western and Chinese Web Design, Max's mission is to bring ideas to life through the most captivating design, always finding the right balance between beauty, experience and conversion.