Exploring User Interface Libraries4:57 with Anwar Montasir
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.
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 up