Think about your favorite product or site. It’s relevant to you. It’s fast and functions as you expect. It’s easy to use.
That last one? The one about ease of use? Underneath that delightful, satisfying user experience is a design system, a collection of visual and technical definitions that rule a product. Within that design system exist style guides, component libraries, modules and likely much more.
Style guides establish visual elements: typography, color palettes, content and imagery rules, brand patterns, logo usage, grid structures and more.
Component libraries define the visual styling rules for product components that developers rely on. Think proper labeling, clear descriptions, frameworking. Buttons are a germane case study. A component library for a button would define color, shape, size, text size, padding, default state, hover state, active state, where different buttons should be used, etc.
Modules are “sections” that get used throughout the product. They can consist of text, imagery, video, design elements, etc. Used repeatedly, modules create a consistent, expected experience.
Great for designers and developers… and users
Design systems are critical for efficient product development. Designers and developers love them. But business teams need to appreciate them too because without design systems, users get lost; they get mad. They bail. They don’t turn into revenue.
Legendary usability expert, Jakob Nielsen, defined the 10 heuristics, or “golden rules,” of user experience. Three are particularly relevant to the value design systems provide users…
Consistency and standards
People use a lot of websites. Whether they know it or not (they don’t), they’re used to industry standards. When building out design systems it’s important to take into consideration these standards so you’re not asking your user to learn new ways to achieve their objectives. Example: the industry standard for the menu is at the top of the page — either a written out list or a “hamburger” style button in the top right corner. If you decide that your menu is going to be an unlabeled circle in the bottom left corner of your page, you’re making your user re-learn how to use a website.
Error prevention
Through design systems, users start to recognize the actions they are supposed to take by following visual cues. When a user is confident in the actions they are taking, they are less likely to make errors on the site, resulting in less frustration and better usability. By providing the user with the visual cues and tools they need to properly navigate the site, you’re eliminating hurdles that never had to be there in the first place. For example, if all “next” buttons on a step form have been blue and in the bottom right corner, but all of a sudden on a different step the “cancel” button is blue and in the right corner, there is a higher chance the user will accidentally hit that instead of next, because they are trained to hit your blue button in the bottom right to keep moving forward.
Recognition, not recall
Similar to error prevention, a user will quickly start recognizing what actions they need to take on a website based on visual cues they receive. This minimizes the need for the user to relearn an action on every single page because they’ll recognize information they’ve already seen. Ultimately, this reduces their memory load and requires minimal cognitive effort which will lead to a better user experience. Revisiting the blue “next” button, you are training the user that when they need to go to the next step in the form they go to the bottom right of the page and find the blue button.
It’s about trust
Thoughtful design systems help users gain confidence. They help them get to where they need to go with minimal friction. Businesses that invest in design systems gain a leg up on their competition—simply by making things easier.
If you’re looking for a web agency in Philadelphia, Think It First has you covered. Our WordPress website design services are perfect for businesses that want to grow, and we’re excited to work with you along the way. While we offer web development in Philadelphia, we also serve businesses throughout the entire country. Reach out to our web agency in Philadelphia today to get started!
More this way
It’s Time to Stop Designing for “The Fold”
Back when newspapers reigned supreme, there was a layout concept that publishers adhered to called “the fold.” The idea was to put the most important headlines and stories at the top of the front page, quite literally above where the paper folded, in order to attract buyers. By and large, it worked.
Traditional Wireframing Sucks
More often than not, a wireframe deliverable is a bunch of boxes and some squiggly lines. It’s static and unclickable, foregoing any sense of interactivity and realness. A client looks at them and thinks… Ok… these look… fine? Best case, they trust you and let you do your thing. Worst case, they start to wonder what they’re paying for.
Want to Know the Number One Reason Content Marketing Efforts Die?
Content marketing works. It can help your business generate brand awareness, scale traffic, establish authority, build trust, inform audiences, raise money, facilitate self-education… its applications are just about (but not quite) endless. But lots of content marketing efforts die. They lose steam; they go dormant. They’re abandoned. There are a number of reasons why this happens. More often than not, though, a lack of organizational commitment is what kills a content marketing strategy.