Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Design Systems!
You have completed Introduction to Design Systems!
Preview
A website or app might promote user interactions in a variety of ways, but typically there are four common categories of interface elements: navigation menus, toolbars, forms, and buttons.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
A website or app might promote user
interactions in a variety of ways, but
0:00
typically there are four common
categories of interface elements.
0:06
Getting from page to page or
from content section to
0:11
content section requires
a primary navigation menu.
0:15
Some pages or
sections might contain a secondary menu.
0:19
And of course,
there may be utility links or
0:24
ways to connect through
social media in the footer.
0:26
Task-driven applications,
0:30
such as those associated with Adobe,
often require a toolbar.
0:32
If tapping an icon allows the user
to rotate a shape, or drag and
0:38
drop it, the icon resides in a toolbar
rather than a primary navigation menu.
0:43
Gathering user input requires a form.
0:50
Form documentation requires
a heavy focus on accessibility,
0:53
since forms can be a challenge for
0:59
differently abled users to navigate and
submit.
1:02
Buttons are used to submit forms, but they
can also exist independently of a form.
1:06
A standalone example might be
a button to exit a modal window or
1:12
cancel a process currently underway.
1:18
Let's take a look at some documentation.
1:22
Shopify's Polaris offers particularly
thorough component library documentation.
1:26
The intro page provides both
a justification for using the components.
1:32
Designers should spend their time
problem solving rather than reinventing
1:38
existing components, and a guide for
developers new to the system.
1:43
Polaris has also
categorized its components.
1:50
If I'm looking for
form elements for example,
1:53
here is an alphabetized
list of subcategories.
1:57
Clicking Select gives me guidance for
creating dropdown menus for
2:01
three platforms, Web,
iOS, and the Android.
2:08
The Web tab provides code snippets plus
rules for labeling each form element.
2:14
The iOS and
Android tabs encourage designers to take
2:21
advantage of familiar patterns
native to the user's phone.
2:25
Most components belonging to
the United States web design system
2:31
are listed alphabetically.
2:35
Although elements that would only be
2:37
part of a form are grouped
together under form controls.
2:40
If I'm thinking about using a dropdown,
2:44
I'm first faced with a list of reasons
why I might want to avoid this pattern.
2:47
Unless I have 7 to 15
options to choose from,
2:53
a limited amount of vertical space,
labels for every option, and
2:56
have tested this drop-down on users,
I should consider a different pattern.
3:01
The drop-down code snippet
is collapsed initially.
3:07
The focus is on usability and
accessibility concerns first.
3:11
I can implement a dropdown
once I'm sure I've
3:16
made the appropriate choice for
my audience.
3:20
Looking over the form control section
of the United States web design system,
3:24
you might be saying,
wow my creativity is pretty limited here.
3:30
This brings up a quote from
Steve Krug's guide to web usability,
3:35
Don't Make Me Think.
3:39
Innovate when you know you
have a better idea, but
3:43
take advantage of
conventions when you don't.
3:47
Web forms are notoriously hard to fill
3:51
out with user frustration
causing high abandonment rates.
3:54
And think about your own
experience as a user.
3:58
Filling out forms on a federal
government website doesn't sound easy or
4:01
fun, does it?
4:07
The strictness of the United States
web design system component rules
4:08
is intentional.
4:13
Yes, visual design consistency
is part of the goal.
4:14
But those concerns are secondary
to creating a usable experience,
4:18
accessible by as many types
of users as possible.
4:24
So if you're thinking, building a form for
United States government
4:28
website isn't the place to
express my creativity, well done.
4:33
You're understanding this
documentation correctly.
4:37
If creative writing is your thing,
however, you're in luck.
4:41
In our next set of videos, you'll see
how to use design system voice and
4:45
tone documentation to capture a brand
using carefully crafted body copy.
4:50
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up