• Design

Design Patterns

Solutions, Aesthetics and Common Sense.

Design patterns represent solutions to problems we meet when creating user interfaces or experiences. We are talking about techniques such as filtering, wizards, pagination, thumbnails, components. Used properly, they can make our life much easier when we get stuck on a design based on a certain flow.

These patterns can help us offer consistency and efficiency when the user visits a website or interacts with a mobile application, but using them doesn’t guarantee instant success. We must be logical, precise and patient when deciding which pattern to use for which problem we encounter.

We get in touch with design patterns every single day by simply surfing the internet. The most common ones reveal themselves as tabs for navigation, image galleries, product pages (essential for each e-commerce website), login/register forms, CAPTCHA, ratings and so on.  We surely interacted with these elements at least once without even noticing.

The common form

Let’s take for example some clear scenarios when the user is facing the challenge to fill online forms for newsletter, basic contact or CV upload.

For instance, it’s easier to offer the user a calendar date-picker for entering the date, rather than let him/her manually type the day, month and year in a certain format (DD-MM-YYYY or MM/DD/YY). It’s more convenient to offer a file uploader rather than copy/pasting the whole local address where the file is stored. There are endless examples.

CFR calendar picker redesign
Calendar picker for departure date on CFR Calatori website

The search

Now, let’s take the scenario where we search a line of products and receive the results. The thing we are trying to untangle is to help the users perform a very quick search without any hustle. For starters, we use the autocomplete or autosuggest whenever  possible. This way, we will gain speed when entering the input data and preventing future errors. We cannot read the mind of the user, but we can offer him/her a starting point depending on how much we know about them. Do they prefer some special kind of clothing? Are they bargain-hunters or one-time shoppers? We will only know once we put the user on the right path of their journey.

Autosuggest search three.co.uk
THREE.CO.UK – autosuggestions for searching products and help/support information

Pagination versus infinite scroll

In many cases, it is possible to gain in return a considerable amount of search results. Now what? Shall we display all of them or use pagination? If we choose the first, we risk increasing the loading time of the page and therefore creating a negative impression for the user. One the other hand,  pagination may come in handy, offering the user a limited number of results and inviting him/her to discover the rest of the products. Moreover the user can apply filters and sort the results to refine the search. Refining the search may be a useful sales tool similar as a grocery store may want to promote their own product labels, display the cheapest products which are on discount, push specific products which will soon expire or show  their top selling products.

Dynamic loading is also a viable alternative way to display in a friendly manner a high volume of search results. In other words, when we get to the bottom of the first result page,the next 20 results are loaded automatically. This pattern helps the user navigate smoothly through the products, especially when applying filters. When taking such approach into consideration we must be aware of the fact that we risk meeting the infinite scroll of doom.  Going back to where the products were first displayed may become a little annoying. Luckily, we can apply gimmicks such as Return to top or we can group the results in such manner that we will remember the previous results (“Displaying 15-35 out of 200 products”).

As Easter Egg, in case you didn’t know it, 9gag wears this name because it offers sets of 9 gags per loading.

9gag.com infinite scroll
9GAG.COM – infinite scroll & return to top

Trend setters

We can choose to use patterns already created or we can try to define our own approach, refining what was in front of our eyes this whole time. Think of Pinterest and their way of displaying the content using sections with variable height. It’s a good example of what it means to take both risk and responsibility. What was at first a controversial idea became a trend. When I saw for the first time Myspace’s redesign, all I could think was ‘This screams Pinterest!’

Pinterest.com card posts
Pinterest.com
Myspace.com card posts
MySpace.com

Dark patterns

Of course, the way we apply patterns depends highly on us and us alone. We can use them to help users achieve their objectives and turn an initial one-time visit into a recurrent one.

On the other hand, we can be a bit sneaky and use patterns in our favor. When taking such approach, we are dealing with dark patterns. These forces of evil, disguised under the impression of polite invitations, can trick you into giving  away your credit card details just for a simple free trial opportunity.  An even more vicious example is when you overwhelm the user with unwanted ads and the only way to get rid of them is by clicking on them or allow pop-ups. What can I say, ‘Congratulations, you sneaky bastard!’ Yes, you gained an extra visit/hit/like/download, but  whatever you’re after, you still missed the point. You didn’t get their trust and that’s a long-term win.

Adobe dark pattern
Download Adobe Flash Player pre-bundled with McAfee Security Scan Plus, if you don’t pay attention.

What about mobile?

We live in an age where we don’t have to sit at the comfort of our chair and desk to gain access to information. All those resources are available at the palm of our hands via phone, tablet or hybrid (phablet). Moreover we will have special glasses and smart watches.

It’s not enough to think just for the desktop anymore – nowadays mobile comes first. How can we adapt a breadcrumbs pattern on a 320pixel width resolution? How do we keep tab consistency from one screen size to another without damaging the user experience? Don’t get me even started with the pretentious Retina Display. Why? Think of the level of details you need to keep an eye for, just to keep the quality crisp and clear. As solution we can add graphics to both displays (Retina and non-Retina). This just gives a bigger headache, but in the end the experience is consistent and satisfying for the users.

Now, with the battle of the giants at loose (Apple, Google, Microsoft etc) to create digital products for mobile devices by just scaling them, it’s simply not enough. We need to take into consideration factors such as visual style, operating system integration and migration. For example, an app on iOS may look and feel different than on WindowsPhone even tough, technically it should be the same product, but just on different ecosystem – it all goes down to the user’s emotions and perceptions on how the app is received. If a brand respects itself high enough, and has the ability do it,  it will try to deliver a full and complete experience across major platforms.

Evernote android ios windows phone
From left to right: Evernote for Android, iOS, WindowsPhone (also available on Blackberry, WebOS, Windows8, iPad, iPod, MacOSX).

Conclusions

Design  and technology advance together. We wouldn’t have had skeuomorphism, if it weren’t for Apple. Flat user interfaces would still be a minimalist approach, if Microsoft didn’t launch Windows8 with the ModernUI. And let’s not forget Apple with iOS7. Or Booststrap and its responsive movement. As you can see, it’s our duty as designers to keep up with current trends and innovations. It all resumes to our common sense.

If you liked what you read subscribe to our newsletter to get fresh articles and a list of curated links about marketing, design, ux and business.

If you have an interesting web project sends us a message and let’s get in touch.

  • Tags: design patterns, ui, ux