Design Guidelines: Efficient, Consistent Design
An individual review article for Software Engineering Project UI 2020 course.
Worried about a messy or inconsistent design? This is where design guidelines step in to save the day. Design guidelines help you have efficient and consistent design throughout your application. They help guide the overall style and flow so that you don’t repeatedly think about things like, what colour should this button be? or what size font should I set this text?
What is it exactly?
As defined by interaction-design.com, design guidelines are guidelines on how to implement design principles such as learnability, efficiency and consistency in order to let your application have designs that meet and exceed user needs. These guidelines fall into these categories:
- Style
Refers to matters such as the colour palette, logos, etc. - Layout
Refers to the placing or structure of components, such as using a grid structure. - UI Components
Refers to the components of the design, such as buttons, icons, etc. - Text
Refers to all text aspects of the design, such as font, text content, etc. - Accessibility
Refers to the ease of access of a feature or service provided, such as how this page can be navigated into. - Design Patterns
Refers to the use of recurring components to enhance consistency in the design, such as the use of breadcrumbs design pattern in forms.
Design guidelines are different from design principles and design rules. Design principles is more of the general directions. Design guidelines talks about how to approach those directions and use them to decide the design rules. Then, design rules are straightforward, direct instructions. Design guidelines can be viewed subjectively and are used differently when moving to the rules. Different designers might have different interpretations of the guidelines. Here is an example taken from interaction-design.org:
- Design principle: Provide plain-language error messages to pinpoint problems and likely solutions.
- Design Guideline: Write large-lettered, jargon-free text in web-safe font. Use short sentences and draw users’ attention to causes and remedies.
- Design Rule: Use 20-pt, black Georgia on lavender background (#e6e6fa Hex). Put instructions in bold.
Why is it helpful?
- Consistency
By following a standard design guideline, design of the application will remain consistent. This consistency leads to other benefits. - Usability
Consistency not only adds aesthetic, but improves flow. This is because the users will be able to be familiar with the application faster and recognize elements such as buttons faster. This ultimately improves usability. - Efficiency
The development team will be able to have faster workflow since having standard guidelines means having to spend less time thinking about the style and more time implementing the code. - Productivity
Since more time is spent on code implementation, the amount of work and product progress will be faster. This means the workflow becomes more productive since more work is done, instead of going back and forth in confirming the design specifications.
Implementation in bisaGo application
Since this topic is about following design guidelines, it is best that we dive into how I follow my team’s application’s design guidelines
First of all, what is bisaGo? We are an application that hopes to facilitate beneficial information about public facilities that aids people of disability. Our social mission is to help provide people of disability easier access to public facilities that can accommodate their respective disabilities.
Our Design Guidelines
When doing my part in developing the front-end of bisaGo from each Sprint PBI, I always refer to existing designs from already established components or following the provided application’s UI design kit which is made using figma. Our existing design guidelines and rules includes (but are not limited to):
- We use Comfortaa and Muli as our fonts, with a defined colour palette and designed icons. Our components such as logo, button designs and form designs are also there:
- Our personas:
From these personas, the adjustments made to the components I developed were according to those motivations and frustrations. For example, since Muhamad Jake has a frustration for cluttered content, I make sure each components have adequate use of white space. Some motivations also revolve around clear and concise displaying of information, so the information is made sure to be displayed in a way that is as brief, but meaningful, as possible and easily readable. There are also a couple mentions for bright colour scheme, and since the palette we show has appropriately bright and aesthetic colours, I make sure the components we have are using those colours.
Other Implementation methods
Other ways I follow the design guidelines when implementing the design and features of the application is by using and/or referencing existing components in the codebase.
- Using the colours and spacing that have been defined already
- Using existing form components. In the left, there are already created widgets that act as form components. When making a form page, instead of creating new widgets inline, those form components are used in order to keep forms consistently designed.
- Making sure the finished UI style is according to, aside from current guidelines, previously finished pages. In the following screenshots, the left is an already finished form page, the right is another form page that I was doing at the time. I made sure the general UI style is as similar as possible, by using all the methods mentioned already.
Lessons Learned
From working with design guidelines in bisaGo, I learned that making one must not be an easy task. The agreements and establishing of guidelines that conforms to an application’s vision and its users require good analysis.
But once those guidelines have been established, I felt the benefits that come with having a design guideline. The design becomes easily consistent throughout the application, which has been discussed to improve usability and efficiency of bisaGo. This consistency results in a visually pleasing look for the application.
Not only is the usage efficient, but my workflow becomes efficient as well, since coding the components no longer require extra time determining how the design will be, e.g. colour, font, button shape, etc. This efficiency leads to a more productive work output since less time is spent discussing back and forth the designs that should be, and more time doing the code implementation.
The struggles I encountered in developing the application was sometimes I still experience minor confusion in which font size I should use in specific situations, as well as height and width of some components at times. This is because I could not find the guidelines that fit those situations. To overcome this, I go over all the existing pages and find sections that are similar to my situation and follow them. Another way I overcome this is to consult other team members and confirm with the PO, e.g. of my chosen font size. Sometimes I also have my own design preferences of which I am tempted to follow instead. Of course, I eventually still follow the design guideline since they are there for a reason.
Thanks for reading!
— Wilson
References:
