Design Guidelines. What, Why, How
Hey, great to meet you here again. Today, I will be discussing Design Guidelines. More particularly I will be discussing what they are, why you should use them and how to make your own. It's been a while so do bear with me if this post is a little differently formated. I'm feeling it out and need to find my footing again ^_^
Because this post is quite long I cut it up in chapters so you can ctrl+f to the chapter you'd like.
Chapter 1: What are Design Guidelines?
Chapter 2: Why use Design Guideliens?
Chapter 3: How do you make Design Guidelines?
Ch 3.2: Daniël de Wit's Golden Filter
Ch 3.3: Enterprise Community Partners
Ch 3.4: My 5 steps to making design guidelines
So let's get to it shall we.
What are Design Guidelines?
If you have read my previous post about Design Principles you might already have a slight understanding of what they are but regardless now I shall define them by first looking at what others have said about them and then forming my own definition based on what I've found.
The first place I looked was Interaction Design Foundation and they seem to have a definition I enjoy for at least 50%. That 50% is as follows:
Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.
- Interaction Design Foundation (https://www.interaction-design.org/literature/topics/design-guidelines)
I really like this part of their definition for what we are discussing since I want to talk about Design Guidelines in general and theirs focused, in my opinion but also because of the rest of the page this quote was taken from, too heavily on UI related Design Guidelines. For that reason and for the sake of getting more perspectives, I looked at several different websites and articles for definitions more relevant and useful for my goal.
Design guidelines are a set of principles and recommendations that are used to ensure consistency and best practices in the design of a product, application, or website.
- Kaevin, Medium (https://bootcamp.uxdesign.cc/what-are-design-guidelines-f13ba8220c95)
Kaevin's definition is a great one and it really resonated with me. Sadly, in the rest of his post he proceeds to only use the Apple Human Interface Guidelines as an example which I think undermines his otherwise great definition of what Design Guidelines are.
Design guidelines, also known as design directives, are written statements that articulate a strategy for how you will solve your design challenge, independent of a specific solution. They translate your findings—user needs and insights— into actionable design directives.
- D.school, Stanford University (https://dschool.stanford.edu/resources/design-thinking-bootleg)
D.school has an interesting definition particularly because they use something I haven't heard of before (design directives) and something I'm very familiar with (design challenges). This definition is the one I like the most of these 3 but has one glaring issue. It says Design Guidelines are also known as Design Directives but then continues to say that the guidelines translate findings into actionable design directives. Or in other words, Design guidelines translate your findings into actionable design guidelines. This might just be a writing mistake I'm stuck on but for this reason it doesn't fully resonate with me.
So, using these definitions, my own perspective and some feedback from ChatGPT I created my own definition of what Design Guidelines are and it is as follows:
Design Guidelines are a set of written statements that describe a strategy to uphold design principles during the creation and design of products, services, and experiences, both digital and non-digital.
This definition, I think, encompasses everything to explain what Design Guidelines are in general. In this definition, I also wanted to emphasize the point that these could be used for digital or non-digital ends because during my search for definitions, and also when I received feedback from ChatGPT, there seemed to be an overemphasis on digital design guidelines. Which is fine if you want to specifically look for design guidelines in the context of digital but is not truly a general definition of what design guidelines are which some seem to say their definitions are.
The only problem I have with my own definition, is that it does not explain what design principles are and makes it slightly less accessible for those who don't know the jargon. Maybe in the future I will find or create a better definition. Sadly for now, my apologies check out my other post to learn what design principles are. :p
Why use Design Guidelines?
So, why use them? After reading all these different definitions, you might still be wondering this but hopefully not. In case you are not fully sold, the reasons to use design guideliens are threefold from what I'm seeing.
A big point for design guidelines is, as the name sort of implies, to offer guidance. Once guidelines are made they can be referred back to see what you want to achieve. It can be great in offering people new to a project a better view into where the project is heading.
Sometimes when you work on a project you can start to lose the original vision of the project. The guidelines will show you what you are trying to reach and also in a clear and more concise way than an old briefing or design principles could do.
During the project you will have to justify decisions you've made or want to make with stakeholders and doing that with guidelines makes that a lot easier. Especially so, if you previously also set up the design principles together with said stakeholders. This might help them easier visualize and connect the reasoning to the decision.
How do you make Design Guidelines?
Now that we are done with What and the Why, let's look at the How we can make some for ourselves. Sadly, this part of design guidelines is not as cut-and-dried as I'd hope it to be because most articles I found about this topic either have little to no explanation about how to make them. Most of these are tend to cling onto the standardized design guidelines from UI, like I mentioned before. (If you are interested in those you could check out: https://www.nngroup.com/articles/113-design-guidelines-homepage-usability/). But that's not what we are here for. I (and I'm assuming you too since you are reading this post) want to know how I can make some guidelines that help apply my design principles.
Luckily, not all is doomed and there are people discussing and figuring this out and I found some. Let's look at how they suggest us to do it.
D.school method
The D.school (an institute based at Stanford University that teaches people how to use design thinking) talks about design guidelines briefly in their "Design Thinking Bootleg" (https://dschool.stanford.edu/resources/design-thinking-bootleg). This is also where I got their definition from. With their definition they give 2 ways you could make design guidelines.
Turn passive research observations into active statements
You can translate your insights and observations into design guidelines by stating your findings in terms of solutions rather than observations about the user.
For example, a user’s “need to feel instrumental in creating a gift” becomes “involve the user in creating a gift.”
Reverse engineering
You can also work backwards from a potential solution to create design guidelines. Ask yourself what aspects of the solution resonates with users, and makes those aspects into guidelines/directives.
I can see how both these methods can be used to create some kind of guidelines but they seem to be very short sighted and they don't, at least explicitly, address design principles. Not talking about the principles that underlie these guidelines will make your guidelines a lot more likely to crumble when put under scrutiny.
Daniël de Wit
Daniël de Wit, a designer and interestingly also a graduate from the same bachelor I recently graduated from, invented a method that does seem to be quite useful and also does not discriminate with digital and non-digital uses. In his post, he calls this method "The Golden Filter" and uses the 3 contexts necessary for proper human-centered design. These contexts being People, Business, and Technology. He combines these contexts in an interesting way using the golden circles from Simon Sinek which talks about the Why, How, and What of businesses/products.
|
|
Basic Golden Circle |
With the information from these golden circles, you can create the golden filter. This then allows you to combine the information from both the business and people context towards principles, guidelines, and criteria.
|
|
The Golden Filter. Image source: Daniël de Wit, "The golden filter of UX
design". Accessed via
https://uxdesign.cc/design-guidelines-how-i-got-design-done-9dbb5fbac820. |
Daniël, and many others, also apply this Golden Circle method to create some sense of whatever is the focus of the golden circle. With the filter the first step is to make a golden circle for the people, the first context. By researching your users, the people, and asking them what they are looking for in the context of the project you will be able to determine some attributes they desire. These attributes can then be further questioned into what these attributes would result into, consequences. And at last, you can start to determine why they find those consequences favorable to come to the final and most center piece in the golden circle the motive or their "Why".
After this has been determined the business golden circle follows. In which the most outside layer of the golden circle, the What, is the solution followed by the strategy (how) and last the motive. The business motive consists of several different elements in this case. These being the mission statement, vision statement, and corporate values.
Using the parts from both the business and people we can then start to generate design principles. After the principles have been made he says the following:
Then we can use these principles to create design guidelines that tell us how to design. If you’re not sure, just ask users if your guidelines are in line with their consequences, or check your guidelines with the strategy.
- Daniël de Wit (https://uxdesign.cc/design-guidelines-how-i-got-design-done-9dbb5fbac820)
Which is a useful tip but once again does not give much practical insight aside from the filter on how to actually write guidelines
So, from the D.school method we got to see how we could formulate design guidelines and from Daniël we found a method to have a better overarching view of the guidelines, everything surrounding it and also how we could verify them but now I'd like to know how can I do it myself. What steps can I take to write design guidelines usable by me, you and our teams. But before I give out steps you could follow to write design guidelines I'd like to address another source I got a lot of inspiration for these steps from, and it is, to my surprise, not from a digital designer, studio or anything digital related but from a non-profit in America called Enterprise Community Partners (ECP) and they keep themselves busy addressing the shortage of affordable rental housing. What a find!
Enterprise Community Partners
ECP has a bunch of resources available for designers of residential homes and the like. One of these resources is a ~60 page document (https://www.enterprisecommunity.org/resources/design-guidelines-what-they-are-and-where-get-started) where they explain design guidelines, how to make them and how to use them so that developers and designers of housing can more effectively make housing. In this document, there is a workbook section that I like one part of because it is applicable to so much more than just real estate development.
This part discusses the setup or the "how" of going about developing design guidelines. In this part of the workbook, they give exercises you can fill out yourself but preferably with others that will help decide what the scope is of your design guidelines. The exercises focus on determining the need for guidelines within your organization, who will read and use the design guidelines, and also who will be responsible of maintaining the design guidelines which is an interesting point I hadn't considered before.
My 5 steps to making design guidelines
Now that we've taken all that in, how can we actually make some design guidelines. Well, based on everything here and my own experience you could use the following steps to make your own design guidelines that are based on actual research and goals of you and/or your team.
Step 0, Why do you need design guidelines?
Firstly, it is very important to have a good reason why you want to make guidelines. Just making the guidelines because you are following some steps won't get you very far and will also diminish your motivation to actually make some good design guidelines. So, make sure that you are making them because you and/or your team needs them. Guidelines are useful when you are done with most of your discovering research because it will be based on that.
Step 1, Define the scope of your guidelines.
This step won't take so long but is important. Make sure everyone is on the same page. If you just want to make guidelines for a certain project that is good but maybe your colleague thinks these will also be used in future projects. This will affect how you will formulate the guidelines which we will discuss in a later step.
Here you need to make the following points very clear:
- Where will these guidelines be used?
- By who will these guidelines be used?
- Who will make these guidelines? / Who will help you make them if anyone?
- When are the guidelines done? (definition of done)
- If they will be used long term, who will maintain the guidelines and make sure they are still valid?
If you can answer these questions we can go to the next step if not you might need to take some extra time to fully flesh out this part. This part will help you and anyone who works on the project now or will in the future.
Step 2, Make/understand your design principles.
This step will be quick assuming you made your design principles already
and/or understand them. If you haven't made them yet or don't understand them
I'd recommend reading
my previous post where I take a look at design principles. Once you've made them or understand them go to the next step.
Step 3, Strategize the design principles.
During this step, you will start looking at your principles "strategically". What I mean by this, is that you should start looking at what type of actions should be taken that harmonize with the principle itself. For this step, I think it is best to use an example. I will be giving this example using a principle I also used in the the post about design principles by the NN group. This principle being:
Clarity Over Popularity
We’re not an academic journal, nor a trendsetter. Our goal is to be a source of clarity and instruction, and to provide actionable advice for UX professionals that’s backed by research.
Practitioners today come from many different backgrounds and UX isn’t easy; it’s nuanced and complex. Let’s give users advice that’s clear, easy-to-digest, and concrete without introducing unnecessary jargon or confusing terminology. By doing so, we can empower designers to succeed in their jobs and make the world a better, more user-friendly place.
- Nielsen Norman Group (https://www.nngroup.com/articles/design-principles/)
Now, let's see how we can strategize this. When I read this principle, I see that it really values accuracy and clarity. Thinking about those 2 values, I think the following actions could be taken that harmonize with this principle:
1. Showing where information was taken from.
2. Steering clear from terms only understood by UX professionals (jargon).
3. Not jumping the gun on new methods and/or research finds.
These are 3 examples of actions that could be taken to strategize the principle "Clarity over Popularity". You could've thought of more perhaps but you will have to start prioritizing which actions might get you the most bang for your buck since otherwise you will end up with too many guidelines or guidelines that are too broad.
Step 4, Formulate your first draft of design guidelines
After you have looked at different ways you could apply the principle, it is time to formulate it in a way so that you from the future and others reading it will understand what they will have to do to uphold the principles. These formulations could be what you came up with at the previous steps or maybe you think you are not fully sold on them yet.
In this step you will finalize your first draft of the guidelines. Make sure
that your formulations are command sentences. This are sentences that
command/order someone to do something.
In the case of the previous example it would look something like:
1. Show the origin of information not our own.
2. Avoid jargon. Describe actions and topics so that layman could also read it.
3. Prevent hastily publishing new information.
I recommend giving them a category or group title. Usually something that relates back to the original principle you started from. This way, it is easier to understand what topic/principle your guidelines cover.
Step 5, Verify drafts & iterate
Last and certainly not least, validate, verify and iterate on them. Maybe one day your users fully resonate with the guidelines but in 6 months your userbase has changed and they don't anymore or your company's strategy has changed and goals changed. The world is a constantly changing place and hopefully your guidelines will stand the test of time but the only way to know that for sure is to validate them. This is the step that should be done. I cannot give you time for when you have to validate them again. For this, you will need to use your own judgement because many factors can influence how long you can take inbetween validations.
Hopefully, this post and all this information will help you along to making your own guidelines. Thank you for reading this post and untill the next time.
Conclusion
Now that I've done this research about design guidelines, I think I finally understand them better and know how to make them with less of a struggle. Let's go over my findings one more time.
My definition for what a design guideline is
> Design Guidelines are a set of written statements that describe a strategy to uphold design principles during the creation and design of products, services, and experiences, both digital and non-digital.
This definition, is something that I will continue to use from now on when discussing them with friends and colleagues. With this, I should at least be able to start the conversation so that we can together get to what we want to discuss. This is not all I learned with this post though. I finally have a way to make design guidelines that is explained in a way I understand it and gives practical steps. These steps being:
1. Define the scope of the guidelines.
2. Make/understand your design principles that your guidelines will uphold.
3. Strategize the design principles
4. Formulate a first draft of guidelines
5. Verify & iterate
I hope this post is as helpful and informational to read as it was for me to research. Now that we have reached the end of this post I have a question for you, the reader. Did you also struggle with design guidelines before this? How did you handle the creation of them beforehand?
Thank you for reading. Share this post and discuss it with colleagues. See you in the next one :)
Comments
Post a Comment