Evolve your design skills using design patterns

As technology and the very definitions of products are rapidly changing, designers and developers need to keep up with their ability to grasp a product. We’re constantly confronted with this complexity, mixed in between different types of clients with different types of products and user needs.

To translate user needs to concepts at a fast rate, we need to develop a deep understanding about the type of product we’re designing for. In order to cope with this more easily, we prescribe a simple medicine: Sketching.

Sketching interfaces is not always an obvious feat, especially not in instances where you have a product design background, trying to understand digital interfaces, or even when you’re used to designing for the (mobile) web but never really designed a native application before. One way to overcome that hurdle is using design patterns and the principle ‘anyone can draw boxes and circles’.

Design patterns are best practices, inspired by other applications’ UI design. They’re called ‘best practices’ since they’ve been validated by way of long-term usage by their clients or because people have grown used to it due to common use by designers (comparable to a computer mouse).

Using design patterns isn’t always a sure-shot for your interface, but it’s a great starting point if you’re treading into unfamiliar territory.

Sketching to improve UX skills

When you repeatedly draw interfaces, you will gradually learn skills that go well beyond the ability of sketching. You will start feeling more comfortable in:

Turning usability issues into screens or components.

One helpful skill for user researchers is to be able to shape issues or design criticism into feasible and pragmatic UI solutions. Using design patterns over and over, you will start to grasp each of their pros and cons. This is an important stage since you will be able to match them better as solutions to specific issues. Moreover, you will be able to provide a visual solution.

Gradually, this will become more of a reflex as opposed to skimming design pattern galleries or dribbble.com for solutions to certain usability issues.

Translating your user needs or stories into features for your app.

During co-creation workshops with participants from your target group or when analysing user-testing results, it’s our responsibility to translate the insights we gather into tangible concepts. This is no menial task, especially when you’re in the middle of a workshop; it’s hard listening to the participants and visualising the solutions they propose all at the same time. You have to keep track of the users and translate their needs into relevant features. You’ll need to get used to mobile interfaces before you’re able to do this. Exercise is key!

Warm-up with design patterns

As mentioned, the quickest way into mobile design is to just start sketching. As we favour pragmatism, let’s try doing a little warm-up exercise. The following exercise has been well-received in our mobile UX workshops. Note that participants do this as a warm-up before starting a full-blown paper (mobile) prototyping exercise.

Workshop participants copying patterns using a shortlist of core features.

Workshop participants copying patterns using a shortlist of core features.

All you need is:

  • A shortlist of 3 core features or tasks, preferably from user research but assumptions will work fine at this stage - and at this stage only.
  • Note: if you just want to work on your skills, any application’s main features will do just fine. E.g. Find my contacts, find my conversations, search, etc…
  • Pick the design pattern you want to practice: navigation, form design, activity feed, detail view,… Once chosen, print out, bookmark or save the screenshots relating to this pattern. Don’t restrict yourself to the ‘easy-looking’ ones. Great sources (for mobile) are pttrns.com, mobile-patterns.com or any other design pattern gallery.
  • Drawing material: pen & paper.

The exercise is rather short, but you have to think it through:

  1. Pick which (core) features you want to implement into the pattern.
  2. Grab one of your saved or bookmarked pattern examples.
  3. Copy the example’s main structure and fit your listed main features into it. You can copy all the details you feel like drawing. What’s vital is that you make sure your core features somehow fit into this screen.

Start levelling up

While repeating this a few times, using various design patterns, you will start seeing certain do’s and don’ts. Already there? Great job! It doesn’t end there though. Here are some steps for you to consider afterwards:

  • Match your sketches to your actual content. Some patterns’ examples fit better than others for the content you’re offering. Don’t be afraid to implement your own ideas, making changes to the copied pattern to better match your content.
  • Keep your app’s flow in check. You want to keep consistency across all elements and components you’ve drawn. Also, copying a design pattern for one screen might create a gap in different screens in your flow. Keep the storyline in mind, when designing screen by screen.
You can check off design flaws early on using only sketches.

You can check off design flaws early on using only sketches.

  • Test your (paper) prototypes with your users to check if your screens actually work for them. If not, learn and iterate!
  • Usable is not 1:1 on useful. Human-centred design methods, such as co-creation workshops, are vital to check off the needs of your potential users and translate these to core features. This step should start preferably before you start thinking about the usability of a screen. If you don’t make your product relevant or useful first, thinking about usability of a useless application is…well…useless.

Beware of …

Naturally, we’re not asking you to use this exercise to start repeating design patterns mindlessly. There are also some pitfalls on design patterns to look out for:

  • Patterns can be old and outdated.
    Web and mobile design move fast. Page 3 or 4 of a pattern gallery might already contain patterns which are hardly used anymore; either because there are newer, more useful solutions or because the same pattern has received a visual or technical update (e.g. more reliant on animations) or is following new trends. Make sure you check the dates of your sources.
  • Certain patterns have always been ineffective or even evil.
    ‘Commonly used’ does not mean the same as ‘best practice’. A lot of patterns were simply widely adopted without fact-checking, leading to misuse. Be sure to do your research when in doubt or when being pressured by management. If the argument “‘but our audience is different” is put forward, your best counter is to conduct user tests.
  • Overusing patterns kills creativity.
    In the end, you want your app to be in line with your branding but also stand out in a crowd of known, popular interfaces. This uniqueness, one might argue, cannot be overcome by copying existing design patterns. This is a wholly different discussion altogether, the pros and cons of which have already been discussed many times over.

Sketch your way to insights

The bottom line to all these pros and cons is: Don’t copy without thinking. Beyond just practicing, it’s recommended to raise questions and challenge existing solutions. As long as you fact-check them. And by fact-checking I mean user testing!

At U-Sentric, we try to wield many skills at the same time, such as sketching, observation and evaluation. An essential combination, we believe, is to have the ability to translate the insights we gather from observation and capture them into sketches, showing concrete solutions. Then you evaluate what you’ve done with your target group. Repeating the loop of sketching and evaluating will one day enable you to instinctively and fluidly perform this translation.