Human centered designer, specialising in interaction design, HTML & CSS
A lighting talk at Ladies that UX Manchester in March 2019.
The possibilities with patterns
I'm Cathy a Designer and Front end developer with around 12 years experience. At the moment I'm Head of Interaction Design for Defra which is the Government department for the Environment, Food and Rural affairs.
Before I wrote this talk I did a bit of Googling to find a good definition for design patterns. This is what came up the most:
"Reusable solutions to common design problems". The word reusable is probably the most important part, but it doesn't really explain what a pattern is.
I think this does a much better job of communicating what a pattern is. It's from Brad Frosts book Atomic Design and shows the varying complexity, size and scope of patterns. From Atoms, like buttons and links to full pages.
It also shows the value design patterns can bring to a project, adding familiarity, consistency, building trust and reducing design time.
All really useful things especially in large organisations.
So, last summer I wrote this, "The Problem with Patterns". I wrote it based on my own experiences working with pattern libraries over the years, mostly because I was feeling frustrated.
I got quite a lot of positive feedback on Twitter from other designers who had similar experiences and were also feeling frustrated.
I wont go into the full article here but some key points were:
Badly designed services - Using design patterns does not guarantee good design
Lack of context - Sometimes context is sacrificed in favor of reuse.
User needs get lost, or collated to make a set of assumed needs
Finally there can be a tendency for design to dictate content, when the content should always come first
For the first point, badly deigned services take from design as an example. In most cases we might choose to priorities speed getting the user to their end goal in the fewest possible clicks.
However if the user is under stress, which can be anything from a bad Internet connection, being in a crowded load environment or just trying to juggle multiple tasks at the same time, the form should then priorities minimizing congestive load over speed. Giving the users simpler options and guiding them through the form
Design decisions like this can not be pre determined using design pattrens. Its how and why these patterns are stitched together that creates a great design.
The second point was about context. Having a library of design patterns can sometimes incentivise designers to use them. Take date pickers for example. Here we have two very different examples.
The first example is from a holiday booking site where choice is probably the most important part of the service. The other is form an emergency dentist appointment, here choice is no longer the most important aspect. You need to see the first available appointment with minimal choices and no distractions.
If we rely to heavily on design patterns then these two very different examples may not exist.
Patterns should never sacrifice user context for efficiency or consistency. If they do then we lose the desired and intentional differences that make services work.
The important thing to remember is that users do not want to 'pick a date' they want to book a holiday or to get rid of their irritating toothache.
Point 3 was about user needs. This is a post from Carrie Bishop from FutureGov about a rise in Citizen portals. My favorite line from the post is this
"I really wish I had one place to see all of my interactions with the council, said noone, ever!"
This is a really good example of user needs getting lost, from "I want to check the status of my application" or "I need to update my contact details" to an all singing all dancing citizen portal that nobody really wants.
This is even more likely to happen if patterns for dashboards or registrations already exist in the organisation.
The final point was content, Eli Montgomery tweeted last month "Good design makes content work" So a good design pattern should allow that content to work in any situation.
As you can see from the image the navigation pattern works on a desktop and on mobile because the media query kicks in, but not when placed in a smaller container.
Thinking back to the original definition there not really all that reusable.
So, this talk was not supposed to be about problems.
So how can we keep a focus on users unique needs and situations, but still utalise the library of deign patterns that almost everyone has thees days?
Firstly I think we need to accept that not every piece of design is a pattern. On the left of this slide is a fairly standard date picker which was tested in the "Get a Fishing License Service" It did not go well!
Anglers buying a 24-hour license are usually night fishing, so we needed absolute clarity around 12AM and 12PM.
This was about two years ago and I learned that 12PM is not midnight. The design on the right worked really well for Anglers, but I wouldn't call it a reusable pattern.
Its also ok not to have a pattern library at all, sharing nothing is a lot better than sharing the wrong things.
Secondly, build a community, This is probably one of my favorite tweets ever!
If people feel part of something then they are much more likely to both use and contribute to the library. You also end up with better patterns, with much more real world testing.
This is something that Gov.uk do really well, they even have a full page in their design system dedicated to community. They make it really clear that evidence based contributions and improvements are welcome from anyone.
I have no idea what the Amen break is or how to pronounce it but i love how this post compares design patterns to music samples.
Patterns are not design laws that need to be stuck too, they should be treated as starting points or a base line and modified to meet the needs of your users.
This post was written by Dave House and is on Medium.
This slide is taken from a talk by Jen Simmons at An Event Apart last year. The title of the talk was "Everything you know about web design just changed"
In the talk she discuses a move away from layout based design towards a more flexible content first approach.
CSS like flex box, Grid and multicolumn allow us to build patterns without constraints and without media queries, making the really reusable unlike the navigation example we saw earlier.