{"id":14101,"date":"2016-06-15T19:28:57","date_gmt":"2016-06-16T02:28:57","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14101"},"modified":"2024-09-09T07:33:21","modified_gmt":"2024-09-09T14:33:21","slug":"8-user-control-ui-patterns-worth-using","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/","title":{"rendered":"8 User Control UI Patterns Worth Using"},"content":{"rendered":"<p>When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years.<\/p>\n<p>In this piece, we\u2019ll explore examples and best practices for the following patterns:<\/p>\n<ul>\n<li>Drag &amp; Drop Actions<\/li>\n<li>Flagging\/Reporting<\/li>\n<li>Discoverable Controls<\/li>\n<li>Overflow Menus<\/li>\n<li>Context Menus<\/li>\n<li>Direct Manipulation<\/li>\n<li>WYSIWYG Editors<\/li>\n<\/ul>\n<p>Let&#8217;s explore popular techniques for letting users manipulate content the way they need.<\/p>\n<h2>1. Drag &amp; Drop Actions<\/h2>\n<p><strong><a href=\"https:\/\/drive.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Drive<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14102\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image34-505x300.png\" alt=\"image34\" width=\"505\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image34-505x300.png 505w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image34-768x456.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image34-1024x608.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image34.png 1600w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/p>\n<p><a href=\"http:\/\/www.deviantart.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>DeviantArt<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14103\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image17-618x300.png\" alt=\"image17\" width=\"618\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image17-618x300.png 618w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image17-768x373.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image17-1024x497.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image17.png 1276w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/\"><strong>UXPin<\/strong><\/a><strong> (<\/strong><a href=\"https:\/\/www.uxpin.com\/photoshop-sketch-import.html?utm_source=Web%20UI%20Design%20Patterns%202016&amp;utm_medium=ebook&amp;utm_campaign=Web%20UI%20Design%20Patterns%202016\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Photoshop &amp; Sketch integration<\/strong><\/a><strong>)<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14104\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image04-1-485x300.png\" alt=\"image04\" width=\"485\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image04-1-485x300.png 485w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image04-1-768x475.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image04-1-1024x634.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image04-1-290x180.png 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image04-1.png 1404w\" sizes=\"auto, (max-width: 485px) 100vw, 485px\" \/><\/p>\n<p><a href=\"https:\/\/trello.com\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Trello<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14105\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image13-186x300.png\" alt=\"image13\" width=\"186\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image13-186x300.png 186w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image13.png 289w\" sizes=\"auto, (max-width: 186px) 100vw, 186px\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>Moving and organizing content is too much effort.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>The drag-and-drop functionality is a preferred method of organization for most users: it\u2019s intuitive because it\u2019s based on reality, and often something user try instinctually when first using a UI.<\/p>\n<p>Drag-and-drop provides a level of direct manipulation that other methods can\u2019t match. While it\u2019s more organic with the gesture controls of mobile, it has already become ingrained on desktop sites as the most effective way to rearrange items in a list, or move documents from one place to another.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>Give some visual indication that drag-and-drop is available. This could be something obvious like Google Drive\u2019s large notification, or it could be more inconspicuous, such as changing the colors of the window\u2019s borders.<\/li>\n<\/ul>\n<ul>\n<li>For responsive web apps, the drag-and-drop action in the desktop version helps create a snappier design and strengthens consistency across mobile devices.<\/li>\n<\/ul>\n<h2>2. Flagging\/Reporting<\/h2>\n<p><a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pinterest<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14106\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image30-436x300.png\" alt=\"image30\" width=\"436\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image30-436x300.png 436w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image30-768x529.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image30.png 774w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/p>\n<p><a href=\"https:\/\/www.tumblr.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Tumblr<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14107\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image22-194x300.png\" alt=\"image22\" width=\"194\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image22-194x300.png 194w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image22.png 225w\" sizes=\"auto, (max-width: 194px) 100vw, 194px\" \/><\/p>\n<p><a href=\"https:\/\/www.airbnb.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Airbnb<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14108\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image33.png\" alt=\"image33\" width=\"571\" height=\"178\" \/><\/p>\n<p><a href=\"https:\/\/www.etsy.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Etsy<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14109\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image19-700x33.png\" alt=\"image19\" width=\"700\" height=\"33\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image19-700x33.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image19-768x37.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image19.png 860w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>Inappropriate content gets in the way of user task flows.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Let users report inappropriate content (or other users) for administrator review and removal. Inappropriate content could mean a variety of things:<\/p>\n<ul>\n<li>Obscene content, whether images or text<\/li>\n<li>Offensive, insulting, or bigoted content<\/li>\n<li>Content that is mislabelled, misplaced, or categorized incorrectly<\/li>\n<li>Spam and solicitations<\/li>\n<li>Violations of site policy<\/li>\n<li>Copyrighted work<\/li>\n<li>Descriptions\/solicitation of illegal acts<\/li>\n<\/ul>\n<p>This pattern takes the pressure off you to regulate every piece of content that comes through your site, and gives the users themselves some authority, which they appreciate.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>The option to flag or report is essential for sites with user-generated content, but it doesn\u2019t have to be stand out. Having a small flag icon in the corner (<a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pinterest<\/a>), or even tucking the option in a pull-out menu (<a href=\"https:\/\/www.tumblr.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Tumblr<\/a>) are acceptable.<\/li>\n<\/ul>\n<ul>\n<li>If the questionable content was posted directly on the user\u2019s page, the action of flagging\/reporting can also double as removing it, saving them an extra steps.<\/li>\n<\/ul>\n<h2>3. Discoverable Controls<\/h2>\n<p><a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pinterest<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14110\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image15-270x300.jpg\" alt=\"image15\" width=\"270\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image15-270x300.jpg 270w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image15.jpg 496w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/p>\n<p><a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Spotify<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14112\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image00-480x300.png\" alt=\"image00\" width=\"332\" height=\"207\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image00-480x300.png 480w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image00-768x480.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image00-1024x640.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image00-290x180.png 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image00.png 1440w\" sizes=\"auto, (max-width: 332px) 100vw, 332px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14111\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image35-480x300.png\" alt=\"image35\" width=\"334\" height=\"209\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image35-480x300.png 480w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image35-768x480.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image35-1024x640.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image35-290x180.png 290w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image35.png 1440w\" sizes=\"auto, (max-width: 334px) 100vw, 334px\" \/><\/p>\n<p><a href=\"http:\/\/imgur.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>imgur<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14113\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image16-471x300.jpg\" alt=\"image16\" width=\"471\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image16-471x300.jpg 471w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image16.jpg 546w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/p>\n<p><a href=\"https:\/\/medium.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Medium<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14115\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image24.png\" alt=\"image24\" width=\"674\" height=\"203\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>Displaying controls for each piece of content clutters the screen.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Hide the controls until they\u2019re needed. Discoverable controls (a.k.a., hover or hidden controls) are one of the most useful UI patterns, and widely adopted. They are so popular, in fact, that if users are confused, they will now hover over questionable items expecting something to appear.<\/p>\n<p>Discoverable controls are an effective space-saver without sacrificing user functions.<\/p>\n<p>This pattern also makes the controls more comprehensive, especially together with the card grid (a common pairing). Discoverable controls make it clear which card the controls apply to. Universal controls can get confusing with multiple posts, so having the controls appear within the post itself clears this up.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>A practical necessity for the cards layout, when the user is able to interact in multiple ways with each card. Controls reveal themselves upon hover for desktop and tap for mobile.<\/li>\n<\/ul>\n<ul>\n<li>Avoid using discoverable controls for essential actions, as they\u2019re always a chance they\u2019ll go undiscovered. As a rule of thumb, ask yourself if users can still enjoy the interface without these controls \u2014 if so, it\u2019s safe to hide them.<\/li>\n<\/ul>\n<ul>\n<li>For more information, interaction design expert Dan Saffer<a href=\"http:\/\/www.slideshare.net\/dansaffer\/the-new-era-of-non-discoverability\" target=\"_blank\" rel=\"noopener noreferrer\"> discusses modern solutions for discoverability<\/a>.<\/li>\n<\/ul>\n<h2><strong>4. Overflow Menus<\/strong><\/h2>\n<p><strong><a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Spotify<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14116\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image18-440x300.png\" alt=\"image18\" width=\"440\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image18-440x300.png 440w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image18-768x523.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image18-1024x698.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image18.png 1481w\" sizes=\"auto, (max-width: 440px) 100vw, 440px\" \/><\/p>\n<p><a href=\"http:\/\/www.aol.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>AOL<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14118\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image11-220x300.png\" alt=\"image11\" width=\"220\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image11-220x300.png 220w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image11.png 429w\" sizes=\"auto, (max-width: 220px) 100vw, 220px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14117\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image27-220x300.png\" alt=\"image27\" width=\"220\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image27-220x300.png 220w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image27.png 427w\" sizes=\"auto, (max-width: 220px) 100vw, 220px\" \/><\/p>\n<p><a href=\"https:\/\/www.behance.net\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Behance<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14119\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image08-1-328x300.png\" alt=\"image08\" width=\"328\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image08-1-328x300.png 328w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image08-1.png 593w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>Too many options are cluttering the screen.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Move the extra options to a second menu. Overflow menus are a smaller, more manageable alternative to slideouts.<\/p>\n<p>Overflow menus present all the secondary options that aren\u2019t necessary and keep them hidden unless they\u2019re needed. These could hide links (like the extra page links in<a href=\"http:\/\/www.aol.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> AOL<\/a>\u2019s grid icon) \u00a0showcase controls, as with<a href=\"https:\/\/www.spotify.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Spotify<\/a> or more detailed features (like the advanced search in<a href=\"https:\/\/www.behance.net\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Behance<\/a>).<\/p>\n<p>In fact,<a href=\"https:\/\/www.behance.net\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Behance<\/a> demonstrates the ideal use of the overflow menu: detailed search is a useful but not primary feature, and so can be hidden from the main screen.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>Animating the appearance of an overflow menu, such as sliding out, adds weight to it and reinforces the connection with the triggering element.<\/li>\n<\/ul>\n<ul>\n<li>Treat overflow menus as slideouts, but smaller. The same rules apply to both, such as only including secondary content and using recognizable icons.<\/li>\n<\/ul>\n<\/section><section class=\"related-books-section\"><h3>Grab design ebooks created by best designers<\/h3><p class=\"section-desc\">All for free<\/p><ul class=\"related-books-list\"><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/prototyping-process-fidelity-guide\/\" class=\"action-get-ebook\" data-name=\"The Guide to Prototyping Process &#038; Fidelity\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/book-knowledge-3-262x375.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"book knowledge 3\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/book-knowledge-3-262x375.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/book-knowledge-3-210x300.png 210w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/book-knowledge-3.png 332w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/prototyping-process-fidelity-guide\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"The Guide to Prototyping Process &#038; Fidelity\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-2015-2016-digital-products\/\" class=\"action-get-ebook\" data-name=\"UX Design 2015&nbsp;&#038;&nbsp;2016\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge-262x375.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"book knowledge\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge-262x375.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge-210x300.png 210w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/book-knowledge.png 332w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/ux-design-trends-2015-2016-digital-products\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"UX Design 2015&nbsp;&#038;&nbsp;2016\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"action-get-ebook\" data-name=\"Web UI Design Best Practices\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web UI Design Best Practices\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices.jpg 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-UI-Design-Best-Practices-210x300.jpg 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-best-practices\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Web UI Design Best Practices\">Download<\/a><\/li><li><figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" class=\"action-get-ebook\" data-name=\"Free Ebook: Web Design Trends 2016\"><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-Design-Book-of-Trends-2015-2016.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web Design Book of Trends 2015 2016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-Design-Book-of-Trends-2015-2016.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-Design-Book-of-Trends-2015-2016-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/a><\/figure><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" class=\"btn btn-ghost action-get-ebook\" data-name=\"Free Ebook: Web Design Trends 2016\">Download<\/a><\/li><\/ul><\/section><section class=\"related-books-section-single\"><section class=\"post-content-wrapper\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"262\" height=\"375\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-Design-Book-of-Trends-2015-2016.png\" class=\"attachment-ebook-cover size-ebook-cover wp-post-image\" alt=\"Web Design Book of Trends 2015 2016\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-Design-Book-of-Trends-2015-2016.png 262w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2015\/09\/Web-Design-Book-of-Trends-2015-2016-210x300.png 210w\" sizes=\"auto, (max-width: 262px) 100vw, 262px\" \/><\/figure><article><h3>Do you want to know more about UI Design?<\/h3><p>Download 'Free Ebook: Web Design Trends 2016' <span>FOR FREE!<\/span><\/p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-trends-2015-2016\/\" class=\"btn btn-flat btn-darker action-get-ebook\">Download e-book for free<\/a><\/article><\/section><a href=\"#closeEbookPanel\" class=\"icon-close action-close-ebook-panel\">Close<\/a><\/section><section class=\"post-content-wrapper\">\n<h2><strong>5. Context Menus<\/strong><\/h2>\n<p><a href=\"https:\/\/www.google.com\/drive\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Google Drive<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14120\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image09-1-239x300.png\" alt=\"image09\" width=\"239\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image09-1-239x300.png 239w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image09-1.png 394w\" sizes=\"auto, (max-width: 239px) 100vw, 239px\" \/><\/p>\n<p><a href=\"https:\/\/mail.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Gmail<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14121\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image03-1.png\" alt=\"image03\" width=\"423\" height=\"112\" \/><\/p>\n<p><a href=\"https:\/\/www.dropbox.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Dropbox<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14122\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image29.png\" alt=\"image29\" width=\"256\" height=\"294\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>Certain contextual controls clutter the screen view.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>A specific kind of hidden controls similar to overflow menus, context menus offer contextual controls, specific to certain types of content. These are typically activated by right-clicking.<\/p>\n<p>The controls within context menus change depending on the content.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>Use common tasks for the site so that the user does not have to return to the toolbar every time they wish to use them.<\/li>\n<\/ul>\n<ul>\n<li>As a default, CRUD (create, read, update, delete) functions work well<\/li>\n<\/ul>\n<section class=\"uxpin-trial-widget\"><h2>Join the world's best designers who&nbsp;use UXPin.<\/h2><span class=\"white-info\">Sign up for a free trial.<\/span><a href=\"https:\/\/www.uxpin.com\/sign-up\" class=\"btn btn-flat sign-up-btn white\">Try it for free!<\/a><\/section>\n<h2>6. Morphing Controls<\/h2>\n<p><a href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>YouTube<\/strong><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/\"><strong>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14124\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image01-1-529x300.png\" alt=\"image01\" width=\"529\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image01-1-529x300.png 529w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image01-1.png 571w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14123\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image32-537x300.png\" alt=\"image32\" width=\"537\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image32-537x300.png 537w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image32.png 582w\" sizes=\"auto, (max-width: 537px) 100vw, 537px\" \/><\/p>\n<p><a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Pinterest<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14125\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image26-348x300.png\" alt=\"image26\" width=\"348\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image26-348x300.png 348w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image26.png 659w\" sizes=\"auto, (max-width: 348px) 100vw, 348px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14126\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image06-1-347x300.png\" alt=\"image06\" width=\"347\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image06-1-347x300.png 347w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image06-1.png 660w\" sizes=\"auto, (max-width: 347px) 100vw, 347px\" \/><\/p>\n<p><a href=\"http:\/\/imgur.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>imgur<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14127\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image21-700x33.png\" alt=\"image21\" width=\"700\" height=\"33\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image21-700x33.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image21-768x36.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image21-1024x48.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image21.png 1033w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14128\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image05-1-700x32.png\" alt=\"image05\" width=\"700\" height=\"32\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image05-1-700x32.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image05-1-768x35.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image05-1.png 1017w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><a href=\"https:\/\/www.quora.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Quora<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14130\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image20.png\" alt=\"image20\" width=\"548\" height=\"134\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14129\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image14.png\" alt=\"image14\" width=\"550\" height=\"127\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>Some controls don\u2019t need to be displayed at the same time, and clutter the screen.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Morphing controls save screen space and make a more logical interface. The most obvious example, from<a href=\"https:\/\/www.youtube.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> YouTube<\/a> and almost every video site, is the play button that becomes a pause button \u2014 the play and pause functions never need to be displayed simultaneously.<\/p>\n<p>This pattern works great for usability, as related but opposing functions are located in the same space, which matches how the user perceives and therefore search for the actions.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>This works well with undo functions, such as<a href=\"https:\/\/www.pinterest.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"> Pinterest<\/a>\u2019s Like and Unlike.<\/li>\n<\/ul>\n<ul>\n<li>Be consistent with both functions\u2019 appearances, i.e., don\u2019t change the font or text size.<\/li>\n<\/ul>\n<h2>7.\u00a0Direct Manipulation of Content &amp; Data<\/h2>\n<p><a href=\"https:\/\/twitter.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Twitter<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14131\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image23.png\" alt=\"image23\" width=\"671\" height=\"243\" \/><\/p>\n<p><a href=\"https:\/\/asana.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Asana<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14132\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image10-521x300.png\" alt=\"image10\" width=\"521\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image10-521x300.png 521w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image10-768x442.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image10-1024x589.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image10.png 1086w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/p>\n<p><strong>Wunderlist<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14133\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image28-700x102.png\" alt=\"image28\" width=\"700\" height=\"102\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image28-700x102.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image28-768x112.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image28.png 804w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>There are too many steps to manipulating content.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>Eliminate extra steps by allowing users to edit, delete, or add content in the same mode. Essentially, the less steps the user takes, the better, so this pattern is about increasing efficiency.<\/p>\n<p><a href=\"https:\/\/twitter.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Twitter<\/a> users can drag photos into the tweet without opening the Media menu, and Wunderlist users can edit the names of their tasks by simply clicking on them.<\/p>\n<p><a href=\"https:\/\/asana.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Asana<\/a>, though, handles this pattern the best. Without opening a new menu or switching screens, the user can add a new task, edit an existing task\u2019s name or details, assign a task to a project, change the task\u2019s privacy settings, comment on the task, unfollow it, or reorganize the order of tasks.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>To see where in your UI you can implement direct manipulation, try listing out the steps of a given task and analyzing them for redundancies. For example, to send an email, a user might click the new email button, click in the content menu, and start typing. A shortcut would be to have the user already in the content menu after clicking the new email button, saving them an extra step.<\/li>\n<\/ul>\n<h2>8. WYSIWYG Text Editor<\/h2>\n<p><a href=\"https:\/\/mail.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Gmail<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-14134\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image07-1-326x300.png\" alt=\"image07\" width=\"326\" height=\"300\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image07-1-326x300.png 326w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image07-1.png 508w\" sizes=\"auto, (max-width: 326px) 100vw, 326px\" \/><\/p>\n<p><a href=\"https:\/\/medium.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Medium<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14135\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image12.png\" alt=\"image12\" width=\"666\" height=\"149\" \/><\/p>\n<p><a href=\"https:\/\/www.quora.com\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Quora<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14136\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/image02-1.png\" alt=\"image02\" width=\"541\" height=\"299\" \/><\/p>\n<p><strong>Problem<\/strong><\/p>\n<p>The user is unsure about how different text formats will appear.<\/p>\n<p><strong>Solution<\/strong><\/p>\n<p>A WYSIWYG text editor shows the users precisely how their text will look when finished, eliminating all the confusion about different formats and superseding markdown formatting, preview modes, or HTML code.<\/p>\n<p>Just like the direct manipulation pattern above, WYSIWYG text editors save steps and time. Seeing the final product as they write it combines steps, which is why this pattern is implemented in almost all blogging and email platforms.<\/p>\n<p><strong>Tips<\/strong><\/p>\n<ul>\n<li>Don\u2019t neglect fonts \u2014 if your site uses a specific font, have that as the default.<\/li>\n<\/ul>\n<ul>\n<li>Use this pattern for sites in which users will spend time scrutinizing content (e.g. portfolio template sites, blogs, etc.)<\/li>\n<\/ul>\n<p><strong>Next Steps<\/strong><\/p>\n<p>If you found this post useful, check out the full length e-book <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-patterns-2016-volume-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web UI Patterns 2016 Volume 1<\/a>.<\/p>\n<p>The guide explains 140+ examples for 38 useful UI patterns.<\/p>\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-ui-design-patterns-2016-volume-1\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.awwwards.com\/awards\/gallery\/2016\/03\/ux-pin-ui-book-awwwards.png\" width=\"722\" height=\"378\" alt=\"Web UI Design Patterns 2016\"\/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dozens of examples and best practices. <\/p>\n","protected":false},"author":9,"featured_media":14187,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,7],"tags":[],"class_list":["post-14101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design","category-web-design"],"yoast_title":"","yoast_metadesc":"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>8 User Control UI Patterns Worth Using | UXPin<\/title>\n<meta name=\"description\" content=\"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"8 User Control UI Patterns Worth Using\" \/>\n<meta property=\"og:description\" content=\"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-16T02:28:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-09T14:33:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/570509d815440.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"8 User Control UI Patterns Worth Using\",\"datePublished\":\"2016-06-16T02:28:57+00:00\",\"dateModified\":\"2024-09-09T14:33:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/\"},\"wordCount\":1349,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/570509d815440.jpeg\",\"articleSection\":[\"Blog\",\"UI Design\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/\",\"name\":\"8 User Control UI Patterns Worth Using | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/570509d815440.jpeg\",\"datePublished\":\"2016-06-16T02:28:57+00:00\",\"dateModified\":\"2024-09-09T14:33:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/570509d815440.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/570509d815440.jpeg\",\"width\":700,\"height\":500,\"caption\":\"570509d815440\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/8-user-control-ui-patterns-worth-using\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"8 User Control UI Patterns Worth Using\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"8 User Control UI Patterns Worth Using | UXPin","description":"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/","og_locale":"en_US","og_type":"article","og_title":"8 User Control UI Patterns Worth Using","og_description":"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/","og_site_name":"Studio by UXPin","article_published_time":"2016-06-16T02:28:57+00:00","article_modified_time":"2024-09-09T14:33:21+00:00","og_image":[{"width":700,"height":500,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/570509d815440.jpeg","type":"image\/jpeg"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"8 User Control UI Patterns Worth Using","datePublished":"2016-06-16T02:28:57+00:00","dateModified":"2024-09-09T14:33:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/"},"wordCount":1349,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/570509d815440.jpeg","articleSection":["Blog","UI Design","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/","name":"8 User Control UI Patterns Worth Using | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/570509d815440.jpeg","datePublished":"2016-06-16T02:28:57+00:00","dateModified":"2024-09-09T14:33:21+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"When it comes to helping users manipulate on-page content, we see a few popular UI patterns persist through the years","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/570509d815440.jpeg","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/570509d815440.jpeg","width":700,"height":500,"caption":"570509d815440"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/8-user-control-ui-patterns-worth-using\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"8 User Control UI Patterns Worth Using"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14101"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14101\/revisions"}],"predecessor-version":[{"id":54435,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14101\/revisions\/54435"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/14187"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}