User Experience & User Interface Design Patterns 2017

The web is in a constant state of flux, as quick as one pattern becomes common place it is replaced by an evolved version of itself or by another feature entirely. Users become influenced by the interfaces and features they interact with and over time develop expectations based on these experiences. It is therefore vitally important to look at key trends and patterns emerging within this area to continue to give our client’s users, the most intuitive experience possible while continuously improving the engagement of their brand’s personality.


UX Patterns

In 2016 there were two patterns that emerged within the area of user experience design that have continued into 2017, these being: ‘Optimised Interstitial Anxiety’ and ‘Digital Trust Anxiety’. These issues revolve around the theme of anxiety within the user and can cause lack of engagement with your site and therefore incur drop offs. So it is important to assess why these exist and how to solve them.

Optimised Interstitial Anxiety

Optimised internal anxiety is a persistent issue within all forms of digital design. It is the anxiety a user experiences when they no longer feel in control i.e. a user having to wait a long time after clicking an option due to a slow load. The more these types of interactions build up, the higher the interaction cost and the more anxiety the user feels, increasing the probability that they will leave your site.

Digital Trust Design

Digital trust design involves designing digital products in a manner that prevents the user from trusting the offered service. With sectors such as e-commerce and banking living on the web, trust has never been more important. Without it, the likely-hood of users dropping off is heavily increased.


UI Patterns

Having looked at some of the underlying issues regarding user experience on the web, there are new solutions that are coming into fruition which are set to fix these problems and improve brand experience.

Infinite Scrolling Pages

Infinite Scrolling Feed — https://dribbble.com/shots/1759375-Infinite-Scrolling

Infinite scrolling instead of pagination can be a more seamless experience for consuming large amounts of content when used in the right context. It has been made popular and common place by social media platforms such as Facebook and Twitter, as users are becoming accustomed to instantaneous and endless amounts of content.

Long Form scrolling in E-Commerce Site with ‘Load More’ Button —https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/

To be successful, infinite scrolling should be used in conjunction with a ‘load more’ button in order to increase user focus on content and to prevent the footer being forever pushed under the fold. The first amount of content should be around two scrolls, long before presenting the load more button. These have been seen to work well in an e-commerce environment, where there are large amounts of content to go through.

Motion & Micro Interactions

Twitter Favourite Button— https://dribbble.com/shots/1884504-Twitter-Fav

The way we think about personality is closely intertwined with how someone moves, this translates into motion design. Movement within a design conveys a sense of personality, and creates a sense of delight for the user.

Loading animation — thomas.vanhoutte.be/miniblog/android-lollipop-animated-loading-gif/

From a user-experience perspective, micro-interactions act as a form of visual feedback for the user and their actions. Micro-interactions let users know what is happening, what has happened, and what will happen next as they interact with the interface.

Expressive Typography

Expressive typography communicating brand personality — nurturedigital.com

Typography is becoming more expressive, bigger and bolder. This allows brands to fully express their personality and differentiate themselves from their competitors. Dynamic colours and textures can be added to create more engaging content.

Vibrant Colours

Use of Vibrant Colours — https://dribbble.com/shots/3036284-Stripe-Radar

Colours on the web are becoming brighter, bolder and generally more expressive. As well as improving brand expression, higher contrasts between colours can improve accessibility. This is aided by technological advancements in monitors and devices with screens that are more apt at reproducing richer colours.

Use of Video

Video on Homepage— https://dribbble.com/shots/1985144-Re-Designing-Travel-A-New-Skillshare-Class

Video is becoming ever more prevalent across the web. This is due to both the engaging nature of video and improvements in technology. Video allows brands to effectively engage with their users and is now being used for marketing practices, storytelling and product placement. It is now the majority of internet traffic.

Cards Based Interfaces

Card Based Page Allows For Overview of Each Topic — https://www.uxpin.com/studio/blog/web-design-trends-analyzed-the-playful-power-of-card-ui/

Cards are becoming commonplace across the web, due to their ability to collate various types and amounts of content together into digestible pieces. They provide an overview and introduction into a topic without the user having to go any further. They are infinitely manipulatable which allows for a consistent experience across all device sizes.

Landing Pages

Landing Page for Labs for InVision — https://dribbble.com/shots/2506573-Introducing-InVision-LABS-Tools-to-solve-the-design-challenges

Landing pages are being used to deliver specifically directed messages to different audiences, in an attempt to increase product awareness and understanding, and thus conversion rates. These landing pages exist through a link that is given to users and appears to exist outside the realm of the site. This is done to prevent distraction and prevent users dropping off.


Show your support

Clapping shows how much you appreciated David Sheridan’s story.